@wix/ditto-codegen-public 1.0.0

package/dist/examples-apps/custom-products-catalog/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "custom-products-catalog",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@wix/dashboard": "^1.3.36",
+    "@wix/dashboard-react": "^1.0.26",
+    "@wix/design-system": "^1.214.1",
+    "@wix/patterns": "^1.265.0",
+    "@wix/stores": "^1.0.507",
+    "@wix/wix-ui-icons-common": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.0.0",
+    "@types/react-dom": "^16.0.0",
+    "@wix/cli": "^1.0.0",
+    "@wix/cli-app": "^1.0.0",
+    "@wix/sdk-types": "^1.0.0",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "typescript": "~5.8.2"
+  },
+  "scripts": {
+    "wix": "wix",
+    "build": "wix app build",
+    "release": "wix app release",
+    "dev": "wix app dev",
+    "preview": "wix app preview",
+    "generate": "wix app generate",
+    "logs": "wix app logs",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/dist/examples-apps/custom-products-catalog/src/dashboard/components/create-product.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  CustomModalLayout,
+  FormField,
+  Input,
+} from '@wix/design-system';
+import '@wix/design-system/styles.global.css';
+
+export function CreateProductModal({ showModal, onSave }: { showModal: boolean, onSave: (name: string) => void }) {
+  const [productName, setProductName] = useState('');
+  const [shown, setShown] = useState(showModal);
+
+  useEffect(() => {
+    setShown(showModal);
+  }, [showModal])
+
+  const toggleModal = () => {
+    setShown(!shown);
+    setProductName('');
+  };
+
+  return (
+    <Modal
+      isOpen={shown}
+      onRequestClose={toggleModal}
+      shouldCloseOnOverlayClick
+      screen="desktop"
+    >
+      <CustomModalLayout
+        title="Create Product"
+        primaryButtonProps={{
+          disabled: !productName,
+          children: 'Save',
+        }}
+        primaryButtonOnClick={() => {
+          onSave(productName)
+          setProductName('')
+        }}
+        secondaryButtonText="Cancel"
+        secondaryButtonOnClick={toggleModal}
+        onCloseButtonClick={toggleModal}
+        content={
+          <FormField label="Name">
+            <Input
+              value={productName}
+              onChange={(e) => setProductName(e.currentTarget.value)}
+            />
+          </FormField>
+        }
+      />
+    </Modal>
+  );
+}

package/dist/examples-apps/custom-products-catalog/src/dashboard/hooks/stores.ts

@@ -0,0 +1,60 @@
+import { products } from '@wix/stores';
+import { useCallback } from 'react';
+import { CollectionOptimisticActions } from '@wix/patterns';
+
+export function useCreateProduct(optimisticActions: CollectionOptimisticActions<products.Product, {}>) {
+  const { createProduct } = products;
+
+  return useCallback((productName: string) => {
+    const newProduct: products.Product = {
+      _id: Date().toString(),
+      name: productName,
+      _createdDate: new Date(),
+      lastUpdated: new Date(),
+      productType: products.ProductType.physical,
+      description: 'New Product Description',
+      priceData: {
+        currency: 'USD',
+        price: 10,
+      },
+    };
+
+    optimisticActions.createOne(newProduct, {
+      submit: async (products: products.Product[]) => {
+        const createdProduct = products[0];
+        const response = await createProduct(createdProduct);
+        return response.product ? [response.product] : [];
+      },
+
+      successToast: {
+        message: `${newProduct.name} was successfully created`,
+        type: 'SUCCESS',
+      },
+      errorToast: () => 'Failed to create product',
+    });
+  }, [optimisticActions, createProduct]);
+}
+
+export function useDeleteProducts(optimisticActions: CollectionOptimisticActions<products.Product, {}>) {
+  const { deleteProduct } = products;
+
+  return useCallback((productsToDelete: products.Product[] ) => {
+    optimisticActions.deleteMany(productsToDelete, {
+      submit: async (deletedProducts: products.Product[]) => (
+        await Promise.all(
+          deletedProducts.map((product) => deleteProduct(product._id!))
+        )
+      ),
+
+      successToast: {
+        message: `${
+          productsToDelete.length > 1 ? 'Products' : 'Product'
+        } deleted successfully`,
+        type: 'SUCCESS',
+      },
+      errorToast: () => `Failed to delete ${
+        productsToDelete.length > 1 ? 'Products' : 'Product'
+      }`,
+    });
+  }, [optimisticActions, deleteProduct]);
+}

package/dist/examples-apps/custom-products-catalog/src/dashboard/pages/page.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://dev.wix.com/wix-cli/schemas/dashboard-page.json",
+  "id": "e50ca567-c401-42a5-a7ef-49c55444d81e",
+  "title": "Custom Products Catalog"
+}

package/dist/examples-apps/custom-products-catalog/src/dashboard/pages/page.tsx

@@ -0,0 +1,297 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Text,
+  Image,
+  Breadcrumbs
+} from '@wix/design-system';
+import '@wix/design-system/styles.global.css';
+import { products } from '@wix/stores';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  useTableCollection,
+  Table,
+  PrimaryPageButton,
+  useOptimisticActions,
+  deleteSecondaryAction,
+  MultiBulkActionToolbar,
+  CustomColumns,
+  Filter,
+  CollectionToolbarFilters,
+  dateRangeFilter,
+  RangeItem,
+  DateRangeFilter,
+  RadioGroupFilter,
+  stringsArrayFilter,
+} from '@wix/patterns';
+import { withProviders } from '../withProviders';
+import { useCreateProduct, useDeleteProducts } from '../hooks/stores';
+import { CreateProductModal } from '../components/create-product';
+
+type TableFilters = {
+  productType: Filter<products.ProductType[]>;
+  lastUpdated: Filter<RangeItem<Date>>;
+}
+
+type SupportedQueryFields = Parameters<products.ProductsQueryBuilder['ascending']>[0] | Parameters<products.ProductsQueryBuilder['descending']>[0]
+
+const productTypeToDisplayName: {[key in products.ProductType] : string | undefined} = {
+  [products.ProductType.physical]: 'Physical',
+  [products.ProductType.digital]: 'Digital',
+  [products.ProductType.unspecified_product_type]: undefined
+}
+
+function Products() {
+  const [shown, setShown] = useState(false);
+
+  const { queryProducts, deleteProduct } = products;
+
+  const tableState = useTableCollection<products.Product, TableFilters>({
+    queryName: 'products-catalog',
+    itemKey: (product: products.Product) => product._id!,
+    itemName: (product: products.Product) => product.name!,
+    limit: 20,
+
+    fetchData: (query) => {
+      const { limit, offset, search, sort, filters } = query;
+      let queryBuilder = queryProducts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith("name", search);
+      }
+
+      if (filters) {
+        const { productType, lastUpdated } = filters
+
+        if (productType) {
+          queryBuilder = queryBuilder.in('productType', productType);
+        }
+
+        if (lastUpdated) {
+          if (lastUpdated.from) {
+            queryBuilder = queryBuilder.gt('lastUpdated', lastUpdated.from);
+          }
+
+          if (lastUpdated.to) {
+            queryBuilder = queryBuilder.lt('lastUpdated', lastUpdated.to);
+          }
+        }
+      }
+
+      if (sort) {
+        sort.forEach(s => {
+          const fieldName = s.fieldName as SupportedQueryFields;
+          if (s.order === 'asc') {
+            queryBuilder = queryBuilder.ascending(fieldName);
+          } else if (s.order === 'desc') {
+            queryBuilder = queryBuilder.descending(fieldName);
+          }
+        });
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => {
+        return {
+          items,
+          total,
+        };
+      });
+    },
+
+    fetchErrorMessage: () => 'Error fetching products',
+
+    filters: {
+      lastUpdated: dateRangeFilter(),
+      productType: stringsArrayFilter({ itemName: (p) => productTypeToDisplayName[p] ?? p })
+    },
+  });
+
+  const optimisticActions = useOptimisticActions(tableState.collection,
+    {
+      orderBy: () => [],
+
+      predicate: ({ search, filters }) => {
+        return (product) => {
+          if (search && !product.name?.startsWith(search)) {
+            return false;
+          }
+
+          if (filters.productType && product.productType && filters.productType.indexOf(product.productType) === -1) {
+            return false;
+          }
+
+          if (filters.lastUpdated && product.lastUpdated) {
+            const from = filters.lastUpdated.from
+            const to = filters.lastUpdated.to
+            const productLastUpdated = (new Date(product.lastUpdated)).getTime()
+
+            if (from && productLastUpdated < from.getTime()) {
+              return false
+            }
+
+            if (to && productLastUpdated > to.getTime()) {
+              return false
+            }
+          }
+
+          return true;
+        }
+      },
+    }
+  );
+
+  const createProduct = useCreateProduct(optimisticActions);
+
+  const deleteProducts = useDeleteProducts(optimisticActions);
+
+  return (
+    <CollectionPage height="100vh">
+      <CollectionPage.Header
+        title={{ text: 'Products' }}
+        breadcrumbs={
+          <Breadcrumbs
+            activeId="2"
+            items={[
+              { id: '1', value: 'Apps', disabled: true },
+              { id: '2', value: 'Products' },
+            ]}
+          />
+        }
+        primaryAction={
+          <PrimaryPageButton
+            text="Add Product"
+            onClick={() => setShown(!shown)}
+          />
+        }
+      />
+      <CollectionPage.Content>
+        <CreateProductModal showModal={shown} onSave={(productName: string) => {
+          createProduct(productName);
+          setShown(false);
+        }}/>
+
+        <Table
+          state={tableState}
+          maxSelection={20}
+          filters={
+            <CollectionToolbarFilters>
+              <RadioGroupFilter
+                accordionItemProps={{ label: 'Type' }}
+                filter={tableState.collection.filters.productType}
+                data={[products.ProductType.physical, products.ProductType.digital]}
+              />
+              <DateRangeFilter
+                filter={tableState.collection.filters.lastUpdated}
+                accordionItemProps={{ label: 'Last Updated' }}
+              />
+            </CollectionToolbarFilters>
+          }
+
+          bulkActionToolbar={({ selectedValues, openConfirmModal }) => {
+            const disabled = selectedValues.length > 20;
+            return (
+              <MultiBulkActionToolbar
+                primaryActionItems={[
+                  {
+                    label: 'Delete',
+                    tooltip: disabled
+                      ? 'Deleting is supported for up to 20 items'
+                      : undefined,
+                    disabled,
+                    onClick: () => {
+                      openConfirmModal({
+                        theme: 'destructive',
+                        primaryButtonOnClick: () => {
+                          deleteProducts(selectedValues);
+                        },
+                      });
+                    },
+                  },
+                ]}
+              />)
+          }}
+
+          customColumns={<CustomColumns />}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '72px',
+              render: (product) => <Image src={product.media?.mainMedia?.image?.url}/>,
+              reorderDisabled: true,
+              hiddenFromCustomColumnsSelection: true
+            },
+            {
+              id: 'name',
+              title: 'Product / Description',
+              render: (row: products.Product) => (
+                <Box direction="vertical" gap="3px">
+                  <Text size="medium" weight="normal">
+                    {row.name}
+                  </Text>
+                  <Text size="tiny" weight="thin" secondary>
+                    {row.description}
+                  </Text>
+                </Box>
+              ),
+              width: 'auto',
+              reorderDisabled: true,
+              hideable: false
+            },
+            {
+              id: 'price',
+              title: 'Price',
+              render: (row: products.Product) => `$${row.priceData?.price}`,
+              width: '100px',
+              sortable: true,
+            },
+            {
+              id: 'type',
+              title: 'Type',
+              render: (row: products.Product) => {
+                if (!row.productType) {
+                  return ''
+                }
+
+                return productTypeToDisplayName[row.productType] ?? row.productType
+              },
+              width: '100px',
+            },
+            {
+              id: 'last-updated',
+              title: 'Last Updated',
+              render: (row: products.Product) =>
+                row.lastUpdated
+                  ? new Date(row.lastUpdated).toLocaleDateString()
+                  : '',
+              width: '100px',
+              defaultHidden: true,
+            },
+          ]}
+
+          actionCell={(_product, _index, actionCellAPI) => ({
+              secondaryActions: [
+                deleteSecondaryAction({
+                  optimisticActions,
+                  actionCellAPI,
+                  submit: (products: products.Product[]) => (
+                    Promise.all(
+                      products.map((product: products.Product) => deleteProduct(product._id!))
+                    )
+                  ),
+                  successToast: {
+                    message: `${_product.name} deleted successfully.`,
+                    type: 'SUCCESS',
+                  },
+                  errorToast: () => 'Product deletion failed.',
+                }),
+              ]
+            }
+          )}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}
+
+export default withProviders(Products);

package/dist/examples-apps/custom-products-catalog/src/dashboard/pages/wix_logo.svg

@@ -0,0 +1,18 @@
+<svg width="166" height="64" viewBox="0 0 166 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_14809_9463)">
+    <path
+      d="M165.304 0H156.173C153.64 0 151.273 1.25433 149.85 3.35199L137.639 21.3662C137.313 21.844 136.608 21.844 136.283 21.3662L124.071 3.35199C122.651 1.25433 120.281 0 117.748 0H108.617L130.371 32.0894L108.737 64H117.868C120.401 64 122.769 62.7457 124.192 60.648L136.283 42.8126C136.608 42.3349 137.313 42.3349 137.639 42.8126L149.73 60.648C151.15 62.7457 153.52 64 156.053 64H165.184L143.551 32.0894L165.304 0Z"
+      fill="black" />
+    <path
+      d="M89.8281 6.54652V64H94.1922C97.8088 64 100.74 61.0697 100.74 57.4535V0H96.3755C92.7588 0 89.8281 2.93032 89.8281 6.54652Z"
+      fill="black" />
+    <path
+      d="M81.8276 0H77.944C73.6681 0 69.9633 2.95701 69.0158 7.12564L60.3278 45.3185L52.7234 9.66632C51.3168 3.0771 44.5559 -1.36641 37.6375 0.544431C33.2307 1.76139 29.9637 5.48434 29.0108 9.95455L21.4839 45.2705L12.8118 7.12831C11.8616 2.95968 8.15687 0 3.88092 0H0L14.5548 63.9973H20.0692C25.0738 63.9973 29.3978 60.4986 30.4415 55.604L39.7461 11.9401C39.8608 11.3984 40.3466 11.006 40.8991 11.006C41.4516 11.006 41.9374 11.3984 42.0522 11.9401L51.3648 55.6067C52.4084 60.5012 56.7324 63.9973 61.7371 63.9973H67.2702L81.8276 0Z"
+      fill="black" />
+  </g>
+  <defs>
+    <clipPath id="clip0_14809_9463">
+      <rect width="165.305" height="64" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/dist/examples-apps/custom-products-catalog/src/dashboard/withProviders.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { WixDesignSystemProvider } from '@wix/design-system';
+import { WixPatternsProvider } from '@wix/patterns/provider';
+import { withDashboard } from '@wix/dashboard-react';
+
+export function withProviders<P extends {} = {}>(Component: React.FC<P>) {
+  return withDashboard(function DashboardProviders(props: P) {
+    return (
+      <WixDesignSystemProvider>
+        <WixPatternsProvider>
+          <Component {...props} />
+        </WixPatternsProvider>
+      </WixDesignSystemProvider>
+    );
+  });
+}

package/dist/examples-apps/custom-products-catalog/src/env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="@wix/cli-app/client" />
+/// <reference types="@wix/sdk-types/client" />
+
+// NOTE: This file should not be edited. This is an auto-generated file.

package/dist/examples-apps/custom-products-catalog/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@wix/cli-app/tsconfig.app.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "types": ["react"]
+  },
+  "include": ["src"]
+}

package/dist/examples-apps/custom-products-catalog/wix.config.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://dev.wix.com/wix-cli/schemas/wix-config.json",
+  "appId": "04f0b8cf-a46f-46c1-bdab-d65e62e05de3",
+  "projectId": "custom-products-catalog"
+}

package/dist/examples-apps/inventory-countdown/.nvmrc

@@ -0,0 +1 @@
+22.10.0

package/dist/examples-apps/inventory-countdown/README.md

@@ -0,0 +1,21 @@
+# inventory-countdown
+
+This project was bootstrapped with [Create Wix App](https://www.npmjs.com/package/@wix/create-app).  
+Read more about it in the [Wix CLI for Apps
+ documentation](https://dev.wix.com/docs/build-apps/developer-tools/cli/get-started/about-the-wix-cli-for-apps).
+
+## Setup 🔧
+
+##### Install dependencies:
+
+```console
+npm install
+```
+
+## Available Scripts
+
+In the project directory, you can run:
+
+```console
+npm run dev
+```