@lucaismyname/create-l1-stack 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/index.js +322 -32
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucaismyname/create-l1-stack",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/index.js CHANGED
@@ -11,7 +11,6 @@ import { execa } from 'execa'
11
11
  import * as tar from 'tar'
12
12
 
13
13
  const TEMPLATE_PKG_TS = '@lucaismyname/l1-template-ts'
14
- const TEMPLATE_PKG_JS = '@lucaismyname/l1-template-js'
15
14
  const TEMPLATE_PATH_PREFIX = 'package/template/'
16
15
 
17
16
  const THEME_PRESETS = {
@@ -27,16 +26,124 @@ const THEME_PRESETS = {
27
26
  ring: 'oklch(0.556 0 0)',
28
27
  },
29
28
  },
30
- blue: {
29
+ gray: {
31
30
  light: {
32
- primary: 'oklch(0.62 0.19 255)',
31
+ primary: 'oklch(0.205 0 0)',
32
+ primaryForeground: 'oklch(0.985 0 0)',
33
+ ring: 'oklch(0.708 0 0)',
34
+ },
35
+ dark: {
36
+ primary: 'oklch(0.922 0 0)',
37
+ primaryForeground: 'oklch(0.205 0 0)',
38
+ ring: 'oklch(0.556 0 0)',
39
+ },
40
+ },
41
+ zinc: {
42
+ light: {
43
+ primary: 'oklch(0.205 0 0)',
44
+ primaryForeground: 'oklch(0.985 0 0)',
45
+ ring: 'oklch(0.708 0 0)',
46
+ },
47
+ dark: {
48
+ primary: 'oklch(0.922 0 0)',
49
+ primaryForeground: 'oklch(0.205 0 0)',
50
+ ring: 'oklch(0.556 0 0)',
51
+ },
52
+ },
53
+ neutral: {
54
+ light: {
55
+ primary: 'oklch(0.205 0 0)',
56
+ primaryForeground: 'oklch(0.985 0 0)',
57
+ ring: 'oklch(0.708 0 0)',
58
+ },
59
+ dark: {
60
+ primary: 'oklch(0.922 0 0)',
61
+ primaryForeground: 'oklch(0.205 0 0)',
62
+ ring: 'oklch(0.556 0 0)',
63
+ },
64
+ },
65
+ stone: {
66
+ light: {
67
+ primary: 'oklch(0.205 0 0)',
68
+ primaryForeground: 'oklch(0.985 0 0)',
69
+ ring: 'oklch(0.708 0 0)',
70
+ },
71
+ dark: {
72
+ primary: 'oklch(0.922 0 0)',
73
+ primaryForeground: 'oklch(0.205 0 0)',
74
+ ring: 'oklch(0.556 0 0)',
75
+ },
76
+ },
77
+ red: {
78
+ light: {
79
+ primary: 'oklch(0.62 0.24 20)',
33
80
  primaryForeground: 'oklch(0.98 0 0)',
34
- ring: 'oklch(0.62 0.19 255)',
81
+ ring: 'oklch(0.62 0.24 20)',
35
82
  },
36
83
  dark: {
37
- primary: 'oklch(0.78 0.14 255)',
84
+ primary: 'oklch(0.74 0.18 20)',
38
85
  primaryForeground: 'oklch(0.18 0 0)',
39
- ring: 'oklch(0.78 0.14 255)',
86
+ ring: 'oklch(0.74 0.18 20)',
87
+ },
88
+ },
89
+ orange: {
90
+ light: {
91
+ primary: 'oklch(0.65 0.20 45)',
92
+ primaryForeground: 'oklch(0.98 0 0)',
93
+ ring: 'oklch(0.65 0.20 45)',
94
+ },
95
+ dark: {
96
+ primary: 'oklch(0.78 0.16 45)',
97
+ primaryForeground: 'oklch(0.18 0 0)',
98
+ ring: 'oklch(0.78 0.16 45)',
99
+ },
100
+ },
101
+ amber: {
102
+ light: {
103
+ primary: 'oklch(0.68 0.18 65)',
104
+ primaryForeground: 'oklch(0.98 0 0)',
105
+ ring: 'oklch(0.68 0.18 65)',
106
+ },
107
+ dark: {
108
+ primary: 'oklch(0.80 0.14 65)',
109
+ primaryForeground: 'oklch(0.18 0 0)',
110
+ ring: 'oklch(0.80 0.14 65)',
111
+ },
112
+ },
113
+ yellow: {
114
+ light: {
115
+ primary: 'oklch(0.72 0.16 85)',
116
+ primaryForeground: 'oklch(0.98 0 0)',
117
+ ring: 'oklch(0.72 0.16 85)',
118
+ },
119
+ dark: {
120
+ primary: 'oklch(0.82 0.12 85)',
121
+ primaryForeground: 'oklch(0.18 0 0)',
122
+ ring: 'oklch(0.82 0.12 85)',
123
+ },
124
+ },
125
+ lime: {
126
+ light: {
127
+ primary: 'oklch(0.68 0.16 125)',
128
+ primaryForeground: 'oklch(0.98 0 0)',
129
+ ring: 'oklch(0.68 0.16 125)',
130
+ },
131
+ dark: {
132
+ primary: 'oklch(0.80 0.12 125)',
133
+ primaryForeground: 'oklch(0.18 0 0)',
134
+ ring: 'oklch(0.80 0.12 125)',
135
+ },
136
+ },
137
+ green: {
138
+ light: {
139
+ primary: 'oklch(0.67 0.17 155)',
140
+ primaryForeground: 'oklch(0.98 0 0)',
141
+ ring: 'oklch(0.67 0.17 155)',
142
+ },
143
+ dark: {
144
+ primary: 'oklch(0.78 0.14 155)',
145
+ primaryForeground: 'oklch(0.18 0 0)',
146
+ ring: 'oklch(0.78 0.14 155)',
40
147
  },
41
148
  },
42
149
  emerald: {
@@ -51,6 +158,66 @@ const THEME_PRESETS = {
51
158
  ring: 'oklch(0.78 0.14 155)',
52
159
  },
53
160
  },
161
+ teal: {
162
+ light: {
163
+ primary: 'oklch(0.65 0.18 175)',
164
+ primaryForeground: 'oklch(0.98 0 0)',
165
+ ring: 'oklch(0.65 0.18 175)',
166
+ },
167
+ dark: {
168
+ primary: 'oklch(0.77 0.14 175)',
169
+ primaryForeground: 'oklch(0.18 0 0)',
170
+ ring: 'oklch(0.77 0.14 175)',
171
+ },
172
+ },
173
+ cyan: {
174
+ light: {
175
+ primary: 'oklch(0.63 0.19 195)',
176
+ primaryForeground: 'oklch(0.98 0 0)',
177
+ ring: 'oklch(0.63 0.19 195)',
178
+ },
179
+ dark: {
180
+ primary: 'oklch(0.76 0.15 195)',
181
+ primaryForeground: 'oklch(0.18 0 0)',
182
+ ring: 'oklch(0.76 0.15 195)',
183
+ },
184
+ },
185
+ sky: {
186
+ light: {
187
+ primary: 'oklch(0.62 0.19 215)',
188
+ primaryForeground: 'oklch(0.98 0 0)',
189
+ ring: 'oklch(0.62 0.19 215)',
190
+ },
191
+ dark: {
192
+ primary: 'oklch(0.75 0.15 215)',
193
+ primaryForeground: 'oklch(0.18 0 0)',
194
+ ring: 'oklch(0.75 0.15 215)',
195
+ },
196
+ },
197
+ blue: {
198
+ light: {
199
+ primary: 'oklch(0.62 0.19 255)',
200
+ primaryForeground: 'oklch(0.98 0 0)',
201
+ ring: 'oklch(0.62 0.19 255)',
202
+ },
203
+ dark: {
204
+ primary: 'oklch(0.78 0.14 255)',
205
+ primaryForeground: 'oklch(0.18 0 0)',
206
+ ring: 'oklch(0.78 0.14 255)',
207
+ },
208
+ },
209
+ indigo: {
210
+ light: {
211
+ primary: 'oklch(0.60 0.21 275)',
212
+ primaryForeground: 'oklch(0.98 0 0)',
213
+ ring: 'oklch(0.60 0.21 275)',
214
+ },
215
+ dark: {
216
+ primary: 'oklch(0.74 0.16 275)',
217
+ primaryForeground: 'oklch(0.18 0 0)',
218
+ ring: 'oklch(0.74 0.16 275)',
219
+ },
220
+ },
54
221
  violet: {
55
222
  light: {
56
223
  primary: 'oklch(0.62 0.23 300)',
@@ -63,6 +230,42 @@ const THEME_PRESETS = {
63
230
  ring: 'oklch(0.75 0.18 300)',
64
231
  },
65
232
  },
233
+ purple: {
234
+ light: {
235
+ primary: 'oklch(0.63 0.24 315)',
236
+ primaryForeground: 'oklch(0.98 0 0)',
237
+ ring: 'oklch(0.63 0.24 315)',
238
+ },
239
+ dark: {
240
+ primary: 'oklch(0.76 0.19 315)',
241
+ primaryForeground: 'oklch(0.18 0 0)',
242
+ ring: 'oklch(0.76 0.19 315)',
243
+ },
244
+ },
245
+ fuchsia: {
246
+ light: {
247
+ primary: 'oklch(0.64 0.25 330)',
248
+ primaryForeground: 'oklch(0.98 0 0)',
249
+ ring: 'oklch(0.64 0.25 330)',
250
+ },
251
+ dark: {
252
+ primary: 'oklch(0.77 0.20 330)',
253
+ primaryForeground: 'oklch(0.18 0 0)',
254
+ ring: 'oklch(0.77 0.20 330)',
255
+ },
256
+ },
257
+ pink: {
258
+ light: {
259
+ primary: 'oklch(0.65 0.24 345)',
260
+ primaryForeground: 'oklch(0.98 0 0)',
261
+ ring: 'oklch(0.65 0.24 345)',
262
+ },
263
+ dark: {
264
+ primary: 'oklch(0.78 0.19 345)',
265
+ primaryForeground: 'oklch(0.18 0 0)',
266
+ ring: 'oklch(0.78 0.19 345)',
267
+ },
268
+ },
66
269
  rose: {
67
270
  light: {
68
271
  primary: 'oklch(0.62 0.24 20)',
@@ -77,6 +280,31 @@ const THEME_PRESETS = {
77
280
  },
78
281
  }
79
282
 
283
+ const BASE_COLOR_PRESETS = {
284
+ slate: { bg: 'bg-slate-50', text: 'text-slate-950' },
285
+ gray: { bg: 'bg-gray-50', text: 'text-gray-950' },
286
+ zinc: { bg: 'bg-zinc-50', text: 'text-zinc-950' },
287
+ neutral: { bg: 'bg-neutral-50', text: 'text-neutral-950' },
288
+ stone: { bg: 'bg-stone-50', text: 'text-stone-950' },
289
+ red: { bg: 'bg-red-50', text: 'text-red-950' },
290
+ orange: { bg: 'bg-orange-50', text: 'text-orange-950' },
291
+ amber: { bg: 'bg-amber-50', text: 'text-amber-950' },
292
+ yellow: { bg: 'bg-yellow-50', text: 'text-yellow-950' },
293
+ lime: { bg: 'bg-lime-50', text: 'text-lime-950' },
294
+ green: { bg: 'bg-green-50', text: 'text-green-950' },
295
+ emerald: { bg: 'bg-emerald-50', text: 'text-emerald-950' },
296
+ teal: { bg: 'bg-teal-50', text: 'text-teal-950' },
297
+ cyan: { bg: 'bg-cyan-50', text: 'text-cyan-950' },
298
+ sky: { bg: 'bg-sky-50', text: 'text-sky-950' },
299
+ blue: { bg: 'bg-blue-50', text: 'text-blue-950' },
300
+ indigo: { bg: 'bg-indigo-50', text: 'text-indigo-950' },
301
+ violet: { bg: 'bg-violet-50', text: 'text-violet-950' },
302
+ purple: { bg: 'bg-purple-50', text: 'text-purple-950' },
303
+ fuchsia: { bg: 'bg-fuchsia-50', text: 'text-fuchsia-950' },
304
+ pink: { bg: 'bg-pink-50', text: 'text-pink-950' },
305
+ rose: { bg: 'bg-rose-50', text: 'text-rose-950' },
306
+ }
307
+
80
308
  const INTEGRATIONS = {
81
309
  contentful: {
82
310
  label: 'Contentful',
@@ -185,19 +413,19 @@ function updateCssVarInBlock(css, blockSelector, varName, value) {
185
413
  return css.replace(full, `${open}${nextBody}${close}`)
186
414
  }
187
415
 
188
- async function applyPrimaryTheme(targetDir, preset) {
416
+ async function applyPrimaryTheme(targetDir, primaryPreset, basePreset) {
189
417
  const indexCssPath = path.join(targetDir, 'src', 'index.css')
190
418
  try {
191
419
  const css = await fs.readFile(indexCssPath, 'utf8')
192
420
  let next = css
193
421
 
194
- next = updateCssVarInBlock(next, ':root', '--primary', preset.light.primary)
195
- next = updateCssVarInBlock(next, ':root', '--primary-foreground', preset.light.primaryForeground)
196
- next = updateCssVarInBlock(next, ':root', '--ring', preset.light.ring)
422
+ next = updateCssVarInBlock(next, ':root', '--primary', primaryPreset.light.primary)
423
+ next = updateCssVarInBlock(next, ':root', '--primary-foreground', primaryPreset.light.primaryForeground)
424
+ next = updateCssVarInBlock(next, ':root', '--ring', primaryPreset.light.ring)
197
425
 
198
- next = updateCssVarInBlock(next, '\\.dark', '--primary', preset.dark.primary)
199
- next = updateCssVarInBlock(next, '\\.dark', '--primary-foreground', preset.dark.primaryForeground)
200
- next = updateCssVarInBlock(next, '\\.dark', '--ring', preset.dark.ring)
426
+ next = updateCssVarInBlock(next, '\\.dark', '--primary', primaryPreset.dark.primary)
427
+ next = updateCssVarInBlock(next, '\\.dark', '--primary-foreground', primaryPreset.dark.primaryForeground)
428
+ next = updateCssVarInBlock(next, '\\.dark', '--ring', primaryPreset.dark.ring)
201
429
 
202
430
  if (next !== css) {
203
431
  await fs.writeFile(indexCssPath, next, 'utf8')
@@ -205,6 +433,25 @@ async function applyPrimaryTheme(targetDir, preset) {
205
433
  } catch {
206
434
  // ignore if index.css doesn't exist
207
435
  }
436
+
437
+ // Apply base color to body background and text in light mode
438
+ const appTsxPath = path.join(targetDir, 'src', 'App.tsx')
439
+ try {
440
+ const app = await fs.readFile(appTsxPath, 'utf8')
441
+ let next = app
442
+
443
+ // Replace the default background and text classes with base color
444
+ next = next.replace(
445
+ /className="min-h-dvh"/g,
446
+ `className="min-h-dvh ${basePreset.bg} ${basePreset.text}"`
447
+ )
448
+
449
+ if (next !== app) {
450
+ await fs.writeFile(appTsxPath, next, 'utf8')
451
+ }
452
+ } catch {
453
+ // ignore
454
+ }
208
455
  }
209
456
 
210
457
  async function applyIconSet(targetDir, language, iconSetKey) {
@@ -452,12 +699,12 @@ async function applyLayout(targetDir, language, layoutKey, containerPresetKey) {
452
699
  "import TopNav from './components/TopNav'\nimport { ErrorBoundary } from './components/ErrorBoundary'\n"
453
700
  )
454
701
  }
455
- // if (!next.includes("./pages/NotFound")) {
456
- // next = next.replace(
457
- // /import Integrations from '\.\/pages\/Integrations'\n/,
458
- // "import Integrations from './pages/Integrations'\nimport NotFound from './pages/NotFound'\n"
459
- // )
460
- // }
702
+ if (!next.includes("./pages/NotFound")) {
703
+ next = next.replace(
704
+ /import QuickStart from '\.\/pages\/QuickStart'\n/,
705
+ "import QuickStart from './pages/QuickStart'\nimport NotFound from './pages/NotFound'\n"
706
+ )
707
+ }
461
708
  next = next.replace(
462
709
  /<Routes>[\s\S]*?<\/Routes>/m,
463
710
  `<ErrorBoundary>\n <Routes>\n <Route path="/" element={<Home />} />\n <Route path="/quick-start" element={<QuickStart />} />\n <Route path="*" element={<NotFound />} />\n </Routes>\n </ErrorBoundary>`
@@ -609,31 +856,70 @@ async function main() {
609
856
  process.exit(1)
610
857
  }
611
858
 
612
- const language = await select({
613
- message: 'Use JavaScript or TypeScript?',
859
+ const language = 'ts'
860
+
861
+ const primaryColor = await select({
862
+ message: 'Primary color',
614
863
  options: [
615
- { value: 'ts', label: 'TypeScript' },
616
- { value: 'js', label: 'JavaScript' },
864
+ { value: 'slate', label: 'Slate (default)' },
865
+ { value: 'gray', label: 'Gray' },
866
+ { value: 'zinc', label: 'Zinc' },
867
+ { value: 'neutral', label: 'Neutral' },
868
+ { value: 'stone', label: 'Stone' },
869
+ { value: 'red', label: 'Red' },
870
+ { value: 'orange', label: 'Orange' },
871
+ { value: 'amber', label: 'Amber' },
872
+ { value: 'yellow', label: 'Yellow' },
873
+ { value: 'lime', label: 'Lime' },
874
+ { value: 'green', label: 'Green' },
875
+ { value: 'emerald', label: 'Emerald' },
876
+ { value: 'teal', label: 'Teal' },
877
+ { value: 'cyan', label: 'Cyan' },
878
+ { value: 'sky', label: 'Sky' },
879
+ { value: 'blue', label: 'Blue' },
880
+ { value: 'indigo', label: 'Indigo' },
881
+ { value: 'violet', label: 'Violet' },
882
+ { value: 'purple', label: 'Purple' },
883
+ { value: 'fuchsia', label: 'Fuchsia' },
884
+ { value: 'pink', label: 'Pink' },
885
+ { value: 'rose', label: 'Rose' },
617
886
  ],
618
- initialValue: 'ts',
887
+ initialValue: 'slate',
619
888
  })
620
- if (isCancel(language)) {
889
+ if (isCancel(primaryColor)) {
621
890
  cancel('Cancelled')
622
891
  process.exit(0)
623
892
  }
624
893
 
625
- const primaryColor = await select({
626
- message: 'Primary color',
894
+ const baseColor = await select({
895
+ message: 'Base color (background/text in light mode)',
627
896
  options: [
628
897
  { value: 'slate', label: 'Slate (default)' },
629
- { value: 'blue', label: 'Blue' },
898
+ { value: 'gray', label: 'Gray' },
899
+ { value: 'zinc', label: 'Zinc' },
900
+ { value: 'neutral', label: 'Neutral' },
901
+ { value: 'stone', label: 'Stone' },
902
+ { value: 'red', label: 'Red' },
903
+ { value: 'orange', label: 'Orange' },
904
+ { value: 'amber', label: 'Amber' },
905
+ { value: 'yellow', label: 'Yellow' },
906
+ { value: 'lime', label: 'Lime' },
907
+ { value: 'green', label: 'Green' },
630
908
  { value: 'emerald', label: 'Emerald' },
909
+ { value: 'teal', label: 'Teal' },
910
+ { value: 'cyan', label: 'Cyan' },
911
+ { value: 'sky', label: 'Sky' },
912
+ { value: 'blue', label: 'Blue' },
913
+ { value: 'indigo', label: 'Indigo' },
631
914
  { value: 'violet', label: 'Violet' },
915
+ { value: 'purple', label: 'Purple' },
916
+ { value: 'fuchsia', label: 'Fuchsia' },
917
+ { value: 'pink', label: 'Pink' },
632
918
  { value: 'rose', label: 'Rose' },
633
919
  ],
634
920
  initialValue: 'slate',
635
921
  })
636
- if (isCancel(primaryColor)) {
922
+ if (isCancel(baseColor)) {
637
923
  cancel('Cancelled')
638
924
  process.exit(0)
639
925
  }
@@ -740,7 +1026,7 @@ async function main() {
740
1026
  const templateDir = path.resolve(
741
1027
  cliDir,
742
1028
  '../../../templates',
743
- language === 'ts' ? 'l1-stack-ts' : 'l1-stack-js'
1029
+ 'l1-stack-ts'
744
1030
  )
745
1031
 
746
1032
  if (!(await pathExists(templateDir))) {
@@ -756,7 +1042,7 @@ async function main() {
756
1042
  },
757
1043
  })
758
1044
  } else {
759
- const templatePackageName = language === 'ts' ? TEMPLATE_PKG_TS : TEMPLATE_PKG_JS
1045
+ const templatePackageName = TEMPLATE_PKG_TS
760
1046
  try {
761
1047
  await downloadAndExtractTemplate(templatePackageName, targetDir)
762
1048
  } catch (err) {
@@ -765,7 +1051,11 @@ async function main() {
765
1051
  }
766
1052
  }
767
1053
 
768
- await applyPrimaryTheme(targetDir, THEME_PRESETS[primaryColor] ?? THEME_PRESETS.slate)
1054
+ await applyPrimaryTheme(
1055
+ targetDir,
1056
+ THEME_PRESETS[primaryColor] ?? THEME_PRESETS.slate,
1057
+ BASE_COLOR_PRESETS[baseColor] ?? BASE_COLOR_PRESETS.slate
1058
+ )
769
1059
  await applyIconSet(targetDir, language, iconSet)
770
1060
  await applyEnvAndConfig(targetDir, language, integrations)
771
1061
  await applyIntegrations(targetDir, language, integrations)