@wix/patterns 1.366.0 → 1.370.0

package/dist/docs/CollectionErrorState.md

@@ -0,0 +1,107 @@
+# CollectionErrorState
+
+**Category:** Common/State
+
+## Design
+
+### Description
+
+The `CollectionErrorState` component displays an error state for a collection when a data fetch fails. Pass this component to the `errorState` prop of a collection component, such as a [Grid](./?path=/story/base-components-collections-grid-grid--grid) or a [Table](./?path=/story/base-components-collections-table-table--table). 
+
+
+```tsx
+import { CollectionErrorState } from '@wix/patterns';
+```
+
+### Demo
+
+Displays an error state for a collection when a data fetch fails.
+
+```tsx
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionErrorState,
+  TableGridSwitch,
+  useTableGridSwitchCollection,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+import { Refresh } from '@wix/wix-ui-icons-common';
+
+function ErrorStateDemo() {
+  const state = useTableGridSwitchCollection<contacts.Contact>({
+    queryName: 'contacts-ErrorStateDemo',
+    paginationMode: 'offset',
+    fetchData: () => Promise.reject(new Error('Error fetching contacts')),
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <CollectionPage height="500px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <TableGridSwitch
+          state={state}
+          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: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          errorState={(err, { retry }) => (
+            <CollectionErrorState
+              title="Couldn't load contacts"
+              subtitle={String(err)}
+              action={{
+                text: 'Click here to retry',
+                prefixIcon: <Refresh />,
+                onClick: retry,
+              }}
+            />
+          )}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}
+```
+
+## API
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `requestId` | `string` | No | - | The `requestId` to display in the error state. |
+| `title` | `string` | No | - | Title to display in the error state. |
+| `subtitle` | `string` | No | - | Subtitle to display in the error state. |
+| `action` | `{ text: string; onClick: () => void; prefixIcon?: IconElement; }` | No | - | Action button to display in the error state. |
+| `children` | `ReactNode` | No | - | Contains elements inside the card such as `<Card.Header/>`, `<Card.Subeader/>`, `<Card.Content/>` or `<Card.Divider/>`. |
+| `controls` | `ReactNode` | No | - | Contains elements that control the component, usually a `<CloseButton/>`. |
+| `stretchVertically` | `boolean` | No | - | Makes a card stretch vertically to max height in a layout or container. |
+| `hideOverflow` | `boolean` | No | - | Defines whether to hide portions of card content that overflows its dimensions. |
+| `showShadow` | `boolean` | No | - | Defines whether to apply a drop shadow effect. |
+| `dataHook` | `string` | No | `collection-error-state` | Applies a data-hook HTML attribute that can be used in tests. |
+| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component's root element. |
+| `highlight` | `"focus"` | No | - | Applies a highlighting effect on the borders of the component. |
+

package/dist/docs/CollectionNoResultsState.md

@@ -0,0 +1,116 @@
+# CollectionNoResultsState
+
+**Category:** Features/Display/Empty States
+
+## Design
+
+### Description
+
+Displays an empty state when a filter or search has no results. Pass through the `noResultsState` prop of a [`Grid`](./?path=/story/base-components-collections-grid-grid--grid), [`Table`](./?path=/story/base-components-collections-table-table--table), or other collection component.
+
+
+
+
+```tsx
+import { CollectionNoResultsState } from '@wix/patterns';
+```
+
+### Demo
+
+```tsx
+import { Avatar, Text } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  TableGridSwitch,
+  useTableGridSwitchCollection,
+  Filter,
+  stringsArrayFilter,
+  idNameArrayFilter,
+  CollectionNoResultsState
+} from '@wix/patterns';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+interface Duration {
+  id: string;
+  name: string;
+  days: number | null;
+}
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+  lastSeen: Filter<Duration[]>;
+};
+
+function FilteredEmptyState() {
+  const httpClient = useHttpClient();
+  const state = useTableGridSwitchCollection<Contact, ContactsFilters>({
+    queryName: 'contacts-FilteredEmptyState',
+    paginationMode: 'offset',
+    fetchData: () =>
+      Promise.resolve({
+        items: [],
+        total: 0,
+      }),
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter(),
+      lastSeen: idNameArrayFilter<Duration>({
+        initialValue: [{ id: '1', name: 'Week', days: 7 }],
+      }),
+    },
+  });
+
+  return (
+    <CollectionPage height="500px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <TableGridSwitch
+          state={state}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar name={contact.name} imgProps={{ src: contact.image }} />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) => contact.name,
+            },
+            {
+              title: 'Last Seen',
+              render: (contact) => contact.lastSeen?.toLocaleString(),
+            },
+          ]}
+          noResultsState={
+            <CollectionNoResultsState />
+          }
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}
+```
+
+## API
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute to be used in the tests |
+| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component’s root element. |
+| `children` | `ReactNode` | No | - | Contains components rendered below the subtitle, e.g., `<Button/>` or `<TextButton/>` |
+| `title` | `string` | No | - | Overrides the default title. |
+| `skin` | `"page" \| "page-no-border" \| "section"` | No | - | Sets the style skin for the empty state |
+| `theme` | `"page" \| "page-no-border" \| "section"` | No | - | @deprecated use skin prop instead |
+| `subtitle` | `string` | No | - | Overrides the default subtitle. |
+| `classNames` | `{ imageContainer?: string; }` | No | - | Sets the empty state image bottom margin. If not specified, use the default padding defined in the CSS. |
+| `align` | `"start" \| "center" \| "end"` | No | - | Sets the alignment of all empty state contents within the component container |
+