@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/Views.md

@@ -30,656 +30,25 @@ import { Views } from '@wix/patterns';
 
 This example uses the `<Views>` `allItemsViewProps` prop to hide the default "All Items" view from the list of views. "All Items" view will be the default view, and then visitors can apply filters, custom columns, or sorting before saving the current view.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  Views,
-  CollectionToolbarFilters,
-  MultiInlineCheckboxFilter,
-  useTableCollection,
-  OffsetQuery,
-  stringsArrayFilter,
-  Filter,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function ViewsExample() {
-
-  const state = useTableCollection<contacts.Contact, ContactsFilters>({
-    queryName: 'contacts-Views',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {
-      level: stringsArrayFilter(),
-    },
-  });
-
-  const collection = state.collection;
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={collection}
-          columns={[
-            {
-              title: '',
-              width: '50px',
-              render: (contact) => (
-                <Avatar
-                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                  imgProps={{ src: contact.info?.picture?.image }}
-                />
-              ),
-            },
-            {
-              id: 'info.name.first',
-              title: 'Name',
-              width: '250px',
-              sortable: true,
-              render: (contact) =>
-                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-            },
-            {
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-              defaultHidden: true,
-            },
-          ]}
-          filters={
-            <CollectionToolbarFilters
-              inline={0}
-              panelTitle="Filter you contacts"
-              useNewFilters
-            >
-              <MultiInlineCheckboxFilter
-                filter={collection.filters.level}
-                accordionItemProps={{ label: 'Level' }}
-                data={[
-                  'Beginner',
-                  'Amateur',
-                  'Semi-Pro',
-                  'Professional',
-                  'World Class',
-                  'Legendary',
-                  'Ultimate',
-                ]}
-                renderItem={(level, idx) => ({ id: `${idx}`, name: level })}
-              />
-            </CollectionToolbarFilters>
-          }
-          views={
-            <Views
-              allItemsViewProps={{ hidden: true }}
-              presets={[
-                {
-                  id: 'views-example-preset',
-                  name: 'Advanced',
-                  isDefaultView: true,
-                  sortDirections: [
-                    { columnId: 'name', direction: 'Descending' },
-                  ],
-                  filters: {
-                    level: {
-                      value: ['World Class', 'Legendary', 'Ultimate'],
-                    },
-                  },
-                },
-              ]}
-            />
-          }
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Views/basic-view.tsx`
 
 ### Basic View that can be chosen
 
 This example uses the `<Views>` `allItemsViewProps` prop to name the default view that appears in the views dropdown.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Filter,
-  Table,
-  useTableCollection,
-  OffsetQuery,
-  Views,
-  CollectionToolbarFilters,
-  MultiSelectCheckboxFilter,
-  stringsArrayFilter,
-  useStaticListFilterCollection,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function AllItemsView() {
-
-  const state = useTableCollection<contacts.Contact, ContactsFilters>({
-    queryName: 'contacts-AllItemsView',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {
-      level: stringsArrayFilter(),
-    },
-  });
-
-  const collection = state.collection;
-  const levelsCollection = useStaticListFilterCollection(
-    collection.filters.level,
-    [
-      'Beginner',
-      'Amateur',
-      'Semi-Pro',
-      'Professional',
-      'World Class',
-      'Legendary',
-      'Ultimate',
-    ],
-  );
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts', hideTotal: true }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              title: '',
-              width: '50px',
-              render: (contact) => (
-                <Avatar
-                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                  imgProps={{ src: contact.info?.picture?.image }}
-                />
-              ),
-            },
-            {
-              id: 'info.name.first',
-              title: 'Name',
-              width: '250px',
-              sortable: true,
-              render: (contact) =>
-                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-            },
-            {
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-          ]}
-          filters={
-            <CollectionToolbarFilters
-              inline={1}
-              panelTitle="Filter your contacts"
-            >
-              <MultiSelectCheckboxFilter
-                popoverProps={{ appendTo: 'window' }}
-                filter={collection.filters.level}
-                accordionItemProps={{ label: 'Level' }}
-                collection={levelsCollection}
-                renderItem={(level) => ({ title: level })}
-              />
-            </CollectionToolbarFilters>
-          }
-          views={
-            <Views
-              allItemsViewProps={{ name: 'All Items' }}
-              presets={[
-                {
-                  id: 'beginner',
-                  name: 'Beginner',
-                  filters: {
-                    level: {
-                      value: ['Beginner'],
-                    },
-                  },
-                },
-                {
-                  id: 'advanced',
-                  name: 'Advanced',
-                  filters: {
-                    level: {
-                      value: ['World Class', 'Legendary', 'Ultimate'],
-                    },
-                  },
-                },
-              ]}
-            />
-          }
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Views/basic-view-that-can-be-chosen.tsx`
 
 ### View with selected columns
 
 This example uses the `selectedColumns` property in the view object in the `<Views>` `presets` prop to define which columns should be displayed in the table in this view.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  Views,
-  CollectionToolbarFilters,
-  MultiInlineCheckboxFilter,
-  CustomColumns,
-  Filter,
-  OffsetQuery,
-  stringsArrayFilter,
-  useTableCollection,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-};
-
-function ViewsCustomColumnsExample() {
-
-  const state = useTableCollection<contacts.Contact, ContactsFilters>({
-    queryName: 'contacts-ViewsCustomColumns',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {
-      level: stringsArrayFilter(),
-    },
-  });
-
-  const collection = state.collection;
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={collection}
-          columns={[
-            {
-              id: 'avatar',
-              name: 'Avatar',
-              title: '',
-              width: '50px',
-              hideable: false,
-              render: (contact) => (
-                <Avatar
-                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                  imgProps={{ src: contact.info?.picture?.image }}
-                />
-              ),
-            },
-            {
-              id: 'name',
-              title: 'Name',
-              width: '250px',
-              render: (contact) =>
-                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-              defaultHidden: true,
-            },
-          ]}
-          customColumns={<CustomColumns />}
-          filters={
-            <CollectionToolbarFilters
-              inline={0}
-              panelTitle="Filter you contacts"
-              useNewFilters
-            >
-              <MultiInlineCheckboxFilter
-                filter={collection.filters.level}
-                accordionItemProps={{ label: 'Level' }}
-                data={[
-                  'Beginner',
-                  'Amateur',
-                  'Semi-Pro',
-                  'Professional',
-                  'World Class',
-                  'Legendary',
-                  'Ultimate',
-                ]}
-                renderItem={(level, idx) => ({ id: `${idx}`, name: level })}
-              />
-            </CollectionToolbarFilters>
-          }
-          views={
-            <Views
-              allItemsViewProps={{ hidden: true }}
-              presets={[
-                {
-                  id: 'views-custom-columns-example-preset',
-                  name: 'Top',
-                  isDefaultView: true,
-                  selectedColumns: [
-                    { id: 'avatar', isSelected: true },
-                    { id: 'level', isSelected: false },
-                    { id: 'name', isSelected: true },
-                    { id: 'lastSeen', isSelected: false },
-                  ],
-                  filters: {
-                    level: {
-                      value: ['World Class', 'Legendary', 'Ultimate'],
-                    },
-                  },
-                },
-              ]}
-            />
-          }
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Views/view-with-selected-columns.tsx`
 
 ### Views separated by category in the dropdown
 
 This example defines views in different sections in the `<Views>` `presets` prop.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Filter,
-  Table,
-  useTableCollection,
-  OffsetQuery,
-  Views,
-  CollectionToolbarFilters,
-  MultiSelectCheckboxFilter,
-  stringsArrayFilter,
-  useStaticListFilterCollection,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-type ContactsFilters = {
-  level: Filter<string[]>;
-  locale: Filter<string[]>;
-};
-
-function PredefinedCategories() {
-
-  const state = useTableCollection<contacts.Contact, ContactsFilters>({
-    queryName: 'contacts-ViewsPredefinedCategories',
-    fetchData: (query: OffsetQuery<ContactsFilters>) => {
-      const { limit, offset, search, sort, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      if (sort) {
-        for (const sortLevel of sort) {
-          queryBuilder =
-            sortLevel.order === 'asc'
-              ? queryBuilder.ascending(
-                  sortLevel.fieldName as 'info.name.first' | 'info.jobTitle',
-                )
-              : queryBuilder.descending(
-                  sortLevel.fieldName as 'info.name.first' | 'info.jobTitle',
-                );
-        }
-      }
-
-      if (filters.level) {
-        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
-      }
-
-      if (filters.locale) {
-        queryBuilder = queryBuilder.in('info.locale', filters.locale);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {
-      level: stringsArrayFilter(),
-      locale: stringsArrayFilter(),
-    },
-  });
-  const collection = state.collection;
-  const levelsCollection = useStaticListFilterCollection(
-    collection.filters.level,
-    [
-      'Beginner',
-      'Amateur',
-      'Semi-Pro',
-      'Professional',
-      'World Class',
-      'Legendary',
-      'Ultimate',
-    ],
-  );
-
-  const localeCollection = useStaticListFilterCollection(
-    collection.filters.locale,
-    ['en-US', 'he-IL', 'fr-FR', 'es-ES', 'de-DE'],
-  );
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          columns={[
-            {
-              title: '',
-              width: '50px',
-              render: (contact) => (
-                <Avatar
-                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
-                  imgProps={{ src: contact.info?.picture?.image }}
-                />
-              ),
-            },
-            {
-              id: 'info.name.first',
-              title: 'Name',
-              width: '250px',
-              sortable: true,
-              render: (contact) =>
-                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-            },
-            {
-              id: 'level',
-              title: 'Level',
-              render: (contact) => contact.info?.jobTitle,
-            },
-            {
-              id: 'lastActivity',
-              title: 'Last Activity',
-              render: (contact) =>
-                contact.lastActivity?.activityDate?.toLocaleString(),
-            },
-            {
-              id: 'locale',
-              title: 'Locale',
-              render: (contact) => contact.info?.locale,
-            },
-          ]}
-          filters={
-            <CollectionToolbarFilters
-              useNewFilters
-              panelTitle="Filter your contacts"
-            >
-              <MultiSelectCheckboxFilter
-                popoverProps={{ appendTo: 'window' }}
-                accordionItemProps={{ label: 'Level' }}
-                filter={collection.filters.level}
-                collection={levelsCollection}
-                renderItem={(level) => ({ title: level })}
-              />
-
-              <MultiSelectCheckboxFilter
-                popoverProps={{ appendTo: 'window' }}
-                accordionItemProps={{ label: 'Locale' }}
-                filter={collection.filters.locale}
-                collection={localeCollection}
-                renderItem={(locale) => ({ title: locale })}
-              />
-            </CollectionToolbarFilters>
-          }
-          views={
-            <Views
-              presets={[
-                {
-                  id: 'contacts-level',
-                  name: 'Contacts level',
-                  views: [
-                    {
-                      id: 'beginner',
-                      name: 'Beginner',
-                      filters: {
-                        level: {
-                          value: ['Beginner'],
-                        },
-                      },
-                    },
-                    {
-                      id: 'advanced',
-                      name: 'Advanced',
-                      filters: {
-                        level: {
-                          value: ['World Class', 'Legendary', 'Ultimate'],
-                        },
-                      },
-                    },
-                  ],
-                },
-                {
-                  id: 'locale',
-                  name: 'Locale',
-                  views: [
-                    {
-                      id: 'en-US',
-                      name: 'en-US',
-                      filters: {
-                        locale: {
-                          value: ['en-US'],
-                        },
-                      },
-                    },
-                    {
-                      id: 'he-IL',
-                      name: 'he-IL',
-                      filters: {
-                        locale: {
-                          value: ['he-IL'],
-                        },
-                      },
-                    },
-                  ],
-                },
-              ]}
-            />
-          }
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/Views/views-separated-by-category-in-the-dropdown.tsx`
 
 ## API
 

package/dist/docs/WidgetsFormProvider.md

@@ -63,3 +63,12 @@ export const MyEntityPage = () => {
 ```
 
 
+### Props
+
+Read `dist/dts-bundle/components/WidgetsFormProvider.d.ts` for `WidgetsFormProvider`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
+

package/dist/docs/WixPatternsBMProvider.md

@@ -29,3 +29,12 @@ export default () => {
 };
 ```
 
+### Props
+
+Read `dist/dts-bundle/components/WixPatternsBMProvider.d.ts` for `WixPatternsBMProvider`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
+

package/dist/docs/WixPatternsBaseProvider.md

@@ -81,7 +81,10 @@ function App() {
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `value` | `WixPatternsMinimalEssentials` | Yes | - | Minimal essentials that are required for wix-patterns to work (i.e i18n,bi,experiments) |
+Read `dist/dts-bundle/components/WixPatternsBaseProvider.d.ts` for `WixPatternsBaseProvider`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.