refactor: components struture

packages/ui/src/Design/Typography/Typography.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import type { TypographyProps } from "./Typography"
+import { Typography } from "./Typography"
+
+const meta = {
+  title: "Design System/Typography",
+  component: Typography,
+} satisfies Meta<typeof Typography>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Component: Story = {
+  args: {
+    children: "Typography",
+  },
+}
+
+export const Variants: Story = {
+  render: () => {
+    return (
+      <section className="my-6 space-y-4">
+        {Array.from({ length: 6 }).map((_, index) => {
+          const heading = `h${index + 1}`
+          return (
+            <Typography
+              as={heading as TypographyProps["as"]}
+              variant={heading as TypographyProps["variant"]}
+              key={heading}
+            >
+              Heading {heading}
+            </Typography>
+          )
+        })}
+
+        <Typography as="p" variant="text1">
+          Text 1
+        </Typography>
+        <Typography as="p" variant="text2">
+          Text 2
+        </Typography>
+
+        <Typography as="p" variant="text1">
+          <strong>Bold (Strong)</strong>
+        </Typography>
+
+        <Typography as="p" variant="text1">
+          <em>Italic (Emphasis)</em>
+        </Typography>
+
+        <Typography as="p" variant="text1">
+          <u>Underline</u>
+        </Typography>
+
+        <Typography as="p" variant="text1">
+          <del>Strikethrough</del>
+        </Typography>
+
+        <Typography as="p" variant="text1">
+          <mark>Highlighted</mark>
+        </Typography>
+
+        <Typography as="p" variant="text1">
+          <kbd>Ctrl + C</kbd> (Keyboard Input)
+        </Typography>
+
+        <Typography as="p" variant="text1">
+          <abbr title="Cascading Style Sheets">CSS</abbr> (Abbreviation or
+          Acronym)
+        </Typography>
+
+        <Typography as="p" variant="text1">
+          <q>Citation</q>
+        </Typography>
+
+        <Typography as="p" variant="text1">
+          A <dfn id="def-validator">validator</dfn> is a program that checks for
+          syntax errors in code or documents. (Definition)
+        </Typography>
+
+        <Typography as="blockquote" variant="text1">
+          A long Citation...
+          <br />
+          Second line...
+        </Typography>
+
+        <ul>
+          <li>Ordered list item 1</li>
+          <li>Ordered list item 2</li>
+        </ul>
+
+        <ol>
+          <li>Unordered list item 1</li>
+          <li>Unordered list item 2</li>
+        </ol>
+      </section>
+    )
+  },
+}