@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/Suggestions.md

@@ -43,64 +43,7 @@ export default Basic;
 
 Use `renderMarketingCard(transformFn)` when your offer data has a different structure and needs to be transformed into the `MarketingCardSchema` format.
 
-```tsx
-/* eslint-disable */
-import React from 'react';
-import {
-  Suggestions,
-  renderMarketingCard,
-  MarketingCardSchema,
-  type Offer,
-} from '@wix/patterns';
-
-function TransformOffer() {
-    // Transform offers with a different structure into MarketingCardSchema
-const transformOffer = (offer: Offer): MarketingCardSchema | null => {
-    const creative = offer.asset?.creative;
-  
-    // if no creative, filter out the offer
-    if (!creative) {
-      return null;
-    }
-
-    // The offer has: headline, body, media.url, action.label, action.url, tag
-    // We need to transform it to: title, description.text, imageUrl, ctaButton, badge
-    return {
-      title: creative.headline,
-      description: {
-        text: creative.body,
-        learnMore: creative.helpLink
-          ? {
-              link: creative.helpLink,
-              text: 'Learn more',
-            }
-          : undefined,
-      },
-      imageUrl: creative.media?.url,
-      ctaButton: creative.action
-        ? {
-            text: creative.action.label,
-            link: creative.action.url,
-          }
-        : undefined,
-      badge: creative.tag
-        ? {
-            text: creative.tag,
-            skin: 'general',
-          }
-        : undefined,
-    };
-  };
-  return (
-    <Suggestions
-      placementId="custom-structure-placement-id"
-      renderCard={renderMarketingCard(transformOffer)}
-    />
-  );
-}
-
-export default TransformOffer;
-```
+Example code: read `dist/docs/Suggestions/with-transform-function.tsx`
 
 ---
 
@@ -108,107 +51,7 @@ export default TransformOffer;
 
 Provide a custom `renderCard` function for complete control over the card's appearance and behavior.
 
-```tsx
-/* eslint-disable */
-import React from 'react';
-import { Suggestions, SuggestionsCardProps } from '@wix/patterns';
-import { Text, Box, TextButton, Card } from '@wix/design-system';
-import { ArrowRight } from '@wix/wix-ui-icons-common';
-
-function CustomCard() {
-
-const GRADIENTS = [
-    'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-    'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-    'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
-    'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
-  ];
-  // renderCard receives: offer (the dealer offer), index (0-based position), totalOffers (count of all offers)
-  const renderCustomCard = ({ offer, index, totalOffers }: SuggestionsCardProps) => {
-    const creative = offer.asset?.creative;
-
-    if (!creative) {
-      return null;
-    }
-
-    const gradient = GRADIENTS[index % GRADIENTS.length];
-
-    return (
-      <Box width="350px">
-        <Card stretchVertically>
-          <Card.Content>
-            <Box direction="vertical" gap="12px" padding="12px">
-              <Box align="space-between" verticalAlign="middle">
-                <Box
-                  align="center"
-                  verticalAlign="middle"
-                  width="36px"
-                  height="36px"
-                  borderRadius="50%"
-                  backgroundColor="D80"
-                >
-                  <Text size="small" weight="bold">
-                    {String(index + 1).padStart(2, '0')}
-                  </Text>
-                </Box>
-                {creative.badge && (
-                  <Box
-                    padding="4px 12px"
-                    borderRadius="20px"
-                    style={{ background: gradient }}
-                  >
-                    <Text size="tiny" weight="bold" style={{ color: 'white' }}>
-                      {creative.badge.text}
-                    </Text>
-                  </Box>
-                )}
-              </Box>
-
-              <Box direction="vertical" gap="6px">
-                <Text size="medium" weight="bold" maxLines={2}>
-                  {creative.title}
-                </Text>
-                <Box
-                  height="3px"
-                  width="40px"
-                  borderRadius="2px"
-                  style={{ background: gradient }}
-                />
-              </Box>
-
-              <Text size="small" secondary maxLines={2}>
-                {creative.description?.text}
-              </Text>
-
-              {creative.ctaButton && (
-                <Box marginTop="12px">
-                  <TextButton
-                    size="small"
-                    as="a"
-                    href={creative.ctaButton.link}
-                    suffixIcon={<ArrowRight />}
-                  >
-                    {creative.ctaButton.text}
-                  </TextButton>
-                </Box>
-              )}
-            </Box>
-          </Card.Content>
-        </Card>
-      </Box>
-    );
-  };
-
-  return (
-    <Suggestions
-      placementId="your-placement-id"
-      renderCard={renderCustomCard}
-    />
-  );
-}
-
-export default CustomCard;
-```
+Example code: read `dist/docs/Suggestions/custom-card-rendering.tsx`
 
 ---
 
@@ -216,48 +59,7 @@ export default CustomCard;
 
 When the number of offers exceeds `maxInlineItems`, the component switches from a fixed container layout (Box) to carousel layout. This example shows the same 3 offers rendered with different `maxInlineItems` values.
 
-```tsx
-/* eslint-disable */
-import React from 'react';
-import { Suggestions, renderMarketingCard } from '@wix/patterns';
-import { Box, Heading, Text } from '@wix/design-system';
-
-function CarouselLayout() {
-  return (
-    <Box direction="vertical" gap="SP6">
-      <Box direction="vertical" gap="SP2">
-        <Box direction="vertical" gap="SP1">
-          <Heading size="small">Inline Layout</Heading>
-          <Text size="small" secondary>
-            3 offers with maxInlineItems=3 → Cards displayed side by side
-          </Text>
-        </Box>
-        <Suggestions
-          placementId="3-offers-placement-id"
-          renderCard={renderMarketingCard()}
-          maxInlineItems={3}
-        />
-      </Box>
-
-      <Box direction="vertical" gap="SP2">
-        <Box direction="vertical" gap="SP1">
-          <Heading size="small">Carousel Layout</Heading>
-          <Text size="small" secondary>
-            3 offers with maxInlineItems=2 → Carousel with navigation
-          </Text>
-        </Box>
-        <Suggestions
-          placementId="3-offers-placement-id"
-          renderCard={renderMarketingCard()}
-          maxInlineItems={2}
-        />
-      </Box>
-    </Box>
-  );
-}
-
-export default CarouselLayout;
-```
+Example code: read `dist/docs/Suggestions/carousel-vs-container-layout.tsx`
 
 ---
 
@@ -265,35 +67,7 @@ export default CarouselLayout;
 
 Use `carouselProps` to customize the carousel behavior. See the full [Carousel documentation](https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-media--carousel) for all available options.
 
-```tsx
-/* eslint-disable */
-import React from 'react';
-import { Suggestions, renderMarketingCard } from '@wix/patterns';
-
-function CarouselProps() {
-  return (
-    <Suggestions
-      placementId="your-placement-id"
-      renderCard={renderMarketingCard()}
-      maxInlineItems={1}
-      carouselProps={{
-        // Enable infinite scrolling
-        infinite: true,
-        // Show navigation dots
-        dots: true,
-        // Position controls outside the carousel
-        controlsPosition: 'sides',
-        // Hide shadow on controls
-        showControlsShadow: false,
-        // Allow variable width cards
-        variableWidth: true,
-      }}
-    />
-  );
-}
-
-export default CarouselProps;
-```
+Example code: read `dist/docs/Suggestions/carousel-customization.tsx`
 
 ## API
 

package/dist/docs/SummaryBar/error.tsx

@@ -0,0 +1,75 @@
+/* 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>
+  );
+}

package/dist/docs/SummaryBar/loading-with-error.tsx

@@ -0,0 +1,96 @@
+/* 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>
+  );
+}

package/dist/docs/SummaryBar/loading-with-success.tsx

@@ -0,0 +1,105 @@
+/* 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>
+  );
+}

package/dist/docs/SummaryBar/loading.tsx

@@ -0,0 +1,73 @@
+/* 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>
+  );
+}

package/dist/docs/SummaryBar/success.tsx

@@ -0,0 +1,73 @@
+/* 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>
+  );
+}