@janbox/storefront-builder 2.0.25 → 2.0.27

package/README.md

@@ -21,6 +21,7 @@ pnpm add react@^19 react-dom@^19 @janbox/storefront-ui@>=2
 | `@janbox/storefront-builder` | Node components (33 nodes) |
 | `@janbox/storefront-builder/editor` | Giao diện editor đầy đủ (`Editor` component + toolbars) |
 | `@janbox/storefront-builder/templates` | Element groups và section templates có sẵn |
+| `@janbox/storefront-builder/theme` | Design tokens (palette, text scale) dùng trong builder |
 | `@janbox/storefront-builder/style.css` | CSS bundle (bắt buộc import) |
 
 ---
@@ -403,6 +404,49 @@ type Theme = {
 
 ---
 
+## Builder Theme (Design Tokens)
+
+Ngoài theme của `@janbox/storefront-ui` (truyền vào `Editor`), builder cũng export bộ design tokens nội bộ dùng cho styling:
+
+```ts
+import { palette, text, theme } from '@janbox/storefront-builder/theme';
+```
+
+### `palette`
+
+Bảng màu nội bộ của builder — dùng cho UI editor và có thể tái sử dụng trong custom toolbar/component:
+
+```ts
+palette.primary['5s']  // '#597ef7'
+palette.ink['6s']      // '#333333'
+palette.red['4s']      // '#ff7875'
+```
+
+### `text`
+
+Text scale (font size + line height) theo các cấp từ `xs` đến `9xl`:
+
+```ts
+text.sm   // { fontSize: '0.875rem', lineHeight: '1.25rem' }
+text.base // { fontSize: '1rem', lineHeight: '1.5rem' }
+text['2xl'] // { fontSize: '1.5rem', lineHeight: '2rem' }
+```
+
+### `theme`
+
+Object tổng hợp `{ palette, text }` — tiện khi cần truyền cả hai:
+
+```ts
+import { theme } from '@janbox/storefront-builder/theme';
+
+theme.palette.blue['6s'] // '#0f62fe'
+theme.text.lg            // { fontSize: '1.125rem', lineHeight: '1.75rem' }
+```
+
+> **Lưu ý:** Đây là design tokens của builder UI, khác với prop `theme` (kiểu `Theme` của `@janbox/storefront-ui`) truyền vào `Editor` để theming storefront.
+
+---
+
 ## TypeScript
 
 Package đi kèm đầy đủ file `.d.ts`. Các type chính:

package/dist/components/composer/composer.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from 'react';
+import { Editor } from '@craftjs/core';
+export type ComposerProps = ComponentProps<typeof Editor>;
+export declare const Composer: ({ resolver, children, ...props }: ComposerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/composer/index.d.ts

@@ -1,4 +1 @@
-import { ComponentProps } from 'react';
-import { Editor } from '@craftjs/core';
-export type ComposerProps = ComponentProps<typeof Editor>;
-export declare const Composer: ({ resolver, children, ...props }: ComposerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export * from './composer';

package/dist/{index-C9gD44fK.js → composer-I1-nDI_3.js}

@@ -1,6 +1,6 @@
 import { jsx as i } from "@emotion/react/jsx-runtime";
 import { useMemo as m, useEffect as f } from "react";
-import { u as c, C as v, D as p, a as N, d as h, N as E, g as b, r as D, b as y, B as l } from "./toaster-CzSp838P.js";
+import { u as c, C as v, D as p, a as N, d as h, N as E, g as b, r as D, b as y, B as l } from "./toaster-DzezW7No.js";
 import { isNil as u, isString as d } from "lodash-es";
 import "flat";
 const k = ({ children: t, data: e }) => {

package/dist/editor/components/image-gallery-dialog.d.ts

@@ -0,0 +1,9 @@
+import { ImageSource } from '../types';
+interface ImageGalleryDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    images?: ImageSource[];
+    onSelect?: (source: ImageSource) => void;
+}
+export declare const ImageGalleryDialog: ({ open, onOpenChange, images, onSelect }: ImageGalleryDialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/editor/components/image-source-selection.d.ts

@@ -1,7 +1,8 @@
 import { default as React } from 'react';
+import { ImageSource } from '../types';
 interface ImageSourceSelectionProps {
-    source?: string;
-    onChange?: (source?: string) => void;
+    source?: ImageSource;
+    onChange?: (source?: ImageSource) => void;
     previewStyle?: React.CSSProperties;
 }
 export declare const ImageSourceSelection: ({ source, onChange, previewStyle }: ImageSourceSelectionProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/editor/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './color-picker-popover';
 export * from './color-preview';
 export * from './css-size-input';
 export * from './degree-picker';
+export * from './image-gallery-dialog';
 export * from './image-source-selection';
 export * from './toolbar-field';
 export * from './toolbar-group';

package/dist/editor/hooks/use-editor.d.ts

@@ -1,5 +1,6 @@
 import { Screen, Theme } from '@janbox/storefront-ui/theme';
 import { SerializedNodes } from '../../types';
+import { EditorResources } from '../types';
 export type EditorMode = 'full' | 'compact';
 export type VariableOption = {
     label: string;
@@ -23,6 +24,8 @@ export type EditorState = {
     screen: Screen;
     action?: string;
     variableDefinitions?: VariableDefinition[];
+    /** Tài nguyên edit-time do consumer cấp. Truyền một lần lúc init, bất biến. */
+    resources?: EditorResources;
 };
 type MutableEditorState = Pick<EditorState, 'theme' | 'mode' | 'screen' | 'action' | 'variableDefinitions'>;
 type EditorStateValue = EditorState & {

package/dist/editor/lib/index.d.ts

@@ -1,6 +1,7 @@
 import { Theme } from '@janbox/storefront-ui/theme';
 import { SidebarProps } from './sidebar';
 import { Resolver } from '../../types';
+import { EditorResources } from '../types';
 import { EditorHandlers, VariableDefinition } from '../hooks/use-editor';
 import { PropsWithChildren, ReactNode } from 'react';
 export type EditorProps = PropsWithChildren<{
@@ -10,7 +11,9 @@ export type EditorProps = PropsWithChildren<{
     handlers: EditorHandlers;
     variableDefinitions?: VariableDefinition[];
     headerActions?: ReactNode;
+    resources?: EditorResources;
 }>;
 export type { EditorHandlers, VariableDefinition, VariableOption } from '../hooks/use-editor';
+export type { EditorResources, ImageSource } from '../types';
 export type { InsertTemplate, InsertTemplateGroup } from './sidebar/insert-action';
-export declare const Editor: ({ theme, insert, resolver, handlers, variableDefinitions, headerActions, children, }: EditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Editor: ({ theme, insert, resolver, handlers, variableDefinitions, headerActions, resources, children, }: EditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/editor/related/button/index.d.ts

@@ -0,0 +1 @@
+export * from './button.inspector';

package/dist/editor/related/image/index.d.ts

@@ -0,0 +1 @@
+export * from './image.inspector';

package/dist/editor/types/index.d.ts

@@ -1 +1,12 @@
 export type CssUnit = 'px' | '%';
+export type ImageSource = {
+    src: string;
+    alt?: string;
+};
+/**
+ * Tài nguyên edit-time do consumer cấp cho Editor (prop `resources`).
+ * Flat, không gắn riêng node nào — dùng chung ở nhiều nơi (image inspector, background, ...).
+ */
+export type EditorResources = {
+    imageSources?: ImageSource[];
+};

package/dist/editor/ui/cascader/cascader.d.ts

@@ -0,0 +1,41 @@
+import { JSX, Ref } from 'react';
+import { Placement, UseFloatingOptions, UseDismissProps } from '@floating-ui/react';
+import { ShallowMerge } from '@janbox/storefront-ui/types';
+export interface WbCascaderOption {
+    label: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+    children?: WbCascaderOption[];
+}
+interface WbCascaderExtendedProps {
+    innerRef?: Ref<HTMLDivElement>;
+    placement?: Placement;
+    contentWidth?: number | 'fit-parent';
+    onOpenChange?: UseFloatingOptions['onOpenChange'];
+    visible?: boolean;
+    dissmiss?: UseDismissProps;
+    defaultValue?: string[];
+    value?: string[] | null;
+    options: WbCascaderOption[];
+    /** Fires with the full value path and matching option path. */
+    onChange?: (value: string[], options: WbCascaderOption[]) => void;
+    /** How each column expands to reveal its children. Default: `click` */
+    expandTrigger?: 'click' | 'hover';
+    /** Allow committing a value at any level, not just leaves. Default: `false` */
+    changeOnSelect?: boolean;
+    placeholder?: string;
+    /** Show a clear button when a value is selected. Default: `false` */
+    allowClear?: boolean;
+    /** Renders the selected path in the trigger. Defaults to labels joined by `separator`. */
+    displayRender?: (labels: React.ReactNode[], options: WbCascaderOption[]) => React.ReactNode;
+    separator?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    size?: '28' | '32' | '36';
+    columnWidth?: number;
+    columnMaxHeight?: number;
+    emptyText?: React.ReactNode;
+}
+export type WbCascaderProps = ShallowMerge<JSX.IntrinsicElements['button'], WbCascaderExtendedProps>;
+export declare const WbCascader: (props: WbCascaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/editor/ui/cascader/index.d.ts

@@ -0,0 +1 @@
+export * from './cascader';

package/dist/editor/ui/date-picker/date-picker.d.ts

@@ -1,21 +1,10 @@
-import { JSX, Ref } from 'react';
-import { Placement, UseFloatingOptions, UseDismissProps } from '@floating-ui/react';
-type WbDatePickerProps = {
-    innerRef?: Ref<HTMLDivElement>;
-    placement?: Placement;
-    contentWidth?: number | 'fit-parent';
-    onOpenChange?: UseFloatingOptions['onOpenChange'];
-    open?: boolean;
-    dissmiss?: UseDismissProps;
-    value?: Date | null;
+import { HTMLInputTypeAttribute } from 'react';
+import { WbInputProps } from '../input';
+type InputDateType = Extract<HTMLInputTypeAttribute, 'date' | 'datetime-local'>;
+type WbDatePickerProps = Omit<WbInputProps, 'value' | 'defaultValue' | 'type'> & {
     defaultValue?: Date;
-    onChange?: (value: Date) => void;
-    placeholder?: string;
-    prefix?: React.ReactNode;
-    suffix?: React.ReactNode;
-    size?: '28' | '32' | '36';
-    referenceProps?: JSX.IntrinsicElements['button'];
-    showTimeInput?: boolean;
+    value?: Date;
+    type?: InputDateType;
 };
-export declare const WbDatePicker: (props: WbDatePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const WbDatePicker: ({ type, ...props }: WbDatePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor/ui/index.d.ts

@@ -10,6 +10,7 @@ export * from './radio-button';
 export * from './tabs';
 export * from './scroll-view';
 export * from './select';
+export * from './cascader';
 export * from './loading-overlay';
 export * from './switch';
 export * from './textarea';