@janbox/storefront-builder 2.0.10 → 2.0.12

package/README.md

@@ -60,6 +60,9 @@ export default function BuilderPage() {
           await savePage(data);
         },
         close: () => navigateBack(),
+        saveTheme: async (theme) => {
+          await api.saveTheme(theme); // optional: enables theme editing
+        },
       }}
       insert={{
         groups: [HERO_SECTION_GROUP, FAQS_SECTION_GROUP],
@@ -344,6 +347,29 @@ const { id, connectors, actions } = useNode();
 
 ---
 
+## Theme Editor
+
+Sidebar tích hợp sẵn tab Theme cho phép xem và chỉnh sửa palette. Tính năng chỉnh sửa được kích hoạt khi truyền `handlers.saveTheme`:
+
+```tsx
+<Editor
+  theme={myTheme}
+  handlers={{
+    // ...
+    saveTheme: async (theme) => {
+      await api.updateTheme(theme);
+    },
+  }}
+/>
+```
+
+- Không truyền `saveTheme` → tab Theme chỉ hiển thị palette (view only)
+- Truyền `saveTheme` → hiện color picker cho primary/secondary + nút Save/Cancel
+- Cancel hoặc rời tab → reset về theme ban đầu
+- Save → gọi `saveTheme(theme)` async, có loading state
+
+---
+
 ## Stylesheet
 
 Import stylesheet một lần ở entry của app:
@@ -388,7 +414,6 @@ import type {
   NodeTree,          // cây node
   Resolver,          // map resolvedName → component
   NodeConfig,        // config truyền vào defineNode()
-  DisplayOnValue,    // responsive visibility: Partial<Record<Screen, boolean>>
 } from '@janbox/storefront-builder';
 ```
 

package/dist/components/node-element/index.d.ts

@@ -1,5 +1,7 @@
 import { ElementProps } from '@craftjs/core';
+import { NodeCustom } from '../../types';
 export type NodeElementProps<T extends React.ElementType> = ShallowMerge<ElementProps<T>, {
     is: T;
+    custom?: NodeCustom;
 }>;
 export declare const NodeElement: <T extends React.ElementType>(props: NodeElementProps<T>) => React.ReactElement;

package/dist/editor/components/color-picker-popover.d.ts

@@ -3,8 +3,9 @@ import { WbPopoverProps } from '../ui';
 type ColorPickerContentProps = {
     color?: string;
     onChange?: (color: string) => void;
+    hidePalette?: boolean;
 };
 export declare const ColorPickerContent: ({ color, onChange }: ColorPickerContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export type ColorPickerPopoverProps = ShallowMerge<WbPopoverProps, ColorPickerContentProps>;
-export declare const ColorPickerPopover: ({ color, onChange, children, placement, ...props }: ColorPickerPopoverProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ColorPickerPopover: ({ color, onChange, hidePalette, children, placement, ...props }: ColorPickerPopoverProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,8 +1,7 @@
 import { CssUnit } from '../types';
-import { Screen } from '@janbox/storefront-ui/theme';
-import { ColorVariant } from '@janbox/storefront-ui/types';
+import { Screen, ColorScale } from '@janbox/storefront-ui/theme';
 export type ColorVariantOption = {
-    value: ColorVariant;
+    value: ColorScale;
     label: string;
 };
 export declare const colorVariantOptions: ColorVariantOption[];

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

@@ -5,6 +5,7 @@ export type EditorHandlers = {
     close: () => void;
     submit: (abc: SerializedNodes) => void | Promise<void>;
     upload: (file: File) => string | Promise<string>;
+    saveTheme?: (theme: Theme) => void | Promise<void>;
 };
 export type EditorState = {
     theme: Theme;

package/dist/editor/lib/sidebar/theme-action.d.ts

@@ -0,0 +1 @@
+export declare const ThemeAction: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/editor/toolbars/color-variant/color-variant.d.ts

@@ -1,5 +1,5 @@
 import { ColorVariantOption } from '../../constants';
 import { WbSelectProps } from '../../ui';
-import { ColorVariant } from '@janbox/storefront-ui/types';
-export type ColorVariantToolbarProps = Partial<WbSelectProps<ColorVariant, ColorVariantOption>>;
+import { ColorScale } from '@janbox/storefront-ui/theme';
+export type ColorVariantToolbarProps = Partial<WbSelectProps<ColorScale, ColorVariantOption>>;
 export declare const ColorVariantToolbar: (props: ColorVariantToolbarProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -24,7 +24,7 @@ export * from './color-variant';
 export * from './flex';
 export * from './number-field';
 export * from './number-field-mix-options';
-export * from './display-on';
+export * from './visibility';
 export * from './justify-items';
 export * from './grid-align-items';
 export * from './aspect-ratio';

package/dist/editor/toolbars/visibility/index.d.ts

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

package/dist/editor/toolbars/visibility/visibility.d.ts

@@ -0,0 +1 @@
+export declare const VisibilityToolbar: () => import("@emotion/react/jsx-runtime").JSX.Element;