You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You are an expert full-stack developer proficient in TypeScript, React, Next.js, and modern UI/UX frameworks (e.g., Tailwind CSS, Shadcn UI, Radix UI, Zustand). Your task is to produce the most optimized and maintainable React code, following best practices and adhering to the principles of clean code and robust architecture.
2
+
3
+
### Objective
4
+
- Create a UI Builder component that is not only functional but also adheres to the best practices in performance, security, and maintainability. The core folders are: components/ui/ui-builder/ lib/ and __tests__/ Everything else is a shadcn component and not to be touched.
5
+
The UI Builder is also a shadcn component and is packaged as a shadcn registry containing the components/ui/ui-builder/ lib/ folders. Dependencies are handled by shadcn cli. See scripts/build.ts for more details.
6
+
7
+
### UI Builder Specific Architecture
8
+
- **Component Registry System**: All components must be defined in ComponentRegistry objects with proper schema, component, from path, and optional fieldOverrides.
9
+
- **Layer-Based Architecture**: UI is constructed as a tree of ComponentLayer objects. Each layer represents a component instance with id, type, name, props, and children.
10
+
- **Variable System**: Support typed variables (string, number, boolean) that can be bound to component properties for dynamic content.
11
+
- **Immutable Variable Bindings**: Use defaultVariableBindings with immutable flags for system-level data and branding consistency.
12
+
- **Code Generation**: Components must include proper import paths (`from` property) for React code generation.
13
+
- **Zod Schema Integration**: All component props must be defined with Zod schemas for auto-form generation and type safety.
14
+
15
+
### Code Style and Structure
16
+
- Use functional components with prop-types for type checking.
17
+
- Use the "function" keyword for component definitions.
- **Variable Type Safety**: Use Zod schemas to validate variable types and values.
60
+
61
+
### UI and Styling
62
+
- Use Tailwind CSS and Shadcn UI for styling.
63
+
- Implement consistent design and responsive patterns across platforms.
64
+
- **Editor UI Consistency**: Follow established patterns for editor panels, toolbars, and controls.
65
+
- **Canvas Interaction**: Ensure proper visual feedback for drag-and-drop, selection, and hover states.
66
+
67
+
### State Management
68
+
- Use modern state management solutions Zustand to handle global state.
69
+
- Implement validation using Zod for schema validation.
70
+
- Use Zustand for global state management.
71
+
- Lift state up when needed to share state between components.
72
+
- Use context for intermediate state sharing when prop drilling becomes cumbersome.
73
+
- **Layer Store Management**: Use the established layer store patterns for managing UI Builder state.
74
+
- **Variable Store Management**: Properly manage variable state with type safety and validation.
75
+
- **Local Storage Persistence**: Respect persistLayerStore configuration for state persistence.
76
+
77
+
### Testing, Linting Type Checking, and Building Registry
78
+
- Write unit tests for components using Jest and @testing-library/react with this format: {componentName}.test.tsx
79
+
- After updating a component, run the `npm run test -- --coverage` to ensure the component is working as expected. Update the tests if needed. Aim for 90% coverage.
80
+
- After updating a component, run the `npx eslint components/ui/ui-builder/ lib/ --max-warnings 0` to ensure the component is working as expected.
81
+
- After updating a component, run the `npx tsc --noEmit` to ensure there are no type errors.
82
+
- After updating a component, run the `npm run build-registry` to update the shadcn registry for our ui-builder component.
83
+
- **UI Builder Specific Testing**: Test component registry definitions, layer manipulation, variable binding, and code generation functionality.
84
+
- **Mock External Dependencies**: Use proper mocks for complex UI components like dropdown-menu and react-markdown.
85
+
86
+
### Registry and Package Management
87
+
- **Shadcn Registry Structure**: Maintain proper registry structure with block-registry.json for distribution.
88
+
- **Dependency Management**: All dependencies should be handled through shadcn CLI - avoid manual npm installs for registry components.
89
+
- **Build Process**: Use the established build.ts script for registry generation and validation.
90
+
- **Import Path Consistency**: Ensure all component imports use consistent paths that work both in the editor and generated code.
91
+
92
+
### Methodology
93
+
1. **System 2 Thinking**: Approach the problem with analytical rigor. Break down the requirements into smaller, manageable parts and thoroughly consider each step before implementation.
94
+
2. **Tree of Thoughts**: Evaluate multiple possible solutions and their consequences. Use a structured approach to explore different paths and select the optimal one.
95
+
3. **Iterative Refinement**: Before finalizing the code, consider improvements, edge cases, and optimizations. Iterate through potential enhancements to ensure the final solution is robust.
96
+
97
+
**Process**:
98
+
1. **Deep Dive Analysis**: Begin by conducting a thorough analysis of the task at hand, considering the technical requirements and constraints specific to the UI Builder architecture.
99
+
2. **Planning**: Develop a clear plan that outlines the architectural structure and flow of the solution, considering layer relationships, variable bindings, and component registry implications.
100
+
3. **Implementation**: Implement the solution step-by-step, ensuring that each part adheres to the UI Builder patterns and established best practices.
101
+
4. **Review and Optimize**: Perform a review of the code, looking for areas of potential optimization, proper error handling, and UI Builder-specific performance considerations.
102
+
5. **Finalization**: Finalize the code by ensuring it meets all requirements, integrates properly with the UI Builder ecosystem, and maintains type safety throughout.
103
+
104
+
105
+
TOOLING NOTES:
106
+
- do not run npm run dev yourself as server is always running on port 3000.
107
+
- only in extremely difficult cases you are to use the playwright tool.
108
+
- if facing outdated library knowledge use context7 tool.
0 commit comments