@wix/patterns 1.458.0 → 1.460.0

package/dist/docs/SummaryBar.md

@@ -14,81 +14,7 @@ This data is not updated dynamically as part of a collection's fetch, meaning yo
 
 This example shows the summary bar in the `"success"` state using the `<SummaryBar>` `status` prop.
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  SummaryBar,
-  SummaryData,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function SuccessState() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-summaryBar',
-    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}
-            summaryBar={
-              <SummaryBar
-                data={
-                  [
-                    { title: 'Orders', value: '12' },
-                    { title: 'Restaurants', value: '420' },
-                    { title: 'Deliveries', value: '42' },
-                  ] as SummaryData
-                }
-                status="success"
-                onRetry={async () => {}}
-              />
-            }
-            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/SummaryBar/success.tsx`
 
 ---
 
@@ -96,81 +22,7 @@ function SuccessState() {
 
 This example shows the summary bar in the `"loading"` state using the `<SummaryBar>` `status` prop.
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  SummaryBar,
-  SummaryData,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function LoadingState() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-summaryBar',
-    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}
-            summaryBar={
-              <SummaryBar
-                data={
-                  [
-                    { title: 'Orders', value: '12' },
-                    { title: 'Restaurants', value: '420' },
-                    { title: 'Deliveries', value: '42' },
-                  ] as SummaryData
-                }
-                status="loading"
-                onRetry={async () => {}}
-              />
-            }
-            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/SummaryBar/loading.tsx`
 
 ---
 
@@ -178,83 +30,7 @@ function LoadingState() {
 
 This example shows the summary bar in the `"error"` state using the `<SummaryBar>` `status` prop.
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  SummaryBar,
-  SummaryData,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function ErrorState() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-summaryBar',
-    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}
-            summaryBar={
-              <SummaryBar
-                data={
-                  [
-                    { title: 'Orders', value: '12' },
-                    { title: 'Restaurants', value: '420' },
-                    { title: 'Deliveries', value: '42' },
-                  ] as SummaryData
-                }
-                status="error"
-                onRetry={async () => {
-                  /* refetch summary*/
-                }}
-              />
-            }
-            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/SummaryBar/error.tsx`
 
 ---
 
@@ -262,113 +38,7 @@ function ErrorState() {
 
 This example shows the summary bar in the `"loading"` state, that changes to the `"success"` state when the data is fetched, using the `<SummaryBar>` `status` prop.
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  PrimaryActionButton,
-  SummaryBar,
-  SummaryBarStatus,
-  useTableCollection,
-  useSelector,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function LoadWithSuccess() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-summaryBar',
-    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: {},
-  });
-
-  const [summaryStatus, setSummaryStatus] =
-    React.useState<SummaryBarStatus>('loading');
-  const [ordersCount, setOrderCount] = React.useState<number>(
-    state.collection.result.items.length,
-  );
-
-  const loadOrderCount: () => Promise<number> = async () => {
-    return new Promise((resolve) => {
-      window.setTimeout(() => {
-        resolve(state.collection.result.items.length);
-      }, 5000);
-    });
-  };
-
-  React.useEffect(() => {
-    const fetchData = async () => {
-      const ordersCount = await loadOrderCount();
-      setOrderCount(ordersCount);
-      setSummaryStatus('success');
-    };
-
-    fetchData();
-  }, []);
-
-  const collectionItems = useSelector(
-    () => state.collection.result.items.length,
-  );
-
-  React.useEffect(() => {
-    console.log(collectionItems);
-    setOrderCount(state.collection.result.items.length);
-  }, [collectionItems]);
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header />
-        <Page.Content>
-          <Table
-            state={state}
-            summaryBar={
-              <SummaryBar
-                data={[
-                  { title: 'Orders Contacts', value: String(ordersCount) },
-                ]}
-                status={summaryStatus}
-                onRetry={async () => {}}
-              />
-            }
-            columns={[
-              {
-                id: 'name',
-                title: 'Name',
-                width: '250px',
-                render: (contact) =>
-                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
-              },
-            ]}
-            primaryActionButton={<PrimaryActionButton />}
-          />
-        </Page.Content>
-      </Page>
-    </PageWrapper>
-  );
-}
-```
+Example code: read `dist/docs/SummaryBar/loading-with-success.tsx`
 
 ---
 
@@ -377,114 +47,18 @@ function LoadWithSuccess() {
 This example shows the summary bar in the `"loading"` state, that changes to the `"error"` state when the data fetch fails, using the `<SummaryBar>` `status` prop.
 The `onRetry` prop is used to retry the fetch the data when **Reload** is clicked.
 
-```tsx
-/* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import { Page } from '@wix/design-system';
-import {
-  Table,
-  PageWrapper,
-  SummaryBar,
-  SummaryBarStatus,
-  SummaryData,
-  useTableCollection,
-  OffsetQuery,
-} from '@wix/patterns';
-import { contacts } from '@wix/crm';
-
-function LoadWithError() {
-
-  const state = useTableCollection<contacts.Contact>({
-    queryName: 'contacts-summaryBar',
-    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: {},
-  });
-
-  const [summaryStatus, setSummaryStatus] =
-    React.useState<SummaryBarStatus>('loading');
-  const [summaryData, setSummaryData] = React.useState<SummaryData>([]);
-  const loadSummaryData: () => Promise<SummaryData> = async () => {
-    return new Promise((resolve, reject) => {
-      window.setTimeout(() => {
-        reject('error');
-      }, 2000);
-    });
-  };
-
-  const fetchData = async () => {
-    setSummaryStatus('loading');
-    try {
-      const summaryBarData = await loadSummaryData();
-      setSummaryData(summaryBarData);
-      setSummaryStatus('success');
-    } catch (error) {
-      setSummaryStatus('error');
-    }
-  };
-
-  React.useEffect(() => {
-    fetchData();
-  }, []);
-
-  return (
-    <PageWrapper>
-      <Page height="400px">
-        <Page.Header />
-        <Page.Content>
-          <Table
-            state={state}
-            summaryBar={
-              <SummaryBar
-                data={summaryData}
-                status={summaryStatus}
-                onRetry={async () => {
-                  await fetchData();
-                }}
-              />
-            }
-            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/SummaryBar/loading-with-error.tsx`
 
 ## API
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `data` | `SummaryData` | Yes | - | Data to display in the summary bar. |
-| `status` | `"error" \| "loading" \| "success"` | Yes | `success` | Summary bar status. <br><br> Supported values:<br> - `"success"`<br> - `"loading"`<br> - `"error"` |
-| `onRetry` | `() => void \| Promise<void>` | Yes | - | Function that is called every time **Reload** is clicked. |
+Read `dist/dts-bundle/components/SummaryBar.d.ts` for `SummaryBar`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
 
 ## BI
 

package/dist/docs/Table/basic-table.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionEmptyState,
+  Table,
+  OffsetQuery,
+  useTableCollection,
+} from '@wix/patterns';
+import { Avatar } from '@wix/design-system';
+import { Edit } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function BasicTable() {
+  const tableState = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Basic',
+    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);
+      }
+
+      const { items = [], totalCount: total } = await queryBuilder.find();
+      return {
+        items,
+        total,
+      };
+    },
+  });
+
+  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: '300px',
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          actionCell={() => ({
+            secondaryActions: [
+              {
+                icon: <Edit />,
+                text: 'Edit',
+                onClick: () => {},
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Table/cursor-pagination.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionEmptyState,
+  Table,
+  useTableCollection,
+  CursorQuery,
+} from '@wix/patterns';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+interface User {
+  id: string;
+  name: string;
+}
+
+function CursorPaginationTable() {
+  const httpClient = useHttpClient();
+
+  const tableState = useTableCollection<User>({
+    queryName: 'users-CursorPagination',
+    paginationMode: 'cursor',
+    fetchData: (query: CursorQuery) => {
+      const { limit, cursor, search } = query;
+      return httpClient
+        .request<{ total: number; items: User[]; cursor?: string }>({
+          url: '/api/users',
+          data: {
+            query: {
+              limit,
+              cursor,
+              search,
+            },
+          },
+        })
+        .then(({ data: { items, total, cursor } }) => ({
+          items,
+          total,
+          cursor,
+        }));
+    },
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Users' }} />
+      <CollectionPage.Content>
+        <Table
+          state={tableState}
+          columns={[
+            {
+              title: 'Name',
+              width: '250px',
+              render: (user) => user.name,
+            },
+          ]}
+          emptyState={<CollectionEmptyState />}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Table/fetch-total-async.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionEmptyState,
+  Table,
+  useTableCollection,
+  CursorQuery,
+} from '@wix/patterns';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+interface User {
+  id: string;
+  name: string;
+}
+
+function FetchTotalTable() {
+  const httpClient = useHttpClient();
+
+  const tableState = useTableCollection<User>({
+    queryName: 'users-CursorPagination',
+    paginationMode: 'cursor',
+    fetchTotal: async ({ limit, cursor, search }: CursorQuery) => {
+      return new Promise((resolve, reject) => {
+        window.setTimeout(() => {
+          httpClient
+            .request<{ total: number; items: User[]; cursor?: string }>({
+              url: '/api/users',
+              data: {
+                query: {
+                  limit,
+                  cursor,
+                  search,
+                },
+              },
+            })
+            .then(({ data: { total } }) => {
+              resolve(total);
+            })
+            .catch(reject);
+        }, 5000);
+      });
+    },
+    fetchData: (query: CursorQuery) => {
+      const { limit, cursor, search } = query;
+      return httpClient
+        .request<{ total: number; items: User[]; cursor?: string }>({
+          url: '/api/users',
+          data: {
+            query: {
+              limit,
+              cursor,
+              search,
+            },
+          },
+        })
+        .then(({ data: { items, cursor } }) => ({
+          items,
+          // total, // mimicking the total from the fetchTotal
+          cursor,
+        }));
+    },
+    fetchErrorMessage: () => 'Error fetching users',
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Users' }} />
+      <CollectionPage.Content>
+        <Table
+          state={tableState}
+          columns={[
+            {
+              title: 'Name',
+              width: '250px',
+              render: (user) => user.name,
+            },
+          ]}
+          emptyState={<CollectionEmptyState />}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}