feat: rewrite tabs

daangn · Feb 9, 2025 · b6df819 · b6df819
1 parent 7e1884c
commit b6df819
Show file tree

Hide file tree

Showing 99 changed files with 3,157 additions and 2,664 deletions.
diff --git a/.nvmrc b/.nvmrc
diff --git a/bun.lock b/bun.lock
diff --git a/docs/components/example/chip-tabs-basic-activity.tsx b/docs/components/example/chip-tabs-basic-activity.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 
-import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+import { ChipTabsRoot, ChipTabsTrigger, ChipTabsList } from "seed-design/ui/chip-tabs";
 
 import type { ActivityComponentType } from "@stackflow/react/future";
 import AppScreen from "@/components/stackflow/ActivityLayout";
@@ -26,18 +26,18 @@ const ChipTabsBasicActivity: ActivityComponentType<"chip-tabs-basic"> = () => {
 
   return (
     <AppScreen>
-      <ChipTabs
+      <ChipTabsRoot
         variant="neutralSolid"
         defaultValue="1"
         value={value}
         onValueChange={(value) => setValue(value)}
       >
-        <ChipTabTriggerList>
-          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
-          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
-          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
-        </ChipTabTriggerList>
-      </ChipTabs>
+        <ChipTabsList>
+          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
+          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
+          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
+        </ChipTabsList>
+      </ChipTabsRoot>
       {value === "1" && <div style={commonStyle}>content 1</div>}
       {value === "2" && <div style={commonStyle}>content 2</div>}
       {value === "3" && <div style={commonStyle}>content 3</div>}

diff --git a/docs/components/example/chip-tabs-preview.tsx b/docs/components/example/chip-tabs-preview.tsx
@@ -1,24 +1,24 @@
 "use client";
 
 import * as React from "react";
-import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+import { ChipTabsRoot, ChipTabsTrigger, ChipTabsList } from "seed-design/ui/chip-tabs";
 
 export default function ChipTabsPreview() {
   const [value, setValue] = React.useState("1");
   return (
     <>
-      <ChipTabs
+      <ChipTabsRoot
         variant="neutralSolid"
         defaultValue="1"
         value={value}
         onValueChange={(value) => setValue(value)}
       >
-        <ChipTabTriggerList>
-          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
-          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
-          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
-        </ChipTabTriggerList>
-      </ChipTabs>
+        <ChipTabsList>
+          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
+          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
+          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
+        </ChipTabsList>
+      </ChipTabsRoot>
       {value === "1" && <div>content 1</div>}
       {value === "2" && <div>content 2</div>}
       {value === "3" && <div>content 3</div>}

diff --git a/docs/components/example/chip-tabs-variant-brand-solid.tsx b/docs/components/example/chip-tabs-variant-brand-solid.tsx
@@ -1,24 +1,24 @@
 "use client";
 
 import * as React from "react";
-import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+import { ChipTabsRoot, ChipTabsTrigger, ChipTabsList } from "seed-design/ui/chip-tabs";
 
 export default function ChipTabsVariantBrandSolid() {
   const [value, setValue] = React.useState("1");
   return (
     <>
-      <ChipTabs
+      <ChipTabsRoot
         variant="brandSolid"
         defaultValue="1"
         value={value}
         onValueChange={(value) => setValue(value)}
       >
-        <ChipTabTriggerList>
-          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
-          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
-          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
-        </ChipTabTriggerList>
-      </ChipTabs>
+        <ChipTabsList>
+          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
+          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
+          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
+        </ChipTabsList>
+      </ChipTabsRoot>
       {value === "1" && <div>content 1</div>}
       {value === "2" && <div>content 2</div>}
       {value === "3" && <div>content 3</div>}

diff --git a/docs/components/example/chip-tabs-variant-neutral-solid.tsx b/docs/components/example/chip-tabs-variant-neutral-solid.tsx
@@ -1,24 +1,24 @@
 "use client";
 
 import * as React from "react";
-import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+import { ChipTabsRoot, ChipTabsTrigger, ChipTabsList } from "seed-design/ui/chip-tabs";
 
 export default function ChipTabsVariantNeutralSolid() {
   const [value, setValue] = React.useState("1");
   return (
     <>
-      <ChipTabs
+      <ChipTabsRoot
         variant="neutralSolid"
         defaultValue="1"
         value={value}
         onValueChange={(value) => setValue(value)}
       >
-        <ChipTabTriggerList>
-          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
-          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
-          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
-        </ChipTabTriggerList>
-      </ChipTabs>
+        <ChipTabsList>
+          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
+          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
+          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
+        </ChipTabsList>
+      </ChipTabsRoot>
       {value === "1" && <div>content 1</div>}
       {value === "2" && <div>content 2</div>}
       {value === "3" && <div>content 3</div>}

diff --git a/docs/components/example/demo/index.tsx b/docs/components/example/demo/index.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { type ActivityComponentType } from "@stackflow/react/future";
 import { AppBar, AppBarMain } from "seed-design/ui/app-bar";
 import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
-import { Tabs, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsRoot, TabsTrigger, TabsList } from "seed-design/ui/tabs";
 import { ErrorState } from "seed-design/ui/error-state";
 import { SnackbarProvider } from "seed-design/ui/snackbar";
 import { Recommendations } from "@/components/example/demo/tabs/recommendations";
@@ -41,21 +41,21 @@ const DemoActivity: ActivityComponentType<"demo/index"> = () => {
           <AppBarMain>Demo</AppBarMain>
         </AppBar>
         <AppScreenContent>
-          <Tabs
+          <TabsRoot
             value={tab}
             onValueChange={(value) => setTab(value as Tab)}
-            layout="fill"
+            triggerLayout="fill"
             size="medium"
-            fixTriggerList
+            stickyList
             style={{ height: "100%", overflowY: "auto" }}
           >
-            <TabTriggerList>
+            <TabsList>
               {TABS.map(({ label, value }) => (
-                <TabTrigger key={value} value={value}>
+                <TabsTrigger key={value} value={value}>
                   {label}
-                </TabTrigger>
+                </TabsTrigger>
               ))}
-            </TabTriggerList>
+            </TabsList>
             {tab === "recommendations" && <Recommendations />}
             {tab === "subscriptions" && (
               <ErrorState
@@ -67,7 +67,7 @@ const DemoActivity: ActivityComponentType<"demo/index"> = () => {
                 }}
               />
             )}
-          </Tabs>
+          </TabsRoot>
         </AppScreenContent>
       </AppScreen>
     </SnackbarProvider>