docs: add stories

daangn · Nov 28, 2024 · 6921420 · 6921420
1 parent da8a2b6
commit 6921420
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 8 deletions.
diff --git a/docs/stories/TextField.stories.tsx b/docs/stories/TextField.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TextField } from "seed-design/ui/text-field";
+
+import { textFieldVariantMap } from "@seed-design/recipe/textField";
+import { VariantTable } from "./components/variant-table";
+import { SeedThemeDecorator } from "./components/decorator";
+import { IconPaperplaneLine } from "@daangn/react-monochrome-icon";
+
+const meta = {
+  component: TextField,
+  decorators: [SeedThemeDecorator],
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const CommonStoryTemplate: Story = {
+  args: {
+    label: "Label",
+    description:
+      "Sint pariatur labore et elit dolore sunt velit incididunt nisi laboris cillum et dolore ad ullamco.",
+    placeholder: "Placeholder",
+    prefix: <IconPaperplaneLine />,
+    suffix: "Suffix",
+    maxGraphemeCount: 10,
+  },
+  render: (args) => (
+    <VariantTable Component={meta.component} variantMap={textFieldVariantMap} {...args} />
+  ),
+};
+
+export const LightTheme = CommonStoryTemplate;
+
+export const DarkTheme = CommonStoryTemplate;
+
+export const FontScalingExtraSmall = CommonStoryTemplate;
+
+export const FontScalingExtraExtraExtraLarge = CommonStoryTemplate;
diff --git a/packages/recipe-generator/preset/src/text-field.recipe.ts b/packages/recipe-generator/preset/src/text-field.recipe.ts
@@ -49,6 +49,9 @@ const textField = defineRecipe({
       borderWidth: vars.base.enabled.input.strokeWidth,
       borderColor: vars.base.enabled.input.strokeColor,
 
+      // XXX: CSS reset 들어오면 제거될 수 있음
+      borderStyle: "solid",
+
       [pseudo(not(readOnly), focus)]: {
         borderColor: vars.base.focused.input.strokeColor,
       },
@@ -107,16 +110,16 @@ const textField = defineRecipe({
       },
     },
     inputText: {
-      flexGrow: 1,
-
-      color: vars.base.enabled.inputText.color,
-
       // XXX: CSS reset 들어오면 제거될 수 있음
-      backgroundColor: "transparent",
+      all: "unset",
       [pseudo(focus)]: {
         outline: "none",
       },
 
+      flexGrow: 1,
+
+      color: vars.base.enabled.inputText.color,
+
       [pseudo("::placeholder")]: {
         color: vars.base.enabled.inputPlaceholder.color,
       },

diff --git a/packages/stylesheet/textField.css b/packages/stylesheet/textField.css
@@ -20,6 +20,7 @@
     background-color: var(--seed-v3-color-bg-layer-default);
     border-width: 1px;
     border-color: var(--seed-v3-color-stroke-field);
+    border-style: solid;
 }
 .textField__input:not(:is([data-readonly])):is(:focus, [data-focus]) {
     border-color: var(--seed-v3-color-stroke-field-focused);
@@ -68,13 +69,15 @@
     color: var(--seed-v3-color-fg-disabled);
 }
 .textField__inputText {
-    flex-grow: 1;
-    color: var(--seed-v3-color-fg-neutral);
-    background-color: transparent;
+    all: unset;
 }
 .textField__inputText:is(:focus, [data-focus]) {
     outline: none;
 }
+.textField__inputText {
+    flex-grow: 1;
+    color: var(--seed-v3-color-fg-neutral);
+}
 .textField__inputText::placeholder {
     color: var(--seed-v3-color-fg-placeholder);
 }