@wix/ditto-codegen-public 1.0.0

package/dist/examples-apps/chart-widget/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "chart-widget",
+  "version": "1.0.0",
+  "dependencies": {
+    "@wix/design-system": "^1.0.0",
+    "@wix/editor": "^1.0.0",
+    "@wix/wix-ui-icons-common": "^3.0.0",
+    "react-to-webcomponent": "^2.0.0",
+    "recharts": "^2.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.4.0"
+  },
+  "scripts": {
+    "build": "wix app build",
+    "release": "wix app release",
+    "dev": "wix app dev",
+    "preview": "wix app preview",
+    "logs": "wix app logs",
+    "generate": "wix app generate",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/dist/examples-apps/chart-widget/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/chart-widget/src/site/widgets/custom-elements/chart-widget/common.ts

@@ -0,0 +1,20 @@
+export type ChartItem = {
+  name: string;
+  value: number;
+  color: string;
+};
+
+export const DEFAULT_TYPE = 'pie';
+export const DEFAULT_ITEMS: ChartItem[] = [
+  { name: 'Yes', value: 20, color: '#F6B4EB' },
+  { name: 'No', value: 10, color: '#FF5B37' },
+];
+
+export type LegendStyle = {
+  font: string;
+  textDecoration?: string;
+};
+
+export const DEFAULT_LEGEND_STYLE: LegendStyle = {
+  font: 'var(--wst-font-style-body-small, inherit)',
+};

package/dist/examples-apps/chart-widget/src/site/widgets/custom-elements/chart-widget/element/bar-chart.tsx

@@ -0,0 +1,53 @@
+import React, { type FC } from 'react';
+import {
+  Bar,
+  BarChart as RechartsBarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import type { ChartItem, LegendStyle } from '../common.js';
+
+type Props = {
+  items: ChartItem[];
+  legendStyle?: LegendStyle;
+};
+
+export const BarChart: FC<Props> = ({ items, legendStyle }) => {
+  const data = [
+    {
+      name: 'Slices',
+      [items[0].name]: items[0].value,
+      [items[1].name]: items[1].value,
+    },
+  ];
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <RechartsBarChart
+        data={data}
+        margin={{
+          top: 10,
+          right: 10,
+          left: 10,
+          bottom: 10,
+        }}
+      >
+        <CartesianGrid strokeDasharray="3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Legend layout="horizontal" verticalAlign="bottom" wrapperStyle={legendStyle} />
+        {items.map((item, index) => (
+          <Bar
+            key={index}
+            dataKey={item.name}
+            fill={item.color}
+            legendType="line"
+          />
+        ))}
+      </RechartsBarChart>
+    </ResponsiveContainer>
+  );
+};

package/dist/examples-apps/chart-widget/src/site/widgets/custom-elements/chart-widget/element/pie-chart.tsx

@@ -0,0 +1,40 @@
+import React, { type FC } from 'react';
+import {
+  Cell,
+  Legend,
+  Pie,
+  PieChart as RechartsPieChart,
+  ResponsiveContainer,
+} from 'recharts';
+import type { ChartItem, LegendStyle } from '../common.js';
+
+type Props = {
+  items: ChartItem[];
+  legendStyle?: LegendStyle;
+};
+
+export const PieChart: FC<Props> = ({ items, legendStyle }) => {
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <RechartsPieChart>
+        <Legend layout="horizontal" verticalAlign="middle" wrapperStyle={legendStyle}/>
+        <Pie
+          data={items}
+          cx="50%"
+          cy="50%"
+          legendType="line"
+          label={true}
+          innerRadius="60%"
+          outerRadius="90%"
+          paddingAngle={1}
+          animationDuration={0}
+          dataKey="value"
+        >
+          {items.map((entry, index) => (
+            <Cell key={index} fill={entry.color} />
+          ))}
+        </Pie>
+      </RechartsPieChart>
+    </ResponsiveContainer>
+  );
+};

package/dist/examples-apps/chart-widget/src/site/widgets/custom-elements/chart-widget/element.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://dev.wix.com/wix-cli/schemas/custom-element.json",
+  "id": "9f661fe2-899c-45a3-9c30-03d2e3567691",
+  "name": "Chart Widget",
+  "width": {
+    "defaultWidth": 400,
+    "allowStretch": true
+  },
+  "height": {
+    "defaultHeight": 400
+  },
+  "installation": {
+    "autoAddToSite": true,
+    "essential": false
+  },
+  "presets": [{
+    "id": "52435da1-87d8-4fbe-aaa0-71723288b16e",
+    "thumbnailUrl": "../../../../../assets/chart-widget/thumbnail.png"
+  }]
+}

package/dist/examples-apps/chart-widget/src/site/widgets/custom-elements/chart-widget/element.tsx

@@ -0,0 +1,53 @@
+import React, { type FC, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import reactToWebComponent from 'react-to-webcomponent';
+import {
+  DEFAULT_TYPE,
+  DEFAULT_ITEMS,
+  type ChartItem,
+  DEFAULT_LEGEND_STYLE,
+  type LegendStyle,
+} from './common.js';
+import { BarChart } from './element/bar-chart.js';
+import { PieChart } from './element/pie-chart.js';
+
+type Props = {
+  type: 'pie' | 'bar';
+  items: ChartItem[];
+  legendStyle?: LegendStyle;
+};
+
+const CustomElement: FC<Props> = ({
+  type = DEFAULT_TYPE,
+  items = DEFAULT_ITEMS,
+  legendStyle = DEFAULT_LEGEND_STYLE,
+}) => {
+  const Chart = useMemo(() => {
+    const charts = {
+      pie: PieChart,
+      bar: BarChart,
+    };
+    return charts[type];
+  }, [type]);
+
+  return <Chart items={items} legendStyle={legendStyle} />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const WrappedCustomElement = (props: any) => <CustomElement {...props} />;
+
+const customElement = reactToWebComponent(
+  WrappedCustomElement,
+  React,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ReactDOM as any,
+  {
+    props: {
+      type: 'string',
+      items: 'json',
+      legendStyle: 'json',
+    },
+  }
+);
+
+export default customElement;

package/dist/examples-apps/chart-widget/src/site/widgets/custom-elements/chart-widget/panel/chart-type.tsx

@@ -0,0 +1,47 @@
+import React, { type FC } from 'react';
+import { Box, FieldSet, SidePanel, Thumbnail } from '@wix/design-system';
+import { PieChart, BarChartSplit } from '@wix/wix-ui-icons-common';
+
+interface Props {
+  type: string;
+  onChange: (type: string) => void;
+}
+
+const options = [
+  { value: 'pie', icon: PieChart },
+  { value: 'bar', icon: BarChartSplit },
+];
+
+export const ChartType: FC<Props> = ({ type, onChange }) => {
+  return (
+    <SidePanel.Field>
+      <FieldSet
+        legend="Chart type"
+        direction="horizontal"
+        gap="medium"
+        columns="min-content"
+      >
+        {options.map(({ value, icon: Icon }) => (
+          <Thumbnail
+            key={value}
+            selected={type === value}
+            onClick={() => onChange(value)}
+            hideSelectedIcon
+            noPadding
+            width="38px"
+            height="38px"
+          >
+            <Box
+              height="100%"
+              width="100%"
+              align="center"
+              verticalAlign="middle"
+            >
+              <Icon />
+            </Box>
+          </Thumbnail>
+        ))}
+      </FieldSet>
+    </SidePanel.Field>
+  );
+};

package/dist/examples-apps/chart-widget/src/site/widgets/custom-elements/chart-widget/panel/slice.tsx

@@ -0,0 +1,72 @@
+import React, { type FC } from 'react';
+import {
+  FormField,
+  FillPreview,
+  Input,
+  NumberInput,
+  SidePanel,
+  Box,
+} from '@wix/design-system';
+import { inputs } from '@wix/editor';
+import type { ChartItem } from '../common.js';
+
+interface Props {
+  title: string;
+  item: ChartItem;
+  onChange: (item: ChartItem) => void;
+}
+
+const Slice: FC<Props> = ({ title, item, onChange }) => {
+  return (
+    <SidePanel.Section title={title}>
+      <SidePanel.Field>
+        <FormField label="Label">
+          <Input
+            value={item.name}
+            type="text"
+            onChange={(e) => {
+              const newItem = { ...item, name: e.target.value };
+              onChange(newItem);
+            }}
+            size="small"
+          />
+        </FormField>
+      </SidePanel.Field>
+      <SidePanel.Field>
+        <FormField label="Value">
+          <NumberInput
+            value={item.value}
+            min={0}
+            onChange={(value) => {
+              const newItem = { ...item, value: value ?? 0 };
+              onChange(newItem);
+            }}
+            size="small"
+            hideStepper
+          />
+        </FormField>
+      </SidePanel.Field>
+      <SidePanel.Field>
+        <FormField label="Color" labelPlacement="left" labelWidth="1fr">
+          <Box width="30px" height="30px">
+            <FillPreview
+              fill={item.color}
+              onClick={() =>
+                inputs.selectColor(item.color, {
+                  onChange: (value) => {
+                    if (value) {
+                      const newItem = { ...item, color: value };
+                      onChange(newItem);
+                    }
+                  },
+                })
+              }
+            />
+          </Box>
+        </FormField>
+      </SidePanel.Field>
+    </SidePanel.Section>
+  );
+};
+
+export default Slice;

package/dist/examples-apps/chart-widget/src/site/widgets/custom-elements/chart-widget/panel.tsx

@@ -0,0 +1,90 @@
+import React, { type FC, useState, useEffect } from 'react';
+import { inputs, widget } from '@wix/editor';
+import {
+  Box,
+  FormField,
+  SidePanel,
+  TextButton,
+  WixDesignSystemProvider
+} from '@wix/design-system';
+import '@wix/design-system/styles.global.css';
+import {
+  DEFAULT_TYPE,
+  DEFAULT_ITEMS,
+  type ChartItem,
+  DEFAULT_LEGEND_STYLE,
+  type LegendStyle
+} from './common.js';
+import Slice from './panel/slice.js';
+import { ChartType } from './panel/chart-type.js';
+
+const Panel: FC = () => {
+  const [loaded, setLoaded] = useState(false);
+  const [type, setType] = useState<string>('');
+  const [legendStyle, setLegendStyle] = useState<LegendStyle | undefined>(undefined);
+  const [items, setItems] = useState<ChartItem[]>([]);
+
+  useEffect(() => {
+    Promise.all([widget.getProp('type'), widget.getProp('items'), widget.getProp('legend-style')])
+      .then(([type, items, storedLegendStyle]) => {
+        setType(type ?? DEFAULT_TYPE);
+        setItems(JSON.parse(items) ?? DEFAULT_ITEMS);
+        setLegendStyle(JSON.parse(storedLegendStyle) ?? DEFAULT_LEGEND_STYLE);
+        setLoaded(true);
+      });
+  }, []);
+  useEffect(() => {
+    if (legendStyle?.font) {
+      void widget.setPreloadFonts([legendStyle.font])
+    }
+  }, [legendStyle]);
+
+  return (
+    <WixDesignSystemProvider>
+      <SidePanel width="300">
+        {loaded && (
+          <SidePanel.Content noPadding>
+            <ChartType
+              type={type}
+              onChange={(type) => {
+                setType(type);
+                widget.setProp('type', type);
+              }}
+            />
+            <SidePanel.Field>
+              <FormField label="Legend Style" labelPlacement="left" labelWidth="1fr">
+                <Box>
+                  <TextButton size="small" onClick={() => {
+                    void inputs.selectFont(legendStyle, {
+                      onChange: (value) => {
+                        if (value) {
+                          setLegendStyle(value);
+                          void widget.setProp('legend-style', JSON.stringify(value));
+                        }
+                      }
+                    });
+                  }}>Select</TextButton>
+                </Box>
+              </FormField>
+            </SidePanel.Field>
+            {items.map((item, index) => (
+              <Slice
+                key={index}
+                title={`Slice ${index + 1}`}
+                item={item}
+                onChange={(item) => {
+                  const newItems = [...items];
+                  newItems[index] = item;
+                  setItems(newItems);
+                  widget.setProp('items', JSON.stringify(newItems));
+                }}
+              />
+            ))}
+          </SidePanel.Content>
+        )}
+      </SidePanel>
+    </WixDesignSystemProvider>
+  );
+};
+
+export default Panel;

package/dist/examples-apps/chart-widget/tsconfig.json

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

package/dist/examples-apps/chart-widget/wix.config.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://dev.wix.com/wix-cli/schemas/wix-config.json",
+  "appId": "f957774c-d60b-4225-b02a-c44d8e6effd4",
+  "projectId": "chart-widget"
+}

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

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

package/dist/examples-apps/custom-products-catalog/README.md

@@ -0,0 +1,21 @@
+# custom-products-catalog
+
+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
+```