Fix CLI

.changeset/fast-mice-destroy.md

@@ -0,0 +1,6 @@
+---
+'@qwik-ui/utils': minor
+'qwik-ui': patch
+---
+
+Changed enums to const maps in utils

.changeset/spicy-apples-battle.md

@@ -0,0 +1,5 @@
+---
+'qwik-ui': patch
+---
+
+FIX: added `.nx/workspace-data` to `.gitignore` for new projects

apps/website/src/components/make-it-yours/make-it-yours.tsx

@@ -1,20 +1,20 @@
 import { $, PropsOf, component$, useComputed$ } from '@builder.io/qwik';
-import { Modal, Button, buttonVariants } from '~/components/ui';
 import {
-  ThemeBaseColor,
-  ThemeBorderRadius,
+  ThemeBaseColors,
+  ThemeBorderRadiuses,
   ThemeConfig,
-  ThemeFont,
-  ThemeMode,
-  ThemePrimaryColor,
-  ThemeStyle,
+  ThemeFonts,
+  ThemeModes,
+  ThemePrimaryColors,
+  ThemeStyles,
   cn,
 } from '@qwik-ui/utils';
 import { LuSlidersHorizontal, LuX } from '@qwikest/icons/lucide';
 import { useTheme } from 'qwik-themes';
+import { Button, Modal, buttonVariants } from '~/components/ui';
 
-import CopyCssConfig from '../copy-css-config/copy-css-config';
 import { useAppState } from '~/_state/use-app-state';
+import CopyCssConfig from '../copy-css-config/copy-css-config';
 
 export default component$<PropsOf<typeof Button>>(() => {
   const rootStore = useAppState();
@@ -24,23 +24,23 @@ export default component$<PropsOf<typeof Button>>(() => {
   const themeComputedObjectSig = useComputed$((): ThemeConfig => {
     if (!theme || theme === 'light') {
       return {
-        font: ThemeFont.SANS,
-        mode: ThemeMode.LIGHT,
-        style: ThemeStyle.SIMPLE,
-        baseColor: ThemeBaseColor.SLATE,
-        primaryColor: ThemePrimaryColor.CYAN600,
-        borderRadius: ThemeBorderRadius['BORDER-RADIUS-0'],
+        font: ThemeFonts.SANS,
+        mode: ThemeModes.LIGHT,
+        style: ThemeStyles.SIMPLE,
+        baseColor: ThemeBaseColors.SLATE,
+        primaryColor: ThemePrimaryColors.CYAN600,
+        borderRadius: ThemeBorderRadiuses['BORDER-RADIUS-0'],
       };
     }
 
     if (theme === 'dark') {
       return {
-        font: ThemeFont.SANS,
-        mode: ThemeMode.DARK,
-        style: ThemeStyle.SIMPLE,
-        baseColor: ThemeBaseColor.SLATE,
-        primaryColor: ThemePrimaryColor.CYAN600,
-        borderRadius: ThemeBorderRadius['BORDER-RADIUS-0'],
+        font: ThemeFonts.SANS,
+        mode: ThemeModes.DARK,
+        style: ThemeStyles.SIMPLE,
+        baseColor: ThemeBaseColors.SLATE,
+        primaryColor: ThemePrimaryColors.CYAN600,
+        borderRadius: ThemeBorderRadiuses['BORDER-RADIUS-0'],
       };
     }
 
@@ -82,13 +82,13 @@ export default component$<PropsOf<typeof Button>>(() => {
             value={themeComputedObjectSig.value.style}
             onChange$={async (e, el) => {
               if (el.value === 'simple') {
-                themeComputedObjectSig.value.font = ThemeFont.SANS;
+                themeComputedObjectSig.value.font = ThemeFonts.SANS;
               }
               if (el.value === 'brutalist') {
-                themeComputedObjectSig.value.font = ThemeFont.MONO;
+                themeComputedObjectSig.value.font = ThemeFonts.MONO;
               }
               if (el.value === 'neumorphic') {
-                themeComputedObjectSig.value.font = ThemeFont.SANS;
+                themeComputedObjectSig.value.font = ThemeFonts.SANS;
               }
               themeComputedObjectSig.value.style = el.value;
               setTheme(await themeStoreToThemeClasses$());
@@ -103,7 +103,7 @@ export default component$<PropsOf<typeof Button>>(() => {
 
           <label class="mb-1 mt-8 block font-medium">Base</label>
           <div class="flex">
-            {Object.values(ThemeBaseColor).map((baseColor: string) => {
+            {Object.values(ThemeBaseColors).map((baseColor: string) => {
               const isActive = themeComputedObjectSig.value.baseColor === baseColor;
 
               return (
@@ -139,7 +139,7 @@ export default component$<PropsOf<typeof Button>>(() => {
           <label class="mb-1 mt-8 block font-medium">Primary</label>
           <div class="flex justify-end">
             <div class="grid grid-cols-[repeat(22,0fr)]">
-              {Object.values(ThemePrimaryColor).map((primaryColor: string) => {
+              {Object.values(ThemePrimaryColors).map((primaryColor: string) => {
                 const isActive =
                   themeComputedObjectSig.value.primaryColor === primaryColor;
 
@@ -430,7 +430,7 @@ export default component$<PropsOf<typeof Button>>(() => {
           <div>
             <label class="mb-1 mt-8 block font-medium">Radius</label>
             <div class="flex h-12 space-x-3">
-              {Object.values(ThemeBorderRadius).map((borderRadius: string) => {
+              {Object.values(ThemeBorderRadiuses).map((borderRadius: string) => {
                 const isActive =
                   themeComputedObjectSig.value.borderRadius === borderRadius;
                 return (

apps/website/src/root.tsx

@@ -1,6 +1,12 @@
-import { component$, useContextProvider, useStore, useStyles$ } from '@builder.io/qwik';
+import {
+  component$,
+  PrefetchGraph,
+  PrefetchServiceWorker,
+  useContextProvider,
+  useStore,
+  useStyles$,
+} from '@builder.io/qwik';
 import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';
-import { PrefetchServiceWorker, PrefetchGraph } from '@builder.io/qwik';
 
 import { APP_STATE_CONTEXT_ID } from './_state/app-state-context-id';
 import { AppState } from './_state/app-state.type';
@@ -11,12 +17,12 @@ import { ThemeProvider } from 'qwik-themes';
 
 import '@fontsource-variable/inter';
 import {
-  ThemeBaseColor,
-  ThemeBorderRadius,
-  ThemeFont,
-  ThemeMode,
-  ThemePrimaryColor,
-  ThemeStyle,
+  ThemeBaseColors,
+  ThemeBorderRadiuses,
+  ThemeFonts,
+  ThemeModes,
+  ThemePrimaryColors,
+  ThemeStyles,
 } from '@qwik-ui/utils';
 
 export default component$(() => {
@@ -51,12 +57,12 @@ export default component$(() => {
           attribute="class"
           enableSystem={false}
           themes={[
-            ...Object.values(ThemeFont),
-            ...Object.values(ThemeMode),
-            ...Object.values(ThemeStyle),
-            ...Object.values(ThemeBaseColor),
-            ...Object.values(ThemePrimaryColor),
-            ...Object.values(ThemeBorderRadius),
+            ...Object.values(ThemeFonts),
+            ...Object.values(ThemeModes),
+            ...Object.values(ThemeStyles),
+            ...Object.values(ThemeBaseColors),
+            ...Object.values(ThemePrimaryColors),
+            ...Object.values(ThemeBorderRadiuses),
           ]}
         >
           <RouterOutlet />

packages/cli/bin/index.ts

@@ -20,10 +20,13 @@ import {
 } from '@nx/devkit';
 
 import {
-  ThemeBorderRadius,
+  type ThemeBorderRadius,
+  ThemeBorderRadiuses,
   ThemeConfig,
-  ThemePrimaryColor,
+  type ThemePrimaryColor,
+  ThemePrimaryColors,
   ThemeStyle,
+  ThemeStyles,
 } from '@qwik-ui/utils';
 import { bgRgb, bold, cyan, green, red } from 'ansis';
 import { execSync } from 'child_process';
@@ -101,7 +104,7 @@ async function handleInit() {
         .option('style', {
           description: 'Theme style',
           type: 'string',
-          choices: [ThemeStyle.SIMPLE, ThemeStyle.BRUTALIST, ThemeStyle.NEUMORPHIC],
+          choices: [ThemeStyles.SIMPLE, ThemeStyles.BRUTALIST, ThemeStyles.NEUMORPHIC],
         })
         .option('e2e', {
           description: 'Install styled packages tagged as e2e for tests',
@@ -217,21 +220,21 @@ async function handleInit() {
   }
 
   if (!shouldCustomize) {
-    config.style ||= ThemeStyle.SIMPLE;
-    config.primaryColor ||= ThemePrimaryColor.CYAN600;
-    config.borderRadius ||= ThemeBorderRadius['BORDER-RADIUS-0'];
+    config.style ||= ThemeStyles.SIMPLE;
+    config.primaryColor ||= ThemePrimaryColors.CYAN600;
+    config.borderRadius ||= ThemeBorderRadiuses['BORDER-RADIUS-0'];
   } else {
     if (!config.style) {
       config.style = cancelable(
         await select({
           message: cyan('Choose a style for your theme'),
 
           options: [
-            { label: 'Simple', value: ThemeStyle.SIMPLE },
-            { label: 'Brutalist', value: ThemeStyle.BRUTALIST },
-            { label: 'Neumorphic', value: ThemeStyle.NEUMORPHIC },
+            { label: 'Simple', value: ThemeStyles.SIMPLE },
+            { label: 'Brutalist', value: ThemeStyles.BRUTALIST },
+            { label: 'Neumorphic', value: ThemeStyles.NEUMORPHIC },
           ],
-          initialValue: ThemeStyle.SIMPLE,
+          initialValue: ThemeStyles.SIMPLE as ThemeStyle,
         }),
       );
     }
@@ -240,51 +243,51 @@ async function handleInit() {
       config.primaryColor = cancelable(
         await select({
           message: cyan('Choose a primary color'),
-          initialValue: ThemePrimaryColor.CYAN600 as string,
+          initialValue: ThemePrimaryColors.CYAN600 as string,
           options: [
             {
               label: bold`${bgRgb(220, 38, 38)`   `} ${capitalizeFirstLetter('Red')} `,
-              hint: ThemePrimaryColor.RED600,
-              value: ThemePrimaryColor.RED600,
+              hint: ThemePrimaryColors.RED600,
+              value: ThemePrimaryColors.RED600,
             },
             {
               label: bold`${bgRgb(234, 88, 12)`   `} ${capitalizeFirstLetter('Orange')} `,
-              hint: ThemePrimaryColor.ORANGE600,
-              value: ThemePrimaryColor.ORANGE600,
+              hint: ThemePrimaryColors.ORANGE600,
+              value: ThemePrimaryColors.ORANGE600,
             },
             {
               label: bold`${bgRgb(250, 204, 21)`   `} ${capitalizeFirstLetter(
                 'Yellow',
               )} `,
-              hint: ThemePrimaryColor.YELLOW400,
-              value: ThemePrimaryColor.YELLOW400,
+              hint: ThemePrimaryColors.YELLOW400,
+              value: ThemePrimaryColors.YELLOW400,
             },
             {
               label: bold`${bgRgb(22, 163, 74)`   `} ${capitalizeFirstLetter('Green')} `,
-              hint: ThemePrimaryColor.GREEN600,
-              value: ThemePrimaryColor.GREEN600,
+              hint: ThemePrimaryColors.GREEN600,
+              value: ThemePrimaryColors.GREEN600,
             },
             {
               label: bold`${bgRgb(6, 182, 212)`   `} ${capitalizeFirstLetter('Cyan')} `,
-              hint: ThemePrimaryColor.CYAN600,
-              value: ThemePrimaryColor.CYAN600,
+              hint: ThemePrimaryColors.CYAN600,
+              value: ThemePrimaryColors.CYAN600,
             },
             {
               label: bold`${bgRgb(37, 99, 235)`   `} ${capitalizeFirstLetter('Blue')} `,
-              hint: ThemePrimaryColor.BLUE600,
-              value: ThemePrimaryColor.BLUE600,
+              hint: ThemePrimaryColors.BLUE600,
+              value: ThemePrimaryColors.BLUE600,
             },
             {
               label: bold`${bgRgb(147, 51, 234)`   `} ${capitalizeFirstLetter(
                 'Purple',
               )} `,
-              hint: ThemePrimaryColor.PURPLE600,
-              value: ThemePrimaryColor.PURPLE600,
+              hint: ThemePrimaryColors.PURPLE600,
+              value: ThemePrimaryColors.PURPLE600,
             },
             {
               label: bold`${bgRgb(219, 39, 119)`   `} ${capitalizeFirstLetter('Pink')} `,
-              hint: ThemePrimaryColor.PINK600,
-              value: ThemePrimaryColor.PINK600,
+              hint: ThemePrimaryColors.PINK600,
+              value: ThemePrimaryColors.PINK600,
             },
           ],
         }),
@@ -303,7 +306,7 @@ async function handleInit() {
             { label: '0.75', value: 'border-radius-dot-75' },
             { label: '1', value: 'border-radius-1' },
           ],
-          initialValue: 'border-radius-0',
+          initialValue: 'border-radius-0' as ThemeBorderRadius,
         }),
       );
     }
@@ -370,7 +373,7 @@ async function installNxIfNeeded() {
     try {
       let contents = readFileSync(ignorePath, 'utf-8');
       if (!contents.includes('.nx/cache')) {
-        contents = [contents, '', '.nx/cache'].join('\n');
+        contents = [contents, '', '.nx/cache', '.nx/workspace-data'].join('\n');
         writeFileSync(ignorePath, contents, 'utf-8');
       }
     } catch {

packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts

@@ -1,5 +1,5 @@
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { ThemeBorderRadius, ThemePrimaryColor, ThemeStyle } from '@qwik-ui/utils';
+import { ThemeBorderRadiuses, ThemePrimaryColors, ThemeStyles } from '@qwik-ui/utils';
 import { SetupTailwindGeneratorSchema } from './schema';
 import { setupTailwindGenerator } from './setup-tailwind-generator';
 
@@ -575,9 +575,9 @@ html {
     const { tree, options } = setupWithProperFiles();
 
     options.rootCssPath = 'src/global.css';
-    options.borderRadius = ThemeBorderRadius['BORDER-RADIUS-1'];
-    options.primaryColor = ThemePrimaryColor.RED600;
-    options.style = ThemeStyle.BRUTALIST;
+    options.borderRadius = ThemeBorderRadiuses['BORDER-RADIUS-1'];
+    options.primaryColor = ThemePrimaryColors.RED600;
+    options.style = ThemeStyles.BRUTALIST;
 
     await setupTailwindGenerator(tree, options);
 

packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts

@@ -1,12 +1,12 @@
 import { Tree, formatFiles, joinPathFragments, workspaceRoot } from '@nx/devkit';
 import {
-  ThemeStyle,
+  ThemeBaseColors,
+  ThemeBorderRadiuses,
+  ThemePrimaryColors,
+  ThemeStyles,
   extractBetweenComments,
   extractThemeCSS,
   type ThemeConfig,
-  ThemePrimaryColor,
-  ThemeBorderRadius,
-  ThemeBaseColor,
 } from '@qwik-ui/utils';
 import { readFileSync } from 'fs';
 import { join } from 'path';
@@ -23,10 +23,10 @@ export async function setupTailwindGenerator(
 
   options.projectRoot = options.projectRoot ?? '';
 
-  options.style = options.style ?? ThemeStyle.SIMPLE;
-  options.primaryColor = options.primaryColor ?? ThemePrimaryColor.CYAN600;
+  options.style = options.style ?? ThemeStyles.SIMPLE;
+  options.primaryColor = options.primaryColor ?? ThemePrimaryColors.CYAN600;
 
-  options.borderRadius = options.borderRadius ?? ThemeBorderRadius['BORDER-RADIUS-0'];
+  options.borderRadius = options.borderRadius ?? ThemeBorderRadiuses['BORDER-RADIUS-0'];
 
   updateTailwindConfig(tree, options.projectRoot, kitRoot);
 
@@ -181,7 +181,7 @@ function updateRootCss(
   kitRoot: string,
   themeConfig: ThemeConfig,
 ) {
-  themeConfig.baseColor = ThemeBaseColor.SLATE;
+  themeConfig.baseColor = ThemeBaseColors.SLATE;
 
   const rootCssContent = tree.read(globalCssPath, 'utf-8');
 

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-base-color.enum';
-export * from './theme/theme-border-radius.enum';
+export * from './theme/theme-base-colors';
+export * from './theme/theme-border-radiuses';
 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';
+export * from './theme/theme-fonts';
+export * from './theme/theme-modes';
+export * from './theme/theme-primary-colors';
+export * from './theme/theme-styles';