udecode · zbeyens · Sep 20, 2023 · Sep 20, 2023 · Sep 20, 2023
diff --git a/.changeset/twelve-cars-drop.md 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
@@ -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
@@ -42,7 +42,12 @@ export default function RootLayout({ children }: RootLayoutProps) {
       <html lang="en" suppressHydrationWarning>
         <head />
         <body>
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <ThemeProvider 
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
             {children}
           </ThemeProvider>
         </body>

diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
@@ -25,20 +25,22 @@ const addOptionsSchema = z.object({
   yes: z.boolean(),
   overwrite: z.boolean(),
   cwd: z.string(),
+  all: z.boolean(),
   path: z.string().optional(),
 });
 
 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 <cwd>',
     'the working directory. defaults to the current directory.',
     process.cwd()
   )
+  .option('-a, --all', 'add all available components', false)
   .option('-p, --path <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
@@ -145,38 +145,38 @@ export function applyColorMapping(
 
   // Build color mappings.
   const classNames = input.split(' ');
-  const lightMode: string[] = [];
-  const darkMode: string[] = [];
+  const lightMode = new Set<string>();
+  const darkMode = new Set<string>();
   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}` : '')
       );
       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
@@ -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 <div className={cn('bg-white border border-stone-200 dark:bg-stone-950 dark:border-stone-800')}>foo</div>
+}''
+    "
+`;
+
 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 <div className={cn('bg-white hover:bg-stone-100 dark:bg-stone-950 dark:hover:bg-stone-800', true && 'text-stone-50 sm:focus:text-stone-900 dark:text-stone-900 dark:sm:focus:text-stone-50')}>foo</div>
-}
+}''
+    "
+`;
+
+exports[`transform css vars false with cn 2`] = `
+"import * as React from 'react'
+export function Foo() {
+  return <div className={cn('bg-white border border-stone-200 dark:bg-stone-950 dark:border-stone-800')}>foo</div>
+}''
     "
 `;
 

diff --git 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
@@ -58,7 +58,30 @@ test('transform css vars false with cn', async () => {
       raw: `import * as React from 'react'
 export function Foo() {
 	return <div className={cn('bg-background hover:bg-muted', true && 'text-primary-foreground sm:focus:text-accent-foreground')}>foo</div>
-}
+}"
+    `,
+      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 <div className={cn("bg-background border border-input")}>foo</div>
+}"
     `,
       config: {
         tailwind: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -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:
@@ Expand Down @@