diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index d9e165e6a..6c42ed9de 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -14,6 +14,7 @@ on: options: - latest - beta + - rc jobs: build: diff --git a/.prettierignore b/.prettierignore index c6462a6fe..3a5f305b9 100644 --- a/.prettierignore +++ b/.prettierignore @@ -16,4 +16,4 @@ LICENSE /packages/token-cli/tokens/ /packages/token-cli/out/ /packages/theme/src/unstable-css/ -/packages/react/docs/v4.0.0.mdx +.storybook/src/v4.0.0.mdx diff --git a/packages/react/docs/v4.0.0.mdx b/.storybook/src/v4.0.0.mdx similarity index 57% rename from packages/react/docs/v4.0.0.mdx rename to .storybook/src/v4.0.0.mdx index c1e475d82..4bd27ad2f 100644 --- a/packages/react/docs/v4.0.0.mdx +++ b/.storybook/src/v4.0.0.mdx @@ -1,7 +1,7 @@ import { Meta, Story } from '@storybook/addon-docs' import { Unstyled } from '@storybook/blocks' - + # @charcoal-ui/react@v4.0.0 @@ -22,6 +22,25 @@ function App() { } ``` +※ 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`が削除されました。 @@ -100,7 +119,6 @@ After ## MultiSelect -- コンポーネントが削除されました。 - `overlay`の代替として`Checkbox`の`rounded`が追加されました。 ## RadioGroup @@ -126,3 +144,76 @@ After - `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 + + + +``` diff --git a/lerna.json b/lerna.json index 9b6d81910..ec8e87a2b 100644 --- a/lerna.json +++ b/lerna.json @@ -86,5 +86,5 @@ "packages": [ "packages/*" ], - "version": "4.0.0-beta.17" + "version": "4.0.0-rc.0" } diff --git a/packages/esbuild-plugin-styled-components/package.json b/packages/esbuild-plugin-styled-components/package.json index 5fda3891b..f13f11ad8 100644 --- 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.17", + "version": "4.0.0-rc.0", "private": true, "license": "Apache-2.0", "main": "src/index.ts", diff --git a/packages/foundation/package.json b/packages/foundation/package.json index b903a987c..5c354bdef 100644 --- a/packages/foundation/package.json +++ b/packages/foundation/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/foundation", - "version": "4.0.0-beta.17", + "version": "4.0.0-rc.0", "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 index 73f936833..2e7ac2566 100644 --- 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.17", + "version": "4.0.0-rc.0", "license": "Apache-2.0", "type": "module", "main": "./src/index.cjs", diff --git a/packages/icons-cli/package.json b/packages/icons-cli/package.json index 27f463870..a08afcc1a 100644 --- 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.17", + "version": "4.0.0-rc.0", "license": "Apache-2.0", "bin": "./dist/index.js", "scripts": { diff --git a/packages/icons/package.json b/packages/icons/package.json index a5dc3a82e..66f8cc009 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/icons", - "version": "4.0.0-beta.17", + "version": "4.0.0-rc.0", "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.17", + "@charcoal-ui/icon-files": "^4.0.0-rc.0", "warning": "^4.0.3" }, "files": [ diff --git a/packages/react-sandbox/package.json b/packages/react-sandbox/package.json index 80dab0f1a..2fbb2d98c 100644 --- 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.17", + "version": "4.0.0-rc.0", "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.17", + "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-rc.0", "@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.17", - "@charcoal-ui/react": "^4.0.0-beta.17", - "@charcoal-ui/styled": "^4.0.0-beta.17", - "@charcoal-ui/theme": "^4.0.0-beta.17", - "@charcoal-ui/utils": "^4.0.0-beta.17", + "@charcoal-ui/foundation": "^4.0.0-rc.0", + "@charcoal-ui/react": "^4.0.0-rc.0", + "@charcoal-ui/styled": "^4.0.0-rc.0", + "@charcoal-ui/theme": "^4.0.0-rc.0", + "@charcoal-ui/utils": "^4.0.0-rc.0", "polished": "^4.1.4", "react-spring": "^9.0.0", "warning": "^4.0.3" diff --git a/packages/react/package.json b/packages/react/package.json index 09226b454..669e2c021 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/react", - "version": "4.0.0-beta.17", + "version": "4.0.0-rc.0", "license": "Apache-2.0", "main": "./dist/index.cjs.js", "module": "./dist/index.esm.js", @@ -33,7 +33,7 @@ "test": "vitest run --passWithNoTests" }, "devDependencies": { - "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.17", + "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-rc.0", "@react-types/switch": "^3.1.2", "@storybook/addon-actions": "^8.0.5", "@storybook/react": "^8.0.5", @@ -62,10 +62,10 @@ "vitest": "^2.0.1" }, "dependencies": { - "@charcoal-ui/foundation": "^4.0.0-beta.17", - "@charcoal-ui/icons": "^4.0.0-beta.17", - "@charcoal-ui/theme": "^4.0.0-beta.17", - "@charcoal-ui/utils": "^4.0.0-beta.17", + "@charcoal-ui/foundation": "^4.0.0-rc.0", + "@charcoal-ui/icons": "^4.0.0-rc.0", + "@charcoal-ui/theme": "^4.0.0-rc.0", + "@charcoal-ui/utils": "^4.0.0-rc.0", "@react-aria/button": "^3.9.1", "@react-aria/checkbox": "^3.13.0", "@react-aria/dialog": "^3.5.10", diff --git a/packages/styled/package.json b/packages/styled/package.json index 657b6e9be..99b721fd4 100644 --- a/packages/styled/package.json +++ b/packages/styled/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/styled", - "version": "4.0.0-beta.17", + "version": "4.0.0-rc.0", "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.17", - "@charcoal-ui/theme": "^4.0.0-beta.17", - "@charcoal-ui/utils": "^4.0.0-beta.17", + "@charcoal-ui/foundation": "^4.0.0-rc.0", + "@charcoal-ui/theme": "^4.0.0-rc.0", + "@charcoal-ui/utils": "^4.0.0-rc.0", "warning": "^4.0.3" }, "peerDependencies": { diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json index 2666067ce..cb39d0f87 100644 --- 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.17", + "version": "4.0.0-rc.0", "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.17", - "@charcoal-ui/theme": "^4.0.0-beta.17", - "@charcoal-ui/utils": "^4.0.0-beta.17" + "@charcoal-ui/foundation": "^4.0.0-rc.0", + "@charcoal-ui/theme": "^4.0.0-rc.0", + "@charcoal-ui/utils": "^4.0.0-rc.0" }, "peerDependencies": { "csstype": ">=3.0.0", diff --git a/packages/tailwind-diff/package.json b/packages/tailwind-diff/package.json index fd338e6bf..8b12b210c 100644 --- 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.17", + "version": "4.0.0-rc.0", "bin": "bin/tailwind-diff.js", "scripts": { "build": "tsc", diff --git a/packages/theme/package.json b/packages/theme/package.json index e00c93a8f..8f16a4bf3 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/theme", - "version": "4.0.0-beta.17", + "version": "4.0.0-rc.0", "license": "Apache-2.0", "main": "./dist/index.cjs.js", "module": "./dist/index.esm.js", @@ -63,8 +63,8 @@ "vitest": "^2.0.2" }, "dependencies": { - "@charcoal-ui/foundation": "^4.0.0-beta.17", - "@charcoal-ui/utils": "^4.0.0-beta.17", + "@charcoal-ui/foundation": "^4.0.0-rc.0", + "@charcoal-ui/utils": "^4.0.0-rc.0", "change-case-all": "^2.1.0", "deepmerge": "^4.3.1", "polished": "^4.1.4" diff --git a/packages/token-cli/package.json b/packages/token-cli/package.json index 3d399b803..7eb53a2ad 100644 --- a/packages/token-cli/package.json +++ b/packages/token-cli/package.json @@ -3,7 +3,7 @@ "private": true, "bin": "./dist/index.js", "type": "commonjs", - "version": "4.0.0-beta.17", + "version": "4.0.0-rc.0", "license": "Apache-2.0", "scripts": { "build": "FORCE_COLOR=1 tsup-node", diff --git a/packages/utils/package.json b/packages/utils/package.json index 442bd89f6..6a057a2c4 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/utils", - "version": "4.0.0-beta.17", + "version": "4.0.0-rc.0", "license": "Apache-2.0", "main": "./dist/index.cjs.js", "module": "./dist/index.esm.js", @@ -26,7 +26,7 @@ "vitest": "^2.0.2" }, "dependencies": { - "@charcoal-ui/foundation": "^4.0.0-beta.17", + "@charcoal-ui/foundation": "^4.0.0-rc.0", "polished": "^4.1.4" }, "files": [ diff --git a/yarn.lock b/yarn.lock index db0f7b3f3..99470bc37 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1940,7 +1940,7 @@ __metadata: languageName: node linkType: hard -"@charcoal-ui/esbuild-plugin-styled-components@^4.0.0-beta.17, @charcoal-ui/esbuild-plugin-styled-components@workspace:packages/esbuild-plugin-styled-components": +"@charcoal-ui/esbuild-plugin-styled-components@^4.0.0-rc.0, @charcoal-ui/esbuild-plugin-styled-components@workspace:packages/esbuild-plugin-styled-components": version: 0.0.0-use.local resolution: "@charcoal-ui/esbuild-plugin-styled-components@workspace:packages/esbuild-plugin-styled-components" dependencies: @@ -1952,7 +1952,7 @@ __metadata: languageName: unknown linkType: soft -"@charcoal-ui/foundation@^4.0.0-beta.17, @charcoal-ui/foundation@workspace:packages/foundation": +"@charcoal-ui/foundation@^4.0.0-rc.0, @charcoal-ui/foundation@workspace:packages/foundation": version: 0.0.0-use.local resolution: "@charcoal-ui/foundation@workspace:packages/foundation" dependencies: @@ -1964,7 +1964,7 @@ __metadata: languageName: unknown linkType: soft -"@charcoal-ui/icon-files@^4.0.0-beta.17, @charcoal-ui/icon-files@workspace:packages/icon-files": +"@charcoal-ui/icon-files@^4.0.0-rc.0, @charcoal-ui/icon-files@workspace:packages/icon-files": version: 0.0.0-use.local resolution: "@charcoal-ui/icon-files@workspace:packages/icon-files" languageName: unknown @@ -2001,11 +2001,11 @@ __metadata: languageName: unknown linkType: soft -"@charcoal-ui/icons@^4.0.0-beta.17, @charcoal-ui/icons@workspace:packages/icons": +"@charcoal-ui/icons@^4.0.0-rc.0, @charcoal-ui/icons@workspace:packages/icons": version: 0.0.0-use.local resolution: "@charcoal-ui/icons@workspace:packages/icons" dependencies: - "@charcoal-ui/icon-files": ^4.0.0-beta.17 + "@charcoal-ui/icon-files": ^4.0.0-rc.0 "@storybook/react": ^8.0.5 "@types/jest": ^27.4.0 "@types/react": ^17.0.38 @@ -2046,12 +2046,12 @@ __metadata: version: 0.0.0-use.local resolution: "@charcoal-ui/react-sandbox@workspace:packages/react-sandbox" dependencies: - "@charcoal-ui/esbuild-plugin-styled-components": ^4.0.0-beta.17 - "@charcoal-ui/foundation": ^4.0.0-beta.17 - "@charcoal-ui/react": ^4.0.0-beta.17 - "@charcoal-ui/styled": ^4.0.0-beta.17 - "@charcoal-ui/theme": ^4.0.0-beta.17 - "@charcoal-ui/utils": ^4.0.0-beta.17 + "@charcoal-ui/esbuild-plugin-styled-components": ^4.0.0-rc.0 + "@charcoal-ui/foundation": ^4.0.0-rc.0 + "@charcoal-ui/react": ^4.0.0-rc.0 + "@charcoal-ui/styled": ^4.0.0-rc.0 + "@charcoal-ui/theme": ^4.0.0-rc.0 + "@charcoal-ui/utils": ^4.0.0-rc.0 "@storybook/addon-actions": ^7.4.1 "@storybook/addon-knobs": ^7.0.2 "@storybook/addons": ^7.4.1 @@ -2092,15 +2092,15 @@ __metadata: languageName: unknown linkType: soft -"@charcoal-ui/react@^4.0.0-beta.17, @charcoal-ui/react@workspace:packages/react": +"@charcoal-ui/react@^4.0.0-rc.0, @charcoal-ui/react@workspace:packages/react": version: 0.0.0-use.local resolution: "@charcoal-ui/react@workspace:packages/react" dependencies: - "@charcoal-ui/esbuild-plugin-styled-components": ^4.0.0-beta.17 - "@charcoal-ui/foundation": ^4.0.0-beta.17 - "@charcoal-ui/icons": ^4.0.0-beta.17 - "@charcoal-ui/theme": ^4.0.0-beta.17 - "@charcoal-ui/utils": ^4.0.0-beta.17 + "@charcoal-ui/esbuild-plugin-styled-components": ^4.0.0-rc.0 + "@charcoal-ui/foundation": ^4.0.0-rc.0 + "@charcoal-ui/icons": ^4.0.0-rc.0 + "@charcoal-ui/theme": ^4.0.0-rc.0 + "@charcoal-ui/utils": ^4.0.0-rc.0 "@react-aria/button": ^3.9.1 "@react-aria/checkbox": ^3.13.0 "@react-aria/dialog": ^3.5.10 @@ -2148,13 +2148,13 @@ __metadata: languageName: unknown linkType: soft -"@charcoal-ui/styled@^4.0.0-beta.17, @charcoal-ui/styled@workspace:packages/styled": +"@charcoal-ui/styled@^4.0.0-rc.0, @charcoal-ui/styled@workspace:packages/styled": version: 0.0.0-use.local resolution: "@charcoal-ui/styled@workspace:packages/styled" dependencies: - "@charcoal-ui/foundation": ^4.0.0-beta.17 - "@charcoal-ui/theme": ^4.0.0-beta.17 - "@charcoal-ui/utils": ^4.0.0-beta.17 + "@charcoal-ui/foundation": ^4.0.0-rc.0 + "@charcoal-ui/theme": ^4.0.0-rc.0 + "@charcoal-ui/utils": ^4.0.0-rc.0 "@types/react": ^17.0.38 "@types/react-test-renderer": ^17.0.2 "@types/styled-components": ^5.1.21 @@ -2181,9 +2181,9 @@ __metadata: version: 0.0.0-use.local resolution: "@charcoal-ui/tailwind-config@workspace:packages/tailwind-config" dependencies: - "@charcoal-ui/foundation": ^4.0.0-beta.17 - "@charcoal-ui/theme": ^4.0.0-beta.17 - "@charcoal-ui/utils": ^4.0.0-beta.17 + "@charcoal-ui/foundation": ^4.0.0-rc.0 + "@charcoal-ui/theme": ^4.0.0-rc.0 + "@charcoal-ui/utils": ^4.0.0-rc.0 jsdom: ^24.1.0 postcss: ^8.4.5 postcss-selector-parser: ^6.0.9 @@ -2216,12 +2216,12 @@ __metadata: languageName: unknown linkType: soft -"@charcoal-ui/theme@^4.0.0-beta.17, @charcoal-ui/theme@workspace:packages/theme": +"@charcoal-ui/theme@^4.0.0-rc.0, @charcoal-ui/theme@workspace:packages/theme": version: 0.0.0-use.local resolution: "@charcoal-ui/theme@workspace:packages/theme" dependencies: - "@charcoal-ui/foundation": ^4.0.0-beta.17 - "@charcoal-ui/utils": ^4.0.0-beta.17 + "@charcoal-ui/foundation": ^4.0.0-rc.0 + "@charcoal-ui/utils": ^4.0.0-rc.0 "@types/css": ^0.0.38 change-case-all: ^2.1.0 cpx: ^1.5.0 @@ -2256,11 +2256,11 @@ __metadata: languageName: unknown linkType: soft -"@charcoal-ui/utils@^4.0.0-beta.17, @charcoal-ui/utils@workspace:packages/utils": +"@charcoal-ui/utils@^4.0.0-rc.0, @charcoal-ui/utils@workspace:packages/utils": version: 0.0.0-use.local resolution: "@charcoal-ui/utils@workspace:packages/utils" dependencies: - "@charcoal-ui/foundation": ^4.0.0-beta.17 + "@charcoal-ui/foundation": ^4.0.0-rc.0 npm-run-all: ^4.1.5 polished: ^4.1.4 rimraf: ^3.0.2