Skip to content

Commit 119254a

Browse files
mstijakmstijak
committed
Merge branch 'master' into sass-imports-v2
2 parents 2d70488 + cd96574 commit 119254a

File tree

2,303 files changed

+147882
-62337
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

2,303 files changed

+147882
-62337
lines changed

‎.claude/CLAUDE.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Project Overview
6+
7+
CxJS is a feature-rich JavaScript framework for building complex web front-ends, such as BI tools, dashboards and admin apps. This is a monorepo using yarn workspaces that contains the main cx package, documentation, gallery, testing environments, and various themes.
8+
9+
## Development Commands
10+
11+
### Build System
12+
- `yarn build` or `npm run build` - Builds the main CxJS library using custom build tools
13+
- `node packages/cx/build/index.js` - Direct build command for the cx package
14+
15+
### Testing
16+
- `yarn test` or `npm test` - Runs tests using Mocha with custom configuration
17+
- Tests are configured in `test/mocha.config.js`
18+
19+
### Development Servers
20+
- `yarn start` or `npm start` - Runs documentation site development server
21+
- `yarn docs` - Alternative command for documentation
22+
- `yarn gallery` - Runs the gallery application showcasing widgets and themes
23+
- `yarn litmus` - Runs the litmus testing environment for bug reproduction
24+
- `yarn fiddle` - Runs the online code editor/playground
25+
26+
### TypeScript Examples
27+
- `cd ts-minimal && yarn start` - Runs TypeScript minimal example development server
28+
- `cd ts-minimal && yarn build` - Builds TypeScript minimal example for production
29+
30+
### Theme Building
31+
- `npm run build:theme:core` - Builds core theme
32+
- `npm run build:theme:dark` - Builds dark theme
33+
- `npm run build:theme:frost` - Builds frost theme
34+
- `npm run build:theme:material` - Builds material theme
35+
36+
## Architecture
37+
38+
### Monorepo Structure
39+
The project uses yarn workspaces with these main areas:
40+
- `packages/cx/` - Core framework source code
41+
- `docs/` - Documentation site and content
42+
- `gallery/` - Widget gallery and theme showcase
43+
- `litmus/` - Bug reproduction and testing environment
44+
- `fiddle/` - Online code editor
45+
- `ts-minimal/` - TypeScript minimal example
46+
- `themes/` - Various UI themes
47+
48+
### Core Package Structure (packages/cx/)
49+
- `src/util/` - Utility functions and helpers
50+
- `src/data/` - Data binding, stores, and state management
51+
- `src/ui/` - Core UI framework and widgets
52+
- `src/widgets/` - Form controls, grids, overlays
53+
- `src/charts/` - Charting components
54+
- `src/svg/` - SVG drawing utilities
55+
- `src/hooks/` - React-like hooks for functional components
56+
57+
### Build System
58+
- Custom build tools located in `cx-build-tools` package
59+
- Uses Rollup for JavaScript bundling
60+
- SCSS compilation for stylesheets
61+
- Modular builds for different parts (util, data, ui, widgets, charts, svg, hooks)
62+
63+
## TypeScript Configuration
64+
65+
### JSX Configuration
66+
- The project uses custom JSX configuration with `jsxImportSource: "cx"`
67+
- For newer TypeScript projects, use `"jsx": "react-jsx"` and `"jsxImportSource": "cx"`
68+
- For legacy projects, use `"jsxFactory": "cx"`
69+
70+
### Path Mapping
71+
Configure TypeScript paths for development:
72+
```json
73+
{
74+
"paths": {
75+
"cx": ["../packages/cx/src"],
76+
"cx-react": ["../packages/cx-react"]
77+
}
78+
}
79+
```
80+
81+
## Key Framework Concepts
82+
83+
### Data Binding
84+
- Uses two-way data binding with store-based state management
85+
- Accessor chains for deep property access (e.g., `{bind: "user.profile.name"}`)
86+
- Controllers for computed values and business logic
87+
88+
### Widget System
89+
- All UI components inherit from Widget base class
90+
- Supports both declarative configuration and functional components
91+
- Rich set of form controls, grids, charts, and layout components
92+
93+
### Theming
94+
- SCSS-based theming system with variables and mixins
95+
- Multiple ready-to-use themes available as separate packages
96+
- Theme packages follow pattern: `cx-theme-{name}`
97+
98+
## Testing Strategy
99+
100+
### Test Environments
101+
- `litmus/` - Manual testing environment for bug reproduction and feature development
102+
- Organized by bugs, features, and performance tests
103+
- Examples in `litmus/bugs/`, `litmus/features/`, `litmus/performance/`
104+
105+
### Running Specific Tests
106+
- Tests are located in various subdirectories
107+
- Use Mocha test runner with Babel transpilation
108+
- Configuration in `test/mocha.config.js`
109+
110+
## Development Workflow
111+
112+
### Adding New Features
113+
1. Implement in appropriate `packages/cx/src/` subdirectory
114+
2. Add TypeScript definitions (.d.ts files)
115+
3. Create examples in `litmus/features/`
116+
4. Add documentation in `docs/content/`
117+
5. Update gallery examples if relevant
118+
119+
### Working with Themes
120+
- Theme source files are in individual theme packages
121+
- Use webpack configurations for building theme assets
122+
- Test themes using gallery application
123+
124+
### Package Management
125+
- Use yarn for consistency with workspace configuration
126+
- Install dependencies at root level for shared packages
127+
- Individual packages have their own package.json for specific dependencies
128+
129+
## Claude Code Notes
130+
131+
### File Paths
132+
- Always use relative paths (e.g., `gallery/tsconfig.json`) instead of absolute paths (e.g., `D:/Code/CxJS/cxjs/gallery/tsconfig.json`) when reading and editing files to avoid "File has been unexpectedly modified" errors on Windows.

‎.claude/commands/README.md‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
# CxJS Skill for Claude Code
2+
3+
## Overview
4+
5+
CxJS Skill is a specialized Claude Code skill designed for working with the CxJS framework. It focuses on code quality, maintenance, and best practices.
6+
7+
## Features
8+
9+
### 1. Pattern Recognition
10+
- Recognizes CxJS patterns in code (widgets, controllers, stores)
11+
- Identifies anti-patterns and suggests improvements
12+
- Detects opportunities for refactoring to idiomatic CxJS code
13+
14+
### 2. Component Generation
15+
- Generates CxJS components following conventions
16+
- Uses proper TypeScript types
17+
- Implements proper data binding and lifecycle methods
18+
- **Always wraps components with `createFunctionalComponent`**
19+
20+
### 3. Data Binding & Store Management
21+
- Designs efficient store structures
22+
- Implements proper accessor chains
23+
- Sets up computed values using controllers
24+
25+
### 4. Debugging & Troubleshooting
26+
- Identifies common CxJS issues
27+
- Provides step-by-step debugging strategies
28+
- References CxJS documentation and examples
29+
30+
## How to Use
31+
32+
### Locally
33+
34+
1. The skill is already configured in `.claude/commands/cxjs.md`
35+
2. Invoke it with:
36+
```
37+
/cxjs [your request]
38+
```
39+
40+
### Usage Examples
41+
42+
**Analyzing existing code:**
43+
```
44+
/cxjs Analyze components in the gallery/ directory and suggest improvements
45+
```
46+
47+
**Generating a new component:**
48+
```
49+
/cxjs Create a Grid component with CRUD operations for user management
50+
```
51+
52+
**Debugging:**
53+
```
54+
/cxjs Help me debug why the binding isn't updating in the UserProfile component
55+
```
56+
57+
**Refactoring:**
58+
```
59+
/cxjs Refactor this controller to use best practices for computed values
60+
```
61+
62+
## Skill Structure
63+
64+
```
65+
.claude/
66+
└── commands/
67+
├── cxjs.md # Main skill definition
68+
└── README.md # This documentation
69+
```
70+
71+
## Publishing Preparation
72+
73+
To make the CxJS skill publicly available as a plugin, you need to:
74+
75+
### 1. Create Plugin Package
76+
77+
```json
78+
{
79+
"name": "cxjs-skill",
80+
"version": "1.0.0",
81+
"description": "CxJS framework expert skill for code quality and maintenance",
82+
"main": "index.js",
83+
"keywords": ["cxjs", "claude-code", "skill", "framework"],
84+
"author": "Codaxy",
85+
"license": "MIT",
86+
"repository": {
87+
"type": "git",
88+
"url": "https://github.com/codaxy/cxjs-skill"
89+
}
90+
}
91+
```
92+
93+
### 2. Create Plugin Manifest
94+
95+
```json
96+
{
97+
"name": "cxjs-skill",
98+
"version": "1.0.0",
99+
"type": "skill",
100+
"description": "CxJS framework expert for code quality and maintenance",
101+
"capabilities": [
102+
"pattern-recognition",
103+
"code-generation",
104+
"debugging",
105+
"refactoring"
106+
],
107+
"commands": {
108+
"cxjs": {
109+
"description": "Analyze, generate, or improve CxJS code with framework expertise",
110+
"prompt": "cxjs.md"
111+
}
112+
},
113+
"dependencies": {
114+
"claude-code": ">=1.0.0"
115+
}
116+
}
117+
```
118+
119+
### 3. Organize Files
120+
121+
```
122+
cxjs-skill/
123+
├── package.json
124+
├── manifest.json
125+
├── README.md
126+
├── LICENSE
127+
├── prompts/
128+
│ └── cxjs.md # Main skill prompt
129+
├── examples/
130+
│ ├── component-generation.md
131+
│ ├── debugging.md
132+
│ └── refactoring.md
133+
└── docs/
134+
├── installation.md
135+
└── usage.md
136+
```
137+
138+
### 4. Testing
139+
140+
Before publishing, test the skill with different scenarios:
141+
- [ ] Pattern recognition on existing CxJS code
142+
- [ ] Generating new components (with `createFunctionalComponent`)
143+
- [ ] Debugging common issues
144+
- [ ] Refactoring complex structures
145+
- [ ] Integration with TypeScript projects
146+
147+
### 5. Documentation for Publishing
148+
149+
Prepare:
150+
- Detailed README.md with examples
151+
- CHANGELOG.md for versioning
152+
- CONTRIBUTING.md for the community
153+
- Usage examples
154+
- Video demonstration (optional)
155+
156+
### 6. Publishing
157+
158+
Distribution options:
159+
160+
#### A. Claude Plugin Registry (when available)
161+
```bash
162+
claude plugin publish
163+
```
164+
165+
#### B. GitHub Package
166+
```bash
167+
git tag v1.0.0
168+
git push origin v1.0.0
169+
```
170+
171+
#### C. npm Package
172+
```bash
173+
npm publish
174+
```
175+
176+
Users could then install with:
177+
```bash
178+
claude plugin install cxjs-skill
179+
# or
180+
claude plugin install codaxy/cxjs-skill
181+
```
182+
183+
## Maintenance
184+
185+
- Regularly update the skill with new CxJS patterns
186+
- Add new examples and use cases
187+
- Implement user feedback
188+
- Track CxJS releases and update best practices
189+
- Ensure all component examples use `createFunctionalComponent`
190+
191+
## Contributing
192+
193+
The skill is open source and accepts contributions. Areas for improvement:
194+
- More component templates (all using `createFunctionalComponent`)
195+
- Additional debugging scenarios
196+
- Performance optimization patterns
197+
- Accessibility guidelines
198+
- Internationalization examples
199+
200+
## Support
201+
202+
For questions and support:
203+
- GitHub Issues: https://github.com/codaxy/cxjs
204+
- Discord: https://discord.gg/cxjs
205+
- Documentation: https://docs.cxjs.io
206+
207+
## License
208+
209+
MIT License - Feel free to use, modify and distribute.

0 commit comments

Comments
 (0)