admin/pos-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add component library build functionality to support atomic design workflow and update related documentation.

Browse Source
This commit is contained in:
Ho Ngoc Hai
2026-01-31 20:28:28 +07:00
parent db73b82ea5
commit 468d93a8b3
7 changed files with 4739 additions and 4509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.agent/skills/pencil-design/SKILL.md
View File

@@ -308,6 +308,7 @@ open tPOS.pen
| Command | Purpose |
|---------|---------|
| `python3 scripts/build.py --library` | Build Component Lib |
| `python3 scripts/build.py -m` | Monolithic build |
| `python3 scripts/build.py` | Standard build |
| `python3 scripts/build.py -m --output name.pen` | Custom output |

122
.agent/skills/pencil-design/references/ATOMIC_DESIGN.md
View File

@@ -299,110 +299,22 @@ mkdir -p src/foundations src/atoms src/molecules src/organisms src/pages
### Step 3: Extract to Atomic Files
```python
import json
import os
The `pencil-design` skill now includes an automated extraction tool.
# Read monolithic UI Kit
with open('tPOS-ui-kit.pen', 'r') as f:
data = json.load(f)
variables = data['variables']
main_page = data['children'][0] # Component Library page
sections = main_page['children'] # All sections
# 1. Extract design tokens
tokens_file = {
'version': '2.6',
'children': [{
'type': 'frame',
'name': 'Design Tokens Reference',
'layout': 'vertical',
'gap': 20,
'children': [
{
'type': 'text',
'name': 'Title',
'content': 'Design System Tokens',
'fontSize': 32,
'fill': '$text-primary'
}
]
}],
'variables': variables
}
with open('src/foundations/design-tokens.pen', 'w') as f:
json.dump(tokens_file, f, indent=2)
# 2. Categorize components by atomic level
atomic_mapping = {
'atoms': {
'patterns': ['button', 'badge', 'input', 'icon', 'typography', 'chip'],
'components': []
},
'molecules': {
'patterns': ['formfield', 'searchbar', 'cardheader'],
'components': []
},
'organisms': {
'patterns': ['card', 'navigation', 'header', 'footer', 'form'],
'components': []
}
}
# Categorize each section
for section in sections:
section_name = section.get('name', '').lower()
# Determine atomic level
matched = False
for level, config in atomic_mapping.items():
for pattern in config['patterns']:
if pattern in section_name:
config['components'].append(section)
matched = True
break
if matched:
break
# 3. Generate atomic files
for level, config in atomic_mapping.items():
if not config['components']:
continue
# Group by component type
grouped = {}
for component in config['components']:
name = component.get('name', '')
# Extract type (e.g., "Buttons & Actions Section" -> "buttons")
comp_type = name.lower().split()[0].replace('&', '').strip()
if comp_type not in grouped:
grouped[comp_type] = []
grouped[comp_type].append(component)
# Create file for each type
for comp_type, components in grouped.items():
output_file = {
'version': '2.6',
'children': components,
'variables': variables
}
filepath = f'src/{level}/{comp_type}.pen'
with open(filepath, 'w') as f:
json.dump(output_file, f, indent=2)
print(f'✅ Created {filepath} with {len(components)} sections')
print(f'\n🎉 Atomic Design structure created!')
print(f'📁 Foundations: src/foundations/design-tokens.pen')
print(f'⚛️ Atoms: {len(atomic_mapping["atoms"]["components"])} files')
print(f'🧬 Molecules: {len(atomic_mapping["molecules"]["components"])} files')
print(f'🦠 Organisms: {len(atomic_mapping["organisms"]["components"])} files')
```bash
# Run the extraction script
python3 scripts/extract-atomic.py
```
This script will:
1. Read `src/components/tPOS-ui-kit.pen` (or configured library)
2. Extract design tokens to `src/foundations/design-tokens.pen`
3. Categorize components into `src/atoms`, `src/molecules`, `src/organisms`
4. Generate showcase wrappers for each file
**Customization**:
Edit `scripts/extract-atomic.py` to adjust categorization logic (regex patterns) if your component names differ.
### Step 4: Create Showcase Files
```python
@@ -528,11 +440,11 @@ src/
## Workflow
1. **Update Foundation**: Edit `design-tokens.pen` for colors/typography changes
2. **Sync Tokens**: Copy `variables` object to all modified component files
3. **Build Components**: Edit atomic files with proper naming (Atom/Button/Primary/Default)
2. **Build Components**: Edit atomic files with proper naming (Atom/Button/Primary/Default)
3. **Update Library**: Run `python3 scripts/build.py --library` to compile atoms
4. **Compose Up**: Molecules use atoms, organisms use molecules
5. **Test in Pages**: Reference components in page files
6. **Build**: Run `python3 scripts/build.py -m` for monolithic output
5. **Test in Pages**: Reference components in page files (from compiled library)
6. **Build Monolith**: Run `python3 scripts/build.py -m` for production output
## Component Naming

33
.agent/skills/pencil-design/references/BUILD_SYSTEM.md
View File

@@ -86,6 +86,21 @@ python3 scripts/build.py -m --output myDesign.pen
}
```
### Component Library Build (Atomic Design)
Merges distributed atomic components into a single library file.
**Command:**
```bash
python3 scripts/build.py --library
python3 scripts/build.py -l
```
**Output:**
- **File**: `src/components/ui-kit.pen` (or configured path)
- **Contains**: All atoms, molecules, organisms merged into one file
- **Use case**: Generating the library to use during page design
### Standard Build
Builds individual pages with component injection.
@@ -262,7 +277,23 @@ jq '[.children[0].children[] | select(.reusable == true)] | length' tPOS.pen
## Workflows
### Development Cycle
### Atomic Design Workflow (Recommended)
```markdown
1. Layout & Components:
- Update atoms/molecules in `src/atoms/` etc.
- Run `python3 scripts/build.py --library` to update component library
2. Page Design:
- Open `src/pages/desktop-home.pen`
- Use components from the generated `src/components/ui-kit.pen`
3. Production Build:
- Run `python3 scripts/build.py -m`
- Output `tPOS.pen` contains everything
```
### Legacy/Mockup Workflow
```markdown
1. Design in modular files: