@wix/agent-skills 1.17.0 → 1.18.0
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 +115 -12
- package/skills/wix-app/references/APP_MARKET_REVIEW.md +1 -1
- package/skills/wix-app/references/BACKEND_API.md +18 -0
- package/skills/wix-app/references/CUSTOM_ELEMENT_WIDGET.md +6 -0
- package/skills/wix-app/references/DASHBOARD_MODAL.md +10 -2
- package/skills/wix-app/references/DASHBOARD_PAGE.md +32 -70
- package/skills/wix-app/references/EDITOR_REACT_COMPONENT.md +14 -3
- package/skills/wix-app/references/SITE_PLUGIN.md +12 -0
- package/skills/wix-app/references/WIX_PATTERNS_DOCS.md +74 -68
- package/skills/wix-app/references/dashboard-page/COLLECTION_TOOLKIT.md +79 -0
- package/skills/wix-app/references/dashboard-page/ENTITY_PAGE_TOOLKIT.md +73 -0
- package/skills/wix-app/references/dashboard-page/PATTERNS_BUNDLE_READING.md +52 -0
- package/skills/wix-app/references/dashboard-page/UX_SUCCESS_MODEL.md +184 -0
- package/skills/wix-app/references/editor-react-component/ANIMATED-COMPONENTS.md +12 -11
- package/skills/wix-app/references/editor-react-component/BRANDED-COMPONENTS.md +1 -0
- package/skills/wix-app/references/editor-react-component/BROWSER-SUPPORT.md +56 -0
- package/skills/wix-app/references/editor-react-component/COMPONENT-PREVIEW.md +16 -8
- package/skills/wix-app/references/editor-react-component/CSS-GUIDELINES.md +19 -1
- package/skills/wix-app/references/editor-react-component/DESIGN-STATES.md +3 -0
- package/skills/wix-base44-connector/SKILL.md +133 -44
- package/skills/wix-base44-connector/references/CAPABILITY_MAP.md +78 -0
- package/skills/wix-base44-connector/scripts/utils.js +216 -30
- package/skills/wix-headless/entry/skill.md +1 -1
- package/skills/wix-headless/references/CAPABILITIES.md +9 -1
- package/skills/wix-headless/references/DESIGN.md +1 -0
- package/skills/wix-headless/references/DISCOVERY.md +2 -1
- package/skills/wix-headless/references/IMAGE_GENERATION.md +1 -0
- package/skills/wix-headless/references/SDK_HANDOFF.md +4 -1
- package/skills/wix-headless/references/SEED.md +2 -1
- package/skills/wix-headless/references/SETUP.md +1 -0
- package/skills/wix-headless/references/inline-recipes/how-to-code-a-blog.md +2 -2
- package/skills/wix-headless/references/inline-recipes/how-to-code-a-store.md +26 -8
- package/skills/wix-headless/references/inline-recipes/how-to-code-forms.md +26 -10
- package/skills/wix-headless/references/inline-recipes/how-to-code-members-astro.md +8 -8
- package/skills/wix-headless/references/inline-recipes/how-to-code-members-custom-login.md +1 -1
- package/skills/wix-headless/references/inline-recipes/how-to-code-members-non-astro.md +1 -1
- package/skills/wix-headless/references/inline-recipes/how-to-code-rentals.md +254 -0
- package/skills/wix-headless/references/inline-recipes/setup-online-store.md +13 -0
- package/skills/wix-headless/references/inline-recipes/setup-rentals.md +254 -0
- package/skills/wix-headless/references/non-astro.md +1 -1
- package/skills/wix-headless-fast/SKILL.md +166 -0
- package/skills/wix-headless-fast/entry/skill.md +99 -0
- package/skills/wix-headless-fast/install/deploy.mjs +433 -0
- package/skills/wix-headless-fast/install/fast-path.mjs +141 -0
- package/skills/wix-headless-fast/references/blog/INSTRUCTIONS.md +137 -0
- package/skills/wix-headless-fast/references/blog/app/components/blog/BlogFeedView.tsx +137 -0
- package/skills/wix-headless-fast/references/blog/app/components/blog/PostView.tsx +113 -0
- package/skills/wix-headless-fast/references/blog/app/components/blog/RichContent.tsx +42 -0
- package/skills/wix-headless-fast/references/blog/app/hooks/blog/useBlogFeed.ts +123 -0
- package/skills/wix-headless-fast/references/blog/app/hooks/blog/usePost.ts +70 -0
- package/skills/wix-headless-fast/references/blog/app/wix/blog/posts.ts +99 -0
- package/skills/wix-headless-fast/references/blog/app/wix/blog/taxonomy.ts +76 -0
- package/skills/wix-headless-fast/references/blog/app/wix/blog/types.ts +62 -0
- package/skills/wix-headless-fast/references/blog/app-astro/layouts/SiteLayout.astro +40 -0
- package/skills/wix-headless-fast/references/blog/app-astro/pages/blog/[...slug].astro +99 -0
- package/skills/wix-headless-fast/references/blog/app-astro/pages/blog.astro +24 -0
- package/skills/wix-headless-fast/references/blog/lock/astro/package-lock.json +16156 -0
- package/skills/wix-headless-fast/references/blog/seed/SEED.md +72 -0
- package/skills/wix-headless-fast/references/blog/seed/seed-blog.mjs +287 -0
- package/skills/wix-headless-fast/references/bookings/INSTRUCTIONS.md +129 -0
- package/skills/wix-headless-fast/references/bookings/app/components/bookings/ServiceBookingView.tsx +143 -0
- package/skills/wix-headless-fast/references/bookings/app/components/bookings/ServicesView.tsx +119 -0
- package/skills/wix-headless-fast/references/bookings/app/hooks/bookings/useBookingFlow.ts +138 -0
- package/skills/wix-headless-fast/references/bookings/app/hooks/bookings/useServices.ts +54 -0
- package/skills/wix-headless-fast/references/bookings/app/wix/bookings/booking.ts +206 -0
- package/skills/wix-headless-fast/references/bookings/app/wix/bookings/services.ts +96 -0
- package/skills/wix-headless-fast/references/bookings/app/wix/bookings/types.ts +70 -0
- package/skills/wix-headless-fast/references/bookings/app-astro/layouts/SiteLayout.astro +40 -0
- package/skills/wix-headless-fast/references/bookings/app-astro/pages/services/[slug].astro +76 -0
- package/skills/wix-headless-fast/references/bookings/app-astro/pages/services.astro +22 -0
- package/skills/wix-headless-fast/references/bookings/lock/astro/package-lock.json +11962 -0
- package/skills/wix-headless-fast/references/bookings/seed/SEED.md +61 -0
- package/skills/wix-headless-fast/references/bookings/seed/seed-bookings.mjs +302 -0
- package/skills/wix-headless-fast/references/cms/INSTRUCTIONS.md +179 -0
- package/skills/wix-headless-fast/references/cms/app/hooks/cms/useCollection.ts +83 -0
- package/skills/wix-headless-fast/references/cms/app/hooks/cms/useItem.ts +57 -0
- package/skills/wix-headless-fast/references/cms/app/wix/cms/items.ts +151 -0
- package/skills/wix-headless-fast/references/cms/app/wix/cms/types.ts +75 -0
- package/skills/wix-headless-fast/references/cms/app-astro/layouts/SiteLayout.astro +41 -0
- package/skills/wix-headless-fast/references/cms/lock/astro/package-lock.json +11262 -0
- package/skills/wix-headless-fast/references/cms/seed/SEED.md +103 -0
- package/skills/wix-headless-fast/references/cms/seed/seed-cms.mjs +324 -0
- package/skills/wix-headless-fast/references/events/INSTRUCTIONS.md +149 -0
- package/skills/wix-headless-fast/references/events/app/components/events/EventConfirmationView.tsx +66 -0
- package/skills/wix-headless-fast/references/events/app/components/events/EventRegistrationView.tsx +176 -0
- package/skills/wix-headless-fast/references/events/app/components/events/EventsView.tsx +118 -0
- package/skills/wix-headless-fast/references/events/app/hooks/events/useEventRegistration.ts +117 -0
- package/skills/wix-headless-fast/references/events/app/hooks/events/useEvents.ts +59 -0
- package/skills/wix-headless-fast/references/events/app/wix/events/events.ts +136 -0
- package/skills/wix-headless-fast/references/events/app/wix/events/registration.ts +128 -0
- package/skills/wix-headless-fast/references/events/app/wix/events/types.ts +61 -0
- package/skills/wix-headless-fast/references/events/app-astro/layouts/SiteLayout.astro +40 -0
- package/skills/wix-headless-fast/references/events/app-astro/pages/event-confirmation.astro +12 -0
- package/skills/wix-headless-fast/references/events/app-astro/pages/events/[slug].astro +80 -0
- package/skills/wix-headless-fast/references/events/app-astro/pages/events.astro +21 -0
- package/skills/wix-headless-fast/references/events/lock/astro/package-lock.json +11884 -0
- package/skills/wix-headless-fast/references/events/seed/SEED.md +86 -0
- package/skills/wix-headless-fast/references/events/seed/seed-events.mjs +276 -0
- package/skills/wix-headless-fast/references/forms/INSTRUCTIONS.md +150 -0
- package/skills/wix-headless-fast/references/forms/app/hooks/forms/useWixForm.ts +317 -0
- package/skills/wix-headless-fast/references/forms/app/wix/forms/forms.ts +269 -0
- package/skills/wix-headless-fast/references/forms/app/wix/forms/submissions.ts +231 -0
- package/skills/wix-headless-fast/references/forms/app/wix/forms/types.ts +135 -0
- package/skills/wix-headless-fast/references/forms/lock/astro/package-lock.json +10593 -0
- package/skills/wix-headless-fast/references/forms/seed/SEED.md +108 -0
- package/skills/wix-headless-fast/references/forms/seed/seed-forms.mjs +320 -0
- package/skills/wix-headless-fast/references/members/INSTRUCTIONS.md +63 -0
- package/skills/wix-headless-fast/references/members/app/components/members/AccountView.tsx +60 -0
- package/skills/wix-headless-fast/references/members/app/components/members/LoginForm.tsx +155 -0
- package/skills/wix-headless-fast/references/members/app/components/members/MemberMenu.tsx +78 -0
- package/skills/wix-headless-fast/references/members/app/components/members/RequireAuth.tsx +47 -0
- package/skills/wix-headless-fast/references/members/app/hooks/members/useMember.ts +66 -0
- package/skills/wix-headless-fast/references/members/app/wix/members/auth.ts +88 -0
- package/skills/wix-headless-fast/references/members/app/wix/members/client.ts +53 -0
- package/skills/wix-headless-fast/references/members/app/wix/members/member-store.ts +122 -0
- package/skills/wix-headless-fast/references/members/app/wix/members/members.ts +50 -0
- package/skills/wix-headless-fast/references/members/app/wix/members/types.ts +21 -0
- package/skills/wix-headless-fast/references/members/app-astro/layouts/SiteLayout.astro +42 -0
- package/skills/wix-headless-fast/references/members/app-astro/pages/account.astro +10 -0
- package/skills/wix-headless-fast/references/members/app-astro/pages/login.astro +11 -0
- package/skills/wix-headless-fast/references/members/lock/astro/package-lock.json +10329 -0
- package/skills/wix-headless-fast/references/members/seed/SEED.md +39 -0
- package/skills/wix-headless-fast/references/members/seed/seed-members.mjs +94 -0
- package/skills/wix-headless-fast/references/portfolio/INSTRUCTIONS.md +134 -0
- package/skills/wix-headless-fast/references/portfolio/app/components/portfolio/CollectionProjectsView.tsx +110 -0
- package/skills/wix-headless-fast/references/portfolio/app/components/portfolio/CollectionsView.tsx +90 -0
- package/skills/wix-headless-fast/references/portfolio/app/components/portfolio/ProjectDetailView.tsx +115 -0
- package/skills/wix-headless-fast/references/portfolio/app/hooks/portfolio/useCollectionProjects.ts +59 -0
- package/skills/wix-headless-fast/references/portfolio/app/hooks/portfolio/useCollections.ts +39 -0
- package/skills/wix-headless-fast/references/portfolio/app/hooks/portfolio/useProjectDetail.ts +58 -0
- package/skills/wix-headless-fast/references/portfolio/app/wix/portfolio/portfolio.ts +165 -0
- package/skills/wix-headless-fast/references/portfolio/app/wix/portfolio/types.ts +55 -0
- package/skills/wix-headless-fast/references/portfolio/app-astro/layouts/SiteLayout.astro +40 -0
- package/skills/wix-headless-fast/references/portfolio/app-astro/pages/portfolio/[slug].astro +30 -0
- package/skills/wix-headless-fast/references/portfolio/app-astro/pages/portfolio.astro +21 -0
- package/skills/wix-headless-fast/references/portfolio/app-astro/pages/projects/[slug].astro +29 -0
- package/skills/wix-headless-fast/references/portfolio/lock/astro/package-lock.json +10197 -0
- package/skills/wix-headless-fast/references/portfolio/seed/SEED.md +78 -0
- package/skills/wix-headless-fast/references/portfolio/seed/seed-portfolio.mjs +258 -0
- package/skills/wix-headless-fast/references/pricing-plans/INSTRUCTIONS.md +133 -0
- package/skills/wix-headless-fast/references/pricing-plans/app/components/pricing-plans/PlanDetailView.tsx +58 -0
- package/skills/wix-headless-fast/references/pricing-plans/app/components/pricing-plans/PlansView.tsx +126 -0
- package/skills/wix-headless-fast/references/pricing-plans/app/hooks/pricing-plans/usePlanPurchase.ts +37 -0
- package/skills/wix-headless-fast/references/pricing-plans/app/hooks/pricing-plans/usePlans.ts +39 -0
- package/skills/wix-headless-fast/references/pricing-plans/app/wix/pricing-plans/plans.ts +75 -0
- package/skills/wix-headless-fast/references/pricing-plans/app/wix/pricing-plans/purchase.ts +45 -0
- package/skills/wix-headless-fast/references/pricing-plans/app/wix/pricing-plans/types.ts +30 -0
- package/skills/wix-headless-fast/references/pricing-plans/app-astro/layouts/SiteLayout.astro +41 -0
- package/skills/wix-headless-fast/references/pricing-plans/app-astro/pages/plans/[slug].astro +40 -0
- package/skills/wix-headless-fast/references/pricing-plans/app-astro/pages/plans.astro +21 -0
- package/skills/wix-headless-fast/references/pricing-plans/lock/astro/package-lock.json +11226 -0
- package/skills/wix-headless-fast/references/pricing-plans/seed/SEED.md +71 -0
- package/skills/wix-headless-fast/references/pricing-plans/seed/seed-pricing-plans.mjs +279 -0
- package/skills/wix-headless-fast/references/restaurants/INSTRUCTIONS.md +165 -0
- package/skills/wix-headless-fast/references/restaurants/app/components/restaurants/MenuView.tsx +142 -0
- package/skills/wix-headless-fast/references/restaurants/app/components/restaurants/OrderCartButton.tsx +26 -0
- package/skills/wix-headless-fast/references/restaurants/app/components/restaurants/OrderCartDrawer.tsx +121 -0
- package/skills/wix-headless-fast/references/restaurants/app/components/restaurants/ReservationView.tsx +155 -0
- package/skills/wix-headless-fast/references/restaurants/app/hooks/restaurants/useMenus.ts +55 -0
- package/skills/wix-headless-fast/references/restaurants/app/hooks/restaurants/useOrderCart.ts +43 -0
- package/skills/wix-headless-fast/references/restaurants/app/hooks/restaurants/useReservation.ts +177 -0
- package/skills/wix-headless-fast/references/restaurants/app/wix/restaurants/menu.ts +165 -0
- package/skills/wix-headless-fast/references/restaurants/app/wix/restaurants/order-store.ts +103 -0
- package/skills/wix-headless-fast/references/restaurants/app/wix/restaurants/ordering.ts +254 -0
- package/skills/wix-headless-fast/references/restaurants/app/wix/restaurants/reservations.ts +146 -0
- package/skills/wix-headless-fast/references/restaurants/app/wix/restaurants/types.ts +168 -0
- package/skills/wix-headless-fast/references/restaurants/app-astro/layouts/SiteLayout.astro +47 -0
- package/skills/wix-headless-fast/references/restaurants/app-astro/pages/menu.astro +22 -0
- package/skills/wix-headless-fast/references/restaurants/app-astro/pages/reservations.astro +12 -0
- package/skills/wix-headless-fast/references/restaurants/lock/astro/package-lock.json +12560 -0
- package/skills/wix-headless-fast/references/restaurants/seed/SEED.md +81 -0
- package/skills/wix-headless-fast/references/restaurants/seed/seed-restaurants.mjs +479 -0
- package/skills/wix-headless-fast/references/shared/CONTENT.md +22 -0
- package/skills/wix-headless-fast/references/shared/CUSTOM_OPERATIONS.md +73 -0
- package/skills/wix-headless-fast/references/shared/DESIGN.md +26 -0
- package/skills/wix-headless-fast/references/shared/app/styles/global.css +52 -0
- package/skills/wix-headless-fast/references/shared/app/wix/config.ts +15 -0
- package/skills/wix-headless-fast/references/shared/app/wix/media.ts +27 -0
- package/skills/wix-headless-fast/references/shared/app/wix/money.ts +24 -0
- package/skills/wix-headless-fast/references/shared/app/wix/sdk.ts +76 -0
- package/skills/wix-headless-fast/references/shared/capabilities/media-upload/app/wix/media-upload/client.ts +46 -0
- package/skills/wix-headless-fast/references/shared/capabilities/media-upload/app-astro/pages/api/wix/media-upload.ts +46 -0
- package/skills/wix-headless-fast/references/shared/seed/images.mjs +145 -0
- package/skills/wix-headless-fast/references/storefront/INSTRUCTIONS.md +149 -0
- package/skills/wix-headless-fast/references/storefront/app/components/storefront/CartButton.tsx +26 -0
- package/skills/wix-headless-fast/references/storefront/app/components/storefront/CartDrawer.tsx +121 -0
- package/skills/wix-headless-fast/references/storefront/app/components/storefront/ProductCard.tsx +100 -0
- package/skills/wix-headless-fast/references/storefront/app/components/storefront/ProductDetailView.tsx +130 -0
- package/skills/wix-headless-fast/references/storefront/app/components/storefront/ProductGrid.tsx +48 -0
- package/skills/wix-headless-fast/references/storefront/app/components/storefront/ShopView.tsx +66 -0
- package/skills/wix-headless-fast/references/storefront/app/components/storefront/VariantPicker.tsx +103 -0
- package/skills/wix-headless-fast/references/storefront/app/hooks/storefront/useCart.ts +48 -0
- package/skills/wix-headless-fast/references/storefront/app/hooks/storefront/useProductDetail.ts +140 -0
- package/skills/wix-headless-fast/references/storefront/app/hooks/storefront/useShop.ts +80 -0
- package/skills/wix-headless-fast/references/storefront/app/wix/storefront/cart-store.ts +101 -0
- package/skills/wix-headless-fast/references/storefront/app/wix/storefront/cart.ts +221 -0
- package/skills/wix-headless-fast/references/storefront/app/wix/storefront/catalog.ts +215 -0
- package/skills/wix-headless-fast/references/storefront/app/wix/storefront/types.ts +109 -0
- package/skills/wix-headless-fast/references/storefront/app-astro/layouts/SiteLayout.astro +46 -0
- package/skills/wix-headless-fast/references/storefront/app-astro/pages/products/[slug].astro +56 -0
- package/skills/wix-headless-fast/references/storefront/app-astro/pages/shop.astro +23 -0
- package/skills/wix-headless-fast/references/storefront/lock/astro/package-lock.json +12247 -0
- package/skills/wix-headless-fast/references/storefront/seed/SEED.md +85 -0
- package/skills/wix-headless-fast/references/storefront/seed/seed-store.mjs +415 -0
- package/skills/wix-manage/SKILL.md +18 -2
- package/skills/wix-manage/references/google-ads/manage-campaign-success-guide.md +141 -0
- package/skills/wix-manage/references/google-business-profile/connect-google-business-profile.md +134 -0
- package/skills/wix-manage/references/google-business-profile/manage-google-business-profile-locations.md +182 -0
- package/skills/wix-manage/references/marketing/create-and-publish-social-post.md +3 -0
- package/skills/wix-manage/references/stores/create-product-catalog-v3.md +21 -6
- package/skills/wix-manage/references/stores/update-product-with-options.md +83 -0
- package/skills/wix-vibe-headless/SKILL.md +18 -4
- package/skills/wix-vibe-headless/install/deploy.cjs +12 -4
- package/skills/wix-vibe-headless/install/pin-agents-md.cjs +2 -1
- package/skills/wix-vibe-headless/platforms/base44-ecom-light-seed.md +3 -1
- package/skills/wix-vibe-headless/platforms/base44-ecom-light.md +3 -1
- package/skills/wix-vibe-headless/platforms/base44.md +23 -61
- package/skills/wix-vibe-headless/platforms/generic.md +6 -3
- package/skills/wix-vibe-headless/references/bookings/INSTRUCTIONS.md +43 -0
- package/skills/wix-vibe-headless/references/bookings/app/components/RentalDurationPicker.jsx +67 -0
- package/skills/wix-vibe-headless/references/bookings/app/hooks/useRentalDuration.js +128 -0
- package/skills/wix-vibe-headless/references/bookings/app/hooks/useServiceDetail.js +5 -3
- package/skills/wix-vibe-headless/references/bookings/app/rest/wix-bookings-rentals.js +250 -0
- package/skills/wix-vibe-headless/references/bookings/app/rest/wix-bookings-services.js +12 -5
- package/skills/wix-vibe-headless/references/bookings/seed/SEED.md +41 -0
- package/skills/wix-vibe-headless/references/bookings/seed/seed-rentals.js +267 -0
- package/skills/wix-vibe-headless/references/cms/INSTRUCTIONS.md +6 -3
- package/skills/wix-vibe-headless/references/forms/INSTRUCTIONS.md +470 -0
- package/skills/wix-vibe-headless/references/forms/app/hooks/useWixForm.js +425 -0
- package/skills/wix-vibe-headless/references/forms/app/lib/wix-form-schema-utils.js +187 -0
- package/skills/wix-vibe-headless/references/forms/app/rest/wix-forms-submissions.js +238 -0
- package/skills/wix-vibe-headless/references/forms/app/rest/wix-forms.js +108 -0
- package/skills/wix-vibe-headless/references/forms/seed/SEED.md +1762 -0
- package/skills/wix-vibe-headless/references/rentals/INSTRUCTIONS.md +13 -0
- package/skills/wix-vibe-headless/references/storefront/INSTRUCTIONS.md +137 -84
- package/skills/wix-vibe-headless/references/storefront/app/hooks/useProductDetail.js +15 -8
- package/skills/wix-vibe-headless/references/storefront/app/lib/storeImage.js +37 -0
- package/skills/wix-vibe-headless/references/storefront/app/rest/wix-store-catalog.js +18 -6
- package/skills/wix-vibe-headless/references/storefront/seed/SEED.md +30 -7
- package/skills/wix-vibe-headless/references/storefront/seed/seed-store.js +46 -10
- package/skills/wix-vibe-headless/references/storefront/app/components/ProductCard.jsx +0 -110
- package/skills/wix-vibe-headless/references/storefront/app/components/ProductGallery.jsx +0 -51
- package/skills/wix-vibe-headless/references/storefront/app/components/ProductGrid.jsx +0 -49
- package/skills/wix-vibe-headless/references/storefront/app/components/VariantPicker.jsx +0 -92
- package/skills/wix-vibe-headless/references/storefront/app/pages/ProductDetail.jsx +0 -139
|
@@ -2,18 +2,49 @@
|
|
|
2
2
|
|
|
3
3
|
## Prerequisites
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Lookups here are direct file reads — no script. Resolve the installed package root once per session and reuse it:
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
|
|
8
|
+
node -e "
|
|
9
|
+
const fs = require('fs'), path = require('path');
|
|
10
|
+
function tryEnablePnp() {
|
|
11
|
+
let dir = process.cwd();
|
|
12
|
+
for (;;) {
|
|
13
|
+
const pnp = path.join(dir, '.pnp.cjs');
|
|
14
|
+
if (fs.existsSync(pnp)) { try { require(pnp).setup(); } catch {} return; }
|
|
15
|
+
const parent = path.dirname(dir);
|
|
16
|
+
if (parent === dir) return;
|
|
17
|
+
dir = parent;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
tryEnablePnp();
|
|
21
|
+
try {
|
|
22
|
+
console.log(path.dirname(require.resolve('@wix/patterns/package.json', { paths: [process.cwd()] })));
|
|
23
|
+
} catch {
|
|
24
|
+
let dir = process.cwd();
|
|
25
|
+
for (;;) {
|
|
26
|
+
const candidate = path.join(dir, 'node_modules', '@wix', 'patterns');
|
|
27
|
+
if (fs.existsSync(path.join(candidate, 'package.json'))) { console.log(candidate); process.exit(0); }
|
|
28
|
+
const parent = path.dirname(dir);
|
|
29
|
+
if (parent === dir) { console.error('@wix/patterns not found'); process.exit(1); }
|
|
30
|
+
dir = parent;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
"
|
|
9
34
|
```
|
|
10
35
|
|
|
11
|
-
|
|
36
|
+
A bare `require.resolve` without the PnP-activation step throws in a Yarn Berry project even when the package is installed — run the whole snippet, not a shortened version.
|
|
37
|
+
|
|
38
|
+
Then confirm the installed version actually ships the bundle index:
|
|
12
39
|
|
|
13
40
|
```bash
|
|
14
|
-
|
|
41
|
+
ls <pkgRoot>/dist/dts-bundle/index.json
|
|
15
42
|
```
|
|
16
43
|
|
|
44
|
+
**If it's missing, stop — do not look elsewhere for types or docs.** The installed `@wix/patterns` predates the index; it ships from **1.458.0** onward, so upgrade to at least that and re-run the check. A missing *file* is not the same as a name not being covered (see below): the mechanism itself isn't available yet.
|
|
45
|
+
|
|
46
|
+
**Never inspect `node_modules` by hand** — no `ls`, no `find`, no `cat` of an arbitrary path, and that includes the sanctioned directories: never browse `dist/dts-bundle/` or `dist/docs/` looking around. Every lookup below names the exact file to `Read` — go straight to it.
|
|
47
|
+
|
|
17
48
|
## Library Architecture
|
|
18
49
|
|
|
19
50
|
### Composition Hierarchy
|
|
@@ -29,55 +60,33 @@ Provider <- WixPatternsProvider or WixPatternsBMProvider
|
|
|
29
60
|
|
|
30
61
|
Each collection type follows the same Component + State + Hook pattern:
|
|
31
62
|
|
|
32
|
-
|
|
|
33
|
-
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
40
|
-
This table covers the common collection types — the full, authoritative list is in `node_modules/@wix/patterns/dist/docs/index.json`.
|
|
63
|
+
| Component | State Type | Hook |
|
|
64
|
+
| --- | --- | --- |
|
|
65
|
+
| `Table` | `TableState` | `useTableCollection()` |
|
|
66
|
+
| `Grid` | `GridState` | `useGridCollection()` |
|
|
67
|
+
| `TableGridSwitch` | `TableGridSwitchState` | `useTableGridSwitchCollection()` |
|
|
68
|
+
| `TableFolders` | `TableFoldersState` | `useTableFolders()` |
|
|
69
|
+
| `GridFolders` | `GridFoldersState` | `useGridFolders()` |
|
|
41
70
|
|
|
42
|
-
Create state with the hook -> pass it to the component's `state` prop -> wrap in a page component.
|
|
71
|
+
Common types only; `dist/dts-bundle/index.json` has the authoritative set. Create state with the hook -> pass it to the component's `state` prop -> wrap in a page component.
|
|
43
72
|
|
|
44
73
|
### Choosing the Right Provider
|
|
45
74
|
|
|
46
|
-
| Provider
|
|
47
|
-
|
|
48
|
-
| `WixPatternsProvider`
|
|
49
|
-
| `WixPatternsBMProvider`
|
|
50
|
-
| `WixPatternsGizaProvider`
|
|
51
|
-
| `WixPatternsEssentialsProvider` | Yoshi Fullstack.
|
|
52
|
-
| `WixPatternsBaseProvider`
|
|
53
|
-
|
|
54
|
-
Prefer `WixPatternsProvider` unless the project is on one of the specific Yoshi flows above — it is the documented recommendation for most apps, and it resolves the environment for you rather than making you pick.
|
|
75
|
+
| Provider | When to Use |
|
|
76
|
+
| --- | --- |
|
|
77
|
+
| `WixPatternsProvider` | **Default — start here.** Auto-detects the environment (BM, Essentials, Giza). |
|
|
78
|
+
| `WixPatternsBMProvider` | Optional alternative for Yoshi BM Flow over Business Manager. |
|
|
79
|
+
| `WixPatternsGizaProvider` | Optional alternative for Yoshi BM Flow over Giza. |
|
|
80
|
+
| `WixPatternsEssentialsProvider` | Yoshi Fullstack. |
|
|
81
|
+
| `WixPatternsBaseProvider` | App does **not** run under Giza/WixEssentials and you inject services (i18n, sentry) yourself. |
|
|
55
82
|
|
|
56
|
-
**Confirm the import path in the provider's own
|
|
83
|
+
**Confirm the import path in the provider's own bundle** — they don't all share a subpath (`WixPatternsEssentialsProvider` and `WixPatternsBaseProvider` are under `@wix/patterns/essentials`). The project's `package.json` identifies the flow.
|
|
57
84
|
|
|
58
85
|
### Keep Provider and Page Separate
|
|
59
86
|
|
|
60
|
-
The provider **must**
|
|
87
|
+
The provider **must** live in a parent component of the page content: hooks like `useTableCollection` need its context to already exist above them in the React tree.
|
|
61
88
|
|
|
62
|
-
**Wrong
|
|
63
|
-
```tsx
|
|
64
|
-
function BadApp() {
|
|
65
|
-
const state = useTableCollection({
|
|
66
|
-
queryName: 'my-items',
|
|
67
|
-
itemKey: (item) => item.id,
|
|
68
|
-
itemName: (item) => item.name,
|
|
69
|
-
fetchData: async () => ({ items: [], total: 0 }),
|
|
70
|
-
filters: {},
|
|
71
|
-
}); // fails at runtime — no provider context above this component
|
|
72
|
-
return (
|
|
73
|
-
<WixPatternsProvider>
|
|
74
|
-
<CollectionPage>
|
|
75
|
-
<Table state={state} columns={[{ title: 'Name', render: (item) => item.name }]} />
|
|
76
|
-
</CollectionPage>
|
|
77
|
-
</WixPatternsProvider>
|
|
78
|
-
);
|
|
79
|
-
}
|
|
80
|
-
```
|
|
89
|
+
**Wrong:** calling `useTableCollection` in the same component that renders `WixPatternsProvider`. The hook runs before the provider exists above it, so it throws at runtime — and the JSX nesting looks right, which is what makes this hard to spot.
|
|
81
90
|
|
|
82
91
|
**Correct — provider in root, page in a separate file:**
|
|
83
92
|
```tsx
|
|
@@ -97,13 +106,14 @@ import { Table, useTableCollection } from '@wix/patterns';
|
|
|
97
106
|
import { CollectionPage } from '@wix/patterns/page';
|
|
98
107
|
|
|
99
108
|
function MyCollectionPage() {
|
|
109
|
+
// works — the provider context exists above this component
|
|
100
110
|
const state = useTableCollection({
|
|
101
111
|
queryName: 'my-items',
|
|
102
112
|
itemKey: (item) => item.id,
|
|
103
113
|
itemName: (item) => item.name,
|
|
104
114
|
fetchData: async () => ({ items: [], total: 0 }),
|
|
105
115
|
filters: {},
|
|
106
|
-
});
|
|
116
|
+
});
|
|
107
117
|
return (
|
|
108
118
|
<CollectionPage>
|
|
109
119
|
<Table state={state} columns={[{ title: 'Name', render: (item) => item.name }]} />
|
|
@@ -112,33 +122,33 @@ function MyCollectionPage() {
|
|
|
112
122
|
}
|
|
113
123
|
```
|
|
114
124
|
|
|
115
|
-
|
|
125
|
+
Keep the provider (and router, if any) in the app's root component and each page in its own file.
|
|
116
126
|
|
|
117
|
-
|
|
127
|
+
For **multiple pages**, use the `@wix/patterns` routing solution (`PatternsReactRouter`, `PatternsReactRoute`, `usePatternsNavigate`) rather than a separate router; look the doc files up for setup.
|
|
118
128
|
|
|
119
129
|
## How to Look Things Up
|
|
120
130
|
|
|
121
131
|
**Don't guess which components or props exist — read the doc files first.**
|
|
122
132
|
|
|
123
|
-
### Finding the right
|
|
133
|
+
### Finding the right name
|
|
134
|
+
|
|
135
|
+
`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, no typo suggestions. If the exact key isn't there, scan the index you already hold for something close before concluding the name isn't covered.
|
|
124
136
|
|
|
125
|
-
|
|
126
|
-
- **By browsing:** List the `dist/docs/` folder. Filenames match component names directly (e.g., `Table.md`, `useTableCollection.md`). Note some names contain spaces (`AI Assistant.md`) or dots (`CollectionPage.Header.md`) — quote paths when searching.
|
|
127
|
-
- **By concept:** Search filenames for keywords (e.g., "filter"). Check `index.json` categories — related components share a category prefix.
|
|
137
|
+
Not every real `@wix/patterns` export is in this index — only the names these guides actually reference. If a name you need genuinely isn't there, **stop and say so rather than falling back to `node_modules`.**
|
|
128
138
|
|
|
129
139
|
### Reading doc files
|
|
130
140
|
|
|
131
|
-
|
|
141
|
+
`Read <pkgRoot>/dist/docs/index.json` to resolve a name to its doc file — or a `symbols` alias, for the 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: it's produced for every documented component, not just the curated ones.
|
|
132
142
|
|
|
133
|
-
|
|
143
|
+
**Always check the import statement inside the doc** — not everything comes from `@wix/patterns` (some use subpaths like `@wix/patterns/provider`).
|
|
134
144
|
|
|
135
|
-
|
|
145
|
+
### Reading the file the index names
|
|
136
146
|
|
|
137
|
-
|
|
147
|
+
The mechanics of the file an index names — types the docs don't cover, which one-line stubs are answers rather than truncation, subpath entry points, cross-references, split compound-component 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.
|
|
138
148
|
|
|
139
149
|
## The Collection → Entity Flow
|
|
140
150
|
|
|
141
|
-
A collection page and its item form are **two patterns pages**, not a page plus a modal. Getting the table right and then hand-building the "add item" form
|
|
151
|
+
A collection page and its item form are **two patterns pages**, not a page plus a modal. Getting the table right and then hand-building the "add item" form as a dashboard modal is the most common way this goes wrong.
|
|
142
152
|
|
|
143
153
|
| Step | What owns it |
|
|
144
154
|
| --- | --- |
|
|
@@ -149,24 +159,20 @@ A collection page and its item form are **two patterns pages**, not a page plus
|
|
|
149
159
|
| Body layout | `EntityPage.Header`, `.MainContent`, `.AdditionalContent`, `.Card` |
|
|
150
160
|
| The individual fields inside those cards | `@wix/design-system` (`FormField`, `Input`, `Text`) |
|
|
151
161
|
|
|
152
|
-
`navigateToEntityPage`
|
|
162
|
+
Prefer `navigateToEntityPage` over a plain route change: the entity header (title, subtitle, breadcrumbs) renders immediately, without waiting for the fetch.
|
|
153
163
|
|
|
154
|
-
Read `EntityPage.md`, `useEntityPage.md`, and `usePatternsNavigate.md` before implementing — and note
|
|
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.
|
|
155
165
|
|
|
156
|
-
|
|
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).
|
|
167
|
+
|
|
168
|
+
Reserve dashboard 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 is an `EntityPage` even though nothing is being edited yet. Size and field count are not exceptions — a one-field create form is still an `EntityPage`. A page that lists no records is outside this rule.
|
|
157
169
|
|
|
158
170
|
## When Patterns Has No Equivalent
|
|
159
171
|
|
|
160
|
-
A concept is only "missing" from patterns after you've checked `index.json` **and** searched
|
|
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, and only then:
|
|
161
173
|
|
|
162
174
|
1. Look the component up in `@wix/design-system` via the `wix-design-system` skill.
|
|
163
175
|
2. Render it *inside* the patterns page shell / collection, not as a replacement for it.
|
|
164
|
-
3. If WDS lacks it too, compose from WDS primitives (`Box`, `Card`, `Text`) — never restyle patterns internals
|
|
165
|
-
|
|
166
|
-
Anything page- or collection-shaped (page shell, header, table, grid, filters, sorting, paging, row actions, bulk actions) is patterns' territory. If you're about to build one of those from WDS parts, you skipped a lookup.
|
|
167
|
-
|
|
168
|
-
## Tips
|
|
176
|
+
3. If WDS lacks it too, compose from WDS primitives (`Box`, `Card`, `Text`) — never restyle patterns internals, never add another UI library.
|
|
169
177
|
|
|
170
|
-
-
|
|
171
|
-
- **Hook docs** list configuration options as props in the API table.
|
|
172
|
-
- **Type docs** (e.g., `TableState.md`) describe the shape of state objects.
|
|
178
|
+
Anything page- or collection-shaped (page shell, header, table, grid, filters, sorting, paging, row and bulk actions) is patterns' territory. If you're about to build one from WDS parts, you skipped a lookup.
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# Collection Toolkit — what to reach for, per user need
|
|
2
|
+
|
|
3
|
+
[UX_SUCCESS_MODEL.md](UX_SUCCESS_MODEL.md) says what a dashboard must do for the person using it. This file says which component does it, so the stage list resolves to real names instead of a hand-rolled approximation.
|
|
4
|
+
|
|
5
|
+
Everything below is a real name in the installed `@wix/patterns`. Confirm the props before writing JSX by reading its doc from `dist/docs/index.json` — and if a name is missing from `dist/dts-bundle/index.json`, the installed version is older than this file; work from that inventory, not from memory.
|
|
6
|
+
|
|
7
|
+
> **The two requirements below are not suggestions.** A page that renders a filtered table and nothing else is the single most common failure of a generated dashboard: it answers "what are all the records" and nothing about how many, which one needs attention, or why something happened. Measured runs produce exactly that page unless the requirement is stated.
|
|
8
|
+
>
|
|
9
|
+
> 1. **A dashboard that reports on records shows aggregate numbers**, not only rows.
|
|
10
|
+
> 2. **A dashboard whose rows represent real business records lets the user open one**, unless the prompt is explicitly a report or an export.
|
|
11
|
+
|
|
12
|
+
## Understand — the aggregate
|
|
13
|
+
|
|
14
|
+
| Need | Component |
|
|
15
|
+
| --- | --- |
|
|
16
|
+
| Totals, counts, status breakdown above the table | `SummaryBar` |
|
|
17
|
+
| Which subset the numbers describe | wire each metric to the collection's filter state so the count follows the filters |
|
|
18
|
+
|
|
19
|
+
`SummaryBar` sits inside the page shell, above the collection. Compute the values from the same query the table uses, or a count query alongside it — a metric that disagrees with the visible rows is worse than no metric.
|
|
20
|
+
|
|
21
|
+
## Focus — narrowing
|
|
22
|
+
|
|
23
|
+
| Need | Component |
|
|
24
|
+
| --- | --- |
|
|
25
|
+
| Free-text search | `CollectionSearch` |
|
|
26
|
+
| The filter bar itself | `CollectionToolbarFilters` |
|
|
27
|
+
| Pick several values from a known list | `MultiSelectCheckboxFilter`, `MultiInlineCheckboxFilter`, `MultiAutoInlineCheckboxFilter` |
|
|
28
|
+
| Pick one value | `SingleSelectFilter`, `RadioGroupFilter`, `TabsFilter` |
|
|
29
|
+
| Values fetched from an API, not a fixed list | `MultiSelectCollectionFilter` + `useFilterCollection` |
|
|
30
|
+
| Type-ahead over many values | `AutoCompleteFilter` |
|
|
31
|
+
| Date or number ranges | `DateRangeFilter`, `NumberRangeFilter` |
|
|
32
|
+
| Comparison operators (greater than, contains) | `OperatorFilterPicker` + `operatorFilter` |
|
|
33
|
+
| The filter's state object | `idNameArrayFilter`, `stringFilter`, `stringsArrayFilter`, `arrayFilter`, `dateRangeFilter`, `customFilter` |
|
|
34
|
+
| A fixed in-memory option list for a filter | `useStaticListFilterCollection` |
|
|
35
|
+
| Sorting | `Sortable Columns`, `MultiLevelSorting` |
|
|
36
|
+
|
|
37
|
+
**Ask for several names at once.** `docs`, `types` and `exports` all take a list — `types ComputedQuery OffsetQuery RangeItem`, `exports page form router` — and each call is a full model turn, so five one-name calls cost five turns for one call's worth of answer. `exports` with no argument lists the 31 entry points; that is a one-off orientation, not something to re-run.
|
|
38
|
+
|
|
39
|
+
**A factory or hook's doc is often empty where its signature should be** — `docs idNameArrayFilter` prints an `## API` heading with nothing under it, because the props table only exists for components. Ask `types idNameArrayFilter` instead and you get the signature: `<T extends { id: string; name: string }>(params?) => ArrayFilterState<T>`. That applies to every `use…` hook and every `…Filter` factory in the table above, and it is the difference between knowing the name and being able to call it.
|
|
40
|
+
|
|
41
|
+
**A filter must narrow the result.** Declare it in the collection hook's `filters` map and read it inside `fetchData`, so the value reaches the query. Filter UI that renders but never changes the rows is a defect that looks like a feature — and it is the failure mode these components exist to prevent.
|
|
42
|
+
|
|
43
|
+
## Investigate — opening one record
|
|
44
|
+
|
|
45
|
+
| Surface | Use when | Built from |
|
|
46
|
+
| --- | --- | --- |
|
|
47
|
+
| **Side panel** | Inspect or lightly edit one record while keeping the filtered list on screen. The V1 default for review dashboards. | WDS `SidePanel` — patterns has no side panel |
|
|
48
|
+
| **Entity page** | Multi-section detail, editing, history, or a link someone can share. | `EntityPage` + `useEntityPage`, reached with `usePatternsNavigate().navigateToEntityPage`, form state from `@wix/patterns/form`. The call itself: [ENTITY_PAGE_TOOLKIT.md](ENTITY_PAGE_TOOLKIT.md) |
|
|
49
|
+
| **Expanded row** | A couple of extra fields, no separate workspace needed. | The collection's own row expansion |
|
|
50
|
+
| **Picker / bulk confirm** | Choosing records, or confirming an action on many. | `PickerModal` + `usePickerModal`, `bulkActionModal` |
|
|
51
|
+
|
|
52
|
+
A dialog that creates, updates or displays one listed record is **not** a dashboard modal — a create / "add new" form included, since it writes the record. See [DASHBOARD_MODAL.md](../DASHBOARD_MODAL.md). A row the user cannot open is the second most common failure after the missing aggregate.
|
|
53
|
+
|
|
54
|
+
**Form state on an entity page** comes from `@wix/patterns/form` — `useForm` for the form, `useController` for a single field. That subpath re-exports `@wix/bex-core/form`, which wraps `react-hook-form`, so its API is react-hook-form's and only a handful of its names appear in the patterns docs: `FieldValues`, `ControllerProps` and most of the rest are documented by react-hook-form, not here. `Read <pkgRoot>/dist/dts-bundle/exports/form.d.ts` to see what the subpath actually gives you.
|
|
55
|
+
|
|
56
|
+
## Act and confirm
|
|
57
|
+
|
|
58
|
+
| Need | Component |
|
|
59
|
+
| --- | --- |
|
|
60
|
+
| Row actions | `PrimaryActions`, `SecondaryActions`, `More Actions`, `deleteSecondaryAction` |
|
|
61
|
+
| Page-level button | `PrimaryPageButton`, `PrimaryActionButton` |
|
|
62
|
+
| Acting on a multi-row selection | `MultiBulkActionToolbar`, `bulkActionModal` |
|
|
63
|
+
| Immediate feedback, then reconcile | `useOptimisticActions`, `CollectionOptimisticActions` |
|
|
64
|
+
| A banner above the table | `TableTopNotification` |
|
|
65
|
+
|
|
66
|
+
## The states that are not the happy path
|
|
67
|
+
|
|
68
|
+
| State | Component |
|
|
69
|
+
| --- | --- |
|
|
70
|
+
| Collection is genuinely empty | `CollectionEmptyState` |
|
|
71
|
+
| Filters or search matched nothing | `CollectionNoResultsState` |
|
|
72
|
+
| Feature needs a paid plan | `CollectionPremiumEmptyState` |
|
|
73
|
+
| Load failed | the collection state's error handling — give the user a way to retry |
|
|
74
|
+
|
|
75
|
+
Empty and no-results are different messages: one means "add your first record", the other means "loosen the filters". Shipping only the first makes a working filter look broken.
|
|
76
|
+
|
|
77
|
+
## Export
|
|
78
|
+
|
|
79
|
+
`ExportButton` (its doc is `ExportTo`) for CSV and similar. Reach for it when the prompt mentions exporting, downloading, or sending records elsewhere.
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# Entity Page Toolkit — calling `useEntityPage`
|
|
2
|
+
|
|
3
|
+
[COLLECTION_TOOLKIT.md](COLLECTION_TOOLKIT.md) says a row the user cannot open is a defect, and sends you to `EntityPage` + `useEntityPage` to fix it. This file is the call itself.
|
|
4
|
+
|
|
5
|
+
## The call
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { useEntityPage, EntityPage } from '@wix/patterns';
|
|
9
|
+
import { useForm } from '@wix/patterns/form';
|
|
10
|
+
|
|
11
|
+
interface Shift {
|
|
12
|
+
id?: string;
|
|
13
|
+
name?: string;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
interface ShiftFormFields {
|
|
17
|
+
name?: string;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const form = useForm<ShiftFormFields>({ defaultValues: { name: '' } });
|
|
21
|
+
|
|
22
|
+
const state = useEntityPage<Shift, ShiftFormFields>({
|
|
23
|
+
fetch: () => api.getShift(shiftId).then((entity) => ({ entity })),
|
|
24
|
+
onSave: ({ widgetsFormData }) =>
|
|
25
|
+
api
|
|
26
|
+
.updateShift(shiftId, { ...form.getValues(), ...widgetsFormData })
|
|
27
|
+
.then((updatedEntity) => ({ updatedEntity })),
|
|
28
|
+
form,
|
|
29
|
+
parentPath: '/shifts',
|
|
30
|
+
});
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
`EntityPage` and `useEntityPage` are **root** exports. `@wix/patterns/page` holds `CollectionPage` and `WidgetsFormProvider` only, so importing the entity page from there is `TS2305: has no exported member` — the collection page and the entity page do not live in the same place. `Read <pkgRoot>/dist/dts-bundle/exports/page.d.ts` to see what that subpath actually gives you.
|
|
34
|
+
|
|
35
|
+
## Name both generics
|
|
36
|
+
|
|
37
|
+
`useEntityPage<T, V extends FieldValues = FieldValues>` takes the entity type **and** the form-values type. `V` does not infer from the `form` argument — it falls back to `FieldValues`, and a `useForm<ShiftFormFields>()` then fails to assign with `Type 'UseFormReturn<ShiftFormFields, …>' is not assignable to type 'UseFormReturn<FieldValues>'`. Naming a single generic only works when the form is untyped.
|
|
38
|
+
|
|
39
|
+
`useEntityPage<any, ShiftFormFields>` makes that error go away and takes the entity type with it — `state.entity` becomes `any`, and every field access below it stops being checked. Name the entity type.
|
|
40
|
+
|
|
41
|
+
## `onSave` does not hand you the form values
|
|
42
|
+
|
|
43
|
+
`OnSaveParams` has exactly one key. `widgetsFormData` carries what the **widget** fields contributed — extended fields, tags — not what the user typed into your own fields. Those come from the form you already own:
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
onSave: ({ widgetsFormData }) => {
|
|
47
|
+
const values = form.getValues(); // your fields
|
|
48
|
+
const { extendedFields, tags } = widgetsFormData; // widget fields
|
|
49
|
+
…
|
|
50
|
+
};
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Reaching for a `values`-shaped key on the `onSave` argument is the usual first guess, and there isn't one.
|
|
54
|
+
|
|
55
|
+
## The params are a `Pick`
|
|
56
|
+
|
|
57
|
+
`UseEntityPageParams` picks a fixed set off `EntityPageStateParams` — `fetch`, `onSave`, `saveSuccessToast`, `saveErrorToast`, `deleteAction`, `transformEntityToCollectionItem`, `isNewEntity`, `form`, `parentPageId`, `parentPath`, `parentReferrer`, `schemaSource`. Anything outside that list is an excess-property error on the object literal. `container` is the common guess and is not one of them: the hook calls `useWixPatternsContainer()` itself.
|
|
58
|
+
|
|
59
|
+
Confirm the shape rather than guessing — the hook's doc has an empty API section, because props tables only exist for components. `Read <pkgRoot>/dist/dts-bundle/index.json`, then `Read` the bundled `.d.ts` for each of `useEntityPage`, `UseEntityPageParams`, and `OnSaveParams` at exactly the `file` path the index gives.
|
|
60
|
+
|
|
61
|
+
## Around the call
|
|
62
|
+
|
|
63
|
+
| Step | What owns it |
|
|
64
|
+
| --- | --- |
|
|
65
|
+
| Getting here from the collection page | `usePatternsNavigate()` → `navigateToEntityPage({ path, entity })` |
|
|
66
|
+
| Registering the route | `PatternsReactRoute` inside `PatternsReactRouter` |
|
|
67
|
+
| Form state and field binding | `useForm` / `useController` from `@wix/patterns/form` |
|
|
68
|
+
| Body layout | `EntityPage.Header`, `.MainContent`, `.AdditionalContent`, `.Card` |
|
|
69
|
+
| The fields inside those cards | `@wix/design-system` (`FormField`, `Input`, `Text`) |
|
|
70
|
+
|
|
71
|
+
`@wix/patterns/form` re-exports `@wix/bex-core/form`, which wraps `react-hook-form` — so `form.getValues()`, `form.reset()` and the rest are react-hook-form's API, documented there rather than in the patterns docs.
|
|
72
|
+
|
|
73
|
+
A dialog that creates, updates or displays one listed record is **not** a dashboard modal — a create / "add new" form included, since it writes the record. See [DASHBOARD_MODAL.md](../DASHBOARD_MODAL.md).
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# Reading `@wix/patterns` Bundles and Docs
|
|
2
|
+
|
|
3
|
+
> **Scope.** You are here because a lookup in `dist/dts-bundle/index.json` or
|
|
4
|
+
> `dist/docs/index.json` gave you an entry and you are about to open the file it names. Getting to that index in the first
|
|
5
|
+
> place — resolving the package root, the version floor, the docs lookup, and the rule
|
|
6
|
+
> against browsing `node_modules` by hand — is in
|
|
7
|
+
> [WIX_PATTERNS_DOCS.md](../WIX_PATTERNS_DOCS.md). Nothing here replaces those steps.
|
|
8
|
+
|
|
9
|
+
## Types the docs don't cover
|
|
10
|
+
|
|
11
|
+
The docs cover components and props, not the types those props use — `Filter<T>`, `RangeItem<T>`, `CursorQuery`, a `...Props` interface. `Read <pkgRoot>/dist/dts-bundle/index.json`, look up the type name, then `Read <pkgRoot>/dist/dts-bundle/<entry.file>` using exactly the `file` path the index gives — **never reconstruct the path from the name**; bundles are nested one directory per kind (`components/Table.d.ts`, `hooks/useForm.d.ts`, `types/RangeItem.d.ts`, …), so guessing `<Name>.d.ts` at the top level is wrong by construction.
|
|
12
|
+
|
|
13
|
+
Several of these types (`RangeItem`, `Filter`, `CursorQuery`, the filter factory functions) actually live in `@wix/bex-core` — the bundle already resolves and inlines the real declaration, so you get the full shape with no deep, undeclared `@wix/bex-core/dist/types/...` path to chase. Still always import it from `@wix/patterns`, per the index's `importPath` field, never from wherever the bundle says it's really declared.
|
|
14
|
+
|
|
15
|
+
That inlining applies to the data shapes you write. State objects you *receive* are a separate case — see the next section.
|
|
16
|
+
|
|
17
|
+
## A bundle stops where you stop writing code
|
|
18
|
+
|
|
19
|
+
A bundle carries its own name's declaration plus every shape **you** would write by hand. It deliberately does *not* expand what the library hands you, so two kinds of one-line stub are normal and are answers, not truncation:
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
/**
|
|
23
|
+
* `TableState` — you receive this, you don't construct it.
|
|
24
|
+
* Produced by `useTableCollection()` (also `useAmbassadorTable()`, `useTableContext()`).
|
|
25
|
+
* Look `TableState` up in the bundle index for its own API.
|
|
26
|
+
*/
|
|
27
|
+
declare class TableState<T, F> {
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
An empty body with a **"Produced by"** note means: call that hook or factory to get one. That is usually the whole answer — `<Table state={...}>` needs `useTableCollection()`, not `TableState`'s internals. If you do need its members (`state.toolbar`, `state.visibleColumns`), it has its own index entry — look the name up and read that bundle, where its body is complete.
|
|
32
|
+
|
|
33
|
+
A stub saying **"cut here because it has its own bundle"** means the same thing for a shape you *do* write: it wasn't copied in twice, so look the name up and read its own file.
|
|
34
|
+
|
|
35
|
+
Every bundle fits in a single read; the index's `bytes` field says how big before you open it. So a bundle is never partially shown — if something looks missing, it was cut on purpose and the stub names where to find it.
|
|
36
|
+
|
|
37
|
+
A handful of names carry `"status": "unreachable"` with a message saying not to import them (the `...BaseProps` interfaces a component's props `extends`). Read those for the props they contribute; don't write an import for them.
|
|
38
|
+
|
|
39
|
+
## Subpath entry points
|
|
40
|
+
|
|
41
|
+
`@wix/patterns` is 31 entry points, not one namespace, and `/form` re-exports `@wix/bex-core/form`. To see what's importable from a specific one: `Read <pkgRoot>/dist/dts-bundle/exports/<subpath>.d.ts` directly (`.` is `exports/index.d.ts`; a nested one like `./testkit/backend` is `exports/testkit/backend.d.ts`). This only lists the curated names covered above — a file with nothing in it (a one-line comment) means no curated name lives on that subpath yet, not that the subpath doesn't exist.
|
|
42
|
+
|
|
43
|
+
## Following cross-references
|
|
44
|
+
|
|
45
|
+
Docs link to related names as Storybook URLs (`[TableState](./?path=/story/...--tablestate)`) — resolve the link text back to a filename via `dist/docs/index.json`, the same way you found the first doc, and `Read` it if you actually need it. There's no automatic multi-level expansion here; follow only the links you need.
|
|
46
|
+
|
|
47
|
+
Links to `https://www.docs.wixdesignsystem.com/` are external (Wix Design System) — not part of `@wix/patterns` docs. Likewise, a bundled `.d.ts` that references a deep `@wix/design-system/dist/...` path is pointing at that library's own internals — look the name up via the `wix-design-system` skill's own tool, not by opening the path.
|
|
48
|
+
|
|
49
|
+
## Tips
|
|
50
|
+
|
|
51
|
+
- **Compound components** have separate docs per sub-part: `CollectionPage.md`, `CollectionPage.Header.md`, `CollectionPage.Content.md`.
|
|
52
|
+
- **Hook docs** list configuration options as props in the API table.
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
# Dashboard UX Success Model
|
|
2
|
+
|
|
3
|
+
What makes a generated dashboard page actually *succeed* for the person using it. Use this to turn a vague prompt ("help me manage order exceptions") into concrete requirements, and as the checklist before calling a dashboard done.
|
|
4
|
+
|
|
5
|
+
Ported from the FeatureVibe dashboard product doc.
|
|
6
|
+
|
|
7
|
+
> **North Star.** A successful dashboard helps a site owner or collaborator **understand what matters, complete the intended task, and trust the result**. It fulfills the user's prompt through a clear workflow, the right presentation, and trustworthy business data.
|
|
8
|
+
|
|
9
|
+
This file is about *what to build*. For *how* to build it, see [WDS_LAYOUT.md](WDS_LAYOUT.md) for content layout and [DASHBOARD_PAGE.md](../DASHBOARD_PAGE.md) for the `@wix/patterns` → `@wix/design-system` component order — the workflow stages below are user needs, not an excuse to hand-roll shells, tables, or filter bars.
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
## The Success Model
|
|
13
|
+
|
|
14
|
+
A generated dashboard succeeds across three connected dimensions.
|
|
15
|
+
|
|
16
|
+
| Success dimension | What must be true |
|
|
17
|
+
|---|---|
|
|
18
|
+
| Workflow success | The dashboard supports a complete journey from understanding to a confirmed outcome. |
|
|
19
|
+
| Presentation success | Information is shown clearly and in the format that best supports the task. |
|
|
20
|
+
| Data success | Information is accurate and consistent, including when it comes from multiple sources. |
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## The Workflow Journey
|
|
24
|
+
|
|
25
|
+
The prompt defines the outcome. The stages define the journey from understanding the situation to confirming the result. They are **user needs**, not necessarily separate screens or a rigid sequence.
|
|
26
|
+
|
|
27
|
+
| Stage | User outcome |
|
|
28
|
+
|---|---|
|
|
29
|
+
| **Understand** | Know the current situation. |
|
|
30
|
+
| **Focus** | Recognize what matters or requires attention. |
|
|
31
|
+
| **Investigate** | Access the details needed to decide. |
|
|
32
|
+
| **Act** | Complete the intended business task. |
|
|
33
|
+
| **Feedback** | See that the action succeeded and the state changed correctly. |
|
|
34
|
+
|
|
35
|
+
### 1. Understand
|
|
36
|
+
|
|
37
|
+
**Intent:** Help the user understand the business area this dashboard supports, what the data represents, and how to interpret it.
|
|
38
|
+
|
|
39
|
+
- Present the most important totals, trends, and status indicators.
|
|
40
|
+
- Make scope, time range, and freshness clear.
|
|
41
|
+
- Distinguish no data, loading, access, connection, and system problems.
|
|
42
|
+
- Connect summaries to underlying items.
|
|
43
|
+
|
|
44
|
+
**Success:** The user can explain what is happening now.
|
|
45
|
+
|
|
46
|
+
### 2. Focus
|
|
47
|
+
|
|
48
|
+
**Intent:** Help the user recognize what matters or requires attention.
|
|
49
|
+
|
|
50
|
+
- Choose the view that best supports the task.
|
|
51
|
+
- Reduce noise through hierarchy, search, filters, sorting, saved views, and alerts.
|
|
52
|
+
- Explain empty results and offer a useful next step.
|
|
53
|
+
- Make the most important next action clear.
|
|
54
|
+
|
|
55
|
+
**Success:** The user knows where to direct attention and what to do next.
|
|
56
|
+
|
|
57
|
+
### 3. Investigate
|
|
58
|
+
|
|
59
|
+
**Intent:** Give the user enough context to make a confident decision.
|
|
60
|
+
|
|
61
|
+
- Reveal detail progressively without making users lose their place.
|
|
62
|
+
- Show related information, history, and meaningful connections.
|
|
63
|
+
- Make missing, unmatched, or uncertain information visible.
|
|
64
|
+
|
|
65
|
+
**Success:** The user can understand why something happened and decide how to respond.
|
|
66
|
+
|
|
67
|
+
### 4. Act
|
|
68
|
+
|
|
69
|
+
**Intent:** Let the user complete the intended business task.
|
|
70
|
+
|
|
71
|
+
- Provide the actions required by the prompt and allowed by permissions.
|
|
72
|
+
- Support individual and bulk actions when both are useful.
|
|
73
|
+
- Make consequences clear and protect against destructive mistakes.
|
|
74
|
+
|
|
75
|
+
**Success:** The user can complete the task without leaving the workflow or guessing what to do.
|
|
76
|
+
|
|
77
|
+
### 5. Feedback
|
|
78
|
+
|
|
79
|
+
**Intent:** Confirm that the action succeeded and the business state changed correctly.
|
|
80
|
+
|
|
81
|
+
- Provide immediate feedback after an action.
|
|
82
|
+
- Refresh relevant items, summaries, counts, filters, and views.
|
|
83
|
+
- Keep status and history visible when users may need to return later.
|
|
84
|
+
|
|
85
|
+
**Success:** The user can see the confirmed result everywhere it matters.
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
## The 5 WHATs
|
|
89
|
+
|
|
90
|
+
How to gain enough context to ensure a complete workflow. Translate each prompt into concrete journey requirements:
|
|
91
|
+
|
|
92
|
+
- What outcome is the user trying to achieve?
|
|
93
|
+
- What must they understand before acting?
|
|
94
|
+
- What requires deeper investigation?
|
|
95
|
+
- Which actions must be available?
|
|
96
|
+
- What visible result will confirm success?
|
|
97
|
+
|
|
98
|
+
> **Example:** "Help me manage order exceptions" requires an overview of open issues, ways to focus on urgent cases, enough order context to decide, actions to resolve each issue, and confirmation that resolved items leave the active list.
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
## Presentation Success
|
|
102
|
+
|
|
103
|
+
Presentation success applies across all five stages. Choose both the right **representation** and the right **interaction surface**, while keeping hierarchy, meaning, and state consistent.
|
|
104
|
+
|
|
105
|
+
### Choosing the Right View
|
|
106
|
+
|
|
107
|
+
| View | Use when… | Success looks like… |
|
|
108
|
+
|---|---|---|
|
|
109
|
+
| **Table** | Users compare many records across several attributes. | Records are easy to scan, compare, filter, select, and act on. |
|
|
110
|
+
| **Gallery** | Visual recognition is central. | Images identify items while key status and actions remain visible. |
|
|
111
|
+
| **List** | Items have one dominant identity and limited supporting detail. | Users scan quickly without unnecessary density. |
|
|
112
|
+
| **Kanban** | Work moves through meaningful stages. | Stage, workload, and valid movement are understandable. |
|
|
113
|
+
| **Timeline or calendar** | Time, sequence, or scheduling matters. | Upcoming activity, conflicts, and timing are clear. |
|
|
114
|
+
| **Chart** | The user needs to understand a trend or relationship. | The visualization answers a specific business question. |
|
|
115
|
+
| **Summary metrics** | The user needs a quick health signal. | Metrics clarify current conditions and where to focus. |
|
|
116
|
+
|
|
117
|
+
- Choose the default view that best supports the primary task.
|
|
118
|
+
- Offer another view only when it provides distinct value.
|
|
119
|
+
- Keep filters, state, and meaning consistent when users change views.
|
|
120
|
+
- Connect summaries and visualizations back to the relevant records.
|
|
121
|
+
|
|
122
|
+
### Choosing the Right Drill-In
|
|
123
|
+
|
|
124
|
+
Choose the smallest interface that gives users enough context and room to complete the task. These are defaults, not rigid rules.
|
|
125
|
+
|
|
126
|
+
| Interface | Use when… | Success looks like… |
|
|
127
|
+
|---|---|---|
|
|
128
|
+
| **Side panel** | The user should review or update one item while keeping the dashboard visible. | Context is preserved while deeper work remains focused. |
|
|
129
|
+
| **Modal** | The user needs to complete a focused, bounded task or decision. | Attention stays on one task and the user can return cleanly. |
|
|
130
|
+
| **Entity page** | The task involves complex details, multi-section editing, history, or related information. | The user has enough space and structure to complete deeper work. |
|
|
131
|
+
| **Inline or expanded row** | The user needs a quick inspection or simple action. | Detail appears without creating a separate workspace. |
|
|
132
|
+
|
|
133
|
+
Which Wix primitive builds each of these — and which components serve the summaries, filters and empty states named above — is in [Collection Toolkit](COLLECTION_TOOLKIT.md). Patterns has no side panel; that one is WDS.
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
## Data Success
|
|
137
|
+
|
|
138
|
+
Data success means giving users a complete and trustworthy view of the business. A dashboard may rely on one source or connect related customer, transaction, payment, and operational data.
|
|
139
|
+
|
|
140
|
+
### Major Data Sources
|
|
141
|
+
|
|
142
|
+
| Data source | What it provides |
|
|
143
|
+
|---|---|
|
|
144
|
+
| **CMS** | Custom collections, items, references, and custom business records. |
|
|
145
|
+
| **Stores** | Products, variants, categories, inventory, and locations. |
|
|
146
|
+
| **eCommerce** | Carts, checkouts, orders, line items, and fulfillment. |
|
|
147
|
+
| **Bookings** | Services, appointments, classes, courses, staff, availability, and attendance. |
|
|
148
|
+
| **Contacts and Members** | Customer identity, profiles, labels, roles, and audience context. |
|
|
149
|
+
| **Payments and Pricing Plans** | Transactions, refunds, payouts, plans, subscriptions, and renewals. |
|
|
150
|
+
| **Events** | Events, tickets, registrations, guests, and check-ins. |
|
|
151
|
+
| **Other connected sources** | Restaurants, Forms, Invoices, Programs, and external systems. |
|
|
152
|
+
|
|
153
|
+
### What Must Succeed Across Sources
|
|
154
|
+
|
|
155
|
+
| Requirement | User outcome |
|
|
156
|
+
|---|---|
|
|
157
|
+
| **Meaningful relationship** | Sources combine around the business item or decision the user cares about. |
|
|
158
|
+
| **Consistent meaning** | Shared concepts use understandable and consistent language. |
|
|
159
|
+
| **Clear gaps** | Missing or unmatched information is visible rather than silently ignored. |
|
|
160
|
+
| **Trusted actions** | Actions update the correct source and the result appears everywhere relevant. |
|
|
161
|
+
| **Right level of combination** | Related items may be combined; useful but distinct sources remain separate. |
|
|
162
|
+
|
|
163
|
+
> The goal is not to merge everything. Combine sources when the relationship helps users understand or act; otherwise keep them separate but connected.
|
|
164
|
+
|
|
165
|
+
### Multi-Source Examples
|
|
166
|
+
|
|
167
|
+
| Single view | Primary record | Connected sources | User outcome |
|
|
168
|
+
|---|---|---|---|
|
|
169
|
+
| **Order exceptions** | eCommerce order | Payments, Contacts, Stores | Resolve unpaid, delayed, or incorrect orders from one queue. |
|
|
170
|
+
| **Booking follow-up** | Booking or appointment | Bookings, Contacts, Payments | Find missed or unpaid appointments and contact the client. |
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
## Evaluation
|
|
174
|
+
|
|
175
|
+
Rendering is not enough. A successful dashboard passes every check below.
|
|
176
|
+
|
|
177
|
+
- [ ] **Prompt fulfilled:** The main result requested by the user is delivered.
|
|
178
|
+
- [ ] **Task completion:** The intended task works from entry to confirmed result.
|
|
179
|
+
- [ ] **Presentation fit:** Layout, actions, and empty states make the task easy to understand and complete.
|
|
180
|
+
- [ ] **Trusted data:** All sources and views form one accurate picture of the business.
|
|
181
|
+
- [ ] **Consistent results:** Actions, filters, views, summaries, and details agree.
|
|
182
|
+
- [ ] **Business fit:** The experience matches the user's context, role, and permissions.
|
|
183
|
+
|
|
184
|
+
> **Final evaluation question.** Does this dashboard give the user a **clear, trustworthy, and effective** way to accomplish what they asked for?
|