@janbox/storefront-builder 1.0.5 → 1.0.7

package/lib/tabs/README.md

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

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

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

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

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