fix: text bg color playground

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>
+  )
+}