@wix/ditto-codegen-public 1.0.274 → 1.0.276

package/dist/examples-apps/custom-element/countdown-widget/panel.tsx

@@ -1,146 +0,0 @@
-import React, { type FC, useState, useEffect, useCallback } from "react";
-import { widget } from "@wix/editor";
-import {
-  SidePanel,
-  WixDesignSystemProvider,
-  Input,
-  FormField,
-  TimeInput,
-  Box,
-} from "@wix/design-system";
-import "@wix/design-system/styles.global.css";
-import { ColorPickerField } from "./components/ColorPickerField";
-import { FontPickerField } from "./components/FontPickerField";
-import { parseTimeValue } from "./utils";
-
-const DEFAULT_BG_COLOR = "#0a0e27";
-const DEFAULT_TEXT_COLOR = "#00ff88";
-const DEFAULT_TEXT_FONT = "";
-const DEFAULT_TEXT_DECORATION = "";
-
-const Panel: FC = () => {
-  const [title, setTitle] = useState<string>("Countdown");
-  const [targetDate, setTargetDate] = useState<string>("");
-  const [targetTime, setTargetTime] = useState<string>("00:00");
-  const [bgColor, setBgColor] = useState<string>(DEFAULT_BG_COLOR);
-  const [textColor, setTextColor] = useState<string>(DEFAULT_TEXT_COLOR);
-  const [font, setFont] = useState({ font: DEFAULT_TEXT_FONT, textDecoration: DEFAULT_TEXT_DECORATION });
-
-  useEffect(() => {
-    Promise.all([
-      widget.getProp("title"),
-      widget.getProp("target-date"),
-      widget.getProp("target-time"),
-      widget.getProp("bg-color"),
-      widget.getProp("text-color"),
-      widget.getProp("font"),
-    ])
-      .then(([titleVal, dateVal, timeVal, bgColorVal, textColorVal, fontString]) => {
-        setTitle(titleVal || "Countdown");
-        setTargetDate(dateVal || "");
-        setTargetTime(timeVal || "00:00");
-        setBgColor(bgColorVal || DEFAULT_BG_COLOR);
-        setTextColor(textColorVal || DEFAULT_TEXT_COLOR);
-        setFont(JSON.parse(fontString || "{}"));
-      })
-      .catch((error) => console.error("Failed to fetch widget properties:", error));
-  }, []);
-
-  const handleTitleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const newTitle = event.target.value;
-    setTitle(newTitle);
-    widget.setProp("title", newTitle);
-  }, []);
-
-  const handleDateChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const newDate = event.target.value;
-    setTargetDate(newDate);
-    widget.setProp("target-date", newDate);
-  }, []);
-
-  const handleTimeChange = useCallback(({ date }: { date: Date }) => {
-    if (date) {
-      const hours = String(date.getHours()).padStart(2, '0');
-      const minutes = String(date.getMinutes()).padStart(2, '0');
-      const newTime = `${hours}:${minutes}`;
-      setTargetTime(newTime);
-      widget.setProp("target-time", newTime);
-    }
-  }, []);
-
-  const handleBgColorChange = (value: string) => {
-    setBgColor(value);
-    widget.setProp("bg-color", value);
-  };
-
-  const handleTextColorChange = (value: string) => {
-    setTextColor(value);
-    widget.setProp("text-color", value);
-  };
-
-  const handleFontChange = (value: { font: string; textDecoration: string }) => {
-    setFont(value);
-    widget.setProp("font", JSON.stringify(value));
-  };
-
-  return (
-    <WixDesignSystemProvider>
-      <SidePanel width="300" height="100vh">
-        <SidePanel.Header title="Countdown Settings" />
-        <SidePanel.Content noPadding stretchVertically>
-          <Box direction="vertical" gap="24px">
-            <SidePanel.Field>
-              <FormField label="Title" required>
-                <Input
-                  type="text"
-                  value={title}
-                  onChange={handleTitleChange}
-                  placeholder="Enter countdown title"
-                />
-              </FormField>
-            </SidePanel.Field>
-
-            <SidePanel.Field>
-              <FormField label="Target Date" required>
-                <Input
-                  type="date"
-                  value={targetDate}
-                  onChange={handleDateChange}
-                />
-              </FormField>
-            </SidePanel.Field>
-
-            <SidePanel.Field>
-              <FormField label="Target Time" required>
-                <TimeInput
-                  value={parseTimeValue(targetTime)}
-                  onChange={handleTimeChange}
-                />
-              </FormField>
-            </SidePanel.Field>
-
-            <ColorPickerField
-              label="Background Color"
-              value={bgColor}
-              onChange={handleBgColorChange}
-            />
-
-            <ColorPickerField
-              label="Text Color"
-              value={textColor}
-              onChange={handleTextColorChange}
-            />
-
-            <FontPickerField
-              label="Text Font"
-              value={font}
-              onChange={handleFontChange}
-            />
-          </Box>
-        </SidePanel.Content>
-      </SidePanel>
-    </WixDesignSystemProvider>
-  );
-};
-
-export default Panel;

package/dist/examples-apps/custom-element/countdown-widget/styles.ts

@@ -1,73 +0,0 @@
-import type React from 'react';
-
-interface StyleProps {
-  bgColor: string;
-  textColor: string;
-  textFont?: string;
-  textDecoration?: string;
-}
-
-export interface WidgetStyles {
-  wrapper: React.CSSProperties;
-  title: React.CSSProperties;
-  digits: React.CSSProperties;
-  block: React.CSSProperties;
-  number: React.CSSProperties;
-  label: React.CSSProperties;
-  separator: React.CSSProperties;
-  message: React.CSSProperties;
-}
-
-export function createStyles({ bgColor, textColor, textFont, textDecoration }: StyleProps): WidgetStyles {
-  return {
-    wrapper: {
-      backgroundColor: bgColor,
-      padding: '24px 32px',
-      textAlign: 'center',
-      display: 'inline-block',
-    },
-    title: {
-      font: textFont || '600 24px sans-serif',
-      color: textColor,
-      textDecoration,
-      marginBottom: '16px',
-    },
-    digits: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: '16px',
-    },
-    block: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      padding: '12px 16px',
-    },
-    number: {
-      font: textFont || '600 40px sans-serif',
-      color: textColor,
-      textDecoration,
-      lineHeight: 1,
-    },
-    label: {
-      fontSize: '12px',
-      marginTop: '8px',
-      color: textColor,
-      opacity: 0.7,
-    },
-    separator: {
-      font: textFont || '600 32px sans-serif',
-      color: textColor,
-      textDecoration,
-      lineHeight: 1,
-      opacity: 0.5,
-      marginBottom: '20px',
-    },
-    message: {
-      fontSize: '18px',
-      color: textColor,
-    },
-  };
-}
-

package/dist/examples-apps/custom-element/countdown-widget/utils.ts

@@ -1,46 +0,0 @@
-export interface TimeRemaining {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-  isExpired: boolean;
-}
-
-export const INITIAL_TIME: TimeRemaining = {
-  days: 0,
-  hours: 0,
-  minutes: 0,
-  seconds: 0,
-  isExpired: false,
-};
-
-export function calculateTimeRemaining(targetDate: string, targetTime: string): TimeRemaining {
-  const target = new Date(`${targetDate}T${targetTime}`);
-  const diff = target.getTime() - Date.now();
-
-  if (diff <= 0) {
-    return { ...INITIAL_TIME, isExpired: true };
-  }
-
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
-
-  return { days, hours, minutes, seconds, isExpired: false };
-}
-
-export function padNumber(value: number): string {
-  return String(value).padStart(2, '0');
-}
-
-export function parseTimeValue(timeString: string): Date {
-  const [hours, minutes] = timeString.split(':').map(Number);
-  const date = new Date();
-  date.setHours(hours || 0);
-  date.setMinutes(minutes || 0);
-  date.setSeconds(0);
-  date.setMilliseconds(0);
-  return date;
-}
-

package/dist/examples-apps/custom-element/countdown-widget/widget.tsx

@@ -1,97 +0,0 @@
-import React, { type FC, useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import reactToWebComponent from 'react-to-webcomponent';
-import { TimeBlock } from './components/TimeBlock';
-import { Separator } from './components/Separator';
-import { calculateTimeRemaining, padNumber, INITIAL_TIME, type TimeRemaining } from './utils';
-import { createStyles } from './styles';
-
-interface WidgetProps {
-  title?: string;
-  targetDate?: string;
-  targetTime?: string;
-  bgColor?: string;
-  textColor?: string;
-  font?: string;
-}
-
-const CustomElement: FC<WidgetProps> = ({
-  title = 'Countdown',
-  targetDate = '',
-  targetTime = '00:00',
-  bgColor = '#ffffff',
-  textColor = '#333333',
-  font = "{}",
-}) => {
-  const { font: textFont, textDecoration } = JSON.parse(font);
-  const [time, setTime] = useState<TimeRemaining>(INITIAL_TIME);
-  const styles = createStyles({ bgColor, textColor, textFont, textDecoration });
-
-  useEffect(() => {
-    if (!targetDate) return;
-
-    const update = () => setTime(calculateTimeRemaining(targetDate, targetTime));
-    update();
-
-    const interval = setInterval(update, 1000);
-    return () => clearInterval(interval);
-  }, [targetDate, targetTime]);
-
-  if (!targetDate) {
-    return (
-      <div style={styles.wrapper}>
-        {title && <div style={styles.title}>{title}</div>}
-        <div style={styles.message}>Set a target date</div>
-      </div>
-    );
-  }
-
-  if (time.isExpired) {
-    return (
-      <div style={styles.wrapper}>
-        {title && <div style={styles.title}>{title}</div>}
-        <div style={styles.message}>Event has started!</div>
-      </div>
-    );
-  }
-
-  const timeUnits = [
-    { value: time.days, label: 'Days' },
-    { value: time.hours, label: 'Hours' },
-    { value: time.minutes, label: 'Minutes' },
-    { value: time.seconds, label: 'Seconds' },
-  ];
-
-  return (
-    <div style={styles.wrapper}>
-      {title && <div style={styles.title}>{title}</div>}
-      <div style={styles.digits}>
-        {timeUnits.map((unit, index) => (
-          <React.Fragment key={unit.label}>
-            {index > 0 && <Separator style={styles.separator} />}
-            <TimeBlock
-              value={padNumber(unit.value)}
-              label={unit.label}
-              numberStyle={styles.number}
-              labelStyle={styles.label}
-              blockStyle={styles.block}
-            />
-          </React.Fragment>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const customElement = reactToWebComponent(CustomElement, React, ReactDOM, {
-  props: {
-    title: 'string',
-    targetDate: 'string',
-    targetTime: 'string',
-    bgColor: 'string',
-    textColor: 'string',
-    font: 'string',
-  },
-});
-
-export default customElement;