feat(docs): migrate Tab, ChipTab

daangn · Oct 16, 2024 · 60cf32f · 60cf32f
1 parent 049ebbc
commit 60cf32f
Show file tree

Hide file tree

Showing 15 changed files with 119 additions and 19 deletions.
diff --git a/docs/app/docs/[[...slug]]/page.tsx b/docs/app/docs/[[...slug]]/page.tsx
@@ -14,6 +14,7 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import { Step, Steps } from "fumadocs-ui/components/steps";
 import { File, Folder, Files } from "fumadocs-ui/components/files";
 import { Card, Cards } from "fumadocs-ui/components/card";
+import { Callout } from "fumadocs-ui/components/callout";
 
 export default async function Page({
   params,
@@ -44,6 +45,7 @@ export default async function Page({
             Files,
             Card,
             Cards,
+            Callout,
           }}
         />
       </DocsBody>

diff --git a/docs/components/example/chip-tabs-preview.tsx b/docs/components/example/chip-tabs-preview.tsx
@@ -1,5 +1,11 @@
+"use client";
+
 import * as React from "react";
-import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+import {
+  ChipTabs,
+  ChipTabTrigger,
+  ChipTabTriggerList,
+} from "seed-design/ui/chip-tabs";
 
 export default function ChipTabsPreview() {
   const [value, setValue] = React.useState("1");

diff --git a/docs/components/example/chip-tabs-variant-brand-weak.tsx b/docs/components/example/chip-tabs-variant-brand-weak.tsx
@@ -1,5 +1,11 @@
+"use client";
+
 import * as React from "react";
-import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+import {
+  ChipTabs,
+  ChipTabTrigger,
+  ChipTabTriggerList,
+} from "seed-design/ui/chip-tabs";
 
 export default function ChipTabsVariantBrandWeak() {
   const [value, setValue] = React.useState("1");

diff --git a/docs/components/example/chip-tabs-variant-neutral-solid.tsx b/docs/components/example/chip-tabs-variant-neutral-solid.tsx
@@ -1,5 +1,11 @@
+"use client";
+
 import * as React from "react";
-import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+import {
+  ChipTabs,
+  ChipTabTrigger,
+  ChipTabTriggerList,
+} from "seed-design/ui/chip-tabs";
 
 export default function ChipTabsVariantNeutralSolid() {
   const [value, setValue] = React.useState("1");

diff --git a/docs/components/example/tabs-alert.tsx b/docs/components/example/tabs-alert.tsx
@@ -1,4 +1,12 @@
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+"use client";
+
+import {
+  Tabs,
+  TabContent,
+  TabContentList,
+  TabTrigger,
+  TabTriggerList,
+} from "seed-design/ui/tabs";
 
 export default function TabsAlert() {
   return (

diff --git a/docs/components/example/tabs-layout-fill.tsx b/docs/components/example/tabs-layout-fill.tsx
@@ -1,9 +1,15 @@
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import {
+  Tabs,
+  TabContent,
+  TabContentList,
+  TabTrigger,
+  TabTriggerList,
+} from "seed-design/ui/tabs";
 
 export default function TabsLayoutFill() {
   return (
     <div style={{ width: "360px" }}>
-      <Tabs defaultValue="1" layout="fill">
+      <Tabs defaultValue="2" layout="fill">
         <TabTriggerList>
           <TabTrigger value="1">라벨1</TabTrigger>
           <TabTrigger value="2">라벨2</TabTrigger>

diff --git a/docs/content/docs/react/components/tabs/chip-tabs.mdx b/docs/content/docs/react/components/tabs/chip-tabs.mdx
@@ -0,0 +1,19 @@
+---
+title: Chip Tabs
+---
+
+<ComponentExample name="chip-tabs-preview" />
+
+### 설치
+
+<Installation name="chip-tabs" />
+
+## 예제
+
+### Neutral Solid
+
+<ComponentExample name="chip-tabs-variant-neutral-solid" />
+
+### Brand Weak
+
+<ComponentExample name="chip-tabs-variant-brand-weak" />
diff --git a/docs/content/docs/react/components/tabs/meta.json b/docs/content/docs/react/components/tabs/meta.json
@@ -0,0 +1,5 @@
+{
+  "title": "Tabs",
+  "pages": ["..."],
+  "defaultOpen": true
+}
diff --git a/docs/content/docs/react/components/tabs/tabs.mdx b/docs/content/docs/react/components/tabs/tabs.mdx
@@ -0,0 +1,53 @@
+---
+title: Tabs
+---
+
+<ComponentExample name="tabs-preview" />
+
+## 설치
+
+<Installation name="tabs" />
+
+## 예제
+
+### Layout Fill
+
+<ComponentExample name="tabs-layout-fill" />
+
+### Layout Hug (Default)
+
+<ComponentExample name="tabs-layout-hug" />
+
+### Size Medium
+
+<ComponentExample name="tabs-size-medium" />
+
+### Size Small (Default)
+
+<ComponentExample name="tabs-size-small" />
+
+### Swipeable
+
+<ComponentExample name="tabs-swipeable" />
+
+### Disabled
+
+<ComponentExample name="tabs-disabled" />
+
+### Alert
+
+<ComponentExample name="tabs-alert" />
+
+### Dynamic Height
+
+<Callout type="info">
+각 탭의 높이가 다를 때, 아래의 컨텐츠를 탭 아래에 바로 맞추기 위해서 사용하는 예시입니다.
+</Callout>
+
+<Callout type="warn">
+탭이 자주 바뀌고, 탭에 네트워크 요청이 많은 경우 캐싱을 잘 고려해주세요.
+</Callout>
+
+<ComponentExample name="tabs-dynamic-height" />
+
+### With Pull To Refresh
diff --git a/docs/content/docs/react/meta.json b/docs/content/docs/react/meta.json
@@ -1,5 +1,5 @@
 {
   "title": "react",
   "root": true,
-  "pages": ["index", "get-started", "components", "!templates"]
+  "pages": ["index", "get-started", "components"]
 }
diff --git a/docs/registry/component/tabs.tsx b/docs/registry/component/tabs.tsx
@@ -76,7 +76,7 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
     const classNames = tabs({
       layout,
     });
-    const { rootProps, value, restProps } = useTabsProps;
+    const { rootProps, value } = useTabsProps;
     const { shouldRender } = useLazyContents({
       currentValue: value,
       lazyMode,
@@ -91,7 +91,6 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
       <div
         ref={ref}
         {...rootProps}
-        {...restProps}
         className={clsx(classNames.root, className)}
       >
         <TabsContext.Provider

diff --git a/packages/component-spec/artifacts/chip-tab.yaml b/packages/component-spec/artifacts/chip-tab.yaml
@@ -14,8 +14,6 @@ base:
 
 variant=neutral solid:
   enabled:
-    root:
-      color: $color.bg.neutral
     label:
       color: $color.fg.neutral
       fontWeight: $font-weight.bold

diff --git a/packages/recipe-generator/preset/src/__generated__/chip-tab.vars.ts b/packages/recipe-generator/preset/src/__generated__/chip-tab.vars.ts
diff --git a/packages/recipe-generator/preset/src/chip-tab.recipe.ts b/packages/recipe-generator/preset/src/chip-tab.recipe.ts
@@ -27,8 +27,6 @@ const chipTab = defineRecipe({
     variant: {
       neutralSolid: {
         root: {
-          backgroundColor: vars.variantNeutralSolid.enabled.root.color,
-
           [pseudo(selected)]: {
             backgroundColor: vars.variantNeutralSolid.selected.root.color,
           },

diff --git a/packages/stylesheet/chipTab.css b/packages/stylesheet/chipTab.css
@@ -14,9 +14,6 @@
     font-size: var(--seed-font-size-100);
     font-weight: var(--seed-font-weight-bold);
 }
-.chipTab__root--variant_neutralSolid {
-    background-color: var(--seed-color-bg-neutral);
-}
 .chipTab__root--variant_neutralSolid:is(:selected, [data-selected]) {
     background-color: var(--seed-color-bg-neutral-solid);
 }