@wix/patterns 1.478.0 → 1.480.0

package/dist/docs/NestedTable.md

@@ -22,7 +22,7 @@ The Nested Table component handles hierarchical data with multiple levels of nes
 
 ### Supported Features
 The following collection features are supported also by the Nested Table component:
-- [Empty State](./?path=/story/features-display-empty-states--collectionemptystate)
+- [Empty State](CollectionEmptyState.md)
 - Error State - See `renderError` prop
 - Loading state
 - Filters
@@ -39,23 +39,23 @@ The component's initial load logic detects the number of items in the dataset to
 
 - **Eager Mode:** When the dataset contains less than 1000 items, all data will be rendered in the expanded mode state by default. Users can immediately see the complete dataset without needing to trigger any additional requests to the server.
 - **Lazy Mode:** If the dataset contains more than 1000 items, the Nested Table will render only the first 100 items of the first level in a collapsed state. When the user expands a collapsed item, the component will trigger a query request to the server to retrieve the child items for that specific parent.
-  > The number 1000 can be configured via [useNestedTable.fetchAllThreshold](./?path=/story/base-components-collections-nestedtable--usenestedtable) option.
+  > The number 1000 can be configured via [useNestedTable.fetchAllThreshold](useNestedTable.md) option.
 
 #### Supported data types and query endpoints
 
 The Nested Table component offers flexibility in handling data retrieval from different APIs, supporting two distinct types of query APIs:
 
 - **Single Entity API:** This type of API is designed to retrieve data from all levels of the Nested Table in one request.
-  Each level will be configured using the same [useNestedTable.levels[].createCollection.collection.fetchData](./?path=/story/base-components-collections-nestedtable--usenestedtable) implementation, simplifying the setup process.
-  To facilitate this configuration, Wix Patterns provides a helper function called [createNestedTableSingleEntityLevels](./?path=/story/base-components-collections-nestedtable--createnestedtablesingleentitylevels).
+  Each level will be configured using the same [useNestedTable.levels[].createCollection.collection.fetchData](useNestedTable.md) implementation, simplifying the setup process.
+  To facilitate this configuration, Wix Patterns provides a helper function called [createNestedTableSingleEntityLevels](createNestedTableSingleEntityLevels.md).
   Developers can use this helper function to define the data-fetching logic for each level of nesting, ensuring consistency and ease of implementation.
-See the [Single Entity](./?path=/story/base-components-collections-nestedtable--nestedtable#Single_Entity) example for more details.
+See the [Single Entity](NestedTable.md) example for more details.
 
 - **Various Entities API:**
   In contrast, the Nested Table also supports scenarios where each level requires data retrieval from different query endpoints.
   This approach allows developers to customize and fine-tune the data retrieval process for individual levels, accommodating diverse data structures and sources.
   By providing the flexibility to specify relevant query endpoints for each nesting level, developers can tailor the data-fetching behavior to their specific needs. 
-See the [Various Entities](./?path=/story/base-components-collections-nestedtable--nestedtable#Various_Entities) example for more details.
+See the [Various Entities](NestedTable.md) example for more details.
 
 #### Filters
 Nested table supports filters for each level. The filters are passed to the `fetchData` function for all collections across all levels.
@@ -69,7 +69,7 @@ The server must handle the filters and return the relevant data. When a user app
 
 We recommend using a proxy server to coordinate communication between the different entities that each level represents. You can find:
 * A mock server example in [this repo](https://github.com/wix-private/cairo-backend-examples)
-* A client-side implementation in the [Filters example](./?path=/story/base-components-collections-nestedtable--nestedtable#Filters)
+* A client-side implementation in the [Filters example](NestedTable.md)
 
 ### Server API Requirements
 
@@ -77,7 +77,7 @@ In both cases, each level configuration must adhere to the following API require
 
 #### All data types must have a property that references its parent (except for the root level)
 
-> Configured via [useNestedTable.levels[].parentKey](./?path=/story/base-components-collections-nestedtable--usenestedtable) option.
+> Configured via [useNestedTable.levels[].parentKey](useNestedTable.md) option.
 
 For example:
 
@@ -110,7 +110,7 @@ interface City {
 
 **Important:** In case of single entity API + lazy mode, the value `'null'` will be passed to the `query.filters.parentId` filter - this means that the `fetchData` function must handle this case and return only the root level data.
 
-> Configured via [useNestedTable.levels[].parentFilter](./?path=/story/base-components-collections-nestedtable--usenestedtable) option.
+> Configured via [useNestedTable.levels[].parentFilter](useNestedTable.md) option.
 
 For example:
 
@@ -271,25 +271,25 @@ Example code: read `dist/examples/NestedTable/drag-and-drop.tsx`
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `state` | `NestedTableState<C, OptionalFiltersMap>` | Yes | - | A state object created with [`useNestedTable`](./?path=/story/base-components-collections-nestedtable--usenestedtable) |
-| `renderError` | `((params: { err: unknown; isOnline: boolean; retry: () => void; }) => ReactElement<any, string \| JSXElementConstructor<any>>)` | No | - | A function that renders when there's an error fetching data from the server.<br> <br> Supported parameters: <br> - `err`: [object] The error thrown by the [`fetchData()`](./?path=/story/common-hooks--usecollection) function. <br> - `isOnline`: [bool] Whether internet connection is available. <br> - `retry`: [func] Retry collection fetch on failed response. Similar to `collection.retryFetch`. @deprecated Use `errorState` instead. |
-| `errorState` | `((err: unknown, params: { isOnline: boolean; retry: () => void; }) => ReactElement<any, string \| JSXElementConstructor<any>>)` | No | - | A function that renders when there's an error fetching data from the server.<br> <br> Supported parameters: <br> - `err`: [object] The error thrown by the [`fetchData()`](./?path=/story/common-hooks--usecollection) function. <br> - `isOnline`: [bool] Whether internet connection is available. <br> - `retry`: [func] Retry collection fetch on failed response. Similar to `collection.retryFetch`. |
-| `emptyState` | `ReactNode` | No | - | Shown when the collection is empty. Pass either a [`<CollectionEmptyState />`](./?path=/story/features-display-empty-states--collectionemptystate) or [`<CollectionPremiuimEmptyState />`](./?path=/story/features-display-empty-states--collectionpremiumemptystate) component. |
-| `noResultsState` | `ReactNode` | No | - | Shown when a search or filter has no results. Accepts a [`CollectionNoResultsState`](./?path=/story/features-display-empty-states--collectionnoresultsstate) component. |
+| `state` | `NestedTableState<C, OptionalFiltersMap>` | Yes | - | A state object created with [`useNestedTable`](useNestedTable.md) |
+| `renderError` | `((params: { err: unknown; isOnline: boolean; retry: () => void; }) => ReactElement<any, string \| JSXElementConstructor<any>>)` | No | - | A function that renders when there's an error fetching data from the server.<br> <br> Supported parameters: <br> - `err`: [object] The error thrown by the [`fetchData()`](useCollection.md) function. <br> - `isOnline`: [bool] Whether internet connection is available. <br> - `retry`: [func] Retry collection fetch on failed response. Similar to `collection.retryFetch`. @deprecated Use `errorState` instead. |
+| `errorState` | `((err: unknown, params: { isOnline: boolean; retry: () => void; }) => ReactElement<any, string \| JSXElementConstructor<any>>)` | No | - | A function that renders when there's an error fetching data from the server.<br> <br> Supported parameters: <br> - `err`: [object] The error thrown by the [`fetchData()`](useCollection.md) function. <br> - `isOnline`: [bool] Whether internet connection is available. <br> - `retry`: [func] Retry collection fetch on failed response. Similar to `collection.retryFetch`. |
+| `emptyState` | `ReactNode` | No | - | Shown when the collection is empty. Pass either a [`<CollectionEmptyState />`](CollectionEmptyState.md) or [`<CollectionPremiuimEmptyState />`](CollectionPremiumEmptyState.md) component. |
+| `noResultsState` | `ReactNode` | No | - | Shown when a search or filter has no results. Accepts a [`CollectionNoResultsState`](CollectionNoResultsState.md) component. |
 | `horizontalScroll` | `boolean` | No | - | Indicates whether the table should have horizontal scrolling. Defining column widths as percentages is not supported with horizontal scrolling. |
 | `actionCellWidth` | `string \| number` | No | - | Width of the column containing the `actionCell` component. |
 | `dragAndDrop` | `{ createDragHandleColumn: null; NestedTableDragAndDropContext: (<C extends string, T, F extends FiltersMap>(props: NestedTableDragAndDropContextProps<C, T, F>) => Element) & { ...; }; ... 5 more ...; DraggableTableRow: NamedExoticComponent<...>; }` | No | - | Adds functionality to allow visitors to reorder items manually. This prop accepts a [Drag and Drop](./?path=/story/features-sort-drag-and-drop--overview) component. |
 | `internalScroll` | `boolean` | No | - | Indicates whether the table should have an internal scroll (instead of the default page scroll) |
-| `topNotification` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | Renders a notification below the header. Accepts a [`TableTopNotification`](./?path=/story/features-display-tabletopnotification--tabletopnotification) component. |
+| `topNotification` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | Renders a notification below the header. Accepts a [`TableTopNotification`](TableTopNotification.md) component. |
 | `filters` | `CollectionToolbarFiltersElement` | No | - | Adds filters to the toolbar and/or a sliding panel. Accepts a `ToolbarFilters` component, which must have the `panelTitle` prop defined. |
-| `summaryBar` | `ReactNode` | No | - | Display a summary bar below the toolbar. Accepts a [`SummaryBar`](./?path=/story/features-display-toolbar--summarybar) component. |
+| `summaryBar` | `ReactNode` | No | - | Display a summary bar below the toolbar. Accepts a [`SummaryBar`](SummaryBar.md) component. |
 | `tags` | `TagsElement<C, any>` | No | - | Enables tags feature. In this element you can pass the configuration |
-| `title` | `ToolbarTitleElement` | No | - | Displays a title at the left of a toolbar. Accepts a [ToolbarTitle](./?path=/story/features-display-toolbar--toolbartitle) component. |
+| `title` | `ToolbarTitleElement` | No | - | Displays a title at the left of a toolbar. Accepts a [ToolbarTitle](ToolbarTitle.md) component. |
 | `search` | `boolean \| FilterElement \| CollectionSearchElement` | No | `true` | Displays a search input on the right side of the table toolbar.<br> <br> Accepts a boolean or a custom React element as a parameter. When passing `false`, no search input is displayed. |
 | `showTitleBar` | `boolean` | No | `true` | Indicates whether to show Table Title Bar or not. Note: if you pass `showTitleBar = false` title bar is not removed from the DOM. For better accessibility column titles should be defined as well. |
-| `exportButton` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | A [`<ExportButton />`](./?path=/story/features-export--exportto) react element to be added to the toolbar |
+| `exportButton` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | A [`<ExportButton />`](ExportTo.md) react element to be added to the toolbar |
 | `importButton` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | A [`<ImportButton />`] react element to be added to the toolbar. |
-| `exportModal` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | A [`<ExportModal />`](./?path=/story/features-export--exportto#CTA_is_out_of_the_table) react element to be rendered in table's context. |
+| `exportModal` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | A [`<ExportModal />`](ExportTo.md) react element to be rendered in table's context. |
 | `importModal` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | A [`<ImportModal />`] react element to be rendered in table's context. |
 | `dragAndDropCategories` | `never[][] \| null` | No | - | By default, drag and drop works only without filters. To enable drag and drop with filters, pass an array of filters to this prop. The functionality will then work only for the specified filters, and to enable without filters, you must pass an empty array. For more information, see the [Drag and Drop Overview](//?path=/story/features-sort-drag-and-drop--overview). |
 

package/dist/docs/NestedTableLevel.md

@@ -6,7 +6,7 @@
 
 ### Overview
 
-Describes a single level in a [`NestedTable`](./?path=/story/base-components-collections-nestedtable--nestedtable) hierarchy. Each level defines how its items are fetched (`createCollection`), how they relate to parents (`parentKey`), and how they render (`columns`, `renderMainColumn`, `actionCell`). Supports expandability, breadcrumbs, drag-and-drop, and row highlighting.
+Describes a single level in a [`NestedTable`](NestedTable.md) hierarchy. Each level defines how its items are fetched (`createCollection`), how they relate to parents (`parentKey`), and how they render (`columns`, `renderMainColumn`, `actionCell`). Supports expandability, breadcrumbs, drag-and-drop, and row highlighting.
 
 ### Props
 
@@ -19,6 +19,6 @@ Describes a single level in a [`NestedTable`](./?path=/story/base-components-col
 | `expandable` | `((item: T) => boolean)` | No | - | A function that accepts the item of the current level and returns a boolean value that indicates whether the item can be expanded. By default, all items are expandable. |
 | `isRowHighlight` | `((item: T) => boolean)` | No | - | A function that accepts the item of the current level and returns a boolean value indicating whether the item should be highlighted. |
 | `parentKey` | `(item: T) => string \| null \| undefined` | Yes | - | A function that accepts the item of the current level and returns the key of the parent item, for example: `(item) => item.parentId`. |
-| `createCollection` | `(params?: NestedOptimisticActionsState<T, F> \| undefined) => { collection: CollectionState<T, F>; parentFilter?: Filter<...> \| undefined; }` | Yes | - | A function that creates a collection for the current level (using [useCreateCollection](./?path=/story/common-hooks--usecreatecollection) hook), and returns the collection state and a reference to a filter object within this collection that filters the collection by the parent key. => { collection: [CollectionState](./?path=/story/common-state--collectionstate); parentFilter?: [Filter<string[]>](./?path=/story/features-filter-factories--stringsarrayfilter); } |
-| `optimisticActionsPredicate` | `((query: ComputedQuery<F>) => (item: T) => boolean)` | No | - | A [predicate](./?path=/story/features-actions-updates--useoptimisticactions) function to pass to the internal [OptimisticActions](/?path=/story/features-actions-updates--collectionoptimisticactions) created by NestedTable |
+| `createCollection` | `(params?: NestedOptimisticActionsState<T, F> \| undefined) => { collection: CollectionState<T, F>; parentFilter?: Filter<...> \| undefined; }` | Yes | - | A function that creates a collection for the current level (using [useCreateCollection](useCreateCollection.md) hook), and returns the collection state and a reference to a filter object within this collection that filters the collection by the parent key. => { collection: [CollectionState](CollectionState.md); parentFilter?: [Filter<string[]>](stringsArrayFilter.md); } |
+| `optimisticActionsPredicate` | `((query: ComputedQuery<F>) => (item: T) => boolean)` | No | - | A [predicate](useOptimisticActions.md) function to pass to the internal [OptimisticActions](/?path=/story/features-actions-updates--collectionoptimisticactions) created by NestedTable |
 

package/dist/docs/NestedTableNodeState.md

@@ -6,18 +6,18 @@
 
 ### Overview
 
-`NestedTableNodeState` represents a single node in a [`NestedTable`](./?path=/story/base-components-collections-nestedtable--nestedtable) tree. Each node has a `depth`, `expanded` state, `children` collection, `optimisticActions`, and access to its parent via `getParent()`. Use `getData()` to access the item and `toggleExpand()` to expand/collapse.
+`NestedTableNodeState` represents a single node in a [`NestedTable`](NestedTable.md) tree. Each node has a `depth`, `expanded` state, `children` collection, `optimisticActions`, and access to its parent via `getParent()`. Use `getData()` to access the item and `toggleExpand()` to expand/collapse.
 
 ### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `getParent` | `<TD, FD extends FiltersMap>() => NestedTableNodeStatePublicAPI<C, TD, FD> \| null` | Yes | - | Get the node this node is a child of => [NestedTableNodeState](./?path=/story/base-components-collections-nestedtable--nestedtablenodestate) \| `undefined` |
+| `getParent` | `<TD, FD extends FiltersMap>() => NestedTableNodeStatePublicAPI<C, TD, FD> \| null` | Yes | - | Get the node this node is a child of => [NestedTableNodeState](NestedTableNodeState.md) \| `undefined` |
 | `children` | `CollectionState<T, F>` | No | - | The collection of the node |
 | `optimisticActions` | `NestedTableNodeStateOptimisticActionsPublicAPI<T>` | No | - | The optimistic actions of the node, affects items both in nested & flat mode |
 | `getData` | `<TD>() => TD \| null` | Yes | - | The "parent" item of this node => T \| null |
 | `toggleExpand` | `() => void` | Yes | - | Toggle the expand/collapse state of the node |
 | `expanded` | `boolean` | Yes | - | Whether the node is expanded |
 | `depth` | `number` | Yes | - | The depth of the node in the tree |
-| `getDescendants` | `<TD, FD extends FiltersMap>() => NestedTableNodeStatePublicAPI<C, TD, FD>[]` | Yes | - | Get all the nodes that are descendants of this node from all levels => [NestedTableNodeState](./?path=/story/base-components-collections-nestedtable--nestedtablenodestate)[] |
+| `getDescendants` | `<TD, FD extends FiltersMap>() => NestedTableNodeStatePublicAPI<C, TD, FD>[]` | Yes | - | Get all the nodes that are descendants of this node from all levels => [NestedTableNodeState](NestedTableNodeState.md)[] |
 

package/dist/docs/NestedTableState.md

@@ -6,15 +6,15 @@
 
 ### Overview
 
-`NestedTableState` manages the state for a [`NestedTable`](./?path=/story/base-components-collections-nestedtable--nestedtable) component. It handles multi-level hierarchical data with expand/collapse, flat and nested view modes, toolbar, and optimistic actions. Created by [`useNestedTable`](./?path=/story/base-components-collections-nestedtable-usenestedtable--usenestedtable).
+`NestedTableState` manages the state for a [`NestedTable`](NestedTable.md) component. It handles multi-level hierarchical data with expand/collapse, flat and nested view modes, toolbar, and optimistic actions. Created by [`useNestedTable`](useNestedTable.md).
 
 ### Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `toolbar` | `ToolbarCollectionState<unknown, {}>` | Yes | - | Underlying [ToolbarCollectionState](./?path=/story/common-state--toolbarcollectionstate) instance |
-| `tableState` | `TableState<unknown, {}>` | Yes | - | Underlying [TableState](./?path=/story/base-components-collections-table-tablestate--tablestate) instance |
-| `getNode` | `<TD, FD extends FiltersMap>(key: string) => NestedTableNodeStatePublicAPI<C, TD, FD> \| undefined` | Yes | - | Get the node this item is the parent of. i.e. this node's collection items' parent id is the `key` @param key string) => [NestedTableNodeState](./?path=/story/base-components-collections-nestedtable--nestedtablenodestate) \| undefined |
+| `toolbar` | `ToolbarCollectionState<unknown, {}>` | Yes | - | Underlying [ToolbarCollectionState](ToolbarCollectionState.md) instance |
+| `tableState` | `TableState<unknown, {}>` | Yes | - | Underlying [TableState](TableState.md) instance |
+| `getNode` | `<TD, FD extends FiltersMap>(key: string) => NestedTableNodeStatePublicAPI<C, TD, FD> \| undefined` | Yes | - | Get the node this item is the parent of. i.e. this node's collection items' parent id is the `key` @param key string) => [NestedTableNodeState](NestedTableNodeState.md) \| undefined |
 | `getRootNode` | `<TD, FD extends FiltersMap>() => NestedTableNodeStatePublicAPI<C, TD, FD>` | Yes | - | Get the root node of the nested table, this node's collection items' parent id is `null`, the items are the top level items |
 | `getAllNodes` | `<TD, FD extends FiltersMap>() => NestedTableNodeStatePublicAPI<C, TD, FD>[]` | Yes | - | Get all the nodes in the table |
 | `refreshAll` | `() => void` | Yes | - | An API to refresh all items in the nested table. |

package/dist/docs/Page Templates.md

@@ -0,0 +1,47 @@
+# Page Templates
+
+**Category:** Guides
+
+Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
+
+## Page templates
+
+`Collection and Entity Template`, `Collection and Read-Only Detail Template`, `Settings Page Template`, `CMS Collection and Entity Template`
+
+Each is an entry in `dist/docs/index.json`, whose `templateFiles` lists the files to copy.
+
+## Overview
+
+Start a dashboard page from one of the page templates rather than from an empty file. Each is a complete, working page that this package compiles against its own release, shipped as a directory under `dist/templates/` and listed on its docs-index entry as `templateFiles`. Choose one with the two questions below, copy its whole directory into your page, then rename and replace what its own page says to.
+
+## Which pages the request needs
+
+| The request needs | Template |
+| --- | --- |
+| A list whose records are only read, with nothing to create or edit | [Collection and Read-Only Detail Template](<Collection and Read-Only Detail Template.md>) |
+| A list, and a way to create and edit each record | [Collection and Entity Template](<Collection and Entity Template.md>) |
+| App-wide settings, and no list | [Settings Page Template](<Settings Page Template.md>) |
+| A list, create and edit, and an app-wide settings area | [Collection and Entity Template](<Collection and Entity Template.md>), with the settings page added as one more route |
+
+Pick the smallest one that covers what the request names. A settings area or an edit form the request never asked for is more page for the user to learn, not a more complete one.
+
+Every template except the settings one has a router, because in all of them a row opens a page of its own. A side panel is not a drill-in: on a patterns page it hosts the page's own panels, such as the table's column settings.
+
+## Where the rows come from
+
+| The rows come from | Template |
+| --- | --- |
+| An SDK or an API you call yourself | [Collection and Entity Template](<Collection and Entity Template.md>), or its read-only variant |
+| A CMS collection | [CMS Collection and Entity Template](<CMS Collection and Entity Template.md>) |
+
+Decide this before writing the page. The two share the entry file and the routes and almost nothing else, so switching later rewrites both the collection page and the entity page. A CMS collection built the first way compiles and runs, and silently loses its schema-driven columns, its field management and its generated form.
+
+**On a CMS collection, the fields a request lists are the collection's fields.** The CMS template shows every field as a column, so a request listing what each row holds names the fields to create, and none of them gets a hand-written column. An existing collection stays on the CMS template too: all its fields show, and the user hides what they don't need in the table's column picker. A stated column list decides the columns only when you fetch the rows yourself.
+
+## Using a template
+
+Read the template's own page first: it lists each file and the wiring to keep, most of which compiles and builds when it is wrong and fails only in the browser. Then copy every file listed in `templateFiles`, keeping their names relative to each other, since the files import one another.
+
+The data functions in each template are in-memory stand-ins with the signatures the pages call. Replace their bodies and keep the signatures, and nothing in the pages changes.
+
+

package/dist/docs/PageWrapper.md

@@ -48,5 +48,5 @@ function BasicPage() {
 
 ### Required Providers
 
-[WixPatternsProvider](./?path=/story/base-components-providers--wixpatternsprovider)
+[WixPatternsProvider](WixPatternsProvider.md)
 

package/dist/docs/PickerContent.md

@@ -8,7 +8,7 @@ Examples below are illustrative: each one demonstrates this page's API, and ever
 
 ### Overview
 
-`PickerContent` displays the content of a picker (list of selectable items). It is used inside [`PickerModal`](./?path=/story/base-components-picker--pickermodal) and [`PickerStandalone`](./?path=/story/base-components-picker--pickerstandalone). Configure it via the [`usePickerContent`](./?path=/story/base-components-picker-hooks--usepickercontent) hook.
+`PickerContent` displays the content of a picker (list of selectable items). It is used inside [`PickerModal`](PickerModal.md) and [`PickerStandalone`](PickerStandalone.md). Configure it via the [`usePickerContent`](usePickerContent.md) hook.
 
 ```tsx
 import { PickerContent } from '@wix/patterns';
@@ -30,14 +30,14 @@ A picker content component accepts props that are being passed by the parent `<P
 
 We should do the following with those props:
 
-- Forward them to `<PickerContent />` and to [`usePickerContent`](./?path=/story/base-components-collections-picker-hooks--usepickercontent)
-- If we have filters, we should build the filters schema using `props.modalState.filters` raw parameters (see ["With Filters" example](./?path=/story/base-components-collections-picker--pickermodal))
-- We also must wrap with [`<WixPatternsProvider />`](./?path=/story/base-components-providers--wixpatternsprovider) because the parent doesn't do that as it's just a modal and not a collection component.
+- Forward them to `<PickerContent />` and to [`usePickerContent`](usePickerContent.md)
+- If we have filters, we should build the filters schema using `props.modalState.filters` raw parameters (see ["With Filters" example](PickerModal.md))
+- We also must wrap with [`<WixPatternsProvider />`](WixPatternsProvider.md) because the parent doesn't do that as it's just a modal and not a collection component.
 
 ##### `usePickerContent`
 
 This hook is a helper hook that helps us to create a picker state object, using the config we already provided to the parent modal `usePickerModal` hook.
-It accepts everything [`useCollection`](./?path=/story/common-hooks--usecollection) accepts minus `fetchData`, `paginationMode` & `limit` which were already provided to the parent modal `usePickerModal` hook.
+It accepts everything [`useCollection`](useCollection.md) accepts minus `fetchData`, `paginationMode` & `limit` which were already provided to the parent modal `usePickerModal` hook.
 
 #### Example
 
@@ -104,13 +104,13 @@ export function PickerModalExample() {
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `state` | `UsePickerContentParams<T, F> \| PickerContentState<T, F>` | Yes | - | A state object created with [`usePickerContent`](./?path=/story/base-components-collections-picker-hooks--usepickercontent) |
+| `state` | `UsePickerContentParams<T, F> \| PickerContentState<T, F>` | Yes | - | A state object created with [`usePickerContent`](usePickerContent.md) |
 | `selectorListProps` | `Partial<SelectorListContentProps>` | No | - | Additional props to pass to [SelectorList](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--selectorlist), i.e `imageSize`, `imageShape` etc. |
 | `customContentButtonOnClick` | `((param: { onClose: (newItems?: T[]) => void; }) => void)` | No | - | A callback to be called when the custom content button is clicked |
 | `showSelectAllCheckbox` | `boolean` | No | - | Shows "Select All" checkbox as a side action (overrides "customContent" prop). If `multiple={number}` or `multiple={false}` are used, this prop does nothing. |
 | `filterComponent` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | Shows a SingleSelectFilter component in a picker modal to filter items; |
 | `renderItem` | `(item: T, index: number) => Partial<PickerListItemProps>` | Yes | - | A function that render a item row in the selector list |
-| `renderEmptyState` | `((params: { hasAvailableItems: boolean; query: ComputedQuery<F>; }) => ReactElement<any, any> \| null)` | No | - | A render function to be rendered when there're no items to show in the table.<br> You can use the built in [`<CollectionEmptyState />`](./?path=/story/features-display-empty-states--collectionemptystate).<br> The function accepts the following parameters * `hasAvailableItems`: Indicates whether other items might have been shown using other filtering / search * `query`: An instance of [ComputedQuery](./?path=/story/common-types--computedquery) that represents the query that resulted with an empty state |
+| `renderEmptyState` | `((params: { hasAvailableItems: boolean; query: ComputedQuery<F>; }) => ReactElement<any, any> \| null)` | No | - | A render function to be rendered when there're no items to show in the table.<br> You can use the built in [`<CollectionEmptyState />`](CollectionEmptyState.md).<br> The function accepts the following parameters * `hasAvailableItems`: Indicates whether other items might have been shown using other filtering / search * `query`: An instance of [ComputedQuery](ComputedQuery.md) that represents the query that resulted with an empty state |
 | `enablePrimaryButton` | `boolean` | No | - | When set to `true`, the modal primary button will be always enabled. |
 | `search` | `boolean \| CollectionSearchElement` | No | `true` | Displays a search input in the picker modal. Accepts a boolean or a custom CollectionSearch element as a parameter. When passing `false`, no search input is displayed. |
 | `hideSearch` | `boolean` | No | - | @deprecated Use search={false} instead Hides the search input of the picker |

package/dist/docs/PickerModal.md

@@ -65,16 +65,16 @@ Example code: read `dist/examples/PickerModal/search-override.tsx`
 
 - `Lazy Loading` - `PickerModal` is designed not to bundle `Wix Patterns` code in the original application that wants to open the modal.
 Instead, it loads it dynamically when the modal actually needs to be open.
-To allow this feature to work, we split the modal integration to 2 components - a lite modal component, and a "heavy" (dynamically imported) picker component. For pre-fetching the data of the first page we ask for the `fetchData`, `paginationMode`, `filters` & `limit` options upfront (see ["With Filters" example](./?path=/story/base-components-collections-picker--pickermodal#With_filter_dropdown) below).
+To allow this feature to work, we split the modal integration to 2 components - a lite modal component, and a "heavy" (dynamically imported) picker component. For pre-fetching the data of the first page we ask for the `fetchData`, `paginationMode`, `filters` & `limit` options upfront (see ["With Filters" example](PickerModal.md) below).
 - Immediate call to action - when only 1 item is available on the server, the call to action (`onSelect`) will be triggered immediately without opening the modal.
 
 #### Integration
-> Make sure to import `usePickerModal` from the sub-package relevant to your environment, see import examples here: [`usePickerModal`](./?path=/story/base-components-collections-picker-hooks--usepickermodal)
+> Make sure to import `usePickerModal` from the sub-package relevant to your environment, see import examples here: [`usePickerModal`](usePickerModal.md)
 
 Integrating with `PickerModal` is usually done by the following steps
 
-- Writing a custom component for the modal content using [`<PickerContent />`](./?path=/story/base-components-collections-picker--pickercontent)
-- Initializing a state object using [`usePickerModal`](./?path=/story/base-components-collections-picker-hooks--usepickermodal) by passing the custom modal content component as a dynamic import to the `pickerContentComponent` option
+- Writing a custom component for the modal content using [`<PickerContent />`](PickerContent.md)
+- Initializing a state object using [`usePickerModal`](usePickerModal.md) by passing the custom modal content component as a dynamic import to the `pickerContentComponent` option
 - Passing the state object to `<PickerModal />`
 - Rendering a button that will open the modal (`Wix Patterns` provides a ready-to-use button `<PickerModalOpenButton />`)
 

package/dist/docs/PickerStandalone.md

@@ -67,9 +67,9 @@ Example code: read `dist/examples/PickerStandalone/createnew.tsx`
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `state` | `PickerStandaloneState<T, F>` | Yes | - | A picker standalone state instance created with [`usePickerStandalone`](./?path=/story/base-components-collections-picker-hooks--usepickerstandalone) |
+| `state` | `PickerStandaloneState<T, F>` | Yes | - | A picker standalone state instance created with [`usePickerStandalone`](usePickerStandalone.md) |
 | `renderItem` | `((item: T, index: number, options: { isMobileView?: boolean; }) => Partial<PickerListItemProps>)` | No | - | A function that renders an item row in the `SelectorList` |
-| `renderEmptyState` | `((params: { hasAvailableItems: boolean; query: ComputedQuery<F>; }) => ReactElement<any, string \| JSXElementConstructor<any>> \| null)` | No | - | A render function to be rendered when there're no items to show in the table.<br> You can use the built in [`<CollectionEmptyState />`](./?path=/story/features-display-empty-states--collectionemptystate).<br> The function accepts the following parameters * `hasAvailableItems`: Indicates whether other items might have been shown using other filtering / search * `query`: An instance of [`ComputedQuery`](./?path=/story/common-types--computedquery) that represents the query that resulted with an empty state |
+| `renderEmptyState` | `((params: { hasAvailableItems: boolean; query: ComputedQuery<F>; }) => ReactElement<any, string \| JSXElementConstructor<any>> \| null)` | No | - | A render function to be rendered when there're no items to show in the table.<br> You can use the built in [`<CollectionEmptyState />`](CollectionEmptyState.md).<br> The function accepts the following parameters * `hasAvailableItems`: Indicates whether other items might have been shown using other filtering / search * `query`: An instance of [`ComputedQuery`](ComputedQuery.md) that represents the query that resulted with an empty state |
 | `defaultTitle` | `string` | No | - | Picker title if not provided via URL query parameter |
 | `defaultSubtitle` | `string` | No | - | Picker subtitle if not provided via URL query parameter |
 | `defaultPrimaryButtonText` | `string` | No | - | The text for the item primary button, if not provided via URL query parameter |

package/dist/docs/PrimaryPageButton.md

@@ -12,7 +12,7 @@ Examples below are illustrative: each one demonstrates this page's API, and ever
 
 ### Description
 
-A primary [button](https://www.docs.wixdesignsystem.com/?path=/story/components-actions--button) that should be use on [CollectionPage.Header](./?path=/story/components-page-collectionpage--collectionpage-header) component.
+A primary [button](https://www.docs.wixdesignsystem.com/?path=/story/components-actions--button) that should be use on [CollectionPage.Header](CollectionPage.Header.md) component.
 It has the same API as the [Button](https://www.docs.wixdesignsystem.com/?path=/story/components-actions--button) component, excluding the `size` and `skin` props, and with a `text` prop that is replacing the `children` prop.
 
 

package/dist/docs/RadioGroupFilter.md

@@ -12,7 +12,7 @@ Examples below are illustrative: each one demonstrates this page's API, and ever
 
 `RadioGroupFilter` is based on `RadioGroup` component of `@wix/design-system`.
 Use `RadioGroupFilter` for rendering a filter that shows a list of items and allow users to choose a single item from the list.
-Render it by providing [ArrayFilter](./?path=/story/features-filter-factories--arrayfilter) to the filter prop and a list of options via the data props.
+Render it by providing [ArrayFilter](arrayFilter.md) to the filter prop and a list of options via the data props.
 
 
 ```tsx

package/dist/docs/Reading the Doc Indices.md

@@ -12,7 +12,7 @@ a deliberate stub for a truncated file.
 
 | Index | Covers | Use it for |
 | --- | --- | --- |
-| `dist/docs/index.json` | every documented name — components, hooks, factories, state types, guides | finding a name's doc, its examples, and the guides |
+| `dist/docs/index.json` | every documented name — components, hooks, factories, state types, guides, page templates | finding a name's doc, its examples, the guides, and the page templates |
 | `dist/dts-bundle/index.json` | a curated set of names | reading a real, fully-resolved declaration |
 
 The docs index is the larger of the two: everything documented has an entry, while the
@@ -30,6 +30,8 @@ undocumented — look it up in the docs index.
 | `symbols` | export names that resolve to this entry, where the doc's title is not the export |
 | `examples` | worked examples for this name, relative to `dist/examples/` |
 | `relatedComponents` | on a guide: the components it recommends |
+| `templateFiles` | on a page template: every file of the page, relative to `dist/templates/` |
+| `relatedTemplates` | on a guide: the page templates it chooses between |
 | `variants` | the same name exported from another entry point with a different declaration — see below |
 | `status`, `statusMessage` | see *Lifecycle*, below |
 
@@ -190,18 +192,33 @@ write are curated and carry an `importPath` like anything else — `useForm`, `u
 neither index, and react-hook-form's own docs are their reference. So a react-hook-form name
 is never unexported merely because the docs index has no page for it; none of them does.
 
+## Page templates
+
+An entry in the `Templates` category is a whole dashboard page rather than one name's API:
+several files that import one another by relative path, published under `dist/templates/`
+in a directory of their own and listed in the entry's `templateFiles`. Copy every file on
+the list into one directory; one on its own does not compile. The files are type-checked
+against this release, under the configuration `wix generate` ships, before it is published.
+Template pages exist only here, not in the Storybook site, since what they document is files
+in the package.
+
+The `Page Templates` guide chooses between them. Its `relatedTemplates` names each one, and
+the build fails when a name there is not an entry that publishes files.
+
 ## Cross-references and examples
 
-Docs link to related names as Storybook URLs — `[TableState](./?path=/story/…--tablestate)`.
-Resolve the link text back to a file through `dist/docs/index.json`, the same way you found
-the first doc. There is no automatic multi-level expansion. Links to
+A link to another documented name is a relative link to its page, beside this one in
+`dist/docs/` — `[TableState](TableState.md)`, or `[Collection Toolkit](<Collection Toolkit.md>)`
+when the file name has a space. Open it directly; the page is the same one its index entry's
+`file` names. A link that still reads `./?path=/story/…` goes to a page that exists only in the
+Storybook site, such as Getting Started, and has no file here. Links to
 `https://www.docs.wixdesignsystem.com/` are the design system's, not this library's.
 
 Compound components have a doc per sub-part — `CollectionPage.md`,
 `CollectionPage.Header.md`, `CollectionPage.Content.md`.
 
 Heavy examples are written beside the doc rather than inlined. The doc keeps the heading and
-the description and names the path: `Example code: read \`dist/docs/ToolbarFilters/apply-changes.tsx\``.
+the description and names the path: `Example code: read \`dist/examples/ToolbarFilters/apply-changes.tsx\``.
 The same files are listed in the entry's `examples` field.
 
 

package/dist/docs/Settings Page Template.md

@@ -0,0 +1,41 @@
+# Settings Page Template
+
+**Category:** Templates
+
+Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
+
+## Related components
+
+`withDashboard`, `WixPatternsProvider`, `SettingsPage`, `useSettingsPage`, `useSettingsPageContext`
+
+Each name resolves in `dist/docs/index.json` — as a key, or as one of an entry's `symbols` aliases.
+
+## Template files
+
+Copy all of them into one directory: they import one another by relative path.
+
+- `dist/templates/settings-page/SettingsPageView.tsx`
+- `dist/templates/settings-page/page.tsx`
+- `dist/templates/settings-page/settings-api.ts`
+
+## Overview
+
+A complete dashboard page for app-wide settings with no list: the entry file, a settings page with one card of form fields, and the functions that load and store the settings. Use it when the page configures the app rather than listing records. Copy the whole directory, replace the fields with your own, and replace the bodies in the api file.
+
+## Files
+
+| File | What it is |
+| --- | --- |
+| page.tsx | The entry file. There is no router, so it renders the settings page directly. |
+| SettingsPageView.tsx | The settings page and its fields. |
+| settings-api.ts | Loads and stores the settings. The in-memory value is only there so the template runs. |
+
+## What to keep
+
+**Every settings-page parameter is required except the two toasts**: the form, the fetch, the save and the cancel. There is no parent path, because a settings page is not reached from a row and has no back navigation.
+
+**Fields read their default inside the card content.** The settings have loaded by the time the card content renders, so a field there starts from the saved value. A field read higher up starts empty.
+
+**No router, and no page-location wiring.** Both exist for pages that open a record. A settings page next to a list is a route inside the list's app instead: see the Collection and Entity Template.
+
+

package/dist/docs/SettingsPage.AdditionalContent.md

@@ -8,7 +8,7 @@ Examples below are illustrative: each one demonstrates this page's API, and ever
 
 ### Overview
 
-A slot component for the side panel of a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Place it inside `<SettingsPage.Content>` alongside `<SettingsPage.MainContent>`. Supports an optional `sticky` prop to keep the content fixed while scrolling.
+A slot component for the side panel of a [`SettingsPage`](SettingsPage.md). Place it inside `<SettingsPage.Content>` alongside `<SettingsPage.MainContent>`. Supports an optional `sticky` prop to keep the content fixed while scrolling.
 
 ```tsx
 import { SettingsPage } from '@wix/patterns';
@@ -16,7 +16,7 @@ import { SettingsPage } from '@wix/patterns';
 
 ### Usage
 
-This component acts as a container for [SettingsPage.Card](./?path=/story/base-components-pages-settings-page--settingspage-card) child components and is displayed on the right side of the Page layout. For examples of how this component is used, please refer to the [SettingsPage](./?path=/story/base-components-pages-settings-page--settingspage) examples.
+This component acts as a container for [SettingsPage.Card](SettingsPage.Card.md) child components and is displayed on the right side of the Page layout. For examples of how this component is used, please refer to the [SettingsPage](SettingsPage.md) examples.
 
 ### Props
 

package/dist/docs/SettingsPage.Card.md

@@ -202,7 +202,7 @@ function States() {
 
 ### Overview
 
-A card container used inside [`SettingsPage.MainContent`](./?path=/story/base-components-pages-settings-page--settingspage-maincontent) or [`SettingsPage.AdditionalContent`](./?path=/story/base-components-pages-settings-page--settingspage-additionalcontent). It wraps form fields and content sections with a card layout, and supports loading/error/success states for async content.
+A card container used inside [`SettingsPage.MainContent`](SettingsPage.MainContent.md) or [`SettingsPage.AdditionalContent`](SettingsPage.AdditionalContent.md). It wraps form fields and content sections with a card layout, and supports loading/error/success states for async content.
 
 ```tsx
 import { SettingsPage } from '@wix/patterns';

package/dist/docs/SettingsPage.Content.md

@@ -8,7 +8,7 @@ Examples below are illustrative: each one demonstrates this page's API, and ever
 
 ### Overview
 
-A layout slot for the body of a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Wraps `<SettingsPage.MainContent>` and optionally `<SettingsPage.AdditionalContent>` to create the two-column layout.
+A layout slot for the body of a [`SettingsPage`](SettingsPage.md). Wraps `<SettingsPage.MainContent>` and optionally `<SettingsPage.AdditionalContent>` to create the two-column layout.
 
 ```tsx
 import { SettingsPage } from '@wix/patterns';
@@ -16,7 +16,7 @@ import { SettingsPage } from '@wix/patterns';
 
 ### Usage
 
-This component acts as a container for [SettingsPage.MainContent](./?path=/story/base-components-pages-settings-page--settingspage-maincontent) and [SettingsPage.AdditionalContent](./?path=/story/base-components-pages-settings-page--settingspage-additionalcontent) components. For examples of how this component is used, please refer to the [SettingsPage](./?path=/story/base-components-pages-settings-page--settingspage&tab=Examples) examples.
+This component acts as a container for [SettingsPage.MainContent](SettingsPage.MainContent.md) and [SettingsPage.AdditionalContent](SettingsPage.AdditionalContent.md) components. For examples of how this component is used, please refer to the [SettingsPage](SettingsPage.md) examples.
 
 ### Props
 

package/dist/docs/SettingsPage.Header.md

@@ -76,7 +76,7 @@ function Basic() {
 
 ### More Actions
 
-This example displays a header with more actions CTA. To learn how to create a more actions menu, see [`MoreActions`](./?path=/story/features-actions-more-actions--more-actions).
+This example displays a header with more actions CTA. To learn how to create a more actions menu, see [`MoreActions`](<More Actions.md>).
 
 ```tsx
 import React from 'react';
@@ -153,7 +153,7 @@ function Basic() {
 
 ### Overview
 
-The header component for a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Renders the page title, optional subtitle, and a more-actions menu. Place it as a direct child of `<SettingsPage>`.
+The header component for a [`SettingsPage`](SettingsPage.md). Renders the page title, optional subtitle, and a more-actions menu. Place it as a direct child of `<SettingsPage>`.
 
 ```tsx
 import { SettingsPage } from '@wix/patterns';

package/dist/docs/SettingsPage.MainContent.md

@@ -8,7 +8,7 @@ Examples below are illustrative: each one demonstrates this page's API, and ever
 
 ### Overview
 
-A slot component for the main content area of a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Place it inside `<SettingsPage.Content>`. This is where you render the primary form fields and cards.
+A slot component for the main content area of a [`SettingsPage`](SettingsPage.md). Place it inside `<SettingsPage.Content>`. This is where you render the primary form fields and cards.
 
 ```tsx
 import { SettingsPage } from '@wix/patterns';
@@ -16,7 +16,7 @@ import { SettingsPage } from '@wix/patterns';
 
 ### Usage
 
-This component acts as a container for [SettingsPage.Card](./?path=/story/base-components-pages-settings-page--settingspage-card) child components and is displayed on the left side of the Page layout. For examples of how this component is used, please refer to the [SettingsPage](./?path=/story/base-components-pages-settings-page--settingspage&tab=Examples) examples.
+This component acts as a container for [SettingsPage.Card](SettingsPage.Card.md) child components and is displayed on the left side of the Page layout. For examples of how this component is used, please refer to the [SettingsPage](SettingsPage.md) examples.
 
 ### Props
 

package/dist/docs/SettingsPage.md

@@ -16,13 +16,13 @@ Here's a breakdown of its main purposes:
 
 1. **Appearance of the Settings Page**: The `SettingsPage` component handles the overall layout and structure of the settings page. It defines how the page is organized, including title and subtitle, more actions dropdown, CTAs, content basic layout and widgets. Also, it is responsible for rendering loading skeletons, error state, displaying notifications and other.
 
-2. **Handling Fetch**: The `SettingsPage` component typically integrates with a fetch mechanism (e.g., an API call) to retrieve data related to the settings being displayed on the page. This integration is done through the `fetch` function passed as a prop to the [`useSettingsPage`](./?path=/story/base-components-pages-settings-page-hooks-usesettingspage--usesettingspage) hook, allowing the component to retrieve the necessary data for rendering. You can use the [`useSettings`](./?path=/story/base-components-pages-settings-page-hooks-usesettings--usesettings)  to access a fetched settings.
+2. **Handling Fetch**: The `SettingsPage` component typically integrates with a fetch mechanism (e.g., an API call) to retrieve data related to the settings being displayed on the page. This integration is done through the `fetch` function passed as a prop to the [`useSettingsPage`](useSettingsPage.md) hook, allowing the component to retrieve the necessary data for rendering. You can use the `useSettings`  to access a fetched settings.
 
-3. **Handling Save and Validation Logic**: The [useForm](https://react-hook-form.com/docs/useform)  hook from [react-hook-form](https://react-hook-form.com/) is used to create a form object, and the `onSave` function passed as a prop to the [`useSettingsPage`](./?path=/story/components-page-settingspage-hooks-usesettingspage--usesettingspage) hook, is triggered when the user initiates a save action.
+3. **Handling Save and Validation Logic**: The [useForm](https://react-hook-form.com/docs/useform)  hook from [react-hook-form](https://react-hook-form.com/) is used to create a form object, and the `onSave` function passed as a prop to the [`useSettingsPage`](useSettingsPage.md) hook, is triggered when the user initiates a save action.
 
-4. **Easy integration with open platform capabilities**: You can create a container in DevCenter and WixPatterns will fetch and present relevant extensions. You can use [`MoreActions`](./?path=/story/features-actions-more-actions--moreactions) to get Menu Item Extensions.
+4. **Easy integration with open platform capabilities**: You can create a container in DevCenter and WixPatterns will fetch and present relevant extensions. You can use [`MoreActions`](<More Actions.md>) to get Menu Item Extensions.
 
-In summary, the ``SettingsPage`` component and the associated [`useSettingsPage`](./?path=/story/base-components-pages-settings-page-hooks-usesettingspage--usesettingspage) hook together provide a streamlined approach to rendering, fetching, saving, and validating data for a specific settings within an application.
+In summary, the ``SettingsPage`` component and the associated [`useSettingsPage`](useSettingsPage.md) hook together provide a streamlined approach to rendering, fetching, saving, and validating data for a specific settings within an application.
 
 
 ## Examples

package/dist/docs/SettingsPageState.md

@@ -8,7 +8,7 @@ Examples below are illustrative: each one demonstrates this page's API, and ever
 
 ### Overview
 
-`SettingsPageState` is the state object that drives a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). It is created by the [`useSettingsPage`](./?path=/story/base-components-pages-settings-page-hooks-usesettingspage--usesettingspage) hook and manages:
+`SettingsPageState` is the state object that drives a [`SettingsPage`](SettingsPage.md). It is created by the [`useSettingsPage`](useSettingsPage.md) hook and manages:
 
 - **Settings fetching** — loads the current settings from the server via `fetch`
 - **Form state** — integrates with `react-hook-form` for editing

package/dist/docs/SingleSelectFilter.md

@@ -14,9 +14,9 @@ Some of that scaffolding is environment-scoped and is **not** needed to use this
 
 Renders a [Dropdown](https://www.docs.wixdesignsystem.com/?path=/story/components-form--dropdown) filter that shows a list of items fetched from a server.
 
-Use [useFilterCollection](./?path=/story/features-filter-hooks--usefiltercollection) to create the collection state object for fetching the list of items.
+Use [useFilterCollection](useFilterCollection.md) to create the collection state object for fetching the list of items.
 
-Use [useStaticListFilterCollection](./?path=/story/features-filter-hooks--usestaticlistfiltercollection) to create the collection state object for a list of static items.
+Use [useStaticListFilterCollection](useStaticListFilterCollection.md) to create the collection state object for a list of static items.
 
 Note that the server should return sections in a strict order.