Skip to content

Commit 44fddff

Browse files
mstijakvedranvucic77ognjenst
authored
Transition to TypeScript (#1273)
* Add ts-minimal sample project * Setup claude and build commands * ... * ... * files rename * fix errors * add cx global tsconfig * fix vdom error * register css helper * move things to typescript * fix bindings * fix testWidget errors * imports clenaup * use map.get * fixes * color fixes * move calendar, checkbox, color field and color picker to typescript * fixes etc * update tsconfig * cleanup * move cx to typescript * fix lock files * ts migration * ts migration * ts migration * fix tests * Minor tweaks * ... * Add build folder * ... * Migrate util directory to TS * Move data dir to ts * ... * move adapters to typescript * remove d.ts * ts migration * move selection and ui to typescript * fixes * Fix errors * moving things to typescript * fixes * fixes * fixes * fixes * ts migration * cleanup * ... * fix hoversync and widget * add generic type for computable * use instance and widget types * remove ts ignore from tests * moving things to typescript * types * move svg folder to typescript * ts migration * ts migration * ts migration * ts migration, widgets init * core fixes etc * fixes * fixes * moving things to ts * fixes etc * fixes * Type work * Fix type errors * Minor fixes * ... * ... * fixes * Fix type errors * Cleaning up * More work * Fix errors in the ui folder * More fixes * More fixes * More fixes * ... * ... * ... * ... * ... * ... * More ts stuff * More fixes * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * ... * Tests passing * cleanup * ... * Finishing charts * Fix build paths * ... * ... * ... * ... * ... * ... * ... * ... * ... * More work * Gallery worksgit status! * ... * Add test workflow * ... * ... * Add missing Config interfaces and constructors to widgets - Add Config interfaces to: Content, LabelsLeftLayout, LabelsTopLayout, LabelsTopLayoutCell, HoverSync, HoverSyncElement, ContextMenu, HelpText, Label, NonOverlappingRect, NonOverlappingRectGroup - Add constructors to: FlexBox, ClipRect, Axis, Chart, CxCredit, DocumentTitle, HighlightedSearchText, ColumnBarGraphBase, Svg, DragSource, DropZone, TextualBoundedObject, Resizer, ProgressBar, ColorPicker - Switch LabelsLeftLayout and LabelsTopLayout to use StyledContainerBase - Add WidgetStyleConfig to ProgressBar and Resizer configs * ... * ... * ... * Fix component create * Simplify creatable * Rename * ... * Safe changes * ... * Add find controller methods * ... * Typed contexts * Typed ContentResolver * update swc imports plugin dependencies * update swc plugin * remove npm pack test * new plugins version * add license and readme files * Pie Slice active bind issue * Port master changes to TypeScript branch - Instance.ts: move selector.init to dataSelector init (fixes pie slice active bind) - Grid: add preserveGroupOrder option - ArrayAdapter/GroupAdapter: add preserveOrder support - Axis: add data attribute support for complex labels - Add litmus test files for grouping and complex axis labels - Update docs configs * Type dropdownOptions as Partial<DropdownConfig> * Type selection config with all selection types * ... * ... * ... * ... * ... * Build fixes * ... * add missing jsdocs * Remove remaining type check comments * publish cx@ts * ... * ... * ... * Minor tweaks * ... * ... * ... * Minor improvements * ... * update tests * ... * fixes etc * add more tests * add tracing * add documentation * cleanup * use makefile instead of package.json * update lock * ... * ... * ... * ... * ... * Type improvements * ... * ... * ... * update swc * fix array adapter * fix icons and themes * ... * ... * ... * ... * ... * ... * ... * Change package exports * Split HTML and React elements * ... * ... * ... * ... * New cx@ts release * Fix tests * Remove one strange line * ... * ... * ... * Remove old warning about styled not being set * Properly apply key inside icons * Make tests use act * Build cx-react before cx --------- Co-authored-by: vedranvucic77 <vedran.vucic@codaxy.com> Co-authored-by: Ognjen Stefanovic <ognjen.stefanovic@codaxy.com>
1 parent a5c5dbd commit 44fddff

File tree

1,406 files changed

+64979
-66607
lines changed

Some content is hidden

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

1,406 files changed

+64979
-66607
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/settings.local.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"permissions": {
3+
"allow": [
4+
"Bash(yarn build)",
5+
"Bash(for f in packages/cx/src/util/date/*.ts)",
6+
"Bash(do [ ! -f \"$f%.ts.d.ts\" ])",
7+
"Bash(echo:*)",
8+
"Bash(done)",
9+
"Bash(find:*)",
10+
"Bash(head:*)",
11+
"Bash(npx tsc:*)",
12+
"Bash(cut:*)",
13+
"WebFetch(domain:github.com)",
14+
"Bash(curl -s https://raw.githubusercontent.com/codaxy/cxjs/master/packages/cx/src/data/View.d.ts)",
15+
"Bash(yarn build2:*)",
16+
"WebFetch(domain:raw.githubusercontent.com)",
17+
"Bash(cat package.json)",
18+
"Bash(curl:*)",
19+
"Bash(yarn check-types:*)",
20+
"Bash(yarn test)",
21+
"Bash(claude mcp list:*)",
22+
"mcp__playwright__browser_navigate",
23+
"mcp__playwright__browser_tabs",
24+
"mcp__playwright__browser_console_messages",
25+
"mcp__playwright__browser_network_requests",
26+
"mcp__playwright__browser_snapshot",
27+
"mcp__playwright__browser_wait_for",
28+
"mcp__playwright__browser_run_code",
29+
"mcp__playwright__browser_click",
30+
"mcp__playwright__browser_take_screenshot",
31+
"Bash(yarn compile:*)"
32+
],
33+
"deny": [],
34+
"ask": []
35+
}
36+
}

‎.github/workflows/test.yml‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
name: Tests
2+
3+
on:
4+
push:
5+
pull_request:
6+
7+
jobs:
8+
test:
9+
runs-on: ubuntu-latest
10+
11+
steps:
12+
- uses: actions/checkout@v4
13+
14+
- name: Setup Node.js
15+
uses: actions/setup-node@v4
16+
with:
17+
node-version: '20'
18+
19+
- name: Enable Corepack
20+
run: corepack enable
21+
22+
- name: Install dependencies
23+
run: yarn install --immutable
24+
25+
- name: Build cx package
26+
run: yarn build
27+
28+
- name: Run tests
29+
run: yarn test

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,7 @@ node_modules
1111
*.hot-update.js
1212
*.log
1313
dist
14+
build
1415

15-
Thumbs.db
16+
Thumbs.db
17+
.playwright-mcp

‎.vscode/launch.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"request": "launch",
1111
"name": "Debug Tests",
1212
"skipFiles": ["<node_internals>/**"],
13-
"runtimeArgs": ["test", "--inspect"]
13+
"runtimeArgs": ["test", "--inspect"],
14+
"cwd": "${workspaceFolder}/packages/cx"
1415
},
1516
{
1617
"type": "node",

‎.vscode/settings.json‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,39 @@
11
{
2-
"cSpell.words": ["flexbox", "hscroll", "immer", "lookupfield", "resizer", "trello"]
2+
"cSpell.words": ["flexbox", "hscroll", "immer", "lookupfield", "resizer", "trello"],
3+
"explorer.autoRevealExclude": {
4+
"**/node_modules": false
5+
},
6+
"javascript.preferences.importModuleSpecifier": "relative",
7+
"files.watcherExclude": {
8+
"**/node_modules": true,
9+
"**/dist": true,
10+
"**/build": true,
11+
"**/.git/objects/**": true,
12+
"**/.git/subtree-cache/**": true
13+
},
14+
"search.exclude": {
15+
"**/node_modules": true,
16+
"**/dist": true,
17+
"**/build": true
18+
},
19+
"workbench.colorCustomizations": {
20+
"activityBar.activeBackground": "#1c95fe",
21+
"activityBar.background": "#1c95fe",
22+
"activityBar.foreground": "#e7e7e7",
23+
"activityBar.inactiveForeground": "#e7e7e799",
24+
"activityBarBadge.background": "#be0166",
25+
"activityBarBadge.foreground": "#e7e7e7",
26+
"commandCenter.border": "#e7e7e799",
27+
"sash.hoverBorder": "#1c95fe",
28+
"statusBar.background": "#017ce6",
29+
"statusBar.foreground": "#e7e7e7",
30+
"statusBarItem.hoverBackground": "#1c95fe",
31+
"statusBarItem.remoteBackground": "#017ce6",
32+
"statusBarItem.remoteForeground": "#e7e7e7",
33+
"titleBar.activeBackground": "#017ce6",
34+
"titleBar.activeForeground": "#e7e7e7",
35+
"titleBar.inactiveBackground": "#017ce699",
36+
"titleBar.inactiveForeground": "#e7e7e799"
37+
},
38+
"peacock.color": "#017ce6"
339
}

0 commit comments

Comments
 (0)