feat(shadcn-ui): move shadcn-ui to shadcn (#341)

Fix #309 #340 Move `shadcn-ui` CLI to `shadcn` CLI for add components.
TriPSs · Nov 15, 2024 · df7b2b9 · df7b2b9
2 parents 9d25287 + 8c4a8d8
commit df7b2b9
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 20 deletions.
diff --git a/e2e/shadcn-ui-e2e/tests/shadcn-ui.spec.ts b/e2e/shadcn-ui-e2e/tests/shadcn-ui.spec.ts
@@ -1,6 +1,6 @@
 import { ensureNxProject } from '../../utils/workspace'
 import { runNxCommandAsync } from '../../utils/run-nx-command-async'
-import { checkFilesExist } from '@nx/plugin/testing'
+import { checkFilesExist, readJson } from '@nx/plugin/testing'
 
 describe('shadcn/ui e2e', () => {
 
@@ -22,14 +22,32 @@ describe('shadcn/ui e2e', () => {
       `${utilsLibName}/src/index.ts`,
       'components.json'
     )).not.toThrow()
+
+    const componentsJSON = readJson('components.json')
+    expect(componentsJSON.tailwind.config).toEqual(`${utilsLibName}/src/tailwind.config.ts`)
+    expect(componentsJSON.tailwind.css).toEqual(`${utilsLibName}/src/global.css`)
+    expect(componentsJSON.aliases.hooks).toEqual(`@proj/${uiLibName}/hooks`)
+
+    const tsconfigJSON = readJson('tsconfig.base.json')
+    expect(tsconfigJSON.compilerOptions.paths[`@proj/${uiLibName}`][0]).toEqual(`${uiLibName}/src`)
+    expect(tsconfigJSON.compilerOptions.paths[`@proj/${utilsLibName}`][0]).toEqual(`${utilsLibName}/src`)
   })
 
-  // it('should be able add a button', async () => {
-  //   await runNxCommandAsync(`add ${uiLibName} button`)
-  //
-  //   expect(() => checkFilesExist(
-  //     `${uiLibName}/src/button.tsx`,
-  //   )).not.toThrow()
-  // })
+  it('should be able add button ui', async () => {
+    await runNxCommandAsync(`add-component ${uiLibName} button`)
+
+    expect(() => checkFilesExist(
+      `${uiLibName}/src/ui/button.tsx`,
+    )).not.toThrow()
+  })
+
+  it('should be able add sidebar ui', async () => {
+    await runNxCommandAsync(`add-component ${uiLibName} sidebar --overwrite`) // Overwrites are needed because of button ui conflicts
+
+    expect(() => checkFilesExist(
+      `${uiLibName}/src/ui/sidebar.tsx`,
+      `${uiLibName}/src/hooks/use-mobile.tsx`,
+    )).not.toThrow()
+  })
 
 })
diff --git a/packages/shadcn-ui/src/executors/add/add.impl.ts b/packages/shadcn-ui/src/executors/add/add.impl.ts
@@ -10,17 +10,18 @@ export async function addExecutor(
   options: ExecutorSchema,
   context: ExecutorContext
 ): Promise<{ success: boolean }> {
-  const { root } = context.projectsConfigurations.projects[context.projectName]
-
   return execPackageManagerCommand(
     buildCommand([
-      'shadcn[email protected] add',
+      'shadcn@latest add',
       (options.component ?? '').length === 0 ? '--all' : options.component,
-      options.overwrite && '--overwrite',
-      '--path=src',
-      `--cwd=${root}`
+      options.overwrite && '--overwrite'
     ]),
-    {}
+    {
+      env: {
+        ...process.env,
+        TS_NODE_PROJECT: 'tsconfig.base.json'
+      }
+    }
   )
 }
 

diff --git a/packages/shadcn-ui/src/generators/init/init.impl.ts b/packages/shadcn-ui/src/generators/init/init.impl.ts
@@ -50,7 +50,8 @@ export default async function (tree: Tree, options: ShadecnUiSchema) {
     skipFormat: true,
     style: 'css',
     linter: Linter.EsLint,
-    directory: uiLibOptions.projectRoot
+    directory: uiLibOptions.projectRoot,
+    skipTsConfig: true
   })
 
   const utilsLibOptions = await determineProjectNameAndRootOptions(tree, {
@@ -64,9 +65,12 @@ export default async function (tree: Tree, options: ShadecnUiSchema) {
     skipFormat: true,
     style: 'css',
     linter: Linter.EsLint,
-    directory: utilsLibOptions.projectRoot
+    directory: utilsLibOptions.projectRoot,
+    skipTsConfig: true
   })
 
+  addTsConfigPath(tree, `${uiLibOptions.importPath}`, [`${uiLibOptions.projectRoot}/src`])
+  addTsConfigPath(tree, `${utilsLibOptions.importPath}`, [`${utilsLibOptions.projectRoot}/src`])
   addTsConfigPath(tree, `${uiLibOptions.importPath}/*`, [`${uiLibOptions.projectRoot}/src/*`])
   addTsConfigPath(tree, `${utilsLibOptions.importPath}/*`, [`${utilsLibOptions.projectRoot}/src/*`])
   cleanupLib(tree, uiLibOptions.projectRoot)
@@ -79,14 +83,15 @@ export default async function (tree: Tree, options: ShadecnUiSchema) {
     'style': 'default',
     'rsc': false,
     'tailwind': {
-      'config': join(utilsLibOptions.projectRoot, 'tailwind.config.js'),
-      'css': join(utilsLibOptions.projectRoot, 'global.css'),
+      'config': join(utilsLibOptions.projectRoot, 'src/tailwind.config.ts'),
+      'css': join(utilsLibOptions.projectRoot, 'src/global.css'),
       'baseColor': 'neutral',
       'cssVariables': true
     },
     'aliases': {
       'components': uiLibOptions.importPath,
-      'utils': utilsLibOptions.importPath
+      'utils': utilsLibOptions.importPath,
+      "hooks": `${uiLibOptions.importPath}/hooks`
     }
   })