From 5a62c7128952718aceca04b6a6e89109e424e933 Mon Sep 17 00:00:00 2001 From: yue Date: Sat, 14 Dec 2024 23:14:29 +0900 Subject: [PATCH] feat: mark tokens unstable --- .prettierignore | 2 +- .storybook/theme-decorator.tsx | 4 +-- packages/react/docs/TokenV2DemoStyled.tsx | 2 +- packages/tailwind-config/src/tokenV2.ts | 2 +- packages/theme/cli/token-object.ts | 21 ++++++++------- packages/theme/package.json | 26 +++++++++---------- .../{css => unstable-css}/_variables_dark.css | 0 .../_variables_dark.css.d.ts | 0 .../_variables_light.css | 0 .../_variables_light.css.d.ts | 0 .../__snapshots__/token-object.test.ts.snap | 0 .../changecase-keys.test.ts.snap | 0 .../helpers/changecase-keys.test-d.ts | 0 .../helpers/changecase-keys.test.ts | 0 .../helpers/changecase-keys.ts | 0 .../helpers/is-empty-array.ts | 0 .../helpers/nest-object.test.ts | 0 .../helpers/nest-object.ts | 0 .../index.ts | 0 .../reference-token.test.ts | 0 .../reference-token.ts | 0 .../to-token-object.ts | 0 .../token-object.bench.ts | 0 .../token-object.test.ts | 4 +-- .../types.ts | 0 packages/theme/tsup.config.ts | 2 +- 26 files changed, 33 insertions(+), 30 deletions(-) rename packages/theme/src/{css => unstable-css}/_variables_dark.css (100%) rename packages/theme/src/{css => unstable-css}/_variables_dark.css.d.ts (100%) rename packages/theme/src/{css => unstable-css}/_variables_light.css (100%) rename packages/theme/src/{css => unstable-css}/_variables_light.css.d.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/__snapshots__/token-object.test.ts.snap (100%) rename packages/theme/src/{token-object => unstable-token-object}/helpers/__snapshots__/changecase-keys.test.ts.snap (100%) rename packages/theme/src/{token-object => unstable-token-object}/helpers/changecase-keys.test-d.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/helpers/changecase-keys.test.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/helpers/changecase-keys.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/helpers/is-empty-array.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/helpers/nest-object.test.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/helpers/nest-object.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/index.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/reference-token.test.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/reference-token.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/to-token-object.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/token-object.bench.ts (100%) rename packages/theme/src/{token-object => unstable-token-object}/token-object.test.ts (97%) rename packages/theme/src/{token-object => unstable-token-object}/types.ts (100%) diff --git a/.prettierignore b/.prettierignore index 962bde455..c6462a6fe 100644 --- a/.prettierignore +++ b/.prettierignore @@ -15,5 +15,5 @@ LICENSE /packages/token-cli/build/ /packages/token-cli/tokens/ /packages/token-cli/out/ -/packages/theme/src/css/ +/packages/theme/src/unstable-css/ /packages/react/docs/v4.0.0.mdx diff --git a/.storybook/theme-decorator.tsx b/.storybook/theme-decorator.tsx index d9424a641..2258ee6bb 100644 --- a/.storybook/theme-decorator.tsx +++ b/.storybook/theme-decorator.tsx @@ -4,8 +4,8 @@ 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/css/_variables_dark.css' -import '../packages/theme/src/css/_variables_light.css' +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() diff --git a/packages/react/docs/TokenV2DemoStyled.tsx b/packages/react/docs/TokenV2DemoStyled.tsx index b54eca98c..cb8b5a243 100644 --- a/packages/react/docs/TokenV2DemoStyled.tsx +++ b/packages/react/docs/TokenV2DemoStyled.tsx @@ -4,7 +4,7 @@ import { useState } from 'react' import styled from 'styled-components' // This does not work :( // import tokens from '@charcoal-ui/theme/tokens/camel/css-variables.json' -import tokens from '../../theme/dist/tokens/camel/css-variables.json' +import tokens from '../../theme/dist/unstable-tokens/camel/css-variables.json' import { Button, Icon } from '@charcoal-ui/react' const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping'] diff --git a/packages/tailwind-config/src/tokenV2.ts b/packages/tailwind-config/src/tokenV2.ts index ed4c5da23..b4ece1f41 100644 --- a/packages/tailwind-config/src/tokenV2.ts +++ b/packages/tailwind-config/src/tokenV2.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-unsafe-assignment */ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ -import light from '@charcoal-ui/theme/tokens/css-variables.json' +import light from '@charcoal-ui/theme/unstable-tokens/css-variables.json' import { TailwindConfig, TailwindThemeFontSizes, diff --git a/packages/theme/cli/token-object.ts b/packages/theme/cli/token-object.ts index 394524353..0d024ee48 100644 --- a/packages/theme/cli/token-object.ts +++ b/packages/theme/cli/token-object.ts @@ -1,9 +1,12 @@ /* eslint-disable no-console */ import { readFileSync, mkdirSync, writeFileSync } from 'node:fs' import path from 'node:path' -import { createCSSTokenObject, createTokenObject } from '../src/token-object' -import type { TokenDictionary } from '../src/token-object/types' -import { camelCaseKeys } from '../src/token-object' +import { + createCSSTokenObject, + createTokenObject, +} from '../src/unstable-token-object' +import type { TokenDictionary } from '../src/unstable-token-object/types' +import { camelCaseKeys } from '../src/unstable-token-object' type ValueStyle = 'cssVariable' type KeyStyle = 'camelCase' @@ -20,14 +23,14 @@ const configurations: Config[] = [ { tokenFile: './src/json/pixiv-light.json', baseFile: './src/json/base.json', - outputFile: './dist/tokens/pixiv-light.json', + outputFile: './dist/unstable-tokens/pixiv-light.json', keyStyle: undefined, valueStyle: undefined, }, { tokenFile: './src/json/pixiv-dark.json', baseFile: './src/json/base.json', - outputFile: './dist/tokens/pixiv-dark.json', + outputFile: './dist/unstable-tokens/pixiv-dark.json', keyStyle: undefined, valueStyle: undefined, }, @@ -35,14 +38,14 @@ const configurations: Config[] = [ { tokenFile: './src/json/pixiv-light.json', baseFile: './src/json/base.json', - outputFile: './dist/tokens/camel/pixiv-light.json', + outputFile: './dist/unstable-tokens/camel/pixiv-light.json', keyStyle: 'camelCase', valueStyle: undefined, }, { tokenFile: './src/json/pixiv-dark.json', baseFile: './src/json/base.json', - outputFile: './dist/tokens/camel/pixiv-dark.json', + outputFile: './dist/unstable-tokens/camel/pixiv-dark.json', keyStyle: 'camelCase', valueStyle: undefined, }, @@ -50,7 +53,7 @@ const configurations: Config[] = [ { tokenFile: './src/json/pixiv-light.json', baseFile: './src/json/base.json', - outputFile: './dist/tokens/css-variables.json', + outputFile: './dist/unstable-tokens/css-variables.json', keyStyle: undefined, valueStyle: 'cssVariable', }, @@ -58,7 +61,7 @@ const configurations: Config[] = [ { tokenFile: './src/json/pixiv-light.json', baseFile: './src/json/base.json', - outputFile: './dist/tokens/camel/css-variables.json', + outputFile: './dist/unstable-tokens/camel/css-variables.json', keyStyle: 'camelCase', valueStyle: 'cssVariable', }, diff --git a/packages/theme/package.json b/packages/theme/package.json index a63a05683..3cc9d8a39 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -12,25 +12,25 @@ "import": "./dist/index.esm.js", "default": "./dist/index.esm.js" }, - "./token-object": { - "types": "./dist/token-object/index.d.ts", - "require": "./dist/token-object/index.cjs.js", - "import": "./dist/token-object/index.esm.js", - "default": "./dist/token-object/index.esm.js" + "./unstable-token-object": { + "types": "./dist/unstable-token-object/index.d.ts", + "require": "./dist/unstable-token-object/index.cjs.js", + "import": "./dist/unstable-token-object/index.esm.js", + "default": "./dist/unstable-token-object/index.esm.js" }, - "./css/*": "./dist/css/*", - "./tokens/*": "./dist/tokens/*" + "./unstable-css/*": "./dist/unstable-css/*", + "./unstable-tokens/*": "./dist/unstable-tokens/*" }, "typesVersions": { "*": { - "token-object": [ + "unstable-token-object": [ "./dist/token-object/index.d.ts" ], - "tokens/*": [ - "./dist/tokens/*" + "unstable-tokens/*": [ + "./dist/unstable-tokens/*" ], - "css/*": [ - "./dist/css/*" + "unstable-css/*": [ + "./dist/unstable-css/*" ] } }, @@ -41,7 +41,7 @@ "build": "npm-run-all --print-label -s 'build:*' --sequential serialize", "build:bundle": "FORCE_COLOR=1 tsup", "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly", - "build:copy-css": "cpx --clean 'src/css/**/*.{css,d.ts}' dist/css", + "build:copy-css": "cpx --clean 'src/unstable-css/**/*.{css,d.ts}' dist/unstable-css", "build:token-object": "tsx cli/token-object.ts", "serialize": "node cli/index.js", "typecheck": "run-p --print-label 'typecheck:*'", diff --git a/packages/theme/src/css/_variables_dark.css b/packages/theme/src/unstable-css/_variables_dark.css similarity index 100% rename from packages/theme/src/css/_variables_dark.css rename to packages/theme/src/unstable-css/_variables_dark.css diff --git a/packages/theme/src/css/_variables_dark.css.d.ts b/packages/theme/src/unstable-css/_variables_dark.css.d.ts similarity index 100% rename from packages/theme/src/css/_variables_dark.css.d.ts rename to packages/theme/src/unstable-css/_variables_dark.css.d.ts diff --git a/packages/theme/src/css/_variables_light.css b/packages/theme/src/unstable-css/_variables_light.css similarity index 100% rename from packages/theme/src/css/_variables_light.css rename to packages/theme/src/unstable-css/_variables_light.css diff --git a/packages/theme/src/css/_variables_light.css.d.ts b/packages/theme/src/unstable-css/_variables_light.css.d.ts similarity index 100% rename from packages/theme/src/css/_variables_light.css.d.ts rename to packages/theme/src/unstable-css/_variables_light.css.d.ts diff --git a/packages/theme/src/token-object/__snapshots__/token-object.test.ts.snap b/packages/theme/src/unstable-token-object/__snapshots__/token-object.test.ts.snap similarity index 100% rename from packages/theme/src/token-object/__snapshots__/token-object.test.ts.snap rename to packages/theme/src/unstable-token-object/__snapshots__/token-object.test.ts.snap diff --git a/packages/theme/src/token-object/helpers/__snapshots__/changecase-keys.test.ts.snap b/packages/theme/src/unstable-token-object/helpers/__snapshots__/changecase-keys.test.ts.snap similarity index 100% rename from packages/theme/src/token-object/helpers/__snapshots__/changecase-keys.test.ts.snap rename to packages/theme/src/unstable-token-object/helpers/__snapshots__/changecase-keys.test.ts.snap diff --git a/packages/theme/src/token-object/helpers/changecase-keys.test-d.ts b/packages/theme/src/unstable-token-object/helpers/changecase-keys.test-d.ts similarity index 100% rename from packages/theme/src/token-object/helpers/changecase-keys.test-d.ts rename to packages/theme/src/unstable-token-object/helpers/changecase-keys.test-d.ts diff --git a/packages/theme/src/token-object/helpers/changecase-keys.test.ts b/packages/theme/src/unstable-token-object/helpers/changecase-keys.test.ts similarity index 100% rename from packages/theme/src/token-object/helpers/changecase-keys.test.ts rename to packages/theme/src/unstable-token-object/helpers/changecase-keys.test.ts diff --git a/packages/theme/src/token-object/helpers/changecase-keys.ts b/packages/theme/src/unstable-token-object/helpers/changecase-keys.ts similarity index 100% rename from packages/theme/src/token-object/helpers/changecase-keys.ts rename to packages/theme/src/unstable-token-object/helpers/changecase-keys.ts diff --git a/packages/theme/src/token-object/helpers/is-empty-array.ts b/packages/theme/src/unstable-token-object/helpers/is-empty-array.ts similarity index 100% rename from packages/theme/src/token-object/helpers/is-empty-array.ts rename to packages/theme/src/unstable-token-object/helpers/is-empty-array.ts diff --git a/packages/theme/src/token-object/helpers/nest-object.test.ts b/packages/theme/src/unstable-token-object/helpers/nest-object.test.ts similarity index 100% rename from packages/theme/src/token-object/helpers/nest-object.test.ts rename to packages/theme/src/unstable-token-object/helpers/nest-object.test.ts diff --git a/packages/theme/src/token-object/helpers/nest-object.ts b/packages/theme/src/unstable-token-object/helpers/nest-object.ts similarity index 100% rename from packages/theme/src/token-object/helpers/nest-object.ts rename to packages/theme/src/unstable-token-object/helpers/nest-object.ts diff --git a/packages/theme/src/token-object/index.ts b/packages/theme/src/unstable-token-object/index.ts similarity index 100% rename from packages/theme/src/token-object/index.ts rename to packages/theme/src/unstable-token-object/index.ts diff --git a/packages/theme/src/token-object/reference-token.test.ts b/packages/theme/src/unstable-token-object/reference-token.test.ts similarity index 100% rename from packages/theme/src/token-object/reference-token.test.ts rename to packages/theme/src/unstable-token-object/reference-token.test.ts diff --git a/packages/theme/src/token-object/reference-token.ts b/packages/theme/src/unstable-token-object/reference-token.ts similarity index 100% rename from packages/theme/src/token-object/reference-token.ts rename to packages/theme/src/unstable-token-object/reference-token.ts diff --git a/packages/theme/src/token-object/to-token-object.ts b/packages/theme/src/unstable-token-object/to-token-object.ts similarity index 100% rename from packages/theme/src/token-object/to-token-object.ts rename to packages/theme/src/unstable-token-object/to-token-object.ts diff --git a/packages/theme/src/token-object/token-object.bench.ts b/packages/theme/src/unstable-token-object/token-object.bench.ts similarity index 100% rename from packages/theme/src/token-object/token-object.bench.ts rename to packages/theme/src/unstable-token-object/token-object.bench.ts diff --git a/packages/theme/src/token-object/token-object.test.ts b/packages/theme/src/unstable-token-object/token-object.test.ts similarity index 97% rename from packages/theme/src/token-object/token-object.test.ts rename to packages/theme/src/unstable-token-object/token-object.test.ts index e70a7b61b..53565a418 100644 --- a/packages/theme/src/token-object/token-object.test.ts +++ b/packages/theme/src/unstable-token-object/token-object.test.ts @@ -53,8 +53,8 @@ describe.each([ }) describe.each([ - ['light theme', lightToken, '../css/_variables_light.css'], - ['dark theme', darkToken, '../css/_variables_dark.css'], + ['light theme', lightToken, '../unstable-css/_variables_light.css'], + ['dark theme', darkToken, '../unstable-css/_variables_dark.css'], ] as const)( 'createCSSTokenObject test: %s', async (description, token, cssFilePath) => { diff --git a/packages/theme/src/token-object/types.ts b/packages/theme/src/unstable-token-object/types.ts similarity index 100% rename from packages/theme/src/token-object/types.ts rename to packages/theme/src/unstable-token-object/types.ts diff --git a/packages/theme/tsup.config.ts b/packages/theme/tsup.config.ts index 739eea7f8..e94e97333 100644 --- a/packages/theme/tsup.config.ts +++ b/packages/theme/tsup.config.ts @@ -3,7 +3,7 @@ import { defineConfig } from 'tsup' export default defineConfig({ entry: { index: 'src/index.ts', - 'token-object/index': 'src/token-object/index.ts', + 'unstable-token-object/index': 'src/unstable-token-object/index.ts', }, format: ['esm', 'cjs'], outExtension({ format }) {