feat: Update UI components for generated React components #580
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: 74cf415 The changes in this PR will be included in the next version bump. This PR includes changesets to release 17 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Warning Rate limit exceeded@kingston has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 5 minutes and 28 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (126)
📒 Files selected for processing (172)
## Walkthrough
This change is a comprehensive overhaul of the React UI component generators and templates, transitioning all generated components to use ShadCN (Radix UI-based) components and modernizing the codebase. It restructures component files, updates dependencies, introduces new form field and utility components, standardizes naming conventions and TypeScript configurations, and refactors CLI commands for template management.
## Changes
| Files / Groups | Change Summary |
|-------------------------------------------------------------------------------------------------------------------|---------------|
| `.changeset/...`, `.vscode/tasks.json`, `CLAUDE.md`, `knip.config.js`, `packages/fastify-generators/package.json`, `packages/ui-components/package.json`, `.npmrc` | Changelog, documentation, and config updates; dependency removals/additions; prettier plugin hoisting. |
| `packages/core-generators/...`, `packages/project-builder-cli/...`, `packages/project-builder-server/...`, `packages/sync/...` | Refactors, new features, and bug fixes in generator infrastructure, CLI commands (templates list/delete/extract), server, and sync logic; adds CLI file path tracking. |
| `packages/react-generators/src/constants/react-packages.ts` | Updates React, Tailwind, and related package versions and selections; removes deprecated packages and adds new UI libraries. |
| `packages/react-generators/src/generators/admin/...` | Admin generator templates and logic updated to use new ShadCN-based field components, revised import conventions, and updated component registrations. |
| `packages/react-generators/src/generators/core/react-components/extractor.json` | Major reorganization: renames, relocates, and expands component, hook, style, and util templates; updates project exports. |
| `packages/react-generators/src/generators/core/react-components/react-components.generator.ts` | Removes conditional logic, updates naming to kebab-case, and modifies export/index logic for components. |
| `packages/react-generators/src/generators/core/react-components/templates/src/components/*` | Removes legacy components (e.g., Alert, Button, Sidebar, Spinner, Table) and adds new ShadCN-style components, hooks, styles, types, and utilities, including form fields, popovers, navigation menu, and more. |
| `packages/react-generators/src/generators/core/react-tailwind/*` | Simplifies Tailwind config, removes legacy CSS/config files, introduces new `styles.css` with theme variables and utilities, and updates generator logic for Vite and Tailwind integration. |
| `packages/react-generators/src/generators/core/react-typescript/react-typescript.generator.ts` | Modernizes TypeScript config: introduces separate app/node configs, stricter linting, and bundler settings. |
| `packages/ui-components/src/components/*` | Adds new calendar, circular progress, date-picker, and date-time-picker components, their stories, and updates exports. |
| `plugins/plugin-auth/src/auth0/generators/react/*`, `plugins/plugin-storage/src/generators/react/*` | Updates generator logic and templates to use new field components, ShadCN UI, and revises naming and export conventions; adds new file input field component. |
| `packages/sync/src/templates/extractor/configs/template-extractor-config-lookup.ts` and related tests | Refactors template config indexing to use a new utility; updates tests to mock indexing results instead of filesystem. |
| `packages/sync/src/templates/extractor/utils/index-template-configs.ts` and tests | Adds new utility to index extractor and provider configs from packages. |
| `packages/sync/src/templates/extractor/index.ts` and `utils/index.ts` | Expands exports to include new utilities for template config indexing and writing. |
| `packages/react-generators/src/generators/admin/admin-crud-*` | Updates embedded input components to use new field controllers; updates table and input components to use new ShadCN components and imports. |
| `packages/react-generators/src/generators/admin/admin-layout/*` | Replaces sidebar navigation with new navigation menu components; renames and relocates layout components. |
| `packages/react-generators/src/generators/core/react-components/templates/src/hooks/*` | Adds new hooks `useControlledState`, `useControllerMerged`; updates `useConfirmDialog` interface. |
| `packages/react-generators/src/generators/core/react-components/templates/src/styles/*` | Adds new style variant files for buttons, inputs, and selects using class-variance-authority. |
| `packages/react-generators/src/generators/core/react-components/templates/src/types/*` | Adds new TypeScript types for form fields and icons. |
| `packages/react-generators/src/generators/core/react-components/templates/src/utils/*` | Adds utility functions `cn` (class names) and `mergeRefs`. |
| `plugins/plugin-storage/src/generators/react/upload-components/*` | Refactors file input component to remove react-hook-form integration, adds new file input field component with controller; enhances upload hook with validation and reset; updates generator to render new template. |
| `plugins/plugin-auth/src/auth0/generators/react/auth0-components/*` | Renames component and export from PascalCase to kebab-case; replaces Spinner with Loader for loading states. |
| Test files across affected packages | Updates and adds tests to match new utilities, config indexing logic, and component structures; removes tests for removed legacy components and deprecated features. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant GeneratedReactApp
participant ShadCNComponents
participant ReactHookForm
participant RadixUI
participant UtilityLibs
User->>GeneratedReactApp: Interacts with form field (e.g., DatePickerField)
GeneratedReactApp->>ShadCNComponents: Renders field using ShadCN component (e.g., DatePickerField)
ShadCNComponents->>RadixUI: Uses Radix UI primitives for UI structure
ShadCNComponents->>ReactHookForm: Integrates with form control if controlled
ShadCNComponents->>UtilityLibs: Applies class names, formatting, etc.
ShadCNComponents-->>GeneratedReactApp: Returns composed UI component
GeneratedReactApp-->>User: Displays updated UIsequenceDiagram
participant CLIUser
participant ProjectBuilderCLI
participant ProjectBuilderServer
participant TemplateExtractor
participant FileSystem
CLIUser->>ProjectBuilderCLI: Run 'templates list/delete/extract' command
ProjectBuilderCLI->>ProjectBuilderServer: Calls server API or loads extractor
ProjectBuilderServer->>TemplateExtractor: Discovers generators/templates
TemplateExtractor->>FileSystem: Reads extractor.json, providers.json, templates
FileSystem-->>TemplateExtractor: Returns config and template data
TemplateExtractor-->>ProjectBuilderServer: Returns generator/template info
ProjectBuilderServer-->>ProjectBuilderCLI: Returns result
ProjectBuilderCLI-->>CLIUser: Outputs list, deletes, or extracts templates
Possibly related PRs
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
kingston
deleted the
kingston/eng-302-update-generated-components-to-use-baseplate-devui
branch
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Documentation
Chores