@wix/ditto-codegen-public 1.0.40 → 1.0.41

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

@@ -1,30 +0,0 @@
-{
-  "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

@@ -1,4 +0,0 @@
-/// <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

@@ -1,20 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,20 +0,0 @@
-{
-  "$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

@@ -1,53 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

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

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

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