diff --git a/.changeset/twelve-cars-drop.md b/.changeset/twelve-cars-drop.md new file mode 100644 index 0000000000..1eb1766561 --- /dev/null +++ b/.changeset/twelve-cars-drop.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-ui": minor +--- + +- Add command `-a` for adding all available components diff --git a/apps/www/content/docs/components/cli.mdx b/apps/www/content/docs/components/cli.mdx index 6b5807a1f6..c11df4c407 100644 --- a/apps/www/content/docs/components/cli.mdx +++ b/apps/www/content/docs/components/cli.mdx @@ -58,7 +58,8 @@ npx @udecode/plate-ui@latest add [component] You will be presented with a list of components to choose from: ```txt -Which components would you like to add? › Space to select. Return to submit. +Which components would you like to add? › Space to select. A to toggle all. +Enter to submit. ◯ align-dropdown-menu ◯ avatar diff --git a/apps/www/content/docs/components/dark-mode/next.mdx b/apps/www/content/docs/components/dark-mode/next.mdx index 49bdb1eb31..9bcb06461a 100644 --- a/apps/www/content/docs/components/dark-mode/next.mdx +++ b/apps/www/content/docs/components/dark-mode/next.mdx @@ -42,7 +42,12 @@ export default function RootLayout({ children }: RootLayoutProps) { - + {children} diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts index af19405856..a27830b2ef 100644 --- a/packages/cli/src/commands/add.ts +++ b/packages/cli/src/commands/add.ts @@ -25,6 +25,7 @@ const addOptionsSchema = z.object({ yes: z.boolean(), overwrite: z.boolean(), cwd: z.string(), + all: z.boolean(), path: z.string().optional(), }); @@ -32,13 +33,14 @@ export const add = new Command() .name('add') .description('add a component to your project') .argument('[components...]', 'the components to add') - .option('-y, --yes', 'skip confirmation prompt.', false) + .option('-y, --yes', 'skip confirmation prompt.', true) .option('-o, --overwrite', 'overwrite existing files.', false) .option( '-c, --cwd ', 'the working directory. defaults to the current directory.', process.cwd() ) + .option('-a, --all', 'add all available components', false) .option('-p, --path ', 'the path to add the component to.') .action(async (components, opts) => { try { @@ -66,8 +68,10 @@ export const add = new Command() const registryIndex = await getRegistryIndex(); - let selectedComponents = options.components; - if (!options.components?.length) { + let selectedComponents = options.all + ? registryIndex.map((entry) => entry.name) + : options.components; + if (!options.components?.length && !options.all) { const { components } = await prompts({ type: 'multiselect', name: 'components', @@ -77,6 +81,9 @@ export const add = new Command() choices: registryIndex.map((entry) => ({ title: entry.name, value: entry.name, + selected: options.all + ? true + : options.components?.includes(entry.name), })), }); selectedComponents = components; @@ -132,15 +139,27 @@ export const add = new Command() if (existingComponent.length > 0 && !options.overwrite) { if (selectedComponents.includes(item.name)) { - logger.warn( - `Component ${item.name} already exists. Use ${chalk.green( - '--overwrite' - )} to overwrite.` - ); - process.exit(1); - } + spinner.stop(); + const { overwrite } = await prompts({ + type: 'confirm', + name: 'overwrite', + message: `Component ${item.name} already exists. Would you like to overwrite?`, + initial: false, + }); + + if (!overwrite) { + logger.info( + `Skipped ${item.name}. To overwrite, run with the ${chalk.green( + '--overwrite' + )} flag.` + ); + continue; + } - continue; + spinner.start(`Installing ${item.name}...`); + } else { + continue; + } } for (const file of item.files) { diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts index 42e15cad05..18993e113e 100644 --- a/packages/cli/src/utils/transformers/transform-css-vars.ts +++ b/packages/cli/src/utils/transformers/transform-css-vars.ts @@ -145,27 +145,27 @@ export function applyColorMapping( // Build color mappings. const classNames = input.split(' '); - const lightMode: string[] = []; - const darkMode: string[] = []; + const lightMode = new Set(); + const darkMode = new Set(); for (const className of classNames) { const [variant, value, modifier] = splitClassName(className); const prefix = PREFIXES.find((pre) => value?.startsWith(pre)); if (!prefix) { - if (!lightMode.includes(className)) { - lightMode.push(className); + if (!lightMode.has(className)) { + lightMode.add(className); } continue; } const needle = value?.replace(prefix, ''); if (needle && needle in mapping.light) { - lightMode.push( + lightMode.add( [variant, `${prefix}${mapping.light[needle]}`] .filter(Boolean) .join(':') + (modifier ? `/${modifier}` : '') ); - darkMode.push( + darkMode.add( ['dark', variant, `${prefix}${mapping.dark[needle]}`] .filter(Boolean) .join(':') + (modifier ? `/${modifier}` : '') @@ -173,10 +173,10 @@ export function applyColorMapping( continue; } - if (!lightMode.includes(className)) { - lightMode.push(className); + if (!lightMode.has(className)) { + lightMode.add(className); } } - return lightMode.join(' ') + ' ' + darkMode.join(' ').trim(); + return [...Array.from(lightMode), ...Array.from(darkMode)].join(' ').trim(); } diff --git a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap index 5ee8800ec9..981b504a8c 100644 --- a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap +++ b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap @@ -1,5 +1,13 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`transform css vars 4`] = ` +"import * as React from \\'react\\' +export function Foo() { + return
foo
+}'' + " +`; + exports[`transform css vars false 1`] = ` "import * as React from 'react' export function Foo() { @@ -12,7 +20,15 @@ exports[`transform css vars false with cn 1`] = ` "import * as React from 'react' export function Foo() { return
foo
-} +}'' + " +`; + +exports[`transform css vars false with cn 2`] = ` +"import * as React from 'react' +export function Foo() { + return
foo
+}'' " `; diff --git a/packages/cli/test/utils/apply-color-mapping.test.ts b/packages/cli/test/utils/apply-color-mapping.test.ts index 2015a6b361..b0b673db7a 100644 --- a/packages/cli/test/utils/apply-color-mapping.test.ts +++ b/packages/cli/test/utils/apply-color-mapping.test.ts @@ -64,7 +64,7 @@ describe('apply color mapping', async () => { input: 'text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive', output: - 'text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900', + 'text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900', }, { input: diff --git a/packages/cli/test/utils/transform-css-vars.test.ts b/packages/cli/test/utils/transform-css-vars.test.ts index 7ecabd10ac..04c800efec 100644 --- a/packages/cli/test/utils/transform-css-vars.test.ts +++ b/packages/cli/test/utils/transform-css-vars.test.ts @@ -58,7 +58,30 @@ test('transform css vars false with cn', async () => { raw: `import * as React from 'react' export function Foo() { return
foo
-} +}" + `, + config: { + tsx: true, + tailwind: { + baseColor: 'stone', + cssVariables: false, + }, + aliases: { + components: '@/components', + utils: '@/lib/utils', + }, + }, + baseColor: stone, + }) + ).toMatchSnapshot(); + + expect( + await transform({ + filename: 'test.ts', + raw: `import * as React from "react" +export function Foo() { + return
foo
+}" `, config: { tailwind: {