@janbox/storefront-builder 1.0.3 → 1.0.5

package/dist/lib/tabs/README.md

@@ -0,0 +1,90 @@
+# TabsNode
+
+Root container cho tabs component. Quản lý active state và chứa `TabListNode` (headers) + `TabContentNode` (panels).
+
+## Resolved name
+
+`Tabs`
+
+## Configurable props
+
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `defaultActiveIndex` | `number` | Index của tab active mặc định (0-based) |
+
+### `sx` props
+
+```ts
+sx?: {
+  // size
+  width?: number | string
+
+  // spacing
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  marginTop?: number
+  marginRight?: number
+  marginBottom?: number
+  marginLeft?: number
+
+  // border
+  borderStyle?: string
+  borderColor?: string
+  borderTopWidth?: number
+  borderRightWidth?: number
+  borderBottomWidth?: number
+  borderLeftWidth?: number
+  borderTopLeftRadius?: number | string
+  borderTopRightRadius?: number | string
+  borderBottomRightRadius?: number | string
+  borderBottomLeftRadius?: number | string
+
+  // background
+  backgroundColor?: string
+  backgroundImage?: string
+  backgroundPosition?: string
+  backgroundRepeat?: string
+  backgroundSize?: string
+  backgroundAttachment?: string
+  background?: string
+
+  // responsive overrides
+  sm?: { /* same keys above */ }
+  md?: { /* same keys above */ }
+  lg?: { /* same keys above */ }
+}
+```
+
+## Usage
+
+```tsx
+import { TabsNode } from '@janbox/storefront-builder';
+
+<TabsNode
+  defaultActiveIndex={0}
+  sx={{
+    width: '100%',
+    paddingTop: 16,
+    paddingBottom: 16,
+  }}
+>
+  {/* TabListNode và TabContentNode tự động được thêm bởi editor */}
+</TabsNode>
+```
+
+## Rules
+
+- **Canvas**: no.
+- **Children**: phải có `TabListNode` và `TabContentNode`.
+- Inspector có "Items management" để add/remove/reorder tabs — sync giữa `TabNode` và `TabPanelNode`.
+
+## Related nodes
+
+- [`TabListNode`](../tab-list/README.md) — container cho tab headers
+- [`TabNode`](../tab/README.md) — mỗi tab header button
+- [`TabContentNode`](../tab-content/README.md) — container cho tab panels
+- [`TabPanelNode`](../tab-panel/README.md) — nội dung của mỗi tab

package/dist/lib/text/README.md

@@ -0,0 +1,90 @@
+# TextNode
+
+Inline/block text node có thể chỉnh typography. Render ra bất kỳ HTML tag nào qua prop `as`. Hỗ trợ inline editing trong canvas.
+
+## Resolved name
+
+`Text`
+
+## Configurable props
+
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `as` | `HTMLElementType` | HTML tag render ra (mặc định `p`) |
+| `sizeVariant` | `TypographySizeVariant` | Preset typography size từ theme |
+
+`sizeVariant` hỗ trợ responsive: `sizeVariant="base"` xs, `md={{ sizeVariant: 'lg' }}` desktop.
+
+**`TypographySizeVariant`:** `'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'`
+
+### `sx` props
+
+```ts
+sx?: {
+  // typography (áp dụng toàn breakpoint — không responsive)
+  color?: string
+  fontStyle?: 'normal' | 'italic'
+  fontWeight?: number | string
+  textDecorationLine?: 'none' | 'underline' | 'line-through'
+  textAlign?: 'left' | 'center' | 'right' | 'justify'
+  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize'
+
+  // size
+  width?: number | string
+
+  // spacing
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  marginTop?: number
+  marginRight?: number
+  marginBottom?: number
+  marginLeft?: number
+
+  // responsive overrides
+  sm?: { /* same keys above */ }
+  md?: { /* same keys above */ }
+  lg?: { /* same keys above */ }
+}
+```
+
+> `color`, `fontStyle`, `textDecorationLine`, `textAlign`, `textTransform` được editor set ở breakpoint `xs` (áp dụng toàn bộ). `fontWeight` và `sizeVariant` hỗ trợ responsive.
+
+## Usage
+
+```tsx
+import { TextNode } from '@janbox/storefront-builder';
+
+// Text đơn giản
+<TextNode>Hello world</TextNode>
+
+// Đổi tag, size variant
+<TextNode as="span" sizeVariant="sm">
+  Small label
+</TextNode>
+
+// sizeVariant responsive
+<TextNode sizeVariant="base" md={{ sizeVariant: 'lg' }}>
+  Body text
+</TextNode>
+
+// Màu, căn giữa, font weight responsive
+<TextNode
+  sx={{
+    color: '#333333',
+    textAlign: 'center',
+    fontWeight: 400,
+    md: { fontWeight: 600 },
+  }}
+>
+  Styled text
+</TextNode>
+```
+
+## Rules
+
+- **Canvas**: no — không chứa node con.
+- **Inline editing**: có thể double-click để chỉnh nội dung trực tiếp trong canvas.

package/dist/lib/unknown/README.md

@@ -0,0 +1,48 @@
+# UnknownNode
+
+Fallback node hiển thị khi một node trong serialized data có `resolvedName` không tồn tại trong resolver.
+
+## Resolved name
+
+`Unknown`
+
+## Configurable props
+
+Không có props.
+
+## Behavior
+
+- **Render mode** (`enabled: false`): render nothing — hoàn toàn invisible.
+- **Editor mode** (`enabled: true`): hiển thị placeholder "Section is not available" kèm nút **Remove** để xóa node.
+
+## Khi nào xảy ra
+
+`Canvas` tự động thay thế node bằng `UnknownNode` khi load `SerializedNodes` mà `resolvedName` không có trong resolver:
+
+```ts
+// Trong Canvas component
+const resolvedNode = resolver[resolvedName];
+if (!resolvedNode) {
+  value.type = { resolvedName: CoreNodeResolvedEnum.Unknown };
+}
+```
+
+Thường xảy ra khi:
+- Custom node bị xóa khỏi codebase nhưng data cũ vẫn còn lưu
+- Resolver không được pass đầy đủ node types
+
+## Usage
+
+Không cần dùng trực tiếp. Được xử lý tự động bởi `Canvas`.
+
+Nếu muốn tránh `UnknownNode` xuất hiện, đảm bảo truyền đầy đủ resolver khi mount `Composer`:
+
+```tsx
+import { MyCustomNode } from './my-custom-node';
+
+<Composer resolver={{ MyCustomNode }}>
+  <Canvas data={savedNodes}>
+    <RootNode />
+  </Canvas>
+</Composer>
+```

package/dist/lib/unordered-list/README.md

@@ -0,0 +1,82 @@
+# UnorderedListNode
+
+Danh sách dọc (`ul`) — container cho các `ListItemNode`. Không render bullet mặc định, layout dùng flexbox column.
+
+## Resolved name
+
+`UnorderedList`
+
+## Configurable props
+
+### `sx` props
+
+```ts
+sx?: {
+  // layout
+  width?: number | string
+  rowGap?: number        // khoảng cách giữa các items
+  alignItems?: 'flex-start' | 'flex-end' | 'center'  // căn ngang các items
+
+  // spacing
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  marginTop?: number
+  marginRight?: number
+  marginBottom?: number
+  marginLeft?: number
+
+  // border
+  borderStyle?: string
+  borderColor?: string
+  borderTopWidth?: number
+  borderRightWidth?: number
+  borderBottomWidth?: number
+  borderLeftWidth?: number
+  borderTopLeftRadius?: number | string
+  borderTopRightRadius?: number | string
+  borderBottomRightRadius?: number | string
+  borderBottomLeftRadius?: number | string
+
+  // responsive overrides
+  sm?: { /* same keys above */ }
+  md?: { /* same keys above */ }
+  lg?: { /* same keys above */ }
+}
+```
+
+## Usage
+
+```tsx
+import { UnorderedListNode, ListItemNode, TextNode, IconNode } from '@janbox/storefront-builder';
+
+// Danh sách các text items
+<UnorderedListNode sx={{ rowGap: 8 }}>
+  <ListItemNode>
+    <TextNode>Item 1</TextNode>
+  </ListItemNode>
+  <ListItemNode>
+    <TextNode>Item 2</TextNode>
+  </ListItemNode>
+</UnorderedListNode>
+
+// Icon + text, căn giữa dọc
+<UnorderedListNode sx={{ rowGap: 12, width: '100%' }}>
+  <ListItemNode>
+    <FlexboxNode sx={{ flexDirection: 'row', alignItems: 'center', columnGap: 8 }}>
+      <FlexItemNode><IconNode source="..." size={16} /></FlexItemNode>
+      <FlexItemNode sx={{ flexGrow: 1 }}><TextNode>Feature description</TextNode></FlexItemNode>
+    </FlexboxNode>
+  </ListItemNode>
+</UnorderedListNode>
+```
+
+## Rules
+
+- **Canvas**: no — không trực tiếp nhận drop.
+- **Children**: `ListItemNode` — thêm qua inspector.
+
+## Related nodes
+
+- [`ListItemNode`](../list-item/README.md) — mỗi item trong list

package/dist/lib/video/README.md

@@ -0,0 +1,91 @@
+# VideoNode
+
+Video player node dùng `react-player`. Hỗ trợ nhiều nguồn video: YouTube, Vimeo, file MP4, v.v.
+
+## Resolved name
+
+`Video`
+
+## Configurable props
+
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `src` | `string` | URL video (YouTube, Vimeo, MP4, v.v.) |
+| `light` | `string \| boolean` | URL thumbnail hiển thị trước khi play |
+
+### `sx` props
+
+```ts
+sx?: {
+  // size
+  width?: number | string
+  aspectRatio?: string  // ví dụ: '16 / 9', '1 / 1'
+
+  // spacing
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  marginTop?: number
+  marginRight?: number
+  marginBottom?: number
+  marginLeft?: number
+
+  // border
+  borderStyle?: string
+  borderColor?: string
+  borderTopWidth?: number
+  borderRightWidth?: number
+  borderBottomWidth?: number
+  borderLeftWidth?: number
+  borderTopLeftRadius?: number | string
+  borderTopRightRadius?: number | string
+  borderBottomRightRadius?: number | string
+  borderBottomLeftRadius?: number | string
+
+  // responsive overrides
+  sm?: { /* same keys above */ }
+  md?: { /* same keys above */ }
+  lg?: { /* same keys above */ }
+}
+```
+
+## Usage
+
+```tsx
+import { VideoNode } from '@janbox/storefront-builder';
+
+// YouTube video
+<VideoNode
+  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+  sx={{ width: '100%', aspectRatio: '16 / 9' }}
+/>
+
+// MP4 video với thumbnail
+<VideoNode
+  src="https://example.com/video.mp4"
+  light="https://example.com/thumbnail.jpg"
+  sx={{ width: '100%', aspectRatio: '16 / 9' }}
+/>
+
+// Responsive width, aspect ratio cố định
+<VideoNode
+  src="https://vimeo.com/123456789"
+  sx={{
+    width: '100%',
+    aspectRatio: '16 / 9',
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    md: { width: '80%' },
+  }}
+/>
+```
+
+## Rules
+
+- **Canvas**: no — không chứa node con.
+- Dùng `react-player` bên dưới — hỗ trợ YouTube, Vimeo, Twitch, SoundCloud, Streamable, Wistia, Facebook, file video, v.v.

package/lib/accordion/README.md

@@ -0,0 +1,39 @@
+# AccordionNode
+
+Một accordion item. Chứa `AccordionSummaryNode` (header) và `AccordionContentNode` (nội dung). Không selectable — chỉnh sửa qua parent `AccordionGroupNode`.
+
+## Resolved name
+
+`Accordion`
+
+## Configurable props
+
+Không có props riêng. Tất cả styling được control qua `AccordionGroupNode`.
+
+## Usage
+
+```tsx
+import { AccordionNode, AccordionSummaryNode, AccordionContentNode } from '@janbox/storefront-builder';
+
+<AccordionNode>
+  <AccordionSummaryNode>
+    <TextNode>Question title</TextNode>
+  </AccordionSummaryNode>
+  <AccordionContentNode>
+    <TextNode>Answer content</TextNode>
+  </AccordionContentNode>
+</AccordionNode>
+```
+
+## Rules
+
+- **Canvas**: no.
+- **Selectable**: no — user không thể select trực tiếp node này trong editor.
+- **Parent**: phải là `AccordionGroupNode`.
+- **Children**: phải có `AccordionSummaryNode` và `AccordionContentNode`.
+
+## Related nodes
+
+- [`AccordionGroupNode`](../accordion-group/README.md) — parent container
+- [`AccordionSummaryNode`](../accordion-summary/README.md) — header
+- [`AccordionContentNode`](../accordion-content/README.md) — content area

package/lib/accordion-content/README.md

@@ -0,0 +1,36 @@
+# AccordionContentNode
+
+Content area của accordion item — phần expand/collapse khi click vào header. Là canvas node — chứa bất kỳ node con nào.
+
+## Resolved name
+
+`AccordionContent`
+
+## Configurable props
+
+Không có props riêng. Padding được config qua `AccordionGroupNode.accordionContentProps.sx`.
+
+## Usage
+
+```tsx
+import { AccordionContentNode, ParagraphNode } from '@janbox/storefront-builder';
+
+<AccordionContentNode>
+  <ParagraphNode>
+    Answer content goes here. Can contain any nodes.
+  </ParagraphNode>
+</AccordionContentNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa bất kỳ node con nào.
+- **Selectable**: no.
+- **canMoveOut**: no — không thể kéo ra khỏi `AccordionNode`.
+- **Parent**: phải là `AccordionNode`.
+
+## Related nodes
+
+- [`AccordionNode`](../accordion/README.md) — parent item
+- [`AccordionGroupNode`](../accordion-group/README.md) — root container
+- [`AccordionSummaryNode`](../accordion-summary/README.md) — header

package/lib/accordion-group/README.md

@@ -0,0 +1,106 @@
+# AccordionGroupNode
+
+Container cho danh sách accordion items. Quản lý open mode (single/multiple) và styling chung cho tất cả items.
+
+## Resolved name
+
+`AccordionGroup` (displayName: `Accordion`)
+
+## Configurable props
+
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `openMode` | `'single' \| 'multiple'` | Single: chỉ 1 item mở cùng lúc. Multiple: nhiều items mở cùng lúc |
+| `accordionSummaryProps.sx` | `StyledCSS` | Styling áp dụng cho tất cả accordion headers |
+| `accordionContentProps.sx` | `StyledCSS` | Styling áp dụng cho tất cả accordion content areas |
+
+### `sx` props
+
+```ts
+sx?: {
+  // layout
+  width?: number | string
+  rowGap?: number  // khoảng cách giữa các items
+
+  // spacing
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  marginTop?: number
+  marginRight?: number
+  marginBottom?: number
+  marginLeft?: number
+
+  // responsive overrides
+  sm?: { /* same keys above */ }
+  md?: { /* same keys above */ }
+  lg?: { /* same keys above */ }
+}
+
+// Styling cho headers (accordionSummaryProps.sx)
+accordionSummaryProps?: {
+  sx?: {
+    paddingTop?: number
+    paddingRight?: number
+    paddingBottom?: number
+    paddingLeft?: number
+    // ... responsive
+  }
+}
+
+// Styling cho content (accordionContentProps.sx)
+accordionContentProps?: {
+  sx?: {
+    paddingTop?: number
+    paddingRight?: number
+    paddingBottom?: number
+    paddingLeft?: number
+    // ... responsive
+  }
+}
+```
+
+## Usage
+
+```tsx
+import { AccordionGroupNode, AccordionNode } from '@janbox/storefront-builder';
+
+// Single open mode
+<AccordionGroupNode
+  openMode="single"
+  sx={{ rowGap: 8 }}
+  accordionSummaryProps={{ sx: { paddingTop: 12, paddingBottom: 12 } }}
+  accordionContentProps={{ sx: { paddingTop: 16, paddingBottom: 16 } }}
+>
+  <AccordionNode>...</AccordionNode>
+  <AccordionNode>...</AccordionNode>
+</AccordionGroupNode>
+
+// Multiple items có thể mở cùng lúc
+<AccordionGroupNode
+  openMode="multiple"
+  sx={{
+    width: '100%',
+    rowGap: 4,
+    md: { rowGap: 8 },
+  }}
+>
+  <AccordionNode>...</AccordionNode>
+  <AccordionNode>...</AccordionNode>
+  <AccordionNode>...</AccordionNode>
+</AccordionGroupNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa `AccordionNode` children.
+- **canMoveIn**: chỉ chấp nhận `AccordionNode`.
+
+## Related nodes
+
+- [`AccordionNode`](../accordion/README.md) — item bên trong group
+- [`AccordionSummaryNode`](../accordion-summary/README.md) — header của mỗi item
+- [`AccordionContentNode`](../accordion-content/README.md) — content area của mỗi item

package/lib/accordion-summary/README.md

@@ -0,0 +1,37 @@
+# AccordionSummaryNode
+
+Header của accordion item — phần luôn hiển thị, click để toggle open/close. Là canvas node — chứa text/icon/node con.
+
+## Resolved name
+
+`AccordionSummary`
+
+## Configurable props
+
+Không có props riêng. Padding được config qua `AccordionGroupNode.accordionSummaryProps.sx`.
+
+## Usage
+
+```tsx
+import { AccordionSummaryNode, TextNode, IconNode } from '@janbox/storefront-builder';
+
+<AccordionSummaryNode>
+  <FlexboxNode sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+    <TextNode>Question title</TextNode>
+    <IconNode source="..." size={16} />
+  </FlexboxNode>
+</AccordionSummaryNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa bất kỳ node con nào.
+- **Selectable**: no.
+- **canMoveOut**: no — không thể kéo ra khỏi `AccordionNode`.
+- **Parent**: phải là `AccordionNode`.
+
+## Related nodes
+
+- [`AccordionNode`](../accordion/README.md) — parent item
+- [`AccordionGroupNode`](../accordion-group/README.md) — root container
+- [`AccordionContentNode`](../accordion-content/README.md) — content area