feat: sync chipTabs, Tabs style with figma

component-docs/package.json

@@ -17,9 +17,9 @@
     "@seed-design/design-token": "^1.0.3",
     "@seed-design/icon": "^0.6.2",
     "@seed-design/react-checkbox": "0.0.0-alpha-20241004093556",
-    "@seed-design/react-tabs": "0.0.0-alpha-20241004093556",
-    "@seed-design/recipe": "0.0.0-alpha-20241004093556",
-    "@seed-design/stylesheet": "0.0.0-alpha-20241004093556",
+    "@seed-design/react-tabs": "0.0.0-alpha-20241014145845",
+    "@seed-design/recipe": "0.0.0-alpha-20241014145845",
+    "@seed-design/stylesheet": "0.0.0-alpha-20241014145845",
     "@stackflow/config": "^1.1.0",
     "@stackflow/core": "^1.0.13",
     "@stackflow/plugin-basic-ui": "^1.8.4",

component-docs/public/__mdx__/component/chip-tabs.mdx

@@ -10,7 +10,7 @@ import {
   type UseTabsProps,
 } from "@seed-design/react-tabs";
 import { chipTab } from "@seed-design/recipe/chipTab";
-import { ChipTabsVariant, chipTabs } from "@seed-design/recipe/chipTabs";
+import { type ChipTabsVariant, chipTabs } from "@seed-design/recipe/chipTabs";
 import clsx from "clsx";
 import * as React from "react";
 

component-docs/public/__mdx__/component/tabs.mdx

@@ -301,7 +301,7 @@ const TabIndicator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLD
           width: getWidth(),
           left: getLeft(),
           willChange: "left, width",
-          transition: isSwipeable && transitions,
+          transition: isSwipeable ? transitions : "none",
         }}
       />
     );

component-docs/public/__registry__/component/chip-tabs.json

@@ -6,7 +6,7 @@
   "registries": [
     {
       "name": "chip-tabs.tsx",
-      "content": "\"use client\";\n\nimport {\n  useLazyContents,\n  useTabs,\n  type ContentProps,\n  type TriggerProps,\n  type UseLazyContentsProps,\n  type UseTabsProps,\n} from \"@seed-design/react-tabs\";\nimport { chipTab } from \"@seed-design/recipe/chipTab\";\nimport { ChipTabsVariant, chipTabs } from \"@seed-design/recipe/chipTabs\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/chipTab.css\";\nimport \"@seed-design/stylesheet/chipTabs.css\";\n\ntype Assign<T, U> = Omit<T, keyof U> & U;\n\ninterface ChipTabsContextValue {\n  api: ReturnType<typeof useTabs>;\n  classNames: ReturnType<typeof chipTabs>;\n  shouldRender: (value: string) => boolean;\n  variant: ChipTabsVariant[\"variant\"];\n}\n\nconst ChipTabsContext = React.createContext<ChipTabsContextValue | null>(null);\n\nconst useChipTabsContext = () => {\n  const context = React.useContext(ChipTabsContext);\n  if (!context) {\n    throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n  }\n  return context;\n};\n\nexport interface ChipTabsProps\n  extends Assign<React.HTMLAttributes<HTMLDivElement>, Omit<UseTabsProps, \"layout\">>,\n    ChipTabsVariant,\n    Omit<UseLazyContentsProps, \"currentValue\"> {}\n\nexport const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props, ref) => {\n  const { className, lazyMode, isLazy, variant } = props;\n  const api = useTabs(props);\n  const classNames = chipTabs({\n    variant,\n  });\n  const { rootProps, value, restProps } = api;\n  const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });\n\n  return (\n    <div ref={ref} {...rootProps} {...restProps} className={clsx(classNames.root, className)}>\n      <ChipTabsContext.Provider\n        value={{\n          api,\n          classNames,\n          shouldRender,\n          variant,\n        }}\n      >\n        {props.children}\n      </ChipTabsContext.Provider>\n    </div>\n  );\n});\nChipTabs.displayName = \"ChipTabs\";\n\nexport const ChipTabTriggerList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...otherProps }, ref) => {\n  const { api, classNames } = useChipTabsContext();\n  const { tabTriggerListProps, triggerSize } = api;\n  const { left } = triggerSize;\n  const { triggerList } = classNames;\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current?.scrollTo({\n        // NOTE: 27px is half of tab's min-width\n        left: left - 27,\n        behavior: \"smooth\",\n      });\n    }\n  }, [left]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...tabTriggerListProps}\n      className={clsx(triggerList, className)}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n});\nChipTabTriggerList.displayName = \"ChipTabTriggerList\";\n\nexport interface ChipTabTriggerProps\n  extends Assign<React.HTMLAttributes<HTMLButtonElement>, TriggerProps> {}\n\nexport const ChipTabTrigger = React.forwardRef<HTMLButtonElement, ChipTabTriggerProps>(\n  ({ className, children, value, isDisabled, ...otherProps }, ref) => {\n    const { api, variant } = useChipTabsContext();\n    const { getTabTriggerProps } = api;\n    const { label, root } = chipTab({\n      variant,\n    });\n    const { rootProps, labelProps } = getTabTriggerProps({ value, isDisabled });\n\n    return (\n      <button ref={ref} {...rootProps} className={clsx(root, className)} {...otherProps}>\n        <span className={label} {...labelProps}>\n          {children}\n        </span>\n      </button>\n    );\n  },\n);\nChipTabTrigger.displayName = \"ChipTabTrigger\";\n\nexport const ChipTabContent = React.forwardRef<\n  HTMLDivElement,\n  Assign<React.HTMLAttributes<HTMLDivElement>, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n  const { api, classNames, shouldRender } = useChipTabsContext();\n  const { getTabContentProps } = api;\n  const { content } = classNames;\n  const tabContentProps = getTabContentProps({ value });\n  const isRender = shouldRender(value);\n\n  return (\n    <div ref={ref} {...tabContentProps} className={clsx(content, className)} {...otherProps}>\n      {isRender && children}\n    </div>\n  );\n});\nChipTabContent.displayName = \"ChipTabContent\";\n"
+      "content": "\"use client\";\n\nimport {\n  useLazyContents,\n  useTabs,\n  type ContentProps,\n  type TriggerProps,\n  type UseLazyContentsProps,\n  type UseTabsProps,\n} from \"@seed-design/react-tabs\";\nimport { chipTab } from \"@seed-design/recipe/chipTab\";\nimport { type ChipTabsVariant, chipTabs } from \"@seed-design/recipe/chipTabs\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/chipTab.css\";\nimport \"@seed-design/stylesheet/chipTabs.css\";\n\ntype Assign<T, U> = Omit<T, keyof U> & U;\n\ninterface ChipTabsContextValue {\n  api: ReturnType<typeof useTabs>;\n  classNames: ReturnType<typeof chipTabs>;\n  shouldRender: (value: string) => boolean;\n  variant: ChipTabsVariant[\"variant\"];\n}\n\nconst ChipTabsContext = React.createContext<ChipTabsContextValue | null>(null);\n\nconst useChipTabsContext = () => {\n  const context = React.useContext(ChipTabsContext);\n  if (!context) {\n    throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n  }\n  return context;\n};\n\nexport interface ChipTabsProps\n  extends Assign<React.HTMLAttributes<HTMLDivElement>, Omit<UseTabsProps, \"layout\">>,\n    ChipTabsVariant,\n    Omit<UseLazyContentsProps, \"currentValue\"> {}\n\nexport const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props, ref) => {\n  const { className, lazyMode, isLazy, variant } = props;\n  const api = useTabs(props);\n  const classNames = chipTabs({\n    variant,\n  });\n  const { rootProps, value, restProps } = api;\n  const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });\n\n  return (\n    <div ref={ref} {...rootProps} {...restProps} className={clsx(classNames.root, className)}>\n      <ChipTabsContext.Provider\n        value={{\n          api,\n          classNames,\n          shouldRender,\n          variant,\n        }}\n      >\n        {props.children}\n      </ChipTabsContext.Provider>\n    </div>\n  );\n});\nChipTabs.displayName = \"ChipTabs\";\n\nexport const ChipTabTriggerList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...otherProps }, ref) => {\n  const { api, classNames } = useChipTabsContext();\n  const { tabTriggerListProps, triggerSize } = api;\n  const { left } = triggerSize;\n  const { triggerList } = classNames;\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current?.scrollTo({\n        // NOTE: 27px is half of tab's min-width\n        left: left - 27,\n        behavior: \"smooth\",\n      });\n    }\n  }, [left]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...tabTriggerListProps}\n      className={clsx(triggerList, className)}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n});\nChipTabTriggerList.displayName = \"ChipTabTriggerList\";\n\nexport interface ChipTabTriggerProps\n  extends Assign<React.HTMLAttributes<HTMLButtonElement>, TriggerProps> {}\n\nexport const ChipTabTrigger = React.forwardRef<HTMLButtonElement, ChipTabTriggerProps>(\n  ({ className, children, value, isDisabled, ...otherProps }, ref) => {\n    const { api, variant } = useChipTabsContext();\n    const { getTabTriggerProps } = api;\n    const { label, root } = chipTab({\n      variant,\n    });\n    const { rootProps, labelProps } = getTabTriggerProps({ value, isDisabled });\n\n    return (\n      <button ref={ref} {...rootProps} className={clsx(root, className)} {...otherProps}>\n        <span className={label} {...labelProps}>\n          {children}\n        </span>\n      </button>\n    );\n  },\n);\nChipTabTrigger.displayName = \"ChipTabTrigger\";\n\nexport const ChipTabContent = React.forwardRef<\n  HTMLDivElement,\n  Assign<React.HTMLAttributes<HTMLDivElement>, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n  const { api, classNames, shouldRender } = useChipTabsContext();\n  const { getTabContentProps } = api;\n  const { content } = classNames;\n  const tabContentProps = getTabContentProps({ value });\n  const isRender = shouldRender(value);\n\n  return (\n    <div ref={ref} {...tabContentProps} className={clsx(content, className)} {...otherProps}>\n      {isRender && children}\n    </div>\n  );\n});\nChipTabContent.displayName = \"ChipTabContent\";\n"
     }
   ]
 }

component-docs/registry/component/chip-tabs.tsx

@@ -9,7 +9,7 @@ import {
   type UseTabsProps,
 } from "@seed-design/react-tabs";
 import { chipTab } from "@seed-design/recipe/chipTab";
-import { ChipTabsVariant, chipTabs } from "@seed-design/recipe/chipTabs";
+import { type ChipTabsVariant, chipTabs } from "@seed-design/recipe/chipTabs";
 import clsx from "clsx";
 import * as React from "react";
 

component-docs/registry/component/tabs.tsx

@@ -300,7 +300,7 @@ const TabIndicator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLD
           width: getWidth(),
           left: getLeft(),
           willChange: "left, width",
-          transition: isSwipeable && transitions,
+          transition: isSwipeable ? transitions : "none",
         }}
       />
     );

component-docs/registry/registry-component.ts

@@ -28,12 +28,14 @@ export const registryComponent: RegistryComponent = [
   },
   {
     name: "tabs",
-    dependencies: ["@seed-design/react-tabs"],
+    // TODO: Change to alpha version
+    dependencies: ["@seed-design/react-tabs@alpha"],
     files: ["component/tabs.tsx"],
   },
   {
     name: "chip-tabs",
-    dependencies: ["@seed-design/react-tabs"],
+    // TODO: Change to alpha version
+    dependencies: ["@seed-design/react-tabs@alpha"],
     files: ["component/chip-tabs.tsx"],
   },
   {

component-docs/registry/schema.ts

@@ -37,12 +37,8 @@ export const registryComponentSchema = z.array(registryComponentItemSchema);
 /**
  * @description 머신이 생성한 registry component schema
  */
-export const registryComponentItemMachineGeneratedSchema = z.object({
-  name: z.string(),
-  description: z.string().optional(),
-  dependencies: z.array(z.string()).optional(),
-  devDependencies: z.array(z.string()).optional(),
-  innerDependencies: z.array(z.string()).optional(),
+const omittedRegistryComponentSchema = registryComponentItemSchema.omit({ files: true });
+export const registryComponentItemMachineGeneratedSchema = omittedRegistryComponentSchema.extend({
   registries: z.array(
     z.object({
       name: z.string(),

examples/stackflow-spa/package.json

@@ -12,10 +12,10 @@
     "@seed-design/react-popover": "0.0.0-alpha-20241004093556",
     "@seed-design/react-radio-group": "0.0.0-alpha-20241004093556",
     "@seed-design/react-switch": "0.0.0-alpha-20241004093556",
-    "@seed-design/react-tabs": "0.0.0-alpha-20241004093556",
+    "@seed-design/react-tabs": "0.0.0-alpha-20241014145845",
     "@seed-design/react-text-field": "0.0.0-alpha-20241004093556",
-    "@seed-design/recipe": "0.0.0-alpha-20241004093556",
-    "@seed-design/stylesheet": "0.0.0-alpha-20241004093556",
+    "@seed-design/recipe": "0.0.0-alpha-20241014145845",
+    "@seed-design/stylesheet": "0.0.0-alpha-20241014145845",
     "@stackflow/core": "^1.0.13",
     "@stackflow/plugin-basic-ui": "^1.8.4",
     "@stackflow/plugin-history-sync": "^1.6.0",

packages/cli/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @seed-design/cli
 
+## 0.0.0-alpha-20241014145845
+
+### Patch Changes
+
+- sync style chipTabs, Tabs to figma
+
+## 0.0.0-alpha-20241014090620
+
+### Patch Changes
+
+- change baseURL, add prepack script
+
+## 0.0.0-alpha-20241014090450
+
+### Patch Changes
+
+- change registry schema
+
 ## 0.0.0-alpha-20241014082802
 
 ### Patch Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/cli",
-  "version": "0.0.0-alpha-20241014082802",
+  "version": "0.0.0-alpha-20241014145845",
   "type": "module",
   "repository": {
     "type": "git",
@@ -19,6 +19,7 @@
     "node": ">=18"
   },
   "scripts": {
+    "prepack": "yarn build",
     "build": "ENV=prod node ./build.mjs",
     "dev": "ENV=dev node ./dev.mjs",
     "test": "yarn vitest"

packages/cli/src/commands/add.ts

@@ -1,5 +1,5 @@
 import { getConfig } from "@/src/utils/get-config";
-import { fetchComponentMetadatas, getMetadataIndex } from "@/src/utils/get-metadata";
+import { fetchRegistryComponentItem, getRegistryComponentIndex } from "@/src/utils/get-metadata";
 import { getPackageManager } from "@/src/utils/get-package-manager";
 import { transform } from "@/src/utils/transformers";
 import * as p from "@clack/prompts";
@@ -45,10 +45,10 @@ export const addCommand = (cli: CAC) => {
         process.exit(1);
       }
 
-      const metadataIndex = await getMetadataIndex();
+      const registryComponentIndex = await getRegistryComponentIndex();
 
       let selectedComponents: string[] = options.all
-        ? metadataIndex.map((meatadata) => meatadata.name)
+        ? registryComponentIndex.map((registry) => registry.name)
         : options.components;
 
       if (!options.components?.length && !options.all) {
@@ -57,7 +57,7 @@ export const addCommand = (cli: CAC) => {
           string
         >({
           message: "Select all components to add",
-          options: metadataIndex.map((metadata) => {
+          options: registryComponentIndex.map((metadata) => {
             return {
               label: metadata.name,
               value: metadata.name,
@@ -79,10 +79,10 @@ export const addCommand = (cli: CAC) => {
         process.exit(0);
       }
 
-      const allComponents = addRelativeComponents(selectedComponents, metadataIndex);
+      const allComponents = addRelativeComponents(selectedComponents, registryComponentIndex);
       const addedComponents = allComponents.filter((c) => !selectedComponents.includes(c));
       const config = await getConfig(cwd);
-      const metadatas = await fetchComponentMetadatas(allComponents);
+      const registryComponentItems = await fetchRegistryComponentItem(allComponents);
 
       p.log.message(`Selection: ${highlight(selectedComponents.join(", "))}`);
       if (addedComponents.length) {
@@ -91,8 +91,8 @@ export const addCommand = (cli: CAC) => {
         );
       }
 
-      for (const metadata of metadatas) {
-        for (const registry of metadata.registries) {
+      for (const component of registryComponentItems) {
+        for (const registry of component.registries) {
           const UIFolderPath = config.resolvedUIPaths;
 
           if (!fs.existsSync(UIFolderPath)) {
@@ -122,12 +122,12 @@ export const addCommand = (cli: CAC) => {
         const { start, stop } = p.spinner();
 
         // Install dependencies.
-        if (metadata.dependencies?.length) {
+        if (component.dependencies?.length) {
           start(color.gray("Installing dependencies"));
 
           const result = await execa(
             packageManager,
-            [packageManager === "npm" ? "install" : "add", ...metadata.dependencies],
+            [packageManager === "npm" ? "install" : "add", ...component.dependencies],
             {
               cwd,
             },
@@ -137,20 +137,20 @@ export const addCommand = (cli: CAC) => {
             console.error(result.all);
             process.exit(1);
           } else {
-            for (const deps of metadata.dependencies) {
+            for (const deps of component.dependencies) {
               p.log.info(`- ${deps}`);
             }
             stop("Dependencies installed.");
           }
         }
 
         // Install devDependencies.
-        if (metadata.devDependencies?.length) {
+        if (component.devDependencies?.length) {
           start(color.gray("Installing devDependencies"));
 
           const result = await execa(
             packageManager,
-            [packageManager === "npm" ? "install" : "add", "-D", ...metadata.devDependencies],
+            [packageManager === "npm" ? "install" : "add", "-D", ...component.devDependencies],
             {
               cwd,
             },
@@ -160,7 +160,7 @@ export const addCommand = (cli: CAC) => {
             console.error(result.all);
             process.exit(1);
           } else {
-            for (const deps of metadata.devDependencies) {
+            for (const deps of component.devDependencies) {
               p.log.info(`- ${deps}`);
             }
             stop("Dependencies installed.");