fix storybook

.storybook/main.js

@@ -4,7 +4,7 @@ const glob = promisify(require('glob'))
 const { viteCommonjs } = require('@originjs/vite-plugin-commonjs')
 
 module.exports = {
-  stories: ['../packages/**/*.story.@(tsx|mdx)'],
+  stories: ['../packages/**/*.mdx', '../packages/**/*.story.@(tsx)'],
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
@@ -15,6 +15,9 @@ module.exports = {
     {
       name: '@storybook/addon-styling',
       options: {
+        postCss: {
+          implementation: require.resolve('postcss'),
+        },
         postcssLoaderOptions: {
           postcssOptions: {
             config: path.resolve(__dirname, 'postcss.config.js'),

package.json

@@ -43,11 +43,11 @@
     "@storybook/addon-a11y": "^7.4.1",
     "@storybook/addon-essentials": "^7.4.1",
     "@storybook/addon-interactions": "^7.4.1",
-    "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-links": "^7.4.1",
     "@storybook/addon-onboarding": "^1.0.8",
     "@storybook/addon-storysource": "^7.4.1",
     "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-styling-webpack": "^0.0.5",
     "@storybook/blocks": "^7.4.1",
     "@storybook/builder-vite": "^7.4.1",
     "@storybook/builder-webpack5": "^7.4.1",
@@ -64,6 +64,7 @@
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
+    "autoprefixer": "^10.4.16",
     "conventional-changelog-conventionalcommits": "^4.6.3",
     "esbuild": "^0.14.14",
     "esbuild-jest": "^0.5.0",

packages/tailwind-config/src/docs/colors/TextBgColor.story.tsx

@@ -1,40 +1,31 @@
-import type { Story } from '../../_lib/compat'
-
+import type { StoryObj, Meta } from '@storybook/react'
 import { colors } from '.'
+import { TextBgColor } from './TextBgColor'
 
-export default {
+const meta: Meta<typeof TextBgColor> = {
   title: 'tailwind-config/Colors/Text bg color',
+  component: TextBgColor,
   argTypes: {
     textColorClass: {
-      control: {
-        type: 'select',
-        options: Object.keys(colors).map((color) => `text-${color}`),
-      },
-      defaultValue: 'text-text1',
+      options: Object.keys(colors).map((color) => `text-${color}`),
+      control: { type: 'select' },
     },
     bgColorClass: {
-      control: {
-        type: 'select',
-        options: Object.keys(colors).map((color) => `bg-${color}`),
-      },
-      defaultValue: 'bg-background1',
+      options: Object.keys(colors).map((color) => `bg-${color}`),
+      control: { type: 'select' },
     },
   },
 }
+export default meta
 
-type Props = Readonly<{
-  textColorClass: string
-  bgColorClass: string
-}>
+type Story = StoryObj<typeof TextBgColor>
 
-export const Playground: Story<Props> = ({ textColorClass, bgColorClass }) => (
-  <div className={`${bgColorClass} p-64 max-w-2xl`}>
-    <p className={`typography-20 ${textColorClass}`}>
-      charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
-      フロントエンドの実装に用いる npm パッケージ集のことを言います。Lorem ipsum
-      dolor sit amet, consectetur adipiscing elit. Aliquam at odio bibendum nisl
-      mollis eleifend et quis turpis. Quisque dignissim porta justo ut
-      convallis.dipiscing elit.
-    </p>
-  </div>
-)
+export const Playground: Story = {
+  args: {
+    textColorClass: 'text-text1',
+    bgColorClass: 'bg-background1',
+  },
+  render: ({ bgColorClass, textColorClass }) => (
+    <TextBgColor bgColorClass={bgColorClass} textColorClass={textColorClass} />
+  ),
+}

packages/tailwind-config/src/docs/colors/TextBgColor.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  textColorClass: string
+  bgColorClass: string
+}
+export const TextBgColor: React.FC<Props> = ({
+  textColorClass,
+  bgColorClass,
+}) => {
+  return (
+    <div className={`${bgColorClass} p-64 max-w-2xl`}>
+      <p className={`typography-20 ${textColorClass}`}>
+        charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
+        フロントエンドの実装に用いる npm パッケージ集のことを言います。Lorem
+        ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at odio
+        bibendum nisl mollis eleifend et quis turpis. Quisque dignissim porta
+        justo ut convallis.dipiscing elit.
+      </p>
+    </div>
+  )
+}

packages/tailwind-config/src/docs/colors/index.story.mdx → packages/tailwind-config/src/docs/colors/index.mdx

@@ -11,9 +11,7 @@ import { Colors, TextColors } from '.'
 
 <br />
 
-<Story name="Colors">
-  <Colors />
-</Story>
+<Colors />
 
 <br />
 <br />
@@ -22,6 +20,4 @@ import { Colors, TextColors } from '.'
 
 <br />
 
-<Story name="Text colors">
-  <TextColors />
-</Story>
+<TextColors />

packages/tailwind-config/src/docs/gradient/index.story.mdx → packages/tailwind-config/src/docs/gradient/index.mdx

@@ -7,6 +7,4 @@ import { Gradients } from '.'
 
 <br />
 
-<Story name="Gradients">
-  <Gradients />
-</Story>
+<Gradients />

packages/tailwind-config/src/docs/typography/index.story.mdx → packages/tailwind-config/src/docs/typography/index.mdx

@@ -11,16 +11,12 @@ import { Sizes, HalfLeading } from '.'
 
 <br />
 
-<Story name="Sizes">
-  <Sizes />
-</Story>
+<Sizes />
 
 <br />
 
 ## Half leading cancellation
 
 <br />
 
-<Story name="Half leading">
-  <HalfLeading />
-</Story>
+<HalfLeading />