Merge pull request #2887 from udecode/sync-shadcn

Sync shadcn

.changeset/tender-ads-compare.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-ui": minor
+---
+
+add automatic config detection for Next.js, add support for devDependencies

apps/www/next.config.mjs

@@ -2,7 +2,7 @@
 
 const nextConfig = async (phase, { defaultConfig }) => {
   /**
-   * @type {import('next').NextConfig}
+   * @type {import("next").NextConfig}
    */
   const config = {
     // Enable React strict mode.
@@ -12,11 +12,24 @@ const nextConfig = async (phase, { defaultConfig }) => {
     // Configure domains to allow for optimized image loading.
     // https://nextjs.org/docs/basic-features/image-optimization#domains
     images: {
-      domains: [
-        'cdn.discordapp.com',
-        'lh3.googleusercontent.com',
-        'avatars.githubusercontent.com',
-      ],
+      remotePatterns: [
+        {
+          protocol: "https",
+          hostname: "cdn.discordapp.com"
+        },
+        {
+          protocol: "https",
+          hostname: "lh3.googleusercontent.com"
+        },
+        {
+          protocol: "https",
+          hostname: "avatars.githubusercontent.com"
+        },
+        {
+          protocol: "https",
+          hostname: "images.unsplash.com"
+        }
+      ]
     },
 
     // typescript: {
@@ -33,8 +46,8 @@ const nextConfig = async (phase, { defaultConfig }) => {
       esmExternals: false,
       // Specify external packages that should be excluded from server-side rendering.
       // https://beta.nextjs.org/docs/api-reference/next-config#servercomponentsexternalpackages
-      serverComponentsExternalPackages: ['@prisma/client'],
-    },
+      serverComponentsExternalPackages: ["@prisma/client"]
+    }
 
     // redirects() {
     //   return [
@@ -71,22 +84,22 @@ const nextConfig = async (phase, { defaultConfig }) => {
     //   ];
     // },
   };
-  if (phase === 'phase-development-server') {
-    const fs = await import('node:fs');
-    const glob = await import('glob').then((mod) => mod.default);
+  if (phase === "phase-development-server") {
+    const fs = await import("node:fs");
+    const glob = await import("glob").then((mod) => mod.default);
 
     const packageNames = new glob.GlobSync(
-      '../../packages/**/package.json'
+      "../../packages/**/package.json"
     ).found
       .map((file) => {
         try {
-          const packageJson = JSON.parse(fs.readFileSync(file, 'utf8'));
+          const packageJson = JSON.parse(fs.readFileSync(file, "utf8"));
           return packageJson.name;
         } catch (error) {
           return null;
         }
       })
-      .filter((pkg) => pkg?.startsWith('@udecode'));
+      .filter((pkg) => pkg?.startsWith("@udecode"));
 
     config.transpilePackages = packageNames;
   }

apps/www/package.json

@@ -115,7 +115,6 @@
     "embla-carousel-react": "8.0.0-rc15",
     "framer-motion": "^10.16.4",
     "geist": "^1.1.0",
-    "jotai": "^2.6.0",
     "lodash.template": "^4.5.0",
     "lucide-react": "^0.288.0",
     "next": "14.0.4",

apps/www/src/registry/schema.ts

@@ -4,6 +4,7 @@ export const registrySchema = z.array(
   z.object({
     name: z.string(),
     dependencies: z.array(z.string()).optional(),
+    devDependencies: z.array(z.string()).optional(),
     registryDependencies: z.array(z.string()).optional(),
     files: z.array(z.string()),
     items: z.array(z.string()).optional(),

packages/cli/package.json

@@ -48,6 +48,7 @@
     "cosmiconfig": "^8.2.0",
     "diff": "^5.1.0",
     "execa": "^7.1.1",
+    "fast-glob": "^3.3.2",
     "fs-extra": "^11.1.1",
     "https-proxy-agent": "^6.2.1",
     "lodash.template": "^4.5.0",

packages/cli/src/commands/add.ts

@@ -176,9 +176,10 @@ export const add = new Command()
           await fs.writeFile(filePath, content);
         }
 
+        const packageManager = await getPackageManager(cwd);
+
         // Install dependencies.
         if (item.dependencies?.length) {
-          const packageManager = await getPackageManager(cwd);
           await execa(
             packageManager,
             [
@@ -190,6 +191,21 @@ export const add = new Command()
             }
           );
         }
+
+        // Install devDependencies.
+        if (item.devDependencies?.length) {
+          await execa(
+            packageManager,
+            [
+              packageManager === 'npm' ? 'install' : 'add',
+              '-D',
+              ...item.devDependencies,
+            ],
+            {
+              cwd,
+            }
+          );
+        }
       }
       spinner.succeed(`Done.`);
     } catch (error) {

packages/cli/src/commands/init.ts

@@ -20,6 +20,7 @@ import {
   resolveConfigPaths,
 } from '../utils/get-config';
 import { getPackageManager } from '../utils/get-package-manager';
+import { getProjectConfig, preFlight } from '../utils/get-project-info';
 import { handleError } from '../utils/handle-error';
 import { logger } from '../utils/logger';
 import {
@@ -42,12 +43,14 @@ const PROJECT_DEPENDENCIES = [
 const initOptionsSchema = z.object({
   cwd: z.string(),
   yes: z.boolean(),
+  defaults: z.boolean(),
 });
 
 export const init = new Command()
   .name('init')
   .description('initialize your project and install dependencies')
   .option('-y, --yes', 'skip confirmation prompt.', false)
+  .option('-d, --defaults,', 'use default configuration.', false)
   .option(
     '-c, --cwd <cwd>',
     'the working directory. defaults to the current directory.',
@@ -64,15 +67,28 @@ export const init = new Command()
         process.exit(1);
       }
 
-      // Read config.
-      const existingConfig = await getConfig(cwd);
-      const config = await promptForConfig(cwd, existingConfig, options.yes);
+      preFlight(cwd);
 
-      await runInit(cwd, config);
+      const projectConfig = await getProjectConfig(cwd);
+      if (projectConfig) {
+        const config = await promptForMinimalConfig(
+          cwd,
+          projectConfig,
+          opts.defaults
+        );
+        await runInit(cwd, config);
+      } else {
+        // Read config.
+        const existingConfig = await getConfig(cwd);
+        const config = await promptForConfig(cwd, existingConfig, options.yes);
+        await runInit(cwd, config);
+      }
 
       logger.info('');
       logger.info(
-        `${chalk.green('Success!')} Project initialization completed.`
+        `${chalk.green(
+          'Success!'
+        )} Project initialization completed. You may now add components.`
       );
       logger.info('');
     } catch (error) {
@@ -206,6 +222,80 @@ export async function promptForConfig(
   return await resolveConfigPaths(cwd, config);
 }
 
+export async function promptForMinimalConfig(
+  cwd: string,
+  defaultConfig: Config,
+  defaults = false
+) {
+  const highlight = (text: string) => chalk.cyan(text);
+  let style = defaultConfig.style;
+  let baseColor = defaultConfig.tailwind.baseColor;
+  let cssVariables = defaultConfig.tailwind.cssVariables;
+
+  if (!defaults) {
+    const styles = await getRegistryStyles();
+    const baseColors = await getRegistryBaseColors();
+
+    const options = await prompts([
+      {
+        type: 'select',
+        name: 'style',
+        message: `Which ${highlight('style')} would you like to use?`,
+        choices: styles.map((style) => ({
+          title: style.label,
+          value: style.name,
+        })),
+      },
+      {
+        type: 'select',
+        name: 'tailwindBaseColor',
+        message: `Which color would you like to use as ${highlight(
+          'base color'
+        )}?`,
+        choices: baseColors.map((color) => ({
+          title: color.label,
+          value: color.name,
+        })),
+      },
+      {
+        type: 'toggle',
+        name: 'tailwindCssVariables',
+        message: `Would you like to use ${highlight(
+          'CSS variables'
+        )} for colors?`,
+        initial: defaultConfig?.tailwind.cssVariables,
+        active: 'yes',
+        inactive: 'no',
+      },
+    ]);
+
+    style = options.style;
+    baseColor = options.tailwindBaseColor;
+    cssVariables = options.tailwindCssVariables;
+  }
+
+  const config = rawConfigSchema.parse({
+    $schema: defaultConfig?.$schema,
+    style,
+    tailwind: {
+      ...defaultConfig?.tailwind,
+      baseColor,
+      cssVariables,
+    },
+    rsc: defaultConfig?.rsc,
+    aliases: defaultConfig?.aliases,
+  });
+
+  // Write to file.
+  logger.info('');
+  const spinner = ora(`Writing components.json...`).start();
+  const targetPath = path.resolve(cwd, 'components.json');
+  await fs.writeFile(targetPath, JSON.stringify(config, null, 2), 'utf8');
+  spinner.succeed();
+
+  return await resolveConfigPaths(cwd, config);
+}
+
 export async function runInit(cwd: string, config: Config) {
   const spinner = ora(`Initializing project...`)?.start();