@thorprovider/create-storefront 0.1.2 → 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.
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ required at generation time.
|
|
|
18
18
|
| Requirement | Supported |
|
|
19
19
|
| --- | --- |
|
|
20
20
|
| Node.js | >= 18.17.0 |
|
|
21
|
-
| Package manager |
|
|
21
|
+
| Package manager | Yarn (for generated projects) |
|
|
22
22
|
| OpenCode | a version that supports project skills in `.opencode/skills/` |
|
|
23
23
|
| OS | macOS, Linux, Windows (via WSL) |
|
|
24
24
|
|
|
@@ -27,7 +27,7 @@ required at generation time.
|
|
|
27
27
|
From the root of the project where you want the commands available:
|
|
28
28
|
|
|
29
29
|
```bash
|
|
30
|
-
|
|
30
|
+
yarn dlx @thorprovider/create-storefront
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
Or, once installed as a dependency:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thorprovider/create-storefront",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Installable OpenCode command suite that scaffolds Thor Commerce json-render storefronts (Next.js, @thorprovider/blocks, @thorprovider/adapters, Medusa)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": "./bin/install.js",
|
|
@@ -18,7 +18,7 @@ Build distinctive, production-grade interfaces that avoid generic "AI slop" aest
|
|
|
18
18
|
## Quick Start
|
|
19
19
|
|
|
20
20
|
```bash
|
|
21
|
-
|
|
21
|
+
yarn dlx shadcn@latest init --template next --base base
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
`--base` selects the primitive library: `base` (Base UI, the default since July
|
|
@@ -31,14 +31,14 @@ base** — Base UI composes with `render={<Link href="/" />}` where Radix uses
|
|
|
31
31
|
For a custom design system, generate a preset code in `shadcn/create` and apply it:
|
|
32
32
|
|
|
33
33
|
```bash
|
|
34
|
-
|
|
34
|
+
yarn dlx shadcn@latest init --preset <CODE> --template next
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
### Before touching an existing project
|
|
38
38
|
|
|
39
39
|
```bash
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
yarn dlx shadcn@latest info --json # base, framework, aliases, installed components
|
|
41
|
+
yarn dlx shadcn@latest docs <component> # API reference resolved to THIS project's base
|
|
42
42
|
```
|
|
43
43
|
|
|
44
44
|
Run these instead of writing component code from memory. See
|
|
@@ -288,16 +288,16 @@ Details and the full class tables: [references/shadcn-platform.md](references/sh
|
|
|
288
288
|
- **Styling**: [references/styling.md](references/styling.md) - Themes, fonts, radius, animations, CSS variables
|
|
289
289
|
- **shadcn Platform**: [references/shadcn-platform.md](references/shadcn-platform.md) - Base UI vs Radix vs React Aria, CLI verbs, typeset, shimmer, scroll-fade, RTL, package imports
|
|
290
290
|
- **Sidebar**: [references/sidebar.md](references/sidebar.md) - shadcn sidebar with nested layouts, blocks, RTL
|
|
291
|
-
- **Project Setup**: [references/project-setup.md](references/project-setup.md) -
|
|
292
|
-
- **Official shadcn skill**: `
|
|
291
|
+
- **Project Setup**: [references/project-setup.md](references/project-setup.md) - project commands, presets
|
|
292
|
+
- **Official shadcn skill**: `yarn dlx skills add shadcn/ui` - live project config + CLI/registry reference. Install alongside this skill; it covers CLI mechanics, this one covers conventions.
|
|
293
293
|
- **shadcn/ui**: [llms.txt](https://ui.shadcn.com/llms.txt) - fallback when the CLI isn't available; prefer `shadcn docs <component>`
|
|
294
294
|
|
|
295
295
|
## Package Manager
|
|
296
296
|
|
|
297
|
-
**Always use
|
|
297
|
+
**Always use Yarn** in new projects, never npm or npx:
|
|
298
298
|
|
|
299
|
-
- `
|
|
300
|
-
- `
|
|
301
|
-
- `
|
|
299
|
+
- `yarn install` (not npm install)
|
|
300
|
+
- `yarn add <package>` (not npm install package)
|
|
301
|
+
- `yarn dlx` (not npx)
|
|
302
302
|
|
|
303
|
-
In an existing repo, respect the project's `packageManager` field and lockfile
|
|
303
|
+
In an existing repo, respect the project's `packageManager` field and lockfile rather than switching managers.
|
|
@@ -84,7 +84,7 @@ Report each check before proceeding.
|
|
|
84
84
|
|
|
85
85
|
### 4. Dependencies
|
|
86
86
|
```bash
|
|
87
|
-
|
|
87
|
+
yarn add @thorprovider/blocks @thorprovider/adapters @thorprovider/storefronts @json-render/core @json-render/react @json-render/next motion
|
|
88
88
|
```
|
|
89
89
|
|
|
90
90
|
### 5. Copy templates
|
|
@@ -104,7 +104,7 @@ MEDUSA_PUBLISHABLE_KEY=
|
|
|
104
104
|
If a brand color was given, follow `skills/shadcn-theming/SKILL.md` to update OKLCH light+dark pairs in `app/globals.css`.
|
|
105
105
|
|
|
106
106
|
### 8. Success
|
|
107
|
-
Report created files and next steps (`
|
|
107
|
+
Report created files and next steps (`yarn dev`, then `/sf-add-view`, `/sf-theme`).
|
|
108
108
|
|
|
109
109
|
## Error handling
|
|
110
110
|
- Invalid name → re-prompt.
|
|
@@ -30,7 +30,7 @@ Follow `skills/shadcn-theming/SKILL.md` for OKLCH pair rules and contrast.
|
|
|
30
30
|
3. **Pairs**: every changed color gets its foreground pair in both modes; verify the lightness rule.
|
|
31
31
|
4. **Typography**: load the font with `next/font` in `app/layout.tsx`; point `--font-sans` in `globals.css` at the new variable; keep body >= 1rem / line-height 1.5.
|
|
32
32
|
5. **Identity**: update the `metadata` object in `app/layout.tsx` (title, description) and add Open Graph + Twitter Card fields. Research the current Next.js Metadata API before writing.
|
|
33
|
-
6. **Verify**: run the dev server; confirm both color modes, font, and head metadata. `
|
|
33
|
+
6. **Verify**: run the dev server; confirm both color modes, font, and head metadata. `yarn typecheck` passes.
|
|
34
34
|
|
|
35
35
|
## Error handling
|
|
36
36
|
- Invalid color input → re-prompt (accept `<name>`, `#hex`, `oklch(...)`).
|
|
@@ -71,7 +71,7 @@ node recipes/validate.mjs resolve home hero showcase # -> StorefrontHero2
|
|
|
71
71
|
- Any chosen optional section → add its `elementType` element (from `sections.json`).
|
|
72
72
|
5. Register new element `type`s in `catalog.ts` (zod props) and `registry.tsx` (map to the blocks component).
|
|
73
73
|
6. Register the route+loader in `lib/<name>/spec/index.ts` and the loader in `runtime.ts` (data via `@thorprovider/storefronts/commerce`).
|
|
74
|
-
7. Verify: `
|
|
74
|
+
7. Verify: `yarn typecheck`; every new `type` present in catalog+registry; no non-blocks UI import; no direct HTTP.
|
|
75
75
|
|
|
76
76
|
## Modify workflow (`/sf-view`)
|
|
77
77
|
|
|
@@ -79,7 +79,7 @@ node recipes/validate.mjs resolve home hero showcase # -> StorefrontHero2
|
|
|
79
79
|
2. Read `lib/<name>/spec/<view>.ts` fully.
|
|
80
80
|
3. Apply ONLY the change. Preserve ids, `type`, untouched `props`, `$state`, `on` wiring, route/loader/catalog/registry.
|
|
81
81
|
4. If new blocks are needed, choose intents from `archetypes.json`, resolve to allowed variants, and validate before writing.
|
|
82
|
-
5. Re-run `
|
|
82
|
+
5. Re-run `yarn typecheck`.
|
|
83
83
|
|
|
84
84
|
## Generation headers
|
|
85
85
|
Every generated/edited file gets:
|