sellmate-design-system-react 9.0.0-beta.61 → 9.0.0-beta.63

package/dist/recipes/AppShell.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 레시피 페이지가 기대는 **앱 셸**의 자리표시.
+ *
+ * 레시피 페이지는 이 파일을 `./AppShell` 로 import 한다 — 소비 앱에서는 그 자리에 AGENTS.md §4-1
+ * 대로 만든 자기 셸(SLayout · SGnb · SPageHeader · SPage)이 온다.
+ *
+ * 페이지 레시피는 **페이지 안**의 골격이라 GNB·레이아웃은 보여 주지 않는다. 셸 조합은
+ * Layout Builder 의 몫이다. 그래서 여기서는 셸 중 페이지가 정하는 부분 — 페이지 헤더와
+ * `SPage`(높이·폭 모드) — 만 세운다. 둘 사이의 중개(헤더 그림자·폭 정렬)는 `SLayout` 이
+ * 쓰는 페이지 열(`SPageColumn`)을 그대로 써서 셸 안에서와 똑같이 동작하게 한다.
+ */
+import type { ReactNode } from 'react';
+import { type SPageContentHeight, type SPageContentWidth, type SPageHeaderProps, type SPagePadding } from 'sellmate-design-system-react';
+export default function AppShell({ children, header, scrollEndSpacing, contentHeight, contentWidth, padding, }: {
+    children: ReactNode;
+    header?: SPageHeaderProps;
+    scrollEndSpacing?: boolean;
+    contentHeight?: SPageContentHeight;
+    contentWidth?: SPageContentWidth;
+    padding?: SPagePadding;
+}): import("react").JSX.Element;

package/dist/recipes/ExcelFilePopupPage.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 표를 담은 팝업 — 본문이 아니라 표가 스크롤한다. 툴바·푸터는 늘 보인다.
+ * SPopup 의 본문은 이미 남은 높이를 잡고 있으므로, 본문 루트부터 표까지 세로 축을 잇는다 (§4-2 와 같은 사슬).
+ */
+export default function ExcelFilePopupPage(): import("react").JSX.Element;

package/dist/recipes/LoginPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 로그인 전이라 앱 셸이 없다 — AppShell 을 쓰지 않고 회색 바탕 위에 카드 하나만 선다.
+ * 카드는 화면을 잡지 않으므로 바깥 한 겹은 앱이 만든다. 그 한 겹이 하는 일은 셋뿐이다:
+ *   바탕·여백 / items-stretch 로 카드가 높이를 채우게 / justify-center 로 가로 가운데
+ */
+export default function LoginPage(): import("react").JSX.Element;

package/dist/recipes/ProductCreatePage.d.ts

@@ -0,0 +1 @@
+export default function ProductCreatePage(): import("react").JSX.Element;

package/dist/recipes/ProductCreateSectionsPage.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 입력 항목이 많으면 유형별로 SSectionHeaderCard 로 나눈다 (§4-5).
+ * 한 페이지에 섹션 카드가 둘 이상이므로 marker 를 전부 켠다 — 켜거나 끄거나 전부 같게 간다.
+ */
+export default function ProductCreateSectionsPage(): import("react").JSX.Element;

package/dist/recipes/ProductDetailInlineEditPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 섹션마다 독립 인라인 폼이 있는 상세 페이지 (§4-4 의 변형).
+ * 섹션 안에서 닫히는 저장·취소는 카드의 button·footerLeft 로 넘긴다 (§3-7-8).
+ *
+ * 이 화면은 섹션마다 스스로 저장하고 끝나 **페이지 전체를 확정하는 액션이 없다** — 그래서 카드 밖
+ * 하단 줄도 두지 않는다. 페이지 단위로 확정·삭제할 것이 있으면 그것만 카드 밖 하단 줄에 둔다
+ * (§4-4 기본형 참조) — 섹션 푸터와 섞지 않는다.
+ */
+export default function ProductDetailInlineEditPage(): import("react").JSX.Element;

package/dist/recipes/ProductDetailPage.d.ts

@@ -0,0 +1 @@
+export default function ProductDetailPage(): import("react").JSX.Element;

package/dist/recipes/ProductListChipFilterPage.d.ts

@@ -0,0 +1 @@
+export default function ProductListChipFilterPage(): import("react").JSX.Element;

package/dist/recipes/ProductListPage.d.ts

@@ -0,0 +1 @@
+export default function ProductListPage(): import("react").JSX.Element;

package/dist/recipes/TransferOrderPopupPage.d.ts

@@ -0,0 +1,2 @@
+export declare function openTransferOrderPopup(orderId: string): void;
+export default function TransferOrderPopupPage(): import("react").JSX.Element;

package/dist/recipes/api.d.ts

@@ -0,0 +1,91 @@
+import type { SDateRangeValue, STableSort } from 'sellmate-design-system-react';
+export type ProductStatus = 'selling' | 'stopped';
+export interface Product {
+    id: number;
+    name: string;
+    category: string;
+    stock: number;
+    price: number;
+    status: ProductStatus;
+    createdAt: string;
+    [key: string]: unknown;
+}
+export declare const STATUS_OPTIONS: {
+    label: string;
+    value: string;
+}[];
+export declare const CATEGORY_OPTIONS: {
+    label: string;
+    value: string;
+}[];
+export interface ProductQuery {
+    status?: string;
+    category?: string;
+    keywords?: string[];
+    /** 등록일 범위 [start, end] — 날짜 피커가 지워지면 null 이 온다 */
+    period?: SDateRangeValue;
+    sort?: STableSort | null;
+    page: number;
+    rowsPerPage: number;
+}
+export declare function useProductList(query: ProductQuery): {
+    rows: Product[];
+    total: number;
+    lastPage: number;
+    loading: boolean;
+};
+export declare function removeProducts(ids: number[]): Promise<void>;
+export declare function saveProduct(values: Record<string, unknown>): Promise<void>;
+/** 상세 화면이 받는 값 — 표시용 문자열로 이미 다듬어져 온다고 본다 */
+export declare function useProduct(id: number): {
+    id: number;
+    name: string;
+    code: string;
+    createdAt: string;
+    category: string;
+    status: ProductStatus;
+    price: string;
+    cost: string;
+    receiver: string;
+    phone: string;
+    address: string;
+};
+export declare const ORDER_TABS: {
+    label: string;
+    value: string;
+}[];
+/** 이동 오더 한 건의 품목·이력 */
+export declare function useTransferOrder(orderId: string): {
+    orderId: string;
+    from: string;
+    to: string;
+    requestedAt: string;
+    items: {
+        id: number;
+        sku: string;
+        name: string;
+        qty: number;
+    }[];
+    history: {
+        id: number;
+        at: string;
+        action: string;
+        by: string;
+    }[];
+};
+export declare function applyExcelFiles(ids: number[]): Promise<void>;
+/** 업로드한 엑셀 파일 목록 */
+export declare function useExcelFiles(query: {
+    keyword?: string;
+    page: number;
+    rowsPerPage: number;
+}): {
+    rows: {
+        id: number;
+        fileName: string;
+        uploadedAt: string;
+        rows: number;
+    }[];
+    total: number;
+    lastPage: number;
+};

package/dist/recipes/recipe-story.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 레시피 스토리가 함께 쓰는 틀.
+ *
+ * 레시피 파일은 소비 앱의 한 라우트라서, 앱 진입점이 주는 두 가지를 여기서 대신 준다 —
+ * 뷰포트 높이(`h-screen`, §4-1)와 `SModal.*` 가 그려질 `SModalOutlet`.
+ */
+import type { Decorator } from '@storybook/react-vite';
+export declare const recipeDecorator: Decorator;
+/**
+ * `Recipes/…` 스토리 meta 의 `parameters.docs`. 설명은 레시피마다 다르므로 받는다.
+ *
+ * ⚠️ meta 의 `parameters` 자체는 **객체 리터럴**로 쓰고 이 함수는 그 안의 `docs` 에만 쓴다 —
+ * `parameters: recipeParameters(…)` 처럼 통째로 함수 결과를 넘기면 Storybook 의 CSF 변환이
+ * 그 자리를 덮어써 `layout: 'fullscreen'` 이 사라진다(캔버스에 16px 여백이 생겨 h-screen 화면이 잘린다).
+ */
+export declare function recipeDocs(description: string): {
+    description: {
+        component: string;
+    };
+    story: {
+        inline: boolean;
+        height: string;
+    };
+};
+/** 각 예시의 "Show code" 에 레시피 파일 원문을 싣는다 */
+export declare const showCode: (code: string) => {
+    docs: {
+        source: {
+            code: string;
+            language: string;
+        };
+    };
+};

package/dist/recipes/router.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 레시피가 기대는 **앱 쪽 라우터**의 자리표시.
+ *
+ * 레시피 페이지는 이 모듈을 `./router` 로 import 한다 — 소비 앱에서는 그 자리에
+ * 쓰는 라우터(react-router·Next 등)의 이동 함수와 경로 파라미터가 온다. 여기서는 아무 데도 가지 않는다.
+ */
+export declare function useNavigate(): (path: string | -1) => void;
+/** 현재 경로의 파라미터 — 레시피에서는 고정값을 돌려준다 */
+export declare function useParams(): Record<string, string>;

package/dist/styles.css

@@ -635,6 +635,9 @@
   .top-\[-1px\] {
     top: -1px;
   }
+  .top-\[10px\] {
+    top: 10px;
+  }
   .top-\[12px\] {
     top: 12px;
   }
@@ -674,6 +677,9 @@
   .right-\[2px\] {
     right: 2px;
   }
+  .right-\[8px\] {
+    right: 8px;
+  }
   .right-\[10px\] {
     right: 10px;
   }
@@ -896,6 +902,9 @@
   .mr-sd-4 {
     margin-right: var(--spacing-sd-4);
   }
+  .mr-sd-6 {
+    margin-right: var(--spacing-sd-6);
+  }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -908,6 +917,9 @@
   .mb-sd-8 {
     margin-bottom: var(--spacing-sd-8);
   }
+  .mb-sd-32 {
+    margin-bottom: var(--spacing-sd-32);
+  }
   .-ml-px {
     margin-left: -1px;
   }
@@ -1734,6 +1746,9 @@
   .grid-cols-\[repeat\(7\,var\(--cmp-datepicker-calendar-day-width\)\)\] {
     grid-template-columns: repeat(7,var(--cmp-datepicker-calendar-day-width));
   }
+  .grid-cols-\[repeat\(auto-fill\,320px\)\] {
+    grid-template-columns: repeat(auto-fill,320px);
+  }
   .grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
   }
@@ -2159,6 +2174,9 @@
   .gap-x-\[var\(--cmp-datepicker-calendar-legend-group-gap\)\] {
     column-gap: var(--cmp-datepicker-calendar-legend-group-gap);
   }
+  .gap-x-sd-12 {
+    column-gap: var(--spacing-sd-12);
+  }
   .gap-y-\[4px\] {
     row-gap: 4px;
   }
@@ -2266,6 +2284,9 @@
   .rounded-\(--radius-8\) {
     border-radius: var(--radius-8);
   }
+  .rounded-6 {
+    border-radius: var(--radius-6);
+  }
   .rounded-8 {
     border-radius: var(--radius-8);
   }
@@ -3905,9 +3926,6 @@
   .text-\(--cmp-chart-axis-color\) {
     color: var(--cmp-chart-axis-color);
   }
-  .text-\(--cmp-chart-bar-dataLabel-color-default\) {
-    color: var(--cmp-chart-bar-dataLabel-color-default);
-  }
   .text-\(--cmp-chart-chartTooltip-title-color\) {
     color: var(--cmp-chart-chartTooltip-title-color);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.61",
+  "version": "9.0.0-beta.63",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -49,6 +49,7 @@
     "build:dts": "tsc -p tsconfig.build.json --emitDeclarationOnly",
     "gen:tokens": "node scripts/generate-tokens.mjs",
     "docs:gen": "node scripts/gen-docs.mjs",
+    "docs:recipes": "node scripts/gen-recipes.mjs",
     "build:css": "cp ./src/styles/theme.css ./dist/theme.css && cp ./src/styles/pretendard.css ./dist/pretendard.css && rm -rf ./dist/fonts && cp -R ./src/styles/fonts ./dist/fonts && tailwindcss -i ./src/styles/entry.css -o ./dist/styles.css",
     "dev": "tsup --watch",
     "playground": "vite --config vite.playground.config.ts",
@@ -72,6 +73,7 @@
     "check:routing": "node scripts/check-routing.mjs",
     "check:cn-scales": "node scripts/check-cn-scales.mjs",
     "check:categories": "node scripts/check-story-categories.mjs",
+    "check:recipes": "node scripts/gen-recipes.mjs --check",
     "version": "node scripts/version.mjs --prerelease beta --tag",
     "version:dry": "node scripts/version.mjs --prerelease beta --dry-run",
     "version:stable": "node scripts/version.mjs --tag",