@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/ExportTo/cta-is-out-of-the-table.tsx

@@ -0,0 +1,157 @@
+import { Avatar, Page, Button } from '@wix/design-system';
+import React from 'react';
+import {
+  CollectionToolbarFilters,
+  ExportModal,
+  Filter,
+  Table,
+  PageWrapper,
+  MultiSelectCheckboxFilter,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  useExportConfig,
+  useStaticListFilterCollection,
+  ToolbarTitle,
+} from '@wix/patterns';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function ExportToCTAOutOfTheTable() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact, ContactsFilters>({
+    queryName: 'contacts-ExportToCTAOutOfTheTable',
+    paginationMode: 'offset',
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts = [], pagingMetadata } }) => ({
+          items: contacts,
+          total: pagingMetadata?.total,
+        }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter({
+        initialValue: ['Beginner'],
+      }),
+    },
+    limit: 50,
+  });
+
+  const { table } = state;
+  const { collection } = table;
+
+  const exportConfig = useExportConfig<Contact, ContactsFilters>({
+    saveAs: ({ wixPatternsQuery }) =>
+      `Contacts [${wixPatternsQuery.filters.level?.join(', ')}]`,
+    transformPlatformizedQuery: ({
+      platformizedQuery,
+      wixPatternsQuery,
+      selectedItems,
+    }) => {
+      // TODO: add logic here
+      return {
+        ...platformizedQuery,
+        paging: {
+          limit: 20,
+        },
+      };
+    },
+    methodMetadata: {
+      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
+      service: 'ExportService',
+      method: 'QueryProductsExportSpi',
+    },
+    fields: [
+      { id: 'contact.id', header: 'id' },
+      { id: 'contact.info.name.first', header: 'First Name' },
+      { id: 'contact.info.name.last', header: 'Last Name' },
+      { id: 'contact.primary_info.email', header: 'Email' },
+    ],
+  });
+
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ],
+  );
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header
+          actionsBar={
+            <Button onClick={() => table.exportState?.open()}>Export</Button>
+          }
+        />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="title" showTotal />}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={contact.name}
+                    imgProps={{ src: contact.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) => contact.name,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.level,
+              },
+              {
+                title: 'Last Seen',
+                render: (contact) => contact.lastSeen?.toLocaleString(),
+              },
+            ]}
+            filters={
+              <CollectionToolbarFilters
+                inline={1}
+                panelTitle="Filter your contacts"
+              >
+                <MultiSelectCheckboxFilter
+                  popoverProps={{ appendTo: 'window' }}
+                  filter={collection.filters.level}
+                  collection={levelsCollection}
+                  renderItem={(level) => ({ title: level })}
+                />
+              </CollectionToolbarFilters>
+            }
+            exportModal={<ExportModal {...exportConfig} />}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/ExportTo/export-all-table.tsx

@@ -0,0 +1,144 @@
+import { Avatar, Page } from '@wix/design-system';
+import React from 'react';
+import {
+  CollectionToolbarFilters,
+  ExportButton,
+  Filter,
+  Table,
+  PageWrapper,
+  MultiSelectCheckboxFilter,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  useExportConfig,
+  useStaticListFilterCollection,
+  ToolbarTitle,
+} from '@wix/patterns';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function ExportAllTable() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact, ContactsFilters>({
+    queryName: 'ExportAllTable',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts = [], pagingMetadata } }) => ({
+          items: contacts,
+          total: pagingMetadata?.total,
+        }));
+    },
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter(),
+    },
+  });
+
+  const exportConfig = useExportConfig<Contact, ContactsFilters>({
+    transformPlatformizedQuery: ({
+      platformizedQuery,
+      wixPatternsQuery,
+      selectedItems,
+    }) => {
+      // TODO: add logic here
+      return {
+        ...platformizedQuery,
+        paging: {
+          limit: 20,
+        },
+      };
+    },
+    methodMetadata: {
+      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
+      service: 'ExportService',
+      method: 'QueryProductsExportSpi',
+    },
+    fields: [
+      { id: 'contact.id', header: 'id' },
+      { id: 'contact.info.name.first', header: 'First Name' },
+      { id: 'contact.info.name.last', header: 'Last Name' },
+      { id: 'contact.primary_info.email', header: 'Email' },
+    ],
+  });
+  const collection = state.collection;
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ],
+  );
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Contacts" showTotal />}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={contact.name}
+                    imgProps={{ src: contact.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) => contact.name,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.level,
+              },
+              {
+                title: 'Last Seen',
+                render: (contact) => contact.lastSeen?.toLocaleString(),
+              },
+            ]}
+            filters={
+              <CollectionToolbarFilters
+                inline={1}
+                panelTitle="Filter your contacts"
+              >
+                <MultiSelectCheckboxFilter
+                  popoverProps={{ appendTo: 'window' }}
+                  filter={collection.filters.level}
+                  collection={levelsCollection}
+                  renderItem={(level) => ({ title: level })}
+                />
+              </CollectionToolbarFilters>
+            }
+            exportButton={<ExportButton {...exportConfig} />}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/ExportTo/export-filtered-table.tsx

@@ -0,0 +1,148 @@
+import { Avatar, Page } from '@wix/design-system';
+import React from 'react';
+import {
+  CollectionToolbarFilters,
+  ExportButton,
+  Filter,
+  Table,
+  PageWrapper,
+  MultiSelectCheckboxFilter,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  useExportConfig,
+  useStaticListFilterCollection,
+  ToolbarTitle,
+} from '@wix/patterns';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function ExportFlilteredTable() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact, ContactsFilters>({
+    queryName: 'contacts-BulkActions',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts = [], pagingMetadata } }) => ({
+          items: contacts,
+          total: pagingMetadata?.total,
+        }));
+    },
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter({
+        initialValue: ['Beginner'],
+      }),
+    },
+  });
+
+  const exportConfig = useExportConfig<Contact, ContactsFilters>({
+    saveAs: ({ wixPatternsQuery }) =>
+      `Contacts [${wixPatternsQuery.filters.level?.join(', ')}]`,
+    transformPlatformizedQuery: ({
+      platformizedQuery,
+      wixPatternsQuery,
+      selectedItems,
+    }) => {
+      // TODO: add logic here
+      return {
+        ...platformizedQuery,
+        paging: {
+          limit: 20,
+        },
+      };
+    },
+    methodMetadata: {
+      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
+      service: 'ExportService',
+      method: 'QueryProductsExportSpi',
+    },
+    fields: [
+      { id: 'contact.id', header: 'id' },
+      { id: 'contact.info.name.first', header: 'First Name' },
+      { id: 'contact.info.name.last', header: 'Last Name' },
+      { id: 'contact.primary_info.email', header: 'Email' },
+    ],
+  });
+  const collection = state.collection;
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ],
+  );
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Contacts" showTotal />}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={contact.name}
+                    imgProps={{ src: contact.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) => contact.name,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.level,
+              },
+              {
+                title: 'Last Seen',
+                render: (contact) => contact.lastSeen?.toLocaleString(),
+              },
+            ]}
+            filters={
+              <CollectionToolbarFilters
+                inline={1}
+                panelTitle="Filter your contacts"
+              >
+                <MultiSelectCheckboxFilter
+                  popoverProps={{ appendTo: 'window' }}
+                  filter={collection.filters.level}
+                  collection={levelsCollection}
+                  renderItem={(level) => ({ title: level })}
+                />
+              </CollectionToolbarFilters>
+            }
+            exportButton={<ExportButton {...exportConfig} />}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/ExportTo/export-table-with-selection-bulk-selection.tsx

@@ -0,0 +1,203 @@
+import {
+  Avatar,
+  Card,
+  CustomModalLayout,
+  Modal,
+  Page,
+  Text,
+} from '@wix/design-system';
+import React from 'react';
+import {
+  ExportButton,
+  Filter,
+  Table,
+  PageWrapper,
+  MultiBulkActionToolbar,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  useExportConfig,
+  ToolbarTitle,
+} from '@wix/patterns';
+import { Block, ChangeOrder, Download, Edit } from '@wix/wix-ui-icons-common';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function ExportToBulkSelectExample() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact, ContactsFilters>({
+    queryName: 'contacts-BulkActions',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts = [], pagingMetadata } }) => ({
+          items: contacts,
+          total: pagingMetadata?.total,
+        }));
+    },
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter({
+        initialValue: ['Beginner'],
+      }),
+    },
+  });
+
+  const exportConfig = useExportConfig<Contact, ContactsFilters>({
+    transformPlatformizedQuery: ({
+      platformizedQuery,
+      wixPatternsQuery,
+      selectedItems,
+    }) => {
+      // TODO: add logic here
+      return {
+        ...platformizedQuery,
+        paging: {
+          limit: 20,
+        },
+      };
+    },
+    methodMetadata: {
+      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
+      service: 'ExportService',
+      method: 'QueryProductsExportSpi',
+    },
+    fields: [
+      { id: 'contact.id', header: 'id' },
+      { id: 'contact.info.name.first', header: 'First Name' },
+      { id: 'contact.info.name.last', header: 'Last Name' },
+      { id: 'contact.primary_info.email', header: 'Email' },
+    ],
+  });
+  const collection = state.collection;
+  React.useEffect(() => {
+    collection.bulkSelect.selectAll();
+  }, []);
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Contacts" showTotal />}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={contact.name}
+                    imgProps={{ src: contact.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) => contact.name,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.level,
+              },
+              {
+                title: 'Last Seen',
+                render: (contact) => contact.lastSeen?.toLocaleString(),
+              },
+            ]}
+            bulkActionModal={({
+              isModalOpen,
+              selectedValues,
+              closeModal,
+              query,
+            }) => (
+              <Modal isOpen={isModalOpen}>
+                <CustomModalLayout
+                  height={300}
+                  dataHook="bulk-action-custom-modal-layout"
+                  title="Edit Contacts"
+                  primaryButtonOnClick={closeModal}
+                  primaryButtonText="save"
+                  secondaryButtonOnClick={closeModal}
+                  secondaryButtonText="cancle"
+                >
+                  {selectedValues.map((value, index) => (
+                    <Card>
+                      <Text
+                        key={value.id}
+                        dataHook={`selected-value-text-${index}`}
+                      >
+                        Page: {query.page}; Name: {value.name}
+                      </Text>
+                    </Card>
+                  ))}
+                </CustomModalLayout>
+              </Modal>
+            )}
+            bulkActionToolbar={({ selectedValues, openModal }) => {
+              const disabled = selectedValues.length > 4;
+              return (
+                <MultiBulkActionToolbar
+                  primaryActionItems={[
+                    {
+                      dataHook: 'edit-button',
+                      onClick: openModal,
+                      label: 'Edit',
+                      prefixIcon: <Edit />,
+                      biName: 'edit',
+                    },
+                    {
+                      dataHook: 'download-button',
+                      onClick: openModal,
+                      label: 'Download',
+                      prefixIcon: <Download />,
+                      tooltip: disabled
+                        ? 'Downloading is supported for up to 10 items'
+                        : undefined,
+                      disabled,
+                      biName: 'download',
+                    },
+                  ]}
+                  secondaryActionItems={[
+                    {
+                      dataHook: 'block-button',
+                      onClick: openModal,
+                      label: 'Block',
+                      prefixIcon: <Block />,
+                      biName: 'block',
+                    },
+                    {
+                      dataHook: 'change-button',
+                      onClick: openModal,
+                      label: 'Change',
+                      disabled,
+                      prefixIcon: <ChangeOrder />,
+                      biName: 'change',
+                    },
+                  ]}
+                />
+              );
+            }}
+            exportButton={<ExportButton {...exportConfig} />}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}