Merge branch 'v4.0.0' of ssh://github.com/pixiv/charcoal into chore/u…

…pgrade-react18-1
pixiv · Aug 28, 2024 · c2f0941 · c2f0941
2 parents f11a700 + e071f61
commit c2f0941
Show file tree

Hide file tree

Showing 17 changed files with 1,730 additions and 190 deletions.
diff --git a/lerna.json b/lerna.json
@@ -86,5 +86,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "4.0.0-beta.13"
+  "version": "4.0.0-beta.14"
 }
diff --git a/packages/esbuild-plugin-styled-components/package.json b/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",

diff --git a/packages/foundation/package.json b/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",

diff --git a/packages/icon-files/package.json b/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",

diff --git a/packages/icons-cli/package.json b/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": {

diff --git a/packages/icons/package.json b/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",
@@ -36,7 +36,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"
   },

diff --git a/packages/react-sandbox/package.json b/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,12 @@
     "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",
+    "@storybook/api": "^7.4.1",
+    "@storybook/components": "^7.4.1",
     "@storybook/core-events": "^7.4.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
@@ -44,11 +49,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"

diff --git a/packages/react/docs/v4.0.0.mdx b/packages/react/docs/v4.0.0.mdx
@@ -0,0 +1,102 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { Unstyled } from '@storybook/blocks'
+
+<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`プロパティで上書きできるように変更しました。
diff --git a/packages/react/package.json b/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",
@@ -55,10 +59,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",

diff --git a/packages/react/tsup.config.ts b/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`
+          )
+        })
+      },
+    },
+  ],
 })
diff --git a/packages/styled/package.json b/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",
@@ -37,9 +37,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": {

diff --git a/packages/tailwind-config/package.json b/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",

diff --git a/packages/tailwind-diff/package.json b/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",

diff --git a/packages/theme/package.json b/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",
@@ -35,8 +35,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": [

diff --git a/packages/token-cli/package.json b/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": {