@janbox/storefront-builder 1.0.5 → 1.0.7

package/lib/link/README.md

@@ -1,111 +0,0 @@
-# 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/lib/list-item/README.md

@@ -1,31 +0,0 @@
-# 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/lib/marquee/README.md

@@ -1,111 +0,0 @@
-# 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/lib/marquee-item/README.md

@@ -1,31 +0,0 @@
-# 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/lib/paragraph/README.md

@@ -1,82 +0,0 @@
-# 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/lib/root/README.md

@@ -1,33 +0,0 @@
-# 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/lib/swiper/README.md

@@ -1,108 +0,0 @@
-# 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/lib/swiper-slide/README.md

@@ -1,32 +0,0 @@
-# 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/lib/tab/README.md

@@ -1,35 +0,0 @@
-# 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/lib/tab-content/README.md

@@ -1,35 +0,0 @@
-# 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/lib/tab-list/README.md

@@ -1,35 +0,0 @@
-# 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/lib/tab-panel/README.md

@@ -1,35 +0,0 @@
-# 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