Skip to content

Commit beac497

Browse files
mattnoltingmattnolting
committed
feat(icon-generator): configured icon generator
1 parent 42eea0f commit beac497

24 files changed

+4634
-3154
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ lerna-debug.log
3232
# For vim
3333
*.swp
3434
.yarn
35+
yarn.lock

‎CONTRIBUTING.md

-1
Original file line numberDiff line numberDiff line change
@@ -330,4 +330,3 @@ The process for revoking someone's maintainer status is a discussion limited to
330330
[1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct/
331331
[2]: mailto:[email protected]
332332
[3]: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type
333-

‎packages/react-core/.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,6 @@
22
/deprecated
33
/components
44
/layouts
5-
/helpers
5+
/helpers
6+
7+
.env

‎packages/react-core/codeConnect/README.md

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# PatternFly React Icon Generation System
2+
3+
## Overview
4+
5+
The PatternFly React icon generation system automates the process of creating and managing icon components, including generation, Figma connections, and consistent integration.
6+
7+
## Components
8+
9+
### 1. Icon Data Source (`iconsData.json`)
10+
Defines the metadata for each icon in the library.
11+
12+
#### JSON Structure
13+
```json
14+
[
15+
{
16+
"iconName": "angle-down",
17+
"fileName": "angle-down-icon",
18+
"reactName": "AngleDownIcon",
19+
"url": "Optional Figma design URL",
20+
"svgPath": "SVG path data for the icon"
21+
}
22+
]
23+
```
24+
25+
### 2. Configuration (`config.json`)
26+
Manages global settings for icon generation.
27+
28+
#### Configuration Options
29+
- `figmaBaseUrl`: Base URL for Figma design references
30+
- `defaultNodeId`: Fallback Figma node identifier
31+
32+
### 3. Icon Template (`iconTemplate.txt`)
33+
Provides a consistent template for generating individual icon components.
34+
35+
### 4. Scripts
36+
37+
#### `iconConnector.mjs`
38+
Generates Figma connection files for icons.
39+
40+
#### `iconGenerator.mjs`
41+
Creates individual icon component files and manages icon-related artifacts.
42+
43+
## Workflow
44+
45+
### 1. Prepare Icon Data
46+
Create or update `iconsData.json` with icon specifications.
47+
48+
### 2. Configuration
49+
Customize `config.json` with project-specific settings.
50+
51+
### 3. Generation Commands
52+
53+
#### Generate Icons
54+
```bash
55+
# Generate icon components and Figma connections
56+
npm run figma:icons:generate
57+
```
58+
59+
#### Publish to Figma
60+
```bash
61+
# Publish generated icon connections
62+
npm run figma:icons:publish
63+
```
64+
65+
## Best Practices
66+
67+
- Keep `iconsData.json` updated with the latest icon information
68+
- Ensure SVG paths are clean and optimized
69+
- Maintain consistent naming conventions
70+
- Validate icon designs in Figma before generation
71+
72+
## Troubleshooting
73+
74+
### Common Issues
75+
- **Missing Configuration**: Verify `config.json` exists and is correctly formatted
76+
- **SVG Path Errors**: Check SVG path syntax and completeness
77+
- **Naming Conflicts**: Ensure unique `reactName` for each icon
78+
79+
### Logging
80+
The system uses a comprehensive logging utility that provides:
81+
- Timestamped logs
82+
- Contextual information
83+
- Color-coded output for different log levels
84+
85+
## Extensibility
86+
87+
The modular design allows easy extension:
88+
- Add new icons by updating `iconsData.json`
89+
- Customize icon templates
90+
- Modify configuration as project needs evolve
91+
92+
## Contributing
93+
94+
1. Update `iconsData.json` with new icon specifications
95+
2. Validate SVG paths and icon designs
96+
3. Run generation scripts
97+
4. Review generated components
98+
5. Commit changes
99+
100+
## Dependencies
101+
102+
- Node.js
103+
- Figma Code Connect
104+
- PatternFly React ecosystem
105+
106+
## License
107+
108+
[Insert appropriate license information]
109+
110+
## Support
111+
112+
For issues or questions, please file a GitHub issue in the PatternFly React repository.

‎packages/react-core/codeConnect/config.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"figmaBaseUrl": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components",
3+
"defaultNodeId": "1-196"
4+
}

‎packages/react-core/codeConnect/data/iconsData.json

+1
Large diffs are not rendered by default.

‎packages/react-core/codeConnect/scripts/README.md

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
# Icon Generation Technical Documentation
2+
3+
## System Architecture
4+
5+
### Components
6+
- `iconConnector.mjs`: Manages Figma connections
7+
- `iconGenerator.mjs`: Generates icon components
8+
- `config.mjs`: Centralized configuration management
9+
- `logger.mjs`: Logging utility
10+
11+
### Configuration Resolution
12+
1. Finds repository root using `findRepoRoot()`
13+
2. Loads configuration from `config.json`
14+
3. Provides fallback default configuration
15+
16+
## Configuration Utility (`config.mjs`)
17+
18+
### Key Functions
19+
20+
#### `findRepoRoot()`
21+
- Traverses directory tree to locate repository root
22+
- Identifies root by presence of `.git` or `package.json`
23+
- Fallback to current directory if no root found
24+
25+
#### `loadConfig(configPath)`
26+
- Reads configuration from specified path
27+
- Merges with default configuration
28+
- Handles missing or invalid configuration files
29+
30+
#### `getIconConfig()`
31+
- Resolves paths relative to repository root
32+
- Combines configuration with path resolutions
33+
- Returns comprehensive configuration object
34+
35+
### Configuration Properties
36+
- `iconsDataPath`: Path to icon metadata
37+
- `iconTemplatePath`: Path to icon component template
38+
- `iconsGeneratedDir`: Output directory for generated icons
39+
- `iconsFigmaDir`: Directory for Figma connection files
40+
- `figmaBaseUrl`: Base URL for Figma design references
41+
- `defaultNodeId`: Fallback Figma node identifier
42+
43+
## Logging Utility (`logger.mjs`)
44+
45+
### Log Levels
46+
- `success`: Green, indicates successful operations
47+
- `info`: Informational messages
48+
- `warn`: Yellow, highlights potential issues
49+
- `error`: Red, indicates critical failures
50+
51+
### Log Context
52+
Each log method supports:
53+
- Source identification
54+
- Contextual metadata
55+
- Detailed error information
56+
57+
## Icon Generation Process
58+
59+
### Icon Data Parsing
60+
1. Read `iconsData.json`
61+
2. Validate icon metadata
62+
3. Fallback to example data if parsing fails
63+
64+
### Component Generation
65+
1. Load icon template
66+
2. Replace placeholders with icon-specific data
67+
3. Generate individual `.tsx` files
68+
69+
### Figma Connection
70+
1. Create Figma connection file
71+
2. Map icons to Figma design references
72+
3. Generate example usage snippets
73+
74+
## Error Handling
75+
76+
### Configuration Errors
77+
- Fallback to default configuration
78+
- Detailed logging of configuration issues
79+
80+
### File Generation Errors
81+
- Comprehensive error reporting
82+
- Graceful degradation with example data
83+
- Detailed context logging
84+
85+
## Performance Considerations
86+
- Minimal file system operations
87+
- Efficient path resolution
88+
- Cached configuration loading
89+
90+
## Security Notes
91+
- No direct external dependencies in core logic
92+
- Minimal file system interactions
93+
- Configurable and extensible design
94+
95+
## Extensibility Points
96+
- Custom icon template
97+
- Configurable path resolutions
98+
- Pluggable logging mechanism
99+
100+
## Debugging
101+
102+
### Verbose Mode
103+
```bash
104+
npm run figma:icons:generate -- --verbose
105+
```
106+
107+
### Troubleshooting Flags
108+
- `--debug`: Enables detailed debugging output
109+
- `--dry-run`: Simulates generation without file writes
110+
111+
## Future Improvements
112+
- Add icon validation
113+
- Support for multiple icon sources
114+
- Enhanced template customization
115+
- Automated design system sync

0 commit comments

Comments
 (0)