WIP: qwik ui cli

jest.config.ts

@@ -0,0 +1,5 @@
+import { getJestProjects } from '@nx/jest';
+
+export default {
+  projects: getJestProjects(),
+};

jest.preset.cjs

@@ -0,0 +1,3 @@
+const nxPreset = require('@nx/jest/preset').default;
+
+module.exports = { ...nxPreset };

package.json

@@ -45,7 +45,9 @@
     "@nx/cypress": "17.1.3",
     "@nx/eslint": "17.1.3",
     "@nx/eslint-plugin": "17.1.3",
+    "@nx/jest": "17.1.3",
     "@nx/js": "17.1.3",
+    "@nx/plugin": "17.2.3",
     "@nx/storybook": "17.1.3",
     "@nx/vite": "17.1.3",
     "@nx/workspace": "17.1.3",
@@ -65,6 +67,7 @@
     "@types/body-scroll-lock": "3.1.1",
     "@types/eslint": "^8.44.2",
     "@types/estree-jsx": "^1.0.3",
+    "@types/jest": "^29.4.0",
     "@types/node": "^20.5.7",
     "@typescript-eslint/eslint-plugin": "6.13.1",
     "@typescript-eslint/parser": "6.13.1",
@@ -93,6 +96,8 @@
     "eslint-plugin-storybook": "^0.6.13",
     "focus-trap": "7.5.3",
     "husky": "^8.0.3",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
     "jsdom": "22.1.0",
     "libphonenumber-js": "^1.10.43",
     "ngx-deploy-npm": "^7.0.1",
@@ -113,6 +118,7 @@
     "storybook-framework-qwik": "^0.2.3",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
+    "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
     "tsm": "2.3.0",
     "typescript": "^5.2.2",
@@ -141,6 +147,7 @@
   ],
   "dependencies": {
     "@fontsource-variable/inter": "5.0.8",
+    "@qwik-ui/fluffy": "workspace:*",
     "canvas-confetti": "1.9.2",
     "shiki": "0.14.5",
     "tslib": "^2.6.2"

packages/cli/.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    },
+    {
+      "files": ["./package.json", "./generators.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/nx-plugin-checks": "error"
+      }
+    }
+  ]
+}

packages/cli/bin/index.ts

@@ -0,0 +1,205 @@
+#!/usr/bin/env node
+
+/*
+STEPS
+
+1. Check for the "init" command
+
+  1. Check if nx is present (package.json? nx.json?)
+
+  2. If it isn't present, run nx@latest init
+
+  3. IF it is present (or after installation), run the rest of the init command
+
+  4. Ask questions about component locations etc (css vars?)
+
+  5. create the necessary files
+
+2. Check for the "add" command
+
+  2.1 run the correct generator
+
+*/
+
+import {
+  cancel,
+  confirm,
+  intro,
+  isCancel,
+  log,
+  outro,
+  select,
+  spinner,
+  text,
+} from '@clack/prompts';
+import { getPackageManagerCommand, workspaceRoot } from '@nx/devkit';
+import { execSync } from 'child_process';
+import { green, red } from 'kleur/colors';
+import { styledPackagesMap } from '../src/generators';
+import { StyledKit } from '../src/generators/init/styled-kit.enum';
+
+async function main() {
+  const command = process.argv[2]; // TODO: use libraries like yargs or enquirer to set your workspace name
+  if (!command) {
+    log.error(
+      `A command is missing, please choose one of the following commands: ${green(
+        'init',
+      )}`,
+    );
+    cancel();
+    process.exit(1);
+  }
+
+  intro('🐨 Fluffy');
+
+  if (command === 'init') {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const nxVersion = require('../package.json').dependencies['@nx/devkit'];
+
+    log.info(`Version: ${nxVersion}`);
+
+    // TODO: CHECK IF NX.JSON EXISTS
+
+    const haveNxInstalled = cancelable(
+      await confirm({
+        message: 'Do you already have Nx installed? (required)',
+        initialValue: false,
+      }),
+    );
+
+    if (!haveNxInstalled) {
+      const initSpinner = spinner();
+      initSpinner.start('Installing Nx...');
+      execSync(`npx --yes nx@${nxVersion} init --interactive false`, {
+        stdio: [0, 1, 2],
+      });
+      initSpinner.stop('Installed Nx!');
+    }
+    log.success('nx init done');
+
+    const projectRoot = cancelable(
+      await text({
+        message: 'Specify the root of the project (leave empty for "/")',
+      }),
+    );
+
+    const tailwindConfigPath = cancelable(
+      await text({
+        message: 'Tailwind config location',
+        initialValue: './tailwind.config.js',
+      }),
+    );
+
+    const rootCssPath = cancelable(
+      await text({
+        message:
+          'Your global css file location (where you defined your tailwind directives)',
+        initialValue: 'src/global.css',
+      }),
+    );
+
+    const uiComponentsPath = cancelable(
+      await text({
+        message: 'UI components folder',
+        initialValue: 'src/_components/ui',
+      }),
+    );
+
+    const selectedStyledKit = cancelable(
+      await select({
+        message: 'What is your preferred styled kit?',
+
+        options: [
+          { label: 'Fluffy', value: StyledKit.FLUFFY },
+          { label: 'Minimal', value: StyledKit.MINIMAL },
+        ],
+        initialValue: 'fluffy',
+      }),
+    );
+
+    /*
+      
+      1. Collect options from user
+        * Project root (default: root /)
+        * tailwind config location (default: ./tailwind.config.js)
+        * global css location (default: ./src/global.css)
+
+    */
+
+    // CREATE CONFIG FILE
+    execSync(
+      `${
+        getPackageManagerCommand().exec
+      } nx g @qwik-ui/cli:init --interactive false --project-root=${projectRoot} --ui-components-path=${uiComponentsPath} --styled-kit=${selectedStyledKit}`,
+      {
+        stdio: [0, 1, 2],
+      },
+    );
+
+    // INSTALL STYLED KIT
+    const styledPackage = styledPackagesMap[selectedStyledKit];
+
+    execSync(`${getPackageManagerCommand().add} ${styledPackage}@latest`, {
+      stdio: [0, 1, 2],
+    });
+
+    // SETUP TAILWIND
+    execSync(
+      `${
+        getPackageManagerCommand().exec
+      } nx g ${styledPackage}:setup-tailwind --interactive false  --tailwind-config-path=${tailwindConfigPath} --root-css-path=${rootCssPath}`,
+      {
+        stdio: [0, 1, 2],
+      },
+    );
+
+    // RUN ADD COMMAND
+  } else if (command === 'add') {
+    /*
+      Collect options from user (which components to generate)
+      run the generator with the options as arguments 
+      (in the generator, have a map of dependencies per component type to install)
+    */
+
+    // READ CONFIG FILE TO GET OPTIONS
+    // WRAP LOGIC INTO A FUNCTION THAT ACCEPTS PARAMS SO IT COULD RUN FROM INIT AS WELL
+
+    // CHOOSE COMPONENTS TO ADD
+
+    // GENERATE COMPONENTS
+    execSync(
+      `${
+        getPackageManagerCommand().exec
+      } nx g ${styledPackage}:component --interactive false`,
+      {
+        stdio: [0, 1, 2],
+      },
+    );
+  } else {
+    log.error(
+      `Invalid command: ${red(command)}
+Please choose one of the following commands: ${green('init')}`,
+    );
+    cancel();
+    process.exit(1);
+  }
+
+  outro('Successfully initialized fluffy');
+}
+
+main();
+
+export function getCwd(): string {
+  return process.env.INIT_CWD?.startsWith(workspaceRoot)
+    ? process.env.INIT_CWD
+    : process.cwd();
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function cancelable(result: any) {
+  if (isCancel(result)) {
+    cancel('Operation canceled');
+    process.exit(0);
+  }
+  return result;
+}