feat: Move components to components/ui and support intra-generator references #613
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: d3767a8 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 |
WalkthroughThis change implements a comprehensive reorganization of the React component folder structure and import system across multiple packages. UI components are now grouped under Changes
Sequence Diagram(s)sequenceDiagram
participant Generator as Generator Task
participant Renderers as Renderer Abstraction
participant Templates as Template Files
participant Paths as reactPathsProvider
Generator->>Paths: Get components folder root
Generator->>Renderers: Call renderers.<Group>.render({ variables })
Renderers->>Templates: Resolve template file paths with new aliases
Templates->>Paths: Use "$templateName" alias to resolve referenced templates
Templates-->>Renderers: Return rendered output
Renderers-->>Generator: Output generated files to new folder structure
Possibly related PRs
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 22
🔭 Outside diff range comments (5)
packages/react-generators/src/generators/core/react-components/templates/components/ui/input/input.tsx (1)
1-7: Add.jsextensions to aliased imports in templateTemplate files under
templates/are exempt from strict type checking (// @ts-nocheckis intentional). However, to satisfy Node 16 module resolution, aliased imports must include the.jsextension:• File:
packages/react-generators/src/generators/core/react-components/templates/components/ui/input/input.tsx-// @ts-nocheck -import { cn } from '$cn'; -import { inputVariants } from '$stylesInput'; +// @ts-nocheck +import { cn } from '$cn.js'; +import { inputVariants } from '$stylesInput.js';packages/react-generators/src/generators/core/react-components/templates/components/ui/errorable-loader/errorable-loader.tsx (1)
1-7: Add explicit.jsextensions in template importsTemplates under
templates/may retain// @ts-nocheck, but we still need to include.jsextensions to satisfy our ESM import policy:// @ts-nocheck import type React from 'react'; - import { ErrorDisplay } from '$errorDisplay'; - import { Loader } from '$loader'; + import { ErrorDisplay } from '$errorDisplay.js'; + import { Loader } from '$loader.js';packages/ui-components/src/components/ui/combobox-field/combobox-field.tsx (1)
53-55: Add explicit parameter & return types for default helpersUnder
strictmode the parameter of these in-line defaults is typed asany, violating the no-implicit-any rule and guideline that all functions have explicit return types.- getOptionLabel = (val) => (val as { label: string }).label, - getOptionValue = (val) => (val as { value: string | null }).value, + getOptionLabel = (val: OptionType): string => + (val as unknown as { label: string }).label, + getOptionValue = (val: OptionType): string | null => + (val as unknown as { value: string | null }).value,packages/ui-components/src/components/ui/checkbox-field/checkbox-field.tsx (1)
21-29: Use the Checkbox component’s props instead of bare<button>props
ComponentPropsWithRef<'button'>omits many Radix-Checkbox-specific props and may surface incorrect attributes in consumer IntelliSense.-interface CheckboxFieldProps - extends Omit< - ComponentPropsWithRef<'button'>, +interface CheckboxFieldProps + extends Omit< + React.ComponentPropsWithRef<typeof Checkbox>,packages/react-generators/src/generators/core/react-components/templates/components/ui/button/button.tsx (1)
10-32: Use the defined ButtonProps interface consistently.The
ButtonPropsinterface is defined but not used in the function signature. Instead, the function uses an inline type definition that duplicates type information. This creates confusion and violates the DRY principle.Apply this diff to use the ButtonProps interface consistently:
-function Button({ - className, - variant, - size, - justify, - asChild = false, - type = 'button', - ...props -}: React.ComponentProps<'button'> & - VariantProps<typeof buttonVariants> & { - asChild?: boolean; - }): React.ReactElement { +function Button({ + className, + variant, + size, + justify, + asChild = false, + type = 'button', + ...props +}: ButtonProps): React.ReactElement {
♻️ Duplicate comments (3)
packages/react-generators/src/generators/core/react-components/templates/components/ui/popover/popover.tsx (1)
7-7: Same alias/extension concern as in dialog.tsxSee the previous comment regarding mandatory
.jsextensions when$aliases are resolved.
If the resolver already appends the suffix automatically you can ignore this note, otherwise please fix.packages/react-generators/src/generators/core/react-components/templates/components/ui/switch/switch.tsx (1)
5-5: Alias/extension checkSame observation as for the dialog & popover components—please ensure the
$cnalias is rewritten with a.jssuffix in the generated output.packages/react-generators/src/generators/core/react-components/templates/components/ui/checkbox/checkbox.tsx (1)
7-7: Alias/extension checkRepeats the
$cnimport; apply the same verification.
🧹 Nitpick comments (13)
packages/react-generators/src/generators/core/react-components/templates/components/ui/error-display/error-display.tsx (1)
3-5: Re-order imports & keep the.jsextension once alias is resolved
- Import grouping convention: external libs first, then local/aliased paths.
- Ensure the alias gets a
.jsextension after rewrite.Suggested reorder:
-import { cn } from '$cn'; -import React from 'react'; -import { MdOutlineErrorOutline } from 'react-icons/md'; +import React from 'react'; +import { MdOutlineErrorOutline } from 'react-icons/md'; +import { cn } from '$cn'; // will be rewritten → './utils/cn.js'packages/fastify-generators/src/generators/core/error-handler-service/templates/src/utils/zod.ts (1)
3-4: Move local alias import below external libs & verify extension
zodis an external dependency;$httpErrorsis a local alias. Swap them to respect import-group ordering and confirm the alias receives a.jssuffix after transform.-import { BadRequestError } from '$httpErrors'; -import { ZodError } from 'zod'; +import { ZodError } from 'zod'; +import { BadRequestError } from '$httpErrors'; // → './http-errors.js'packages/react-generators/src/generators/core/react-components/templates/components/ui/label/label.tsx (1)
5-8: Align import order and verify alias rewriteExternal modules (
react,radix-ui) should precede local/alias imports.-import type * as React from 'react'; - -import { cn } from '$cn'; -import { Label as LabelPrimitive } from 'radix-ui'; +import type * as React from 'react'; +import { Label as LabelPrimitive } from 'radix-ui'; +import { cn } from '$cn'; // expect rewrite → './utils/cn.js'packages/react-generators/src/generators/core/react-components/templates/src/styles/input.ts (1)
3-4: Follow import-group convention & confirm.jssuffix post-rewrite-import { cn } from '$cn'; -import { cva } from 'class-variance-authority'; +import { cva } from 'class-variance-authority'; +import { cn } from '$cn'; // should resolve → './utils/cn.js'packages/ui-components/src/components/ui/color-picker-field/color-picker-field.tsx (1)
68-72: MemoisehexValueto avoid redundant recomputation
hexValueis derived solely fromvalue&parseColor. Re-evaluating on every render is unnecessary.- const hexValue = value ? (parseColor?.(value) ?? value) : undefined; + const hexValue = useMemo( + () => (value ? parseColor?.(value) ?? value : undefined), + [value, parseColor], + );packages/react-generators/src/generators/core/react-components/templates/components/ui/alert/alert.tsx (1)
6-6: Add file-extension to comply with Node 16 ESM resolutionGuidelines for
*.tsxunder Node 16 require that import specifiers include the.jsextension.
Please confirm that the alias injector will append the extension; otherwise the import should be:-import { cn } from '$cn'; +import { cn } from '$cn.js';packages/react-generators/src/generators/core/react-components/templates/components/ui/form-item/form-item.tsx (1)
7-8: Missing.jsextension on aliased importsAnalogous to the alert component, imports should keep the file-extension per our Node 16 rule set:
-import { cn } from '$cn'; -import { Label } from '$label'; +import { cn } from '$cn.js'; +import { Label } from '$label.js';Confirm that the generator’s transform step really injects the extension; if not, apply the change.
Otherwise, add a comment explaining why the rule is intentionally bypassed.packages/react-generators/src/generators/admin/admin-components/templates/components/admin/embedded-object-field/embedded-object-field.tsx (1)
3-13: Alias switch looks correct.Optional: you can merge the type & value imports into a single statement to reduce churn, but not required.
packages/ui-components/src/components/ui/multi-combobox-field/multi-combobox-field.stories.tsx (1)
49-50: Consider keeping explicit parameter typing for better type safetyThe changes replace explicit parameter typing with type assertions inside the function bodies. While functionally equivalent, explicit parameter typing provides better type safety and clarity.
- getOptionLabel: (option) => (option as { label: string }).label, - getOptionValue: (option) => (option as { value: string }).value, + getOptionLabel: (option: { label: string }) => option.label, + getOptionValue: (option: { value: string }) => option.value,Also applies to: 64-65
packages/ui-components/src/components/ui/combobox-field/combobox-field.stories.tsx (1)
49-50: Consider using explicit parameter types for better readability.While the type assertions work correctly, explicit parameter types might be more readable and provide better IDE support:
- getOptionLabel: (option) => (option as { label: string }).label, - getOptionValue: (option) => (option as { value: string }).value, + getOptionLabel: (option: { label: string }) => option.label, + getOptionValue: (option: { value: string }) => option.value,Also applies to: 64-65
packages/ui-components/src/components/ui/select-field/select-field.stories.tsx (1)
49-50: Consider using explicit parameter types for better readability.Similar to the combobox-field stories, explicit parameter types might be more readable and provide better IDE support:
- getOptionLabel: (option) => (option as { label: string }).label, - getOptionValue: (option) => (option as { value: string }).value, + getOptionLabel: (option: { label: string }) => option.label, + getOptionValue: (option: { value: string }) => option.value,Also applies to: 64-65
packages/react-generators/src/generators/core/react-components/templates/components/ui/date-picker-field/date-picker-field.tsx (1)
20-22: Consider reordering imports to follow coding guidelines.The imports should be ordered with external libraries first, then local imports. Consider moving
date-fns,react, andreact-icons/mdimports before the local$prefixed imports.+import { format, parseISO } from 'date-fns'; +import { useId, useState } from 'react'; +import { MdCalendarMonth } from 'react-icons/md'; + import type { FormFieldProps } from '$typesForm'; import type { Control, FieldPath, FieldValues } from 'react-hook-form'; import { Button } from '$button'; import { Calendar } from '$calendar'; import { cn } from '$cn'; import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, } from '$formItem'; import { useControllerMerged } from '$hooksUseControllerMerged'; import { Popover, PopoverContent, PopoverTrigger } from '$popover'; -import { format, parseISO } from 'date-fns'; -import { useId, useState } from 'react'; -import { MdCalendarMonth } from 'react-icons/md';.changeset/components-folder-organization.md (1)
16-23: Add language specification to the code blockThe fenced code block should specify a language for proper syntax highlighting.
-``` +```text components/ ├── ui/ # UI components │ ├── button.tsx │ ├── input.tsx │ └── ... └── [other-components] # Custom application components</blockquote></details> </blockquote></details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
| // @ts-nocheck | ||
|
|
||
| import { cn } from '../../utils/cn.js'; | ||
| import { cn } from '$cn'; |
There was a problem hiding this comment.
Missing .js extension on aliased import
Guidelines require explicit .js extensions for all imports under Node 16. The current statement will break once the template is materialised into real source:
-import { cn } from '$cn';
+import { cn } from '$cn.js';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { cn } from '$cn'; | |
| import { cn } from '$cn.js'; |
🤖 Prompt for AI Agents
In
packages/react-generators/src/generators/core/react-components/templates/components/ui/circular-progress/circular-progress.tsx
at line 3, the import statement for '$cn' is missing the required '.js'
extension. Update the import to explicitly include the '.js' extension as
'import { cn } from '$cn.js';' to comply with Node 16 module resolution
requirements and prevent runtime errors.
There was a problem hiding this comment.
If it starts with $ ignore it
There was a problem hiding this comment.
@kingston, understood! I'll ignore the .js extension requirement for imports that start with $. Thank you for clarifying this exception.
✏️ Learnings added
Learnt from: kingston
PR: halfdomelabs/baseplate#613
File: packages/react-generators/src/generators/core/react-components/templates/components/ui/circular-progress/circular-progress.tsx:0-0
Timestamp: 2025-07-16T17:15:56.677Z
Learning: For imports starting with `$` (template aliases), do not require `.js` extensions as these are resolved differently during the generation process, unlike regular file imports which require explicit `.js` extensions under Node 16 module resolution.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.tsx : Use ShadCN-based components from `@baseplate-dev/ui-components` instead of creating custom ones
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: plugins/CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:58.487Z
Learning: Applies to plugins/plugin-*/**/*.tsx : When using utility functions like `cn()`, all CSS classes passed to `cn()` in plugin components MUST be prefixed with the plugin name.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/ui-rules.mdc:0-0
Timestamp: 2025-06-30T11:52:33.318Z
Learning: Applies to *.{tsx},packages/project-builder-web/**,packages/ui-components/** : We use a rough analog of ShadCN components that can be imported from @baseplate-dev/ui-components
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/code-style.mdc:0-0
Timestamp: 2025-06-30T11:52:11.055Z
Learning: Applies to {packages,plugins}/**/*.{ts,tsx} : Prefer functional programming patterns
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/code-style.mdc:0-0
Timestamp: 2025-06-30T11:52:11.055Z
Learning: Applies to {packages,plugins}/**/*.{ts,tsx} : Extract repeated components into distinct functions or components where applicable
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.tsx : Use icons from `react-icons/md` (Material Design icons); avoid using other icon libraries
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : Node 16 module resolution - include file extensions in imports (`.js`)
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : Always use `.js` extensions in imports, even for TypeScript files
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/code-style.mdc:0-0
Timestamp: 2025-06-30T11:52:11.055Z
Learning: Applies to {packages,plugins}/**/*.{ts,tsx} : Use camelCase for variables and functions
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : If a particular interface or type is not exported, change the file so it is exported
Learnt from: kingston
PR: halfdomelabs/baseplate#609
File: packages/ui-components/src/components/badge/badge-with-icon.stories.tsx:3-3
Timestamp: 2025-07-14T12:02:36.595Z
Learning: For TypeScript/TSX files: `#src/` is the new path alias standard for `src/` directory imports, replacing the previous `@src/` convention.
| import type * as React from 'react'; | ||
|
|
||
| import { cn } from '../../utils/cn.js'; | ||
| import { cn } from '$cn'; |
There was a problem hiding this comment.
Add the file-extension to comply with Node 16 module resolution
Same issue as in circular-progress:
-import { cn } from '$cn';
+import { cn } from '$cn.js';Without the extension the generated project will not compile.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { cn } from '$cn'; | |
| import { cn } from '$cn.js'; |
🤖 Prompt for AI Agents
In
packages/react-generators/src/generators/core/react-components/templates/components/ui/card/card.tsx
at line 5, the import statement for 'cn' lacks a file extension, causing module
resolution issues in Node 16. Fix this by adding the appropriate file extension
(e.g., '.ts' or '.tsx') to the import path to ensure the generated project
compiles correctly.
| import type * as React from 'react'; | ||
|
|
||
| import { cn } from '../../utils/cn.js'; | ||
| import { cn } from '$cn'; |
There was a problem hiding this comment.
Ensure the aliased import includes .js
-import { cn } from '$cn';
+import { cn } from '$cn.js';Keeping the extension uniform across all templates avoids downstream build errors.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { cn } from '$cn'; | |
| -import { cn } from '$cn'; | |
| +import { cn } from '$cn.js'; |
🤖 Prompt for AI Agents
In
packages/react-generators/src/generators/core/react-components/templates/components/ui/textarea/textarea.tsx
at line 5, the import statement for '$cn' is missing the '.js' extension. Update
the import to include the '.js' extension to maintain consistency across
templates and prevent downstream build errors.
| // @ts-nocheck | ||
|
|
||
| import { bullBoardPlugin } from './plugins/bull-board.js'; | ||
| import { bullBoardPlugin } from '$pluginsBullBoard'; |
There was a problem hiding this comment.
Alias import must end with .js
-import { bullBoardPlugin } from '$pluginsBullBoard';
+import { bullBoardPlugin } from '$pluginsBullBoard.js';The rendered module will otherwise fail to resolve under ESM.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { bullBoardPlugin } from '$pluginsBullBoard'; | |
| import { bullBoardPlugin } from '$pluginsBullBoard.js'; |
🤖 Prompt for AI Agents
In
packages/fastify-generators/src/generators/bull/fastify-bull-board/templates/module/bull-board/index.ts
at line 3, the import statement for '$pluginsBullBoard' lacks the required '.js'
extension for ESM compatibility. Update the import path to end with '.js' to
ensure the module resolves correctly under ESM.
| import type React from 'react'; | ||
|
|
||
| import { cn } from '../../utils/cn.js'; | ||
| import { cn } from '$cn'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Missing .js extension may break Node-16 ESM resolution
Coding-guidelines require explicit file extensions in imports.
Unless the $cn alias is post-processed to append “.js”, this will error at runtime under Node-16 ESM.
-import { cn } from '$cn';
+import { cn } from '$cn.js';Please verify that the generator’s alias-replacement step adds the extension, or patch the template now.
🏁 Script executed:
#!/bin/bash
echo "=== loader.tsx (first 200 lines) ==="
sed -n '1,200p' packages/react-generators/src/generators/core/react-components/templates/components/ui/loader/loader.tsx
echo ""
echo "=== occurrences of \$cn alias in react-generators ==="
rg '\$cn' -n packages/react-generators/src/generatorsLength of output: 5058
Add .js extension to $cn imports in React-components templates
All UI component templates under
packages/react-generators/src/generators/core/react-components/templates/components/ui/**
currently import cn without the required .js extension. Under Node-16 ESM this will fail at runtime.
• Update in loader.tsx (and all other templates importing from $cn):
-import { cn } from '$cn';
+import { cn } from '$cn.js';• You should apply the same change to every file matching:
.../templates/components/ui/**/{*,*.*}.tsx that has
import { cn } from '$cn';
This aligns with our coding-guidelines for explicit .js extensions.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { cn } from '$cn'; | |
| -import { cn } from '$cn'; | |
| +import { cn } from '$cn.js'; |
🤖 Prompt for AI Agents
In
packages/react-generators/src/generators/core/react-components/templates/components/ui/loader/loader.tsx
at line 5, the import statement for cn from '$cn' lacks the required '.js'
extension, which causes runtime failures under Node-16 ESM. Update the import to
include the '.js' extension as import { cn } from '$cn.js';. Apply this same fix
to all other UI component template files under templates/components/ui/** that
import cn from '$cn' to comply with coding guidelines for explicit extensions.
| import { Button } from '$button'; | ||
| import { ErrorDisplay } from '$errorDisplay'; |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
Missing .js extension on aliased imports
Our Node 16 resolution rule requires explicit file extensions on imports, even when using generator aliases.
Please append .js to both module specifiers to stay consistent with the code-style guideline.
-import { Button } from '$button';
-import { ErrorDisplay } from '$errorDisplay';
+import { Button } from '$button.js';
+import { ErrorDisplay } from '$errorDisplay.js';Add .js extensions to aliased imports
Per our Node 16 module resolution rule, all imports in TSX files must include explicit .js extensions.
• File: packages/react-generators/src/generators/core/react-components/templates/components/ui/not-found-card/not-found-card.tsx
Lines 5–6
-import { Button } from '$button';
-import { ErrorDisplay } from '$errorDisplay';
+import { Button } from '$button.js';
+import { ErrorDisplay } from '$errorDisplay.js';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { Button } from '$button'; | |
| import { ErrorDisplay } from '$errorDisplay'; | |
| import { Button } from '$button.js'; | |
| import { ErrorDisplay } from '$errorDisplay.js'; |
🤖 Prompt for AI Agents
In
packages/react-generators/src/generators/core/react-components/templates/components/ui/not-found-card/not-found-card.tsx
at lines 5 to 6, the aliased imports for Button and ErrorDisplay are missing the
required .js extensions. Update the import statements to explicitly include the
.js extension at the end of each import path to comply with Node 16 module
resolution rules.
| import type { PothosAuthorizeByRolesPlugin } from '$fieldAuthorizePlugin'; | ||
| import type { | ||
| AuthorizeRolePluginOptions, | ||
| AuthorizeRoleRuleOption, | ||
| } from '$fieldAuthorizeTypes'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Imports switched to generator aliases – remember the extension
Great to see $fieldAuthorizePlugin / $fieldAuthorizeTypes aliases; however, per guideline these should include .js.
-import type { PothosAuthorizeByRolesPlugin } from '$fieldAuthorizePlugin';
+import type { PothosAuthorizeByRolesPlugin } from '$fieldAuthorizePlugin.js';
-import type {
+import type {
AuthorizeRolePluginOptions,
AuthorizeRoleRuleOption,
-} from '$fieldAuthorizeTypes';
+} from '$fieldAuthorizeTypes.js';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import type { PothosAuthorizeByRolesPlugin } from '$fieldAuthorizePlugin'; | |
| import type { | |
| AuthorizeRolePluginOptions, | |
| AuthorizeRoleRuleOption, | |
| } from '$fieldAuthorizeTypes'; | |
| import type { PothosAuthorizeByRolesPlugin } from '$fieldAuthorizePlugin.js'; | |
| import type { | |
| AuthorizeRolePluginOptions, | |
| AuthorizeRoleRuleOption, | |
| } from '$fieldAuthorizeTypes.js'; |
🤖 Prompt for AI Agents
In
packages/fastify-generators/src/generators/pothos/pothos-auth/templates/src/plugins/graphql/FieldAuthorizePlugin/global-types.ts
lines 3 to 7, the import statements use the aliases $fieldAuthorizePlugin and
$fieldAuthorizeTypes without the required .js extension. Update these import
paths to include the .js extension as per the project guidelines to ensure
proper module resolution.
| import type { PothosFieldWithInputPayloadPlugin } from '$fieldWithInputPlugin'; | ||
| import type { | ||
| MutationWithInputPayloadOptions, | ||
| OutputShapeFromFields, | ||
| } from '$fieldWithInputTypes'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Same extension issue on new alias imports
Add .js to keep Node 16 happy.
-import type { PothosFieldWithInputPayloadPlugin } from '$fieldWithInputPlugin';
+import type { PothosFieldWithInputPayloadPlugin } from '$fieldWithInputPlugin.js';
-import type {
+import type {
MutationWithInputPayloadOptions,
OutputShapeFromFields,
-} from '$fieldWithInputTypes';
+} from '$fieldWithInputTypes.js';🤖 Prompt for AI Agents
In
packages/fastify-generators/src/generators/pothos/pothos/templates/src/plugins/graphql/FieldWithInputPayloadPlugin/global-types.ts
around lines 3 to 7, the import statements using alias paths lack the .js
extension, which causes issues in Node 16. Fix this by appending .js to the end
of each alias import path to ensure compatibility with Node 16's module
resolution.
| generatorPaths: paths as unknown as Record<'', string>, | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use a normal string index signature instead of Record<'', string>.
Record<'', string> creates a type with the single key "", which is almost certainly not what you mean and may trip type-checking or autocomplete later on.
Either remove the cast altogether or cast to Record<string, string>:
- generatorPaths: paths as unknown as Record<'', string>,
+ generatorPaths: paths as unknown as Record<string, string>,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| generatorPaths: paths as unknown as Record<'', string>, | |
| }); | |
| generatorPaths: paths as unknown as Record<string, string>, | |
| }); |
🤖 Prompt for AI Agents
In packages/core-generators/src/generators/node/ts-utils/ts-utils.generator.ts
at lines 33-34, the type cast uses Record<'', string>, which incorrectly defines
a record with only an empty string key. Replace this with Record<string, string>
to correctly type the object as having string keys and string values, or remove
the cast if unnecessary.
| interface OrganizeTsTemplateImportsResult { | ||
| /** | ||
| * The contents of the file with the imports converted to template paths. | ||
| */ | ||
| contents: string; | ||
| /** | ||
| * The project exports that are used in the file. | ||
| */ | ||
| usedProjectExports: TsProjectExport[]; | ||
| /** | ||
| * The generator files that are used in the file. | ||
| */ | ||
| referencedGeneratorTemplates: Set<string>; | ||
| } | ||
|
|
There was a problem hiding this comment.
Export the OrganizeTsTemplateImportsResult interface.
Per the coding guidelines, interfaces should be exported if they're used as return types of exported functions.
-interface OrganizeTsTemplateImportsResult {
+export interface OrganizeTsTemplateImportsResult {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| interface OrganizeTsTemplateImportsResult { | |
| /** | |
| * The contents of the file with the imports converted to template paths. | |
| */ | |
| contents: string; | |
| /** | |
| * The project exports that are used in the file. | |
| */ | |
| usedProjectExports: TsProjectExport[]; | |
| /** | |
| * The generator files that are used in the file. | |
| */ | |
| referencedGeneratorTemplates: Set<string>; | |
| } | |
| export interface OrganizeTsTemplateImportsResult { | |
| /** | |
| * The contents of the file with the imports converted to template paths. | |
| */ | |
| contents: string; | |
| /** | |
| * The project exports that are used in the file. | |
| */ | |
| usedProjectExports: TsProjectExport[]; | |
| /** | |
| * The generator files that are used in the file. | |
| */ | |
| referencedGeneratorTemplates: Set<string>; | |
| } |
🤖 Prompt for AI Agents
In
packages/core-generators/src/renderers/typescript/extractor/organize-ts-template-imports.ts
around lines 82 to 96, the interface OrganizeTsTemplateImportsResult is not
exported but is used as a return type of an exported function. To fix this, add
the export keyword before the interface declaration to make it exported.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/react-generators/src/generators/core/react-components/extractor.json (1)
542-546: Template name stands out from the established patternAll other component templates are named after the component itself (
button,input,select, …).
"switch-component"introduces a new “-component” suffix while its generated file is stillswitch.tsx.In practice this is harmless, but it breaks the otherwise-consistent naming convention and forces consumers to remember one exceptional template ID. Unless there is a strong collision you’re avoiding (
switchis not a reserved JSON key), consider normalising it:- "switch-component": { + "switch": {(And update every
"referencedGeneratorTemplates": ["switch-component"]accordingly.)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
packages/react-generators/src/generators/admin/admin-components/generated/template-paths.tsis excluded by!**/generated/**,!**/generated/**packages/react-generators/src/generators/admin/admin-components/generated/typed-templates.tsis excluded by!**/generated/**,!**/generated/**packages/react-generators/src/generators/admin/admin-layout/generated/template-paths.tsis excluded by!**/generated/**,!**/generated/**packages/react-generators/src/generators/admin/admin-layout/generated/typed-templates.tsis excluded by!**/generated/**,!**/generated/**packages/react-generators/src/generators/core/react-components/generated/template-paths.tsis excluded by!**/generated/**,!**/generated/**packages/react-generators/src/generators/core/react-components/generated/typed-templates.tsis excluded by!**/generated/**,!**/generated/**packages/react-generators/src/generators/core/react-error-boundary/generated/template-paths.tsis excluded by!**/generated/**,!**/generated/**packages/react-generators/src/generators/core/react-error-boundary/generated/typed-templates.tsis excluded by!**/generated/**,!**/generated/**
📒 Files selected for processing (40)
packages/react-generators/src/generators/admin/admin-components/extractor.json(4 hunks)packages/react-generators/src/generators/admin/admin-components/templates/components/admin/embedded-list-field.tsx(2 hunks)packages/react-generators/src/generators/admin/admin-components/templates/components/admin/embedded-object-field.tsx(2 hunks)packages/react-generators/src/generators/admin/admin-layout/extractor.json(2 hunks)packages/react-generators/src/generators/core/react-components/extractor.json(36 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/alert.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/button.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/calendar.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/card.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/checkbox-field.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/checkbox.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/circular-progress.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/combobox-field.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/combobox.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/confirm-dialog.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/date-picker-field.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/date-time-picker-field.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/dialog.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/empty-display.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/error-display.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/errorable-loader.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/form-item.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/input-field.tsx(2 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/input.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/label.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/loader.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/navigation-menu.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/not-found-card.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/popover.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/scroll-area.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/select-field.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/select.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/sidebar-layout.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/switch-field.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/switch.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/table.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/textarea-field.tsx(2 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/textarea.tsx(1 hunks)packages/react-generators/src/generators/core/react-components/templates/components/ui/toaster.tsx(1 hunks)packages/react-generators/src/generators/core/react-error-boundary/extractor.json(1 hunks)
✅ Files skipped from review due to trivial changes (36)
- packages/react-generators/src/generators/core/react-components/templates/components/ui/checkbox.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/popover.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/textarea.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/alert.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/scroll-area.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/switch.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/label.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/card.tsx
- packages/react-generators/src/generators/admin/admin-components/templates/components/admin/embedded-object-field.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/sidebar-layout.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/circular-progress.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/toaster.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/navigation-menu.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/table.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/input.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/error-display.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/dialog.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/form-item.tsx
- packages/react-generators/src/generators/admin/admin-components/templates/components/admin/embedded-list-field.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/button.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/calendar.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/not-found-card.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/empty-display.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/loader.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/checkbox-field.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/combobox-field.tsx
- packages/react-generators/src/generators/core/react-error-boundary/extractor.json
- packages/react-generators/src/generators/core/react-components/templates/components/ui/date-time-picker-field.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/switch-field.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/confirm-dialog.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/combobox.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/select.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/select-field.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/textarea-field.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/date-picker-field.tsx
- packages/react-generators/src/generators/core/react-components/templates/components/ui/input-field.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/react-generators/src/generators/admin/admin-components/extractor.json
- packages/react-generators/src/generators/admin/admin-layout/extractor.json
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
**/*
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
**/*.tsx
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
{packages,plugins}/**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/code-style.mdc
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/ui-rules.mdc:0-0
Timestamp: 2025-06-30T11:52:33.318Z
Learning: Applies to *.{tsx},packages/project-builder-web/**,packages/ui-components/** : We use a rough analog of ShadCN components that can be imported from @baseplate-dev/ui-components
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/index.{ts,tsx} : Prefer barrel exports e.g. `export * from './foo.js'` instead of individual named exports
Learnt from: kingston
PR: halfdomelabs/baseplate#428
File: packages/project-builder-server/src/sync/index.ts:5-5
Timestamp: 2025-01-23T09:12:46.178Z
Learning: Avoid importing directly from 'dist' directories. Instead, expose functionality through the package's public API and import from the main package entry point.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/code-style.mdc:0-0
Timestamp: 2025-06-30T11:52:11.055Z
Learning: Applies to {packages,plugins}/**/*.{ts,tsx} : Extract repeated components into distinct functions or components where applicable
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.tsx : Use ShadCN-based components from `@baseplate-dev/ui-components` instead of creating custom ones
Learnt from: kingston
PR: halfdomelabs/baseplate#609
File: packages/ui-components/src/components/badge/badge-with-icon.stories.tsx:3-3
Timestamp: 2025-07-14T12:02:36.595Z
Learning: For TypeScript/TSX files: `#src/` is the new path alias standard for `src/` directory imports, replacing the previous `@src/` convention.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : Node 16 module resolution - include file extensions in imports (`.js`)
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : Sort imports by group: external libs first, then local imports
Learnt from: kingston
PR: halfdomelabs/baseplate#505
File: packages/create-project/tsconfig.json:6-6
Timestamp: 2025-04-21T06:32:22.476Z
Learning: Since TypeScript 4.1, baseUrl is not required for paths mapping in tsconfig.json. Removing baseUrl and using explicit relative paths with "./" prefix (e.g., changing "@src/*": ["src/*"] to "@src/*": ["./src/*"]) prevents bare path imports from node_modules while maintaining path alias functionality.
Learnt from: kingston
PR: halfdomelabs/baseplate#544
File: packages/ui-components/src/components/Command/Command.tsx:16-31
Timestamp: 2025-05-12T08:29:52.819Z
Learning: In React 19, function components automatically receive refs as regular props, eliminating the need for React.forwardRef. This allows components to directly destructure and use the ref prop, simplifying component definitions while maintaining the same ref forwarding functionality.
packages/react-generators/src/generators/core/react-components/templates/components/ui/errorable-loader.tsx (10)
Learnt from: kingston
PR: halfdomelabs/baseplate#592
File: plugins/plugin-auth/src/auth0/generators/react/auth0-hooks/templates/src/hooks/use-required-user-id.ts:1-2
Timestamp: 2025-07-07T18:24:17.522Z
Learning: Files under templates/** directories can use `// @ts-nocheck` because they are templates meant for code generation, not direct type checking.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : TypeScript with strict type checking
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : If a particular interface or type is not exported, change the file so it is exported
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/ui-rules.mdc:0-0
Timestamp: 2025-06-30T11:52:33.318Z
Learning: Applies to *.{tsx},packages/project-builder-web/**,packages/ui-components/** : We use a rough analog of ShadCN components that can be imported from @baseplate-dev/ui-components
Learnt from: kingston
PR: halfdomelabs/baseplate#609
File: packages/ui-components/src/components/badge/badge-with-icon.stories.tsx:3-3
Timestamp: 2025-07-14T12:02:36.595Z
Learning: For TypeScript/TSX files: `#src/` is the new path alias standard for `src/` directory imports, replacing the previous `@src/` convention.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.tsx : Use ShadCN-based components from `@baseplate-dev/ui-components` instead of creating custom ones
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : Always include return types on top-level functions including React components (`React.ReactElement`)
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/code-style.mdc:0-0
Timestamp: 2025-06-30T11:52:11.055Z
Learning: Applies to {packages,plugins}/**/*.{ts,tsx} : Use TypeScript with strict type checking enabled
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/code-style.mdc:0-0
Timestamp: 2025-06-30T11:52:11.055Z
Learning: Applies to {packages,plugins}/**/*.{ts,tsx} : Extract repeated components into distinct functions or components where applicable
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : Always use `.js` extensions in imports, even for TypeScript files
packages/react-generators/src/generators/core/react-components/extractor.json (25)
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/code-style.mdc:0-0
Timestamp: 2025-06-30T11:52:11.055Z
Learning: Applies to {packages,plugins}/**/*.{ts,tsx} : Extract repeated components into distinct functions or components where applicable
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/ui-rules.mdc:0-0
Timestamp: 2025-06-30T11:52:33.318Z
Learning: Applies to *.{tsx},packages/project-builder-web/**,packages/ui-components/** : We use a rough analog of ShadCN components that can be imported from @baseplate-dev/ui-components
Learnt from: kingston
PR: halfdomelabs/baseplate#571
File: packages/core-generators/src/renderers/extractor/plugins/typed-templates-file.ts:102-106
Timestamp: 2025-06-11T18:31:22.247Z
Learning: For `templateExtractorBarrelExportPlugin.addGeneratedBarrelExport`, the generated barrel exports are written into `generated/index.ts`, therefore the `moduleSpecifier` must be specified relative to that file (e.g., `./typed-templates.js`), not the project root.
Learnt from: kingston
PR: halfdomelabs/baseplate#521
File: packages/react-generators/src/generators/admin/admin-crud-list/admin-crud-list.generator.ts:163-166
Timestamp: 2025-05-05T06:37:51.001Z
Learning: For certain templates in the codebase, the `importMapProviders` property is not explicitly required as the template extractor will automatically determine and infer the necessary import map providers.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.tsx : Use ShadCN-based components from `@baseplate-dev/ui-components` instead of creating custom ones
Learnt from: kingston
PR: halfdomelabs/baseplate#428
File: packages/project-builder-server/src/sync/index.ts:5-5
Timestamp: 2025-01-23T09:12:46.178Z
Learning: Avoid importing directly from 'dist' directories. Instead, expose functionality through the package's public API and import from the main package entry point.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : If a particular interface or type is not exported, change the file so it is exported
Learnt from: kingston
PR: halfdomelabs/baseplate#521
File: plugins/baseplate-plugin-storage/src/generators/react/upload-components/upload-components.generator.ts:108-112
Timestamp: 2025-05-05T06:37:43.106Z
Learning: The template extractor in the baseplate codebase can automatically infer and determine the necessary import map providers for certain templates, making explicit specification of importMapProviders unnecessary in those cases.
Learnt from: kingston
PR: halfdomelabs/baseplate#609
File: packages/ui-components/src/components/badge/badge-with-icon.stories.tsx:3-3
Timestamp: 2025-07-14T12:02:36.595Z
Learning: For TypeScript/TSX files: `#src/` is the new path alias standard for `src/` directory imports, replacing the previous `@src/` convention.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : Always include return types on top-level functions including React components (`React.ReactElement`)
Learnt from: kingston
PR: halfdomelabs/baseplate#592
File: plugins/plugin-auth/src/auth0/generators/react/auth0-hooks/templates/src/hooks/use-required-user-id.ts:1-2
Timestamp: 2025-07-07T18:24:17.522Z
Learning: Files under templates/** directories can use `// @ts-nocheck` because they are templates meant for code generation, not direct type checking.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : TypeScript with strict type checking
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.tsx : Use icons from `react-icons/md` (Material Design icons); avoid using other icon libraries
Learnt from: kingston
PR: halfdomelabs/baseplate#505
File: packages/create-project/tsconfig.json:6-6
Timestamp: 2025-04-21T06:32:22.476Z
Learning: Since TypeScript 4.1, baseUrl is not required for paths mapping in tsconfig.json. Removing baseUrl and using explicit relative paths with "./" prefix (e.g., changing "@src/*": ["src/*"] to "@src/*": ["./src/*"]) prevents bare path imports from node_modules while maintaining path alias functionality.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to plugins/*/**/*.tsx : In plugins, prefix all Tailwind classes with the plugin name (e.g., `auth-`, `storage-`)
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to src/tests/**/*.{ts,tsx} : Test helpers are located in `src/tests/` directory
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/tests.mdc:0-0
Timestamp: 2025-06-30T11:52:28.745Z
Learning: Applies to src/tests/**/*.{ts,tsx} : Test helpers are located in `src/tests/` directory
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/code-style.mdc:0-0
Timestamp: 2025-06-30T11:52:11.055Z
Learning: Applies to {packages,plugins}/**/*.{ts,tsx} : Use TypeScript with strict type checking enabled
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: plugins/CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:58.487Z
Learning: Applies to plugins/plugin-*/**/*.tsx : When using utility functions like `cn()`, all CSS classes passed to `cn()` in plugin components MUST be prefixed with the plugin name.
Learnt from: kingston
PR: halfdomelabs/baseplate#505
File: packages/create-project/tsconfig.json:6-6
Timestamp: 2025-04-21T06:32:22.476Z
Learning: Since TypeScript 4.1, baseUrl is not required for paths mapping when using explicit relative paths (with "./"). Removing baseUrl from tsconfig.json while updating paths to use relative paths (e.g., changing "@src/*": ["src/*"] to "@src/*": ["./src/*"]) prevents bare path imports from node_modules while maintaining path alias functionality.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/code-style.mdc:0-0
Timestamp: 2025-06-30T11:52:11.055Z
Learning: Applies to {packages,plugins}/**/*.{ts,tsx} : Prefer functional programming patterns
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: .cursor/rules/code-style.mdc:0-0
Timestamp: 2025-06-30T11:52:11.055Z
Learning: Applies to {packages,plugins}/**/*.{ts,tsx} : Use camelCase for variables and functions
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : Sort imports by group: external libs first, then local imports
Learnt from: kingston
PR: halfdomelabs/baseplate#606
File: plugins/plugin-auth/src/auth/core/generators/auth-apollo/auth-apollo.generator.ts:24-32
Timestamp: 2025-07-12T19:56:08.559Z
Learning: For generator functions and configuration object methods like those in createGeneratorTask, inferred return types are acceptable when the structure is clear from the implementation. ESLint rules handle enforcement of explicit return types where truly needed, so manual review for this is not necessary.
Learnt from: CR
PR: halfdomelabs/baseplate#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T11:51:48.395Z
Learning: Applies to **/*.{ts,tsx} : Node 16 module resolution - include file extensions in imports (`.js`)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Test E2E
🔇 Additional comments (5)
packages/react-generators/src/generators/core/react-components/templates/components/ui/errorable-loader.tsx (3)
1-1: LGTM! Appropriate use of// @ts-nocheckin template file.This directive is correctly used in template files meant for code generation, following the established pattern in the codebase.
5-6: Import paths updated to use aliased references.The change from relative paths to aliased paths (
$errorDisplay,$loader) aligns with the new import strategy for the components generator. Note that these aliased imports don't include.jsextensions as typically required, but this may be intentional for the template generation system.
30-42: Component implementation follows coding standards.The ErrorableLoader component correctly uses explicit return types and follows TypeScript strict typing patterns. While it uses custom components (
ErrorDisplay,Loader) rather than ShadCN-based components from@baseplate-dev/ui-components, this is likely appropriate for a template file that's part of the component generation system.packages/react-generators/src/generators/core/react-components/extractor.json (2)
617-620:toasterlikely needs thecnutility as wellMost UI components that render class names depend on the
cnhelper.toaster.tsxtraditionally does the same, yetreferencedGeneratorTemplatesonly listsstyles-button.Please double-check; if
cnis imported insidetoaster.tsx, add it to the list to keep the extractor’s dependency graph accurate.- "referencedGeneratorTemplates": ["styles-button"], + "referencedGeneratorTemplates": ["cn", "styles-button"],
1-667: All referenced templates validatedThe verification script confirms that every
referencedGeneratorTemplatesentry maps to an existing key intemplates. No missing templates were found—no further action is needed.
kingston
deleted the
kingston/eng-809-migrate-components-to-new-structure-ui-and-layout-folders
branch
Summary by CodeRabbit
New Features
Refactor
uifolder for improved structure and clarity.layoutsanduifor easier imports.Chores
Style
Documentation