Skip to content

Commit 927c2d4

Browse files
shairezshairez
authored
Fix CLI (#914)
* added nx/workspace-data to gitignore * utils: changed enums to consts * fix cli types
1 parent 6de2b62 commit 927c2d4

22 files changed

+377
-332
lines changed

‎.changeset/fast-mice-destroy.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@qwik-ui/utils': minor
3+
'qwik-ui': patch
4+
---
5+
6+
Changed enums to const maps in utils

‎.changeset/spicy-apples-battle.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'qwik-ui': patch
3+
---
4+
5+
FIX: added `.nx/workspace-data` to `.gitignore` for new projects

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

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { $, PropsOf, component$, useComputed$ } from '@builder.io/qwik';
2-
import { Modal, Button, buttonVariants } from '~/components/ui';
32
import {
4-
ThemeBaseColor,
5-
ThemeBorderRadius,
3+
ThemeBaseColors,
4+
ThemeBorderRadiuses,
65
ThemeConfig,
7-
ThemeFont,
8-
ThemeMode,
9-
ThemePrimaryColor,
10-
ThemeStyle,
6+
ThemeFonts,
7+
ThemeModes,
8+
ThemePrimaryColors,
9+
ThemeStyles,
1110
cn,
1211
} from '@qwik-ui/utils';
1312
import { LuSlidersHorizontal, LuX } from '@qwikest/icons/lucide';
1413
import { useTheme } from 'qwik-themes';
14+
import { Button, Modal, buttonVariants } from '~/components/ui';
1515

16-
import CopyCssConfig from '../copy-css-config/copy-css-config';
1716
import { useAppState } from '~/_state/use-app-state';
17+
import CopyCssConfig from '../copy-css-config/copy-css-config';
1818

1919
export default component$<PropsOf<typeof Button>>(() => {
2020
const rootStore = useAppState();
@@ -24,23 +24,23 @@ export default component$<PropsOf<typeof Button>>(() => {
2424
const themeComputedObjectSig = useComputed$((): ThemeConfig => {
2525
if (!theme || theme === 'light') {
2626
return {
27-
font: ThemeFont.SANS,
28-
mode: ThemeMode.LIGHT,
29-
style: ThemeStyle.SIMPLE,
30-
baseColor: ThemeBaseColor.SLATE,
31-
primaryColor: ThemePrimaryColor.CYAN600,
32-
borderRadius: ThemeBorderRadius['BORDER-RADIUS-0'],
27+
font: ThemeFonts.SANS,
28+
mode: ThemeModes.LIGHT,
29+
style: ThemeStyles.SIMPLE,
30+
baseColor: ThemeBaseColors.SLATE,
31+
primaryColor: ThemePrimaryColors.CYAN600,
32+
borderRadius: ThemeBorderRadiuses['BORDER-RADIUS-0'],
3333
};
3434
}
3535

3636
if (theme === 'dark') {
3737
return {
38-
font: ThemeFont.SANS,
39-
mode: ThemeMode.DARK,
40-
style: ThemeStyle.SIMPLE,
41-
baseColor: ThemeBaseColor.SLATE,
42-
primaryColor: ThemePrimaryColor.CYAN600,
43-
borderRadius: ThemeBorderRadius['BORDER-RADIUS-0'],
38+
font: ThemeFonts.SANS,
39+
mode: ThemeModes.DARK,
40+
style: ThemeStyles.SIMPLE,
41+
baseColor: ThemeBaseColors.SLATE,
42+
primaryColor: ThemePrimaryColors.CYAN600,
43+
borderRadius: ThemeBorderRadiuses['BORDER-RADIUS-0'],
4444
};
4545
}
4646

@@ -82,13 +82,13 @@ export default component$<PropsOf<typeof Button>>(() => {
8282
value={themeComputedObjectSig.value.style}
8383
onChange$={async (e, el) => {
8484
if (el.value === 'simple') {
85-
themeComputedObjectSig.value.font = ThemeFont.SANS;
85+
themeComputedObjectSig.value.font = ThemeFonts.SANS;
8686
}
8787
if (el.value === 'brutalist') {
88-
themeComputedObjectSig.value.font = ThemeFont.MONO;
88+
themeComputedObjectSig.value.font = ThemeFonts.MONO;
8989
}
9090
if (el.value === 'neumorphic') {
91-
themeComputedObjectSig.value.font = ThemeFont.SANS;
91+
themeComputedObjectSig.value.font = ThemeFonts.SANS;
9292
}
9393
themeComputedObjectSig.value.style = el.value;
9494
setTheme(await themeStoreToThemeClasses$());
@@ -103,7 +103,7 @@ export default component$<PropsOf<typeof Button>>(() => {
103103

104104
<label class="mb-1 mt-8 block font-medium">Base</label>
105105
<div class="flex">
106-
{Object.values(ThemeBaseColor).map((baseColor: string) => {
106+
{Object.values(ThemeBaseColors).map((baseColor: string) => {
107107
const isActive = themeComputedObjectSig.value.baseColor === baseColor;
108108

109109
return (
@@ -139,7 +139,7 @@ export default component$<PropsOf<typeof Button>>(() => {
139139
<label class="mb-1 mt-8 block font-medium">Primary</label>
140140
<div class="flex justify-end">
141141
<div class="grid grid-cols-[repeat(22,0fr)]">
142-
{Object.values(ThemePrimaryColor).map((primaryColor: string) => {
142+
{Object.values(ThemePrimaryColors).map((primaryColor: string) => {
143143
const isActive =
144144
themeComputedObjectSig.value.primaryColor === primaryColor;
145145

@@ -430,7 +430,7 @@ export default component$<PropsOf<typeof Button>>(() => {
430430
<div>
431431
<label class="mb-1 mt-8 block font-medium">Radius</label>
432432
<div class="flex h-12 space-x-3">
433-
{Object.values(ThemeBorderRadius).map((borderRadius: string) => {
433+
{Object.values(ThemeBorderRadiuses).map((borderRadius: string) => {
434434
const isActive =
435435
themeComputedObjectSig.value.borderRadius === borderRadius;
436436
return (

‎apps/website/src/root.tsx

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
import { component$, useContextProvider, useStore, useStyles$ } from '@builder.io/qwik';
1+
import {
2+
component$,
3+
PrefetchGraph,
4+
PrefetchServiceWorker,
5+
useContextProvider,
6+
useStore,
7+
useStyles$,
8+
} from '@builder.io/qwik';
29
import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';
3-
import { PrefetchServiceWorker, PrefetchGraph } from '@builder.io/qwik';
410

511
import { APP_STATE_CONTEXT_ID } from './_state/app-state-context-id';
612
import { AppState } from './_state/app-state.type';
@@ -11,12 +17,12 @@ import { ThemeProvider } from 'qwik-themes';
1117

1218
import '@fontsource-variable/inter';
1319
import {
14-
ThemeBaseColor,
15-
ThemeBorderRadius,
16-
ThemeFont,
17-
ThemeMode,
18-
ThemePrimaryColor,
19-
ThemeStyle,
20+
ThemeBaseColors,
21+
ThemeBorderRadiuses,
22+
ThemeFonts,
23+
ThemeModes,
24+
ThemePrimaryColors,
25+
ThemeStyles,
2026
} from '@qwik-ui/utils';
2127

2228
export default component$(() => {
@@ -51,12 +57,12 @@ export default component$(() => {
5157
attribute="class"
5258
enableSystem={false}
5359
themes={[
54-
...Object.values(ThemeFont),
55-
...Object.values(ThemeMode),
56-
...Object.values(ThemeStyle),
57-
...Object.values(ThemeBaseColor),
58-
...Object.values(ThemePrimaryColor),
59-
...Object.values(ThemeBorderRadius),
60+
...Object.values(ThemeFonts),
61+
...Object.values(ThemeModes),
62+
...Object.values(ThemeStyles),
63+
...Object.values(ThemeBaseColors),
64+
...Object.values(ThemePrimaryColors),
65+
...Object.values(ThemeBorderRadiuses),
6066
]}
6167
>
6268
<RouterOutlet />

‎packages/cli/bin/index.ts

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,13 @@ import {
2020
} from '@nx/devkit';
2121

2222
import {
23-
ThemeBorderRadius,
23+
type ThemeBorderRadius,
24+
ThemeBorderRadiuses,
2425
ThemeConfig,
25-
ThemePrimaryColor,
26+
type ThemePrimaryColor,
27+
ThemePrimaryColors,
2628
ThemeStyle,
29+
ThemeStyles,
2730
} from '@qwik-ui/utils';
2831
import { bgRgb, bold, cyan, green, red } from 'ansis';
2932
import { execSync } from 'child_process';
@@ -101,7 +104,7 @@ async function handleInit() {
101104
.option('style', {
102105
description: 'Theme style',
103106
type: 'string',
104-
choices: [ThemeStyle.SIMPLE, ThemeStyle.BRUTALIST, ThemeStyle.NEUMORPHIC],
107+
choices: [ThemeStyles.SIMPLE, ThemeStyles.BRUTALIST, ThemeStyles.NEUMORPHIC],
105108
})
106109
.option('e2e', {
107110
description: 'Install styled packages tagged as e2e for tests',
@@ -217,21 +220,21 @@ async function handleInit() {
217220
}
218221

219222
if (!shouldCustomize) {
220-
config.style ||= ThemeStyle.SIMPLE;
221-
config.primaryColor ||= ThemePrimaryColor.CYAN600;
222-
config.borderRadius ||= ThemeBorderRadius['BORDER-RADIUS-0'];
223+
config.style ||= ThemeStyles.SIMPLE;
224+
config.primaryColor ||= ThemePrimaryColors.CYAN600;
225+
config.borderRadius ||= ThemeBorderRadiuses['BORDER-RADIUS-0'];
223226
} else {
224227
if (!config.style) {
225228
config.style = cancelable(
226229
await select({
227230
message: cyan('Choose a style for your theme'),
228231

229232
options: [
230-
{ label: 'Simple', value: ThemeStyle.SIMPLE },
231-
{ label: 'Brutalist', value: ThemeStyle.BRUTALIST },
232-
{ label: 'Neumorphic', value: ThemeStyle.NEUMORPHIC },
233+
{ label: 'Simple', value: ThemeStyles.SIMPLE },
234+
{ label: 'Brutalist', value: ThemeStyles.BRUTALIST },
235+
{ label: 'Neumorphic', value: ThemeStyles.NEUMORPHIC },
233236
],
234-
initialValue: ThemeStyle.SIMPLE,
237+
initialValue: ThemeStyles.SIMPLE as ThemeStyle,
235238
}),
236239
);
237240
}
@@ -240,51 +243,51 @@ async function handleInit() {
240243
config.primaryColor = cancelable(
241244
await select({
242245
message: cyan('Choose a primary color'),
243-
initialValue: ThemePrimaryColor.CYAN600 as string,
246+
initialValue: ThemePrimaryColors.CYAN600 as string,
244247
options: [
245248
{
246249
label: bold`${bgRgb(220, 38, 38)` `} ${capitalizeFirstLetter('Red')} `,
247-
hint: ThemePrimaryColor.RED600,
248-
value: ThemePrimaryColor.RED600,
250+
hint: ThemePrimaryColors.RED600,
251+
value: ThemePrimaryColors.RED600,
249252
},
250253
{
251254
label: bold`${bgRgb(234, 88, 12)` `} ${capitalizeFirstLetter('Orange')} `,
252-
hint: ThemePrimaryColor.ORANGE600,
253-
value: ThemePrimaryColor.ORANGE600,
255+
hint: ThemePrimaryColors.ORANGE600,
256+
value: ThemePrimaryColors.ORANGE600,
254257
},
255258
{
256259
label: bold`${bgRgb(250, 204, 21)` `} ${capitalizeFirstLetter(
257260
'Yellow',
258261
)} `,
259-
hint: ThemePrimaryColor.YELLOW400,
260-
value: ThemePrimaryColor.YELLOW400,
262+
hint: ThemePrimaryColors.YELLOW400,
263+
value: ThemePrimaryColors.YELLOW400,
261264
},
262265
{
263266
label: bold`${bgRgb(22, 163, 74)` `} ${capitalizeFirstLetter('Green')} `,
264-
hint: ThemePrimaryColor.GREEN600,
265-
value: ThemePrimaryColor.GREEN600,
267+
hint: ThemePrimaryColors.GREEN600,
268+
value: ThemePrimaryColors.GREEN600,
266269
},
267270
{
268271
label: bold`${bgRgb(6, 182, 212)` `} ${capitalizeFirstLetter('Cyan')} `,
269-
hint: ThemePrimaryColor.CYAN600,
270-
value: ThemePrimaryColor.CYAN600,
272+
hint: ThemePrimaryColors.CYAN600,
273+
value: ThemePrimaryColors.CYAN600,
271274
},
272275
{
273276
label: bold`${bgRgb(37, 99, 235)` `} ${capitalizeFirstLetter('Blue')} `,
274-
hint: ThemePrimaryColor.BLUE600,
275-
value: ThemePrimaryColor.BLUE600,
277+
hint: ThemePrimaryColors.BLUE600,
278+
value: ThemePrimaryColors.BLUE600,
276279
},
277280
{
278281
label: bold`${bgRgb(147, 51, 234)` `} ${capitalizeFirstLetter(
279282
'Purple',
280283
)} `,
281-
hint: ThemePrimaryColor.PURPLE600,
282-
value: ThemePrimaryColor.PURPLE600,
284+
hint: ThemePrimaryColors.PURPLE600,
285+
value: ThemePrimaryColors.PURPLE600,
283286
},
284287
{
285288
label: bold`${bgRgb(219, 39, 119)` `} ${capitalizeFirstLetter('Pink')} `,
286-
hint: ThemePrimaryColor.PINK600,
287-
value: ThemePrimaryColor.PINK600,
289+
hint: ThemePrimaryColors.PINK600,
290+
value: ThemePrimaryColors.PINK600,
288291
},
289292
],
290293
}),
@@ -303,7 +306,7 @@ async function handleInit() {
303306
{ label: '0.75', value: 'border-radius-dot-75' },
304307
{ label: '1', value: 'border-radius-1' },
305308
],
306-
initialValue: 'border-radius-0',
309+
initialValue: 'border-radius-0' as ThemeBorderRadius,
307310
}),
308311
);
309312
}
@@ -370,7 +373,7 @@ async function installNxIfNeeded() {
370373
try {
371374
let contents = readFileSync(ignorePath, 'utf-8');
372375
if (!contents.includes('.nx/cache')) {
373-
contents = [contents, '', '.nx/cache'].join('\n');
376+
contents = [contents, '', '.nx/cache', '.nx/workspace-data'].join('\n');
374377
writeFileSync(ignorePath, contents, 'utf-8');
375378
}
376379
} catch {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
2-
import { ThemeBorderRadius, ThemePrimaryColor, ThemeStyle } from '@qwik-ui/utils';
2+
import { ThemeBorderRadiuses, ThemePrimaryColors, ThemeStyles } from '@qwik-ui/utils';
33
import { SetupTailwindGeneratorSchema } from './schema';
44
import { setupTailwindGenerator } from './setup-tailwind-generator';
55

@@ -575,9 +575,9 @@ html {
575575
const { tree, options } = setupWithProperFiles();
576576

577577
options.rootCssPath = 'src/global.css';
578-
options.borderRadius = ThemeBorderRadius['BORDER-RADIUS-1'];
579-
options.primaryColor = ThemePrimaryColor.RED600;
580-
options.style = ThemeStyle.BRUTALIST;
578+
options.borderRadius = ThemeBorderRadiuses['BORDER-RADIUS-1'];
579+
options.primaryColor = ThemePrimaryColors.RED600;
580+
options.style = ThemeStyles.BRUTALIST;
581581

582582
await setupTailwindGenerator(tree, options);
583583

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Tree, formatFiles, joinPathFragments, workspaceRoot } from '@nx/devkit';
22
import {
3-
ThemeStyle,
3+
ThemeBaseColors,
4+
ThemeBorderRadiuses,
5+
ThemePrimaryColors,
6+
ThemeStyles,
47
extractBetweenComments,
58
extractThemeCSS,
69
type ThemeConfig,
7-
ThemePrimaryColor,
8-
ThemeBorderRadius,
9-
ThemeBaseColor,
1010
} from '@qwik-ui/utils';
1111
import { readFileSync } from 'fs';
1212
import { join } from 'path';
@@ -23,10 +23,10 @@ export async function setupTailwindGenerator(
2323

2424
options.projectRoot = options.projectRoot ?? '';
2525

26-
options.style = options.style ?? ThemeStyle.SIMPLE;
27-
options.primaryColor = options.primaryColor ?? ThemePrimaryColor.CYAN600;
26+
options.style = options.style ?? ThemeStyles.SIMPLE;
27+
options.primaryColor = options.primaryColor ?? ThemePrimaryColors.CYAN600;
2828

29-
options.borderRadius = options.borderRadius ?? ThemeBorderRadius['BORDER-RADIUS-0'];
29+
options.borderRadius = options.borderRadius ?? ThemeBorderRadiuses['BORDER-RADIUS-0'];
3030

3131
updateTailwindConfig(tree, options.projectRoot, kitRoot);
3232

@@ -181,7 +181,7 @@ function updateRootCss(
181181
kitRoot: string,
182182
themeConfig: ThemeConfig,
183183
) {
184-
themeConfig.baseColor = ThemeBaseColor.SLATE;
184+
themeConfig.baseColor = ThemeBaseColors.SLATE;
185185

186186
const rootCssContent = tree.read(globalCssPath, 'utf-8');
187187

‎packages/utils/src/index.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
export * from './cn';
22
export * from './theme/extract-between-comments';
33
export * from './theme/extract-theme-css';
4-
export * from './theme/theme-base-color.enum';
5-
export * from './theme/theme-border-radius.enum';
4+
export * from './theme/theme-base-colors';
5+
export * from './theme/theme-border-radiuses';
66
export * from './theme/theme-config.type';
7-
export * from './theme/theme-font.enum';
8-
export * from './theme/theme-mode-enum';
9-
export * from './theme/theme-primary-color.enum';
10-
export * from './theme/theme-style.enum';
7+
export * from './theme/theme-fonts';
8+
export * from './theme/theme-modes';
9+
export * from './theme/theme-primary-colors';
10+
export * from './theme/theme-styles';

0 commit comments

Comments
 (0)