npm - @serendie/ui - Versions diffs - 2.2.8 → 2.3.0-dev.202512051042 - Mend

@serendie/ui 2.2.8 → 2.3.0-dev.202512051042

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +105 -1
package/dist/client.js +32 -30
package/dist/components/Steps/Steps.d.ts +13 -0
package/dist/components/Steps/Steps.js +370 -0
package/dist/components/Steps/index.d.ts +2 -0
package/dist/components/Steps/index.js +4 -0
package/dist/components/TextField/TextField.js +35 -34
package/dist/i18n/dictionary.d.ts +10 -0
package/dist/i18n/dictionary.js +13 -0
package/dist/i18n/index.d.ts +20 -0
package/dist/i18n/index.js +34 -0
package/dist/i18n/provider.d.ts +14 -0
package/dist/i18n/provider.js +15 -0
package/dist/index.d.ts +1 -0
package/dist/index.js +27 -25
package/dist/styles.css +1 -1
package/package.json +6 -2

package/README.md CHANGED Viewed

@@ -105,11 +105,48 @@ export default defineConfig({
 より実践的な例は、こちらの[サンプルプロジェクト](https://github.com/serendie/bootcamp?tab=readme-ov-file#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%A8%E4%BD%B5%E7%94%A8%E3%81%99%E3%82%8B)を参考にしてください。
+## 多言語対応
+Serendie UIは日本語・英語の多言語対応をサポートしています。`SerendieProvider`を使用して、アプリケーション全体の言語を設定できます。なお、 SerendieProvider の利用は必須ではありません。利用しない場合は、デフォルトで日本語が適用されます。
+```tsx
+import { SerendieProvider } from "@serendie/ui";
+function App() {
+  return (
+    <SerendieProvider lang="ja">{/* アプリケーション全体 */}</SerendieProvider>
+  );
+}
+```
+#### Next.js App Routerでの多言語対応
+```tsx
+// app/layout.tsx
+import { SerendieProvider } from "@serendie/ui";
+export default function RootLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { lang: "ja" | "en" };
+}) {
+  return (
+    <html lang={params.lang}>
+      <body>
+        <SerendieProvider lang={params.lang}>{children}</SerendieProvider>
+      </body>
+    </html>
+  );
+}
+```
 ## APIを詳しく知る
 Serendie UIはヘッドレスUIとして、[Ark UI](https://ark-ui.com/)を内部的に利用しており、各コンポーネントのAPIはArk UIを継承します。Selectコンポーネントなどインタラクションが複雑なコンポーネントは、Ark UIの[APIリファレンス](https://ark-ui.com/react/docs/components/select#api-reference)を合わせて参照してください。
-## Serendie UIの開発
+## Serendie UI開発者向け
 Serendie UIに新しくコンポーネントを追加する場合は、Ark UIをベースにしてください。
@@ -128,6 +165,73 @@ npm run connect:publish
 storiesファイルに変更が入ると上記が[GitHub Actions](https://github.com/serendie/serendie/blob/main/.github/workflows/publish-code-connect.yml)によって実行されます。
+### 翻訳データの管理
+Serendie UIの翻訳データは`src/i18n/dictionary.ts`で管理されており、Figma Variablesと同期できます。
+#### コンポーネント内での翻訳の使用
+`useTranslations`フックを使用して、コンポーネント内で翻訳テキストを取得できます：
+```tsx
+import { useTranslations } from "@serendie/ui";
+function MyComponent() {
+  const t = useTranslations();
+  return (
+    <div>
+      {/* 変数なし */}
+      <label>{t("common.required")}</label>
+      {/* 変数あり - {{key}} プレースホルダーを使用 */}
+      <span>{t("pagination.page", { page: 5 })}</span>
+    </div>
+  );
+}
+```
+翻訳辞書では`{{key}}`形式のプレースホルダーを使用します：
+```typescript
+// src/i18n/dictionary.ts
+export const dictionary = {
+  ja: {
+    "common.required": "必須",
+    "pagination.page": "{{page}}ページ目",
+  },
+  en: {
+    "common.required": "Required",
+    "pagination.page": "Page {{page}}",
+  },
+} as const;
+```
+#### 環境設定
+`.env`ファイルに以下を設定してください：
+```env
+FIGMA_ACCESS_TOKEN="YOUR_TOKEN"
+FIGMA_FILE_KEY="YOUR_FILE_KEY"
+# FIGMA_TRANSLATION_COLLECTION="locales"  # オプション（デフォルト: locales）
+```
+#### 翻訳管理コマンド
+```bash
+# Figmaから翻訳データを取得して src/i18n/dictionary.ts を更新
+npm run locales:pull
+# ローカルの翻訳データをFigma Variablesに反映
+npm run locales:push
+# 翻訳データの整合性チェック（キーの不足や空文字のチェック）
+npm run locales:lint
+```
+翻訳データの詳細については[scripts/locales/README.md](scripts/locales/README.md)を参照してください。
 ## Resources
 Serendie Design Systemは、Serendie UI (本リポジトリ) のほか以下の関連リポジトリから構成されています。

package/dist/client.js CHANGED Viewed

@@ -2,7 +2,7 @@
 import { SerendiePreset as e } from "./preset.js";
 import { Accordion as a } from "./components/Accordion/Accordion.js";
 import { AccordionGroup as m } from "./components/Accordion/AccordionGroup.js";
-import { Avatar as x, AvatarStyle as n } from "./components/Avatar/Avatar.js";
+import { Avatar as i, AvatarStyle as n } from "./components/Avatar/Avatar.js";
 import { Badge as s, BadgeCloseButton as c, BadgeStyle as d } from "./components/Badge/Badge.js";
 import { Banner as h } from "./components/Banner/Banner.js";
 import { BottomNavigation as S } from "./components/BottomNavigation/BottomNavigation.js";
@@ -18,7 +18,7 @@ import { DatePicker as Z } from "./components/DatePicker/DatePicker.js";
 import { Divider as $, DividerStyle as oo } from "./components/Divider/Divider.js";
 import { Drawer as eo } from "./components/Drawer/Drawer.js";
 import { DropdownMenu as ao, DropdownMenuStyle as po } from "./components/DropdownMenu/DropdownMenu.js";
-import { IconButton as io, IconButtonStyle as xo } from "./components/IconButton/IconButton.js";
+import { IconButton as xo, IconButtonStyle as io } from "./components/IconButton/IconButton.js";
 import { List as fo } from "./components/List/List.js";
 import { ListItem as co, ListItemStyle as lo } from "./components/List/ListItem.js";
 import { ModalDialog as Co } from "./components/ModalDialog/ModalDialog.js";
@@ -31,20 +31,21 @@ import { RadioButton as Mo, RadioButtonStyle as wo, radioCheckedIconCss as Ao, r
 import { RadioGroup as Fo } from "./components/RadioButton/RadioGroup.js";
 import { Search as Uo, SearchStyle as Wo } from "./components/Search/Search.js";
 import { Select as qo, SelectStyle as zo } from "./components/Select/Select.js";
-import { Switch as Ho, SwitchStyle as Jo } from "./components/Switch/Switch.js";
-import { Tabs as Oo, TabsStyle as Qo } from "./components/Tabs/Tabs.js";
-import { TabItem as Xo, TabItemStyle as Yo } from "./components/Tabs/TabItem.js";
-import { TextArea as _o } from "./components/TextArea/TextArea.js";
-import { TextField as or } from "./components/TextField/TextField.js";
-import { Toast as er, ToastStyle as tr, toaster as ar } from "./components/Toast/Toast.js";
-import { Tooltip as mr } from "./components/Tooltip/Tooltip.js";
-import { TopAppBar as xr } from "./components/TopAppBar/TopAppBar.js";
-import { DataTableComponent as fr } from "./components/DataTable/DataTableComponent.js";
-import { parse as cr } from "./node_modules/@zag-js/date-picker/dist/index.js";
+import { Steps as Ho } from "./components/Steps/Steps.js";
+import { Switch as Ko, SwitchStyle as Oo } from "./components/Switch/Switch.js";
+import { Tabs as Vo, TabsStyle as Xo } from "./components/Tabs/Tabs.js";
+import { TabItem as Zo, TabItemStyle as _o } from "./components/Tabs/TabItem.js";
+import { TextArea as or } from "./components/TextArea/TextArea.js";
+import { TextField as er } from "./components/TextField/TextField.js";
+import { Toast as ar, ToastStyle as pr, toaster as mr } from "./components/Toast/Toast.js";
+import { Tooltip as ir } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as fr } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as cr } from "./components/DataTable/DataTableComponent.js";
+import { parse as lr } from "./node_modules/@zag-js/date-picker/dist/index.js";
 export {
   a as Accordion,
   m as AccordionGroup,
-  x as Avatar,
+  i as Avatar,
   n as AvatarStyle,
   s as Badge,
   c as BadgeCloseButton,
@@ -61,15 +62,15 @@ export {
   K as ChoiceBoxStyle,
   Q as DashboardWidget,
   X as DataTable,
-  fr as DataTableComponent,
+  cr as DataTableComponent,
   Z as DatePicker,
   $ as Divider,
   oo as DividerStyle,
   eo as Drawer,
   ao as DropdownMenu,
   po as DropdownMenuStyle,
-  io as IconButton,
-  xo as IconButtonStyle,
+  xo as IconButton,
+  io as IconButtonStyle,
   fo as List,
   co as ListItem,
   lo as ListItemStyle,
@@ -89,18 +90,19 @@ export {
   zo as SelectStyle,
   D as SerendieChartTheme,
   e as SerendiePreset,
-  Ho as Switch,
-  Jo as SwitchStyle,
-  Xo as TabItem,
-  Yo as TabItemStyle,
-  Oo as Tabs,
-  Qo as TabsStyle,
-  _o as TextArea,
-  or as TextField,
-  er as Toast,
-  tr as ToastStyle,
-  mr as Tooltip,
-  xr as TopAppBar,
+  Ho as Steps,
+  Ko as Switch,
+  Oo as SwitchStyle,
+  Zo as TabItem,
+  _o as TabItemStyle,
+  Vo as Tabs,
+  Xo as TabsStyle,
+  or as TextArea,
+  er as TextField,
+  ar as Toast,
+  pr as ToastStyle,
+  ir as Tooltip,
+  fr as TopAppBar,
   q as checkboxCheckedIconCss,
   z as checkboxIconCss,
   E as checkboxUncheckedIconCss,
@@ -109,12 +111,12 @@ export {
   M as getChartColor,
   w as getChartColors,
   A as legendChartMargin,
-  cr as parseDate,
+  lr as parseDate,
   Ao as radioCheckedIconCss,
   Lo as radioIconCss,
   No as radioUncheckedIconCss,
   L as spaciousChartMargin,
-  ar as toaster,
+  mr as toaster,
   N as useBarChartProps,
   R as useChartProps,
   F as useLineChartProps,

package/dist/components/Steps/Steps.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface StepsItemProps {
+    status?: "checked" | "active" | "disabled";
+    title: string;
+    description?: string;
+    index: number;
+}
+export interface StepsProps extends React.ComponentProps<"div"> {
+    items: StepsItemProps[];
+    direction?: "horizontal" | "vertical";
+    type?: "default" | "subtle";
+}
+export declare const Steps: React.ForwardRefExoticComponent<Omit<StepsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Steps/Steps.js ADDED Viewed

@@ -0,0 +1,370 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import S from "react";
+import { SerendieSymbolCheck as v } from "@serendie/symbols";
+import { sva as C } from "../../styled-system/css/sva.js";
+import { cx as z } from "../../styled-system/css/cx.js";
+const m = C({
+  slots: [
+    "root",
+    "item",
+    "itemContent",
+    "icon",
+    "iconInner",
+    "checkIcon",
+    "number",
+    "connector",
+    "textContent",
+    "title",
+    "description"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      gap: "0"
+    },
+    connector: {
+      position: "absolute",
+      backgroundColor: "sd.reference.color.scale.gray.200",
+      zIndex: 0
+    },
+    item: {
+      display: "flex",
+      position: "relative",
+      flex: "1"
+    },
+    itemContent: {
+      display: "flex",
+      alignItems: "center",
+      gap: "sd.system.dimension.spacing.small"
+    },
+    icon: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "50%",
+      flexShrink: 0,
+      position: "relative",
+      zIndex: 1,
+      backgroundColor: "sd.system.color.component.surface"
+    },
+    iconInner: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%"
+    },
+    checkIcon: {
+      width: "100%",
+      height: "100%"
+    },
+    number: {
+      fontWeight: "500"
+    },
+    textContent: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sd.system.dimension.spacing.twoExtraSmall",
+      zIndex: 1
+    },
+    title: {
+      textStyle: "sd.system.typography.label.large",
+      color: "sd.system.color.component.onSurface"
+    },
+    description: {
+      textStyle: "sd.system.typography.label.small",
+      color: "sd.system.color.component.onSurfaceVariant"
+    }
+  },
+  variants: {
+    direction: {
+      horizontal: {
+        root: {
+          flexDirection: "row"
+        },
+        connector: {
+          height: "2px"
+        },
+        item: {
+          flexDirection: "column"
+        },
+        itemContent: {
+          flexDirection: "column"
+        }
+      },
+      vertical: {
+        root: {
+          flexDirection: "column"
+        },
+        connector: {
+          width: "2px"
+        },
+        item: {
+          flexDirection: "row"
+        },
+        itemContent: {
+          flexDirection: "row"
+        }
+      }
+    },
+    size: {
+      large: {
+        icon: {
+          width: "40px",
+          height: "40px"
+        },
+        number: {
+          textStyle: "sd.system.typography.label.large"
+        }
+      },
+      small: {
+        icon: {
+          width: "12px",
+          height: "12px"
+        },
+        number: {
+          textStyle: "sd.system.typography.label.small"
+        },
+        title: {
+          textStyle: "sd.system.typography.label.medium"
+        },
+        description: {
+          textStyle: "sd.system.typography.label.small"
+        }
+      }
+    },
+    status: {
+      checked: {
+        icon: {
+          backgroundColor: "sd.system.color.impression.primary"
+        },
+        iconInner: {
+          color: "sd.system.color.impression.onPrimary"
+        }
+      },
+      active: {
+        icon: {
+          backgroundColor: "sd.system.color.impression.primary"
+        },
+        iconInner: {
+          color: "sd.system.color.impression.onPrimary"
+        }
+      },
+      disabled: {
+        icon: {
+          backgroundColor: "sd.reference.color.scale.gray.100"
+        },
+        iconInner: {
+          color: "sd.reference.color.scale.gray.400"
+        },
+        number: {
+          color: "sd.reference.color.scale.gray.400"
+        },
+        title: {
+          color: "sd.reference.color.scale.gray.400"
+        },
+        description: {
+          color: "sd.reference.color.scale.gray.400"
+        }
+      }
+    },
+    type: {
+      default: {},
+      subtle: {}
+    },
+    connectorState: {
+      default: {},
+      progress: {
+        connector: {
+          backgroundColor: "sd.system.color.impression.primary"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      status: "checked",
+      type: "subtle",
+      css: {
+        icon: {
+          border: "none",
+          backgroundColor: "sd.system.color.impression.primary"
+        }
+      }
+    },
+    {
+      status: "active",
+      type: "subtle",
+      css: {
+        icon: {
+          border: "2px solid",
+          borderColor: "sd.system.color.impression.primary",
+          backgroundColor: "sd.system.color.component.surface"
+        }
+      }
+    },
+    {
+      status: "disabled",
+      type: "subtle",
+      css: {
+        icon: {
+          border: "none",
+          backgroundColor: "sd.reference.color.scale.gray.400"
+        }
+      }
+    },
+    {
+      direction: "horizontal",
+      size: "large",
+      css: {
+        connector: {
+          top: "20px",
+          left: "calc(50% + 20px)",
+          right: "calc(-50% + 20px)"
+        },
+        title: {
+          textAlign: "center"
+        },
+        description: {
+          fontSize: "10px",
+          lineHeight: "10px",
+          textAlign: "center"
+        }
+      }
+    },
+    {
+      direction: "horizontal",
+      size: "small",
+      css: {
+        connector: {
+          top: "6px",
+          left: "calc(50% + 6px)",
+          right: "calc(-50% + 6px)"
+        },
+        title: {
+          textAlign: "center"
+        },
+        description: {
+          fontSize: "10px",
+          lineHeight: "10px",
+          textAlign: "center"
+        }
+      }
+    },
+    {
+      direction: "vertical",
+      size: "large",
+      css: {
+        item: {
+          paddingBottom: "24px"
+        },
+        connector: {
+          left: "19px",
+          top: "40px",
+          bottom: "calc(-40px)"
+        },
+        title: {
+          textStyle: "sd.system.typography.label.extraLarge"
+        },
+        description: {
+          fontSize: "9px",
+          lineHeight: "9px"
+        }
+      }
+    },
+    {
+      direction: "vertical",
+      size: "small",
+      css: {
+        item: {
+          paddingBottom: "16px"
+        },
+        connector: {
+          left: "5px",
+          top: "12px",
+          bottom: "calc(-12px)"
+        },
+        title: {
+          textStyle: "sd.system.typography.label.extraLarge"
+        },
+        description: {
+          fontSize: "9px",
+          lineHeight: "9px"
+        }
+      }
+    },
+    {
+      size: "large",
+      status: "checked",
+      type: "default",
+      css: {
+        icon: {
+          backgroundColor: "sd.system.color.component.inversePrimary"
+        },
+        iconInner: {
+          color: "sd.system.color.impression.primary"
+        }
+      }
+    },
+    {
+      size: "small",
+      status: "active",
+      type: "default",
+      css: {
+        icon: {
+          border: "2px solid",
+          borderColor: "sd.system.color.impression.primary",
+          backgroundColor: "sd.system.color.component.surface"
+        }
+      }
+    },
+    {
+      direction: "vertical",
+      size: "small",
+      type: "subtle",
+      css: {
+        connector: {
+          top: "16px",
+          bottom: "calc(-10px)"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    direction: "horizontal",
+    status: "disabled",
+    type: "default",
+    connectorState: "default"
+  }
+}), k = S.forwardRef(
+  ({ items: n, direction: c = "horizontal", type: r = "default", className: y, ...x }, u) => {
+    const a = r === "subtle" ? "small" : "large", g = m({ direction: c, size: a, type: r });
+    return /* @__PURE__ */ t("div", { ref: u, className: z(g.root, y), ...x, children: n.map((o, i) => {
+      const s = n[i + 1], h = (s == null ? void 0 : s.status) === "active" || (s == null ? void 0 : s.status) === "checked" ? "progress" : "default", e = m({
+        direction: c,
+        size: a,
+        status: o.status,
+        type: r,
+        connectorState: h
+      }), d = !(i === n.length - 1), p = c === "vertical" && r === "subtle", f = p ? {
+        top: "30px",
+        bottom: "-8px"
+      } : void 0, b = p && d ? { paddingBottom: "31.5px" } : void 0;
+      return /* @__PURE__ */ l("div", { className: e.item, style: b, children: [
+        /* @__PURE__ */ l("div", { className: e.itemContent, children: [
+          /* @__PURE__ */ t("div", { className: e.icon, children: /* @__PURE__ */ t("div", { className: e.iconInner, children: r === "subtle" ? null : o.status === "checked" ? /* @__PURE__ */ t(v, { className: e.checkIcon }) : /* @__PURE__ */ t("span", { className: e.number, children: o.index }) }) }),
+          /* @__PURE__ */ l("div", { className: e.textContent, children: [
+            /* @__PURE__ */ t("div", { className: e.title, children: o.title }),
+            o.description && /* @__PURE__ */ t("div", { className: e.description, children: o.description })
+          ] })
+        ] }),
+        d && /* @__PURE__ */ t("div", { className: e.connector, style: f })
+      ] }, i);
+    }) });
+  }
+);
+k.displayName = "Steps";
+export {
+  k as Steps
+};

package/dist/components/Steps/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Steps } from './Steps';
2	+ export type { StepsProps, StepsItemProps } from './Steps';

package/dist/components/Steps/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { Steps as p } from "./Steps.js";
+export {
+  p as Steps
+};