Added missing external dependencies install to the CLI init (#872)

* fixed tailwindcss-animate not being installed

* added `class-variance-authority` and `@qwikest/icons` to cli init

* added all packages to pkg-pr-new and moved it to CI only, removed --compact (because of errors)

* fixed wrong local packages linking

* made the external deps versions for the CLI automatically resolved

Author: shairez

.changeset/tiny-cups-teach.md

@@ -0,0 +1,6 @@
+---
+'qwik-ui': patch
+---
+
+FIX: now installing `tailwindcss-animate`, `class-variance-authority`
+and `@qwikest/icons` during the cli init

.github/actions/setup/action.yml

@@ -23,7 +23,7 @@ runs:
         git config --global user.email '[email protected]'
 
     - name: Setup pnpm
-      uses: pnpm/action-setup@v2.2.4
+      uses: pnpm/action-setup@v4
       with:
         version: 9.3.0
 

.github/workflows/test.yml

@@ -32,14 +32,14 @@ jobs:
 
   continuous-release:
     runs-on: ubuntu-latest
-
+    if: github.event_name == 'pull_request'
     steps:
       - uses: actions/checkout@v3
       - name: Setup
         uses: ./.github/actions/setup
         with:
           node_version: 20
-      - run: pnpm build.headless
-      - run: pnpx pkg-pr-new publish --compact ./dist/packages/kit-headless
+      - run: pnpm release.prepare --parallel=false
+      - run: pnpm dlx pkg-pr-new@^0.0.9 publish --pnpm ./dist/packages/kit-headless ./dist/packages/kit-styled ./dist/packages/cli ./dist/packages/utils
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GITHUB_TOKEN is provided automatically in any repository

.npmrc

@@ -1,4 +1,5 @@
 save-exact = true
 auto-install-peers=true
 dedupe-peer-dependents=true
-public-hoist-pattern[]=@types*
+public-hoist-pattern[]=@types*
+link-workspace-packages=true

package.json

@@ -116,7 +116,6 @@
     "node-fetch": "3.3.2",
     "np": "^10.0.5",
     "nx": "19.2.3",
-    "pkg-pr-new": "0.0.5",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.14",

packages/cli/bin/index.ts

@@ -20,10 +20,10 @@ import {
 } from '@nx/devkit';
 
 import {
-  ThemePrimaryColor,
-  ThemeStyle,
   ThemeBorderRadius,
   ThemeConfig,
+  ThemePrimaryColor,
+  ThemeStyle,
 } from '@qwik-ui/utils';
 import { bgRgb, bold, cyan, green, red } from 'ansis';
 import { execSync } from 'child_process';
@@ -34,6 +34,8 @@ import {
   QWIK_UI_CONFIG_FILENAME,
 } from '../src/_shared/config-filenames';
 
+import externalDeps from '../src/_shared/external-deps.json';
+
 const COMMANDS = ['init', 'add'];
 const listOfCommands = COMMANDS.join(', ');
 const styledPackage = '@qwik-ui/styled';
@@ -238,7 +240,7 @@ async function handleInit() {
       config.primaryColor = cancelable(
         await select({
           message: cyan('Choose a primary color'),
-          initialValue: ThemePrimaryColor.CYAN600,
+          initialValue: ThemePrimaryColor.CYAN600 as string,
           options: [
             {
               label: bold`${bgRgb(220, 38, 38)`   `} ${capitalizeFirstLetter('Red')} `,
@@ -311,11 +313,24 @@ async function handleInit() {
 
   const packageTag = args['e2e'] ? 'e2e' : 'latest';
 
-  log.info(`Installing ${styledPackage}, ${headlessPackage} and ${utilsPackage}...`);
+  const externalDepsNames = Object.keys(externalDeps).reduce(
+    (all, dep) => `${all}, ${dep}`,
+    '',
+  );
+
+  log.info(
+    `Installing ${styledPackage}, ${headlessPackage}, ${utilsPackage}, ${externalDepsNames}...`,
+  );
+
+  const externalDepsString = Object.keys(externalDeps).reduce(
+    (all, dep) => `${all} ${dep}@${externalDeps[dep]}`,
+    '',
+  );
+
   execSync(
     `${
       getPackageManagerCommand().addDev
-    } ${styledPackage}@${packageTag} ${headlessPackage}@${packageTag} ${utilsPackage}@${packageTag}`,
+    } ${styledPackage}@${packageTag} ${headlessPackage}@${packageTag} ${utilsPackage}@${packageTag} ${externalDepsString}`,
     {
       stdio: 'inherit',
     },

packages/cli/package.json

@@ -4,6 +4,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/qwikifiers/qwik-ui",
+    "directory": "packages/cli"
+  },
   "description": "Qwik UI Command line interface",
   "dependencies": {
     "@clack/prompts": "^0.7.0",

packages/cli/project.json

@@ -6,6 +6,7 @@
   "targets": {
     "build-bin": {
       "executor": "@nx/js:tsc",
+      "dependsOn": ["update-external-deps-versions"],
       "outputs": ["{options.outputPath}"],
       "options": {
         "rootDir": ".",
@@ -48,6 +49,12 @@
         ]
       }
     },
+    "update-external-deps-versions": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["pnpm dlx tsm ./tools/scripts/update-cli-deps.ts"]
+      }
+    },
     "test": {
       "dependsOn": ["copy-global-css"],
       "executor": "@nx/jest:jest",

packages/cli/src/_shared/external-deps.json

@@ -0,0 +1,5 @@
+{
+  "tailwindcss-animate": "^1.0.7",
+  "class-variance-authority": "^0.7.0",
+  "@qwikest/icons": "^0.0.13"
+}

packages/cli/tsconfig.bin.json

@@ -6,6 +6,8 @@
     "module": "CommonJS",
     "sourceMap": false,
     "noEmit": false,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
 
     "outDir": "../../dist/out-tsc",
     "types": ["node"]

packages/cli/tsconfig.lib.json

@@ -3,7 +3,9 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "declaration": true,
-    "types": ["node"]
+    "types": ["node"],
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   },
   "include": ["**/*.ts"],
   "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"]

packages/kit-styled/src/templates/tailwind.config.cjs

@@ -8,6 +8,7 @@ module.exports = {
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
     join(__dirname, '../website/src/**/*.{js,ts,jsx,tsx,mdx}'),
     join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
+    join(__dirname, '../../packages/kit-headless/src/**/*.{js,ts,jsx,tsx,mdx}'),
   ],
   plugins: [
     // PLUGIN-START

packages/utils/src/index.ts

@@ -1,10 +1,10 @@
 export * from './cn';
 export * from './theme/extract-between-comments';
 export * from './theme/extract-theme-css';
-export * from './theme/theme-config.type';
 export * from './theme/theme-base-color.enum';
 export * from './theme/theme-border-radius.enum';
-export * from './theme/theme-primary-color.enum';
+export * from './theme/theme-config.type';
 export * from './theme/theme-font.enum';
 export * from './theme/theme-mode-enum';
+export * from './theme/theme-primary-color.enum';
 export * from './theme/theme-style.enum';