@wix/auto-patterns 1.21.0 → 1.23.0

package/dist/docs/custom_overrides.md

@@ -28,6 +28,10 @@ your-page/
     │   ├── index.tsx                  // Exports useColumns hook
     │   ├── name.ts
     │   └── date.ts
+    ├── slots/                         // Custom slot components for collection pages
+    │   ├── index.tsx                  // Exports useSlots hook
+    │   ├── TopBannerComponent.tsx
+    │   └── BottomStatsComponent.tsx
     ├── customComponents/              // Custom entity page components
     │   ├── index.tsx                  // Exports useComponents hook
     │   ├── CustomNameField.tsx
@@ -35,16 +39,12 @@ your-page/
     ├── modals/                        // Custom modals
     │   ├── index.tsx                  // Exports useModals hook
     │   └── myCustomModal.tsx
-    └── customDataSources/             // Custom data sources
+    ├── customDataSources/             // Custom data sources
     │   ├── index.tsx                  // Exports useCustomDataSources hook
     │   └── myCustomDataSource.ts
-    ├── sections/                      // Section renderers
-    │   ├── index.tsx
-    │   └── groupByType.ts
-    └── customComponents/              // Custom entity page components
+    └── sections/                      // Section renderers
         ├── index.tsx
-        ├── CustomNameField.tsx
-        └── InfoCard.tsx
+        └── groupByType.ts
 ```
 
 ### Using Override Hooks in Your Page
@@ -54,6 +54,7 @@ In your page component, use the hook-based approach to access React context and
 ```tsx
 import { useActions } from '../components/actions';
 import { useColumns } from '../components/columns';
+import { useSlots } from '../components/slots';
 import { useSections } from '../components/sections';
 import { useComponents } from '../components/customComponents';
 import { useModals } from '../components/modals';
@@ -62,13 +63,14 @@ import { useCustomDataSources } from '../components/customDataSources';
 export default function YourPage() {
   const actions = useActions();
   const columns = useColumns();
+  const slots = useSlots();
   const sections = useSections();
   const components = useComponents();
   const modals = useModals();
   const customDataSources = useCustomDataSources();
 
   return (
-    <PatternsWizardOverridesProvider value={{ actions, columns, sections, components, modals, customDataSources }}>
+    <PatternsWizardOverridesProvider value={{ actions, columns, slots, sections, components, modals, customDataSources }}>
       <AutoPatternsApp configuration={config} />
     </PatternsWizardOverridesProvider>
   );
@@ -77,12 +79,13 @@ export default function YourPage() {
 
 ### Important: Updating Hook Index Files
 
-**When adding any new implementation (action, modal, column, section or component), you MUST update the corresponding hook in the `index.tsx` file to include your new implementation.** The main page component uses these hooks, so they serve as the central export point for each type of override.
+**When adding any new implementation (action, modal, column, slot, section or component), you MUST update the corresponding hook in the `index.tsx` file to include your new implementation.** The main page component uses these hooks, so they serve as the central export point for each type of override.
 
 For example:
 - Adding a new action → Update `../components/actions/index.tsx` to include the new action in the `useActions` hook
 - Adding a new modal → Update `../components/modals/index.tsx` to include the new modal in the `useModals` hook
 - Adding a new column override → Update `../components/columns/index.tsx` to include the new column in the `useColumns` hook
+- Adding a new slot component → Update `../components/slots/index.tsx` to include the new slot in the `useSlots` hook
 - Adding a new section renderer → Update `../components/sections/index.tsx` to include the new section in the `useSections` hook
 - Adding a new custom component → Update `../components/customComponents/index.tsx` to include the new component in the `useComponents` hook
 - Adding a new custom data source → Update `../components/customDataSources/index.tsx` to include the new data source in the `useCustomDataSources` hook
@@ -105,14 +108,73 @@ Each column in the table has a default rendering based on its field type. You ca
 
 ### Function Signature
 
+For proper TypeScript support, use the `IColumnValue<T>` interface:
+
 ```typescript
-function columnOverride({ value, row }) {
-  // value: The individual column value
-  // row: The entire row object containing all field values
+import { IColumnValue } from '@wix/auto-patterns/types';
+
+function columnOverride(props: IColumnValue<string>) {
+  // props.value: The individual column value (typed)
+  // props.row: The entire row object containing all field values
   return <YourCustomRendering />;
 }
 ```
 
+### Type-Specific Examples
+
+The generic type `T` in `IColumnValue<T>` should match your field's data type:
+
+```tsx
+import React from 'react';
+import { IColumnValue } from '@wix/auto-patterns/types';
+import { Badge } from '@wix/design-system';
+
+/* The `IColumnValue<T>` interface provides type safety for column override functions: */
+interface IColumnValue<T> {
+  value: T;                    // The individual column value (strongly typed)
+  row: Record<string, any>;    // The entire row object with all field values
+}
+
+// For TEXT fields
+export function petName({ value, row }: IColumnValue<string>) {
+  return <span>{value?.toUpperCase()}</span>;
+}
+
+// For NUMBER fields
+export function age({ value, row }: IColumnValue<number>) {
+  return (
+    <Badge skin={value > 5 ? 'warning' : 'success'}>
+      {value} years old
+    </Badge>
+  );
+}
+
+// For BOOLEAN fields
+export function isVaccinated({ value, row }: IColumnValue<boolean>) {
+  return (
+    <Badge skin={value ? 'success' : 'danger'}>
+      {value ? '✓ Vaccinated' : '✗ Not Vaccinated'}
+    </Badge>
+  );
+}
+
+// For DATE/DATETIME fields
+export function birthDate({ value, row }: IColumnValue<string | Date>) {
+  const date = value instanceof Date ? value : new Date(value);
+  return <span>{date.toLocaleDateString()}</span>;
+}
+
+// For IMAGE fields
+export function profilePicture({ value, row }: IColumnValue<string>) {
+  return <img src={value} alt={row.name} width="48" height="48" />;
+}
+
+// For ARRAY fields
+export function hobbies({ value, row }: IColumnValue<string[]>) {
+  return <span>{value?.join(', ') || 'No hobbies'}</span>;
+}
+```
+
 ### Understanding Row Data
 
 **Important**: The `row` object contains all field values from the entity, where each property corresponds to a **field ID** from the collection schema. To access specific field values, use the exact field ID as defined in your collection schema.
@@ -153,22 +215,29 @@ export function myColumn({ value, row }) {
 
 In `components/columns/name.tsx`:
 
-```ts
+```tsx
 import React from 'react';
+import { IColumnValue } from '@wix/auto-patterns/types';
 
-export function name({ value, row }) {
-  // Simple value formatting
+export function name(props: IColumnValue<string>) {
+  // Simple value formatting with TypeScript typing
+  return <strong>{props.value}</strong>;
+}
+
+// Alternative: Destructured parameters with typing
+export function nameAlt({ value, row }: IColumnValue<string>) {
   return <strong>{value}</strong>;
 }
 ```
 
 In `components/columns/petInfo.tsx`:
 
-```ts
+```tsx
 import React from 'react';
 import { Box, Text } from '@wix/design-system';
+import { IColumnValue } from '@wix/auto-patterns/types';
 
-export function petInfo({ value, row }) {
+export function petInfo({ value, row }: IColumnValue<string>) {
   // Complex column combining multiple row values
   return (
     <Box direction="vertical" gap={1}>
@@ -186,11 +255,12 @@ export function petInfo({ value, row }) {
 
 In `components/columns/status.tsx`:
 
-```ts
+```tsx
 import React from 'react';
 import { Badge } from '@wix/design-system';
+import { IColumnValue } from '@wix/auto-patterns/types';
 
-export function status({ value, row }) {
+export function status({ value, row }: IColumnValue<string>) {
   // Conditional rendering based on multiple row fields
   if (row.isVaccinated && row.age > 1) {
     return <Badge skin="success">Ready for Adoption</Badge>;
@@ -204,10 +274,11 @@ export function status({ value, row }) {
 
 In `components/columns/fullName.tsx`:
 
-```ts
+```tsx
 import React from 'react';
+import { IColumnValue } from '@wix/auto-patterns/types';
 
-export function fullName({ value, row }) {
+export function fullName({ value, row }: IColumnValue<string>) {
   // Calculated column using multiple fields
   return `${row.name} (owned by ${row.owner})`;
 }
@@ -215,10 +286,11 @@ export function fullName({ value, row }) {
 
 In `components/columns/date.tsx`:
 
-```ts
+```tsx
 import React from 'react';
+import { IColumnValue } from '@wix/auto-patterns/types';
 
-export function date({ value, row }) {
+export function date({ value, row }: IColumnValue<string>) {
   // Access to other row data for enhanced date formatting
   const isRecent = row.lastActivity && new Date(row.lastActivity) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
 
@@ -301,6 +373,8 @@ PatternsWizardOverridesProvider
 
 ### Important Guidelines
 
+- **TypeScript Usage**: Always use `IColumnValue<T>` and import it from `@wix/auto-patterns/types`
+- **Type Matching**: Ensure the generic type `T` matches your field's actual data type (string, number, boolean, etc.)
 - **Performance**: Remember that column functions are called for every row, so keep calculations lightweight
 - **Consistency**: When using row data, ensure the column header accurately represents what's displayed
 - **Accessibility**: Maintain proper semantic structure when combining multiple values
@@ -812,6 +886,10 @@ interface Section {
     prefixIcon?: React.ReactElement;
     onClick: () => void;
   };
+  badge?: {
+    visible: boolean;
+    skin?: 'light' | 'danger' | 'neutralLight';
+  };
 }
 ```
 
@@ -819,6 +897,7 @@ The section renderer receives an item and returns:
 - **id**: A unique identifier for the section (items with the same id are grouped together)
 - **title**: The text displayed in the section header
 - **primaryAction** (optional): An action button displayed in the section header
+- **badge** (optional): A badge configuration displayed in the section header
 
 #### Example: Section Renderer Implementation
 
@@ -844,6 +923,10 @@ export function groupByType(item: any): Section {
         console.log(`Showing all ${petType}s`);
       },
     },
+    badge: {
+      visible: true,
+      skin: 'light',
+    },
   };
 }
 ```
@@ -866,16 +949,20 @@ export function groupByAgeAndVaccination(item: any): Section {
 
   let sectionId: string;
   let sectionTitle: string;
+  let badgeSkin: 'light' | 'danger' | 'neutralLight' = 'light';
 
   if (age < 1) {
     sectionId = 'puppies';
     sectionTitle = 'Puppies (Under 1 year)';
+    badgeSkin = 'neutralLight';
   } else if (age >= 1 && age <= 5) {
     sectionId = isVaccinated ? 'young-vaccinated' : 'young-unvaccinated';
     sectionTitle = `Young Adults (1-5 years) - ${isVaccinated ? 'Vaccinated' : 'Not Vaccinated'}`;
+    badgeSkin = isVaccinated ? 'light' : 'danger';
   } else {
     sectionId = 'seniors';
     sectionTitle = 'Senior Pets (5+ years)';
+    badgeSkin = 'light';
   }
 
   return {
@@ -888,6 +975,10 @@ export function groupByAgeAndVaccination(item: any): Section {
         // Show special care information for puppies
       },
     } : undefined,
+    badge: {
+      visible: true,
+      skin: badgeSkin,
+    },
   };
 }
 ```
@@ -902,7 +993,7 @@ import * as columns from './components/columns';
 import * as actions from './components/actions';
 
 <PatternsWizardOverridesProvider value={{ sections, columns, actions }}>
-  <AutoPatternsApp configuration={config as AppConfig} />
+  <AutoPatternsApp configuration={config} />
 </PatternsWizardOverridesProvider>
 ```
 
@@ -915,3 +1006,155 @@ import * as actions from './components/actions';
 
 
 By implementing sections, you can significantly improve the user experience when dealing with large datasets by providing logical groupings that make information easier to find and understand.
+
+## Slots
+
+Slots allow you to inject custom React components into collection pages at specific points in the component hierarchy. Unlike other overrides that modify existing functionality, slots enable you to add entirely custom UI elements anywhere within the collection page components array.
+
+Slots are useful for:
+- Adding custom banners or announcements above or below the table/grid
+- Inserting analytics widgets or dashboards
+- Adding custom promotional content
+- Implementing page-specific functionality that doesn't fit into standard patterns
+
+### Configuration Structure
+
+Slots are configured in the collection page configuration using the `CustomComponentConfig` structure:
+
+```json
+{
+  "type": "custom",
+  "id": "myCustomSlot"
+}
+```
+
+**Key Properties:**
+- `type`: Must be set to `"custom"` to identify this as a slot component
+- `id`: A unique identifier that maps to your slot component implementation
+
+### Component Positioning
+
+Slot components can be positioned anywhere within the `components` array of a collection page. They will be rendered in the exact order specified in the configuration:
+
+```json
+{
+  "type": "collectionPage",
+  "collectionPage": {
+    "components": [
+      {
+        "type": "custom",
+        "id": "topBanner"
+      },
+      {
+        "type": "collection",
+        "collection": {
+          "collectionId": "MyCollection"
+        },
+        "layout": [...]
+      },
+      {
+        "type": "custom",
+        "id": "bottomStats"
+      }
+    ]
+  }
+}
+```
+
+This configuration will render:
+1. The custom `topBanner` component at the top
+2. The main collection component (table/grid) in the middle
+3. The custom `bottomStats` component at the bottom
+
+### Implementation Structure
+
+#### Creating Slot Components
+
+Slot components are standard React functional components that take no props:
+
+```tsx
+import React from 'react';
+import { Box, Card, Text, Button } from '@wix/design-system';
+
+export const TopBannerComponent: React.FC = () => {
+  return (
+    <Card>
+      <Card.Content>
+        <Box direction="vertical" gap={2}>
+          <Text size="large" weight="bold">Welcome to Pet Management</Text>
+          <Text>Manage all your pets from this central dashboard.</Text>
+          <Button size="small">Get Started</Button>
+        </Box>
+      </Card.Content>
+    </Card>
+  );
+};
+
+export const BottomStatsComponent: React.FC = () => {
+  return (
+    <Card>
+      <Card.Content>
+        <Box direction="horizontal" gap={4}>
+          <Box direction="vertical" gap={1}>
+            <Text size="large" weight="bold">47</Text>
+            <Text size="small">Total Pets</Text>
+          </Box>
+          <Box direction="vertical" gap={1}>
+            <Text size="large" weight="bold">12</Text>
+            <Text size="small">Available for Adoption</Text>
+          </Box>
+        </Box>
+      </Card.Content>
+    </Card>
+  );
+};
+```
+
+#### Creating the Slots Hook
+
+In `components/slots/index.tsx`:
+
+```tsx
+import { TopBannerComponent } from './TopBannerComponent';
+import { BottomStatsComponent } from './BottomStatsComponent';
+
+export const useSlots = () => {
+  // You can access React context and other hooks here
+  return {
+    topBanner: TopBannerComponent,
+    bottomStats: BottomStatsComponent
+  };
+};
+```
+
+**Important:** Every time you create a new slot component, you must import it and add it to the `useSlots` hook return object. The key in the return object must match the `id` specified in your JSON configuration.
+
+#### Registering Slots in Your Page
+
+In your main page component:
+
+```tsx
+import { useSlots } from '../components/slots';
+
+export default function YourPage() {
+  const slots = useSlots();
+
+  return (
+    <PatternsWizardOverridesProvider value={{ slots }}>
+      <AutoPatternsApp configuration={config} />
+    </PatternsWizardOverridesProvider>
+  );
+}
+```
+
+### Important Guidelines for Slots
+
+1. **Component Signature**: Slot components must be React functional components with no props: `React.FC`
+2. **Rendering Order**: Components render in the exact order specified in the `components` array
+3. **Performance**: Slot components re-render with the page, so optimize for performance if needed
+4. **Styling**: Follow the design system patterns and responsive design principles
+
+
+**Important:** Every time you create a new slot component, you must import it and add it to the `useSlots` hook return object in the `./components/slots/index.tsx` file. The key must match the `id` specified in your JSON configuration.
+
+Slots provide a powerful way to enhance collection pages with custom functionality while maintaining the structure and features of the AutoPatterns system.

package/dist/esm/components/AutoPatternsCollectionComponent/AutoPatternsCollectionComponent.js

@@ -0,0 +1,71 @@
+import { AutoPatternsTableGridSwitch } from '../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch';
+import { AutoPatternsTable } from '../AutoPatternsTable';
+import { AutoPatternsGrid } from '../AutoPatternsGrid';
+import { SchemaProvider } from '../../providers';
+import { SkeletonCollection } from '../AutoPatternsCollectionPageContent/SkeletonCollection';
+import React, { useMemo } from 'react';
+export const AutoPatternsCollectionComponent = _ref => {
+  let {
+    component,
+    index
+  } = _ref;
+  const {
+    layout,
+    ...sharedConfig
+  } = component;
+  const memoized = useMemo(() => {
+    if (!layout?.length) {
+      return {
+        componentToRender: null,
+        componentType: 'Table'
+      };
+    }
+    const tableConfig = layout.find(item => item.type === 'Table')?.table;
+    const gridConfig = layout.find(item => item.type === 'Grid')?.grid;
+    let componentType = 'Table';
+    let componentToRender = null;
+    if (tableConfig && gridConfig) {
+      const config = {
+        ...sharedConfig,
+        ...tableConfig,
+        ...gridConfig
+      };
+      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsTableGridSwitch, {
+        configuration: config
+      });
+    } else if (tableConfig) {
+      const config = {
+        ...sharedConfig,
+        ...tableConfig
+      };
+      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsTable, {
+        configuration: config
+      });
+    } else if (gridConfig) {
+      componentType = 'Grid';
+      const config = {
+        ...sharedConfig,
+        ...gridConfig
+      };
+      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsGrid, {
+        configuration: config
+      });
+    }
+    return {
+      componentToRender,
+      componentType
+    };
+  }, [layout, sharedConfig]);
+  const {
+    componentToRender,
+    componentType
+  } = memoized;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, componentToRender ? /*#__PURE__*/React.createElement(SchemaProvider, {
+    key: `${sharedConfig.collection.collectionId}-${index}`,
+    collection: sharedConfig.collection,
+    skeleton: /*#__PURE__*/React.createElement(SkeletonCollection, {
+      componentType: componentType
+    })
+  }, componentToRender) : null);
+};
+//# sourceMappingURL=AutoPatternsCollectionComponent.js.map

package/dist/esm/components/AutoPatternsCollectionComponent/AutoPatternsCollectionComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AutoPatternsTableGridSwitch","AutoPatternsTable","AutoPatternsGrid","SchemaProvider","SkeletonCollection","React","useMemo","AutoPatternsCollectionComponent","_ref","component","index","layout","sharedConfig","memoized","length","componentToRender","componentType","tableConfig","find","item","type","table","gridConfig","grid","config","createElement","configuration","Fragment","key","collection","collectionId","skeleton"],"sources":["../../../../src/components/AutoPatternsCollectionComponent/AutoPatternsCollectionComponent.tsx"],"sourcesContent":["import { CollectionComponentConfig } from '../../types';\nimport { AutoPatternsTableGridSwitch } from '../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch';\nimport { AutoPatternsTable } from '../AutoPatternsTable';\nimport { AutoPatternsGrid } from '../AutoPatternsGrid';\nimport { SchemaProvider } from '../../providers';\nimport { SkeletonCollection } from '../AutoPatternsCollectionPageContent/SkeletonCollection';\nimport React, { useMemo } from 'react';\n\nexport const AutoPatternsCollectionComponent = ({\n  component,\n  index,\n}: {\n  component: CollectionComponentConfig;\n  index: number;\n}) => {\n  const { layout, ...sharedConfig } = component;\n\n  const memoized = useMemo(() => {\n    if (!layout?.length) {\n      return {\n        componentToRender: null,\n        componentType: 'Table' as 'Table' | 'Grid',\n      };\n    }\n\n    const tableConfig = layout.find((item) => item.type === 'Table')?.table;\n    const gridConfig = layout.find((item) => item.type === 'Grid')?.grid;\n\n    let componentType: 'Table' | 'Grid' = 'Table';\n    let componentToRender: React.ReactNode = null;\n\n    if (tableConfig && gridConfig) {\n      const config = {\n        ...sharedConfig,\n        ...tableConfig,\n        ...gridConfig,\n      };\n      componentToRender = (\n        <AutoPatternsTableGridSwitch configuration={config} />\n      );\n    } else if (tableConfig) {\n      const config = { ...sharedConfig, ...tableConfig };\n      componentToRender = <AutoPatternsTable configuration={config} />;\n    } else if (gridConfig) {\n      componentType = 'Grid';\n      const config = { ...sharedConfig, ...gridConfig };\n      componentToRender = <AutoPatternsGrid configuration={config} />;\n    }\n\n    return { componentToRender, componentType };\n  }, [layout, sharedConfig]);\n\n  const { componentToRender, componentType } = memoized;\n\n  return (\n    <>\n      {componentToRender ? (\n        <SchemaProvider\n          key={`${sharedConfig.collection.collectionId}-${index}`}\n          collection={sharedConfig.collection}\n          skeleton={<SkeletonCollection componentType={componentType} />}\n        >\n          {componentToRender}\n        </SchemaProvider>\n      ) : null}\n    </>\n  );\n};\n"],"mappings":"AACA,SAASA,2BAA2B,QAAQ,4DAA4D;AACxG,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,kBAAkB,QAAQ,yDAAyD;AAC5F,OAAOC,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,OAAO,MAAMC,+BAA+B,GAAGC,IAAA,IAMzC;EAAA,IAN0C;IAC9CC,SAAS;IACTC;EAIF,CAAC,GAAAF,IAAA;EACC,MAAM;IAAEG,MAAM;IAAE,GAAGC;EAAa,CAAC,GAAGH,SAAS;EAE7C,MAAMI,QAAQ,GAAGP,OAAO,CAAC,MAAM;IAC7B,IAAI,CAACK,MAAM,EAAEG,MAAM,EAAE;MACnB,OAAO;QACLC,iBAAiB,EAAE,IAAI;QACvBC,aAAa,EAAE;MACjB,CAAC;IACH;IAEA,MAAMC,WAAW,GAAGN,MAAM,CAACO,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,KAAK,OAAO,CAAC,EAAEC,KAAK;IACvE,MAAMC,UAAU,GAAGX,MAAM,CAACO,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,KAAK,MAAM,CAAC,EAAEG,IAAI;IAEpE,IAAIP,aAA+B,GAAG,OAAO;IAC7C,IAAID,iBAAkC,GAAG,IAAI;IAE7C,IAAIE,WAAW,IAAIK,UAAU,EAAE;MAC7B,MAAME,MAAM,GAAG;QACb,GAAGZ,YAAY;QACf,GAAGK,WAAW;QACd,GAAGK;MACL,CAAC;MACDP,iBAAiB,gBACfV,KAAA,CAAAoB,aAAA,CAACzB,2BAA2B;QAAC0B,aAAa,EAAEF;MAAO,CAAE,CACtD;IACH,CAAC,MAAM,IAAIP,WAAW,EAAE;MACtB,MAAMO,MAAM,GAAG;QAAE,GAAGZ,YAAY;QAAE,GAAGK;MAAY,CAAC;MAClDF,iBAAiB,gBAAGV,KAAA,CAAAoB,aAAA,CAACxB,iBAAiB;QAACyB,aAAa,EAAEF;MAAO,CAAE,CAAC;IAClE,CAAC,MAAM,IAAIF,UAAU,EAAE;MACrBN,aAAa,GAAG,MAAM;MACtB,MAAMQ,MAAM,GAAG;QAAE,GAAGZ,YAAY;QAAE,GAAGU;MAAW,CAAC;MACjDP,iBAAiB,gBAAGV,KAAA,CAAAoB,aAAA,CAACvB,gBAAgB;QAACwB,aAAa,EAAEF;MAAO,CAAE,CAAC;IACjE;IAEA,OAAO;MAAET,iBAAiB;MAAEC;IAAc,CAAC;EAC7C,CAAC,EAAE,CAACL,MAAM,EAAEC,YAAY,CAAC,CAAC;EAE1B,MAAM;IAAEG,iBAAiB;IAAEC;EAAc,CAAC,GAAGH,QAAQ;EAErD,oBACER,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAAsB,QAAA,QACGZ,iBAAiB,gBAChBV,KAAA,CAAAoB,aAAA,CAACtB,cAAc;IACbyB,GAAG,EAAE,GAAGhB,YAAY,CAACiB,UAAU,CAACC,YAAY,IAAIpB,KAAK,EAAG;IACxDmB,UAAU,EAAEjB,YAAY,CAACiB,UAAW;IACpCE,QAAQ,eAAE1B,KAAA,CAAAoB,aAAA,CAACrB,kBAAkB;MAACY,aAAa,EAAEA;IAAc,CAAE;EAAE,GAE9DD,iBACa,CAAC,GACf,IACJ,CAAC;AAEP,CAAC","ignoreList":[]}

package/dist/esm/components/AutoPatternsCollectionPage/AutoPatternsCollectionPage.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { CollectionPage } from '@wix/patterns/page';
 import { AutoPatternsCollectionPageContent } from '../AutoPatternsCollectionPageContent';
-import { usePatternsWizardOverridesContext } from '../../providers';
 import { useCollectionPageActions } from '../../hooks/useCollectionPageActions';
 export const AutoPatternsCollectionPage = _ref => {
   let {
@@ -14,7 +13,6 @@ export const AutoPatternsCollectionPage = _ref => {
   const actions = useCollectionPageActions({
     collectionPageActions: configuration.actions
   });
-  const context = usePatternsWizardOverridesContext();
   return /*#__PURE__*/React.createElement(CollectionPage, {
     height: "100vh",
     dataHook: "auto-patterns-page"
@@ -23,7 +21,7 @@ export const AutoPatternsCollectionPage = _ref => {
     subtitle: subtitle,
     primaryAction: actions.primaryActions,
     secondaryActions: actions.secondaryActions
-  }), /*#__PURE__*/React.createElement(CollectionPage.Content, null, context != null && context.HeaderAddon ? /*#__PURE__*/React.createElement(context.HeaderAddon, null) : null, /*#__PURE__*/React.createElement(AutoPatternsCollectionPageContent, {
+  }), /*#__PURE__*/React.createElement(CollectionPage.Content, null, /*#__PURE__*/React.createElement(AutoPatternsCollectionPageContent, {
     configuration: configuration
   })));
 };

package/dist/esm/components/AutoPatternsCollectionPage/AutoPatternsCollectionPage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","CollectionPage","AutoPatternsCollectionPageContent","usePatternsWizardOverridesContext","useCollectionPageActions","AutoPatternsCollectionPage","_ref","configuration","title","subtitle","actions","collectionPageActions","context","createElement","height","dataHook","Header","primaryAction","primaryActions","secondaryActions","Content","HeaderAddon"],"sources":["../../../../src/components/AutoPatternsCollectionPage/AutoPatternsCollectionPage.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionPage } from '@wix/patterns/page';\nimport { AutoPatternsCollectionPageContent } from '../AutoPatternsCollectionPageContent';\nimport { usePatternsWizardOverridesContext } from '../../providers';\nimport { CollectionPageConfig } from '../../types/CollectionPageConfig';\nimport { useCollectionPageActions } from '../../hooks/useCollectionPageActions';\n\nexport interface AutoPatternsCollectionPageProps {\n  configuration: CollectionPageConfig;\n}\n\nexport const AutoPatternsCollectionPage: React.FC<\n  AutoPatternsCollectionPageProps\n> = ({ configuration }) => {\n  const { title, subtitle } = configuration;\n\n  const actions = useCollectionPageActions({\n    collectionPageActions: configuration.actions,\n  });\n\n  const context = usePatternsWizardOverridesContext();\n\n  return (\n    <CollectionPage height=\"100vh\" dataHook=\"auto-patterns-page\">\n      <CollectionPage.Header\n        title={title}\n        subtitle={subtitle}\n        primaryAction={actions.primaryActions}\n        secondaryActions={actions.secondaryActions}\n      />\n      <CollectionPage.Content>\n        {context?.HeaderAddon ? <context.HeaderAddon /> : null}\n        <AutoPatternsCollectionPageContent configuration={configuration} />\n      </CollectionPage.Content>\n    </CollectionPage>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,iCAAiC,QAAQ,sCAAsC;AACxF,SAASC,iCAAiC,QAAQ,iBAAiB;AAEnE,SAASC,wBAAwB,QAAQ,sCAAsC;AAM/E,OAAO,MAAMC,0BAEZ,GAAGC,IAAA,IAAuB;EAAA,IAAtB;IAAEC;EAAc,CAAC,GAAAD,IAAA;EACpB,MAAM;IAAEE,KAAK;IAAEC;EAAS,CAAC,GAAGF,aAAa;EAEzC,MAAMG,OAAO,GAAGN,wBAAwB,CAAC;IACvCO,qBAAqB,EAAEJ,aAAa,CAACG;EACvC,CAAC,CAAC;EAEF,MAAME,OAAO,GAAGT,iCAAiC,CAAC,CAAC;EAEnD,oBACEH,KAAA,CAAAa,aAAA,CAACZ,cAAc;IAACa,MAAM,EAAC,OAAO;IAACC,QAAQ,EAAC;EAAoB,gBAC1Df,KAAA,CAAAa,aAAA,CAACZ,cAAc,CAACe,MAAM;IACpBR,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBQ,aAAa,EAAEP,OAAO,CAACQ,cAAe;IACtCC,gBAAgB,EAAET,OAAO,CAACS;EAAiB,CAC5C,CAAC,eACFnB,KAAA,CAAAa,aAAA,CAACZ,cAAc,CAACmB,OAAO,QACpBR,OAAO,YAAPA,OAAO,CAAES,WAAW,gBAAGrB,KAAA,CAAAa,aAAA,CAACD,OAAO,CAACS,WAAW,MAAE,CAAC,GAAG,IAAI,eACtDrB,KAAA,CAAAa,aAAA,CAACX,iCAAiC;IAACK,aAAa,EAAEA;EAAc,CAAE,CAC5C,CACV,CAAC;AAErB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","CollectionPage","AutoPatternsCollectionPageContent","useCollectionPageActions","AutoPatternsCollectionPage","_ref","configuration","title","subtitle","actions","collectionPageActions","createElement","height","dataHook","Header","primaryAction","primaryActions","secondaryActions","Content"],"sources":["../../../../src/components/AutoPatternsCollectionPage/AutoPatternsCollectionPage.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionPage } from '@wix/patterns/page';\nimport { AutoPatternsCollectionPageContent } from '../AutoPatternsCollectionPageContent';\nimport { CollectionPageConfig } from '../../types/CollectionPageConfig';\nimport { useCollectionPageActions } from '../../hooks/useCollectionPageActions';\n\nexport interface AutoPatternsCollectionPageProps {\n  configuration: CollectionPageConfig;\n}\n\nexport const AutoPatternsCollectionPage: React.FC<\n  AutoPatternsCollectionPageProps\n> = ({ configuration }) => {\n  const { title, subtitle } = configuration;\n\n  const actions = useCollectionPageActions({\n    collectionPageActions: configuration.actions,\n  });\n\n  return (\n    <CollectionPage height=\"100vh\" dataHook=\"auto-patterns-page\">\n      <CollectionPage.Header\n        title={title}\n        subtitle={subtitle}\n        primaryAction={actions.primaryActions}\n        secondaryActions={actions.secondaryActions}\n      />\n      <CollectionPage.Content>\n        <AutoPatternsCollectionPageContent configuration={configuration} />\n      </CollectionPage.Content>\n    </CollectionPage>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,iCAAiC,QAAQ,sCAAsC;AAExF,SAASC,wBAAwB,QAAQ,sCAAsC;AAM/E,OAAO,MAAMC,0BAEZ,GAAGC,IAAA,IAAuB;EAAA,IAAtB;IAAEC;EAAc,CAAC,GAAAD,IAAA;EACpB,MAAM;IAAEE,KAAK;IAAEC;EAAS,CAAC,GAAGF,aAAa;EAEzC,MAAMG,OAAO,GAAGN,wBAAwB,CAAC;IACvCO,qBAAqB,EAAEJ,aAAa,CAACG;EACvC,CAAC,CAAC;EAEF,oBACET,KAAA,CAAAW,aAAA,CAACV,cAAc;IAACW,MAAM,EAAC,OAAO;IAACC,QAAQ,EAAC;EAAoB,gBAC1Db,KAAA,CAAAW,aAAA,CAACV,cAAc,CAACa,MAAM;IACpBP,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBO,aAAa,EAAEN,OAAO,CAACO,cAAe;IACtCC,gBAAgB,EAAER,OAAO,CAACQ;EAAiB,CAC5C,CAAC,eACFjB,KAAA,CAAAW,aAAA,CAACV,cAAc,CAACiB,OAAO,qBACrBlB,KAAA,CAAAW,aAAA,CAACT,iCAAiC;IAACI,aAAa,EAAEA;EAAc,CAAE,CAC5C,CACV,CAAC;AAErB,CAAC","ignoreList":[]}

package/dist/esm/components/AutoPatternsCollectionPageContent/AutoPatternsCollectionPageContent.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import { AutoPatternsTable } from '../AutoPatternsTable';
-import { AutoPatternsGrid } from '../AutoPatternsGrid';
-import { AutoPatternsTableGridSwitch } from '../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch';
-import { SchemaProvider } from '../../providers';
-import { SkeletonCollection } from './SkeletonCollection';
+import { usePatternsWizardOverridesContext } from '../../providers';
+import { AutoPatternsCollectionComponent } from '../AutoPatternsCollectionComponent/AutoPatternsCollectionComponent';
 export const AutoPatternsCollectionPageContent = _ref => {
   let {
     configuration
@@ -11,53 +8,24 @@ export const AutoPatternsCollectionPageContent = _ref => {
   const {
     components
   } = configuration;
+  const overrides = usePatternsWizardOverridesContext();
   return /*#__PURE__*/React.createElement(React.Fragment, null, components.map((component, index) => {
-    var _layout$find, _layout$find2;
-    const {
-      layout,
-      ...sharedConfig
-    } = component;
-    if (!(layout != null && layout.length)) {
-      return null;
-    }
-    const tableConfig = (_layout$find = layout.find(item => item.type === 'Table')) == null ? void 0 : _layout$find.table;
-    const gridConfig = (_layout$find2 = layout.find(item => item.type === 'Grid')) == null ? void 0 : _layout$find2.grid;
-    let componentType = 'Table';
-    let componentToRender = null;
-    if (tableConfig && gridConfig) {
-      const config = {
-        ...sharedConfig,
-        ...tableConfig,
-        ...gridConfig
-      };
-      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsTableGridSwitch, {
-        configuration: config
-      });
-    } else if (tableConfig) {
-      const config = {
-        ...sharedConfig,
-        ...tableConfig
-      };
-      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsTable, {
-        configuration: config
+    if (component.type === 'collection') {
+      return /*#__PURE__*/React.createElement(AutoPatternsCollectionComponent, {
+        key: `collection-${component.collection.collectionId}-${index}`,
+        component: component,
+        index: index
       });
-    } else if (gridConfig) {
-      componentType = 'Grid';
-      const config = {
-        ...sharedConfig,
-        ...gridConfig
-      };
-      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsGrid, {
-        configuration: config
+    } else if (component.type === 'custom') {
+      const CustomComponent = overrides?.slots?.[component.id];
+      if (!CustomComponent) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(CustomComponent, {
+        key: `custom-${component.id}-${index}`
       });
     }
-    return componentToRender ? /*#__PURE__*/React.createElement(SchemaProvider, {
-      key: `${sharedConfig.collection.collectionId}-${index}`,
-      collection: sharedConfig.collection,
-      skeleton: /*#__PURE__*/React.createElement(SkeletonCollection, {
-        componentType: componentType
-      })
-    }, componentToRender) : null;
+    return null;
   }).filter(Boolean));
 };
 //# sourceMappingURL=AutoPatternsCollectionPageContent.js.map