@wix/ditto-codegen-public 1.0.181 → 1.0.183

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

@@ -0,0 +1,27 @@
+import React, { type FC } from 'react';
+import { inputs } from '@wix/editor';
+import { FormField, Box, FillPreview, SidePanel } from '@wix/design-system';
+
+interface ColorPickerFieldProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const ColorPickerField: FC<ColorPickerFieldProps> = ({
+  label,
+  value,
+  onChange,
+}) => (
+  <SidePanel.Field>
+    <FormField label={label}>
+      <Box width="30px" height="30px">
+        <FillPreview
+          fill={value}
+          onClick={() => inputs.selectColor(value, { onChange })}
+        />
+      </Box>
+    </FormField>
+  </SidePanel.Field>
+);
+

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

@@ -0,0 +1,34 @@
+import React, { type FC } from 'react';
+import { inputs } from '@wix/editor';
+import { FormField, Button, Text, SidePanel } from '@wix/design-system';
+
+interface FontValue {
+  font: string;
+  textDecoration: string;
+}
+
+interface FontPickerFieldProps {
+  label: string;
+  value: FontValue;
+  onChange: (value: FontValue) => void;
+}
+
+export const FontPickerField: FC<FontPickerFieldProps> = ({
+  label,
+  value,
+  onChange,
+}) => (
+  <SidePanel.Field>
+    <FormField label={label}>
+      <Button
+        size="small"
+        priority="secondary"
+        onClick={() => inputs.selectFont(value, { onChange })}
+        fullWidth
+      >
+        <Text size="small" ellipsis>Change Font</Text>
+      </Button>
+    </FormField>
+  </SidePanel.Field>
+);
+

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

@@ -0,0 +1,10 @@
+import React, { type FC } from 'react';
+
+interface SeparatorProps {
+  style: React.CSSProperties;
+}
+
+export const Separator: FC<SeparatorProps> = ({ style }) => (
+  <span style={style}>:</span>
+);
+

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

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react';
+
+interface TimeBlockProps {
+  value: string;
+  label: string;
+  numberStyle: React.CSSProperties;
+  labelStyle: React.CSSProperties;
+  blockStyle: React.CSSProperties;
+}
+
+export const TimeBlock: FC<TimeBlockProps> = ({
+  value,
+  label,
+  numberStyle,
+  labelStyle,
+  blockStyle,
+}) => (
+  <div style={blockStyle}>
+    <div style={numberStyle}>{value}</div>
+    <div style={labelStyle}>{label}</div>
+  </div>
+);
+

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

@@ -0,0 +1,18 @@
+import { extensions } from '@wix/astro/builders';
+export const sitewidgetcountdownWidget = extensions.customElement({
+  id: '54db089e-aa5b-436a-9dfa-074f2efad2ce',
+  name: 'Countdown Widget',
+  tagName: 'countdown-widget',
+  element: './site/widgets/custom-elements/countdown-widget/widget.tsx',
+  settings: './site/widgets/custom-elements/countdown-widget/panel.tsx',
+  installation: {
+    autoAdd: true
+  },
+  width: {
+    defaultWidth: 500,
+    allowStretch: true
+  },
+  height: {
+    defaultHeight: 500
+  }
+})

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

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

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

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

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