@janbox/storefront-builder 1.0.3 → 1.0.5

package/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/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/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@janbox/storefront-builder",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Standalone storefront builder library extracted from craft-layers-portal",
   "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "lib/*/README.md"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -59,18 +61,12 @@
     "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.2.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.10.1",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/react-frame-component": "^4.1.6",
-    "sass-embedded": "^1.99.0",
-    "tailwindcss": "^4.2.2",
-    "type-fest": "^5.5.0",
-    "typescript": "5.5.4",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^4.3.2"
+    "type-fest": "^5.5.0"
   },
   "publishConfig": {
     "access": "public"