@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/NestedTable.md

@@ -223,536 +223,25 @@ useNestedTable({
 
 All levels are of the same entity type / query endpoint
 
-```tsx
-import { Page } from '@wix/design-system';
-import React from 'react';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import {
-  PageWrapper,
-  NestedTable,
-  useNestedTable,
-  createNestedTableSingleEntityLevels,
-  useCreateCollection,
-  Filter,
-  stringsArrayFilter,
-} from '@wix/patterns';
-import { CollectionPage } from '@wix/patterns/page';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-
-type ContactFilters = {
-  parentId: Filter<string[]>;
-};
-
-function SingleEntityNestedTable() {
-  const httpClient = useHttpClient();
-
-  const createCollection = useCreateCollection();
-
-  const state = useNestedTable({
-    columns: [
-      {
-        id: 'lastSeen',
-        title: 'Last Seen',
-      },
-    ],
-    levels: createNestedTableSingleEntityLevels(5, {
-      createCollection: () => {
-        const collection = createCollection<Contact, ContactFilters>({
-          queryName: 'SingleEntityNestedTable-contacts',
-          filters: {
-            parentId: stringsArrayFilter(),
-          },
-          fetchData: (query) => {
-            const { limit, offset, search, filters } = query;
-            return httpClient
-              .request(
-                queryContacts({
-                  query: { paging: { limit, offset }, filter: filters },
-                  search,
-                }),
-              )
-              .then((res) => {
-                const {
-                  data: { contacts = [], pagingMetadata = {} },
-                } = res;
-                return {
-                  items: contacts,
-                  total: pagingMetadata.total,
-                };
-              });
-          },
-          fetchErrorMessage: ({ err }) => String(err),
-        });
-
-        return {
-          collection,
-          parentFilter: collection.filters.parentId,
-        };
-      },
-      parentKey: (item) => item.parentId,
-      columns: {
-        lastSeen: (item) => String(item.lastSeen),
-      },
-      renderMainColumn: (item) => ({
-        subtitle: item.level,
-      }),
-    }),
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <NestedTable state={state} />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/NestedTable/single-entity.tsx`
 
 ### Various Entities
 
 Each level is of a different entity type / query endpoint
 
-```tsx
-import { Page } from '@wix/design-system';
-import React from 'react';
-import {
-  queryContacts,
-  deleteContact,
-} from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import {
-  PageWrapper,
-  NestedTable,
-  useNestedTable,
-  createNestedTableLevel,
-  useCreateCollection,
-  Filter,
-  stringsArrayFilter,
-} from '@wix/patterns';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-import { Delete } from '@wix/wix-ui-icons-common';
-import { CollectionPage } from '@wix/patterns/page';
-
-type ContactFilters = {
-  level: Filter<string[]>;
-};
-
-function VariousEntitiesNestedTable() {
-  const httpClient = useHttpClient.call(300);
-
-  const createCollection = useCreateCollection();
-
-  const state = useNestedTable({
-    columns: [
-      {
-        id: 'lastSeen',
-        title: 'Last Seen',
-      },
-    ],
-    levels: [
-      createNestedTableLevel({
-        createCollection: () => {
-          const collection = createCollection<{ id: string; name: string }, {}>(
-            {
-              queryName: 'VariousEntitiesNestedTable-levels',
-              fetchData: (query) =>
-                Promise.resolve({
-                  items: [
-                    { id: 'Beginner', name: 'Beginner' },
-                    { id: 'Amateur', name: 'Amateur' },
-                    { id: 'Semi-Pro', name: 'Semi-Pro' },
-                    { id: 'Professional', name: 'Professional' },
-                    { id: 'World Class', name: 'World Class' },
-                    { id: 'Legendary', name: 'Legendary' },
-                    { id: 'Ultimate', name: 'Ultimate' },
-                  ],
-                }),
-              fetchErrorMessage: ({ err }) => String(err),
-            },
-          );
-
-          return {
-            collection,
-          };
-        },
-        parentKey: () => undefined,
-      }),
-      createNestedTableLevel({
-        createCollection: (params) => {
-          const collection = createCollection<Contact, ContactFilters>({
-            queryName: 'VariousEntitiesNestedTable-contacts',
-            filters: {
-              level: stringsArrayFilter(),
-            },
-            fetchData: (query) => {
-              const { limit, offset, search, filters } = query;
-              return httpClient
-                .request(
-                  queryContacts({
-                    query: { paging: { limit, offset }, filter: filters },
-                    search,
-                  }),
-                )
-                .then((res) => {
-                  const {
-                    data: { contacts = [], pagingMetadata = {} },
-                  } = res;
-                  return {
-                    items: contacts,
-                    total: pagingMetadata.total,
-                  };
-                });
-            },
-            fetchErrorMessage: ({ err }) => String(err),
-          });
-
-          return {
-            collection,
-            parentFilter: collection.filters.level,
-          };
-        },
-        parentKey: (item) => item.level,
-        columns: {
-          lastSeen: (item) => String(item.lastSeen),
-        },
-        actionCell: (item, _rowNum, api) => ({
-          secondaryActions: [
-            {
-              icon: <Delete />,
-              text: 'Delete',
-              onClick: () => {
-                api.collection._optimisticActions?.deleteOne(item, {
-                  submit: (contacts) =>
-                    Promise.all(
-                      contacts.map((contact) =>
-                        deleteContact({
-                          contactId: contact.id as string,
-                        }),
-                      ),
-                    ),
-                });
-              },
-            },
-          ],
-        }),
-        renderMainColumn: (item) => ({
-          subtitle: item.level,
-        }),
-      }),
-    ],
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-      <CollectionPage.Content>
-        <NestedTable state={state} />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/NestedTable/various-entities.tsx`
 
 ### Flat Mode (Search)
 
 Table is in flat mode when search is active. Items are not grouped by level. Items shown with breadcrumbs when provided in the level config. `fetchData` will be called with `query.fields` that contains the value `breadcrumbs` to signal that the breadcrumbs should be fetched.
 
-```tsx
-import { Page } from '@wix/design-system';
-import React from 'react';
-import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import {
-  PageWrapper,
-  NestedTable,
-  useNestedTable,
-  createNestedTableSingleEntityLevels,
-  useCreateCollection,
-  Filter,
-  stringsArrayFilter,
-} from '@wix/patterns';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-
-type ContactFilters = {
-  parentId: Filter<string[]>;
-};
-
-function SingleEntityNestedTable() {
-  const httpClient = useHttpClient();
-
-  const createCollection = useCreateCollection();
-
-  const state = useNestedTable({
-    columns: [
-      {
-        id: 'lastSeen',
-        title: 'Last Seen',
-      },
-    ],
-    levels: createNestedTableSingleEntityLevels(5, {
-      createCollection: () => {
-        const collection = createCollection<Contact, ContactFilters>({
-          queryName: 'SingleEntityNestedTableFlatMode',
-          filters: {
-            parentId: stringsArrayFilter(),
-          },
-          fetchData: (query) => {
-            const { limit, offset, search, filters } = query;
-            return httpClient
-              .request(
-                queryContacts({
-                  query: { paging: { limit, offset }, filter: filters },
-                  search,
-                }),
-              )
-              .then((res) => {
-                const {
-                  data: { contacts = [], pagingMetadata = {} },
-                } = res;
-                return {
-                  items: contacts,
-                  total: pagingMetadata.total,
-                };
-              });
-          },
-          fetchErrorMessage: ({ err }) => String(err),
-        });
-
-        return {
-          collection,
-          parentFilter: collection.filters.parentId,
-        };
-      },
-      parentKey: (item) => item.parentId,
-      breadcrumbs: (item) => item.breadcrumbs,
-      columns: {
-        lastSeen: (item) => String(item.lastSeen),
-      },
-      renderMainColumn: (item) => ({
-        subtitle: item.level,
-      }),
-    }),
-  });
-
-  React.useState(() => {
-    state.query.search.setValue('que');
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header title="Contacts" />
-
-        <Page.Content>
-          <NestedTable state={state} />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/NestedTable/flat-mode-search.tsx`
 
 ### Filters
 
 A client-side example of using filters on nested table (ignore the fetchData implementation that should be use a real API on a real project)
 
-```tsx
-import { Page } from '@wix/design-system';
-import React from 'react';
-import { contacts } from '@wix/crm';
-import { subDays } from 'date-fns';
-import {
-  PageWrapper,
-  NestedTable,
-  useNestedTable,
-  createNestedTableLevel,
-  useCreateCollection,
-  Filter,
-  stringsArrayFilter,
-  CollectionToolbarFilters,
-  idNameArrayFilter,
-  SingleSelectFilter,
-  useStaticListFilterCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-
-interface Duration {
-  id: string;
-  name: string;
-  days: number | null;
-}
-
-type NestedTableFilters = {
-  level?: Filter<string[]>;
-  lastActivity?: Filter<Duration[]>;
-};
-
-type Category = {
-  id: string;
-  name: string;
-};
-
-function VariousEntitiesNestedTable() {
-  const ALL_CATEGORIES = [
-    { id: 'Beginner', name: 'Beginner' },
-    { id: 'Amateur', name: 'Amateur' },
-    { id: 'Semi-Pro', name: 'Semi-Pro' },
-    { id: 'Professional', name: 'Professional' },
-    { id: 'World Class', name: 'World Class' },
-    { id: 'Legendary', name: 'Legendary' },
-    { id: 'Ultimate', name: 'Ultimate' },
-  ];
-
-  const buildQuery = (query: OffsetQuery<NestedTableFilters>) => {
-    const { filters, search, limit, offset } = 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);
-    }
-
-    const lastActivityDays = filters.lastActivity?.[0]?.days;
-    if (lastActivityDays) {
-      queryBuilder = queryBuilder.gt(
-        'lastActivity.activityDate',
-        subDays(new window.Date(), lastActivityDays),
-      );
-    }
-
-    return queryBuilder;
-  };
-
-  const createCollection = useCreateCollection();
-
-  const [filters] = React.useState(() => ({
-    lastActivity: idNameArrayFilter<Duration>(),
-  }));
-
-  const state = useNestedTable({
-    filters,
-    fetchAllLimit: 100,
-    columns: [
-      {
-        id: 'lastActivity',
-        title: 'Last Activity',
-      },
-    ],
-    levels: [
-      createNestedTableLevel({
-        createCollection: () => {
-          const collection = createCollection<Category, NestedTableFilters>({
-            filters,
-            queryName: 'VariousEntitiesNestedTable-levels',
-            fetchData: async (query) => {
-              if (!query.filters.lastActivity) {
-                return {
-                  items: ALL_CATEGORIES,
-                };
-              }
-
-              // The following code should be done on the server on a real application
-              const queryBuilder = buildQuery(query);
-              const contactsResponse = await queryBuilder.find();
-              const fetchedContacts = contactsResponse.items;
-
-              return Promise.resolve({
-                items: ALL_CATEGORIES.filter((category) =>
-                  fetchedContacts.some(
-                    (contact) => contact.info?.jobTitle === category.id,
-                  ),
-                ),
-              });
-            },
-
-            fetchErrorMessage: ({ err }) => String(err),
-          });
-
-          return {
-            collection,
-          };
-        },
-        parentKey: () => undefined,
-      }),
-      createNestedTableLevel({
-        createCollection: (params) => {
-          const collection = createCollection<
-            contacts.Contact,
-            NestedTableFilters
-          >({
-            queryName: 'VariousEntitiesNestedTable-contacts',
-            filters: {
-              ...filters,
-              level: stringsArrayFilter(),
-            },
-            itemKey: (item) => item._id as string,
-            itemName: (item) => item.info?.name as string,
-            fetchData: async (query) => {
-              const queryBuilder = buildQuery(query);
-              const contactsResponse = await queryBuilder.find();
-              const fetchedContacts = contactsResponse.items;
-              return { items: fetchedContacts };
-            },
-            fetchErrorMessage: ({ err }) => String(err),
-          });
-
-          return {
-            collection,
-            parentFilter: collection.filters.level,
-          };
-        },
-        parentKey: (item) => item.info?.jobTitle,
-        columns: {
-          lastActivity: (item) =>
-            item.lastActivity?.activityDate?.toLocaleString(),
-        },
-        renderMainColumn: (item) => ({
-          title: `${item.info?.name?.first} ${item.info?.name?.last}`,
-        }),
-      }),
-    ],
-  });
-
-  const lastActivityCollection = useStaticListFilterCollection(
-    filters.lastActivity,
-    [
-      { id: 'w', name: 'Week', days: 7 },
-      { id: 'm', name: 'Month', days: 30 },
-      { id: 'y', name: 'Year', days: 365 },
-      { id: 'o', name: 'Other', days: null },
-    ],
-  );
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header title="Contacts" />
-        <Page.Content>
-          <NestedTable
-            state={state}
-            filters={
-              <CollectionToolbarFilters>
-                <SingleSelectFilter
-                  filter={filters.lastActivity}
-                  placeholder="Select Last Activity"
-                  accordionItemProps={{ label: 'Last Activity' }}
-                  collection={lastActivityCollection}
-                />
-              </CollectionToolbarFilters>
-            }
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/NestedTable/filters.tsx`
 
 ---
 
@@ -762,308 +251,11 @@ function VariousEntitiesNestedTable() {
 
 Accessing node by id and all its descendants
 
-```tsx
-import { Page, ToggleSwitch } from '@wix/design-system';
-import React from 'react';
-import {
-  queryContacts,
-  bulkUpdateContacts,
-  updateContact,
-  deleteContact,
-} from '@wix/ambassador-contacts-v4-contact/http';
-import {
-  Contact,
-  SubscriptionStatus,
-} from '@wix/ambassador-contacts-v4-contact/types';
-import {
-  PageWrapper,
-  NestedTable,
-  useNestedTable,
-  createNestedTableSingleEntityLevels,
-  useCreateCollection,
-  Filter,
-  stringsArrayFilter,
-} from '@wix/patterns';
-import { CollectionPage } from '@wix/patterns/page';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-import { Delete } from '@wix/wix-ui-icons-common';
-
-type ContactFilters = {
-  parentId: Filter<string[]>;
-};
-
-type ContactColumns = 'subscriptionStatus' | 'email';
-
-function AccessNodeDescendants() {
-  const httpClient = useHttpClient();
-
-  const createCollection = useCreateCollection();
-
-  const state = useNestedTable<ContactColumns>({
-    columns: [
-      {
-        id: 'subscriptionStatus',
-        title: 'Subscription Status',
-        align: 'center',
-      },
-      {
-        id: 'email',
-        title: 'Email',
-      },
-    ],
-    levels: createNestedTableSingleEntityLevels<
-      ContactColumns,
-      Contact,
-      ContactFilters
-    >(5, {
-      createCollection: (params) => {
-        const collection = createCollection<Contact, ContactFilters>({
-          queryName: 'AccessNodeDescendants',
-          filters: {
-            parentId: stringsArrayFilter(),
-          },
-          fetchData: (query) => {
-            const { limit, offset, search, filters } = query;
-            return httpClient
-              .request(
-                queryContacts({
-                  query: { paging: { limit, offset }, filter: filters },
-                  search,
-                }),
-              )
-              .then((res) => {
-                const {
-                  data: { contacts = [], pagingMetadata = {} },
-                } = res;
-                return {
-                  items: contacts,
-                  total: pagingMetadata.total,
-                };
-              });
-          },
-          fetchErrorMessage: ({ err }) => String(err),
-        });
-
-        return {
-          collection,
-          parentFilter: collection.filters.parentId,
-        };
-      },
-      parentKey: (item) => item.parentId,
-      actionCell: (item, _rowNum, api) => ({
-        secondaryActions: [
-          {
-            icon: <Delete />,
-            text: 'Delete',
-            onClick: () => {
-              const node = state.getNode<Contact, ContactFilters>(
-                item.id as string,
-              );
-              node
-                ?.getParent<Contact, ContactFilters>()
-                ?.optimisticActions?.deleteOne(item, {
-                  submit: (contacts) =>
-                    Promise.all(
-                      contacts.map((contact) =>
-                        deleteContact({
-                          contactId: contact.id as string,
-                        }),
-                      ),
-                    ),
-                });
-            },
-          },
-        ],
-      }),
-      columns: {
-        email: (item) => item.primaryEmail?.email as string,
-        subscriptionStatus: (item) => (
-          <div
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-          >
-            <ToggleSwitch
-              onChange={(e) => {
-                const node = state.getNode<Contact, ContactFilters>(
-                  item.id as string,
-                );
-
-                const primaryEmail = {
-                  subscriptionStatus: e.target.checked
-                    ? ('SUBSCRIBED' as SubscriptionStatus)
-                    : ('UNSUBSCRIBED' as SubscriptionStatus),
-                };
-
-                node?.getParent()?.optimisticActions?.updateOne(
-                  item,
-                  {
-                    propagate: true,
-                    patch: {
-                      primaryEmail,
-                    },
-                    keepPosition: true,
-                    submit: async () => {
-                      await httpClient.request(
-                        updateContact({
-                          ...item,
-                          contactId: item.id as string,
-                          revision: item.revision ? item.revision + 1 : 1,
-                          info: {
-                            ...item.info,
-                            primaryEmail,
-                          } as {},
-                        }),
-                      );
-                      await httpClient.request(
-                        bulkUpdateContacts({
-                          filter: {
-                            ancestorId: [item.id],
-                          },
-                          info: {
-                            primaryEmail,
-                          } as {},
-                        }),
-                      );
-                    },
-                  },
-                );
-              }}
-              checked={item.primaryEmail?.subscriptionStatus === 'SUBSCRIBED'}
-            />
-          </div>
-        ),
-      },
-
-      renderMainColumn: (item) => ({
-        subtitle: item.level,
-      }),
-    }),
-  });
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Contacts' }} />
-
-      <CollectionPage.Content>
-        <NestedTable state={state} />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/NestedTable/node-api-usage.tsx`
 
 ### Drag and Drop
 
-```tsx
-import { Page } from '@wix/design-system';
-import React from 'react';
-import {
-  queryContacts,
-  moveContact,
-} from '@wix/ambassador-contacts-v4-contact/http';
-import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
-import {
-  PageWrapper,
-  NestedTable,
-  useNestedTable,
-  createNestedTableSingleEntityLevels,
-  useCreateCollection,
-  Filter,
-  stringsArrayFilter,
-  NestedTableDragAndDrop,
-} from '@wix/patterns';
-import { useHttpClient } from '@wix/yoshi-flow-bm';
-
-type ContactFilters = {
-  parentId: Filter<string[]>;
-};
-
-function SingleEntityNestedTableDragAndDrop() {
-  const httpClient = useHttpClient();
-
-  const createCollection = useCreateCollection();
-
-  const state = useNestedTable({
-    columns: [
-      {
-        id: 'lastSeen',
-        title: 'Last Seen',
-      },
-    ],
-    levels: createNestedTableSingleEntityLevels<
-      string,
-      Contact,
-      ContactFilters
-    >(5, {
-      createCollection: (params) => {
-        const collection = createCollection<Contact, ContactFilters>({
-          queryName: 'SingleEntityNestedTableDragAndDrop',
-          filters: {
-            parentId: stringsArrayFilter(),
-          },
-          fetchData: (query) => {
-            const { limit, offset, search, filters } = query;
-            return httpClient
-              .request(
-                queryContacts({
-                  query: { paging: { limit, offset }, filter: filters },
-                  search,
-                }),
-              )
-              .then((res) => {
-                const {
-                  data: { contacts = [], pagingMetadata = {} },
-                } = res;
-                return {
-                  items: contacts,
-                  total: pagingMetadata.total,
-                };
-              });
-          },
-          fetchErrorMessage: ({ err }) => String(err),
-        });
-
-        return {
-          collection,
-          parentFilter: collection.filters.parentId,
-        };
-      },
-      parentKey: (item) => item.parentId,
-      setParent: (item, parentId) => ({ ...item, parentId }),
-      dragAndDropSubmit: async (event) => {
-        await httpClient.request(
-          moveContact({
-            contactId: event.from.item.id,
-            insertAfterId: event.after
-              ? (event.after.item as Contact).id
-              : null,
-            parentId: event.parentId,
-          }),
-        );
-      },
-      columns: {
-        lastSeen: (item) => String(item.lastSeen?.toISOString()),
-      },
-      renderMainColumn: (item) => ({
-        subtitle: item.level,
-      }),
-    }),
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header title="Contacts" />
-
-        <Page.Content>
-          <NestedTable state={state} dragAndDrop={NestedTableDragAndDrop} />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/NestedTable/drag-and-drop.tsx`
 
 ## API