Merge pull request #578 from shairez/pr-fluffy-cli

✨ Qwik UI CLI

Author: shairez

apps/website/src/components/note/note.tsx

@@ -44,7 +44,7 @@ export const Note = component$<NoteProps>(({ status, ...props }) => {
         status ?? NoteStatus.Info,
       )} note-link relative mx-[-24px] px-5 py-4 lg:mx-[-32px] lg:px-8 lg:py-6 `}
     >
-      <div class="absolute left-[-17.5px] top-[-17.5px] hidden h-8 w-8 rounded-full bg-white dark:bg-slate-900 lg:block">
+      <div class="absolute left-[-17.5px] top-[-17.5px] hidden h-8 w-8 rounded-full bg-white lg:block dark:bg-slate-900">
         <div class="flex h-8 w-8 items-center justify-center ">
           {getIconByStatus(status ?? NoteStatus.Info)}
         </div>

apps/website/src/components/preview-code-example/preview-code-example-tabs-deprecated.tsx

@@ -27,7 +27,7 @@ export const PreviewCodeExampleTabsDeprecated = component$((props: { code?: stri
           Code
         </Tab>
       </TabList>
-      <TabPanel class="shadow-light-medium dark:shadow-dark-medium border-qwikui-blue-300 dark:border-qwikui-purple-200 rounded-b-xl border-[1.5px] bg-slate-200 bg-slate-800  p-4 dark:bg-slate-900 md:p-12">
+      <TabPanel class="shadow-light-medium dark:shadow-dark-medium border-qwikui-blue-300 dark:border-qwikui-purple-200 rounded-b-xl border-[1.5px] bg-slate-200 bg-slate-800  p-4 md:p-12 dark:bg-slate-900">
         <section class="flex flex-col items-center">
           <Slot name="actualComponent" />
         </section>

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 };

nx.json

@@ -7,11 +7,24 @@
     "appsDir": "apps",
     "libsDir": "packages"
   },
+  "release": {
+    "version": {
+      "generatorOptions": {
+        "currentVersionResolver": "disk"
+      }
+    }
+  },
   "targetDefaults": {
     "lint": {
       "inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
       "cache": true
     },
+    "version-dry": {
+      "dependsOn": ["^version-dry"]
+    },
+    "build-bin": {
+      "cache": true
+    },
     "build": {
       "cache": true,
       "dependsOn": ["^build"]

package.json

@@ -39,15 +39,19 @@
     "@floating-ui/core": "1.4.1",
     "@floating-ui/dom": "^1.5.1",
     "@fontsource-variable/inter": "5.0.8",
-    "@jscutlery/semver": "^3.1.0",
+    "@img/sharp-linux-x64": "^0.33.0",
+    "@jscutlery/semver": "^4.2.0",
     "@k11r/nx-cloudflare-wrangler": "2.7.1",
     "@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",
+    "@oddbird/popover-polyfill": "0.3.7",
     "@storybook/addon-a11y": "7.6.0",
     "@storybook/addon-coverage": "^0.0.9",
     "@storybook/addon-essentials": "7.6.0",
@@ -63,6 +67,7 @@
     "@testing-library/cypress": "9.0.0",
     "@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",
@@ -71,6 +76,11 @@
     "all-contributors-cli": "^6.26.1",
     "autoprefixer": "^10.4.15",
     "axe-core": "^4.7.2",
+    "body-scroll-lock-upgrade": "1.1.0",
+    "canvas-confetti": "1.9.2",
+    "class-variance-authority": "0.7.0",
+    "clsx": "2.0.0",
+    "tslib": "^2.6.2",
     "chromatic": "^6.24.1",
     "clipboard-copy": "4.0.1",
     "commitizen": "^4.3.0",
@@ -90,6 +100,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",
@@ -110,6 +122,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",
@@ -124,7 +137,11 @@
     "vite-plugin-static-copy": "0.17.0",
     "vite-tsconfig-paths": "4.2.0",
     "vitest": "^0.34.3",
-    "wrangler": "^3.11.0"
+    "wrangler": "^3.11.0",
+    "@clack/prompts": "^0.7.0",
+    "@nx/devkit": "17.1.3",
+    "kleur": "^4.1.5",
+    "yargs": "17.7.2"
   },
   "config": {
     "commitizen": {
@@ -136,17 +153,7 @@
     "qwik ui components",
     "components library"
   ],
-  "dependencies": {
-    "@fontsource-variable/inter": "5.0.8",
-    "@img/sharp-linux-x64": "^0.33.0",
-    "@oddbird/popover-polyfill": "0.3.7",
-    "body-scroll-lock-upgrade": "1.1.0",
-    "canvas-confetti": "1.9.2",
-    "class-variance-authority": "0.7.0",
-    "clsx": "2.0.0",
-    "shiki": "0.14.5",
-    "tslib": "^2.6.2"
-  },
+  "dependencies": {},
   "nx": {
     "includedScripts": []
   }

packages/cli-e2e/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/cli-e2e/jest.config.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+export default {
+  displayName: 'qwik-ui-cli-e2e',
+  preset: '../../jest.preset.cjs',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/packages/cli-e2e',
+  globalSetup: '../../tools/scripts/start-local-registry.ts',
+  globalTeardown: '../../tools/scripts/stop-local-registry.ts',
+};

packages/cli-e2e/project.json

@@ -0,0 +1,25 @@
+{
+  "name": "cli-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "packages/cli-e2e/src",
+  "targets": {
+    "e2e": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/cli-e2e/jest.config.ts",
+        "runInBand": true
+      },
+      "dependsOn": ["^build"]
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/cli-e2e/**/*.ts"]
+      }
+    }
+  },
+  "implicitDependencies": ["cli"]
+}

packages/cli-e2e/src/cli.smoke.spec.ts

@@ -0,0 +1,70 @@
+import { execSync } from 'child_process';
+import { existsSync, mkdirSync, rmSync } from 'fs';
+import { join } from 'path';
+
+describe('Qwik UI CLI Smoke test', () => {
+  let projectDirectory: string;
+  let tempDirectory: string;
+
+  beforeAll(() => {
+    const { projectDirectory: projDir, tempDir } = createTestQwikProject();
+
+    projectDirectory = projDir;
+    tempDirectory = tempDir;
+  });
+
+  afterAll(() => {
+    // Cleanup the test project
+    rmSync(tempDirectory, {
+      recursive: true,
+      force: true,
+    });
+  });
+
+  it('should be installed and add the button file', () => {
+    execSync(
+      'npx -y [email protected] init --e2e --projectRoot / --styledKit "fluffy" --uiComponentsPath "src/components/ui" --rootCssPath "src/global.css" --installTailwind --components=button',
+      {
+        cwd: projectDirectory,
+        stdio: 'inherit',
+        env: process.env,
+      },
+    );
+    const buttonIsInTheRightPlace = existsSync(
+      join(projectDirectory, 'src/components/ui/button/button.tsx'),
+    );
+    expect(buttonIsInTheRightPlace).toBeTruthy();
+  });
+});
+
+/**
+ * Creates a test project
+ * @returns The directory where the test project was created
+ */
+function createTestQwikProject() {
+  const projectName = 'test-qwik-project';
+  const tempDir = join('/tmp', 'tmp-qwik-ui-cli-e2e');
+
+  // Ensure projectDirectory is empty
+  rmSync(tempDir, {
+    recursive: true,
+    force: true,
+  });
+  mkdirSync(tempDir, {
+    recursive: true,
+  });
+
+  execSync(`pnpm create qwik@latest basic ${projectName}`, {
+    cwd: tempDir,
+    stdio: 'inherit',
+    env: process.env,
+  });
+  console.log(`Created test project in "${tempDir}"`);
+
+  const projectDirectory = join(tempDir, projectName);
+
+  return {
+    projectDirectory,
+    tempDir,
+  };
+}