Merge branch 'main' of ssh://github.com/pixiv/charcoal into chore/upg…

…rade-react18-1

.github/workflows/publish.yml

@@ -14,6 +14,7 @@ on:
         options:
           - latest
           - beta
+          - rc
 
 jobs:
   build:

.github/workflows/test.yml

@@ -45,6 +45,7 @@ jobs:
           cache: yarn
 
       - run: yarn install --immutable --inline-builds
+      - run: yarn build
       - run: yarn lint
 
   typecheck:

.github/workflows/tokens.yml

@@ -53,10 +53,11 @@ jobs:
 
       - name: Copy to theme package
         run: |
-          rm -rf ../theme/src/json
-          rm -rf ../theme/src/css
-          cp -r ./tokens ../theme/src/json
-          cp -r ./build/css ../theme/src/css
+          rm -rf ../theme/src/json/*.json
+          rm -rf ../theme/src/css/*.css
+          cp -r ./tokens/*.json ../theme/src/json/
+          cp -r ./build/css/*.css ../theme/src/css/
+          find ../theme/src
 
       - name: Run prettier
         working-directory: ./

.prettierignore

@@ -15,4 +15,5 @@ LICENSE
 /packages/token-cli/build/
 /packages/token-cli/tokens/
 /packages/token-cli/out/
-/packages/theme/src/css/
+/packages/theme/src/unstable-css/
+.storybook/src/v4.0.0.mdx

.storybook/main.js

@@ -4,6 +4,7 @@ const { promisify } = require('util')
 const glob = promisify(require('glob'))
 const { viteCommonjs } = require('@originjs/vite-plugin-commonjs')
 
+/** @type {import('@storybook/react-vite').StorybookConfig}*/
 module.exports = {
   stories: [
     '../packages/**/*.mdx',
@@ -55,17 +56,13 @@ module.exports = {
     if (configType === 'PRODUCTION') {
       return config
     }
-    // 事前ビルドが不要になるようにマッピング
-    config.resolve.alias = { ...config.resolve.alias, ...(await alias()) }
     return config
   },
 
   async viteFinal(config, { configType }) {
     if (configType === 'PRODUCTION') {
       return config
     }
-    // 事前ビルドが不要になるようにマッピング
-    config.resolve.alias = { ...config.resolve.alias, ...(await alias()) }
     // proxyが噛んでいる場合にクライアント側のwssポート番号を変更する
     if (typeof process.env.CLIENT_PORT !== 'undefined') {
       config.server.hmr.port = process.env.CLIENT_PORT
@@ -108,19 +105,25 @@ module.exports = {
   docs: {
     autodocs: true,
   },
+  staticDirs: ['./static'],
+  managerHead: (head) => `${head}
+    <title>Charcoal ドキュメント</title>
+    <meta
+      property="description"
+      content="ピクシブ株式会社のデザインシステム charcoal のドキュメントサイト"
+    />
+    <meta property="og:url" content="" />
+    <meta property="og:title" content="charcoal"} />
+    <meta property="og:site_name" content="Charcoal ドキュメント" />
+    <meta
+      property="og:description"
+      content="ピクシブ株式会社のデザインシステム charcoal のドキュメントサイト"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="/charcoal-ogp.jpg" />
+  `,
 }
 
-const packagesDir = path.resolve(__dirname, '../packages')
-const alias = async () =>
-  Object.fromEntries(
-    (await glob(path.resolve(packagesDir, '*'))).map((absolute) => {
-      const relative = path.relative(packagesDir, absolute)
-      const from = path.join('@charcoal-ui', relative)
-      const to = path.resolve(absolute, 'src')
-      return [from, to]
-    })
-  )
-
 function getAbsolutePath(value) {
   return dirname(require.resolve(join(value, 'package.json')))
 }

.storybook/src/README.mdx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/addon-docs'
 
 <Meta title="README" />
 
-![charcoal logo](https://charcoal-web.pixiv.design/charcoal-ogp.jpg)
+![charcoal logo](/charcoal-ogp.jpg)
 
 # Charcoal
 

.storybook/src/v4.0.0.mdx

@@ -0,0 +1,242 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { Unstyled } from '@storybook/blocks'
+
+<Meta title="v4.0.0" />
+
+# @charcoal-ui/react@v4.0.0
+
+- `v4.0.0`では多くの破壊的な変更があります。
+- `styled-components`への依存を無くし、css ファイルを読み込む方式に変更しました。
+
+```tsx
+import { CharcoalProvider, Button } from '@charcoal-ui/react'
+
+import '@charcoal-ui/react/dist/index.css'
+
+function App() {
+  return (
+    <CharcoalProvider>
+      <Button>Charcoal</Button>
+    </CharcoalProvider>
+  )
+}
+```
+
+※ styled 廃止した影響で classname の優先度が変わるケースがあります。
+
+```tsx
+import { Button } from '@charcoal-ui/react'
+import styled from 'styled-components'
+
+// 今ままでと違う見た目になる可能性がある
+const NewButton = styled(Button)`
+  color: red;
+`
+```
+
+この場合 @layer 版の利用をおすすめしますが、サポート対象が iOS 15.4+ になります。
+
+```diff
+- import '@charcoal-ui/react/dist/index.css'
++ import '@charcoal-ui/react/dist/layered.css'
+```
+
+## ComponentAbstraction
+
+- `ComponentAbstraction`が削除されました。
+- `useComponentAbstraction`が削除されました。
+- `type LinkProps`が削除されました。
+
+## CharcoalProvider
+
+- テーマに関する属性が削除されました。
+  - `themeMap`, `defaultTheme`, `injectTokens`, `components`, `background`
+
+Before
+
+```tsx
+// ...
+
+<CharcoalProvider themeMap={themeMap}>
+  <YourApp />
+</CharcoalProvider>
+```
+
+After
+
+styled を継続して利用する場合
+
+```tsx
+// ...
+import { TokenInjector } from '@charcoal-ui/styled'
+import { ThemeProvider } from 'styled-components'
+<CharcoalProvider>
+  <TokenInjector theme={themeMap} />
+  <ThemeProvider theme={themeMap[':root']}>
+    <YourApp />
+  </ThemeProvider>
+</CharcoalProvider>
+```
+
+
+tailwind単体で利用可能にするためにデフォルトでcss変数v1を提供するようになりました。
+TokenInjectorと併用する場合falseに指定してください。
+
+```diff
+module.exports = {
+  ...
+  presets: [
+    createTailwindConfig({
+      version: 'v3',
+      theme: {
+        ':root': light,
+        '[data-dark="true"]': dark,
+      },
++     cssVariablesV1: false,
+      unstableTokenV2: true,
+    }),
+  ],
+  ...
+}
+
+```
+
+## Button
+
+- `ComponentAbstraction`と`to`を用いたカスタム要素の設定を、`component`に`React.ElementType`を指定することによって行えるように変更しました。
+
+Before
+
+```tsx
+<ComponentAbstraction components={{ Link: RouterLink }}>
+  <Button to="...">Link</Button>
+</ComponentAbstraction>
+```
+
+After
+
+```tsx
+<Button component="a" href="...">Link</Button>
+<Button component={RouterLink} to="...">Link</Button>
+<Button component={NextLink} href="...">Link</Button>
+```
+
+## Checkbox
+
+- `Checkbox`の`input`要素を`children`がない場合に label で囲わないようにしました。
+- `React.HTMLProps<HTMLInputElement>`を継承するように変更しました。
+- アイコンを CSS を用いて表示するように変更しました。
+
+## Clickable
+
+- `Button`と同様に`to`による指定を削除し、`component`によってカスタムできるように変更しました。
+- `type ClickableElement`が削除されました。
+
+## DropdownSelector
+
+- `aria-labelledby`,`aria-describedby`を適用するように変更しました。
+
+## IconButton
+
+- `Button`と同様に`to`による指定を削除し、`component`によってカスタムできるように変更しました。
+
+## MultiSelect
+
+- `overlay`の代替として`Checkbox`の`rounded`が追加されました。
+
+## RadioGroup
+
+- `aria-labelledby`, `aria-orientation`をプロパティに追加しました。
+- `label`をオプショナルに変更しました。
+
+## Switch
+
+- `Checkbox`の`input`要素を常に`label`で囲わないようにしました。
+- `React.HTMLProps<HTMLInputElement>`を継承するように変更しました。
+
+## TagItem
+
+- `Button`と同様に`to`による指定を削除し、`component`によってカスタムできるように変更しました。
+
+## TextArea
+
+- `textarea`要素の`props`を継承するように変更しました。
+- 文字数の計算ロジックを`getCount`プロパティで上書きできるように変更しました。
+
+## TextField
+
+- `input`要素の`props`を継承するように変更しました。
+- 文字数の計算ロジックを`getCount`プロパティで上書きできるように変更しました。
+
+## その他
+
+- `PixivIcon.extend` に渡す内容が sanitize されなくなります。必要な場合事前に sanitize するか、dompurify などを挟んでください [fix!(@charcoal-ui/icons): remove dompurify from v4. #643](https://github.com/pixiv/charcoal/pull/643)
+
+# Design Token 2.0 の実験的サポート
+
+## styled-components
+
+実装例: [feat: token v2 demo styled #655](https://github.com/pixiv/charcoal/pull/655)
+
+```ts
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import tokens from '@charcoal-ui/theme/unstable-tokens/css-variables.json'
+
+const User = styled.a`
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: calc(${tokens.radius.oval} * 1px);
+  cursor: pointer;
+  color: ${tokens.color.icon.default};
+  background-color: ${tokens.color.container.secondary.default};
+  &:hover {
+    color: ${tokens.color.icon.hover};
+    background-color: ${tokens.color.container.secondary.hover};
+  }
+  &:active {
+    color: ${tokens.color.icon.press};
+    background-color: ${tokens.color.container.secondary.press};
+  }
+`
+```
+
+## tailwindcss
+
+実装例: [feat: allow design token v2 in tailwind config #650](https://github.com/pixiv/charcoal/pull/650)
+
+```diff
+const { light, dark } = require('@charcoal-ui/theme')
+const {
+  createTailwindConfig,
+} = require('@charcoal-ui/tailwind-config')
+
+/**
+ * @type {import('tailwindcss/tailwind-config').TailwindConfig}
+ */
+module.exports = {
+  darkMode: false,
+  content: ['**/*.tsx'],
+  presets: [
+    createTailwindConfig({
+      version: 'v3',
+      theme: {
+        ':root': light,
+        '[data-dark="true"]': dark,
+      },
++     unstableTokenV2: true,
+    }),
+  ],
+  corePlugins: {
+```
+
+```html
+<a
+  className="rounded-oval text-icon hover:text-icon-hover active:text-icon-press bg-container-secondary hover:bg-container-hover active:bg-container-press grid h-[40px] w-[40px] cursor-pointer place-items-center"
+  aria-label="UserIcon"
+>
+  <Icon name="24/FaceEdit" />
+</a>
+```

.storybook/tailwind.config.js

@@ -14,6 +14,8 @@ module.exports = {
         ':root': light,
         '[data-dark="true"]': dark,
       },
+      cssVariablesV1: false,
+      unstableTokenV2: true,
     }),
   ],
   corePlugins: {

.storybook/theme-decorator.tsx

@@ -4,6 +4,10 @@ import { useDarkMode } from 'storybook-dark-mode'
 import { light, dark } from '@charcoal-ui/theme'
 import { TokenInjector, themeSelector, themeSetter } from '@charcoal-ui/styled'
 
+import '../packages/theme/src/unstable-css/_variables_dark.css'
+import '../packages/theme/src/unstable-css/_variables_light.css'
+import '../packages/react/dist/index.css'
+
 const setter = themeSetter()
 
 const Theme = ({ children }) => {

lerna.json

@@ -86,5 +86,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "4.0.0-beta.16"
+  "version": "4.0.0-rc.2"
 }

packages/esbuild-plugin-styled-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/esbuild-plugin-styled-components",
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-rc.2",
   "private": true,
   "license": "Apache-2.0",
   "main": "src/index.ts",

packages/foundation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/foundation",
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-rc.2",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",