Merge branch 'main' into add_component_switch

.changeset/eight-zoos-melt.md

@@ -0,0 +1,7 @@
+---
+'qwik-ui': patch
+---
+
+FIX: `qwik-ui.config.json` is generated at the root of the monorepo.
+
+Before it got created inside of the individual project, but it was wrong because we couldn't generate components in the right place or use the CLI from the root of the monorepo.

.changeset/soft-snakes-sniff.md

@@ -0,0 +1,5 @@
+---
+"qwik-ui": patch
+---
+
+FIX: cli not checking relative global.css correctly

.github/actions/test/action.yml

@@ -32,9 +32,9 @@ runs:
     #   shell: bash
     #   run: npx nx affected:build --base=last-release --exclude=website
 
-    # - name: E2E Tests
-    #   shell: bash
-    #   run: npx nx affected --target=e2e --base=last-release
+    - name: CLI E2E Tests
+      shell: bash
+      run: npx nx e2e cli-e2e
 
     # - name: Codecov upload
     #   uses: codecov/codecov-action@v2

.github/workflows/test.yml

@@ -1,8 +1,10 @@
 name: Test
 
 on:
-  - push
-  - pull_request
+  pull_request:
+  push:
+    branches:
+      - main
 
 jobs:
   test:
@@ -32,8 +34,9 @@ jobs:
           chromatic_token: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
 
   continuous-release:
-    runs-on: ubuntu-latest
     if: github.event_name == 'pull_request'
+    needs: test
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - name: Setup

package.json

@@ -5,7 +5,7 @@
   "engines": {
     "node": ">=16.0.0"
   },
-  "private": false,
+  "private": true,
   "type": "module",
   "scripts": {
     "build.changelog-formatter": "tsc .changeset/changelog-github-custom.ts && mv .changeset/changelog-github-custom.js .changeset/changelog-github-custom.cjs",
@@ -29,7 +29,9 @@
     "release": "pnpm release.prepare && pnpm release.setroot && pnpm release.publish && pnpm release.resetroot",
     "release.publish": "changeset publish",
     "release.resetroot": "cp dist/pnpm-workspace.yaml pnpm-workspace.yaml",
+    "release.e2e": "pnpm release.prepare && pnpm release.setroot && pnpm -r exec pnpm version patch && pnpm -r exec pnpm publish --tag e2e --no-git-checks && pnpm release.resetroot",
     "test.cli": "NODE_OPTIONS=--experimental-vm-modules nx test cli",
+    "test.cli.e2e": "nx e2e cli-e2e",
     "test.headless": "nx component-test headless --skip-nx-cache",
     "test.visual.headless": "nx visual-test headless",
     "test.pw.headless": "nx e2e headless",
@@ -54,7 +56,6 @@
     "@floating-ui/dom": "^1.6.5",
     "@fontsource-variable/inter": "^5.0.18",
     "@img/sharp-linux-x64": "^0.33.4",
-    "@jscutlery/semver": "^4.2.0",
     "@k11r/nx-cloudflare-wrangler": "3.0.0-feat-sst-upgrade.1",
     "@modular-forms/qwik": "^0.24.0",
     "@nx/devkit": "19.4.2",
@@ -146,7 +147,7 @@
     "includedScripts": []
   },
   "volta": {
-    "node": "20.9.0",
+    "node": "22.7.0",
     "pnpm": "9.7.0"
   }
 }

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

@@ -23,13 +23,18 @@ describe('Qwik UI CLI Smoke test', () => {
 
   it('should be installed and add the button file', () => {
     execSync(
-      'npx -y qwik-ui@0.0.0-e2e init --e2e --projectRoot / --uiComponentsPath "src/components/ui" --rootCssPath "src/global.css" --installTailwind --style "simple" --borderRadius "0" --primaryColor "cyan-600" --components=button',
+      'npx -y qwik-ui@e2e init --e2e --projectRoot ./ --uiComponentsPath "src/components/ui" --rootCssPath "src/global.css" --installTailwind --style "simple" --components=button',
       {
         cwd: projectDirectory,
-        stdio: 'inherit',
         env: process.env,
+        stdio: 'inherit',
       },
     );
+    execSync('npx -y qwik-ui@e2e add button', {
+      cwd: projectDirectory,
+      env: process.env,
+      stdio: 'inherit',
+    });
     const buttonIsInTheRightPlace = existsSync(
       join(projectDirectory, 'src/components/ui/button/button.tsx'),
     );
@@ -54,7 +59,7 @@ function createTestQwikProject() {
     recursive: true,
   });
 
-  execSync(`pnpm create qwik@latest basic ${projectName}`, {
+  execSync(`pnpm create qwik@latest empty ${projectName}`, {
     cwd: tempDir,
     stdio: 'inherit',
     env: process.env,

packages/cli/bin/index.ts

@@ -37,6 +37,7 @@ import {
   QWIK_UI_CONFIG_FILENAME,
 } from '../src/_shared/config-filenames';
 
+import path from 'path';
 import externalDeps from '../src/_shared/external-deps.json';
 
 const COMMANDS = ['init', 'add'];
@@ -144,8 +145,8 @@ async function handleInit() {
   if (!config.projectRoot) {
     config.projectRoot = cancelable(
       await text({
-        message: cyan('Specify the root of the project (leave empty for "/")'),
-        initialValue: '/',
+        message: cyan('Specify the root of the project (leave empty for "./")'),
+        initialValue: './',
       }),
     );
   }
@@ -162,9 +163,10 @@ async function handleInit() {
   if (!config.rootCssPath) {
     config.rootCssPath = await collectFileLocationFromUser({
       message: cyan(
-        'Your global css file location (where you defined your tailwind directives)',
+        'The path to the global css file the tailwind directives are defined (relative to the root you specified above)',
       ),
       errorMessageName: 'Global css file',
+      rootDir: config.projectRoot,
       initialValue: 'src/global.css',
     });
   }
@@ -181,12 +183,12 @@ async function handleInit() {
     );
   }
 
-  // TODO: Add "cwd" with the project root, and see if we can skip the interactive question from qwik cli
   if (installTailwind) {
     execSync(
-      `${getPackageManagerCommand().exec} qwik add tailwind --skipConfirmation=true`,
+      `${getPackageManagerCommand().exec} qwik add tailwind --skipConfirmation=true --projectDir=${config.projectRoot}`,
       {
         stdio: 'inherit',
+        cwd: config.projectRoot,
       },
     );
   }
@@ -430,9 +432,9 @@ Options: [${possibleComponentNames.join(', ')}]`,
           coerce: (components) => componentTypesFromString(components),
         })
         .option('projectRoot', {
-          description: 'The root of the project (default: "/")',
+          description: 'The root of the project (default: "./")',
           type: 'string',
-          default: '/',
+          default: './',
         }),
     handler: () => {},
   };
@@ -448,8 +450,8 @@ Options: [${possibleComponentNames.join(', ')}]`,
   if (!projectRoot && !args['projectRoot']) {
     projectRoot = cancelable(
       await text({
-        message: cyan('Specify the root of the project (leave empty for "/")'),
-        initialValue: '/',
+        message: cyan('Specify the root of the project (leave empty for "./")'),
+        initialValue: './',
       }),
     );
   }
@@ -507,6 +509,7 @@ function parseCommands(command: CommandModule) {
 interface FilePromptInfo {
   message: string;
   errorMessageName: string;
+  rootDir: string;
   initialValue?: string;
 }
 
@@ -517,9 +520,9 @@ async function collectFileLocationFromUser(config: FilePromptInfo) {
       initialValue: config.initialValue,
     }),
   );
-
-  if (!existsSync(filePath)) {
-    log.error(`${config.errorMessageName} not found at ${filePath}, want to try again?`);
+  const fullPath = path.join(config.rootDir, filePath);
+  if (!existsSync(fullPath)) {
+    log.error(`${config.errorMessageName} not found at ${fullPath}, want to try again?`);
     return collectFileLocationFromUser({ ...config, initialValue: filePath });
   }
   return filePath;

packages/cli/src/generators/init/init-generator.spec.ts

@@ -38,6 +38,13 @@ describe('init generator', () => {
     options.projectRoot = '/my-project';
     await initGenerator(tree, options);
 
-    expect(tree.exists('my-project/qwik-ui.config.json')).toBeTruthy();
+    expect(tree.exists('qwik-ui.config.json')).toBeTruthy();
+
+    const expectedContents = tree.read(QWIK_UI_CONFIG_FILENAME, 'utf-8');
+
+    expect(expectedContents).toMatchInlineSnapshot(`
+      "{ "componentsRoot": "/my-project/src/components/ui" }
+      "
+    `);
   });
 });

packages/cli/src/generators/init/init-generator.ts

@@ -8,15 +8,15 @@ export async function initGenerator(tree: Tree, options: InitGeneratorSchema) {
     return;
   }
 
-  options.projectRoot ||= '/';
+  options.projectRoot ||= './';
   options.componentsRoot ||= 'src/components/ui';
 
-  const fullConfigPath = joinPathFragments(options.projectRoot, QWIK_UI_CONFIG_FILENAME);
+  const fullConfigPath = joinPathFragments('./', QWIK_UI_CONFIG_FILENAME);
 
   tree.write(
     fullConfigPath,
     JSON.stringify({
-      componentsRoot: options.componentsRoot,
+      componentsRoot: joinPathFragments(options.projectRoot, options.componentsRoot),
     }),
   );
 

packages/kit-headless/src/components/popover/popover-panel-impl.tsx

@@ -1,20 +1,20 @@
 import {
+  $,
   Slot,
   component$,
+  createContextId,
+  useContext,
   useSignal,
   useStyles$,
-  useContext,
   useTask$,
-  $,
-  createContextId,
-  type PropsOf,
   type CorrectedToggleEvent,
+  type PropsOf,
 } from '@builder.io/qwik';
 
 import { isServer } from '@builder.io/qwik/build';
-import popoverStyles from './popover.css?inline';
-import { popoverContextId } from './popover-context';
 import { useCombinedRef } from '../../hooks/combined-refs';
+import { popoverContextId } from './popover-context';
+import popoverStyles from './popover.css?inline';
 
 // We don't need a provider, that way we connect all context to the root
 const ensureContextId = createContextId('qui-popover-null-context');
@@ -107,9 +107,7 @@ export const HPopoverPanelImpl = component$((props: PropsOf<'div'>) => {
       id={panelId}
       ref={panelRef}
       popover={
-        (context.manual && 'manual') || props.popover === 'manual'
-          ? 'manual'
-          : 'auto' || 'auto'
+        (context.manual && 'manual') || props.popover === 'manual' ? 'manual' : 'auto'
       }
       onBeforeToggle$={[
         $(async (e) => {