@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/ToolbarFilters/custom-label-for-tags.tsx

@@ -0,0 +1,167 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { Edit } from '@wix/wix-ui-icons-common';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionToolbarFilters,
+  dateRangeFilter,
+  DateRangeFilter,
+  idNameArrayFilter,
+  MultiAutoInlineCheckboxFilter,
+  MultiSelectCheckboxFilter,
+  stringsArrayFilter,
+  Table,
+  useTableCollection,
+  useStaticListFilterCollection,
+  Filter,
+  RangeItem,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+  lastActivity: Filter<RangeItem<Date>>;
+  locale: Filter<{ id: string; name: string }[]>;
+};
+
+function TagWithCustomLabel() {
+
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'contacts-TagWithCustomLabel',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    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);
+      }
+
+      if (filters.lastActivity) {
+        queryBuilder = queryBuilder
+          .gt('lastActivity.activityDate', filters.lastActivity.from)
+          .lt('lastActivity.activityDate', filters.lastActivity.to);
+      }
+
+      if (filters.locale) {
+        queryBuilder = queryBuilder.in(
+          'info.locale',
+          filters.locale.map(({ id }) => id),
+        );
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    filters: {
+      level: stringsArrayFilter(),
+      lastActivity: dateRangeFilter(),
+      locale: idNameArrayFilter(),
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+  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' }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          filters={
+            <CollectionToolbarFilters inline={0}>
+              <MultiSelectCheckboxFilter
+                accordionItemProps={{ label: 'Level' }}
+                popoverProps={{ appendTo: 'window' }}
+                filter={collection.filters.level}
+                collection={levelsCollection}
+                renderItem={(level) => ({ title: level })}
+                toolbarTagProps={{ label: 'The levels are' }}
+              />
+              <MultiAutoInlineCheckboxFilter
+                filter={collection.filters.locale}
+                accordionItemProps={{ label: 'Locale' }}
+                data={[
+                  { id: 'en-US', name: 'en-US' },
+                  { id: 'he-IL', name: 'he-IL' },
+                  { id: 'fr-FR', name: 'fr-FR' },
+                  { id: 'es-ES', name: 'es-ES' },
+                  { id: 'de-DE', name: 'de-DE' },
+                ]}
+                toolbarTagProps={{ label: 'Custom Locale label' }}
+              />
+
+              <DateRangeFilter
+                filter={collection.filters.lastActivity}
+                accordionItemProps={{ label: 'Last Activity' }}
+              />
+            </CollectionToolbarFilters>
+          }
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              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(),
+            },
+            {
+              title: 'Locale',
+              render: (contact) => contact.info?.locale,
+            },
+          ]}
+          actionCell={(contact, index) => ({
+            secondaryActions: [
+              {
+                icon: <Edit />,
+                text: 'Edit',
+                disabled:
+                  index % 5 === 0 || contact.info?.name?.first?.startsWith('A'),
+                onClick: () => {},
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/ToolbarFilters/customize-filter-display-tags.tsx

@@ -0,0 +1,163 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { Edit } from '@wix/wix-ui-icons-common';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionToolbarFilters,
+  idNameArrayFilter,
+  Table,
+  MultiSelectCheckboxFilter,
+  SingleSelectFilter,
+  stringsArrayFilter,
+  useTableCollection,
+  Filter,
+  useStaticListFilterCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+type ContactFilters = {
+  locale: Filter<{ id: string; name: string }[]>;
+  level: Filter<string[]>;
+};
+
+function CustomizeSelectedTagsContent() {
+
+  const state = useTableCollection<contacts.Contact, ContactFilters>({
+    queryName: 'CustomizeSelectedTagsContent',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery<ContactFilters>) => {
+      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);
+      }
+
+      if (filters.locale) {
+        queryBuilder = queryBuilder.in(
+          'info.locale',
+          filters.locale.map(({ id }) => id),
+        );
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    filters: {
+      level: stringsArrayFilter({ itemName: (item) => `Level: ${item}` }),
+      locale: idNameArrayFilter({
+        itemName: (item) => `Locale: ${item.name}`,
+      }),
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+  const collection = state.collection;
+  const localeCollection = useStaticListFilterCollection(
+    collection.filters.locale,
+    [
+      { id: 'en-US', name: 'en-US' },
+      { id: 'he-IL', name: 'he-IL' },
+      { id: 'fr-FR', name: 'fr-FR' },
+      { id: 'es-ES', name: 'es-ES' },
+      { id: 'de-DE', name: 'de-DE' },
+    ],
+  );
+
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ],
+  );
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          filters={
+            <CollectionToolbarFilters useNewFilters>
+              <MultiSelectCheckboxFilter
+                accordionItemProps={{ label: 'Level' }}
+                popoverProps={{ appendTo: 'window' }}
+                filter={collection.filters.level!}
+                collection={levelsCollection}
+                renderItem={(level) => ({ title: level })}
+                renderToolbarTag={(item) => ({
+                  children: `Title: ${item}`,
+                })}
+              />
+              <SingleSelectFilter
+                filter={collection.filters.locale}
+                placeholder="Select Locale"
+                accordionItemProps={{ label: 'Locale Single' }}
+                renderItem={(item) => ({ title: item.name })}
+                collection={localeCollection}
+                renderToolbarTag={(item) => ({
+                  children: `The locale is: ${item.name}`,
+                })}
+              />
+            </CollectionToolbarFilters>
+          }
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Locale',
+              render: (contact) => contact.info?.locale,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          actionCell={(contact, index) => ({
+            secondaryActions: [
+              {
+                icon: <Edit />,
+                text: 'Edit',
+                disabled:
+                  index % 5 === 0 || contact.info?.name?.first?.startsWith('A'),
+                onClick: () => {},
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/ToolbarFilters/mini-toolbar-with-filters.tsx

@@ -0,0 +1,121 @@
+import { Avatar, Box } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionEmptyState,
+  CollectionToolbarFilters,
+  Filter,
+  OffsetQuery,
+  SingleSelectFilter,
+  stringsArrayFilter,
+  Table,
+  useTableCollection,
+  useOptimisticActions,
+  useStaticListFilterCollection,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function MinifiedToolbarSearchAndFilters() {
+
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'MinifiedToolbarScroll',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    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,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    limit: 50,
+    filters: {
+      level: stringsArrayFilter(),
+    },
+  });
+  const collection = state.collection;
+  useOptimisticActions(collection);
+
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+      'Ye',
+    ],
+  );
+
+  return (
+    <CollectionPage height="622px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Box direction="vertical" width="390px" height="482px">
+          <Table
+            state={collection}
+            internalScroll
+            filters={
+              <CollectionToolbarFilters inline={0}>
+                <SingleSelectFilter
+                  accordionItemProps={{
+                    label: 'Contact Level',
+                  }}
+                  border="round"
+                  filter={collection.filters.level}
+                  collection={levelsCollection}
+                />
+              </CollectionToolbarFilters>
+            }
+            columns={[
+              {
+                id: 'avatar',
+                title: '',
+                hideable: true,
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                    imgProps={{ src: contact.info?.picture?.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+            actionCell={() => {
+              return {
+                primaryAction: {
+                  text: 'Edit',
+                  onClick: () => {},
+                },
+              };
+            }}
+            emptyState={<CollectionEmptyState />}
+          />
+        </Box>
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/ToolbarFilters/mini-toolbar.tsx

@@ -0,0 +1,80 @@
+import { Avatar, Box } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionEmptyState,
+  Table,
+  OffsetQuery,
+  useOptimisticActions,
+  useTableCollection,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function MinifiedToolbarScroll() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'MinifiedToolbarScroll',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    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,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    limit: 50,
+    filters: {},
+  });
+  const collection = state.collection;
+  useOptimisticActions(collection);
+
+  return (
+    <CollectionPage height="622px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Box direction="vertical" width="390px" height="482px">
+          <Table
+            state={collection}
+            horizontalScroll
+            internalScroll
+            columns={[
+              {
+                id: 'avatar',
+                title: '',
+                hideable: true,
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                    imgProps={{ src: contact.info?.picture?.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+            actionCell={() => {
+              return {
+                primaryAction: {
+                  text: 'Edit',
+                  onClick: () => {},
+                },
+              };
+            }}
+            emptyState={<CollectionEmptyState />}
+          />
+        </Box>
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/ToolbarFilters/more-than-2-filters.tsx

@@ -0,0 +1,164 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { Edit } from '@wix/wix-ui-icons-common';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionToolbarFilters,
+  dateRangeFilter,
+  DateRangeFilter,
+  idNameArrayFilter,
+  MultiAutoInlineCheckboxFilter,
+  MultiSelectCheckboxFilter,
+  stringsArrayFilter,
+  Table,
+  useTableCollection,
+  useStaticListFilterCollection,
+  Filter,
+  RangeItem,
+  OffsetQuery,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+  lastActivity: Filter<RangeItem<Date>>;
+  locale: Filter<{ id: string; name: string }[]>;
+};
+
+function MoreThan2Filters() {
+
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'contacts-Basic',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    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);
+      }
+
+      if (filters.lastActivity) {
+        queryBuilder = queryBuilder
+          .gt('lastActivity.activityDate', filters.lastActivity.from)
+          .lt('lastActivity.activityDate', filters.lastActivity.to);
+      }
+
+      if (filters.locale) {
+        queryBuilder = queryBuilder.in(
+          'info.locale',
+          filters.locale.map(({ id }) => id),
+        );
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    filters: {
+      level: stringsArrayFilter(),
+      lastActivity: dateRangeFilter(),
+      locale: idNameArrayFilter(),
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+  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' }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          filters={
+            <CollectionToolbarFilters inline={0}>
+              <MultiSelectCheckboxFilter
+                accordionItemProps={{ label: 'Level' }}
+                popoverProps={{ appendTo: 'window' }}
+                filter={collection.filters.level}
+                collection={levelsCollection}
+                renderItem={(level) => ({ title: level })}
+              />
+              <MultiAutoInlineCheckboxFilter
+                filter={collection.filters.locale}
+                accordionItemProps={{ label: 'Locale' }}
+                data={[
+                  { id: 'en-US', name: 'en-US' },
+                  { id: 'he-IL', name: 'he-IL' },
+                  { id: 'fr-FR', name: 'fr-FR' },
+                  { id: 'es-ES', name: 'es-ES' },
+                  { id: 'de-DE', name: 'de-DE' },
+                ]}
+              />
+              <DateRangeFilter
+                filter={collection.filters.lastActivity}
+                accordionItemProps={{ label: 'Last Activity' }}
+              />
+            </CollectionToolbarFilters>
+          }
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              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(),
+            },
+            {
+              title: 'Locale',
+              render: (contact) => contact.info?.locale,
+            },
+          ]}
+          actionCell={(contact, index) => ({
+            secondaryActions: [
+              {
+                icon: <Edit />,
+                text: 'Edit',
+                disabled:
+                  index % 5 === 0 || contact.info?.name?.first?.startsWith('A'),
+                onClick: () => {},
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}