add support for monorepos component generation (#1009)

Author: shairez

.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.

package.json

@@ -56,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",

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) => {