chore: token migration guide

lerna.json

@@ -86,5 +86,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "4.0.0-beta.13"
+  "version": "4.0.0-beta.14"
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/esbuild-plugin-styled-components",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "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.13",
+  "version": "4.0.0-beta.14",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",

packages/icon-files/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icon-files",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./src/index.cjs",

packages/icons-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icons-cli",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "license": "Apache-2.0",
   "bin": "./dist/index.js",
   "scripts": {

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icons",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -37,7 +37,7 @@
     "vitest": "^2.0.1"
   },
   "dependencies": {
-    "@charcoal-ui/icon-files": "^4.0.0-beta.13",
+    "@charcoal-ui/icon-files": "^4.0.0-beta.14",
     "dompurify": "^2.3.6",
     "warning": "^4.0.3"
   },

packages/react-sandbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react-sandbox",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -21,7 +21,7 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.13",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.14",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addons": "^7.4.1",
@@ -54,11 +54,11 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.13",
-    "@charcoal-ui/react": "^4.0.0-beta.13",
-    "@charcoal-ui/styled": "^4.0.0-beta.13",
-    "@charcoal-ui/theme": "^4.0.0-beta.13",
-    "@charcoal-ui/utils": "^4.0.0-beta.13",
+    "@charcoal-ui/foundation": "^4.0.0-beta.14",
+    "@charcoal-ui/react": "^4.0.0-beta.14",
+    "@charcoal-ui/styled": "^4.0.0-beta.14",
+    "@charcoal-ui/theme": "^4.0.0-beta.14",
+    "@charcoal-ui/utils": "^4.0.0-beta.14",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "warning": "^4.0.3"

packages/react/docs/v4.0.0.mdx

@@ -1,9 +1,106 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta, Story } from '@storybook/addon-docs'
+import { Unstyled } from '@storybook/blocks'
 
-<Meta title="react/v4.0.0" />
+<Meta title="react/docs/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>
+  )
+}
+```
+
+## ComponentAbstraction
+
+- `ComponentAbstraction`が削除されました。
+- `useComponentAbstraction`が削除されました。
+- `type LinkProps`が削除されました。
+
+## CharcoalProvider
+
+- テーマに関する属性が削除されました。
+  - `themeMap`, `defaultTheme`, `injectTokens`, `components`, `background`
+
+## 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`プロパティで上書きできるように変更しました。
+
 ## 新トークン移行
 
 新トークンへの移行時に旧トークンも引き続き利用したい場合は、以下のマイグレーション用 CSS を適用してください。特定のカラーだけを新トークンに変更したい場合は、該当するカラーを上書きすることができます。

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -14,6 +14,10 @@
     "./dist/index.css": {
       "import": "./dist/index.css",
       "require": "./dist/index.css"
+    },
+    "./dist/layered.css": {
+      "import": "./dist/layered.css",
+      "require": "./dist/layered.css"
     }
   },
   "types": "./dist/index.d.ts",
@@ -29,7 +33,7 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.13",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.14",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^8.0.5",
     "@storybook/react": "^8.0.5",
@@ -58,10 +62,10 @@
     "vitest": "^2.0.1"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.13",
-    "@charcoal-ui/icons": "^4.0.0-beta.13",
-    "@charcoal-ui/theme": "^4.0.0-beta.13",
-    "@charcoal-ui/utils": "^4.0.0-beta.13",
+    "@charcoal-ui/foundation": "^4.0.0-beta.14",
+    "@charcoal-ui/icons": "^4.0.0-beta.14",
+    "@charcoal-ui/theme": "^4.0.0-beta.14",
+    "@charcoal-ui/utils": "^4.0.0-beta.14",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",

packages/react/tsup.config.ts

@@ -1,5 +1,8 @@
 import { defineConfig } from 'tsup'
 import { styledComponentsPlugin } from '@charcoal-ui/esbuild-plugin-styled-components'
+import postcss from 'postcss'
+import fs from 'node:fs/promises'
+import path from 'node:path'
 
 export default defineConfig({
   entry: ['src/index.ts'],
@@ -11,5 +14,59 @@ export default defineConfig({
   },
   target: 'esnext',
   sourcemap: true,
-  esbuildPlugins: [styledComponentsPlugin],
+  esbuildPlugins: [
+    styledComponentsPlugin,
+    {
+      name: 'at-layer-charcoal',
+      setup(build) {
+        // NOTE: this will be called twice for esm and cjs.
+        build.onEnd(async (result) => {
+          const originalCssOutput = result.outputFiles?.find((file) =>
+            file.path.endsWith('css')
+          )
+          if (!originalCssOutput) {
+            throw new Error('[at-layer-charcoal]: expect original css output')
+          }
+
+          const layeredCssFilePath = originalCssOutput.path.replace(
+            'index.css',
+            'layered.css'
+          )
+          const layeredCssOutput = await postcss({
+            postcssPlugin: 'at-layer-charcoal',
+            Once(_, { AtRule, result }) {
+              const atLayerNode = new AtRule({
+                name: 'layer',
+                params: 'charcoal',
+                nodes: result.root.nodes,
+              })
+              result.root.nodes = [atLayerNode]
+            },
+          }).process(originalCssOutput.text, {
+            from: originalCssOutput.path,
+            to: layeredCssFilePath,
+            map: {
+              inline: false,
+            },
+          })
+
+          // https://github.com/evanw/esbuild/issues/2999
+          // this will be called before dist is created
+          await fs.mkdir(path.dirname(layeredCssFilePath), { recursive: true })
+          await Promise.all([
+            fs.writeFile(layeredCssFilePath, layeredCssOutput.content),
+            fs.writeFile(
+              `${layeredCssFilePath}.map`,
+              layeredCssOutput.map.toString()
+            ),
+          ])
+
+          // eslint-disable-next-line no-console
+          console.log(
+            `${build.initialOptions.format?.toUpperCase()} dist/layered.css`
+          )
+        })
+      },
+    },
+  ],
 })

packages/styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/styled",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "license": "Apache-2.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.cjs.js",
@@ -38,9 +38,9 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.13",
-    "@charcoal-ui/theme": "^4.0.0-beta.13",
-    "@charcoal-ui/utils": "^4.0.0-beta.13",
+    "@charcoal-ui/foundation": "^4.0.0-beta.14",
+    "@charcoal-ui/theme": "^4.0.0-beta.14",
+    "@charcoal-ui/utils": "^4.0.0-beta.14",
     "warning": "^4.0.3"
   },
   "peerDependencies": {

packages/tailwind-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/tailwind-config",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -32,9 +32,9 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.13",
-    "@charcoal-ui/theme": "^4.0.0-beta.13",
-    "@charcoal-ui/utils": "^4.0.0-beta.13"
+    "@charcoal-ui/foundation": "^4.0.0-beta.14",
+    "@charcoal-ui/theme": "^4.0.0-beta.14",
+    "@charcoal-ui/utils": "^4.0.0-beta.14"
   },
   "peerDependencies": {
     "csstype": ">=3.0.0",

packages/tailwind-diff/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/tailwind-diff",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "bin": "bin/tailwind-diff.js",
   "scripts": {
     "build": "tsc",

packages/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/theme",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -45,8 +45,8 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.13",
-    "@charcoal-ui/utils": "^4.0.0-beta.13",
+    "@charcoal-ui/foundation": "^4.0.0-beta.14",
+    "@charcoal-ui/utils": "^4.0.0-beta.14",
     "polished": "^4.1.4"
   },
   "files": [

packages/token-cli/package.json

@@ -2,7 +2,7 @@
   "name": "@charcoal-ui/token-cli",
   "bin": "./dist/index.js",
   "type": "commonjs",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.14",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {