diff --git a/.changeset/better-ways-try.md b/.changeset/better-ways-try.md new file mode 100644 index 000000000..39aee5e66 --- /dev/null +++ b/.changeset/better-ways-try.md @@ -0,0 +1,5 @@ +--- +'@baseplate-dev/react-generators': minor +--- + +Refresh all UI components generated by React generators to use ShadCN components diff --git a/.changeset/lazy-pianos-build.md b/.changeset/lazy-pianos-build.md new file mode 100644 index 000000000..68f1c11c3 --- /dev/null +++ b/.changeset/lazy-pianos-build.md @@ -0,0 +1,5 @@ +--- +'@baseplate-dev/project-builder-cli': patch +--- + +Refactor template commands to allow listing/deleting of templates from CLI diff --git a/.changeset/lucky-banks-sell.md b/.changeset/lucky-banks-sell.md new file mode 100644 index 000000000..90f4e7c61 --- /dev/null +++ b/.changeset/lucky-banks-sell.md @@ -0,0 +1,5 @@ +--- +'@baseplate-dev/react-generators': patch +--- + +Match tsconfig for React projects to newer Vite templates with tsconfig.app and tsconfig.node diff --git a/.changeset/seven-paws-tell.md b/.changeset/seven-paws-tell.md new file mode 100644 index 000000000..b05823cc7 --- /dev/null +++ b/.changeset/seven-paws-tell.md @@ -0,0 +1,5 @@ +--- +'@baseplate-dev/sync': patch +--- + +Fix issues with how renames are handled diff --git a/.changeset/tough-ducks-fall.md b/.changeset/tough-ducks-fall.md new file mode 100644 index 000000000..8cfb43ee8 --- /dev/null +++ b/.changeset/tough-ducks-fall.md @@ -0,0 +1,7 @@ +--- +'@baseplate-dev/project-builder-server': patch +'@baseplate-dev/project-builder-cli': patch +'@baseplate-dev/sync': patch +--- + +Add command to list available generators with templates diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml index 85e43e3b1..555463d43 100644 --- a/.github/workflows/test-e2e.yml +++ b/.github/workflows/test-e2e.yml @@ -34,7 +34,7 @@ jobs: cache: 'pnpm' - name: Install Dependencies - run: pnpm install --frozen-lockfile --filter @baseplate-dev/project-builder-test... --filter @baseplate-dev/project-builder-cli... --filter @baseplate-dev/root + run: pnpm install --frozen-lockfile - name: Get Playwright version id: get-playwright-version diff --git a/.npmrc b/.npmrc index 5868c1005..2c9b296b2 100644 --- a/.npmrc +++ b/.npmrc @@ -6,3 +6,7 @@ save-prefix="" link-workspace-packages=true # Defaults to saving as workspace:* save-workspace-protocol=rolling + +# Hoist prettier-plugin-packagejson to allow husky to prettify all files +public-hoist-pattern[]=prettier-plugin-packagejson +public-hoist-pattern[]=prettier-plugin-tailwindcss diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 08da47466..cfb139f33 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -39,6 +39,7 @@ "group": "build", "problemMatcher": { "base": "$tsc-watch", + "owner": "typescript", "pattern": { "regexp": "^//:watch:tsc:root: (.+):(\\d+):(\\d+) - (error|warning|info) TS(\\d+): (.*)$", "file": 1, diff --git a/CLAUDE.md b/CLAUDE.md index 5d27ec06c..4c26197d3 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -30,6 +30,7 @@ Note: Make sure to run the commands in the sub-packages if only modifying files - If a particular interface or type is not exported, change the file so it is exported - We use the prefer using nullish coalescing operator (`??`) ESLint rule instead of a logical or (`||`), as it is a safer operator - Prefer barrel exports e.g. export \* from './foo.js' instead of individual named exports +- Use console.info/warn/error instead of console.log ## UI Development Guidelines diff --git a/knip.config.js b/knip.config.js index e6755e427..a1d42f68c 100644 --- a/knip.config.js +++ b/knip.config.js @@ -35,11 +35,6 @@ export default { 'packages/fastify-generators': { entry: ['src/index.{ts,tsx}'], project: 'src/**/*.{ts,tsx}', - ignoreDependencies: [ - // Tricky bug where @tailwlindcss/forms is being used by prettier-plugin-tailwindcss - // so must be included to not bug the build - '@tailwindcss/forms', - ], }, 'packages/project-builder-web': { entry: ['src/index.{ts,tsx}'], diff --git a/packages/core-generators/src/generators/node/typescript/typescript.generator.ts b/packages/core-generators/src/generators/node/typescript/typescript.generator.ts index 8b7120557..760c93516 100644 --- a/packages/core-generators/src/generators/node/typescript/typescript.generator.ts +++ b/packages/core-generators/src/generators/node/typescript/typescript.generator.ts @@ -162,6 +162,7 @@ const [setupTask, typescriptSetupProvider, typescriptSetupValuesProvider] = exclude: t.array(['**/node_modules', '**/dist', '**/lib']), references: t.array(), extraSections: t.array>(), + tsconfigPath: t.scalar('tsconfig.json'), }), { prefix: 'typescript', @@ -206,7 +207,7 @@ export const typescriptGenerator = createGenerator({ writeJsonToBuilder(builder, { id: 'tsconfig', - destination: 'tsconfig.json', + destination: typescriptConfig.tsconfigPath, contents: { compilerOptions, include, diff --git a/packages/core-generators/src/generators/node/typescript/typescript.generator.unit.test.ts b/packages/core-generators/src/generators/node/typescript/typescript.generator.unit.test.ts index 892bfc1be..e74a4d6f2 100644 --- a/packages/core-generators/src/generators/node/typescript/typescript.generator.unit.test.ts +++ b/packages/core-generators/src/generators/node/typescript/typescript.generator.unit.test.ts @@ -22,6 +22,7 @@ describe('typescriptGenerator', () => { exclude: ['**/node_modules', '**/dist'], references: [], extraSections: [], + tsconfigPath: 'tsconfig.json', }; const testTemplateFile = createTsTemplateFile({ diff --git a/packages/core-generators/src/renderers/typescript/extractor/get-resolver-factory.ts b/packages/core-generators/src/renderers/typescript/extractor/get-resolver-factory.ts index 683ee11fe..50d0fce7c 100644 --- a/packages/core-generators/src/renderers/typescript/extractor/get-resolver-factory.ts +++ b/packages/core-generators/src/renderers/typescript/extractor/get-resolver-factory.ts @@ -1,3 +1,4 @@ +import { existsSync } from 'node:fs'; import path from 'node:path'; import { ResolverFactory } from 'oxc-resolver'; @@ -7,9 +8,16 @@ import { ResolverFactory } from 'oxc-resolver'; * @returns A resolver factory for the given working directory. */ export function getResolverFactory(workingDirectory: string): ResolverFactory { + // Slight hack to support tsconfig.app.json instead of tsconfig.json + const tsconfigAppExists = existsSync( + path.join(workingDirectory, 'tsconfig.app.json'), + ); + const tsconfigPath = tsconfigAppExists + ? path.join(workingDirectory, 'tsconfig.app.json') + : path.join(workingDirectory, 'tsconfig.json'); return new ResolverFactory({ tsconfig: { - configFile: path.join(workingDirectory, 'tsconfig.json'), + configFile: tsconfigPath, }, conditionNames: ['node', 'require', 'types'], extensions: ['.ts', '.tsx', '.d.ts', '.js', '.jsx', '.json', '.node'], diff --git a/packages/core-generators/src/renderers/typescript/extractor/organize-ts-template-imports.unit.test.ts b/packages/core-generators/src/renderers/typescript/extractor/organize-ts-template-imports.unit.test.ts index 4abc5a645..3fd8a1c4d 100644 --- a/packages/core-generators/src/renderers/typescript/extractor/organize-ts-template-imports.unit.test.ts +++ b/packages/core-generators/src/renderers/typescript/extractor/organize-ts-template-imports.unit.test.ts @@ -72,6 +72,8 @@ export function capitalizeString(str: string) { import { A } from "test"; + + export function capitalizeString(str: string) { A(); } diff --git a/packages/core-generators/src/renderers/typescript/imports/ts-morph-operations.ts b/packages/core-generators/src/renderers/typescript/imports/ts-morph-operations.ts index 542577d88..c72ed19fa 100644 --- a/packages/core-generators/src/renderers/typescript/imports/ts-morph-operations.ts +++ b/packages/core-generators/src/renderers/typescript/imports/ts-morph-operations.ts @@ -160,7 +160,7 @@ export function replaceImportDeclarationsInSourceFile( const child = children[0]; return !Node.isStringLiteral(child); }); - const insertionPosition = firstNonDirectiveNode?.getNonWhitespaceStart() ?? 0; + const insertionPosition = firstNonDirectiveNode?.getFullStart() ?? 0; // special case shebang to remove the first line if it's a shebang const firstNonDirectiveNodeHasShebang = firstNonDirectiveNode @@ -175,6 +175,9 @@ export function replaceImportDeclarationsInSourceFile( if (beforeImportsWriter) { beforeImportsWriter(writer); } + if (insertionPosition > 0) { + writer.blankLineIfLastNot(); + } writeGroupedImportDeclarationsWithCodeBlockWriter( writer, newImportDeclarations, diff --git a/packages/core-generators/src/renderers/typescript/imports/ts-morph-operations.unit.test.ts b/packages/core-generators/src/renderers/typescript/imports/ts-morph-operations.unit.test.ts index ed69b82a8..33b88a6af 100644 --- a/packages/core-generators/src/renderers/typescript/imports/ts-morph-operations.unit.test.ts +++ b/packages/core-generators/src/renderers/typescript/imports/ts-morph-operations.unit.test.ts @@ -503,8 +503,13 @@ const x = A();`, it('should preserve client directives', () => { // Arrange sourceFile.replaceWithText( - `"use client"; -import React from "react"; + `'use client'; + +import type React from 'react'; + +import { Toaster as Sonner } from 'sonner'; + +import { buttonVariants } from '@src/styles/button.js'; const x = A();`, ); @@ -528,7 +533,7 @@ const x = A();`, // Assert expect(sourceFile.getFullText()).toBe( - '"use client";\n' + 'import React from "react";\n\nconst x = A();', + "'use client';\n\n" + 'import React from "react";\n\n\nconst x = A();', ); }); diff --git a/packages/core-generators/src/renderers/typescript/utils/ts-code-utils.ts b/packages/core-generators/src/renderers/typescript/utils/ts-code-utils.ts index d7e3f5fd4..404c9fc7a 100644 --- a/packages/core-generators/src/renderers/typescript/utils/ts-code-utils.ts +++ b/packages/core-generators/src/renderers/typescript/utils/ts-code-utils.ts @@ -581,3 +581,6 @@ export const TsCodeUtils = { // Shortcut for template function export const tsTemplate = TsCodeUtils.template.bind(TsCodeUtils); + +export const tsTemplateWithImports = + TsCodeUtils.templateWithImports.bind(TsCodeUtils); diff --git a/packages/fastify-generators/package.json b/packages/fastify-generators/package.json index 5c1c67f1d..542338145 100644 --- a/packages/fastify-generators/package.json +++ b/packages/fastify-generators/package.json @@ -58,7 +58,6 @@ }, "devDependencies": { "@baseplate-dev/tools": "workspace:*", - "@tailwindcss/forms": "0.5.9", "concurrently": "9.0.1", "cpx2": "catalog:", "eslint": "catalog:", diff --git a/packages/project-builder-cli/package.json b/packages/project-builder-cli/package.json index fddbf8892..f16ce1064 100644 --- a/packages/project-builder-cli/package.json +++ b/packages/project-builder-cli/package.json @@ -44,7 +44,7 @@ "clean": "rm -rf ./dist", "dev": "tsx watch --tsconfig ./tsconfig.app.json --exclude /**/node_modules/** -r dotenv/config -C development ./src/cli.ts", "dev:serve": "pnpm dev serve", - "extract:templates": "pnpm start extract-templates", + "extract:templates": "pnpm start templates extract", "lint": "eslint .", "prettier:check": "prettier --check .", "prettier:write": "prettier -w .", diff --git a/packages/project-builder-cli/src/commands/build.ts b/packages/project-builder-cli/src/commands/build.ts index cfb74c2fe..35095a7ea 100644 --- a/packages/project-builder-cli/src/commands/build.ts +++ b/packages/project-builder-cli/src/commands/build.ts @@ -30,6 +30,7 @@ export function addBuildCommand(program: Command): void { logger, context, userConfig, + cliFilePath: process.argv[1], }); }); } diff --git a/packages/project-builder-cli/src/commands/extract-templates.ts b/packages/project-builder-cli/src/commands/extract-templates.ts deleted file mode 100644 index 00ba12a9e..000000000 --- a/packages/project-builder-cli/src/commands/extract-templates.ts +++ /dev/null @@ -1,55 +0,0 @@ -import type { Command } from 'commander'; - -import { getDefaultPlugins } from '@baseplate-dev/project-builder-common'; - -import { logger } from '#src/services/logger.js'; -import { expandPathWithTilde } from '#src/utils/path.js'; - -/** - * Runs the template extraction flow on the target directory. - * - * @param program - The program to add the command to. - */ -export function addExtractTemplatesCommand(program: Command): void { - program - .command('extract-templates directory app') - .description( - 'Extracts templates from the specified directory and saves them to the templates directory', - ) - .option( - '--auto-generate-extractor', - 'Auto-generate extractor.json files', - true, - ) - .option( - '--skip-clean', - 'Skip cleaning the output directories (templates and generated)', - false, - ) - .action( - async ( - directory: string, - app: string, - options: { - autoGenerateExtractor?: boolean; - skipClean?: boolean; - }, - ) => { - const { runTemplateExtractorsForProject } = await import( - '@baseplate-dev/project-builder-server/template-extractor' - ); - const resolvedDirectory = expandPathWithTilde(directory); - const defaultPlugins = await getDefaultPlugins(logger); - await runTemplateExtractorsForProject( - resolvedDirectory, - app, - defaultPlugins, - logger, - { - autoGenerateExtractor: options.autoGenerateExtractor, - skipClean: options.skipClean, - }, - ); - }, - ); -} diff --git a/packages/project-builder-cli/src/commands/server.ts b/packages/project-builder-cli/src/commands/server.ts index e59efc964..35e347f28 100644 --- a/packages/project-builder-cli/src/commands/server.ts +++ b/packages/project-builder-cli/src/commands/server.ts @@ -55,6 +55,7 @@ export async function serveWebServer( builtInPlugins, userConfig, skipCommands, + cliFilePath: process.argv[1], }); const fastifyInstance = await startWebServer({ diff --git a/packages/project-builder-cli/src/commands/templates.ts b/packages/project-builder-cli/src/commands/templates.ts new file mode 100644 index 000000000..8b461251c --- /dev/null +++ b/packages/project-builder-cli/src/commands/templates.ts @@ -0,0 +1,208 @@ +import type { Command } from 'commander'; + +import { getDefaultPlugins } from '@baseplate-dev/project-builder-common'; +import path from 'node:path'; + +import { logger } from '#src/services/logger.js'; +import { expandPathWithTilde } from '#src/utils/path.js'; + +interface ListTemplatesOptions { + json?: boolean; +} + +interface DeleteTemplateOptions { + force?: boolean; + directory?: string; +} + +interface ExtractTemplatesOptions { + autoGenerateExtractor?: boolean; + skipClean?: boolean; +} + +/** + * Adds template management commands to the program. + * @param program - The program to add the commands to. + */ +export function addTemplatesCommand(program: Command): void { + const templatesCommand = program + .command('templates') + .description('Manage generator templates'); + + // Templates list subcommand + templatesCommand + .command('list [directory]') + .description('Lists all available generators with their templates') + .option('--json', 'Output in JSON format', false) + .action( + async (directory: string | undefined, options: ListTemplatesOptions) => { + await handleListTemplates(directory, options); + }, + ); + + // Templates delete subcommand + templatesCommand + .command('delete ') + .description('Delete a specific template from a generator') + .option('--force', 'Skip confirmation prompt', false) + .option('--directory ', 'Directory to search for generators') + .action( + async ( + generatorName: string, + templateName: string, + options: DeleteTemplateOptions, + ) => { + await handleDeleteTemplate(generatorName, templateName, options); + }, + ); + + // Templates extract subcommand + templatesCommand + .command('extract ') + .description( + 'Extracts templates from the specified directory and saves them to the templates directory', + ) + .option( + '--auto-generate-extractor', + 'Auto-generate extractor.json files', + true, + ) + .option( + '--skip-clean', + 'Skip cleaning the output directories (templates and generated)', + false, + ) + .action( + async ( + directory: string, + app: string, + options: ExtractTemplatesOptions, + ) => { + await handleExtractTemplates(directory, app, options); + }, + ); +} + +async function handleListTemplates( + directory: string | undefined, + options: ListTemplatesOptions, +): Promise { + const { discoverGenerators } = await import( + '@baseplate-dev/project-builder-server/template-extractor' + ); + + const resolvedDirectory = directory + ? expandPathWithTilde(directory) + : path.resolve('.'); + const defaultPlugins = await getDefaultPlugins(logger); + + try { + const generators = await discoverGenerators( + resolvedDirectory, + defaultPlugins, + logger, + ); + + // Use existing basic listing logic + if (options.json) { + console.info( + JSON.stringify( + generators.map((g) => ({ + ...g, + templates: Object.fromEntries( + Object.entries(g.templates).map(([templatePath, template]) => [ + templatePath, + { + name: template.name, + type: template.type, + }, + ]), + ), + })), + null, + 2, + ), + ); + } else { + if (generators.length === 0) { + console.info('No generators found with extractor.json files.'); + return; + } + + console.info(`Found ${generators.length} generator(s):\n`); + + for (const generator of generators) { + console.info(`📦 ${generator.name}`); + console.info(` Package: ${generator.packageName}`); + console.info(` Path: ${generator.generatorDirectory}`); + console.info( + ` Templates: ${Object.values(generator.templates) + .map((t) => t.name) + .join(', ')}`, + ); + console.info(); + } + } + } catch (error) { + logger.error( + `Failed to discover generators: ${error instanceof Error ? error.message : String(error)}`, + ); + throw error; + } +} + +async function handleDeleteTemplate( + generatorName: string, + templateName: string, + options: DeleteTemplateOptions, +): Promise { + const { deleteTemplate } = await import( + '@baseplate-dev/project-builder-server/template-extractor' + ); + const resolvedDirectory = options.directory + ? expandPathWithTilde(options.directory) + : path.resolve('.'); + + const defaultPlugins = await getDefaultPlugins(logger); + + try { + await deleteTemplate(generatorName, templateName, { + defaultPlugins, + logger, + directory: resolvedDirectory, + }); + + console.info( + `✅ Successfully deleted template '${templateName}' from generator '${generatorName}'`, + ); + } catch (error) { + logger.error( + `Failed to delete template: ${error instanceof Error ? error.message : String(error)}`, + ); + throw error; + } +} + +async function handleExtractTemplates( + directory: string, + app: string, + options: ExtractTemplatesOptions, +): Promise { + const { runTemplateExtractorsForProject } = await import( + '@baseplate-dev/project-builder-server/template-extractor' + ); + + const resolvedDirectory = expandPathWithTilde(directory); + const defaultPlugins = await getDefaultPlugins(logger); + + await runTemplateExtractorsForProject( + resolvedDirectory, + app, + defaultPlugins, + logger, + { + autoGenerateExtractor: options.autoGenerateExtractor, + skipClean: options.skipClean, + }, + ); +} diff --git a/packages/project-builder-cli/src/index.ts b/packages/project-builder-cli/src/index.ts index e1b992d4e..4355da854 100644 --- a/packages/project-builder-cli/src/index.ts +++ b/packages/project-builder-cli/src/index.ts @@ -2,8 +2,8 @@ import { program } from 'commander'; import { addBuildCommand } from './commands/build.js'; import { addConfigCommand } from './commands/config.js'; -import { addExtractTemplatesCommand } from './commands/extract-templates.js'; import { addServeCommand } from './commands/server.js'; +import { addTemplatesCommand } from './commands/templates.js'; import { getEnabledFeatureFlags } from './services/feature-flags.js'; import { getPackageVersion } from './utils/version.js'; @@ -18,7 +18,7 @@ export async function runCli(): Promise { program.version(version, '-v, --version'); if (enabledFlags.includes('TEMPLATE_EXTRACTOR')) { - addExtractTemplatesCommand(program); + addTemplatesCommand(program); } addBuildCommand(program); diff --git a/packages/project-builder-server/src/compiler/admin/index.ts b/packages/project-builder-server/src/compiler/admin/index.ts index 6b40fe975..248fdc1f5 100644 --- a/packages/project-builder-server/src/compiler/admin/index.ts +++ b/packages/project-builder-server/src/compiler/admin/index.ts @@ -91,9 +91,7 @@ function buildAdmin(builder: AdminAppEntryBuilder): GeneratorBundle { rootFeatures, ), }), - reactComponents: reactComponentsGenerator({ - includeDatePicker: true, - }), + reactComponents: reactComponentsGenerator({}), reactTailwind: reactTailwindGenerator({}), reactSentry: reactSentryGenerator({}), reactApollo: reactApolloGenerator({ diff --git a/packages/project-builder-server/src/server/builder-service-manager.ts b/packages/project-builder-server/src/server/builder-service-manager.ts index 94516521b..471dc323d 100644 --- a/packages/project-builder-server/src/server/builder-service-manager.ts +++ b/packages/project-builder-server/src/server/builder-service-manager.ts @@ -19,6 +19,10 @@ export class BuilderServiceManager { * Whether to skip running commands for use in testing. */ skipCommands?: boolean; + /** + * The path to the CLI file that was executed to start the sync. + */ + cliFilePath?: string; }, ) { for (const directory of this.options.initialDirectories ?? []) { @@ -40,6 +44,7 @@ export class BuilderServiceManager { builtInPlugins: this.options.builtInPlugins, userConfig: this.options.userConfig, skipCommands: this.options.skipCommands, + cliFilePath: this.options.cliFilePath, }); service.init(); this.services.set(id, service); diff --git a/packages/project-builder-server/src/service/builder-service.ts b/packages/project-builder-server/src/service/builder-service.ts index de507660c..34d07b5ad 100644 --- a/packages/project-builder-server/src/service/builder-service.ts +++ b/packages/project-builder-server/src/service/builder-service.ts @@ -78,6 +78,7 @@ interface ProjectBuilderServiceOptions { cliVersion: string; userConfig: BaseplateUserConfig; skipCommands?: boolean; + cliFilePath?: string; } export interface SyncMetadataChangedPayload { @@ -137,6 +138,8 @@ export class ProjectBuilderService extends TypedEventEmitter { @@ -362,6 +367,7 @@ export class ProjectBuilderService extends TypedEventEmitter { await syncMetadataController?.updateMetadata((metadata) => ({ ...metadata, @@ -162,6 +168,11 @@ export async function buildProject({ ...metadata, status: 'in-progress', startedAt: new Date().toISOString(), + // Set cliFilePath only if template extraction is enabled + cliFilePath: + projectJson.settings.templateExtractor?.writeMetadata && cliFilePath + ? cliFilePath + : undefined, packages: Object.fromEntries( apps.map((app, index) => [ app.id, diff --git a/packages/project-builder-server/src/sync/sync-metadata.ts b/packages/project-builder-server/src/sync/sync-metadata.ts index b4e2f7d7e..3f45adc97 100644 --- a/packages/project-builder-server/src/sync/sync-metadata.ts +++ b/packages/project-builder-server/src/sync/sync-metadata.ts @@ -91,6 +91,7 @@ export const syncMetadataSchema = z.object({ globalErrors: z.array(z.string()).optional(), startedAt: z.string().optional(), completedAt: z.string().optional(), + cliFilePath: z.string().optional(), packages: z.record(z.string(), packageSyncInfoSchema), }); diff --git a/packages/project-builder-server/src/template-extractor/delete-template.ts b/packages/project-builder-server/src/template-extractor/delete-template.ts new file mode 100644 index 000000000..b72de76e6 --- /dev/null +++ b/packages/project-builder-server/src/template-extractor/delete-template.ts @@ -0,0 +1,98 @@ +import type { PluginMetadataWithPaths } from '@baseplate-dev/project-builder-lib'; +import type { Logger } from '@baseplate-dev/sync'; + +import { extractorConfigSchema, parseGeneratorName } from '@baseplate-dev/sync'; +import { stringifyPrettyCompact } from '@baseplate-dev/utils'; +import { + handleFileNotFoundError, + readJsonWithSchema, +} from '@baseplate-dev/utils/node'; +import fs from 'node:fs/promises'; +import path from 'node:path'; + +import { discoverGenerators } from './discover-generators.js'; + +/** + * Options for the delete-template command + */ +interface DeleteTemplateOptions { + /** + * The default plugins to use + */ + defaultPlugins: PluginMetadataWithPaths[]; + /** + * The directory to search for generators + */ + directory?: string; + /** + * The logger to use + */ + logger: Logger; +} + +/** + * Deletes a template from a generator extractor.json file + */ +export async function deleteTemplate( + generatorName: string, + templateName: string, + options: DeleteTemplateOptions, +): Promise { + const generators = await discoverGenerators( + options.directory, + options.defaultPlugins, + options.logger, + ); + + // Pull the generator config + const generator = generators.find((g) => { + const parsedGeneratorName = parseGeneratorName(g.name); + return ( + g.name === generatorName || + parsedGeneratorName.generatorPath === generatorName + ); + }); + if (!generator) { + throw new Error(`Generator '${generatorName}' not found`); + } + + const extractorJsonPath = path.join( + generator.generatorDirectory, + 'extractor.json', + ); + + const templateExtractorJson = await readJsonWithSchema( + extractorJsonPath, + extractorConfigSchema, + ); + + const templatePath = Object.keys(templateExtractorJson.templates).find( + (templatePath) => generator.templates[templatePath].name === templateName, + ); + + if (!templatePath) { + throw new Error( + `Template '${templateName}' not found in generator '${generatorName}'`, + ); + } + + const updatedTemplates = templateExtractorJson.templates; + // eslint-disable-next-line @typescript-eslint/no-dynamic-delete -- easiest way of deleting without reordering the keys + delete updatedTemplates[templatePath]; + + // Write the updated configuration back to the extractor.json file + + await fs.writeFile( + extractorJsonPath, + stringifyPrettyCompact(templateExtractorJson), + 'utf8', + ); + + // Clean up the actual template file if it exists + const templateFilePath = path.join( + generator.generatorDirectory, + 'templates', + templatePath, + ); + await fs.unlink(templateFilePath).catch(handleFileNotFoundError); +} diff --git a/packages/project-builder-server/src/template-extractor/discover-generators.ts b/packages/project-builder-server/src/template-extractor/discover-generators.ts new file mode 100644 index 000000000..b7dcaf6ad --- /dev/null +++ b/packages/project-builder-server/src/template-extractor/discover-generators.ts @@ -0,0 +1,95 @@ +import type { PluginMetadataWithPaths } from '@baseplate-dev/project-builder-lib'; +import type { Logger, TemplateConfig } from '@baseplate-dev/sync'; + +import { indexTemplateConfigs } from '@baseplate-dev/sync'; +import { findNearestPackageJson } from '@baseplate-dev/utils/node'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +import { discoverPlugins } from '#src/plugins/plugin-discovery.js'; + +const GENERATOR_PACKAGES = [ + '@baseplate-dev/core-generators', + '@baseplate-dev/fastify-generators', + '@baseplate-dev/react-generators', +]; + +export interface GeneratorInfo { + name: string; + packageName: string; + packagePath: string; + generatorDirectory: string; + templates: Record; + templateCount: number; +} + +/** + * Build a map of generator package names to their file system paths + */ +export async function buildGeneratorPackageMap( + availablePlugins: PluginMetadataWithPaths[], +): Promise> { + const generatorPackageMap = new Map(); + + for (const plugin of availablePlugins) { + const nearestPackageJsonPath = await findNearestPackageJson({ + cwd: plugin.pluginDirectory, + stopAtNodeModules: true, + }); + if (!nearestPackageJsonPath) { + throw new Error(`Could not find package.json for ${plugin.packageName}`); + } + generatorPackageMap.set( + plugin.packageName, + path.dirname(nearestPackageJsonPath), + ); + } + + // Attach built-in generator packages + for (const packageName of GENERATOR_PACKAGES) { + const nearestPackageJsonPath = await findNearestPackageJson({ + cwd: path.dirname(fileURLToPath(import.meta.resolve(packageName))), + stopAtNodeModules: true, + }); + if (!nearestPackageJsonPath) { + throw new Error(`Could not find package.json for ${packageName}`); + } + generatorPackageMap.set(packageName, path.dirname(nearestPackageJsonPath)); + } + + return generatorPackageMap; +} + +/** + * Discover all available generators with extractor.json files + */ +export async function discoverGenerators( + directory = '.', + defaultPlugins: PluginMetadataWithPaths[], + logger: Logger, +): Promise { + const availablePlugins = await discoverPlugins(directory, logger); + + const generatorPackageMap = await buildGeneratorPackageMap([ + ...defaultPlugins, + ...availablePlugins, + ]); + + // Index all template configs using the unified utility + const { extractorEntries } = await indexTemplateConfigs(generatorPackageMap); + + // Convert to GeneratorInfo format + const generators: GeneratorInfo[] = extractorEntries.map((entry) => ({ + name: entry.generatorName, + packageName: entry.packageName, + packagePath: entry.packagePath, + generatorDirectory: entry.generatorDirectory, + templates: entry.config.templates, + templateCount: Object.keys(entry.config.templates).length, + })); + + // Sort generators by name for consistent output + generators.sort((a, b) => a.name.localeCompare(b.name)); + + return generators; +} diff --git a/packages/project-builder-server/src/template-extractor/index.ts b/packages/project-builder-server/src/template-extractor/index.ts index 42521a2d2..b12719bf4 100644 --- a/packages/project-builder-server/src/template-extractor/index.ts +++ b/packages/project-builder-server/src/template-extractor/index.ts @@ -1 +1,3 @@ +export * from './delete-template.js'; +export * from './discover-generators.js'; export * from './run-template-extractor.js'; diff --git a/packages/project-builder-server/src/template-extractor/run-template-extractor.ts b/packages/project-builder-server/src/template-extractor/run-template-extractor.ts index d33419529..a415a9854 100644 --- a/packages/project-builder-server/src/template-extractor/run-template-extractor.ts +++ b/packages/project-builder-server/src/template-extractor/run-template-extractor.ts @@ -10,19 +10,12 @@ import { TsTemplateFileExtractor, } from '@baseplate-dev/core-generators/extractors'; import { runTemplateFileExtractors } from '@baseplate-dev/sync'; -import { findNearestPackageJson } from '@baseplate-dev/utils/node'; -import path from 'node:path'; -import { fileURLToPath } from 'node:url'; import { discoverPlugins } from '#src/plugins/plugin-discovery.js'; import { getPreviousGeneratedFileIdMap } from '#src/sync/file-id-map.js'; import { readSyncMetadata } from '#src/sync/sync-metadata-service.js'; -const GENERATOR_PACKAGES = [ - '@baseplate-dev/core-generators', - '@baseplate-dev/fastify-generators', - '@baseplate-dev/react-generators', -]; +import { buildGeneratorPackageMap } from './discover-generators.js'; const TEMPLATE_EXTRACTORS = [ RawTemplateFileExtractor, @@ -30,37 +23,6 @@ const TEMPLATE_EXTRACTORS = [ TsTemplateFileExtractor, ]; -async function buildGeneratorPackageMap( - availablePlugins: PluginMetadataWithPaths[], -): Promise> { - const generatorPackageMap = new Map(); - for (const plugin of availablePlugins) { - const nearestPackageJsonPath = await findNearestPackageJson({ - cwd: plugin.pluginDirectory, - stopAtNodeModules: true, - }); - if (!nearestPackageJsonPath) { - throw new Error(`Could not find package.json for ${plugin.packageName}`); - } - generatorPackageMap.set( - plugin.packageName, - path.dirname(nearestPackageJsonPath), - ); - } - // attach generator packages - for (const packageName of GENERATOR_PACKAGES) { - const nearestPackageJsonPath = await findNearestPackageJson({ - cwd: path.dirname(fileURLToPath(import.meta.resolve(packageName))), - stopAtNodeModules: true, - }); - if (!nearestPackageJsonPath) { - throw new Error(`Could not find package.json for ${packageName}`); - } - generatorPackageMap.set(packageName, path.dirname(nearestPackageJsonPath)); - } - return generatorPackageMap; -} - export async function runTemplateExtractorsForProject( directory: string, app: string, diff --git a/packages/project-builder-test/src/tests/simple.test.ts b/packages/project-builder-test/src/tests/simple.test.ts index 9d2b648b8..18016cc9f 100644 --- a/packages/project-builder-test/src/tests/simple.test.ts +++ b/packages/project-builder-test/src/tests/simple.test.ts @@ -31,7 +31,9 @@ export default { timeout: 60_000, }); await helpers.runCommand('pnpm lint'); - await helpers.runCommand('pnpm prettier:check'); + // Disabled because there's a mystery bug where it errors out on GitHub Actions but not locally + // Linear: kingston/eng-760-figure-out-why-github-action-prettiercheck-in-e2e-tests-is + // await helpers.runCommand('pnpm prettier:check'); await helpers.runCommand('pnpm build'); }, } satisfies ProjectBuilderTest; diff --git a/packages/react-generators/src/constants/react-packages.ts b/packages/react-generators/src/constants/react-packages.ts index ee6220111..f5537e4e7 100644 --- a/packages/react-generators/src/constants/react-packages.ts +++ b/packages/react-generators/src/constants/react-packages.ts @@ -14,24 +14,27 @@ export const REACT_PACKAGES = { loglevel: '1.9.1', // Tailwind - autoprefixer: '10.4.20', - tailwindcss: '3.4.11', - 'prettier-plugin-tailwindcss': '0.6.6', - '@tailwindcss/forms': '0.5.9', + '@tailwindcss/vite': '4.1.6', + tailwindcss: '4.1.6', + 'prettier-plugin-tailwindcss': '0.6.11', + 'tw-animate-css': '1.2.9', // Components '@headlessui/react': '2.2.2', '@hookform/resolvers': '5.0.1', clsx: '2.1.1', 'react-hook-form': '7.56.3', - 'react-hot-toast': '2.5.2', 'react-icons': '5.5.0', 'react-select': '5.10.1', zustand: '5.0.3', 'react-error-boundary': '6.0.0', + 'radix-ui': '1.4.2', + 'class-variance-authority': '0.7.1', + cmdk: '1.1.1', + sonner: '2.0.3', // Date Picker - 'react-datepicker': '8.3.0', + 'react-day-picker': '9.7.0', 'date-fns': '4.1.0', // GraphQL diff --git a/packages/react-generators/src/generators/admin/admin-components/admin-components.generator.ts b/packages/react-generators/src/generators/admin/admin-components/admin-components.generator.ts index 9e6ab64aa..3600168d5 100644 --- a/packages/react-generators/src/generators/admin/admin-components/admin-components.generator.ts +++ b/packages/react-generators/src/generators/admin/admin-components/admin-components.generator.ts @@ -34,11 +34,18 @@ export const adminComponentsGenerator = createGenerator({ paths: ADMIN_ADMIN_COMPONENTS_GENERATED.paths.provider, }, run({ reactComponents, reactComponentsImports, typescriptFile, paths }) { - reactComponents.registerComponent({ name: 'EmbeddedListInput' }); reactComponents.registerComponent({ - name: 'EmbeddedObjectInput', + name: 'embedded-list-input', + }); + reactComponents.registerComponent({ + name: 'embedded-object-input', + }); + reactComponents.registerComponent({ + name: 'embedded-list-field', + }); + reactComponents.registerComponent({ + name: 'embedded-object-field', }); - reactComponents.registerComponent({ name: 'DescriptionList' }); return { build: async (builder) => { diff --git a/packages/react-generators/src/generators/admin/admin-components/extractor.json b/packages/react-generators/src/generators/admin/admin-components/extractor.json index 6f50a74d2..7aa521746 100644 --- a/packages/react-generators/src/generators/admin/admin-components/extractor.json +++ b/packages/react-generators/src/generators/admin/admin-components/extractor.json @@ -1,18 +1,27 @@ { "name": "admin/admin-components", "templates": { - "src/components/DescriptionList/index.tsx": { - "name": "description-list", + "src/components/embedded-list-field/embedded-list-field.tsx": { + "name": "embedded-list-field", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#admin/admin-components", "group": "components", - "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/DescriptionList/index.tsx", - "projectExports": { "DescriptionList": { "exportedAs": "default" } }, + "importMapProviders": { + "reactComponentsImportsProvider": { + "importName": "reactComponentsImportsProvider", + "packagePathSpecifier": "@baseplate-dev/react-generators:src/generators/core/react-components/generated/ts-import-providers.ts" + } + }, + "pathRootRelativePath": "{src-root}/components/embedded-list-field/embedded-list-field.tsx", + "projectExports": { + "EmbeddedListField": {}, + "EmbeddedListFieldController": {}, + "EmbeddedListFieldProps": { "isTypeOnly": true } + }, "variables": {} }, - "src/components/EmbeddedListInput/index.tsx": { + "src/components/embedded-list-input/embedded-list-input.tsx": { "name": "embedded-list-input", "type": "ts", "fileOptions": { "kind": "singleton" }, @@ -24,15 +33,35 @@ "packagePathSpecifier": "@baseplate-dev/react-generators:src/generators/core/react-components/generated/ts-import-providers.ts" } }, - "pathRootRelativePath": "{src-root}/components/EmbeddedListInput/index.tsx", + "pathRootRelativePath": "{src-root}/components/embedded-list-input/embedded-list-input.tsx", "projectExports": { "EmbeddedListFormProps": { "isTypeOnly": true }, - "EmbeddedListInput": { "exportedAs": "default" }, + "EmbeddedListInput": {}, "EmbeddedListTableProps": { "isTypeOnly": true } }, "variables": {} }, - "src/components/EmbeddedObjectInput/index.tsx": { + "src/components/embedded-object-field/embedded-object-field.tsx": { + "name": "embedded-object-field", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#admin/admin-components", + "group": "components", + "importMapProviders": { + "reactComponentsImportsProvider": { + "importName": "reactComponentsImportsProvider", + "packagePathSpecifier": "@baseplate-dev/react-generators:src/generators/core/react-components/generated/ts-import-providers.ts" + } + }, + "pathRootRelativePath": "{src-root}/components/embedded-object-field/embedded-object-field.tsx", + "projectExports": { + "EmbeddedObjectField": {}, + "EmbeddedObjectFieldController": {}, + "EmbeddedObjectFieldProps": { "isTypeOnly": true } + }, + "variables": {} + }, + "src/components/embedded-object-input/embedded-object-input.tsx": { "name": "embedded-object-input", "type": "ts", "fileOptions": { "kind": "singleton" }, @@ -44,10 +73,10 @@ "packagePathSpecifier": "@baseplate-dev/react-generators:src/generators/core/react-components/generated/ts-import-providers.ts" } }, - "pathRootRelativePath": "{src-root}/components/EmbeddedObjectInput/index.tsx", + "pathRootRelativePath": "{src-root}/components/embedded-object-input/embedded-object-input.tsx", "projectExports": { "EmbeddedObjectFormProps": { "isTypeOnly": true }, - "EmbeddedObjectInput": { "exportedAs": "default" } + "EmbeddedObjectInput": {} }, "variables": {} } diff --git a/packages/react-generators/src/generators/admin/admin-components/generated/template-paths.ts b/packages/react-generators/src/generators/admin/admin-components/generated/template-paths.ts index 41118624e..6396971f1 100644 --- a/packages/react-generators/src/generators/admin/admin-components/generated/template-paths.ts +++ b/packages/react-generators/src/generators/admin/admin-components/generated/template-paths.ts @@ -2,8 +2,9 @@ import { packageInfoProvider } from '@baseplate-dev/core-generators'; import { createGeneratorTask, createProviderType } from '@baseplate-dev/sync'; export interface AdminAdminComponentsPaths { - descriptionList: string; + embeddedListField: string; embeddedListInput: string; + embeddedObjectField: string; embeddedObjectInput: string; } @@ -20,9 +21,10 @@ const adminAdminComponentsPathsTask = createGeneratorTask({ return { providers: { adminAdminComponentsPaths: { - descriptionList: `${srcRoot}/components/DescriptionList/index.tsx`, - embeddedListInput: `${srcRoot}/components/EmbeddedListInput/index.tsx`, - embeddedObjectInput: `${srcRoot}/components/EmbeddedObjectInput/index.tsx`, + embeddedListField: `${srcRoot}/components/embedded-list-field/embedded-list-field.tsx`, + embeddedListInput: `${srcRoot}/components/embedded-list-input/embedded-list-input.tsx`, + embeddedObjectField: `${srcRoot}/components/embedded-object-field/embedded-object-field.tsx`, + embeddedObjectInput: `${srcRoot}/components/embedded-object-input/embedded-object-input.tsx`, }, }, }; diff --git a/packages/react-generators/src/generators/admin/admin-components/generated/ts-import-providers.ts b/packages/react-generators/src/generators/admin/admin-components/generated/ts-import-providers.ts index 611adf8a6..b7e7708be 100644 --- a/packages/react-generators/src/generators/admin/admin-components/generated/ts-import-providers.ts +++ b/packages/react-generators/src/generators/admin/admin-components/generated/ts-import-providers.ts @@ -13,12 +13,17 @@ import { import { ADMIN_ADMIN_COMPONENTS_PATHS } from './template-paths.js'; const adminComponentsImportsSchema = createTsImportMapSchema({ - DescriptionList: { exportedAs: 'default' }, + EmbeddedListField: {}, + EmbeddedListFieldController: {}, + EmbeddedListFieldProps: { isTypeOnly: true }, EmbeddedListFormProps: { isTypeOnly: true }, - EmbeddedListInput: { exportedAs: 'default' }, + EmbeddedListInput: {}, EmbeddedListTableProps: { isTypeOnly: true }, + EmbeddedObjectField: {}, + EmbeddedObjectFieldController: {}, + EmbeddedObjectFieldProps: { isTypeOnly: true }, EmbeddedObjectFormProps: { isTypeOnly: true }, - EmbeddedObjectInput: { exportedAs: 'default' }, + EmbeddedObjectInput: {}, }); export type AdminComponentsImportsProvider = TsImportMapProviderFromSchema< @@ -43,10 +48,15 @@ const adminAdminComponentsImportsTask = createGeneratorTask({ adminComponentsImports: createTsImportMap( adminComponentsImportsSchema, { - DescriptionList: paths.descriptionList, + EmbeddedListField: paths.embeddedListField, + EmbeddedListFieldController: paths.embeddedListField, + EmbeddedListFieldProps: paths.embeddedListField, EmbeddedListFormProps: paths.embeddedListInput, EmbeddedListInput: paths.embeddedListInput, EmbeddedListTableProps: paths.embeddedListInput, + EmbeddedObjectField: paths.embeddedObjectField, + EmbeddedObjectFieldController: paths.embeddedObjectField, + EmbeddedObjectFieldProps: paths.embeddedObjectField, EmbeddedObjectFormProps: paths.embeddedObjectInput, EmbeddedObjectInput: paths.embeddedObjectInput, }, diff --git a/packages/react-generators/src/generators/admin/admin-components/generated/typed-templates.ts b/packages/react-generators/src/generators/admin/admin-components/generated/typed-templates.ts index 1eadd1805..bded92e63 100644 --- a/packages/react-generators/src/generators/admin/admin-components/generated/typed-templates.ts +++ b/packages/react-generators/src/generators/admin/admin-components/generated/typed-templates.ts @@ -3,16 +3,22 @@ import path from 'node:path'; import { reactComponentsImportsProvider } from '#src/generators/core/react-components/generated/ts-import-providers.js'; -const descriptionList = createTsTemplateFile({ +const embeddedListField = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', - importMapProviders: {}, - name: 'description-list', - projectExports: { DescriptionList: { exportedAs: 'default' } }, + importMapProviders: { + reactComponentsImports: reactComponentsImportsProvider, + }, + name: 'embedded-list-field', + projectExports: { + EmbeddedListField: {}, + EmbeddedListFieldController: {}, + EmbeddedListFieldProps: { isTypeOnly: true }, + }, source: { path: path.join( import.meta.dirname, - '../templates/src/components/DescriptionList/index.tsx', + '../templates/src/components/embedded-list-field/embedded-list-field.tsx', ), }, variables: {}, @@ -27,13 +33,34 @@ const embeddedListInput = createTsTemplateFile({ name: 'embedded-list-input', projectExports: { EmbeddedListFormProps: { isTypeOnly: true }, - EmbeddedListInput: { exportedAs: 'default' }, + EmbeddedListInput: {}, EmbeddedListTableProps: { isTypeOnly: true }, }, source: { path: path.join( import.meta.dirname, - '../templates/src/components/EmbeddedListInput/index.tsx', + '../templates/src/components/embedded-list-input/embedded-list-input.tsx', + ), + }, + variables: {}, +}); + +const embeddedObjectField = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: { + reactComponentsImports: reactComponentsImportsProvider, + }, + name: 'embedded-object-field', + projectExports: { + EmbeddedObjectField: {}, + EmbeddedObjectFieldController: {}, + EmbeddedObjectFieldProps: { isTypeOnly: true }, + }, + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/embedded-object-field/embedded-object-field.tsx', ), }, variables: {}, @@ -48,20 +75,21 @@ const embeddedObjectInput = createTsTemplateFile({ name: 'embedded-object-input', projectExports: { EmbeddedObjectFormProps: { isTypeOnly: true }, - EmbeddedObjectInput: { exportedAs: 'default' }, + EmbeddedObjectInput: {}, }, source: { path: path.join( import.meta.dirname, - '../templates/src/components/EmbeddedObjectInput/index.tsx', + '../templates/src/components/embedded-object-input/embedded-object-input.tsx', ), }, variables: {}, }); export const componentsGroup = { - descriptionList, + embeddedListField, embeddedListInput, + embeddedObjectField, embeddedObjectInput, }; diff --git a/packages/react-generators/src/generators/admin/admin-components/templates/src/components/DescriptionList/index.tsx b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/DescriptionList/index.tsx deleted file mode 100644 index 381dcc8f2..000000000 --- a/packages/react-generators/src/generators/admin/admin-components/templates/src/components/DescriptionList/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; - -// adapted from https://flowbite.com/docs/typography/lists/#description-list - -interface Props { - className?: string; - children?: React.ReactNode; -} - -function DescriptionList({ className, children }: Props): ReactElement { - return ( -
- {children} -
- ); -} - -interface DescriptionListItemProps { - children: React.ReactNode; - label: string | React.ReactNode; -} - -DescriptionList.Item = function DescriptionListItem({ - children, - label, -}: DescriptionListItemProps): ReactElement { - return ( - <> -
- {label} -
-
- {children} -
- - ); -}; - -export default DescriptionList; diff --git a/packages/react-generators/src/generators/admin/admin-components/templates/src/components/EmbeddedListInput/index.tsx b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/EmbeddedListInput/index.tsx deleted file mode 100644 index 557f364a9..000000000 --- a/packages/react-generators/src/generators/admin/admin-components/templates/src/components/EmbeddedListInput/index.tsx +++ /dev/null @@ -1,213 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; -import type { - Control, - DefaultValues, - FieldPath, - FieldPathValue, - FieldValues, -} from 'react-hook-form'; - -import { - Alert, - Button, - FormError, - FormLabel, - Modal, -} from '%reactComponentsImports'; -import clsx from 'clsx'; -import { nanoid } from 'nanoid'; -import { useMemo, useState } from 'react'; -import { useController } from 'react-hook-form'; - -export interface EmbeddedListTableProps { - items: (InputType & { id: string })[]; - edit: (index: number) => void; - remove: (index: number) => void; -} - -export interface EmbeddedListFormProps { - initialData?: DefaultValues; - onSubmit: (data: InputType) => void; -} - -interface Props { - className?: string; - onChange: (value: InputType[]) => void; - renderTable: (tableProps: EmbeddedListTableProps) => ReactElement; - renderForm: (formProps: EmbeddedListFormProps) => ReactElement; - value: InputType[] | null | undefined; - itemName?: string; - defaultValue?: DefaultValues; -} - -function EmbeddedListInput({ - className, - onChange, - renderTable, - renderForm, - value, - itemName, - defaultValue = {} as DefaultValues, -}: Props): ReactElement { - const [valueToEdit, setValueToEdit] = useState< - { idx?: number; data: DefaultValues } | undefined - >(); - - const definedValue = value ?? []; - - const handleSubmit = (data: InputType): void => { - if (valueToEdit?.idx === undefined) { - onChange([...definedValue, data]); - } else { - onChange( - definedValue.map((item, idx) => - idx === valueToEdit.idx ? data : item, - ), - ); - } - setValueToEdit(undefined); - }; - - // TODO: Improve with better ID tracking - // We don't have a good way of making sure each row has a unique key - // so since we rarely update items, we just re-assign a random ID every time - // the values change - const valueWithIds = useMemo( - () => (value ?? []).map((item) => ({ id: nanoid(), ...item })), - [value], - ); - - return ( -
- - {definedValue.length > 0 ? ( - renderTable({ - items: valueWithIds, - edit: (idx) => { - setValueToEdit({ - idx, - data: definedValue[idx] as DefaultValues, - }); - }, - remove: (idx) => { - onChange(definedValue.filter((_, i) => i !== idx)); - }, - }) - ) : ( - No items currently - )} - { - setValueToEdit(undefined); - }} - width="large" - > - { - setValueToEdit(undefined); - }} - > - Edit {itemName ?? 'Item'} - - - {renderForm({ - initialData: valueToEdit?.data, - onSubmit: handleSubmit, - })} - - -
- ); -} - -interface EmbeddedListInputLabelledProps extends Props { - label?: React.ReactNode; - error?: React.ReactNode; -} - -EmbeddedListInput.Labelled = function EmbeddedOneToOneInputLabelled({ - label, - className, - error, - ...rest -}: EmbeddedListInputLabelledProps): ReactElement { - return ( -
-
- {label && {label}} - - {error && {error}} -
-
- ); -}; - -interface EmbeddedListInputLabelledControllerProps< - FormType extends FieldValues, - FormPath extends FieldPath, -> extends Omit< - EmbeddedListInputLabelledProps< - Exclude< - FieldPathValue, - undefined | null - > extends (infer InputType)[] - ? InputType - : never - >, - 'onChange' | 'value' | 'error' - > { - className?: string; - control: Control; - name: FormPath; -} - -EmbeddedListInput.LabelledController = - function EmbeddedListInputLabelledController< - FormType extends FieldValues, - FormPath extends FieldPath, - >({ - control, - name, - ...rest - }: EmbeddedListInputLabelledControllerProps< - FormType, - FormPath - >): ReactElement { - const { - field, - fieldState: { error }, - } = useController({ - name, - control, - }); - - return ( - { - field.onChange(value as FieldPathValue); - }} - value={ - field.value as (FieldPathValue< - FormType, - FormPath - > extends (infer InputType)[] - ? InputType - : never)[] - } - /> - ); - }; - -export default EmbeddedListInput; diff --git a/packages/react-generators/src/generators/admin/admin-components/templates/src/components/EmbeddedObjectInput/index.tsx b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/EmbeddedObjectInput/index.tsx deleted file mode 100644 index 44c87a026..000000000 --- a/packages/react-generators/src/generators/admin/admin-components/templates/src/components/EmbeddedObjectInput/index.tsx +++ /dev/null @@ -1,163 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; -import type { - Control, - DefaultValues, - FieldPath, - FieldPathValue, - FieldValues, -} from 'react-hook-form'; - -import { Button, FormError, FormLabel, Modal } from '%reactComponentsImports'; -import clsx from 'clsx'; -import { useState } from 'react'; -import { useController } from 'react-hook-form'; - -export interface EmbeddedObjectFormProps { - initialData?: DefaultValues>; - onSubmit: (data: InputType) => void; -} - -interface Props { - className?: string; - onChange: (value: InputType | null | undefined) => void; - renderForm: (options: EmbeddedObjectFormProps) => ReactElement; - value: InputType | null | undefined; - itemName?: string; - defaultValue?: DefaultValues; -} - -function EmbeddedObjectInput({ - className, - onChange, - renderForm, - value, - itemName, - defaultValue = {} as DefaultValues, -}: Props): ReactElement { - const [valueToEdit, setValueToEdit] = useState< - DefaultValues> | undefined - >(); - - const handleSubmit = (data: InputType): void => { - onChange(data); - setValueToEdit(undefined); - }; - - return ( -
- - {value && ( - - )} - { - setValueToEdit(undefined); - }} - width="large" - > - { - setValueToEdit(undefined); - }} - > - Edit {itemName ?? 'Item'} - - - {renderForm({ initialData: valueToEdit, onSubmit: handleSubmit })} - - -
- ); -} - -interface EmbeddedObjectInputLabelledProps extends Props { - label?: React.ReactNode; - error?: React.ReactNode; -} - -EmbeddedObjectInput.Labelled = function EmbeddedOneToOneInputLabelled< - InputType, ->({ - label, - className, - error, - ...rest -}: EmbeddedObjectInputLabelledProps): ReactElement { - return ( -
-
- {label && {label}} - - {error && {error}} -
-
- ); -}; - -interface EmbeddedObjectInputLabelledControllerProps< - FormType extends FieldValues, - FormPath extends FieldPath, -> extends Omit< - EmbeddedObjectInputLabelledProps>, - 'onChange' | 'value' | 'error' - > { - className?: string; - control: Control; - name: FormPath; -} - -EmbeddedObjectInput.LabelledController = - function EmbeddedObjectInputLabelledController< - FormType extends FieldValues, - FormPath extends FieldPath, - >({ - control, - name, - ...rest - }: EmbeddedObjectInputLabelledControllerProps< - FormType, - FormPath - >): ReactElement { - const { - field, - fieldState: { error }, - } = useController({ - name, - control, - }); - - return ( - { - field.onChange(value as FieldPathValue); - }} - value={field.value as FieldPathValue} - /> - ); - }; - -export default EmbeddedObjectInput; diff --git a/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-list-field/embedded-list-field.tsx b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-list-field/embedded-list-field.tsx new file mode 100644 index 000000000..cfa2edd78 --- /dev/null +++ b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-list-field/embedded-list-field.tsx @@ -0,0 +1,95 @@ +// @ts-nocheck + +import type { ReactElement } from 'react'; +import type { + Control, + FieldPath, + FieldPathValue, + FieldValues, +} from 'react-hook-form'; + +import { + FormControl, + FormItem, + FormLabel, + FormMessage, +} from '%reactComponentsImports'; +import { useController } from 'react-hook-form'; + +import type { EmbeddedListInputProps } from '../embedded-list-input/embedded-list-input.js'; + +import { EmbeddedListInput } from '../embedded-list-input/embedded-list-input.js'; + +export interface EmbeddedListFieldProps + extends EmbeddedListInputProps { + label?: React.ReactNode; +} + +export function EmbeddedListField({ + label, + ...rest +}: EmbeddedListFieldProps): ReactElement { + return ( + + {label && {label}} + + + + + + ); +} + +interface EmbeddedListFieldControllerProps< + TFieldValues extends FieldValues, + TName extends FieldPath, +> extends Omit< + EmbeddedListFieldProps< + Exclude< + FieldPathValue, + undefined | null + > extends (infer InputType)[] + ? InputType + : never + >, + 'onChange' | 'value' | 'error' + > { + control: Control; + name: TName; +} + +export function EmbeddedListFieldController< + TFieldValues extends FieldValues, + TName extends FieldPath, +>({ + control, + name, + ...rest +}: EmbeddedListFieldControllerProps): ReactElement { + const { + field, + fieldState: { error }, + } = useController({ + name, + control, + }); + + return ( + + { + field.onChange(value as FieldPathValue); + }} + value={ + field.value as (FieldPathValue< + TFieldValues, + TName + > extends (infer InputType)[] + ? InputType + : never)[] + } + /> + + ); +} diff --git a/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-list-input/embedded-list-input.tsx b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-list-input/embedded-list-input.tsx new file mode 100644 index 000000000..6ed06bbbd --- /dev/null +++ b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-list-input/embedded-list-input.tsx @@ -0,0 +1,124 @@ +// @ts-nocheck + +import type { ReactElement } from 'react'; +import type { DefaultValues } from 'react-hook-form'; + +import { + Alert, + Button, + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '%reactComponentsImports'; +import { nanoid } from 'nanoid'; +import { useMemo, useState } from 'react'; + +export interface EmbeddedListTableProps { + items: (T & { id: string })[]; + edit: (index: number) => void; + remove: (index: number) => void; +} + +export interface EmbeddedListFormProps { + initialData?: DefaultValues; + onSubmit: (data: T) => void; +} + +export interface EmbeddedListInputProps { + className?: string; + onChange: (value: T[]) => void; + renderTable: (tableProps: EmbeddedListTableProps) => ReactElement; + renderForm: (formProps: EmbeddedListFormProps) => ReactElement; + value: T[] | null | undefined; + itemName?: string; + defaultValue?: DefaultValues; +} + +export function EmbeddedListInput({ + className, + onChange, + renderTable, + renderForm, + value, + itemName, + defaultValue = {} as DefaultValues, +}: EmbeddedListInputProps): ReactElement { + const [valueToEdit, setValueToEdit] = useState< + { idx?: number; data: DefaultValues } | undefined + >(); + + const definedValue = value ?? []; + + const handleSubmit = (data: T): void => { + if (valueToEdit?.idx === undefined) { + onChange([...definedValue, data]); + } else { + onChange( + definedValue.map((item, idx) => + idx === valueToEdit.idx ? data : item, + ), + ); + } + setValueToEdit(undefined); + }; + + // TODO: Improve with better ID tracking + // We don't have a good way of making sure each row has a unique key + // so since we rarely update items, we just re-assign a random ID every time + // the values change + const valueWithIds = useMemo( + () => (value ?? []).map((item) => ({ id: nanoid(), ...item })), + [value], + ); + + return ( + { + if (!open) { + setValueToEdit(undefined); + } + }} + > +
+ + + + {definedValue.length > 0 ? ( + renderTable({ + items: valueWithIds, + edit: (idx) => { + setValueToEdit({ + idx, + data: definedValue[idx] as DefaultValues, + }); + }, + remove: (idx) => { + onChange(definedValue.filter((_, i) => i !== idx)); + }, + }) + ) : ( + No items currently + )} + + + Edit {itemName ?? 'Item'} + + {renderForm({ + initialData: valueToEdit?.data, + onSubmit: handleSubmit, + })} + +
+ + ); +} diff --git a/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-object-field/embedded-object-field.tsx b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-object-field/embedded-object-field.tsx new file mode 100644 index 000000000..827732d67 --- /dev/null +++ b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-object-field/embedded-object-field.tsx @@ -0,0 +1,81 @@ +// @ts-nocheck + +import type { ReactElement } from 'react'; +import type { + Control, + FieldPath, + FieldPathValue, + FieldValues, +} from 'react-hook-form'; + +import { + FormControl, + FormItem, + FormLabel, + FormMessage, +} from '%reactComponentsImports'; +import { useController } from 'react-hook-form'; + +import type { EmbeddedObjectInputProps } from '../embedded-object-input/embedded-object-input.js'; + +import { EmbeddedObjectInput } from '../embedded-object-input/embedded-object-input.js'; + +export interface EmbeddedObjectFieldProps + extends EmbeddedObjectInputProps { + label?: React.ReactNode; +} + +export function EmbeddedObjectField({ + label, + ...rest +}: EmbeddedObjectFieldProps): ReactElement { + return ( + + {label && {label}} + + + + + + ); +} + +interface EmbeddedObjectFieldControllerProps< + TFieldValues extends FieldValues, + TName extends FieldPath, +> extends Omit< + EmbeddedObjectFieldProps>, + 'onChange' | 'value' | 'error' + > { + control: Control; + name: TName; +} + +export function EmbeddedObjectFieldController< + TFieldValues extends FieldValues, + TName extends FieldPath, +>({ + control, + name, + ...rest +}: EmbeddedObjectFieldControllerProps): ReactElement { + const { + field, + fieldState: { error }, + } = useController({ + name, + control, + }); + + return ( + + { + field.onChange(value as FieldPathValue); + }} + value={field.value as FieldPathValue} + /> + + ); +} diff --git a/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-object-input/embedded-object-input.tsx b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-object-input/embedded-object-input.tsx new file mode 100644 index 000000000..1f035ffca --- /dev/null +++ b/packages/react-generators/src/generators/admin/admin-components/templates/src/components/embedded-object-input/embedded-object-input.tsx @@ -0,0 +1,91 @@ +// @ts-nocheck + +import type { ReactElement } from 'react'; +import type { DefaultValues } from 'react-hook-form'; + +import { + Button, + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '%reactComponentsImports'; +import { useState } from 'react'; + +export interface EmbeddedObjectFormProps { + initialData?: DefaultValues>; + onSubmit: (data: T) => void; +} + +export interface EmbeddedObjectInputProps { + className?: string; + onChange: (value: T | null | undefined) => void; + renderForm: (options: EmbeddedObjectFormProps) => ReactElement; + value: T | null | undefined; + itemName?: string; + defaultValue?: DefaultValues; +} + +export function EmbeddedObjectInput({ + className, + onChange, + renderForm, + value, + itemName, + defaultValue = {} as DefaultValues, +}: EmbeddedObjectInputProps): ReactElement { + const [valueToEdit, setValueToEdit] = useState< + DefaultValues> | undefined + >(); + + const handleSubmit = (data: T): void => { + onChange(data); + setValueToEdit(undefined); + }; + + return ( + { + if (!open) { + setValueToEdit(undefined); + } + }} + > +
+ + + + {value && ( + + )} + + + Edit {itemName ?? 'Item'} + + {renderForm({ initialData: valueToEdit, onSubmit: handleSubmit })} + +
+ + ); +} diff --git a/packages/react-generators/src/generators/admin/admin-crud-edit/admin-crud-edit.generator.ts b/packages/react-generators/src/generators/admin/admin-crud-edit/admin-crud-edit.generator.ts index 38ce24022..d369680e3 100644 --- a/packages/react-generators/src/generators/admin/admin-crud-edit/admin-crud-edit.generator.ts +++ b/packages/react-generators/src/generators/admin/admin-crud-edit/admin-crud-edit.generator.ts @@ -250,9 +250,6 @@ export const adminCrudEditGenerator = createGenerator({ TPL_DATA_LOADER: createLoaderOutput.loader, TPL_DATA_GATE: createLoaderOutput.gate, }, - importMapProviders: { - reactComponentsImports, - }, }), ); @@ -305,9 +302,6 @@ export const adminCrudEditGenerator = createGenerator({ TPL_DATA_LOADER: editPageLoaderOutput.loader, TPL_DATA_GATE: editPageLoaderOutput.gate, }, - importMapProviders: { - reactComponentsImports, - }, }), ); }, diff --git a/packages/react-generators/src/generators/admin/admin-crud-edit/extractor.json b/packages/react-generators/src/generators/admin/admin-crud-edit/extractor.json index d12f7090e..116694521 100644 --- a/packages/react-generators/src/generators/admin/admin-crud-edit/extractor.json +++ b/packages/react-generators/src/generators/admin/admin-crud-edit/extractor.json @@ -9,12 +9,7 @@ "kind": "instance" }, "generator": "@baseplate-dev/react-generators#admin/admin-crud-edit", - "importMapProviders": { - "reactComponentsImportsProvider": { - "importName": "reactComponentsImportsProvider", - "packagePathSpecifier": "@baseplate-dev/react-generators:src/generators/core/react-components/generated/ts-import-providers.ts" - } - }, + "importMapProviders": {}, "variables": { "TPL_COMPONENT_NAME": {}, "TPL_CREATE_MUTATION": {}, @@ -35,12 +30,7 @@ "kind": "instance" }, "generator": "@baseplate-dev/react-generators#admin/admin-crud-edit", - "importMapProviders": { - "reactComponentsImportsProvider": { - "importName": "reactComponentsImportsProvider", - "packagePathSpecifier": "@baseplate-dev/react-generators:src/generators/core/react-components/generated/ts-import-providers.ts" - } - }, + "importMapProviders": {}, "variables": { "TPL_COMPONENT_NAME": {}, "TPL_DATA_GATE": {}, diff --git a/packages/react-generators/src/generators/admin/admin-crud-edit/generated/typed-templates.ts b/packages/react-generators/src/generators/admin/admin-crud-edit/generated/typed-templates.ts index c771f0f58..82bb6d2ff 100644 --- a/packages/react-generators/src/generators/admin/admin-crud-edit/generated/typed-templates.ts +++ b/packages/react-generators/src/generators/admin/admin-crud-edit/generated/typed-templates.ts @@ -6,9 +6,7 @@ import { reactErrorImportsProvider } from '#src/generators/core/react-error/gene const createPage = createTsTemplateFile({ fileOptions: { generatorTemplatePath: 'create.page.tsx', kind: 'instance' }, - importMapProviders: { - reactComponentsImports: reactComponentsImportsProvider, - }, + importMapProviders: {}, name: 'create-page', source: { path: path.join(import.meta.dirname, '../templates/create.page.tsx'), @@ -49,9 +47,7 @@ const editForm = createTsTemplateFile({ const editPage = createTsTemplateFile({ fileOptions: { generatorTemplatePath: 'edit.page.tsx', kind: 'instance' }, - importMapProviders: { - reactComponentsImports: reactComponentsImportsProvider, - }, + importMapProviders: {}, name: 'edit-page', source: { path: path.join(import.meta.dirname, '../templates/edit.page.tsx'), diff --git a/packages/react-generators/src/generators/admin/admin-crud-edit/templates/EditForm.tsx b/packages/react-generators/src/generators/admin/admin-crud-edit/templates/EditForm.tsx index 941d6dfe5..91b53fe72 100644 --- a/packages/react-generators/src/generators/admin/admin-crud-edit/templates/EditForm.tsx +++ b/packages/react-generators/src/generators/admin/admin-crud-edit/templates/EditForm.tsx @@ -39,7 +39,7 @@ function TPL_COMPONENT_NAME(TPL_DESTRUCTURED_PROPS: Props): ReactElement { return (
- + {status && {status.message}} diff --git a/packages/react-generators/src/generators/admin/admin-crud-embedded-input/admin-crud-embedded-input.generator.ts b/packages/react-generators/src/generators/admin/admin-crud-embedded-input/admin-crud-embedded-input.generator.ts index e82420e02..8485db702 100644 --- a/packages/react-generators/src/generators/admin/admin-crud-embedded-input/admin-crud-embedded-input.generator.ts +++ b/packages/react-generators/src/generators/admin/admin-crud-embedded-input/admin-crud-embedded-input.generator.ts @@ -67,7 +67,7 @@ export const adminCrudEmbeddedInputGenerator = createGenerator({ const content = formInfo.type === 'object' ? TsCodeUtils.formatFragment( - ``, - reactComponentsImports.SelectInput.declaration(), + reactComponentsImports.SelectFieldController.declaration(), { hoistedFragments: [ tsHoistedFragment( diff --git a/packages/react-generators/src/generators/admin/admin-crud-foreign-input/admin-crud-foreign-input.generator.ts b/packages/react-generators/src/generators/admin/admin-crud-foreign-input/admin-crud-foreign-input.generator.ts index 15ec5935e..809fe8098 100644 --- a/packages/react-generators/src/generators/admin/admin-crud-foreign-input/admin-crud-foreign-input.generator.ts +++ b/packages/react-generators/src/generators/admin/admin-crud-foreign-input/admin-crud-foreign-input.generator.ts @@ -73,14 +73,13 @@ export const adminCrudForeignInputGenerator = createGenerator({ adminCrudInputContainer.addInput({ order, content: tsCodeFragment( - ``, - reactComponentsImports.ReactSelectInput.declaration(), + reactComponentsImports.ComboboxFieldController.declaration(), ), graphQLFields: [{ name: localField }], validation: [ diff --git a/packages/react-generators/src/generators/admin/admin-crud-list/admin-crud-list.generator.ts b/packages/react-generators/src/generators/admin/admin-crud-list/admin-crud-list.generator.ts index 0bd22f79f..242132864 100644 --- a/packages/react-generators/src/generators/admin/admin-crud-list/admin-crud-list.generator.ts +++ b/packages/react-generators/src/generators/admin/admin-crud-list/admin-crud-list.generator.ts @@ -5,6 +5,7 @@ import { TsCodeUtils, tsImportBuilder, tsTemplate, + tsTemplateWithImports, typescriptFileProvider, } from '@baseplate-dev/core-generators'; import { createGenerator, createGeneratorTask } from '@baseplate-dev/sync'; @@ -172,14 +173,17 @@ export const adminCrudListGenerator = createGenerator({ element: createRouteElement(listPageComponentName, listPagePath), }); - const headers = sortedColumns.map((column) => - tsCodeFragment( - `${column.label}`, - ), + const headers = sortedColumns.map( + (column) => + tsTemplateWithImports( + reactComponentsImports.TableHead.declaration(), + )`${column.label}`, ); const cells = sortedColumns.map( (column) => - tsTemplate`${column.display.content('item')}`, + tsTemplateWithImports( + reactComponentsImports.TableCell.declaration(), + )`${column.display.content('item')}`, ); await builder.apply( typescriptFile.renderTemplateFile({ diff --git a/packages/react-generators/src/generators/admin/admin-crud-list/templates/Table.tsx b/packages/react-generators/src/generators/admin/admin-crud-list/templates/Table.tsx index ff32b905b..c3e84a09b 100644 --- a/packages/react-generators/src/generators/admin/admin-crud-list/templates/Table.tsx +++ b/packages/react-generators/src/generators/admin/admin-crud-list/templates/Table.tsx @@ -4,13 +4,17 @@ import type { ReactElement } from 'react'; import { Alert, - LinkButton, + Button, Table, + TableBody, + TableCell, + TableHeader, + TableRow, useConfirmDialog, - useToast, } from '%reactComponentsImports'; import { logAndFormatError } from '%reactErrorImports'; import { Link } from 'react-router-dom'; +import { toast } from 'sonner'; interface Props { items: TPL_ROW_FRAGMENT[]; @@ -20,7 +24,6 @@ interface Props { function TPL_COMPONENT_NAME(TPL_DESTRUCTURED_PROPS: Props): ReactElement { const { requestConfirm } = useConfirmDialog(); - const toast = useToast(); function handleDelete(item: TPL_ROW_FRAGMENT): void { requestConfirm({ title: 'Delete Item', @@ -40,36 +43,44 @@ function TPL_COMPONENT_NAME(TPL_DESTRUCTURED_PROPS: Props): ReactElement { } if (items.length === 0) { - return No TPL_PLURAL_MODEL found.; + return ( + + No found. + + ); } return ( - - + + - Actions - - - + Actions + + + {items.map((item) => ( - + - - Show - Edit - + + + + + + ))} - +
); } diff --git a/packages/react-generators/src/generators/admin/admin-crud-password-input/admin-crud-password-input.generator.ts b/packages/react-generators/src/generators/admin/admin-crud-password-input/admin-crud-password-input.generator.ts index 33157289f..96c3ec8f5 100644 --- a/packages/react-generators/src/generators/admin/admin-crud-password-input/admin-crud-password-input.generator.ts +++ b/packages/react-generators/src/generators/admin/admin-crud-password-input/admin-crud-password-input.generator.ts @@ -27,7 +27,7 @@ export const adminCrudPasswordInputGenerator = createGenerator({ adminCrudInputContainer.addInput({ order, content: TsCodeUtils.mergeFragmentsAsJsxElement( - 'TextInput.LabelledController', + 'InputFieldController', { label, control: tsCodeFragment('control'), @@ -37,7 +37,7 @@ export const adminCrudPasswordInputGenerator = createGenerator({ '{ setValueAs: (val: string) => val === "" ? undefined : val }', ), }, - reactComponentsImports.TextInput.declaration(), + reactComponentsImports.InputFieldController.declaration(), ), graphQLFields: [], validation: [ diff --git a/packages/react-generators/src/generators/admin/admin-crud-text-input/admin-crud-text-input.generator.ts b/packages/react-generators/src/generators/admin/admin-crud-text-input/admin-crud-text-input.generator.ts index 0dc687f4a..6fb66164c 100644 --- a/packages/react-generators/src/generators/admin/admin-crud-text-input/admin-crud-text-input.generator.ts +++ b/packages/react-generators/src/generators/admin/admin-crud-text-input/admin-crud-text-input.generator.ts @@ -22,10 +22,10 @@ const INPUT_TYPE_MAP: Record< TextInputType, keyof ReactComponentsImportsProvider > = { - checked: 'CheckedInput', - date: 'ReactDatePickerInput', - dateTime: 'ReactDatePickerInput', - text: 'TextInput', + checked: 'CheckboxFieldController', + date: 'DatePickerFieldController', + dateTime: 'DateTimePickerFieldController', + text: 'InputFieldController', }; export const adminCrudTextInputGenerator = createGenerator({ @@ -44,11 +44,10 @@ export const adminCrudTextInputGenerator = createGenerator({ adminCrudInputContainer.addInput({ order, content: tsCodeFragment( - `<${inputType}.LabelledController + `<${inputType} label="${label}" control={control} name="${modelField}" - ${type === 'dateTime' ? 'showTimeSelect' : ''} />`, reactComponentsImports[inputType].declaration(), ), diff --git a/packages/react-generators/src/generators/admin/admin-layout/admin-layout.generator.ts b/packages/react-generators/src/generators/admin/admin-layout/admin-layout.generator.ts index 3a0a1e457..fa5693784 100644 --- a/packages/react-generators/src/generators/admin/admin-layout/admin-layout.generator.ts +++ b/packages/react-generators/src/generators/admin/admin-layout/admin-layout.generator.ts @@ -4,17 +4,12 @@ import { tsImportBuilder, typescriptFileProvider, } from '@baseplate-dev/core-generators'; -import { - createGenerator, - createGeneratorTask, - createProviderTask, -} from '@baseplate-dev/sync'; +import { createGenerator, createGeneratorTask } from '@baseplate-dev/sync'; import { z } from 'zod'; import { authComponentsImportsProvider } from '#src/generators/auth/_providers/auth-components.js'; import { authHooksImportsProvider } from '#src/generators/auth/_providers/auth-hooks.js'; import { reactComponentsImportsProvider } from '#src/generators/core/react-components/index.js'; -import { reactTailwindProvider } from '#src/generators/core/react-tailwind/index.js'; import { reactRoutesProvider } from '#src/providers/routes.js'; import { ADMIN_ADMIN_LAYOUT_GENERATED } from './generated/index.js'; @@ -48,16 +43,6 @@ export const adminLayoutGenerator = createGenerator({ descriptorSchema, buildTasks: ({ links = [] }) => ({ paths: ADMIN_ADMIN_LAYOUT_GENERATED.paths.task, - reactTailwind: createProviderTask( - reactTailwindProvider, - (reactTailwind) => { - reactTailwind.addGlobalStyle( - `body { - overscroll-behavior-y: none; -}`, - ); - }, - ), main: createGeneratorTask({ dependencies: { reactComponentsImports: reactComponentsImportsProvider, @@ -80,7 +65,7 @@ export const adminLayoutGenerator = createGenerator({ element: tsCodeFragment( ``, [ - tsImportBuilder().default('AdminLayout').from(paths.adminLayout), + tsImportBuilder(['AdminLayout']).from(paths.adminLayout), authComponentsImports.RequireAuth.declaration(), ], ), @@ -91,14 +76,17 @@ export const adminLayoutGenerator = createGenerator({ const navEntries = Object.fromEntries( links.map((link) => [ link.path, - TsCodeUtils.mergeFragmentsAsJsxElement('Sidebar.LinkItem', { - Icon: tsCodeFragment( - link.icon, - tsImportBuilder([link.icon]).from(getIconImport(link.icon)), - ), - to: link.path, - children: link.label, - }), + TsCodeUtils.templateWithImports([ + reactComponentsImports.NavigationMenuItemWithLink.declaration(), + tsImportBuilder(['NavLink']).from('react-router-dom'), + ])` + + + <${TsCodeUtils.importFragment(link.icon, getIconImport(link.icon))} /> + ${link.label} + + + `, ]), ); diff --git a/packages/react-generators/src/generators/admin/admin-layout/extractor.json b/packages/react-generators/src/generators/admin/admin-layout/extractor.json index a63fc9d6a..936300d2f 100644 --- a/packages/react-generators/src/generators/admin/admin-layout/extractor.json +++ b/packages/react-generators/src/generators/admin/admin-layout/extractor.json @@ -1,7 +1,7 @@ { "name": "admin/admin-layout", "templates": { - "src/components/AdminLayout/index.tsx": { + "src/components/admin-layout/admin-layout.tsx": { "name": "admin-layout", "type": "ts", "fileOptions": { "kind": "singleton" }, @@ -16,7 +16,7 @@ "packagePathSpecifier": "@baseplate-dev/react-generators:src/generators/core/react-components/generated/ts-import-providers.ts" } }, - "pathRootRelativePath": "{src-root}/components/AdminLayout/index.tsx", + "pathRootRelativePath": "{src-root}/components/admin-layout/admin-layout.tsx", "variables": { "TPL_SIDEBAR_LINKS": {} } } } diff --git a/packages/react-generators/src/generators/admin/admin-layout/generated/template-paths.ts b/packages/react-generators/src/generators/admin/admin-layout/generated/template-paths.ts index 93930f821..86156d604 100644 --- a/packages/react-generators/src/generators/admin/admin-layout/generated/template-paths.ts +++ b/packages/react-generators/src/generators/admin/admin-layout/generated/template-paths.ts @@ -18,7 +18,7 @@ const adminAdminLayoutPathsTask = createGeneratorTask({ return { providers: { adminAdminLayoutPaths: { - adminLayout: `${srcRoot}/components/AdminLayout/index.tsx`, + adminLayout: `${srcRoot}/components/admin-layout/admin-layout.tsx`, }, }, }; diff --git a/packages/react-generators/src/generators/admin/admin-layout/generated/typed-templates.ts b/packages/react-generators/src/generators/admin/admin-layout/generated/typed-templates.ts index da4479a23..e2302764e 100644 --- a/packages/react-generators/src/generators/admin/admin-layout/generated/typed-templates.ts +++ b/packages/react-generators/src/generators/admin/admin-layout/generated/typed-templates.ts @@ -14,7 +14,7 @@ const adminLayout = createTsTemplateFile({ source: { path: path.join( import.meta.dirname, - '../templates/src/components/AdminLayout/index.tsx', + '../templates/src/components/admin-layout/admin-layout.tsx', ), }, variables: { TPL_SIDEBAR_LINKS: {} }, diff --git a/packages/react-generators/src/generators/admin/admin-layout/templates/src/components/AdminLayout/index.tsx b/packages/react-generators/src/generators/admin/admin-layout/templates/src/components/AdminLayout/index.tsx deleted file mode 100644 index cbc525bc8..000000000 --- a/packages/react-generators/src/generators/admin/admin-layout/templates/src/components/AdminLayout/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import { useLogOut } from '%authHooksImports'; -import { Sidebar } from '%reactComponentsImports'; -import clsx from 'clsx'; -import { MdLogout } from 'react-icons/md'; -import { Outlet } from 'react-router-dom'; - -interface Props { - className?: string; -} - -function AdminLayout({ className }: Props): ReactElement { - const logOut = useLogOut(); - - return ( -
- - -

Admin Dashboard

- - - - { - logOut(); - }} - > - Log Out - - - -
- -
-
- ); -} - -export default AdminLayout; diff --git a/packages/react-generators/src/generators/admin/admin-layout/templates/src/components/admin-layout/admin-layout.tsx b/packages/react-generators/src/generators/admin/admin-layout/templates/src/components/admin-layout/admin-layout.tsx new file mode 100644 index 000000000..384efa487 --- /dev/null +++ b/packages/react-generators/src/generators/admin/admin-layout/templates/src/components/admin-layout/admin-layout.tsx @@ -0,0 +1,50 @@ +// @ts-nocheck + +import type { ReactElement } from 'react'; + +import { useLogOut } from '%authHooksImports'; +import { + NavigationMenu, + NavigationMenuItemWithLink, + NavigationMenuList, + SidebarLayout, + SidebarLayoutContent, + SidebarLayoutSidebar, +} from '%reactComponentsImports'; +import { Outlet } from 'react-router-dom'; + +interface Props { + className?: string; +} + +export function AdminLayout({ className }: Props): ReactElement { + const logOut = useLogOut(); + + return ( + + +
+

Admin Dashboard

+
+ + + + + + + + + + + + + + ); +} diff --git a/packages/react-generators/src/generators/auth/_providers/auth-components.ts b/packages/react-generators/src/generators/auth/_providers/auth-components.ts index 9f12d592d..46a58bf5d 100644 --- a/packages/react-generators/src/generators/auth/_providers/auth-components.ts +++ b/packages/react-generators/src/generators/auth/_providers/auth-components.ts @@ -4,7 +4,7 @@ import { createTsImportMapSchema } from '@baseplate-dev/core-generators'; import { createReadOnlyProviderType } from '@baseplate-dev/sync'; export const authComponentsImportsSchema = createTsImportMapSchema({ - RequireAuth: { exportedAs: 'default' }, + RequireAuth: {}, }); export type AuthComponentImportsProvider = TsImportMapProviderFromSchema< diff --git a/packages/react-generators/src/generators/auth/_providers/providers.json b/packages/react-generators/src/generators/auth/_providers/providers.json index b2a9dbe29..41d95a8e3 100644 --- a/packages/react-generators/src/generators/auth/_providers/providers.json +++ b/packages/react-generators/src/generators/auth/_providers/providers.json @@ -19,7 +19,7 @@ "providerExport": "authComponentsImportsProvider", "schemaExport": "authComponentsImportsSchema", "projectExports": { - "RequireAuth": { "name": "default" } + "RequireAuth": {} } } } diff --git a/packages/react-generators/src/generators/core/react-components/extractor.json b/packages/react-generators/src/generators/core/react-components/extractor.json index 7beb63968..41df61a3a 100644 --- a/packages/react-generators/src/generators/core/react-components/extractor.json +++ b/packages/react-generators/src/generators/core/react-components/extractor.json @@ -1,124 +1,174 @@ { "name": "core/react-components", "templates": { - "src/components/Alert/index.tsx": { + "src/components/alert/alert.tsx": { "name": "alert", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/Alert/index.tsx", + "pathRootRelativePath": "{src-root}/components/alert/alert.tsx", "variables": {} }, - "src/components/AlertIcon/index.tsx": { - "name": "alert-icon", + "src/components/button/button.tsx": { + "name": "button", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/AlertIcon/index.tsx", + "pathRootRelativePath": "{src-root}/components/button/button.tsx", "variables": {} }, - "src/components/BackButton/index.tsx": { - "name": "back-button", + "src/components/calendar/calendar.tsx": { + "name": "calendar", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/BackButton/index.tsx", + "pathRootRelativePath": "{src-root}/components/calendar/calendar.tsx", "variables": {} }, - "src/components/Button/index.tsx": { - "name": "button", + "src/components/card/card.tsx": { + "name": "card", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/Button/index.tsx", + "pathRootRelativePath": "{src-root}/components/card/card.tsx", "variables": {} }, - "src/components/ButtonGroup/index.tsx": { - "name": "button-group", + "src/components/checkbox-field/checkbox-field.tsx": { + "name": "checkbox-field", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/ButtonGroup/index.tsx", + "pathRootRelativePath": "{src-root}/components/checkbox-field/checkbox-field.tsx", "variables": {} }, - "src/components/Card/index.tsx": { - "name": "card", + "src/components/checkbox/checkbox.tsx": { + "name": "checkbox", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "components", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/components/checkbox/checkbox.tsx", + "variables": {} + }, + "src/components/circular-progress/circular-progress.tsx": { + "name": "circular-progress", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "components", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/components/circular-progress/circular-progress.tsx", + "variables": {} + }, + "src/components/combobox-field/combobox-field.tsx": { + "name": "combobox-field", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/Card/index.tsx", + "pathRootRelativePath": "{src-root}/components/combobox-field/combobox-field.tsx", "variables": {} }, - "src/components/CheckedInput/index.tsx": { - "name": "checked-input", + "src/components/combobox/combobox.tsx": { + "name": "combobox", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/CheckedInput/index.tsx", + "pathRootRelativePath": "{src-root}/components/combobox/combobox.tsx", "variables": {} }, - "src/components/ConfirmDialog/index.tsx": { + "src/components/confirm-dialog/confirm-dialog.tsx": { "name": "confirm-dialog", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/ConfirmDialog/index.tsx", + "pathRootRelativePath": "{src-root}/components/confirm-dialog/confirm-dialog.tsx", "variables": {} }, - "src/components/ErrorableLoader/index.tsx": { - "name": "errorable-loader", + "src/components/date-picker-field/date-picker-field.tsx": { + "name": "date-picker-field", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "components", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/components/date-picker-field/date-picker-field.tsx", + "variables": {} + }, + "src/components/date-time-picker-field/date-time-picker-field.tsx": { + "name": "date-time-picker-field", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/ErrorableLoader/index.tsx", + "pathRootRelativePath": "{src-root}/components/date-time-picker-field/date-time-picker-field.tsx", "variables": {} }, - "src/components/ErrorDisplay/index.tsx": { + "src/components/dialog/dialog.tsx": { + "name": "dialog", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "components", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/components/dialog/dialog.tsx", + "variables": {} + }, + "src/components/empty-display/empty-display.tsx": { + "name": "empty-display", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "components", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/components/empty-display/empty-display.tsx", + "variables": {} + }, + "src/components/error-display/error-display.tsx": { "name": "error-display", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/ErrorDisplay/index.tsx", + "pathRootRelativePath": "{src-root}/components/error-display/error-display.tsx", "variables": {} }, - "src/components/FormError/index.tsx": { - "name": "form-error", + "src/components/errorable-loader/errorable-loader.tsx": { + "name": "errorable-loader", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/FormError/index.tsx", + "pathRootRelativePath": "{src-root}/components/errorable-loader/errorable-loader.tsx", "variables": {} }, - "src/components/FormLabel/index.tsx": { - "name": "form-label", + "src/components/form-item/form-item.tsx": { + "name": "form-item", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/FormLabel/index.tsx", + "pathRootRelativePath": "{src-root}/components/form-item/form-item.tsx", "variables": {} }, "src/components/index.ts": { @@ -130,170 +180,272 @@ "pathRootRelativePath": "{src-root}/components/index.ts", "projectExports": { "Alert": {}, - "AlertIcon": {}, - "BackButton": {}, "Button": {}, - "ButtonGroup": {}, + "Calendar": {}, "Card": {}, + "Checkbox": {}, + "CheckboxField": {}, + "CheckboxFieldController": {}, "CheckedInput": {}, + "CircularProgress": {}, + "Combobox": {}, + "ComboboxField": {}, + "ComboboxFieldController": {}, "ConfirmDialog": {}, + "DatePickerField": {}, + "DatePickerFieldController": {}, + "DateTimePickerField": {}, + "DateTimePickerFieldController": {}, + "Dialog": {}, + "DialogClose": {}, + "DialogContent": {}, + "DialogDescription": {}, + "DialogFooter": {}, + "DialogHeader": {}, + "DialogOverlay": {}, + "DialogPortal": {}, + "DialogTitle": {}, + "DialogTrigger": {}, + "DialogWidth": { "isTypeOnly": true }, + "EmptyDisplay": {}, "ErrorableLoader": {}, "ErrorDisplay": {}, - "FormError": {}, + "FormControl": {}, + "FormDescription": {}, + "FormItem": {}, "FormLabel": {}, + "FormMessage": {}, + "Input": {}, + "InputField": {}, + "InputFieldController": {}, + "Label": {}, "LinkButton": {}, "ListGroup": {}, + "Loader": {}, "Modal": {}, + "NavigationMenu": {}, + "NavigationMenuContent": {}, + "NavigationMenuIndicator": {}, + "NavigationMenuItem": {}, + "NavigationMenuItemWithLink": {}, + "NavigationMenuLink": {}, + "NavigationMenuList": {}, + "NavigationMenuTrigger": {}, + "navigationMenuTriggerStyle": {}, + "NavigationMenuViewport": {}, "NotFoundCard": {}, + "Popover": {}, + "PopoverAnchor": {}, + "PopoverContent": {}, + "PopoverTrigger": {}, "ReactDatePickerInput": {}, "ReactSelectInput": {}, + "ScrollArea": {}, + "Select": {}, + "SelectField": {}, + "SelectFieldController": {}, "SelectInput": {}, - "Sidebar": {}, - "Spinner": {}, + "SidebarLayout": {}, + "SidebarLayoutContent": {}, + "SidebarLayoutSidebar": {}, + "Switch": {}, + "SwitchField": {}, + "SwitchFieldController": {}, "Table": {}, + "TableBody": {}, + "TableCaption": {}, + "TableCell": {}, + "TableFooter": {}, + "TableHead": {}, + "TableHeader": {}, + "TableRow": {}, + "Textarea": {}, + "TextareaField": {}, + "TextareaFieldController": {}, "TextAreaInput": {}, "TextInput": {}, - "Toast": {} + "Toaster": {} }, "variables": { "TPL_EXPORTS": {} } }, - "src/components/LinkButton/index.tsx": { - "name": "link-button", + "src/components/input-field/input-field.tsx": { + "name": "input-field", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "components", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/components/input-field/input-field.tsx", + "variables": {} + }, + "src/components/input/input.tsx": { + "name": "input", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/LinkButton/index.tsx", + "pathRootRelativePath": "{src-root}/components/input/input.tsx", "variables": {} }, - "src/components/ListGroup/index.tsx": { - "name": "list-group", + "src/components/label/label.tsx": { + "name": "label", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/ListGroup/index.tsx", + "pathRootRelativePath": "{src-root}/components/label/label.tsx", "variables": {} }, - "src/components/Modal/index.tsx": { - "name": "modal", + "src/components/loader/loader.tsx": { + "name": "loader", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/Modal/index.tsx", + "pathRootRelativePath": "{src-root}/components/loader/loader.tsx", "variables": {} }, - "src/components/NotFoundCard/index.tsx": { + "src/components/navigation-menu/navigation-menu.tsx": { + "name": "navigation-menu", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "components", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/components/navigation-menu/navigation-menu.tsx", + "variables": {} + }, + "src/components/not-found-card/not-found-card.tsx": { "name": "not-found-card", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/NotFoundCard/index.tsx", + "pathRootRelativePath": "{src-root}/components/not-found-card/not-found-card.tsx", "variables": {} }, - "src/components/ReactDatePickerInput/index.tsx": { - "name": "react-date-picker-input", + "src/components/popover/popover.tsx": { + "name": "popover", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "components", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/components/popover/popover.tsx", + "variables": {} + }, + "src/components/scroll-area/scroll-area.tsx": { + "name": "scroll-area", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/ReactDatePickerInput/index.tsx", + "pathRootRelativePath": "{src-root}/components/scroll-area/scroll-area.tsx", "variables": {} }, - "src/components/ReactSelectInput/index.tsx": { - "name": "react-select-input", + "src/components/select-field/select-field.tsx": { + "name": "select-field", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/ReactSelectInput/index.tsx", + "pathRootRelativePath": "{src-root}/components/select-field/select-field.tsx", "variables": {} }, - "src/components/SelectInput/index.tsx": { - "name": "select-input", + "src/components/select/select.tsx": { + "name": "select", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/SelectInput/index.tsx", + "pathRootRelativePath": "{src-root}/components/select/select.tsx", "variables": {} }, - "src/components/Sidebar/index.tsx": { - "name": "sidebar", + "src/components/sidebar-layout/sidebar-layout.tsx": { + "name": "sidebar-layout", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/Sidebar/index.tsx", + "pathRootRelativePath": "{src-root}/components/sidebar-layout/sidebar-layout.tsx", "variables": {} }, - "src/components/Spinner/index.tsx": { - "name": "spinner", + "src/components/switch-field/switch-field.tsx": { + "name": "switch-field", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/Spinner/index.tsx", + "pathRootRelativePath": "{src-root}/components/switch-field/switch-field.tsx", "variables": {} }, - "src/components/Table/index.tsx": { + "src/components/switch/switch.tsx": { + "name": "switch-component", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "components", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/components/switch/switch.tsx", + "variables": {} + }, + "src/components/table/table.tsx": { "name": "table", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/Table/index.tsx", + "pathRootRelativePath": "{src-root}/components/table/table.tsx", "variables": {} }, - "src/components/TextAreaInput/index.tsx": { - "name": "text-area-input", + "src/components/textarea-field/textarea-field.tsx": { + "name": "textarea-field", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/TextAreaInput/index.tsx", + "pathRootRelativePath": "{src-root}/components/textarea-field/textarea-field.tsx", "variables": {} }, - "src/components/TextInput/index.tsx": { - "name": "text-input", + "src/components/textarea/textarea.tsx": { + "name": "textarea", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/TextInput/index.tsx", + "pathRootRelativePath": "{src-root}/components/textarea/textarea.tsx", "variables": {} }, - "src/components/Toast/index.tsx": { - "name": "toast", + "src/components/toaster/toaster.tsx": { + "name": "toaster", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "components", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/components/Toast/index.tsx", + "pathRootRelativePath": "{src-root}/components/toaster/toaster.tsx", "variables": {} }, - "src/hooks/useConfirmDialog.ts": { + "src/hooks/use-confirm-dialog.ts": { "name": "use-confirm-dialog", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", "group": "hooks", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/hooks/useConfirmDialog.ts", + "pathRootRelativePath": "{src-root}/hooks/use-confirm-dialog.ts", "projectExports": { "useConfirmDialog": {}, "UseConfirmDialogRequestOptions": { "isTypeOnly": true }, @@ -301,6 +453,28 @@ }, "variables": {} }, + "src/hooks/use-controlled-state.ts": { + "name": "hooks-use-controlled-state", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "hooks", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/hooks/use-controlled-state.ts", + "projectExports": { "useControlledState": {} }, + "variables": {} + }, + "src/hooks/use-controller-merged.ts": { + "name": "hooks-use-controller-merged", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "hooks", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/hooks/use-controller-merged.ts", + "projectExports": { "useControllerMerged": {} }, + "variables": {} + }, "src/hooks/useStatus.ts": { "name": "use-status", "type": "ts", @@ -316,15 +490,91 @@ }, "variables": {} }, - "src/hooks/useToast.tsx": { - "name": "use-toast", + "src/styles/button.ts": { + "name": "styles-button", "type": "ts", "fileOptions": { "kind": "singleton" }, "generator": "@baseplate-dev/react-generators#core/react-components", - "group": "hooks", + "group": "styles", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/styles/button.ts", + "projectExports": { "buttonVariants": {} }, + "variables": {} + }, + "src/styles/input.ts": { + "name": "styles-input", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "styles", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/styles/input.ts", + "projectExports": { "inputVariants": {} }, + "variables": {} + }, + "src/styles/select.ts": { + "name": "styles-select", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "styles", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/styles/select.ts", + "projectExports": { + "selectCheckVariants": {}, + "selectContentVariants": {}, + "selectItemVariants": {}, + "selectTriggerVariants": {} + }, + "variables": {} + }, + "src/types/form.ts": { + "name": "types-form", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "utils", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/types/form.ts", + "projectExports": { + "AddOptionRequiredFields": { "isTypeOnly": true }, + "FormFieldProps": { "isTypeOnly": true }, + "MultiSelectOptionProps": { "isTypeOnly": true }, + "SelectOptionProps": { "isTypeOnly": true } + }, + "variables": {} + }, + "src/types/icon.ts": { + "name": "types-icon", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "utils", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/types/icon.ts", + "projectExports": { "IconElement": { "isTypeOnly": true } }, + "variables": {} + }, + "src/utils/cn.ts": { + "name": "cn", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "utils", + "importMapProviders": {}, + "pathRootRelativePath": "{src-root}/utils/cn.ts", + "projectExports": { "cn": {} }, + "variables": {} + }, + "src/utils/merge-refs.ts": { + "name": "merge-refs", + "type": "ts", + "fileOptions": { "kind": "singleton" }, + "generator": "@baseplate-dev/react-generators#core/react-components", + "group": "utils", "importMapProviders": {}, - "pathRootRelativePath": "{src-root}/hooks/useToast.tsx", - "projectExports": { "useToast": {} }, + "pathRootRelativePath": "{src-root}/utils/merge-refs.ts", + "projectExports": { "mergeRefs": {} }, "variables": {} } } diff --git a/packages/react-generators/src/generators/core/react-components/generated/template-paths.ts b/packages/react-generators/src/generators/core/react-components/generated/template-paths.ts index 6d8252ac0..388ada18f 100644 --- a/packages/react-generators/src/generators/core/react-components/generated/template-paths.ts +++ b/packages/react-generators/src/generators/core/react-components/generated/template-paths.ts @@ -3,34 +3,51 @@ import { createGeneratorTask, createProviderType } from '@baseplate-dev/sync'; export interface CoreReactComponentsPaths { alert: string; - alertIcon: string; - backButton: string; button: string; - buttonGroup: string; + calendar: string; card: string; - checkedInput: string; + checkboxField: string; + checkbox: string; + circularProgress: string; + comboboxField: string; + combobox: string; confirmDialog: string; - errorableLoader: string; + datePickerField: string; + dateTimePickerField: string; + dialog: string; + emptyDisplay: string; errorDisplay: string; - formError: string; - formLabel: string; + errorableLoader: string; + formItem: string; index: string; - linkButton: string; - listGroup: string; - modal: string; + inputField: string; + input: string; + label: string; + loader: string; + navigationMenu: string; notFoundCard: string; - reactDatePickerInput: string; - reactSelectInput: string; - selectInput: string; - sidebar: string; - spinner: string; + popover: string; + scrollArea: string; + selectField: string; + select: string; + sidebarLayout: string; + switchField: string; + switchComponent: string; table: string; - textAreaInput: string; - textInput: string; - toast: string; + textareaField: string; + textarea: string; + toaster: string; useConfirmDialog: string; + hooksUseControlledState: string; + hooksUseControllerMerged: string; useStatus: string; - useToast: string; + stylesButton: string; + stylesInput: string; + stylesSelect: string; + typesForm: string; + typesIcon: string; + cn: string; + mergeRefs: string; } const coreReactComponentsPaths = createProviderType( @@ -46,35 +63,52 @@ const coreReactComponentsPathsTask = createGeneratorTask({ return { providers: { coreReactComponentsPaths: { - alert: `${srcRoot}/components/Alert/index.tsx`, - alertIcon: `${srcRoot}/components/AlertIcon/index.tsx`, - backButton: `${srcRoot}/components/BackButton/index.tsx`, - button: `${srcRoot}/components/Button/index.tsx`, - buttonGroup: `${srcRoot}/components/ButtonGroup/index.tsx`, - card: `${srcRoot}/components/Card/index.tsx`, - checkedInput: `${srcRoot}/components/CheckedInput/index.tsx`, - confirmDialog: `${srcRoot}/components/ConfirmDialog/index.tsx`, - errorableLoader: `${srcRoot}/components/ErrorableLoader/index.tsx`, - errorDisplay: `${srcRoot}/components/ErrorDisplay/index.tsx`, - formError: `${srcRoot}/components/FormError/index.tsx`, - formLabel: `${srcRoot}/components/FormLabel/index.tsx`, + alert: `${srcRoot}/components/alert/alert.tsx`, + button: `${srcRoot}/components/button/button.tsx`, + calendar: `${srcRoot}/components/calendar/calendar.tsx`, + card: `${srcRoot}/components/card/card.tsx`, + checkbox: `${srcRoot}/components/checkbox/checkbox.tsx`, + checkboxField: `${srcRoot}/components/checkbox-field/checkbox-field.tsx`, + circularProgress: `${srcRoot}/components/circular-progress/circular-progress.tsx`, + cn: `${srcRoot}/utils/cn.ts`, + combobox: `${srcRoot}/components/combobox/combobox.tsx`, + comboboxField: `${srcRoot}/components/combobox-field/combobox-field.tsx`, + confirmDialog: `${srcRoot}/components/confirm-dialog/confirm-dialog.tsx`, + datePickerField: `${srcRoot}/components/date-picker-field/date-picker-field.tsx`, + dateTimePickerField: `${srcRoot}/components/date-time-picker-field/date-time-picker-field.tsx`, + dialog: `${srcRoot}/components/dialog/dialog.tsx`, + emptyDisplay: `${srcRoot}/components/empty-display/empty-display.tsx`, + errorableLoader: `${srcRoot}/components/errorable-loader/errorable-loader.tsx`, + errorDisplay: `${srcRoot}/components/error-display/error-display.tsx`, + formItem: `${srcRoot}/components/form-item/form-item.tsx`, + hooksUseControlledState: `${srcRoot}/hooks/use-controlled-state.ts`, + hooksUseControllerMerged: `${srcRoot}/hooks/use-controller-merged.ts`, index: `${srcRoot}/components/index.ts`, - linkButton: `${srcRoot}/components/LinkButton/index.tsx`, - listGroup: `${srcRoot}/components/ListGroup/index.tsx`, - modal: `${srcRoot}/components/Modal/index.tsx`, - notFoundCard: `${srcRoot}/components/NotFoundCard/index.tsx`, - reactDatePickerInput: `${srcRoot}/components/ReactDatePickerInput/index.tsx`, - reactSelectInput: `${srcRoot}/components/ReactSelectInput/index.tsx`, - selectInput: `${srcRoot}/components/SelectInput/index.tsx`, - sidebar: `${srcRoot}/components/Sidebar/index.tsx`, - spinner: `${srcRoot}/components/Spinner/index.tsx`, - table: `${srcRoot}/components/Table/index.tsx`, - textAreaInput: `${srcRoot}/components/TextAreaInput/index.tsx`, - textInput: `${srcRoot}/components/TextInput/index.tsx`, - toast: `${srcRoot}/components/Toast/index.tsx`, - useConfirmDialog: `${srcRoot}/hooks/useConfirmDialog.ts`, + input: `${srcRoot}/components/input/input.tsx`, + inputField: `${srcRoot}/components/input-field/input-field.tsx`, + label: `${srcRoot}/components/label/label.tsx`, + loader: `${srcRoot}/components/loader/loader.tsx`, + mergeRefs: `${srcRoot}/utils/merge-refs.ts`, + navigationMenu: `${srcRoot}/components/navigation-menu/navigation-menu.tsx`, + notFoundCard: `${srcRoot}/components/not-found-card/not-found-card.tsx`, + popover: `${srcRoot}/components/popover/popover.tsx`, + scrollArea: `${srcRoot}/components/scroll-area/scroll-area.tsx`, + select: `${srcRoot}/components/select/select.tsx`, + selectField: `${srcRoot}/components/select-field/select-field.tsx`, + sidebarLayout: `${srcRoot}/components/sidebar-layout/sidebar-layout.tsx`, + stylesButton: `${srcRoot}/styles/button.ts`, + stylesInput: `${srcRoot}/styles/input.ts`, + stylesSelect: `${srcRoot}/styles/select.ts`, + switchComponent: `${srcRoot}/components/switch/switch.tsx`, + switchField: `${srcRoot}/components/switch-field/switch-field.tsx`, + table: `${srcRoot}/components/table/table.tsx`, + textarea: `${srcRoot}/components/textarea/textarea.tsx`, + textareaField: `${srcRoot}/components/textarea-field/textarea-field.tsx`, + toaster: `${srcRoot}/components/toaster/toaster.tsx`, + typesForm: `${srcRoot}/types/form.ts`, + typesIcon: `${srcRoot}/types/icon.ts`, + useConfirmDialog: `${srcRoot}/hooks/use-confirm-dialog.ts`, useStatus: `${srcRoot}/hooks/useStatus.ts`, - useToast: `${srcRoot}/hooks/useToast.tsx`, }, }, }; diff --git a/packages/react-generators/src/generators/core/react-components/generated/ts-import-providers.ts b/packages/react-generators/src/generators/core/react-components/generated/ts-import-providers.ts index 7a1efea28..60fef6830 100644 --- a/packages/react-generators/src/generators/core/react-components/generated/ts-import-providers.ts +++ b/packages/react-generators/src/generators/core/react-components/generated/ts-import-providers.ts @@ -13,38 +13,113 @@ import { import { CORE_REACT_COMPONENTS_PATHS } from './template-paths.js'; const reactComponentsImportsSchema = createTsImportMapSchema({ + AddOptionRequiredFields: { isTypeOnly: true }, Alert: {}, - AlertIcon: {}, - BackButton: {}, Button: {}, - ButtonGroup: {}, + buttonVariants: {}, + Calendar: {}, Card: {}, + Checkbox: {}, + CheckboxField: {}, + CheckboxFieldController: {}, CheckedInput: {}, + CircularProgress: {}, + cn: {}, + Combobox: {}, + ComboboxField: {}, + ComboboxFieldController: {}, ConfirmDialog: {}, + DatePickerField: {}, + DatePickerFieldController: {}, + DateTimePickerField: {}, + DateTimePickerFieldController: {}, + Dialog: {}, + DialogClose: {}, + DialogContent: {}, + DialogDescription: {}, + DialogFooter: {}, + DialogHeader: {}, + DialogOverlay: {}, + DialogPortal: {}, + DialogTitle: {}, + DialogTrigger: {}, + DialogWidth: { isTypeOnly: true }, + EmptyDisplay: {}, ErrorableLoader: {}, ErrorDisplay: {}, - FormError: {}, + FormControl: {}, + FormDescription: {}, + FormFieldProps: { isTypeOnly: true }, + FormItem: {}, FormLabel: {}, + FormMessage: {}, + IconElement: { isTypeOnly: true }, + Input: {}, + InputField: {}, + InputFieldController: {}, + inputVariants: {}, + Label: {}, LinkButton: {}, ListGroup: {}, + Loader: {}, + mergeRefs: {}, Modal: {}, + MultiSelectOptionProps: { isTypeOnly: true }, + NavigationMenu: {}, + NavigationMenuContent: {}, + NavigationMenuIndicator: {}, + NavigationMenuItem: {}, + NavigationMenuItemWithLink: {}, + NavigationMenuLink: {}, + NavigationMenuList: {}, + NavigationMenuTrigger: {}, + navigationMenuTriggerStyle: {}, + NavigationMenuViewport: {}, NotFoundCard: {}, + Popover: {}, + PopoverAnchor: {}, + PopoverContent: {}, + PopoverTrigger: {}, ReactDatePickerInput: {}, ReactSelectInput: {}, + ScrollArea: {}, + Select: {}, + selectCheckVariants: {}, + selectContentVariants: {}, + SelectField: {}, + SelectFieldController: {}, SelectInput: {}, - Sidebar: {}, - Spinner: {}, + selectItemVariants: {}, + SelectOptionProps: { isTypeOnly: true }, + selectTriggerVariants: {}, + SidebarLayout: {}, + SidebarLayoutContent: {}, + SidebarLayoutSidebar: {}, Status: { isTypeOnly: true }, StatusType: { isTypeOnly: true }, + Switch: {}, + SwitchField: {}, + SwitchFieldController: {}, Table: {}, + TableBody: {}, + TableCaption: {}, + TableCell: {}, + TableFooter: {}, + TableHead: {}, + TableHeader: {}, + TableRow: {}, + Textarea: {}, + TextareaField: {}, + TextareaFieldController: {}, TextAreaInput: {}, TextInput: {}, - Toast: {}, + Toaster: {}, useConfirmDialog: {}, UseConfirmDialogRequestOptions: { isTypeOnly: true }, useConfirmDialogState: {}, + useControlledState: {}, + useControllerMerged: {}, useStatus: {}, - useToast: {}, }); export type ReactComponentsImportsProvider = TsImportMapProviderFromSchema< @@ -69,38 +144,113 @@ const coreReactComponentsImportsTask = createGeneratorTask({ reactComponentsImports: createTsImportMap( reactComponentsImportsSchema, { + AddOptionRequiredFields: paths.typesForm, Alert: paths.index, - AlertIcon: paths.index, - BackButton: paths.index, Button: paths.index, - ButtonGroup: paths.index, + buttonVariants: paths.stylesButton, + Calendar: paths.index, Card: paths.index, + Checkbox: paths.index, + CheckboxField: paths.index, + CheckboxFieldController: paths.index, CheckedInput: paths.index, + CircularProgress: paths.index, + cn: paths.cn, + Combobox: paths.index, + ComboboxField: paths.index, + ComboboxFieldController: paths.index, ConfirmDialog: paths.index, + DatePickerField: paths.index, + DatePickerFieldController: paths.index, + DateTimePickerField: paths.index, + DateTimePickerFieldController: paths.index, + Dialog: paths.index, + DialogClose: paths.index, + DialogContent: paths.index, + DialogDescription: paths.index, + DialogFooter: paths.index, + DialogHeader: paths.index, + DialogOverlay: paths.index, + DialogPortal: paths.index, + DialogTitle: paths.index, + DialogTrigger: paths.index, + DialogWidth: paths.index, + EmptyDisplay: paths.index, ErrorableLoader: paths.index, ErrorDisplay: paths.index, - FormError: paths.index, + FormControl: paths.index, + FormDescription: paths.index, + FormFieldProps: paths.typesForm, + FormItem: paths.index, FormLabel: paths.index, + FormMessage: paths.index, + IconElement: paths.typesIcon, + Input: paths.index, + InputField: paths.index, + InputFieldController: paths.index, + inputVariants: paths.stylesInput, + Label: paths.index, LinkButton: paths.index, ListGroup: paths.index, + Loader: paths.index, + mergeRefs: paths.mergeRefs, Modal: paths.index, + MultiSelectOptionProps: paths.typesForm, + NavigationMenu: paths.index, + NavigationMenuContent: paths.index, + NavigationMenuIndicator: paths.index, + NavigationMenuItem: paths.index, + NavigationMenuItemWithLink: paths.index, + NavigationMenuLink: paths.index, + NavigationMenuList: paths.index, + NavigationMenuTrigger: paths.index, + navigationMenuTriggerStyle: paths.index, + NavigationMenuViewport: paths.index, NotFoundCard: paths.index, + Popover: paths.index, + PopoverAnchor: paths.index, + PopoverContent: paths.index, + PopoverTrigger: paths.index, ReactDatePickerInput: paths.index, ReactSelectInput: paths.index, + ScrollArea: paths.index, + Select: paths.index, + selectCheckVariants: paths.stylesSelect, + selectContentVariants: paths.stylesSelect, + SelectField: paths.index, + SelectFieldController: paths.index, SelectInput: paths.index, - Sidebar: paths.index, - Spinner: paths.index, + selectItemVariants: paths.stylesSelect, + SelectOptionProps: paths.typesForm, + selectTriggerVariants: paths.stylesSelect, + SidebarLayout: paths.index, + SidebarLayoutContent: paths.index, + SidebarLayoutSidebar: paths.index, Status: paths.useStatus, StatusType: paths.useStatus, + Switch: paths.index, + SwitchField: paths.index, + SwitchFieldController: paths.index, Table: paths.index, + TableBody: paths.index, + TableCaption: paths.index, + TableCell: paths.index, + TableFooter: paths.index, + TableHead: paths.index, + TableHeader: paths.index, + TableRow: paths.index, + Textarea: paths.index, + TextareaField: paths.index, + TextareaFieldController: paths.index, TextAreaInput: paths.index, TextInput: paths.index, - Toast: paths.index, + Toaster: paths.index, useConfirmDialog: paths.useConfirmDialog, UseConfirmDialogRequestOptions: paths.useConfirmDialog, useConfirmDialogState: paths.useConfirmDialog, + useControlledState: paths.hooksUseControlledState, + useControllerMerged: paths.hooksUseControllerMerged, useStatus: paths.useStatus, - useToast: paths.useToast, }, ), }, diff --git a/packages/react-generators/src/generators/core/react-components/generated/typed-templates.ts b/packages/react-generators/src/generators/core/react-components/generated/typed-templates.ts index 42100eaf2..c2d787d99 100644 --- a/packages/react-generators/src/generators/core/react-components/generated/typed-templates.ts +++ b/packages/react-generators/src/generators/core/react-components/generated/typed-templates.ts @@ -9,91 +9,119 @@ const alert = createTsTemplateFile({ source: { path: path.join( import.meta.dirname, - '../templates/src/components/Alert/index.tsx', + '../templates/src/components/alert/alert.tsx', ), }, variables: {}, }); -const alertIcon = createTsTemplateFile({ +const button = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'alert-icon', + name: 'button', source: { path: path.join( import.meta.dirname, - '../templates/src/components/AlertIcon/index.tsx', + '../templates/src/components/button/button.tsx', ), }, variables: {}, }); -const backButton = createTsTemplateFile({ +const calendar = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'back-button', + name: 'calendar', source: { path: path.join( import.meta.dirname, - '../templates/src/components/BackButton/index.tsx', + '../templates/src/components/calendar/calendar.tsx', ), }, variables: {}, }); -const button = createTsTemplateFile({ +const card = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'button', + name: 'card', source: { path: path.join( import.meta.dirname, - '../templates/src/components/Button/index.tsx', + '../templates/src/components/card/card.tsx', ), }, variables: {}, }); -const buttonGroup = createTsTemplateFile({ +const checkbox = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'button-group', + name: 'checkbox', source: { path: path.join( import.meta.dirname, - '../templates/src/components/ButtonGroup/index.tsx', + '../templates/src/components/checkbox/checkbox.tsx', ), }, variables: {}, }); -const card = createTsTemplateFile({ +const checkboxField = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'card', + name: 'checkbox-field', + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/checkbox-field/checkbox-field.tsx', + ), + }, + variables: {}, +}); + +const circularProgress = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: {}, + name: 'circular-progress', + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/circular-progress/circular-progress.tsx', + ), + }, + variables: {}, +}); + +const combobox = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: {}, + name: 'combobox', source: { path: path.join( import.meta.dirname, - '../templates/src/components/Card/index.tsx', + '../templates/src/components/combobox/combobox.tsx', ), }, variables: {}, }); -const checkedInput = createTsTemplateFile({ +const comboboxField = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'checked-input', + name: 'combobox-field', source: { path: path.join( import.meta.dirname, - '../templates/src/components/CheckedInput/index.tsx', + '../templates/src/components/combobox-field/combobox-field.tsx', ), }, variables: {}, @@ -107,7 +135,63 @@ const confirmDialog = createTsTemplateFile({ source: { path: path.join( import.meta.dirname, - '../templates/src/components/ConfirmDialog/index.tsx', + '../templates/src/components/confirm-dialog/confirm-dialog.tsx', + ), + }, + variables: {}, +}); + +const datePickerField = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: {}, + name: 'date-picker-field', + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/date-picker-field/date-picker-field.tsx', + ), + }, + variables: {}, +}); + +const dateTimePickerField = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: {}, + name: 'date-time-picker-field', + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/date-time-picker-field/date-time-picker-field.tsx', + ), + }, + variables: {}, +}); + +const dialog = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: {}, + name: 'dialog', + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/dialog/dialog.tsx', + ), + }, + variables: {}, +}); + +const emptyDisplay = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: {}, + name: 'empty-display', + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/empty-display/empty-display.tsx', ), }, variables: {}, @@ -121,7 +205,7 @@ const errorableLoader = createTsTemplateFile({ source: { path: path.join( import.meta.dirname, - '../templates/src/components/ErrorableLoader/index.tsx', + '../templates/src/components/errorable-loader/errorable-loader.tsx', ), }, variables: {}, @@ -135,77 +219,91 @@ const errorDisplay = createTsTemplateFile({ source: { path: path.join( import.meta.dirname, - '../templates/src/components/ErrorDisplay/index.tsx', + '../templates/src/components/error-display/error-display.tsx', ), }, variables: {}, }); -const formError = createTsTemplateFile({ +const formItem = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'form-error', + name: 'form-item', source: { path: path.join( import.meta.dirname, - '../templates/src/components/FormError/index.tsx', + '../templates/src/components/form-item/form-item.tsx', ), }, variables: {}, }); -const formLabel = createTsTemplateFile({ +const input = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'form-label', + name: 'input', source: { path: path.join( import.meta.dirname, - '../templates/src/components/FormLabel/index.tsx', + '../templates/src/components/input/input.tsx', ), }, variables: {}, }); -const linkButton = createTsTemplateFile({ +const inputField = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'link-button', + name: 'input-field', source: { path: path.join( import.meta.dirname, - '../templates/src/components/LinkButton/index.tsx', + '../templates/src/components/input-field/input-field.tsx', ), }, variables: {}, }); -const listGroup = createTsTemplateFile({ +const label = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'list-group', + name: 'label', source: { path: path.join( import.meta.dirname, - '../templates/src/components/ListGroup/index.tsx', + '../templates/src/components/label/label.tsx', ), }, variables: {}, }); -const modal = createTsTemplateFile({ +const loader = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'modal', + name: 'loader', source: { path: path.join( import.meta.dirname, - '../templates/src/components/Modal/index.tsx', + '../templates/src/components/loader/loader.tsx', + ), + }, + variables: {}, +}); + +const navigationMenu = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: {}, + name: 'navigation-menu', + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/navigation-menu/navigation-menu.tsx', ), }, variables: {}, @@ -219,63 +317,105 @@ const notFoundCard = createTsTemplateFile({ source: { path: path.join( import.meta.dirname, - '../templates/src/components/NotFoundCard/index.tsx', + '../templates/src/components/not-found-card/not-found-card.tsx', + ), + }, + variables: {}, +}); + +const popover = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: {}, + name: 'popover', + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/popover/popover.tsx', ), }, variables: {}, }); -const reactSelectInput = createTsTemplateFile({ +const scrollArea = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'react-select-input', + name: 'scroll-area', source: { path: path.join( import.meta.dirname, - '../templates/src/components/ReactSelectInput/index.tsx', + '../templates/src/components/scroll-area/scroll-area.tsx', ), }, variables: {}, }); -const selectInput = createTsTemplateFile({ +const select = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'select-input', + name: 'select', source: { path: path.join( import.meta.dirname, - '../templates/src/components/SelectInput/index.tsx', + '../templates/src/components/select/select.tsx', ), }, variables: {}, }); -const sidebar = createTsTemplateFile({ +const selectField = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'sidebar', + name: 'select-field', source: { path: path.join( import.meta.dirname, - '../templates/src/components/Sidebar/index.tsx', + '../templates/src/components/select-field/select-field.tsx', ), }, variables: {}, }); -const spinner = createTsTemplateFile({ +const sidebarLayout = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'spinner', + name: 'sidebar-layout', source: { path: path.join( import.meta.dirname, - '../templates/src/components/Spinner/index.tsx', + '../templates/src/components/sidebar-layout/sidebar-layout.tsx', + ), + }, + variables: {}, +}); + +const switchComponent = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: {}, + name: 'switch-component', + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/switch/switch.tsx', + ), + }, + variables: {}, +}); + +const switchField = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'components', + importMapProviders: {}, + name: 'switch-field', + source: { + path: path.join( + import.meta.dirname, + '../templates/src/components/switch-field/switch-field.tsx', ), }, variables: {}, @@ -289,49 +429,49 @@ const table = createTsTemplateFile({ source: { path: path.join( import.meta.dirname, - '../templates/src/components/Table/index.tsx', + '../templates/src/components/table/table.tsx', ), }, variables: {}, }); -const textAreaInput = createTsTemplateFile({ +const textarea = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'text-area-input', + name: 'textarea', source: { path: path.join( import.meta.dirname, - '../templates/src/components/TextAreaInput/index.tsx', + '../templates/src/components/textarea/textarea.tsx', ), }, variables: {}, }); -const textInput = createTsTemplateFile({ +const textareaField = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'text-input', + name: 'textarea-field', source: { path: path.join( import.meta.dirname, - '../templates/src/components/TextInput/index.tsx', + '../templates/src/components/textarea-field/textarea-field.tsx', ), }, variables: {}, }); -const toast = createTsTemplateFile({ +const toaster = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'components', importMapProviders: {}, - name: 'toast', + name: 'toaster', source: { path: path.join( import.meta.dirname, - '../templates/src/components/Toast/index.tsx', + '../templates/src/components/toaster/toaster.tsx', ), }, variables: {}, @@ -339,31 +479,71 @@ const toast = createTsTemplateFile({ export const componentsGroup = { alert, - alertIcon, - backButton, button, - buttonGroup, + calendar, card, - checkedInput, + checkbox, + checkboxField, + circularProgress, + combobox, + comboboxField, confirmDialog, + datePickerField, + dateTimePickerField, + dialog, + emptyDisplay, errorableLoader, errorDisplay, - formError, - formLabel, - linkButton, - listGroup, - modal, + formItem, + input, + inputField, + label, + loader, + navigationMenu, notFoundCard, - reactSelectInput, - selectInput, - sidebar, - spinner, + popover, + scrollArea, + select, + selectField, + sidebarLayout, + switchComponent, + switchField, table, - textAreaInput, - textInput, - toast, + textarea, + textareaField, + toaster, }; +const hooksUseControlledState = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'hooks', + importMapProviders: {}, + name: 'hooks-use-controlled-state', + projectExports: { useControlledState: {} }, + source: { + path: path.join( + import.meta.dirname, + '../templates/src/hooks/use-controlled-state.ts', + ), + }, + variables: {}, +}); + +const hooksUseControllerMerged = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'hooks', + importMapProviders: {}, + name: 'hooks-use-controller-merged', + projectExports: { useControllerMerged: {} }, + source: { + path: path.join( + import.meta.dirname, + '../templates/src/hooks/use-controller-merged.ts', + ), + }, + variables: {}, +}); + const useConfirmDialog = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, group: 'hooks', @@ -377,7 +557,7 @@ const useConfirmDialog = createTsTemplateFile({ source: { path: path.join( import.meta.dirname, - '../templates/src/hooks/useConfirmDialog.ts', + '../templates/src/hooks/use-confirm-dialog.ts', ), }, variables: {}, @@ -399,19 +579,12 @@ const useStatus = createTsTemplateFile({ variables: {}, }); -const useToast = createTsTemplateFile({ - fileOptions: { kind: 'singleton' }, - group: 'hooks', - importMapProviders: {}, - name: 'use-toast', - projectExports: { useToast: {} }, - source: { - path: path.join(import.meta.dirname, '../templates/src/hooks/useToast.tsx'), - }, - variables: {}, -}); - -export const hooksGroup = { useConfirmDialog, useStatus, useToast }; +export const hooksGroup = { + hooksUseControlledState, + hooksUseControllerMerged, + useConfirmDialog, + useStatus, +}; const index = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, @@ -419,30 +592,91 @@ const index = createTsTemplateFile({ name: 'index', projectExports: { Alert: {}, - AlertIcon: {}, - BackButton: {}, Button: {}, - ButtonGroup: {}, + Calendar: {}, Card: {}, + Checkbox: {}, + CheckboxField: {}, + CheckboxFieldController: {}, CheckedInput: {}, + CircularProgress: {}, + Combobox: {}, + ComboboxField: {}, + ComboboxFieldController: {}, ConfirmDialog: {}, + DatePickerField: {}, + DatePickerFieldController: {}, + DateTimePickerField: {}, + DateTimePickerFieldController: {}, + Dialog: {}, + DialogClose: {}, + DialogContent: {}, + DialogDescription: {}, + DialogFooter: {}, + DialogHeader: {}, + DialogOverlay: {}, + DialogPortal: {}, + DialogTitle: {}, + DialogTrigger: {}, + DialogWidth: { isTypeOnly: true }, + EmptyDisplay: {}, ErrorableLoader: {}, ErrorDisplay: {}, - FormError: {}, + FormControl: {}, + FormDescription: {}, + FormItem: {}, FormLabel: {}, + FormMessage: {}, + Input: {}, + InputField: {}, + InputFieldController: {}, + Label: {}, LinkButton: {}, ListGroup: {}, + Loader: {}, Modal: {}, + NavigationMenu: {}, + NavigationMenuContent: {}, + NavigationMenuIndicator: {}, + NavigationMenuItem: {}, + NavigationMenuItemWithLink: {}, + NavigationMenuLink: {}, + NavigationMenuList: {}, + NavigationMenuTrigger: {}, + navigationMenuTriggerStyle: {}, + NavigationMenuViewport: {}, NotFoundCard: {}, + Popover: {}, + PopoverAnchor: {}, + PopoverContent: {}, + PopoverTrigger: {}, ReactDatePickerInput: {}, ReactSelectInput: {}, + ScrollArea: {}, + Select: {}, + SelectField: {}, + SelectFieldController: {}, SelectInput: {}, - Sidebar: {}, - Spinner: {}, + SidebarLayout: {}, + SidebarLayoutContent: {}, + SidebarLayoutSidebar: {}, + Switch: {}, + SwitchField: {}, + SwitchFieldController: {}, Table: {}, + TableBody: {}, + TableCaption: {}, + TableCell: {}, + TableFooter: {}, + TableHead: {}, + TableHeader: {}, + TableRow: {}, + Textarea: {}, + TextareaField: {}, + TextareaFieldController: {}, TextAreaInput: {}, TextInput: {}, - Toast: {}, + Toaster: {}, }, source: { path: path.join( @@ -453,22 +687,111 @@ const index = createTsTemplateFile({ variables: { TPL_EXPORTS: {} }, }); -const reactDatePickerInput = createTsTemplateFile({ +const stylesButton = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'styles', + importMapProviders: {}, + name: 'styles-button', + projectExports: { buttonVariants: {} }, + source: { + path: path.join(import.meta.dirname, '../templates/src/styles/button.ts'), + }, + variables: {}, +}); + +const stylesInput = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'styles', + importMapProviders: {}, + name: 'styles-input', + projectExports: { inputVariants: {} }, + source: { + path: path.join(import.meta.dirname, '../templates/src/styles/input.ts'), + }, + variables: {}, +}); + +const stylesSelect = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'styles', + importMapProviders: {}, + name: 'styles-select', + projectExports: { + selectCheckVariants: {}, + selectContentVariants: {}, + selectItemVariants: {}, + selectTriggerVariants: {}, + }, + source: { + path: path.join(import.meta.dirname, '../templates/src/styles/select.ts'), + }, + variables: {}, +}); + +export const stylesGroup = { stylesButton, stylesInput, stylesSelect }; + +const cn = createTsTemplateFile({ fileOptions: { kind: 'singleton' }, + group: 'utils', importMapProviders: {}, - name: 'react-date-picker-input', + name: 'cn', + projectExports: { cn: {} }, + source: { + path: path.join(import.meta.dirname, '../templates/src/utils/cn.ts'), + }, + variables: {}, +}); + +const mergeRefs = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'utils', + importMapProviders: {}, + name: 'merge-refs', + projectExports: { mergeRefs: {} }, source: { path: path.join( import.meta.dirname, - '../templates/src/components/ReactDatePickerInput/index.tsx', + '../templates/src/utils/merge-refs.ts', ), }, variables: {}, }); +const typesForm = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'utils', + importMapProviders: {}, + name: 'types-form', + projectExports: { + AddOptionRequiredFields: { isTypeOnly: true }, + FormFieldProps: { isTypeOnly: true }, + MultiSelectOptionProps: { isTypeOnly: true }, + SelectOptionProps: { isTypeOnly: true }, + }, + source: { + path: path.join(import.meta.dirname, '../templates/src/types/form.ts'), + }, + variables: {}, +}); + +const typesIcon = createTsTemplateFile({ + fileOptions: { kind: 'singleton' }, + group: 'utils', + importMapProviders: {}, + name: 'types-icon', + projectExports: { IconElement: { isTypeOnly: true } }, + source: { + path: path.join(import.meta.dirname, '../templates/src/types/icon.ts'), + }, + variables: {}, +}); + +export const utilsGroup = { cn, mergeRefs, typesForm, typesIcon }; + export const CORE_REACT_COMPONENTS_TEMPLATES = { componentsGroup, hooksGroup, + stylesGroup, + utilsGroup, index, - reactDatePickerInput, }; diff --git a/packages/react-generators/src/generators/core/react-components/react-components.generator.ts b/packages/react-generators/src/generators/core/react-components/react-components.generator.ts index 9d1c0a445..28a453af9 100644 --- a/packages/react-generators/src/generators/core/react-components/react-components.generator.ts +++ b/packages/react-generators/src/generators/core/react-components/react-components.generator.ts @@ -11,7 +11,7 @@ import { createGeneratorTask, createProviderType, } from '@baseplate-dev/sync'; -import { pascalCase } from 'es-toolkit'; +import { kebabCase } from 'es-toolkit'; import { z } from 'zod'; import { REACT_PACKAGES } from '#src/constants/react-packages.js'; @@ -19,9 +19,7 @@ import { REACT_PACKAGES } from '#src/constants/react-packages.js'; import { reactAppConfigProvider } from '../react-app/index.js'; import { CORE_REACT_COMPONENTS_GENERATED } from './generated/index.js'; -const descriptorSchema = z.object({ - includeDatePicker: z.boolean().optional(), -}); +const descriptorSchema = z.object({}); export interface ReactComponentEntry { name: string; @@ -47,29 +45,25 @@ export const reactComponentsGenerator = createGenerator({ name: 'core/react-components', generatorFileUrl: import.meta.url, descriptorSchema, - buildTasks: ({ includeDatePicker }) => ({ + buildTasks: () => ({ nodePackages: createNodePackagesTask({ prod: extractPackageVersions(REACT_PACKAGES, [ '@headlessui/react', '@hookform/resolvers', 'clsx', 'react-hook-form', - 'react-hot-toast', 'react-icons', - 'react-select', 'zustand', + 'radix-ui', + 'class-variance-authority', + 'cmdk', + 'sonner', + 'react-day-picker', + 'date-fns', ]), }), paths: CORE_REACT_COMPONENTS_GENERATED.paths.task, imports: CORE_REACT_COMPONENTS_GENERATED.imports.task, - datePickerPackages: includeDatePicker - ? createNodePackagesTask({ - prod: extractPackageVersions(REACT_PACKAGES, [ - 'react-datepicker', - 'date-fns', - ]), - }) - : undefined, main: createGeneratorTask({ dependencies: { typescriptFile: typescriptFileProvider, @@ -82,20 +76,20 @@ export const reactComponentsGenerator = createGenerator({ run({ typescriptFile, reactAppConfig, paths }) { const coreReactComponents = Object.keys( CORE_REACT_COMPONENTS_GENERATED.templates.componentsGroup, - ).map((name) => ({ name: pascalCase(name) })); - - if (includeDatePicker) { - coreReactComponents.push({ name: 'ReactDatePickerInput' }); - } + ).map( + (name): ReactComponentEntry => ({ + name: kebabCase(name).replace('-component', ''), + }), + ); const allReactComponents = [...coreReactComponents]; // add toaster root sibling component reactAppConfig.renderSiblings.set( - 'react-hot-toast', + 'toaster', tsCodeFragment( '', - tsImportBuilder(['Toaster']).from('react-hot-toast'), + tsImportBuilder(['Toaster']).from(paths.index), ), ); @@ -131,23 +125,31 @@ export const reactComponentsGenerator = createGenerator({ }), ); - if (includeDatePicker) { - await builder.apply( - typescriptFile.renderTemplateFile({ - template: - CORE_REACT_COMPONENTS_GENERATED.templates - .reactDatePickerInput, - destination: paths.reactDatePickerInput, - }), - ); - } + await builder.apply( + typescriptFile.renderTemplateGroup({ + group: CORE_REACT_COMPONENTS_GENERATED.templates.stylesGroup, + paths, + }), + ); + + await builder.apply( + typescriptFile.renderTemplateGroup({ + group: CORE_REACT_COMPONENTS_GENERATED.templates.utilsGroup, + paths, + }), + ); + + // build component index + const getComponentPath = (a: ReactComponentEntry): string => + `./${a.name}/${a.name}.js`; + + const sortedComponentPaths = allReactComponents + .map(getComponentPath) + .toSorted(); // build component index - const componentNames = allReactComponents - .toSorted((a, b) => a.name.localeCompare(b.name)) - .map((entry) => entry.name); - const componentIndex = componentNames - .map((name) => `export { default as ${name} } from './${name}';`) + const componentIndex = sortedComponentPaths + .map((path) => `export * from '${path}';`) .join('\n'); await builder.apply( typescriptFile.renderTemplateFile({ diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/Alert/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/Alert/index.tsx deleted file mode 100644 index ff5b93b65..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/Alert/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; - -import type { Status, StatusType } from '../../hooks/useStatus.js'; - -import AlertIcon from '../AlertIcon/index.js'; - -interface Props { - type: StatusType; - icon?: React.ReactNode; - className?: string; - children: React.ReactNode; -} - -function getAlertClasses(type: StatusType): string { - switch (type) { - case 'error': { - return 'text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800'; - } - case 'info': { - return 'text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800'; - } - case 'success': { - return 'text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800'; - } - case 'warning': { - return 'text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800'; - } - default: { - // eslint-disable-next-line @typescript-eslint/restrict-template-expressions - throw new Error(`Unknown status type: ${type}`); - } - } -} - -// https://flowbite.com/docs/components/alerts/ - -function Alert({ type, icon, className, children }: Props): ReactElement { - const alertClasses = getAlertClasses(type); - return ( -
- {icon === undefined ? : icon} -
{children}
-
- ); -} - -interface AlertWithStatusProps extends Omit { - status: Status | null; -} - -Alert.WithStatus = function AlertWithStatus({ - status, - ...props -}: AlertWithStatusProps): ReactElement | null { - if (!status) { - return null; - } - return ( - - {status.message} - - ); -}; - -export default Alert; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/AlertIcon/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/AlertIcon/index.tsx deleted file mode 100644 index 3e95d0217..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/AlertIcon/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; -import type { IconType } from 'react-icons'; - -import clsx from 'clsx'; -import { - MdCheckCircleOutline, - MdErrorOutline, - MdOutlineInfo, - MdOutlineWarningAmber, -} from 'react-icons/md'; - -import type { StatusType } from '../../hooks/useStatus.js'; - -interface Props { - className?: string; - type: StatusType; -} - -function getAlertClassAndIcon(type: StatusType): { - colorClasses: string; - Icon: IconType; -} { - switch (type) { - case 'error': { - return { - colorClasses: - 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200', - Icon: MdErrorOutline, - }; - } - case 'info': { - return { - colorClasses: - 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200', - Icon: MdOutlineInfo, - }; - } - case 'success': { - return { - colorClasses: - 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200', - Icon: MdCheckCircleOutline, - }; - } - case 'warning': { - return { - colorClasses: 'text-orange-500 bg-orange-100 dark:bg-orange-700', - Icon: MdOutlineWarningAmber, - }; - } - default: { - throw new Error(`Unknown status type: ${type as string}`); - } - } -} - -function AlertIcon({ className, type }: Props): ReactElement { - const { colorClasses, Icon } = getAlertClassAndIcon(type); - - return ( -
- -
- ); -} - -export default AlertIcon; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/BackButton/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/BackButton/index.tsx deleted file mode 100644 index 0ff0259a3..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/BackButton/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import { MdArrowBack } from 'react-icons/md'; -import { useNavigate } from 'react-router-dom'; - -import LinkButton from '../LinkButton/index.js'; - -interface Props { - className?: string; - href?: string; -} - -function BackButton({ className, href }: Props): ReactElement { - const navigate = useNavigate(); - - return ( - { - if (href) { - navigate(href); - } else { - navigate(-1); - } - }} - > - - Back - - ); -} - -export default BackButton; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/Button/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/Button/index.tsx deleted file mode 100644 index 27493e318..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/Button/index.tsx +++ /dev/null @@ -1,99 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; - -type ButtonColor = 'blue' | 'green' | 'red' | 'light' | 'dark'; - -type ButtonSize = 'small' | 'base' | 'large'; - -export interface ButtonProps { - className?: string; - children: React.ReactNode; - onClick?: React.MouseEventHandler; - disabled?: boolean; - color?: ButtonColor; - size?: ButtonSize; - type?: 'button' | 'submit' | 'reset'; - icon?: React.ReactNode; -} - -function getButtonColorClass(color: ButtonColor): string { - switch (color) { - case 'blue': { - return 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300'; - } - case 'green': { - return 'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300'; - } - case 'red': { - return 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300'; - } - case 'light': { - return 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-200'; - } - case 'dark': { - return 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300'; - } - default: { - throw new Error(`Unknown button color: ${color as string}`); - } - } -} - -function getButtonSizeClass(size: ButtonSize): string { - switch (size) { - case 'small': { - return 'px-3 py-2 text-sm'; - } - case 'base': { - return 'px-5 py-2.5 text-sm'; - } - case 'large': { - return 'px-5 py-3 text-base'; - } - default: { - throw new Error(`Unknown button size: ${size as string}`); - } - } -} - -function Button(props: ButtonProps): ReactElement { - const { - className, - children, - disabled, - size = 'base', - color = 'blue', - type = 'button', - onClick, - icon, - } = props; - return ( - - ); -} - -export default Button; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/ButtonGroup/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/ButtonGroup/index.tsx deleted file mode 100644 index e4f4c784c..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/ButtonGroup/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; - -interface Props { - className?: string; - children?: React.ReactNode; -} - -// adapted from https://flowbite.com/docs/components/button-group/ - -function ButtonGroup({ className, children }: Props): ReactElement { - return ( -
- {children} -
- ); -} - -interface ButtonGroupButtonProps { - className?: string; - children: React.ReactNode; - type?: 'button' | 'submit' | 'reset'; - onClick?: () => void; -} - -ButtonGroup.Button = function ButtonGroupButton({ - className, - children, - type, - onClick, -}: ButtonGroupButtonProps): ReactElement { - return ( - - ); -}; - -export default ButtonGroup; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/Card/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/Card/index.tsx deleted file mode 100644 index 1e0fc8708..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/Card/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; - -interface Props { - className?: string; - children: React.ReactNode; - padding?: boolean; -} - -function Card({ className, padding, children }: Props): ReactElement { - return ( -
- {children} -
- ); -} - -export default Card; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/CheckedInput/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/CheckedInput/index.tsx deleted file mode 100644 index acfd54906..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/CheckedInput/index.tsx +++ /dev/null @@ -1,130 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; -import type { - Control, - FieldError, - FieldPath, - FieldValues, - UseFormRegisterReturn, -} from 'react-hook-form'; - -import clsx from 'clsx'; -import { get, useFormState } from 'react-hook-form'; - -import FormError from '../FormError/index.js'; -import FormLabel from '../FormLabel/index.js'; - -interface Props { - className?: string; - name?: string; - disabled?: boolean; - onChange?: (checked: boolean, value?: string) => void; - checked?: boolean; - value?: string; - type?: 'checkbox' | 'radio'; - register?: UseFormRegisterReturn; -} - -function CheckedInput({ - className, - name, - disabled, - onChange, - checked, - value, - register, - type = 'checkbox', -}: Props): ReactElement { - const onChangeHandler = - onChange && - ((event: React.ChangeEvent): void => { - onChange(event.target.checked, event.target.value); - }); - - const inputProps = { - name, - disabled, - onChange: onChangeHandler, - checked, - value, - type, - ...register, - }; - return ( - - ); -} - -interface CheckedInputLabelledProps extends Props { - label?: string; - error?: React.ReactNode; - horizontalLabel?: boolean; -} - -CheckedInput.Labelled = function SelectInputLabelled({ - label, - className, - error, - horizontalLabel, - ...rest -}: CheckedInputLabelledProps): ReactElement { - if (horizontalLabel) { - return ( -
- - {error && {error}} -
- ); - } - return ( - - ); -}; - -export interface CheckedInputLabelledControllerProps - extends Omit { - control: Control; - name: FieldPath; - noError?: boolean; -} - -CheckedInput.LabelledController = function CheckedInputLabelledController< - T extends FieldValues, ->({ - control, - name, - noError, - ...rest -}: CheckedInputLabelledControllerProps): ReactElement { - const { errors } = useFormState({ control, name }); - const error = get(errors, name) as FieldError | undefined; - - return ( - - ); -}; - -export default CheckedInput; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/ConfirmDialog/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/ConfirmDialog/index.tsx deleted file mode 100644 index 47863cc09..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/ConfirmDialog/index.tsx +++ /dev/null @@ -1,88 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import * as React from 'react'; - -import type { UseConfirmDialogRequestOptions } from '../../hooks/useConfirmDialog.js'; - -import { useConfirmDialogState } from '../../hooks/useConfirmDialog.js'; -import Button from '../Button/index.js'; -import Modal from '../Modal/index.js'; - -/** - * A confirm dialog that is placed at the top level of the page - * enabling the use of the useConfirmDialog hook. - */ -export function ConfirmDialog(): ReactElement { - const { confirmOptions, setConfirmOptions } = useConfirmDialogState(); - - // We need to store the text content in a ref because the Dialog component - // will transition to fade so we need to cache the text while we close. - const textOptionsCached = - React.useRef< - Omit - >(undefined); - - React.useEffect(() => { - if (confirmOptions) { - textOptionsCached.current = { - title: confirmOptions.title, - content: confirmOptions.content, - buttonCancelText: confirmOptions.buttonCancelText, - buttonConfirmText: confirmOptions.buttonConfirmText, - buttonConfirmColor: confirmOptions.buttonConfirmColor, - }; - } - }, [confirmOptions]); - - const { - title, - content, - onCancel, - onConfirm, - buttonCancelText = 'Cancel', - buttonConfirmText = 'Confirm', - buttonConfirmColor, - } = { - ...textOptionsCached.current, - ...confirmOptions, - }; - - return ( - { - setConfirmOptions(undefined); - }} - width="small" - > - {title} - {content} - - - - - - ); -} - -export default ConfirmDialog; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/ErrorableLoader/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/ErrorableLoader/index.tsx deleted file mode 100644 index 4f98389c8..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/ErrorableLoader/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import Alert from '../Alert/index.js'; -import Spinner from '../Spinner/index.js'; - -interface Props { - className?: string; - error?: Error | string | null; -} - -function getErrorString(error: Error | string): string { - if (error instanceof Error) { - return 'Sorry, we could not load the data.'; - } - return error; -} - -function ErrorableLoader({ className, error }: Props): ReactElement { - if (!error) { - return ; - } - return ( - - {getErrorString(error)} - - ); -} - -export default ErrorableLoader; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/FormError/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/FormError/index.tsx deleted file mode 100644 index a378dc923..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/FormError/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; - -interface Props { - className?: string; - children: React.ReactNode; -} - -function FormError({ className, children }: Props): ReactElement { - return ( -
- {children} -
- ); -} - -export default FormError; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/FormLabel/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/FormLabel/index.tsx deleted file mode 100644 index 445d340d0..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/FormLabel/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; - -interface Props { - className?: string; - children: React.ReactNode; -} - -function FormLabel({ className, children }: Props): ReactElement { - return ( -
- {children} -
- ); -} - -export default FormLabel; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/LinkButton/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/LinkButton/index.tsx deleted file mode 100644 index 929e70b6c..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/LinkButton/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -// @ts-nocheck - -import type React from 'react'; -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; - -interface Props { - className?: string; - children: React.ReactNode; - onClick?: React.MouseEventHandler; - type?: 'button' | 'submit' | 'reset'; - negative?: boolean; - disabled?: boolean; -} - -function LinkButton({ - className, - children, - onClick, - type = 'button', - negative, - disabled, -}: Props): ReactElement { - const colorClass = (() => { - if (disabled) { - return 'text-gray-400 dark:text-gray-500'; - } - if (negative) { - return 'text-red-600 dark:text-red-500'; - } - return 'text-blue-600 dark:text-blue-500'; - })(); - - return ( - - ); -} - -export default LinkButton; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/ListGroup/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/ListGroup/index.tsx deleted file mode 100644 index d2848f188..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/ListGroup/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; - -interface Props { - className?: string; - children: React.ReactNode; -} - -// based off https://flowbite.com/docs/components/list-group/ - -function ListGroup({ className, children }: Props): ReactElement { - return ( -
    - {children} -
- ); -} - -interface ListGroupItemProps { - className?: string; - children: React.ReactNode; -} - -ListGroup.Item = function ListGroupItem({ - className, - children, -}: ListGroupItemProps): ReactElement { - return ( -
  • - {children} -
    • - ); -}; - -export default ListGroup; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/Modal/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/Modal/index.tsx deleted file mode 100644 index 3b23e4b69..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/Modal/index.tsx +++ /dev/null @@ -1,167 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import { - Dialog, - DialogPanel, - DialogTitle, - Transition, - TransitionChild, -} from '@headlessui/react'; -import clsx from 'clsx'; -import { Fragment } from 'react'; - -type ModalWidth = 'small' | 'base' | 'large'; - -interface Props { - className?: string; - isOpen?: boolean; - onClose: () => void; - children: React.ReactNode; - width?: ModalWidth; -} - -// Adapted from https://flowbite.com/docs/components/modal/ - -function getModalWidthClass(width: ModalWidth): string { - switch (width) { - case 'small': { - return 'w-72 md:w-72'; - } - case 'base': { - return 'w-72 md:w-[50rem]'; - } - case 'large': { - return 'w-72 md:w-[80rem]'; - } - default: { - throw new Error(`Unknown modal width: ${width as string}`); - } - } -} - -function Modal({ - className, - isOpen, - onClose, - children, - width = 'base', -}: Props): ReactElement { - return ( - - - - - - ); -} - -interface ModalHeaderProps { - className?: string; - children: React.ReactNode; - onClose?: () => void; -} - -Modal.Header = function ModalHeader({ - className, - children, - onClose, -}: ModalHeaderProps): ReactElement { - return ( -
    - {children} - {onClose && ( - - )} -
    - ); -}; - -interface ModalBodyProps { - className?: string; - children: React.ReactNode; -} - -Modal.Body = function ModalBody({ - className, - children, -}: ModalBodyProps): ReactElement { - return
    {children}
    ; -}; - -interface ModalFooterProps { - className?: string; - children: React.ReactNode; -} - -Modal.Footer = function ModalFooter({ - className, - children, -}: ModalFooterProps): ReactElement { - return ( -
    - {children} -
    - ); -}; - -export default Modal; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/NotFoundCard/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/NotFoundCard/index.tsx deleted file mode 100644 index 7339faf53..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/NotFoundCard/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import { useNavigate } from 'react-router-dom'; - -import Button from '../Button/index.js'; -import Card from '../Card/index.js'; - -function NotFoundCard(): ReactElement { - const navigate = useNavigate(); - return ( -
    - -
    404
    -
    Page Not Found
    -

    - Sorry, we were unable to find the page you were looking for. -

    - -     -
    - ); -} - -export default NotFoundCard; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/ReactDatePickerInput/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/ReactDatePickerInput/index.tsx deleted file mode 100644 index 154723355..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/ReactDatePickerInput/index.tsx +++ /dev/null @@ -1,162 +0,0 @@ -// @ts-nocheck - -import type { - FocusEventHandler, - KeyboardEventHandler, - ReactElement, -} from 'react'; -import type { - ChangeHandler, - Control, - FieldPath, - FieldPathValue, - FieldValues, - RefCallBack, - UseFormRegisterReturn, -} from 'react-hook-form'; - -import { format, parseISO } from 'date-fns'; -import { forwardRef, useMemo } from 'react'; -import DatePicker from 'react-datepicker'; -import { useController } from 'react-hook-form'; - -import FormError from '../FormError/index.js'; -import FormLabel from '../FormLabel/index.js'; -import TextInput from '../TextInput/index.js'; - -import 'react-datepicker/dist/react-datepicker.css'; - -interface Props { - className?: string; - onChange: (newValue?: string | null) => void; - onBlur?: () => void; - value: string | null; - showTimeSelect?: boolean; - isClearable?: boolean; -} - -const DatePickerTextInput = forwardRef< - HTMLInputElement, - { - onChange?: ChangeHandler; - onClick?: () => void; - onBlur?: ChangeHandler; - onFocus?: FocusEventHandler; - onKeyDown?: KeyboardEventHandler; - value?: string; - placeholder?: string; - name?: string; - } ->(({ onChange, onBlur, name, ...rest }, ref) => ( - -)); - -DatePickerTextInput.displayName = 'DatePickerTextInput'; - -function ReactDatePickerInput({ - className, - onChange, - onBlur, - value, - showTimeSelect, - isClearable, -}: Props): ReactElement { - const selectedDate = useMemo(() => (value ? parseISO(value) : null), [value]); - return ( - { - onChange( - date && - (showTimeSelect ? date.toISOString() : format(date, 'yyyy-MM-dd')), - ); - }} - onBlur={onBlur} - selected={selectedDate} - customInput={} - showTimeSelect={showTimeSelect} - timeFormat="HH:mm" - showPopperArrow - dateFormat={showTimeSelect ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'} - isClearable={isClearable} - placeholderText="Select a date" - /> - ); -} - -interface ReactDatePickerInputLabelledProps extends Props { - label?: React.ReactNode; - error?: React.ReactNode; -} - -ReactDatePickerInput.Labelled = function ReactDatePickerInputLabelled({ - label, - className, - error, - ...rest -}: ReactDatePickerInputLabelledProps): ReactElement { - return ( -
    - {label && {label}} - - {error && {error}} -
    - ); -}; - -interface ReactDatePickerInputLabelledControllerProps< - TFieldValues extends FieldValues = FieldValues, - TFieldName extends FieldPath = FieldPath, -> extends Omit< - ReactDatePickerInputLabelledProps, - 'onChange' | 'onBlur' | 'value' | 'error' - > { - className?: string; - control: Control; - name: TFieldName; -} - -ReactDatePickerInput.LabelledController = - function ReactDatePickerInputController< - TFieldValues extends FieldValues = FieldValues, - TFieldName extends FieldPath = FieldPath, - >({ - name, - control, - ...rest - }: ReactDatePickerInputLabelledControllerProps< - TFieldValues, - TFieldName - >): ReactElement { - const { - field, - fieldState: { error }, - } = useController({ - name, - control, - }); - - return ( - { - field.onChange(val as FieldPathValue); - }} - onBlur={field.onBlur} - value={field.value as string} - /> - ); - }; - -export default ReactDatePickerInput; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/ReactSelectInput/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/ReactSelectInput/index.tsx deleted file mode 100644 index bf81e6ab0..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/ReactSelectInput/index.tsx +++ /dev/null @@ -1,137 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; -import type { - Control, - FieldPath, - FieldPathValue, - FieldValues, - PathValue, -} from 'react-hook-form'; - -import clsx from 'clsx'; -import { useController } from 'react-hook-form'; -import Select from 'react-select'; - -import FormError from '../FormError/index.js'; -import FormLabel from '../FormLabel/index.js'; - -interface Props { - className?: string; - options: { label: string; value: ValueType }[]; - onChange: (newValue?: ValueType) => void; - onBlur?: () => void; - value: ValueType; - fixedPosition?: boolean; -} - -function ReactSelectInput({ - className, - onChange, - onBlur, - options, - value, - fixedPosition, -}: Props): ReactElement { - const selectedOption = options.find((option) => option.value === value); - - const fixedPositionProps = fixedPosition - ? { - styles: { - menuPortal: (base: Record) => ({ - ...base, - zIndex: 9999, - }), - }, - menuPosition: 'fixed' as const, - menuPortalTarget: document.body, - } - : {}; - - return ( - - {options.map(({ value: optionValue, label }) => ( - - ))} - - ); -} - -interface SelectInputLabelledProps extends Props { - label?: string; - error?: React.ReactNode; -} - -SelectInput.Labelled = function SelectInputLabelled({ - label, - className, - error, - ...rest -}: SelectInputLabelledProps): ReactElement { - return ( - - ); -}; - -interface SelectInputLabelledController - extends Omit { - control: Control; - name: FieldPath; -} - -SelectInput.LabelledController = function SelectInputController< - T extends FieldValues, ->({ name, control, ...rest }: SelectInputLabelledController): ReactElement { - const { errors } = useFormState({ name, control }); - const error = get(errors, name) as FieldError | undefined; - - return ( - - ); -}; - -export default SelectInput; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/Sidebar/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/Sidebar/index.tsx deleted file mode 100644 index 840ad0be1..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/Sidebar/index.tsx +++ /dev/null @@ -1,216 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import { - Disclosure, - DisclosureButton, - DisclosurePanel, -} from '@headlessui/react'; -import clsx from 'clsx'; -import { MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md'; -import { Link, useMatch, useResolvedPath } from 'react-router-dom'; - -interface Props { - className?: string; - children: React.ReactNode; -} - -// https://flowbite.com/docs/components/sidebar/ - -function Sidebar({ className, children }: Props): ReactElement { - return ( - - ); -} - -interface SidebarHeaderProps { - className?: string; - children: React.ReactNode; -} - -Sidebar.Header = function SidebarHeader({ - className, - children, -}: SidebarHeaderProps): ReactElement { - return
    {children}
    ; -}; - -interface SidebarLinkGroupProps { - className?: string; - children: React.ReactNode; -} - -Sidebar.LinkGroup = function SidebarLinkGroup({ - className, - children, -}: SidebarLinkGroupProps): ReactElement { - return
      {children}
    ; -}; - -interface SidebarButtonProps { - className?: string; - Icon?: React.ComponentType<{ className?: string }>; - onClick?: React.MouseEventHandler; - children: React.ReactNode; -} - -interface SidebarItemProps { - className?: string; - children: React.ReactNode; -} - -Sidebar.Item = function SidebarItem({ - className, - children, -}: SidebarItemProps): ReactElement { - return
  • {children}
    • ; -}; - -Sidebar.ButtonItem = function SidebarButton({ - className, - Icon, - onClick, - children, -}: SidebarButtonProps): ReactElement { - return ( -
  • - -
    • - ); -}; - -interface SidebarLinkProps { - className?: string; - Icon?: React.ComponentType<{ className?: string }>; - to: string; - children: React.ReactNode; -} - -Sidebar.LinkItem = function SidebarLink({ - className, - Icon, - to, - children, -}: SidebarLinkProps): ReactElement { - const resolved = useResolvedPath(to); - const match = useMatch({ path: `${resolved.pathname}/*` }); - - return ( -
  • - - {Icon ? ( - <> - - {children} - - ) : ( - {children} - )} - -
    • - ); -}; - -interface SidebarDropdownProps { - className?: string; - Icon?: React.ComponentType<{ className?: string }>; - label: string; - children: React.ReactNode; -} - -Sidebar.Dropdown = function SidebarDropdown({ - className, - Icon, - label, - children, -}: SidebarDropdownProps): ReactElement { - return ( - - {({ open }) => ( - <> - - {Icon ? ( - <> - - - {label} - - - ) : ( - {label} - )} - {open ? ( - - ) : ( - - )} - - - {children} - - - )} - - ); -}; - -interface SidebarDropdownLinkItemProps { - className?: string; - to: string; - children: React.ReactNode; - withParentIcon?: boolean; -} - -Sidebar.DropdownLinkItem = function SidebarDropdownLinkItem({ - className, - to, - children, - withParentIcon, -}: SidebarDropdownLinkItemProps): ReactElement { - const resolved = useResolvedPath(to); - const match = useMatch({ path: resolved.pathname }); - - return ( -
  • - - {children} - -
    • - ); -}; - -export default Sidebar; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/Spinner/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/Spinner/index.tsx deleted file mode 100644 index 72843a784..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/Spinner/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; -import { useEffect, useState } from 'react'; - -interface Props { - className?: string; - size?: 'small' | 'medium' | 'large'; - center?: boolean; - noDelay?: boolean; -} - -function Spinner({ - className, - size = 'medium', - center, - noDelay, -}: Props): ReactElement | null { - const [show, setShow] = useState(noDelay); - - useEffect(() => { - if (noDelay) setShow(true); - - const showDelayTimeout = setTimeout( - () => { - setShow(true); - }, - noDelay ? 0 : 500, - ); - return () => { - clearTimeout(showDelayTimeout); - }; - }, [noDelay]); - - if (!show) { - return null; - } - - return ( - - - - - ); -} - -export default Spinner; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/Table/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/Table/index.tsx deleted file mode 100644 index 7bd174105..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/Table/index.tsx +++ /dev/null @@ -1,132 +0,0 @@ -// @ts-nocheck - -import type { ReactElement } from 'react'; - -import clsx from 'clsx'; - -interface Props { - className?: string; - children: React.ReactNode; -} - -// https://flowbite.com/docs/components/tables/ - -function Table({ className, children }: Props): ReactElement { - return ( -
    -
    -
    -
    - {children}
    -
    -
    -
    -
    - ); -} - -interface TableHeadProps { - className?: string; - children: React.ReactNode; -} - -Table.Head = function TableHead({ - className, - children, -}: TableHeadProps): ReactElement { - return ( - - {children} - - ); -}; - -interface TableHeadRowProps { - className?: string; - children: React.ReactNode; -} - -Table.HeadRow = function TableHeadRow({ - className, - children, -}: TableHeadRowProps): ReactElement { - return {children}; -}; - -interface TableHeadCellProps { - className?: string; - children: React.ReactNode; -} - -Table.HeadCell = function TableHeadCell({ - className, - children, -}: TableHeadCellProps): ReactElement { - return ( - - {children} - - ); -}; - -interface TableBodyProps { - className?: string; - children: React.ReactNode; -} - -Table.Body = function TableBody({ - className, - children, -}: TableBodyProps): ReactElement { - return {children}; -}; - -interface TableRowProps { - className?: string; - children: React.ReactNode; -} - -Table.Row = function TableRow({ - className, - children, -}: TableRowProps): ReactElement { - return ( - - {children} - - ); -}; - -interface TableCellProps { - className?: string; - children: React.ReactNode; -} - -Table.Cell = function TableCell({ - className, - children, -}: TableCellProps): ReactElement { - return ( - - {children} - - ); -}; - -export default Table; diff --git a/packages/react-generators/src/generators/core/react-components/templates/src/components/TextAreaInput/index.tsx b/packages/react-generators/src/generators/core/react-components/templates/src/components/TextAreaInput/index.tsx deleted file mode 100644 index 6c8f8bef0..000000000 --- a/packages/react-generators/src/generators/core/react-components/templates/src/components/TextAreaInput/index.tsx +++ /dev/null @@ -1,107 +0,0 @@ -// @ts-nocheck - -import type { ReactElement, TextareaHTMLAttributes } from 'react'; -import type { - Control, - FieldError, - FieldPath, - FieldValues, - UseFormRegisterReturn, -} from 'react-hook-form'; - -import clsx from 'clsx'; -import { get, useFormState } from 'react-hook-form'; - -import FormError from '../FormError/index.js'; -import FormLabel from '../FormLabel/index.js'; - -interface Props { - className?: string; - disabled?: boolean; - placeholder?: string; - name?: string; - register?: UseFormRegisterReturn; - onChange?: (value: string) => void; - onBlur?: () => void; - value?: string; - rows?: number; -} - -const TextAreaInput = function TextInput({ - className, - disabled, - placeholder, - name, - onChange, - onBlur, - value, - register, - rows, -}: Props): ReactElement { - const inputProps: TextareaHTMLAttributes = { - name, - placeholder, - disabled, - onChange: - onChange && - ((e) => { - onChange(e.target.value); - }), - onBlur, - value, - rows, - ...register, - }; - return ( -