docs: re-generate

daangn · Jan 9, 2025 · cefa0f8 · cefa0f8
1 parent ed42631
commit cefa0f8
Show file tree

Hide file tree

Showing 14 changed files with 470 additions and 9 deletions.
diff --git a/docs/components/example/index.json b/docs/components/example/index.json
@@ -141,6 +141,8 @@
   "select-box-radio-preview": "import { SelectBoxRadioGroup, SelectBoxRadio } from \"seed-design/ui/select-box\";\n\nexport default function SelectBoxRadioPreview() {\n  return (\n    <SelectBoxRadioGroup defaultValue=\"apple\" aria-label=\"과일\">\n      <SelectBoxRadio value=\"apple\" label=\"Culpa\" />\n      <SelectBoxRadio\n        value=\"voluptate\"\n        label=\"Voluptate\"\n        description=\"Elit cupidatat dolore fugiat enim veniam culpa.\"\n      />\n      <SelectBoxRadio value=\"eiusmod\" label=\"Eiusmod\" />\n    </SelectBoxRadioGroup>\n  );\n}",
   "skeleton-preview": "import { Flex } from \"seed-design/ui/layout\";\nimport { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonPreview() {\n  return (\n    <Flex gap=\"s4\" alignItems=\"center\">\n      <Skeleton radius=\"full\" width=\"s12\" height=\"s12\" />\n      <Flex flexDirection=\"column\" gap=\"s2\">\n        <Skeleton radius=\"8\" height=\"s4\" width=\"250px\" />\n        <Skeleton radius=\"8\" height=\"s4\" width=\"250px\" />\n      </Flex>\n    </Flex>\n  );\n}",
   "skeleton-radius": "import { Skeleton } from \"seed-design/ui/skeleton\";\nimport { Flex } from \"seed-design/ui/layout\";\n\nexport default function SkeletonRadius() {\n  return (\n    <Flex gap=\"s4\" alignItems=\"center\">\n      <Skeleton radius=\"0\" width=\"s12\" height=\"s12\" />\n      <Skeleton radius=\"8\" width=\"s12\" height=\"s12\" />\n      <Skeleton radius=\"16\" width=\"s12\" height=\"s12\" />\n      <Skeleton radius=\"full\" width=\"s12\" height=\"s12\" />\n    </Flex>\n  );\n}",
+  "snackbar-avoid-overlap": "import { Flex } from \"@/registry/ui/layout\";\nimport { ActionButton } from \"seed-design/ui/action-button\";\nimport {\n  Snackbar,\n  SnackbarAvoidOverlap,\n  SnackbarProvider,\n  useSnackbarAdapter,\n} from \"seed-design/ui/snackbar\";\n\nfunction Component() {\n  const adapter = useSnackbarAdapter();\n\n  return (\n    <Flex direction=\"column\" gap=\"s4\">\n      <ActionButton\n        onClick={() =>\n          adapter.create({\n            timeout: 5000,\n            onClose: () => {},\n            render: () => <Snackbar message=\"알림 메세지\" actionLabel=\"확인\" onAction={() => {}} />,\n          })\n        }\n      >\n        실행\n      </ActionButton>\n      <SnackbarAvoidOverlap>\n        <Flex\n          width=\"full\"\n          height=\"s16\"\n          background=\"bg.dangerWeak\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n        >\n          Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.\n        </Flex>\n      </SnackbarAvoidOverlap>\n    </Flex>\n  );\n}\n\nexport default function SnackbarPreview() {\n  return (\n    <SnackbarProvider>\n      <Component />\n    </SnackbarProvider>\n  );\n}",
+  "snackbar-preview": "import { ActionButton } from \"seed-design/ui/action-button\";\nimport { Snackbar, SnackbarProvider, useSnackbarAdapter } from \"seed-design/ui/snackbar\";\n\nfunction Component() {\n  const adapter = useSnackbarAdapter();\n\n  return (\n    <ActionButton\n      onClick={() =>\n        adapter.create({\n          timeout: 5000,\n          onClose: () => {},\n          render: () => <Snackbar message=\"알림 메세지\" actionLabel=\"확인\" onAction={() => {}} />,\n        })\n      }\n    >\n      실행\n    </ActionButton>\n  );\n}\n\nexport default function SnackbarPreview() {\n  return (\n    <SnackbarProvider>\n      <Component />\n    </SnackbarProvider>\n  );\n}",
   "switch-disabled": "import { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchDisabled() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n      <Switch disabled />\n      <Switch checked disabled />\n    </div>\n  );\n}",
   "switch-medium": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchMedium() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return <Switch size=\"medium\" checked={isChecked} onCheckedChange={setIsChecked} />;\n}",
   "switch-preview": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchPreview() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return <Switch checked={isChecked} onCheckedChange={setIsChecked} />;\n}",

diff --git a/docs/public/__registry__/ui/action-button.json b/docs/public/__registry__/ui/action-button.json
@@ -7,7 +7,7 @@
     {
       "name": "action-button.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/progressCircle.css\";\n// TODO: we have to ensure load order between actionButton.css and progressCircle.css. should we bundle them together?\nimport \"@seed-design/stylesheet/actionButton.css\";\n\nimport { ActionButton as SeedActionButton } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nexport interface ActionButtonProps extends SeedActionButton.RootProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/action-button\n */\nexport const ActionButton = React.forwardRef<\n  React.ElementRef<typeof SeedActionButton.Root>,\n  ActionButtonProps\n>(\n  (\n    {\n      loading = false,\n      layout = \"withText\",\n      prefixIcon,\n      suffixIcon,\n      children,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    return (\n      <SeedActionButton.Root\n        ref={ref}\n        loading={loading}\n        layout={layout}\n        {...otherProps}\n      >\n        {layout === \"withText\" ? (\n          <>\n            {prefixIcon && <SeedActionButton.PrefixIcon svg={prefixIcon} />}\n            <SeedActionButton.Label>{children}</SeedActionButton.Label>\n            {suffixIcon && <SeedActionButton.SuffixIcon svg={suffixIcon} />}\n          </>\n        ) : (\n          <SeedActionButton.Icon svg={children} />\n        )}\n        {loading ? <SeedActionButton.ProgressCircle /> : null}\n      </SeedActionButton.Root>\n    );\n  },\n);\nActionButton.displayName = \"ActionButton\";\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/actionButton.css\";\n\nimport { ActionButton as SeedActionButton } from \"@seed-design/react\";\nimport * as React from \"react\";\nimport { ProgressCircle } from \"./progress-circle\";\n\nexport interface ActionButtonProps extends SeedActionButton.RootProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/action-button\n */\nexport const ActionButton = React.forwardRef<\n  React.ElementRef<typeof SeedActionButton.Root>,\n  ActionButtonProps\n>(\n  (\n    {\n      loading = false,\n      layout = \"withText\",\n      prefixIcon,\n      suffixIcon,\n      children,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    return (\n      <SeedActionButton.Root\n        ref={ref}\n        loading={loading}\n        layout={layout}\n        {...otherProps}\n      >\n        {layout === \"withText\" ? (\n          <>\n            {prefixIcon && <SeedActionButton.PrefixIcon svg={prefixIcon} />}\n            <SeedActionButton.Label>{children}</SeedActionButton.Label>\n            {suffixIcon && <SeedActionButton.SuffixIcon svg={suffixIcon} />}\n          </>\n        ) : (\n          <SeedActionButton.Icon svg={children} />\n        )}\n        {loading ? (\n          <SeedActionButton.ProgressIndicator>\n            <ProgressCircle size=\"inherit\" tone=\"inherit\" />\n          </SeedActionButton.ProgressIndicator>\n        ) : null}\n      </SeedActionButton.Root>\n    );\n  },\n);\nActionButton.displayName = \"ActionButton\";\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
     }
   ]
 }
diff --git a/docs/public/__registry__/ui/action-chip.json b/docs/public/__registry__/ui/action-chip.json
@@ -7,7 +7,7 @@
     {
       "name": "action-chip.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport { ActionChip as SeedActionChip } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/actionChip.css\";\n\nexport interface ActionChipProps extends SeedActionChip.RootProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  count?: number;\n}\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  ({ children, prefixIcon, suffixIcon, count, ...otherProps }, ref) => {\n    return (\n      <SeedActionChip.Root ref={ref} {...otherProps}>\n        {otherProps.layout === \"withText\" ? (\n          <>\n            {prefixIcon && <SeedActionChip.PrefixIcon svg={prefixIcon} />}\n            <SeedActionChip.Label>{children}</SeedActionChip.Label>\n            {count && <SeedActionChip.Count>{count}</SeedActionChip.Count>}\n            {suffixIcon && <SeedActionChip.SuffixIcon svg={suffixIcon} />}\n          </>\n        ) : (\n          <SeedActionChip.Icon svg={children} />\n        )}\n      </SeedActionChip.Root>\n    );\n  },\n);\nActionChip.displayName = \"ActionChip\";\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
+      "content": "\"use client\";\n\nimport { ActionChip as SeedActionChip } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/actionChip.css\";\n\nexport interface ActionChipProps extends SeedActionChip.RootProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  count?: number;\n}\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    {\n      children,\n      prefixIcon,\n      suffixIcon,\n      count,\n      layout = \"withText\",\n      ...otherProps\n    },\n    ref,\n  ) => {\n    return (\n      <SeedActionChip.Root ref={ref} layout={layout} {...otherProps}>\n        {layout === \"withText\" ? (\n          <>\n            {prefixIcon && <SeedActionChip.PrefixIcon svg={prefixIcon} />}\n            <SeedActionChip.Label>{children}</SeedActionChip.Label>\n            {count && <SeedActionChip.Count>{count}</SeedActionChip.Count>}\n            {suffixIcon && <SeedActionChip.SuffixIcon svg={suffixIcon} />}\n          </>\n        ) : (\n          <SeedActionChip.Icon svg={children} />\n        )}\n      </SeedActionChip.Root>\n    );\n  },\n);\nActionChip.displayName = \"ActionChip\";\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
     }
   ]
 }
diff --git a/docs/public/__registry__/ui/control-chip.json b/docs/public/__registry__/ui/control-chip.json
@@ -7,7 +7,7 @@
     {
       "name": "control-chip.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport { ControlChip as SeedControlChip } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/controlChip.css\";\n\nexport interface ControlChipToggleProps extends SeedControlChip.RootProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  count?: number;\n}\n\nexport const ControlChipToggle = React.forwardRef<\n  HTMLLabelElement,\n  ControlChipToggleProps\n>(({ children, prefixIcon, suffixIcon, count, ...otherProps }, ref) => {\n  return (\n    <SeedControlChip.Root ref={ref} {...otherProps}>\n      {otherProps.layout === \"withText\" ? (\n        <>\n          {prefixIcon && <SeedControlChip.PrefixIcon svg={prefixIcon} />}\n          <SeedControlChip.Label>{children}</SeedControlChip.Label>\n          {count && <SeedControlChip.Count>{count}</SeedControlChip.Count>}\n          {suffixIcon && <SeedControlChip.SuffixIcon svg={suffixIcon} />}\n        </>\n      ) : (\n        <SeedControlChip.Icon svg={children} />\n      )}\n    </SeedControlChip.Root>\n  );\n});\nControlChipToggle.displayName = \"ControlChip.Toggle\";\n\nexport const ControlChip = Object.assign(\n  () => {\n    console.warn(\n      \"ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.\",\n    );\n  },\n  {\n    Toggle: ControlChipToggle,\n  },\n);\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
+      "content": "\"use client\";\n\nimport { ControlChip as SeedControlChip } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/controlChip.css\";\n\nexport interface ControlChipToggleProps extends SeedControlChip.RootProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  count?: number;\n}\n\nexport const ControlChipToggle = React.forwardRef<\n  HTMLLabelElement,\n  ControlChipToggleProps\n>(\n  (\n    {\n      children,\n      prefixIcon,\n      suffixIcon,\n      count,\n      layout = \"withText\",\n      ...otherProps\n    },\n    ref,\n  ) => {\n    return (\n      <SeedControlChip.Root ref={ref} layout={layout} {...otherProps}>\n        {layout === \"withText\" ? (\n          <>\n            {prefixIcon && <SeedControlChip.PrefixIcon svg={prefixIcon} />}\n            <SeedControlChip.Label>{children}</SeedControlChip.Label>\n            {count && <SeedControlChip.Count>{count}</SeedControlChip.Count>}\n            {suffixIcon && <SeedControlChip.SuffixIcon svg={suffixIcon} />}\n          </>\n        ) : (\n          <SeedControlChip.Icon svg={children} />\n        )}\n      </SeedControlChip.Root>\n    );\n  },\n);\nControlChipToggle.displayName = \"ControlChip.Toggle\";\n\nexport const ControlChip = Object.assign(\n  () => {\n    console.warn(\n      \"ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.\",\n    );\n  },\n  {\n    Toggle: ControlChipToggle,\n  },\n);\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
     }
   ]
 }