feat: allow design token v2 in tailwind config

.storybook/main.js

@@ -63,17 +63,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
@@ -135,17 +131,6 @@ module.exports = {
   `,
 }
 
-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/tailwind.config.js

@@ -1,5 +1,8 @@
 const { light, dark } = require('@charcoal-ui/theme')
-const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')
+const {
+  createTailwindConfig,
+  unstable_createTailwindConfigTokenV2,
+} = require('@charcoal-ui/tailwind-config')
 
 /**
  * @type {import('tailwindcss/tailwind-config').TailwindConfig}
@@ -15,6 +18,7 @@ module.exports = {
         '[data-dark="true"]': dark,
       },
     }),
+    unstable_createTailwindConfigTokenV2(),
   ],
   corePlugins: {
     preflight: false,

.storybook/theme-decorator.tsx

@@ -6,6 +6,7 @@ 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/react/dist/index.css'
 
 const setter = themeSetter()
 

packages/react/docs/TokenV2Demo.story.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* lint runs before build so json does not exist */
+
+import { Meta, StoryObj } from '@storybook/react'
+import TokenV2DemoStyledComponents from './TokenV2DemoStyledComponents'
+import TokenV2Tailwind from './TokenV2DemoTailwind'
+
+export default {
+  title: 'theme/Toke v2 Demo',
+  component: TokenV2DemoStyledComponents,
+} as Meta<typeof TokenV2DemoStyledComponents>
+
+export const Styled: StoryObj<typeof TokenV2DemoStyledComponents> = {
+  render: TokenV2DemoStyledComponents,
+}
+export const Tailwind: StoryObj<typeof TokenV2Tailwind> = {
+  render: TokenV2Tailwind,
+}

packages/react/docs/token-v2-demo-styled.story.tsx → packages/react/docs/TokenV2DemoStyledComponents.tsx

@@ -2,23 +2,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* lint runs before build so json does not exist */
 
-import { Meta, StoryObj } from '@storybook/react'
 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 { Button, Icon } from '@charcoal-ui/react'
 
-export default {
-  title: 'theme/Token v2 demo',
-  component: Demo,
-} as Meta<typeof Demo>
-
-export const StyledComponents: StoryObj<typeof Demo> = {
-  render: Demo,
-}
-
 const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
 const artworks = Array.from({ length: 3 }, (_, id) => ({
   id,
@@ -27,7 +17,7 @@ const artworks = Array.from({ length: 3 }, (_, id) => ({
   description: 'Description',
 }))
 
-function Demo() {
+export default function TokenV2Styled() {
   const [selected, setSelected] = useState(categories[0])
   return (
     <Container>
@@ -89,6 +79,7 @@ const Container = styled.section`
 `
 
 const H2 = styled.h2`
+  margin: 0;
   color: ${tokens.color.text.secondary.default};
   font-size: ${tokens.text.fontSize.heading.xs};
   line-height: ${tokens.text.lineHeight.heading.xs};

packages/react/docs/TokenV2DemoTailwind.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* lint runs before build so json does not exist */
+
+import { useState } from 'react'
+import { Button, Icon } from '@charcoal-ui/react'
+
+const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
+const artworks = Array.from({ length: 3 }, (_, id) => ({
+  id,
+  title: 'Title',
+  thumbnail: `https://loremflickr.com/150/100/animals?random=${id}`,
+  description: 'Description',
+}))
+
+export default function TokenV2Tailwind() {
+  const [selected, setSelected] = useState(categories[0])
+  return (
+    <section className="grid max-w-fit gap-[24px]">
+      <nav>
+        <div aria-label="Categories" role="tablist">
+          {categories.map((category) => (
+            <a
+              className={`text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold ${
+                category === selected
+                  ? 'border-border-selected text-text'
+                  : 'border-[transparent]'
+              }`}
+              id={`category-${category}`}
+              role="tab"
+              aria-selected={category === selected}
+              aria-controls={`panel-${category}`}
+              key={category}
+              onClick={() => {
+                setSelected(category)
+              }}
+            >
+              {category}
+            </a>
+          ))}
+        </div>
+      </nav>
+      <h2 className="text-text-secondary text-heading-xs m-0">
+        Works from users you follow
+      </h2>
+      <div
+        className="grid [grid-template-areas:'UserInfo_._ShowAll''ArtworkList_ArtworkList_ArtworkList']"
+        id={`panel-${selected}`}
+        role="tabpanel"
+        aria-labelledby={`category-${selected}`}
+      >
+        <div className="grid grid-flow-col items-center justify-start gap-20 [grid-area:UserInfo]">
+          <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>
+          <span className="text-text text-caption-m font-bold">UserName</span>
+          <Button variant="Primary" size="S">
+            Follow
+          </Button>
+        </div>
+        <a className="text-text-tertiary hover:text-text-hover active:text-text-press text-caption-m cursor-pointer content-center text-right [grid-area:ShowAll]">
+          Show all
+        </a>
+        <ul
+          key={selected}
+          className="grid max-w-[424px] list-none grid-cols-3 gap-20 p-0 [grid-area:ArtworkList]"
+        >
+          {artworks.map((a) => (
+            <li key={a.id}>
+              <article className="grid gap-10">
+                <img
+                  className="rounded-m aspect-[3/2] w-[100%]"
+                  src={a.thumbnail}
+                  alt={a.title}
+                />
+                <h3 className="text-text text-caption-m m-0">{a.title}</h3>
+                <p className="text-text-tertiary text-caption-s m-0">
+                  {a.description}
+                </p>
+              </article>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}