@wix/agent-skills 1.18.0 → 1.18.2
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/package.json +1 -1
- package/skills/wix-app/SKILL.md +4 -4
- package/skills/wix-app/references/APP_VALIDATION.md +7 -33
- package/skills/wix-app/references/DASHBOARD_PAGE.md +18 -14
- package/skills/wix-app/references/EDITOR_REACT_COMPONENT.md +75 -92
- package/skills/wix-app/references/WIX_PATTERNS_DOCS.md +23 -26
- package/skills/wix-app/references/dashboard-page/COLLECTION_TOOLKIT.md +7 -6
- package/skills/wix-app/references/dashboard-page/ENTITY_PAGE_TOOLKIT.md +71 -4
- package/skills/wix-app/references/dashboard-page/PATTERNS_BUNDLE_READING.md +67 -7
- package/skills/wix-app/references/editor-react-component/ACCESSIBILITY.md +1 -1
- package/skills/wix-app/references/editor-react-component/ANIMATED-COMPONENTS.md +9 -6
- package/skills/wix-app/references/editor-react-component/COMPONENT-CONTRACT.md +59 -89
- package/skills/wix-app/references/editor-react-component/COMPONENT-PREVIEW.md +23 -4
- package/skills/wix-app/references/editor-react-component/CSS-GUIDELINES.md +29 -14
- package/skills/wix-base44-connector/SKILL.md +168 -48
- package/skills/wix-base44-connector/scripts/{utils.js → utils.cjs} +69 -48
- package/skills/wix-docs/SKILL.md +109 -111
- package/skills/wix-docs/references/API_SPEC_SEARCH.md +35 -23
- package/skills/wix-docs/references/CALLING.md +91 -0
- package/skills/wix-docs/references/EXTRACTING.md +5 -3
- package/skills/wix-headless/references/DOC_DISCOVERY.md +9 -3
- package/skills/wix-headless/references/inline-recipes/setup-forms.md +57 -10
- package/skills/wix-manage/SKILL.md +106 -92
- package/skills/wix-manage/references/dashboard-navigation/routes.json +12 -52
- package/skills/wix-manage/references/ecommerce/shipping/ecom-shipping-api.md +0 -2
- package/skills/wix-manage/references/forms/create-form.md +272 -184
- package/skills/wix-manage/references/forms/forms-dashboard-navigation.md +13 -10
- package/skills/wix-manage/references/forms/update-form.md +122 -0
- package/skills/wix-manage/references/media/generate-image-with-ai.md +86 -0
- package/skills/wix-manage/references/seo/manage-content-plan.md +247 -0
- package/skills/wix-manage/references/seo/manage-seo-tags.md +59 -6
- package/skills/wix-manage/references/stores/change-store-currency.md +10 -0
- package/skills/wix-manage/references/stores/create-product-catalog-v3.md +16 -1
- package/skills/wix-manage/references/stores/update-product-with-options.md +9 -0
- package/skills/wix-vibe-headless/SKILL.md +17 -18
- package/skills/wix-vibe-headless/install/pin-agents-md.cjs +1 -1
- package/skills/wix-vibe-headless/platforms/base44-ecom-light-seed-with-install.md +118 -0
- package/skills/wix-vibe-headless/platforms/base44-ecom-light-seed.md +55 -62
- package/skills/wix-vibe-headless/platforms/base44-ecom-light.md +31 -29
- package/skills/wix-vibe-headless/platforms/base44.md +12 -5
- package/skills/wix-vibe-headless/platforms/generic.md +13 -12
- package/skills/wix-vibe-headless/references/blog/INSTRUCTIONS.md +4 -13
- package/skills/wix-vibe-headless/references/blog/seed/SEED.md +4 -8
- package/skills/wix-vibe-headless/references/blog/seed/{seed-blog.js → seed-blog.cjs} +2 -3
- package/skills/wix-vibe-headless/references/bookings/INSTRUCTIONS.md +5 -14
- package/skills/wix-vibe-headless/references/bookings/seed/SEED.md +5 -9
- package/skills/wix-vibe-headless/references/bookings/seed/{seed-bookings.js → seed-bookings.cjs} +2 -2
- package/skills/wix-vibe-headless/references/bookings/seed/{seed-rentals.js → seed-rentals.cjs} +3 -3
- package/skills/wix-vibe-headless/references/cms/INSTRUCTIONS.md +1 -1
- package/skills/wix-vibe-headless/references/cms/seed/SEED.md +2 -2
- package/skills/wix-vibe-headless/references/events/INSTRUCTIONS.md +4 -13
- package/skills/wix-vibe-headless/references/events/seed/SEED.md +3 -7
- package/skills/wix-vibe-headless/references/events/seed/{seed-events.js → seed-events.cjs} +2 -2
- package/skills/wix-vibe-headless/references/forms/INSTRUCTIONS.md +24 -7
- package/skills/wix-vibe-headless/references/forms/seed/SEED.md +91 -17
- package/skills/wix-vibe-headless/references/members/INSTRUCTIONS.md +4 -13
- package/skills/wix-vibe-headless/references/members/seed/SEED.md +2 -3
- package/skills/wix-vibe-headless/references/portfolio/INSTRUCTIONS.md +4 -13
- package/skills/wix-vibe-headless/references/portfolio/app/components/ProjectMedia.jsx +1 -1
- package/skills/wix-vibe-headless/references/portfolio/seed/SEED.md +3 -7
- package/skills/wix-vibe-headless/references/portfolio/seed/{seed-portfolio.js → seed-portfolio.cjs} +2 -2
- package/skills/wix-vibe-headless/references/pricing-plans/INSTRUCTIONS.md +5 -14
- package/skills/wix-vibe-headless/references/pricing-plans/app/components/OrderCard.jsx +1 -1
- package/skills/wix-vibe-headless/references/pricing-plans/seed/SEED.md +3 -7
- package/skills/wix-vibe-headless/references/pricing-plans/seed/{seed-pricing-plans.js → seed-pricing-plans.cjs} +2 -2
- package/skills/wix-vibe-headless/references/restaurants/INSTRUCTIONS.md +5 -15
- package/skills/wix-vibe-headless/references/restaurants/seed/SEED.md +3 -7
- package/skills/wix-vibe-headless/references/restaurants/seed/{seed-restaurants.js → seed-restaurants.cjs} +2 -2
- package/skills/wix-vibe-headless/references/storefront/INSTRUCTIONS.md +359 -327
- package/skills/wix-vibe-headless/references/storefront/app/context/CartContext.jsx +1 -0
- package/skills/wix-vibe-headless/references/storefront/app/hooks/useProductDetail.js +2 -2
- package/skills/wix-vibe-headless/references/storefront/app/hooks/useShop.js +63 -78
- package/skills/wix-vibe-headless/references/storefront/app/rest/wix-store-catalog.js +59 -43
- package/skills/wix-vibe-headless/references/storefront/seed/SEED.md +46 -10
- package/skills/wix-vibe-headless/references/storefront/seed/{seed-store.js → seed-store.cjs} +163 -25
- package/skills/wix-vibe-headless/references/storefront/app/pages/Shop.jsx +0 -75
package/package.json
CHANGED
package/skills/wix-app/SKILL.md
CHANGED
|
@@ -117,7 +117,7 @@ Patterns owns the page shell and everything collection-shaped. These concepts ar
|
|
|
117
117
|
| Filters, search, sorting, view presets/tabs | the collection's filter and view APIs |
|
|
118
118
|
| Row actions, bulk actions, drag-and-drop | the collection's feature APIs |
|
|
119
119
|
| Multiple pages inside one extension | `PatternsReactRouter`, `PatternsReactRoute`, `usePatternsNavigate` |
|
|
120
|
-
| **Add / edit / view one item from a collection** | `EntityPage` + `useEntityPage` (fetch + save + validation), reached with `usePatternsNavigate().navigateToEntityPage`. Form state via `useForm` / `useController` from `@wix/patterns/form
|
|
120
|
+
| **Add / edit / view one item from a collection** | `EntityPage` + `useEntityPage` (fetch + save + validation), reached with `usePatternsNavigate().navigateToEntityPage`. Form state via `useForm` / `useController` from `@wix/patterns/form` (`useController`, never `register`). **Not** a dashboard modal — see [Entity create and edit](#entity-create-and-edit) |
|
|
121
121
|
| Overlays tied to a collection (item picker, bulk-action confirm) | `PickerModal` / `usePickerModal`, `bulkActionModal` |
|
|
122
122
|
|
|
123
123
|
**Looking a component up is two direct file reads** — no script, never `node_modules` browsed by hand. Resolve the installed package root once per session ([Prerequisites](references/WIX_PATTERNS_DOCS.md#prerequisites)), then reuse it. Start with what exists:
|
|
@@ -163,7 +163,7 @@ This is the most common place the selection order gets dropped: the collection g
|
|
|
163
163
|
|
|
164
164
|
The documented flow:
|
|
165
165
|
|
|
166
|
-
1. From the collection page's action cell or primary action, call `navigateToEntityPage({ path, entity })` from `usePatternsNavigate()`. (The patterns docs give this exact use case — "navigate to an entity page on an action cell click on a collection page" — and it renders the entity header immediately, before the fetch resolves.)
|
|
166
|
+
1. From the collection page's action cell or primary action, call `navigateToEntityPage({ path, entity })` from `usePatternsNavigate()`. (The patterns docs give this exact use case — "navigate to an entity page on an action cell click on a collection page" — and it renders the entity header immediately, before the fetch resolves.) On the **create** route there is no record to pass: omit `entity` and see [ENTITY_PAGE_TOOLKIT.md § Create route](references/dashboard-page/ENTITY_PAGE_TOOLKIT.md#create-route), which is what the whole "add new" flow turns on.
|
|
167
167
|
2. Register the route with `PatternsReactRoute` inside `PatternsReactRouter`.
|
|
168
168
|
3. In the entity page, `useEntityPage({ fetch, onSave })` owns fetching, saving, validation, dirty state, loading skeletons, and error states. Form state comes from `useForm` / `useController` in `@wix/patterns/form`. The call itself — both generics, what `onSave` receives, which params exist — is in [ENTITY_PAGE_TOOLKIT.md](references/dashboard-page/ENTITY_PAGE_TOOLKIT.md).
|
|
169
169
|
4. Compose the body from `EntityPage.Header`, `EntityPage.MainContent`, `EntityPage.AdditionalContent`, and `EntityPage.Card`. **WDS goes inside those cards** — `FormField`, `Input`, `Text` for the individual fields.
|
|
@@ -443,7 +443,7 @@ Open every path returned in `newFiles` and replace stubbed handler bodies / UI /
|
|
|
443
443
|
After all implementation is complete, you MUST run validation. See [APP_VALIDATION.md](references/APP_VALIDATION.md) for the complete validation workflow:
|
|
444
444
|
|
|
445
445
|
1. Package installation (detect package manager, run install)
|
|
446
|
-
2. TypeScript compilation check (`npx tsc --noEmit
|
|
446
|
+
2. TypeScript compilation check (`npx tsc --noEmit -p .`)
|
|
447
447
|
3. Build validation (`npx wix build`)
|
|
448
448
|
4. Preview deployment (`npx wix preview`)
|
|
449
449
|
|
|
@@ -506,7 +506,7 @@ The following actions need to be done manually by you:
|
|
|
506
506
|
Execute these steps sequentially after all implementation is complete. See [APP_VALIDATION.md](references/APP_VALIDATION.md) for the complete guide.
|
|
507
507
|
|
|
508
508
|
1. **Package Installation** — Detect package manager, run install
|
|
509
|
-
2. **TypeScript Compilation** — `npx tsc --noEmit
|
|
509
|
+
2. **TypeScript Compilation** — `npx tsc --noEmit -p .`
|
|
510
510
|
3. **Build** — `npx wix build`
|
|
511
511
|
4. **Preview** — `npx wix preview`
|
|
512
512
|
|
|
@@ -46,41 +46,15 @@ pnpm install
|
|
|
46
46
|
|
|
47
47
|
Run TypeScript compiler to check for type errors.
|
|
48
48
|
|
|
49
|
-
**Full project check:**
|
|
50
49
|
```bash
|
|
51
|
-
npx tsc --noEmit
|
|
50
|
+
npx tsc --noEmit -p .
|
|
52
51
|
```
|
|
53
52
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
# Check specific directory
|
|
60
|
-
npx tsc --noEmit src/extensions/dashboard/pages/survey/**/*.ts src/extensions/dashboard/pages/survey/**/*.tsx
|
|
61
|
-
|
|
62
|
-
# Check dashboard pages only
|
|
63
|
-
npx tsc --noEmit src/extensions/dashboard/pages/**/*.ts src/extensions/dashboard/pages/**/*.tsx
|
|
64
|
-
|
|
65
|
-
# Check custom element widgets only
|
|
66
|
-
npx tsc --noEmit src/extensions/site/widgets/**/*.ts src/extensions/site/widgets/**/*.tsx
|
|
67
|
-
|
|
68
|
-
# Check dashboard modals only
|
|
69
|
-
npx tsc --noEmit src/extensions/dashboard/modals/**/*.ts src/extensions/dashboard/modals/**/*.tsx
|
|
70
|
-
|
|
71
|
-
# Check backend only
|
|
72
|
-
npx tsc --noEmit src/extensions/backend/**/*.ts
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
**When to use targeted checks:**
|
|
76
|
-
- After implementing a single extension (faster feedback)
|
|
77
|
-
- When debugging type errors in a specific area
|
|
78
|
-
- During iterative development
|
|
79
|
-
|
|
80
|
-
**When to use full project check:**
|
|
81
|
-
- Before final validation
|
|
82
|
-
- When changes affect shared types
|
|
83
|
-
- Before building/deploying
|
|
53
|
+
Run it from the app root, and check the whole project rather than just the files you
|
|
54
|
+
generated — a type error in generated code usually surfaces in the file that consumes
|
|
55
|
+
it. `-p .` is what holds that line: adding a file path to it is an error, whereas adding
|
|
56
|
+
one to a bare `npx tsc --noEmit` silently discards `tsconfig.json` (`strict`, `paths`,
|
|
57
|
+
`jsx`) and checks against compiler defaults instead.
|
|
84
58
|
|
|
85
59
|
**Success criteria:**
|
|
86
60
|
- Exit code 0
|
|
@@ -162,7 +136,7 @@ Read: .wix/debug.log (with offset to the end)
|
|
|
162
136
|
| Issue | Cause | Solution |
|
|
163
137
|
|-------|-------|----------|
|
|
164
138
|
| Package installation fails | Missing lock file, network issues, or corrupted node_modules | Delete `node_modules` and lock file, then reinstall |
|
|
165
|
-
| TypeScript compilation fails | Type mismatches, missing declarations, or incorrect types | Fix TypeScript errors shown in `npx tsc --noEmit
|
|
139
|
+
| TypeScript compilation fails | Type mismatches, missing declarations, or incorrect types | Fix TypeScript errors shown in `npx tsc --noEmit -p .` output |
|
|
166
140
|
| Build fails | TypeScript errors, missing dependencies, or internal CLI error | Fix TypeScript errors in source; for non-obvious failures, check `.wix/debug.log` |
|
|
167
141
|
| Preview fails to start | Port conflict, config issue, or internal CLI error | Check `wix.config.json`; if unclear, check `.wix/debug.log` for details |
|
|
168
142
|
| Console errors in preview | Runtime exceptions | Check browser console output |
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# Wix Dashboard Page Builder
|
|
2
2
|
|
|
3
|
-
Dashboard pages appear in the site owner's Wix dashboard, where
|
|
3
|
+
Dashboard pages appear in the site owner's Wix dashboard, where admins manage data and configure settings.
|
|
4
4
|
|
|
5
5
|
## Plan the Workflow Before the Components
|
|
6
6
|
|
|
7
|
-
A dashboard page is a workflow, not a screen. The site owner has to understand the situation, focus on what needs attention, investigate one record, act, and see the result confirmed — so translate the prompt into those needs before choosing any component
|
|
7
|
+
A dashboard page is a workflow, not a screen. The site owner has to understand the situation, focus on what needs attention, investigate one record, act, and see the result confirmed — so translate the prompt into those needs before choosing any component.
|
|
8
8
|
|
|
9
9
|
Do this first because a bare filtered table answers "what are all the records" and none of "how many", "which one needs my attention", or "why did this happen" — and a table is what you get by default if the workflow was never named. Read [UX Success Model](dashboard-page/UX_SUCCESS_MODEL.md) now, and run its evaluation checklist before calling the page done. Which component serves each need: [Collection Toolkit](dashboard-page/COLLECTION_TOOLKIT.md).
|
|
10
10
|
|
|
@@ -33,7 +33,9 @@ wix generate --params '{"extensionType":"DASHBOARD_PAGE","title":"<title>","rout
|
|
|
33
33
|
|
|
34
34
|
The CLI generates the folder, `page.tsx`, the builder file, the UUID, and the `src/extensions.ts` registration. After scaffolding, implement the page UI in the generated `page.tsx`.
|
|
35
35
|
|
|
36
|
-
**
|
|
36
|
+
**Never reuse `<route>` as a path prefix inside this page's `PatternsReactRouter`** — its location is already page-scoped, so a page scaffolded `route: "shifts"` still routes from `path="/"`, and `path="/shifts"` silently never matches. Page-relative paths: [Entity Page Toolkit](dashboard-page/ENTITY_PAGE_TOOLKIT.md).
|
|
37
|
+
|
|
38
|
+
**Then, before writing UI:** resolve the package root and `Read <pkgRoot>/dist/dts-bundle/index.json` once, per [Prerequisites](WIX_PATTERNS_DOCS.md#prerequisites). Each Bash call is a fresh shell — re-set the path variable in every call.
|
|
37
39
|
|
|
38
40
|
## Capabilities
|
|
39
41
|
|
|
@@ -41,7 +43,7 @@ A dashboard page runs as the **Wix user** — see [Identity and Elevation Requir
|
|
|
41
43
|
|
|
42
44
|
### Data Operations (Wix Data SDK)
|
|
43
45
|
|
|
44
|
-
See [Wix Data Reference](data-collection/WIX_DATA.md)
|
|
46
|
+
See [Wix Data Reference](data-collection/WIX_DATA.md).
|
|
45
47
|
|
|
46
48
|
- Read: `items.query('Collection').filter/sort.limit.find()` → `{ items, totalCount, hasNext }`
|
|
47
49
|
- Write: `items.insert | update | remove`. Ensure collection permissions allow the action
|
|
@@ -50,7 +52,7 @@ See [Wix Data Reference](data-collection/WIX_DATA.md) in the Data Collection ref
|
|
|
50
52
|
|
|
51
53
|
### Dashboard APIs
|
|
52
54
|
|
|
53
|
-
See [Dashboard API Reference](dashboard-page/DASHBOARD_API.md) for
|
|
55
|
+
See [Dashboard API Reference](dashboard-page/DASHBOARD_API.md) for all methods, page IDs, and examples.
|
|
54
56
|
|
|
55
57
|
**Key methods**, all on the `dashboard` object from `@wix/dashboard` (signatures, page IDs, and examples in the reference above):
|
|
56
58
|
|
|
@@ -62,13 +64,15 @@ See [Dashboard API Reference](dashboard-page/DASHBOARD_API.md) for complete docu
|
|
|
62
64
|
|
|
63
65
|
**CRITICAL: Using Modals in Dashboard Pages**
|
|
64
66
|
|
|
65
|
-
Dashboard Pages cannot use `<Modal />`. For a true dialog overlay you **MUST** use a dashboard modal extension — never a React modal
|
|
67
|
+
Dashboard Pages cannot use `<Modal />`. For a true dialog overlay you **MUST** use a dashboard modal extension — never a React modal or the WDS `Modal` component. Reserve it for dialogs that neither write nor display a listed record (delete/discard confirmations, unsaved-changes prompts, notices), plus any dialog on a page that lists nothing (settings, config). They open via `dashboard.openModal()` — see [Dashboard Modal reference](DASHBOARD_MODAL.md).
|
|
66
68
|
|
|
67
|
-
> **🛑 The test — does the dialog create, update, or display one record this page lists?** If yes, it is an `EntityPage`, not a modal — whether those records come from a CMS collection or an existing Wix app's SDK. **A create / "add new" form is included**: it writes the record, so it is an `EntityPage` even though nothing is being edited yet. "It's a simple data-entry dialog, not an entity edit" is the wrong reading
|
|
69
|
+
> **🛑 The test — does the dialog create, update, or display one record this page lists?** If yes, it is an `EntityPage`, not a modal — whether those records come from a CMS collection or an existing Wix app's SDK. **A create / "add new" form is included**: it writes the record, so it is an `EntityPage` even though nothing is being edited yet. "It's a simple data-entry dialog, not an entity edit" is the wrong reading — the most common way the patterns-first rule gets dropped after the table is already correct.
|
|
70
|
+
>
|
|
71
|
+
> The `EntityPage` comes from `@wix/patterns`, reached via `usePatternsNavigate().navigateToEntityPage`, with `useEntityPage` owning fetch/save/validation and `@wix/patterns/form` owning form state. Its route is registered with `PatternsReactRoute` inside `PatternsReactRouter` — so do not hand-roll page location state to fake a second view (`useState<PageLocation>` as a stand-in for a route); that is the router's job, and needing it is the signal you skipped one.
|
|
68
72
|
>
|
|
69
|
-
>
|
|
73
|
+
> That's not a rule against `withDashboard`: the router **requires** it above itself and a `location` prop, which the page gets from `dashboard.observeState` (a Wix CLI app passes no props to dashboard pages). Skip it and `PatternsReactRouter` throws at open, though typecheck, bundling, and `wix preview` all pass. Read `<pkgRoot>/dist/docs/withDashboard.md` (ships from 1.465.0; on older installs, `PatternsReactRouter.md`'s **Requirements**).
|
|
70
74
|
>
|
|
71
|
-
> **If this page lists nothing**
|
|
75
|
+
> **If this page lists nothing** (settings, config) the rule doesn't apply. But "I built the list without `@wix/patterns`" is not an exception: a page that lists records should be a `CollectionPage`.
|
|
72
76
|
>
|
|
73
77
|
> See [Entity create and edit](../SKILL.md#entity-create-and-edit) and [WIX_PATTERNS_DOCS.md](WIX_PATTERNS_DOCS.md); for the `useEntityPage` call itself, [Entity Page Toolkit](dashboard-page/ENTITY_PAGE_TOOLKIT.md).
|
|
74
78
|
|
|
@@ -76,7 +80,7 @@ Dashboard Pages cannot use `<Modal />`. For a true dialog overlay you **MUST** u
|
|
|
76
80
|
|
|
77
81
|
### Embedded Script Configuration API
|
|
78
82
|
|
|
79
|
-
When building a dashboard page to configure an embedded script, see [Dynamic Parameters Reference](dashboard-page/DYNAMIC_PARAMETERS.md)
|
|
83
|
+
When building a dashboard page to configure an embedded script, see [Dynamic Parameters Reference](dashboard-page/DYNAMIC_PARAMETERS.md).
|
|
80
84
|
|
|
81
85
|
**Key points:**
|
|
82
86
|
|
|
@@ -92,7 +96,7 @@ Each output below names the library that owns each part. Confirm every patterns
|
|
|
92
96
|
|
|
93
97
|
**Request:** "Create a dashboard page to manage blog posts"
|
|
94
98
|
|
|
95
|
-
**Output:** A `@wix/patterns` `CollectionPage`
|
|
99
|
+
**Output:** A `@wix/patterns` `CollectionPage` wrapping a `Table` driven by `useTableCollection`, with search, row actions, and empty state from the collection's own APIs. Add and edit navigate to an `EntityPage`. WDS only for leaf UI inside cells and entity-page cards; the provider sits in a parent component, in its own file.
|
|
96
100
|
|
|
97
101
|
### Settings Form
|
|
98
102
|
|
|
@@ -104,13 +108,13 @@ Each output below names the library that owns each part. Confirm every patterns
|
|
|
104
108
|
|
|
105
109
|
**Request:** "Create an admin panel for customer orders"
|
|
106
110
|
|
|
107
|
-
**Output:** A `@wix/patterns` `CollectionPage` + `Table`, with filters, sorting, and row actions from the collection APIs — **not** a hand-built WDS filter bar. Status badges are WDS leaf UI
|
|
111
|
+
**Output:** A `@wix/patterns` `CollectionPage` + `Table`, with filters, sorting, and row actions from the collection APIs — **not** a hand-built WDS filter bar. Status badges are WDS leaf UI in a cell. Viewing or editing an order opens an `EntityPage` via `navigateToEntityPage`, not a modal; a Dashboard Modal appears only for the delete confirmation.
|
|
108
112
|
|
|
109
113
|
### Embedded Script Configuration
|
|
110
114
|
|
|
111
115
|
**Request:** "Create a settings page for the coupon popup embedded script"
|
|
112
116
|
|
|
113
|
-
**Output:** A `@wix/patterns` `SettingsPage`
|
|
117
|
+
**Output:** A `@wix/patterns` `SettingsPage` with WDS form fields (popup headline, coupon code, minimum cart value, enable toggle). `embeddedScripts.getEmbeddedScript()` loads the parameters on mount, `embeddedScripts.embedScript()` saves them back — both sides string-converted, per [Dynamic Parameters](dashboard-page/DYNAMIC_PARAMETERS.md).
|
|
114
118
|
|
|
115
119
|
|
|
116
120
|
## API Spec Support
|
|
@@ -122,4 +126,4 @@ When an API specification is provided, you can call those endpoints — see [API
|
|
|
122
126
|
|
|
123
127
|
Content layout inside the page shell — the 6px base unit, the 12-column grid, spacing tokens, form/display/marketing/wizard layouts: see [WDS Layout Reference](dashboard-page/WDS_LAYOUT.md).
|
|
124
128
|
|
|
125
|
-
Remember the split: `@wix/patterns` owns the
|
|
129
|
+
Remember the split: `@wix/patterns` owns the shell and anything collection-shaped; that reference covers only content placed inside.
|
|
@@ -1,32 +1,26 @@
|
|
|
1
1
|
# Wix Editor React Component Builder
|
|
2
2
|
|
|
3
|
-
Build Editor React Components for Harmony
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
## Before You Start
|
|
7
|
-
|
|
8
|
-
Determine whether the request creates a component or edits an existing one.
|
|
9
|
-
Inspect the existing component before changing it.
|
|
3
|
+
Build Editor React Components for Harmony/Studio2 Wix CLI apps only. First
|
|
4
|
+
determine **create vs edit**; for edits, inspect the existing component and
|
|
5
|
+
never re-scaffold.
|
|
10
6
|
|
|
11
7
|
## File Contract
|
|
12
8
|
|
|
13
9
|
Use the Wix CLI scaffold as the source of truth. Do not replace it with a custom
|
|
14
|
-
layout or a hand-written manifest.
|
|
15
|
-
file responsibilities:
|
|
10
|
+
layout or a hand-written manifest. Preserve these file responsibilities:
|
|
16
11
|
|
|
17
12
|
| File | Ownership | Purpose |
|
|
18
13
|
| --- | --- | --- |
|
|
19
|
-
| `<component-name>.props.ts` | Edit |
|
|
20
|
-
| `<component-name>.tsx` | Edit |
|
|
21
|
-
| `<component-name>.module.css` | Edit |
|
|
22
|
-
| `component.tsx` | Keep generated | Wire
|
|
23
|
-
| `component.preview.tsx` | Edit narrowly |
|
|
24
|
-
| `<component-name>.generated.ts` | NEVER edit | Generated manifest
|
|
25
|
-
| `<component-name>.extension.ts` | Edit narrowly |
|
|
26
|
-
|
|
27
|
-
Supplementary files
|
|
28
|
-
|
|
29
|
-
their responsibilities intact.
|
|
14
|
+
| `<component-name>.props.ts` | Edit | Props type + `defaultProps` |
|
|
15
|
+
| `<component-name>.tsx` | Edit | Component UI and behavior |
|
|
16
|
+
| `<component-name>.module.css` | Edit | Scoped component styles |
|
|
17
|
+
| `component.tsx` | Keep generated | Wire component and `defaultProps` with `withDefaults` |
|
|
18
|
+
| `component.preview.tsx` | Edit narrowly | Sync preview adapter, one crucial data field, root class |
|
|
19
|
+
| `<component-name>.generated.ts` | NEVER edit | Generated manifest — do not edit |
|
|
20
|
+
| `<component-name>.extension.ts` | Edit narrowly | Supported partial manifest overrides |
|
|
21
|
+
|
|
22
|
+
Supplementary files (constants, hooks, sub-components) are allowed; keep scaffold
|
|
23
|
+
roles intact.
|
|
30
24
|
|
|
31
25
|
## Workflow
|
|
32
26
|
|
|
@@ -36,9 +30,8 @@ their responsibilities intact.
|
|
|
36
30
|
npx wix generate --params '{"extensionType":"EDITOR_REACT_COMPONENT","name":"ComponentName","folder":"component-name","description":"A brief description"}'
|
|
37
31
|
```
|
|
38
32
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
existing component.
|
|
33
|
+
Creates `src/extensions/site/components/<component-name>/` and registers the
|
|
34
|
+
extension in `src/extensions.ts`. Do not rerun for an existing component.
|
|
42
35
|
|
|
43
36
|
2. **Run the dependency preflight.** Verify that all component creation and
|
|
44
37
|
accessibility-review dependencies are installed:
|
|
@@ -47,25 +40,23 @@ their responsibilities intact.
|
|
|
47
40
|
node -e "const fs=require('fs'),path=require('path'),ps=['@wix/react-component-schema','@wix/react-component-utils','@wix/editor-react-types','@babel/parser','@babel/traverse','@babel/types','eslint','eslint-plugin-jsx-a11y','@typescript-eslint/parser','typescript','@types/eslint-plugin-jsx-a11y'];const missing=ps.filter(p=>!(require.resolve.paths(p)||[]).some(d=>fs.existsSync(path.join(d,p,'package.json'))));if(missing.length){console.error('Missing dependencies: '+missing.join(', '));process.exit(1)}" || { d="$PWD"; while [ "$d" != "/" ] && [ ! -f "$d/yarn.lock" ]; do d="${d%/*}"; done; if [ -f "$d/yarn.lock" ]; then yarn add @wix/react-component-schema @wix/react-component-utils @wix/editor-react-types && yarn add -D @babel/parser @babel/traverse @babel/types eslint eslint-plugin-jsx-a11y @typescript-eslint/parser 'typescript@<7' @types/eslint-plugin-jsx-a11y; else npm install @wix/react-component-schema @wix/react-component-utils @wix/editor-react-types && npm install --save-dev @babel/parser @babel/traverse @babel/types eslint eslint-plugin-jsx-a11y @typescript-eslint/parser 'typescript@<7' @types/eslint-plugin-jsx-a11y; fi; }
|
|
48
41
|
```
|
|
49
42
|
|
|
50
|
-
3. **Plan the contract and structure.** Identify
|
|
51
|
-
|
|
52
|
-
states each part supports. Read the relevant references from the routing
|
|
53
|
-
table below before writing code.
|
|
43
|
+
3. **Plan the contract and structure.** Identify props, semantic root, named
|
|
44
|
+
parts, and design states; read routed references below before writing code.
|
|
54
45
|
|
|
55
|
-
4. **Implement the editable sources.** Preserve the scaffold contract
|
|
56
|
-
|
|
57
|
-
|
|
46
|
+
4. **Implement the editable sources.** Preserve the scaffold contract: props in
|
|
47
|
+
the props file, logic in TSX, styles in the CSS Module. Do not edit
|
|
48
|
+
`*.generated.ts`.
|
|
58
49
|
|
|
59
50
|
5. **Run the accessibility review.** Follow
|
|
60
|
-
[`editor-react-component/ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md): run
|
|
61
|
-
|
|
62
|
-
|
|
51
|
+
[`editor-react-component/ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md): run scanners,
|
|
52
|
+
triage output, complete the manual checklist, fix issues, rerun on changed
|
|
53
|
+
JSX.
|
|
63
54
|
|
|
64
55
|
6. **Configure the editor extension when required.** For a new component or a
|
|
65
56
|
requested sizing, installation, or manifest change, apply
|
|
66
57
|
[`editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md`](editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md)
|
|
67
58
|
to `<component-name>.extension.ts`. Otherwise leave the file unchanged.
|
|
68
|
-
|
|
59
|
+
Synchronize `requiredDataFields` and `rootClassName` in
|
|
69
60
|
`component.preview.tsx`.
|
|
70
61
|
|
|
71
62
|
7. **Generate and validate.** Run:
|
|
@@ -75,82 +66,74 @@ their responsibilities intact.
|
|
|
75
66
|
npx tsc --noEmit
|
|
76
67
|
```
|
|
77
68
|
|
|
78
|
-
Run relevant
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
needs 1.1.215 or newer. If expected states are absent on an older CLI, report
|
|
82
|
-
the version constraint and let the user decide whether to upgrade. If the
|
|
83
|
-
build or manifest command exits with an error, diagnose it with
|
|
84
|
-
[`editor-react-component/MANIFEST-ERRORS.md`](editor-react-component/MANIFEST-ERRORS.md), apply the
|
|
85
|
-
matching fix, and rerun both commands.
|
|
69
|
+
Run relevant tests and lint when available. Inspect the regenerated manifest;
|
|
70
|
+
never repair it by hand. On failure, diagnose with
|
|
71
|
+
[`editor-react-component/MANIFEST-ERRORS.md`](editor-react-component/MANIFEST-ERRORS.md).
|
|
86
72
|
|
|
87
73
|
8. **Report the result.** Summarize edited files and checks. Call out any
|
|
88
|
-
unresolved
|
|
89
|
-
|
|
74
|
+
unresolved conflict, missing dependency, unsupported CLI version, or check
|
|
75
|
+
that could not run.
|
|
90
76
|
|
|
91
77
|
## Reference Policy
|
|
92
78
|
|
|
93
|
-
Read
|
|
94
|
-
|
|
95
|
-
|
|
79
|
+
- Read **only** matching required + triggered optional rows; optional triggers
|
|
80
|
+
become required when they match.
|
|
81
|
+
- References refine the active step; they do not restart workflow or expand scope.
|
|
82
|
+
- Never re-scaffold an existing component or edit `*.generated.ts`.
|
|
96
83
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
For an existing component, preserve out-of-scope public props, styling,
|
|
101
|
-
extension configuration, and supporting files. Never re-scaffold an existing
|
|
102
|
-
component or edit `*.generated.ts` as a reference-driven fix.
|
|
84
|
+
`SKILL.md` is the only reference router; reference files are self-contained
|
|
85
|
+
leaves. For existing components, preserve out-of-scope public props, styling,
|
|
86
|
+
extension configuration, and supporting files.
|
|
103
87
|
|
|
104
88
|
### Required References
|
|
105
89
|
|
|
106
90
|
| Scope | Required references |
|
|
107
91
|
| --- | --- |
|
|
108
|
-
| Creating a component | [`REACT-GUIDELINES.md`](editor-react-component/REACT-GUIDELINES.md), [`COMPONENT-CONTRACT.md`](editor-react-component/COMPONENT-CONTRACT.md), [`PARTS.md`](editor-react-component/PARTS.md), [`PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md), [`CSS-GUIDELINES.md`](editor-react-component/CSS-GUIDELINES.md), [`DIRECTIONALITY.md`](editor-react-component/DIRECTIONALITY.md), [`ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md), [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md),
|
|
109
|
-
| Editing React or JSX | [`REACT-GUIDELINES.md`](editor-react-component/REACT-GUIDELINES.md)
|
|
110
|
-
| Changing
|
|
111
|
-
| Changing public data props or
|
|
112
|
-
|
|
|
92
|
+
| Creating a component | [`REACT-GUIDELINES.md`](editor-react-component/REACT-GUIDELINES.md), [`COMPONENT-CONTRACT.md`](editor-react-component/COMPONENT-CONTRACT.md), [`PARTS.md`](editor-react-component/PARTS.md), [`PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md), [`CSS-GUIDELINES.md`](editor-react-component/CSS-GUIDELINES.md), [`DIRECTIONALITY.md`](editor-react-component/DIRECTIONALITY.md), [`ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md), [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md), [`EDITOR-EXTENSION-CONFIGURATION.md`](editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md) |
|
|
93
|
+
| Editing React or JSX | [`REACT-GUIDELINES.md`](editor-react-component/REACT-GUIDELINES.md), [`ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md) |
|
|
94
|
+
| Changing public contract, semantic root, or named parts | [`COMPONENT-CONTRACT.md`](editor-react-component/COMPONENT-CONTRACT.md), [`PARTS.md`](editor-react-component/PARTS.md), [`PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md) |
|
|
95
|
+
| Changing public data props or elected root global class | [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md) |
|
|
96
|
+
| Item array where only one body is visible | [`COMPONENT-CONTRACT.md`](editor-react-component/COMPONENT-CONTRACT.md), [`PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md), [`ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md), [`DESIGN-STATES.md`](editor-react-component/DESIGN-STATES.md) |
|
|
113
97
|
| Creating or changing CSS | [`CSS-GUIDELINES.md`](editor-react-component/CSS-GUIDELINES.md) |
|
|
114
|
-
|
|
|
115
|
-
|
|
|
98
|
+
| Root direction contract, direction-sensitive behavior, or `ReactNode` slot | [`DIRECTIONALITY.md`](editor-react-component/DIRECTIONALITY.md) |
|
|
99
|
+
| Sizing, installation, or manifest overrides | [`EDITOR-EXTENSION-CONFIGURATION.md`](editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md) |
|
|
116
100
|
|
|
117
101
|
### Optional References
|
|
118
102
|
|
|
119
103
|
| Trigger | Read |
|
|
120
104
|
| --- | --- |
|
|
121
|
-
|
|
|
122
|
-
| Public event callbacks
|
|
123
|
-
| Browser APIs, effects, or time-dependent output
|
|
124
|
-
|
|
|
105
|
+
| Interactive/selectable part or custom state | [`DESIGN-STATES.md`](editor-react-component/DESIGN-STATES.md) |
|
|
106
|
+
| Public event callbacks added or changed | [`FUNCTION-HANDLERS.md`](editor-react-component/FUNCTION-HANDLERS.md) |
|
|
107
|
+
| Browser APIs, effects, or time-dependent output | [`SSR.md`](editor-react-component/SSR.md) |
|
|
108
|
+
| Non-established CSS feature or DOM API, or user asks for one by name | [`BROWSER-SUPPORT.md`](editor-react-component/BROWSER-SUPPORT.md) |
|
|
125
109
|
| `npx wix build` or manifest generation exits with an error | [`MANIFEST-ERRORS.md`](editor-react-component/MANIFEST-ERRORS.md) |
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
|
|
|
129
|
-
| The prompt explicitly requests a branded, themed, or brand-aware component | [`BRANDED-COMPONENTS.md`](editor-react-component/BRANDED-COMPONENTS.md) |
|
|
110
|
+
| Animation, video, carousel, or other playable/looped/autoplaying content | [`ANIMATED-COMPONENTS.md`](editor-react-component/ANIMATED-COMPONENTS.md), [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md) |
|
|
111
|
+
| Site/runtime/editor context hooks needed | [`SITE-CONTEXT-HOOKS.md`](editor-react-component/SITE-CONTEXT-HOOKS.md) (+ [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md) when design-mode behavior differs) |
|
|
112
|
+
| Branded, themed, or brand-aware component requested | [`BRANDED-COMPONENTS.md`](editor-react-component/BRANDED-COMPONENTS.md) |
|
|
130
113
|
|
|
131
|
-
##
|
|
114
|
+
## Non-Negotiables
|
|
132
115
|
|
|
133
|
-
-
|
|
116
|
+
- React 18 only; do not assume React 19 runtime features.
|
|
134
117
|
- Include typed `id`, `className`, `direction`, and `a11y` support.
|
|
135
|
-
-
|
|
136
|
-
|
|
137
|
-
-
|
|
138
|
-
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
- Route ARIA through
|
|
142
|
-
-
|
|
143
|
-
|
|
144
|
-
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
wrap the preview adapter when present,
|
|
155
|
-
|
|
156
|
-
|
|
118
|
+
- Elected root: `dir={direction}`, fallback-direction class, logical CSS for
|
|
119
|
+
direction-sensitive layout.
|
|
120
|
+
- Deterministic render; no browser globals during render.
|
|
121
|
+
- Explicit foreground colors need a known contrasting background; transparent
|
|
122
|
+
roots inherit from the host.
|
|
123
|
+
- Baseline Widely Available CSS/DOM only, or supported fallbacks.
|
|
124
|
+
- Route ARIA through `a11y`; no one-off ARIA props.
|
|
125
|
+
- Named parts: global class, module class, and `elementProps` (root uses
|
|
126
|
+
top-level props).
|
|
127
|
+
- Native design states: pair selectors with injected modifiers; keep non-input
|
|
128
|
+
`:focus-visible` standalone unless editable focus is requested; toggle custom
|
|
129
|
+
state classes from data.
|
|
130
|
+
- Single-visible-body arrays: `name` per item, `ActiveItemIndex<'prop'>`, render
|
|
131
|
+
all bodies, hide inactive accessibly.
|
|
132
|
+
- Autoplay/loop: play/pause control, honor reduced motion, suppress autoplay in
|
|
133
|
+
editor design mode.
|
|
134
|
+
- `component.preview.tsx`: preserve this outer-to-inner composition, inline or
|
|
135
|
+
through component variables:
|
|
136
|
+
`withDefaults(withFallbackPlaceholder(PreviewOrComponent, options), defaultProps)`.
|
|
137
|
+
Keep `withDefaults` outermost, wrap the preview adapter when present, use one
|
|
138
|
+
crucial `requiredDataFields` entry, and match `rootClassName` to the root
|
|
139
|
+
global class.
|
|
@@ -33,7 +33,7 @@ try {
|
|
|
33
33
|
"
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
A bare `require.resolve` without the PnP-activation step throws in a Yarn Berry project even when
|
|
36
|
+
A bare `require.resolve` without the PnP-activation step throws in a Yarn Berry project even when installed — run the whole snippet, not a shortened version.
|
|
37
37
|
|
|
38
38
|
Then confirm the installed version actually ships the bundle index:
|
|
39
39
|
|
|
@@ -41,9 +41,9 @@ Then confirm the installed version actually ships the bundle index:
|
|
|
41
41
|
ls <pkgRoot>/dist/dts-bundle/index.json
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
**If it's missing, stop — do not look elsewhere for types or docs.** The installed `@wix/patterns` predates the index
|
|
44
|
+
**If it's missing, stop — do not look elsewhere for types or docs.** The installed `@wix/patterns` predates the index (ships from **1.458.0**); upgrade and re-run the check. Prefer **1.465.0**+ — the lookups below assume it (`OffsetQuery`, `useEntityPage`'s create route, `withDashboard.md`, a deprecation `status` in `dist/docs/index.json`, page-relative router paths). A missing *file* isn't the same as a name not being covered (see below).
|
|
45
45
|
|
|
46
|
-
**Never inspect `node_modules` by hand** — no `ls`,
|
|
46
|
+
**Never inspect `node_modules` by hand** — no `ls`, `find`, or `cat` of an arbitrary path, not even `dist/dts-bundle/` or `dist/docs/`. Every lookup below names the exact file to `Read` — go straight to it.
|
|
47
47
|
|
|
48
48
|
## Library Architecture
|
|
49
49
|
|
|
@@ -75,18 +75,17 @@ Common types only; `dist/dts-bundle/index.json` has the authoritative set. Creat
|
|
|
75
75
|
| Provider | When to Use |
|
|
76
76
|
| --- | --- |
|
|
77
77
|
| `WixPatternsProvider` | **Default — start here.** Auto-detects the environment (BM, Essentials, Giza). |
|
|
78
|
-
| `WixPatternsBMProvider` | Optional
|
|
79
|
-
| `WixPatternsGizaProvider` | Optional alternative for Yoshi BM Flow over Giza. |
|
|
78
|
+
| `WixPatternsBMProvider` / `WixPatternsGizaProvider` | Optional alternatives for Yoshi BM Flow (Business Manager / Giza). |
|
|
80
79
|
| `WixPatternsEssentialsProvider` | Yoshi Fullstack. |
|
|
81
80
|
| `WixPatternsBaseProvider` | App does **not** run under Giza/WixEssentials and you inject services (i18n, sentry) yourself. |
|
|
82
81
|
|
|
83
|
-
**Confirm the import path in the provider's own bundle** —
|
|
82
|
+
**Confirm the import path in the provider's own bundle** — not all share a subpath (`WixPatternsEssentialsProvider`, `WixPatternsBaseProvider` live under `@wix/patterns/essentials`).
|
|
84
83
|
|
|
85
84
|
### Keep Provider and Page Separate
|
|
86
85
|
|
|
87
|
-
The provider **must**
|
|
86
|
+
The provider **must** be a parent of the page content: hooks like `useTableCollection` need its context above them in the tree.
|
|
88
87
|
|
|
89
|
-
**Wrong:** calling `useTableCollection` in the
|
|
88
|
+
**Wrong:** calling `useTableCollection` in the component that renders `WixPatternsProvider` — the hook runs before the provider exists, so it throws at runtime even though the JSX looks right.
|
|
90
89
|
|
|
91
90
|
**Correct — provider in root, page in a separate file:**
|
|
92
91
|
```tsx
|
|
@@ -102,7 +101,7 @@ function App() {
|
|
|
102
101
|
}
|
|
103
102
|
|
|
104
103
|
// MyCollectionPage.tsx
|
|
105
|
-
import { Table, useTableCollection } from '@wix/patterns';
|
|
104
|
+
import { Table, useTableCollection, OffsetQuery } from '@wix/patterns';
|
|
106
105
|
import { CollectionPage } from '@wix/patterns/page';
|
|
107
106
|
|
|
108
107
|
function MyCollectionPage() {
|
|
@@ -111,7 +110,7 @@ function MyCollectionPage() {
|
|
|
111
110
|
queryName: 'my-items',
|
|
112
111
|
itemKey: (item) => item.id,
|
|
113
112
|
itemName: (item) => item.name,
|
|
114
|
-
fetchData: async () => ({ items: [], total: 0 }),
|
|
113
|
+
fetchData: async (query: OffsetQuery) => ({ items: [], total: 0 }),
|
|
115
114
|
filters: {},
|
|
116
115
|
});
|
|
117
116
|
return (
|
|
@@ -124,7 +123,7 @@ function MyCollectionPage() {
|
|
|
124
123
|
|
|
125
124
|
Keep the provider (and router, if any) in the app's root component and each page in its own file.
|
|
126
125
|
|
|
127
|
-
For **multiple pages**, use the `@wix/patterns` routing solution (`PatternsReactRouter`, `PatternsReactRoute`, `usePatternsNavigate`) rather than a separate router
|
|
126
|
+
For **multiple pages**, use the `@wix/patterns` routing solution (`PatternsReactRouter`, `PatternsReactRoute`, `usePatternsNavigate`) rather than a separate router. Read `PatternsReactRouter.md` and `withDashboard.md` for setup — the router reads page location from the dashboard context `withDashboard` renders, so it needs that wrapper above it with a `location` prop, and throws at render time without them. (it ships from **1.465.0**; no entry in `dist/docs/index.json` means an older install — use `PatternsReactRouter.md`'s **Requirements**.)
|
|
128
127
|
|
|
129
128
|
## How to Look Things Up
|
|
130
129
|
|
|
@@ -132,47 +131,45 @@ For **multiple pages**, use the `@wix/patterns` routing solution (`PatternsReact
|
|
|
132
131
|
|
|
133
132
|
### Finding the right name
|
|
134
133
|
|
|
135
|
-
`Read <pkgRoot>/dist/dts-bundle/index.json` — one entry per name, grouped implicitly by its `category` field. Lookup is **exact-match only
|
|
134
|
+
`Read <pkgRoot>/dist/dts-bundle/index.json` — one entry per name, grouped implicitly by its `category` field. Lookup is **exact-match only** — no fuzzy matching. If the exact key isn't there, scan the index you already hold for something close before concluding the name isn't covered.
|
|
136
135
|
|
|
137
|
-
Not every real
|
|
136
|
+
Not every real export is in this index — only names these guides reference. If a needed name genuinely isn't there, **stop and say so rather than falling back to `node_modules`.**
|
|
138
137
|
|
|
139
138
|
### Reading doc files
|
|
140
139
|
|
|
141
|
-
`Read <pkgRoot>/dist/docs/index.json` to resolve a name to its doc file — or a `symbols` alias, for
|
|
140
|
+
`Read <pkgRoot>/dist/docs/index.json` to resolve a name to its doc file — or a `symbols` alias, for cases where the Storybook title doesn't match the export (`ExportTo.md` documents `ExportButton`) — then `Read <pkgRoot>/dist/docs/<file>.md` directly, the whole file, not piped through `head`. It covers more names than the bundle index above — every documented component, not just the curated ones.
|
|
142
141
|
|
|
143
|
-
**Always check the import statement inside the doc** — not everything comes from `@wix/patterns` (some use subpaths
|
|
142
|
+
**Always check the import statement inside the doc** — not everything comes from `@wix/patterns` (some use subpaths, e.g. `@wix/patterns/provider`).
|
|
143
|
+
|
|
144
|
+
A doc whose index entry has a `bundle` field does **not** list its props — its `### Props` points at that bundle. One without it carries its own table. Either way the doc owns prose, variations, BI events, and the import line.
|
|
144
145
|
|
|
145
146
|
### Reading the file the index names
|
|
146
147
|
|
|
147
|
-
The mechanics of the file an index names —
|
|
148
|
+
The mechanics of the file an index names — batching the reads, types docs don't cover, one-line stubs that are answers rather than truncation, subpath entry points, cross-references, split compound docs — are in [Reading bundles and docs](dashboard-page/PATTERNS_BUNDLE_READING.md). Read it before your first `dist/dts-bundle/*.d.ts` of the session.
|
|
148
149
|
|
|
149
150
|
## The Collection → Entity Flow
|
|
150
151
|
|
|
151
|
-
A collection page and its item form are **two patterns pages**, not a page plus a modal.
|
|
152
|
+
A collection page and its item form are **two patterns pages**, not a page plus a modal. Reserve modals for dialogs that neither write nor display a listed record (a delete or discard confirmation, an unsaved-changes prompt); **a create / "add new" form is not one of them** — it writes the record, so it's an `EntityPage` regardless of size. A page that lists nothing is outside this rule — full test in [SKILL.md](../SKILL.md#entity-create-and-edit).
|
|
152
153
|
|
|
153
154
|
| Step | What owns it |
|
|
154
155
|
| --- | --- |
|
|
155
156
|
| Navigate from a row / primary action to the item | `usePatternsNavigate()` → `navigateToEntityPage({ path, entity })` |
|
|
156
157
|
| Register the route | `PatternsReactRoute` inside `PatternsReactRouter` |
|
|
157
158
|
| Fetch, save, validation, dirty state, skeletons, errors | `useEntityPage({ fetch, onSave })` |
|
|
158
|
-
| Form state and field binding | `useForm` / `useController` from `@wix/patterns/form` |
|
|
159
|
+
| Form state and field binding | `useForm` / `useController` from `@wix/patterns/form` — `useController`, never `register` |
|
|
159
160
|
| Body layout | `EntityPage.Header`, `.MainContent`, `.AdditionalContent`, `.Card` |
|
|
160
161
|
| The individual fields inside those cards | `@wix/design-system` (`FormField`, `Input`, `Text`) |
|
|
161
162
|
|
|
162
|
-
Prefer `navigateToEntityPage` over a plain route change
|
|
163
|
-
|
|
164
|
-
Read `EntityPage.md`, `useEntityPage.md`, and `usePatternsNavigate.md` before implementing — and note `useCreateCollection` is **not** about creating items; it returns a function that initializes collection state.
|
|
165
|
-
|
|
166
|
-
Three things about the `useEntityPage` call are worth getting right first time — both generics, what `onSave` receives, which params exist: [ENTITY_PAGE_TOOLKIT.md](dashboard-page/ENTITY_PAGE_TOOLKIT.md).
|
|
163
|
+
Prefer `navigateToEntityPage` over a plain route change — the entity header renders before the fetch resolves. **Every `path` above is page-relative**: the router roots at `path="/"` even on a page scaffolded `route: "shifts"`, so never repeat that name in a `path`, `parentPath`, or `navigateToEntityPage` call — it fails silently. See [ENTITY_PAGE_TOOLKIT.md](dashboard-page/ENTITY_PAGE_TOOLKIT.md).
|
|
167
164
|
|
|
168
|
-
|
|
165
|
+
Read `EntityPage.md`, `useEntityPage.md` and `usePatternsNavigate.md` before implementing, plus [ENTITY_PAGE_TOOLKIT.md](dashboard-page/ENTITY_PAGE_TOOLKIT.md) for the `useEntityPage` call itself (generics, `onSave`, params). Note `useCreateCollection` is **not** about creating items: it returns a function that initializes collection state.
|
|
169
166
|
|
|
170
167
|
## When Patterns Has No Equivalent
|
|
171
168
|
|
|
172
|
-
A concept is only "missing" from patterns after you've checked `dist/dts-bundle/index.json` and `dist/docs/index.json` **and** searched by keyword within what you've read. Then
|
|
169
|
+
A concept is only "missing" from patterns after you've checked `dist/dts-bundle/index.json` and `dist/docs/index.json` **and** searched by keyword within what you've read. Then:
|
|
173
170
|
|
|
174
171
|
1. Look the component up in `@wix/design-system` via the `wix-design-system` skill.
|
|
175
172
|
2. Render it *inside* the patterns page shell / collection, not as a replacement for it.
|
|
176
173
|
3. If WDS lacks it too, compose from WDS primitives (`Box`, `Card`, `Text`) — never restyle patterns internals, never add another UI library.
|
|
177
174
|
|
|
178
|
-
Anything page- or collection-shaped (
|
|
175
|
+
Anything page- or collection-shaped (shell, header, table, grid, filters, sorting, paging, row/bulk actions) is patterns' territory. Building one from WDS parts means a skipped lookup.
|