@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/Table/filters.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionToolbarFilters,
+  idNameArrayFilter,
+  Table,
+  MultiSelectCheckboxFilter,
+  SingleSelectFilter,
+  stringsArrayFilter,
+  useCollection,
+  Filter,
+  useStaticListFilterCollection,
+  useTableCollection,
+} from '@wix/patterns';
+import { Avatar } from '@wix/design-system';
+import { contacts } from '@wix/crm';
+import { subDays } from 'date-fns';
+
+interface Duration {
+  id: string;
+  name: string;
+  days: number | null;
+}
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+  lastSeen: Filter<Duration[]>;
+};
+
+function ToolbarFiltersTable() {
+  const tableState = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'contacts-ToolbarFilters',
+    fetchData: (query) => {
+      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);
+      }
+
+      const lastSeenDays = filters.lastSeen?.[0]?.days;
+      if (lastSeenDays) {
+        queryBuilder = queryBuilder.gt(
+          'lastActivity.activityDate',
+          subDays(new window.Date(), lastSeenDays),
+        );
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => {
+        return {
+          items,
+          total,
+        };
+      });
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    filters: {
+      level: stringsArrayFilter(),
+      lastSeen: idNameArrayFilter(),
+    },
+  });
+
+  const lastSeenCollection = useStaticListFilterCollection(
+    tableState.collection.filters.lastSeen,
+    [
+      { id: 'w', name: 'Week', days: 7 },
+      { id: 'm', name: 'Month', days: 30 },
+      { id: 'y', name: 'Year', days: 365 },
+      { id: 'o', name: 'Other', days: null },
+    ],
+  );
+
+  const levelsCollection = useStaticListFilterCollection(
+    tableState.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={tableState}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              width: '250px',
+            },
+            {
+              id: 'jobTitle',
+              title: 'Job Title',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              id: 'lastActivity',
+              title: 'Last Activity',
+              width: '200px',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          filters={
+            <CollectionToolbarFilters
+              inline={1}
+              panelTitle="Filter your contacts"
+            >
+              <MultiSelectCheckboxFilter
+                popoverProps={{ appendTo: 'window' }}
+                placeholder="Select Level"
+                accordionItemProps={{ label: 'Level' }}
+                filter={tableState.collection.filters.level}
+                collection={levelsCollection}
+                renderItem={(level) => ({ title: level })}
+              />
+
+              <SingleSelectFilter
+                filter={tableState.collection.filters.lastSeen}
+                placeholder="Select Last Seen"
+                accordionItemProps={{ label: 'Last Seen' }}
+                collection={lastSeenCollection}
+              />
+            </CollectionToolbarFilters>
+          }
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Table/header.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionEmptyState,
+  Table,
+  OffsetQuery,
+  useCollection,
+} from '@wix/patterns';
+import { Avatar } from '@wix/design-system';
+import { Edit } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function HiddenHeader() {
+  const collection = useCollection<contacts.Contact>({
+    queryName: 'contacts-Basic',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search } = 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 }) => {
+        return {
+          items,
+          total,
+        };
+      });
+    },
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          showTitleBar={false}
+          state={collection}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              width: '250px',
+            },
+            {
+              id: 'jobTitle',
+              title: 'Job Title',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              id: 'lastActivity',
+              title: 'Last Activity',
+              width: '200px',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          emptyState={<CollectionEmptyState />}
+          actionCell={(contact, index) => ({
+            secondaryActions: [
+              {
+                icon: <Edit />,
+                text: 'Edit',
+                onClick: () => {},
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Table/horizontal-scroll.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import { Table, OffsetQuery, useTableCollection } from '@wix/patterns';
+import { Avatar, Text } from '@wix/design-system';
+import { contacts } from '@wix/crm';
+
+function HorizontalScrollTable() {
+  const tableState = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-HorizontalScroll',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: async (query: OffsetQuery) => {
+      const { limit, offset, search } = 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 }) => {
+        return {
+          items,
+          total,
+        };
+      });
+    },
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={tableState}
+          horizontalScroll // Add this line to enable horizontal scrolling
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              width: '250px',
+            },
+            {
+              id: 'email',
+              title: 'Email',
+              width: '200px',
+              render: (contact) => (
+                <Text ellipsis>{contact.primaryInfo?.email}</Text>
+              ),
+            },
+            {
+              id: 'phone',
+              title: 'Phone',
+              width: '200px',
+              render: (contact) => contact.primaryInfo?.phone,
+            },
+            {
+              id: 'lastActivity',
+              title: 'Last Activity',
+              width: '200px',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+            {
+              id: 'createdDate',
+              title: 'Created Date',
+              width: '200px',
+              render: (contact) => contact._createdDate?.toLocaleString(),
+            },
+            {
+              id: 'updatedDate',
+              title: 'Updated Date',
+              width: '200px',
+              render: (contact) => contact._updatedDate?.toLocaleString(),
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Table/table-disabled-rows.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  OffsetQuery,
+  useTableCollection,
+  MultiBulkActionToolbar,
+} from '@wix/patterns';
+import { Avatar } from '@wix/design-system';
+import { Visible, Hidden } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function SelectionDisabled() {
+  const tableState = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-SelectionDisabled',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search } = 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 }) => {
+        return {
+          items,
+          total,
+        };
+      });
+    },
+  });
+
+  const options = [
+    { label: 'Visible', icon: <Visible /> },
+    { label: 'Hidden', icon: <Hidden /> },
+  ];
+
+  const [selectedOption, setSelectedOption] = React.useState({
+    label: 'Set Visibility',
+    icon: <Visible />,
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          selectionDisabled={({ index }) => index % 2 === 0}
+          checkboxTooltipContent={(rowData) => {
+            const name = `${rowData.item.info?.name?.first} ${rowData.item.info?.name?.last}`;
+            return `Selection disabled for ${name}`;
+          }}
+          bulkActionToolbar={() => {
+            return (
+              <MultiBulkActionToolbar
+                primaryActionItems={[
+                  {
+                    dataHook: 'set-visibility',
+                    label: selectedOption.label,
+                    prefixIcon: selectedOption.icon,
+                    subItems: options.map((el) => ({
+                      prefixIcon: el.icon,
+                      label: el.label,
+                      onClick: () => setSelectedOption(el),
+                    })),
+                  },
+                ]}
+              />
+            );
+          }}
+          state={tableState}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              width: '300px',
+            },
+            {
+              title: 'Created Date',
+              render: (contact) => contact._createdDate?.toLocaleString(),
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Table/using-ambassador.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionEmptyState,
+  Table,
+  useAmbassadorCollection,
+} from '@wix/patterns';
+import * as ambassador from '@wix/ambassador-ecom-v1-order/crud/http';
+
+function UseAmbassador() {
+  const collection = useAmbassadorCollection({
+    ambassador,
+    itemName: (t) => t.number!,
+    itemKey: (t) => t.id!,
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Orders' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          columns={[
+            {
+              id: 'number',
+              width: '30px',
+              title: 'Number',
+              sortable: true,
+              render: (t) => t.number,
+            },
+            {
+              id: 'paymentStatus',
+              width: '50px',
+              title: 'Payment Status',
+              sortable: true,
+              render: (t) => t.paymentStatus,
+            },
+            {
+              id: 'fulfillmentStatus',
+              width: '50px',
+              title: 'Fulfillment Status',
+              sortable: true,
+              render: (t) => t.fulfillmentStatus,
+            },
+            {
+              id: 'createdDate',
+              width: '40px',
+              title: 'Created Date',
+              sortable: true,
+              render: (t) => t.createdDate?.toLocaleDateString(),
+            },
+            {
+              id: 'updatedDate',
+              width: '40px',
+              title: 'Updated Date',
+              sortable: true,
+              render: (t) => t.updatedDate?.toLocaleDateString(),
+            },
+            {
+              id: 'buyerNote',
+              width: '50px',
+              title: 'Buyer Note',
+              sortable: true,
+              render: (t) => t.buyerNote,
+            },
+          ]}
+          emptyState={<CollectionEmptyState />}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Table/using-with-external-data-source.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import { Table, OffsetQuery, useTableCollection } from '@wix/patterns';
+
+interface Contact {
+  id: string;
+  name: string;
+}
+
+function UseExternalDataSource() {
+  const loadDataFromServer: () => Promise<Contact[]> = async () => {
+    return new Promise((resolve) => {
+      window.setTimeout(
+        () =>
+          resolve([
+            { id: '1', name: 'Alice Johnson' },
+            { id: '2', name: 'Bob Smith' },
+            { id: '3', name: 'Carol Davis' },
+            { id: '4', name: 'David Martinez' },
+            { id: '5', name: 'Emma Wilson' },
+            { id: '6', name: 'Frank Taylor' },
+            { id: '7', name: 'Grace Lee' },
+            { id: '8', name: 'Henry White' },
+            { id: '9', name: 'Ivy Harris' },
+            { id: '10', name: 'Jack Brown' },
+          ]),
+        1000,
+      );
+    });
+  };
+
+  const dataRef = React.useRef<Promise<Contact[]>>(loadDataFromServer());
+
+  const tableState = useTableCollection<Contact>({
+    queryName: 'contacts-external-data',
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchData: async (query: OffsetQuery) => {
+      const { limit, offset, search } = query;
+      const all = await dataRef.current; // wait for external source to be resolved
+      let filtered = all; // initially assigned to all data
+
+      // filter by search value if exists
+      if (search && search.trim() !== '') {
+        console.log('filtered', filtered);
+        filtered = filtered.filter((c) =>
+          (c.name as string).toLowerCase().includes(search.toLowerCase()),
+        ); // filter by search value
+      }
+
+      // filter by given limit
+      filtered = filtered.slice(offset, offset + limit);
+
+      return {
+        items: filtered,
+        total: filtered.length,
+      };
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={tableState}
+          columns={[
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) => contact.name,
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Table/virtual.tsx

@@ -0,0 +1,77 @@
+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 {
+  CollectionEmptyState,
+  OffsetQuery,
+  useTableCollection,
+  TableVirtual,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function Virtual() {
+  const tableState = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Virtual',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search } = 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 }) => {
+        return {
+          items,
+          total,
+        };
+      });
+    },
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <TableVirtual
+          state={tableState}
+          rowHeight={78}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              width: '300px',
+            },
+            {
+              title: 'Created Date',
+              render: (contact) => contact._createdDate?.toLocaleString(),
+            },
+          ]}
+          emptyState={<CollectionEmptyState />}
+          actionCell={(contact, index) => ({
+            secondaryActions: [
+              {
+                icon: <Edit />,
+                text: 'Edit',
+                onClick: () => {},
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}