@janbox/storefront-builder 1.0.4 → 1.0.6

package/dist/lib/link/README.md

@@ -0,0 +1,111 @@
+# LinkNode
+
+Anchor node render ra `<a>` qua React Router `Link`. Là canvas node — có thể chứa text hoặc các node con khác làm nội dung link.
+
+## Resolved name
+
+`Link`
+
+## Configurable props
+
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `to` | `string \| { pathname: string }` | Đường dẫn điều hướng |
+| `target` | `'_self' \| '_blank' \| '_parent' \| '_top'` | Cách mở link |
+| `rel` | `string` | SEO attribute, ví dụ `'nofollow noreferrer'` |
+| `textVariant` | `TypographySizeVariant` | Preset typography size từ theme |
+
+`textVariant` hỗ trợ responsive: `textVariant="sm"` xs, `md={{ textVariant: 'base' }}` 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'
+
+  // 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 { LinkNode } from '@janbox/storefront-builder';
+
+// Link đơn giản
+<LinkNode to="/products">View all products</LinkNode>
+
+// Mở tab mới, no-follow
+<LinkNode to="https://example.com" target="_blank" rel="nofollow noreferrer">
+  External link
+</LinkNode>
+
+// Link dạng button (có border, padding)
+<LinkNode
+  to="/checkout"
+  sx={{
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 24,
+    paddingRight: 24,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    borderBottomLeftRadius: 6,
+    borderBottomRightRadius: 6,
+    backgroundColor: '#fa8c16',
+    color: '#ffffff',
+  }}
+>
+  Checkout
+</LinkNode>
+
+// textVariant responsive
+<LinkNode to="/sale" textVariant="sm" md={{ textVariant: 'base' }}>
+  Sale items
+</LinkNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa node con.
+- **canMoveIn**: bị block khi prop `dangerouslySetInnerHTML` đang được dùng.
+- Editor preview: click bị `preventDefault` khi editor đang bật để tránh navigate.
+
+## Related nodes
+
+- [`ButtonNode`](../button/README.md) — dùng khi cần CTA có style button từ theme

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

@@ -0,0 +1,31 @@
+# ListItemNode
+
+Một item trong `UnorderedListNode` (`li`). Là canvas node — chứa bất kỳ node con nào.
+
+## Resolved name
+
+`ListItem`
+
+## Configurable props
+
+Không có props riêng. Styling được control qua parent `UnorderedListNode`.
+
+## Usage
+
+```tsx
+import { ListItemNode, TextNode } from '@janbox/storefront-builder';
+
+<ListItemNode>
+  <TextNode>Item content</TextNode>
+</ListItemNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa bất kỳ node con nào.
+- **Selectable**: no — chỉnh sửa qua parent `UnorderedListNode` inspector.
+- **Parent**: phải là `UnorderedListNode`.
+
+## Related nodes
+
+- [`UnorderedListNode`](../unordered-list/README.md) — parent list container

package/dist/lib/marquee/README.md

@@ -0,0 +1,111 @@
+# MarqueeNode
+
+Auto-scrolling ticker/marquee container dùng Embla Carousel Auto Scroll. Chỉ chấp nhận `MarqueeItemNode` children.
+
+## Resolved name
+
+`Marquee`
+
+## Configurable props
+
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `spaceBetween` | `number` | Khoảng cách giữa các items (px) |
+| `autoScrollOptions` | `AutoScrollOptionsType` | Options từ embla-carousel-auto-scroll |
+| `separatorIcon.source` | `string` | Raw SVG string cho icon phân cách giữa các items |
+| `separatorIcon.size` | `number` | Kích thước separator icon (px) |
+| `separatorIcon.sx.color` | `string` | Màu separator icon |
+
+`spaceBetween` hỗ trợ responsive.
+
+> Editor tự động set `autoScrollOptions.playOnInit = false` khi đang trong edit mode để tránh scroll khi đang drag/drop.
+
+### `sx` props
+
+```ts
+sx?: {
+  // 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 { MarqueeNode, MarqueeItemNode, ImageNode } from '@janbox/storefront-builder';
+
+// Marquee cơ bản, auto-scroll từ đầu
+<MarqueeNode
+  spaceBetween={32}
+  autoScrollOptions={{ speed: 1 }}
+>
+  <MarqueeItemNode><ImageNode src="..." alt="Logo 1" sx={{ width: 100 }} /></MarqueeItemNode>
+  <MarqueeItemNode><ImageNode src="..." alt="Logo 2" sx={{ width: 100 }} /></MarqueeItemNode>
+  <MarqueeItemNode><ImageNode src="..." alt="Logo 3" sx={{ width: 100 }} /></MarqueeItemNode>
+</MarqueeNode>
+
+// Với separator icon giữa các item
+<MarqueeNode
+  spaceBetween={24}
+  separatorIcon={{
+    source: '<svg>...</svg>',
+    size: 16,
+    sx: { color: '#fa8c16' },
+  }}
+>
+  <MarqueeItemNode>Item 1</MarqueeItemNode>
+  <MarqueeItemNode>Item 2</MarqueeItemNode>
+</MarqueeNode>
+
+// Responsive spacing
+<MarqueeNode
+  spaceBetween={16}
+  md={{ spaceBetween: 32 }}
+>
+  <MarqueeItemNode>...</MarqueeItemNode>
+</MarqueeNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa `MarqueeItemNode` children.
+- **canMoveIn**: chỉ chấp nhận `MarqueeItemNode`.
+
+## Related nodes
+
+- [`MarqueeItemNode`](../marquee-item/README.md) — mỗi item trong marquee

package/dist/lib/marquee-item/README.md

@@ -0,0 +1,31 @@
+# MarqueeItemNode
+
+Một item trong `MarqueeNode`. Là canvas node — chứa bất kỳ node con nào.
+
+## Resolved name
+
+`MarqueeItem`
+
+## Configurable props
+
+Không có props riêng. Styling được control qua parent `MarqueeNode`.
+
+## Usage
+
+```tsx
+import { MarqueeItemNode, ImageNode, TextNode } from '@janbox/storefront-builder';
+
+<MarqueeItemNode>
+  <ImageNode src="..." alt="Brand logo" sx={{ width: 80, height: 40, objectFit: 'contain' }} />
+</MarqueeItemNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa bất kỳ node con nào.
+- **Selectable**: no — chỉnh sửa qua parent `MarqueeNode` inspector.
+- **Parent**: phải là `MarqueeNode`.
+
+## Related nodes
+
+- [`MarqueeNode`](../marquee/README.md) — parent scrolling container

package/dist/lib/paragraph/README.md

@@ -0,0 +1,82 @@
+# ParagraphNode
+
+Text node dành cho đoạn văn bản. Dùng chung `TextInspector` với `TextNode` nhưng không cho phép đổi tag — luôn render ra `p`.
+
+## Resolved name
+
+`Paragraph`
+
+## Configurable props
+
+Giống hệt `TextNode` ngoại trừ prop `as` bị loại bỏ. Xem chi tiết tại [TextNode](../text/README.md#configurable-props).
+
+### `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 */ }
+}
+```
+
+## Usage
+
+```tsx
+import { ParagraphNode } from '@janbox/storefront-builder';
+
+// Đoạn văn đơn giản
+<ParagraphNode>
+  Lorem ipsum dolor sit amet.
+</ParagraphNode>
+
+// Với sizeVariant responsive
+<ParagraphNode sizeVariant="sm" md={{ sizeVariant: 'base' }}>
+  Body copy text
+</ParagraphNode>
+
+// Styled
+<ParagraphNode
+  sx={{
+    color: '#555555',
+    textAlign: 'center',
+    marginTop: 8,
+    marginBottom: 8,
+  }}
+>
+  Centered paragraph
+</ParagraphNode>
+```
+
+## Rules
+
+- **Canvas**: no — không chứa node con.
+- **Inline editing**: có thể double-click để chỉnh nội dung trong canvas.
+- **Tag**: cố định là `p`, không thể đổi.
+
+## Related nodes
+
+- [`TextNode`](../text/README.md) — base component dùng chung inspector
+- [`HeadingNode`](../heading/README.md) — dành cho tiêu đề với tag `h1`–`h6`

package/dist/lib/root/README.md

@@ -0,0 +1,33 @@
+# RootNode
+
+Top-level canvas container của toàn bộ trang. Luôn là node gốc trong `Canvas` — không thể xóa hay di chuyển.
+
+## Resolved name
+
+`Root`
+
+## Configurable props
+
+Không có props. Chỉ nhận `children`.
+
+## Usage
+
+```tsx
+import { Composer, Canvas } from '@janbox/storefront-builder';
+import { RootNode } from '@janbox/storefront-builder';
+
+// Render mode (storefront)
+<Composer>
+  <Canvas data={savedNodes}>
+    <RootNode />
+  </Canvas>
+</Composer>
+
+// Editor mode — RootNode được Editor tự mount, không cần khai báo thủ công
+```
+
+## Notes
+
+- Khi editor bật (`enabled: true`): render `div` với `minHeight: 100vh` và padding mặc định để tạo không gian kéo thả.
+- Khi editor tắt (render mode): render `Fragment` — không thêm DOM wrapper.
+- `RootNode` phải là node root duy nhất trong `Canvas`. Không được nest `RootNode` bên trong node khác.

package/dist/lib/swiper/README.md

@@ -0,0 +1,108 @@
+# SwiperNode
+
+Carousel/slider container dùng Embla Carousel. Chỉ chấp nhận `SwiperSlideNode` children.
+
+## Resolved name
+
+`Swiper` (displayName: `Carousel`)
+
+## Configurable props
+
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `slidesPerView` | `number \| 'auto'` | Số slides hiển thị cùng lúc |
+| `spaceBetween` | `number` | Khoảng cách giữa các slides (px) |
+| `autoplayOptions.active` | `boolean` | Bật autoplay |
+| `autoplayOptions.delay` | `number` | Delay giữa các lần chuyển slide (ms) |
+| `autoplayOptions.stopOnLastSnap` | `boolean` | `false` = loop, `true` = dừng ở slide cuối |
+
+`slidesPerView` và `spaceBetween` hỗ trợ responsive.
+
+### `sx` props
+
+```ts
+sx?: {
+  // 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 { SwiperNode, SwiperSlideNode } from '@janbox/storefront-builder';
+
+// 3 slides hiển thị, autoplay với loop
+<SwiperNode
+  slidesPerView={3}
+  spaceBetween={16}
+  autoplayOptions={{
+    active: true,
+    delay: 3000,
+    stopOnLastSnap: false, // loop
+  }}
+>
+  <SwiperSlideNode>Slide 1</SwiperSlideNode>
+  <SwiperSlideNode>Slide 2</SwiperSlideNode>
+  <SwiperSlideNode>Slide 3</SwiperSlideNode>
+</SwiperNode>
+
+// Responsive: 1 slide mobile, 3 slides desktop
+<SwiperNode
+  slidesPerView={1}
+  spaceBetween={8}
+  md={{ slidesPerView: 3, spaceBetween: 24 }}
+  sx={{
+    paddingTop: 16,
+    paddingBottom: 16,
+  }}
+>
+  <SwiperSlideNode>...</SwiperSlideNode>
+  <SwiperSlideNode>...</SwiperSlideNode>
+  <SwiperSlideNode>...</SwiperSlideNode>
+</SwiperNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa `SwiperSlideNode` children.
+- **canMoveIn**: chỉ chấp nhận `SwiperSlideNode`.
+
+## Related nodes
+
+- [`SwiperSlideNode`](../swiper-slide/README.md) — mỗi slide item

package/dist/lib/swiper-slide/README.md

@@ -0,0 +1,32 @@
+# SwiperSlideNode
+
+Một slide trong `SwiperNode`. Là canvas node — chứa bất kỳ node con nào.
+
+## Resolved name
+
+`SwiperSlide`
+
+## Configurable props
+
+Không có props riêng. Styling được control qua parent `SwiperNode`.
+
+## Usage
+
+```tsx
+import { SwiperSlideNode, ImageNode, TextNode } from '@janbox/storefront-builder';
+
+<SwiperSlideNode>
+  <ImageNode src="..." alt="..." sx={{ width: '100%' }} />
+  <TextNode>Slide caption</TextNode>
+</SwiperSlideNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa bất kỳ node con nào.
+- **Selectable**: no — chỉnh sửa qua parent `SwiperNode` inspector.
+- **Parent**: phải là `SwiperNode`.
+
+## Related nodes
+
+- [`SwiperNode`](../swiper/README.md) — parent carousel container

package/dist/lib/tab/README.md

@@ -0,0 +1,35 @@
+# TabNode
+
+Tab header button — click để switch giữa các panels.
+
+## Resolved name
+
+`Tab`
+
+## Configurable props
+
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `dangerouslySetInnerHTML.__html` | `string` | Text hiển thị trong tab button |
+
+## Usage
+
+```tsx
+import { TabNode } from '@janbox/storefront-builder';
+
+<TabNode dangerouslySetInnerHTML={{ __html: 'Overview' }} />
+```
+
+## Rules
+
+- **Canvas**: no.
+- **Selectable**: no — chỉnh sửa qua parent `TabsNode` inspector.
+- **Parent**: phải là `TabListNode`.
+
+## Related nodes
+
+- [`TabsNode`](../tabs/README.md) — root container
+- [`TabListNode`](../tab-list/README.md) — parent container
+- [`TabPanelNode`](../tab-panel/README.md) — panel tương ứng

package/dist/lib/tab-content/README.md

@@ -0,0 +1,35 @@
+# TabContentNode
+
+Container cho danh sách tab panels. Chỉ chấp nhận `TabPanelNode` children.
+
+## Resolved name
+
+`TabContent`
+
+## Configurable props
+
+Không có props riêng. Styling được control qua parent `TabsNode`.
+
+## Usage
+
+```tsx
+import { TabContentNode, TabPanelNode } from '@janbox/storefront-builder';
+
+<TabContentNode>
+  <TabPanelNode>Panel 1 content</TabPanelNode>
+  <TabPanelNode>Panel 2 content</TabPanelNode>
+  <TabPanelNode>Panel 3 content</TabPanelNode>
+</TabContentNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa `TabPanelNode` children.
+- **Selectable**: no.
+- **canMoveIn**: chỉ chấp nhận `TabPanelNode`.
+- **Parent**: phải là `TabsNode`.
+
+## Related nodes
+
+- [`TabsNode`](../tabs/README.md) — root container
+- [`TabPanelNode`](../tab-panel/README.md) — mỗi panel content

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

@@ -0,0 +1,35 @@
+# TabListNode
+
+Container cho danh sách tab headers. Chỉ chấp nhận `TabNode` children.
+
+## Resolved name
+
+`TabList`
+
+## Configurable props
+
+Không có props riêng. Styling được control qua parent `TabsNode`.
+
+## Usage
+
+```tsx
+import { TabListNode, TabNode } from '@janbox/storefront-builder';
+
+<TabListNode>
+  <TabNode dangerouslySetInnerHTML={{ __html: 'Tab 1' }} />
+  <TabNode dangerouslySetInnerHTML={{ __html: 'Tab 2' }} />
+  <TabNode dangerouslySetInnerHTML={{ __html: 'Tab 3' }} />
+</TabListNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa `TabNode` children.
+- **Selectable**: no.
+- **canMoveIn**: chỉ chấp nhận `TabNode`.
+- **Parent**: phải là `TabsNode`.
+
+## Related nodes
+
+- [`TabsNode`](../tabs/README.md) — root container
+- [`TabNode`](../tab/README.md) — tab header button

package/dist/lib/tab-panel/README.md

@@ -0,0 +1,35 @@
+# TabPanelNode
+
+Nội dung của một tab — hiển thị khi tab tương ứng được active. Là canvas node — chứa bất kỳ node con nào.
+
+## Resolved name
+
+`TabPanel`
+
+## Configurable props
+
+Không có props riêng.
+
+## Usage
+
+```tsx
+import { TabPanelNode, ParagraphNode } from '@janbox/storefront-builder';
+
+<TabPanelNode>
+  <ParagraphNode>
+    Tab panel content goes here. Can contain any nodes.
+  </ParagraphNode>
+</TabPanelNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa bất kỳ node con nào.
+- **Selectable**: no.
+- **Parent**: phải là `TabContentNode`.
+
+## Related nodes
+
+- [`TabsNode`](../tabs/README.md) — root container
+- [`TabContentNode`](../tab-content/README.md) — parent container
+- [`TabNode`](../tab/README.md) — tab header tương ứng