@wix/patterns 1.459.0 → 1.460.0

package/dist/docs/ToolbarTitle/title-and-count.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  ToolbarTitle,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Total() {
+
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-toolbar-title',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Title" showTotal />}
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/ToolbarTitle/title-count-and-the-collection-s-item-limit.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  ToolbarTitle,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Limit() {
+
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-toolbar-title',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Title" showTotal itemsLimit={2000} />}
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/ToolbarTitle/title-subtitle-and-learn-more.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  ToolbarTitle,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Subtitle() {
+
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-toolbar-title',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            title={
+              <ToolbarTitle
+                title="Title"
+                subtitle={{
+                  text: 'subtitle',
+                  learnMore: { url: 'https://www.wix.com' },
+                }}
+              />
+            }
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/ToolbarTitle/title.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  ToolbarTitle,
+  useTableCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Title() {
+
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-toolbar-title',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Title" />}
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/ToolbarTitle.md

@@ -13,68 +13,7 @@ The card title located on the left hand side of the toolbar to provide visitors
 
 This example uses the `<ToolbarTitle>` `title` prop to display a title in the toolbar.
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  ToolbarTitle,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function Title() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-toolbar-title',
-    paginationMode: 'offset',
-    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {},
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header />
-        <Page.Content>
-          <Table
-            state={state}
-            title={<ToolbarTitle title="Title" />}
-            columns={[
-              {
-                id: 'name',
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-            ]}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/ToolbarTitle/title.tsx`
 
 ---
 
@@ -82,76 +21,7 @@ function Title() {
 
 This example uses the `<ToolbarTitle>` `title` and `subtitle` props to display a title, subtitle, and a redirect link in the toolbar.
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  ToolbarTitle,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function Subtitle() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-toolbar-title',
-    paginationMode: 'offset',
-    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {},
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header />
-        <Page.Content>
-          <Table
-            state={state}
-            title={
-              <ToolbarTitle
-                title="Title"
-                subtitle={{
-                  text: 'subtitle',
-                  learnMore: { url: 'https://www.wix.com' },
-                }}
-              />
-            }
-            columns={[
-              {
-                id: 'name',
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-            ]}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/ToolbarTitle/title-subtitle-and-learn-more.tsx`
 
 ---
 
@@ -159,68 +29,7 @@ function Subtitle() {
 
 This example uses the `<ToolbarTitle>` `title` and `showCount` props to display a title and a count in the toolbar.
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  ToolbarTitle,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function Total() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-toolbar-title',
-    paginationMode: 'offset',
-    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {},
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header />
-        <Page.Content>
-          <Table
-            state={state}
-            title={<ToolbarTitle title="Title" showTotal />}
-            columns={[
-              {
-                id: 'name',
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-            ]}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/ToolbarTitle/title-and-count.tsx`
 
 ---
 
@@ -228,68 +37,7 @@ function Total() {
 
 This example uses the `<ToolbarTitle>` `title`, `showCount`, and `itemsLimit` props to display a title, a count, and the maximum number of items a visitor can add to the collection in the toolbar.
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  ToolbarTitle,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function Limit() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-toolbar-title',
-    paginationMode: 'offset',
-    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
-    fetchData: (query: OffsetQuery) => {
-      const { limit, offset, search, filters } = query;
-
-      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
-
-      if (search) {
-        queryBuilder = queryBuilder.startsWith('info.name.first', search);
-      }
-
-      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
-        items,
-        total,
-      }));
-    },
-    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
-    fetchErrorMessage: () => 'Error fetching contacts',
-    filters: {},
-  });
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header />
-        <Page.Content>
-          <Table
-            state={state}
-            title={<ToolbarTitle title="Title" showTotal itemsLimit={2000} />}
-            columns={[
-              {
-                id: 'name',
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-            ]}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/ToolbarTitle/title-count-and-the-collection-s-item-limit.tsx`
 
 ## API
 

package/dist/docs/Views/basic-view-that-can-be-chosen.tsx

@@ -0,0 +1,142 @@
+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>
+  );
+}