@licklist/design 0.44.485-dev.63 → 0.44.485-dev.65

package/src/styles/widgets/WidgetBuilderForm.scss

@@ -1,51 +0,0 @@
-.widget-builder-form {
-  justify-content: space-between;
-
-  h2 {
-    font-size: 1.5rem;
-  }
-
-  h3 {
-    font-size: 1rem;
-    font-weight: 600;
-  }
-
-  h4 {
-    font-size: 0.875rem;
-    font-weight: 400;
-  }
-
-  p {
-    font-size: 0.8125rem;
-  }
-
-  input[type="text"],
-  select {
-    height: 2.5rem;
-    border-radius: 0.5rem;
-  }
-
-  button {
-    border-radius: 0.75rem;
-  }
-
-  .form-label {
-    font-size: 0.875rem;
-  }
-
-  &-customizations {
-    margin-bottom: 1rem;
-  }
-
-  &-right-column {
-    padding: 0;
-  }
-
-  &-grey {
-    height: fit-content;
-    margin-bottom: 2rem;
-    padding: 1.5rem;
-    background-color: #fafafa;
-    border-radius: 0.75rem;
-  }
-}

package/src/styles/widgets/WidgetTypeSelector.scss

@@ -1,6 +0,0 @@
-.widget-type-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 2rem;
-}

package/src/styles/widgets/_index.scss

@@ -1,9 +0,0 @@
-@import "./WidgetTypeRadioButton";
-@import "./CalendarStyleSelector";
-@import "./CheckboxGroup";
-@import "./ImageRadioInput";
-@import "./BookingStyleSelector";
-@import "./WidgetTypeSelector";
-@import "./WidgetBuilderForm";
-@import "./SnippetCode";
-@import "./ProductSetSelector";

package/src/widgets/BookingStyleSelector/BookingStyleSelector.stories.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { BookingStyleSelector } from "./BookingStyleSelector";
-
-export default {
-  title: "Widgets / Booking Style Selector",
-  component: BookingStyleSelector,
-} as Meta;
-
-export const Default: Story = (args) => {
-  return <BookingStyleSelector {...args} />;
-};

package/src/widgets/BookingStyleSelector/BookingStyleSelector.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { ImageRadioInput } from "../ImageRadioInput";
-import { ReactComponent as Overlay } from "../../assets/widgets/overlay.svg";
-import { ReactComponent as InPage } from "../../assets/widgets/inPage.svg";
-import { ReactComponent as Sidebar } from "../../assets/widgets/sidebar.svg";
-
-export const BookingStyleSelector = () => {
-  const { t } = useTranslation("Design");
-
-  return (
-    <div className="widget-booking-style-selector">
-      <h4>{t("selectBookingStyle")}</h4>
-
-      <div className="wrapper">
-        <ImageRadioInput
-          img={<Overlay />}
-          label={t("overlay")}
-          name="bookingWidgetStyle"
-        />
-        <ImageRadioInput
-          img={<InPage />}
-          label={t("inPage")}
-          name="bookingWidgetStyle"
-        />
-        <ImageRadioInput
-          img={<Sidebar />}
-          label={t("sidebar")}
-          name="bookingWidgetStyle"
-        />
-      </div>
-    </div>
-  );
-};

package/src/widgets/BookingStyleSelector/index.ts

@@ -1 +0,0 @@
-export { BookingStyleSelector } from "./BookingStyleSelector";

package/src/widgets/CalendarStyleSelector/CalendarStyleSelector.stories.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { CalendarStyleSelector } from "./CalendarStyleSelector";
-
-export default {
-  title: "Widgets / Calendar Style Selector",
-  component: CalendarStyleSelector,
-} as Meta;
-
-export const Default: Story = (args) => {
-  return <CalendarStyleSelector {...args} />;
-};

package/src/widgets/CalendarStyleSelector/CalendarStyleSelector.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { ReactComponent as MonthIcon } from "../../assets/widgets/monthCalendar.svg";
-import { ReactComponent as WeekIcon } from "../../assets/widgets/weekCalendar.svg";
-import { ImageRadioInput } from "../ImageRadioInput/ImageRadioInput";
-
-export const CalendarStyleSelector = () => {
-  const { t } = useTranslation("Design");
-
-  return (
-    <div className="widget-calendar-style-selector">
-      <h4>{t("calendarStyle")}</h4>
-      <p>{t("calendarStyleDescription")}</p>
-
-      <div className="controls">
-        <ImageRadioInput
-          label={t("month")}
-          img={<MonthIcon />}
-          name="calendarStyle"
-        />
-        <ImageRadioInput
-          label={t("week")}
-          img={<WeekIcon />}
-          name="calendarStyle"
-        />
-      </div>
-    </div>
-  );
-};

package/src/widgets/CalendarStyleSelector/index.ts

@@ -1 +0,0 @@
-export { CalendarStyleSelector } from "./CalendarStyleSelector";

package/src/widgets/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { CheckboxGroup, CheckboxGroupProps } from "./CheckboxGroup";
-
-export default {
-  title: "Widgets / Checkbox Group",
-  component: CheckboxGroup,
-} as Meta;
-
-export const Default: Story<CheckboxGroupProps> = (args) => {
-  return <CheckboxGroup {...args} />;
-};
-
-Default.args = {
-  heading: "Include from price",
-};

package/src/widgets/CheckboxGroup/CheckboxGroup.tsx

@@ -1,64 +0,0 @@
-import { useId } from "@react-aria/utils";
-import React from "react";
-import { Form } from "react-bootstrap";
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { WidgetBuilderFormModel } from "../WidgetBuilderForm/WidgetBuilderForm";
-
-export type CheckboxGroupProps = {
-  heading: string;
-  name: keyof Partial<
-    Pick<WidgetBuilderFormModel, "includeFromPrice" | "includeAvailability">
-  >;
-};
-
-export const CheckboxGroup = ({ heading, name }: CheckboxGroupProps) => {
-  const { t } = useTranslation();
-
-  const { register } = useFormContext<WidgetBuilderFormModel>();
-
-  const onTimeSlotsCheckboxIt = useId();
-  const onCalendarCheckboxId = useId();
-  const onProductSetsCheckboxId = useId();
-
-  return (
-    <div className="widgets-checkbox-group">
-      <h3>{heading}</h3>
-
-      <Form.Group className="custom-checkbox">
-        <Form.Check custom type="checkbox" id={onTimeSlotsCheckboxIt}>
-          <Form.Check.Input
-            type="checkbox"
-            value="onTimeSlots"
-            {...register(name)}
-          />
-          <Form.Check.Label>{t("onTimeSLots")}</Form.Check.Label>
-        </Form.Check>
-      </Form.Group>
-
-      <Form.Group className="custom-checkbox">
-        <Form.Check custom type="checkbox" id={onCalendarCheckboxId}>
-          <Form.Check.Input
-            type="checkbox"
-            value="onCalendar"
-            {...register(name)}
-          />
-          <Form.Check.Label>{t("onCalendar")}</Form.Check.Label>
-        </Form.Check>
-      </Form.Group>
-
-      <Form.Group className="custom-checkbox">
-        <Form.Check custom type="checkbox" id={onProductSetsCheckboxId}>
-          <Form.Check.Input
-            type="checkbox"
-            value="onProductSets"
-            {...register(name)}
-          />
-          <Form.Check.Label>{t("onProductSets")}</Form.Check.Label>
-        </Form.Check>
-      </Form.Group>
-
-      <div className="divider" />
-    </div>
-  );
-};

package/src/widgets/CheckboxGroup/index.ts

@@ -1 +0,0 @@
-export { CheckboxGroup } from "./CheckboxGroup";

package/src/widgets/ImageRadioInput/ImageRadioInput.stories.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { ImageRadioInput, ImageRadioInputProps } from "./ImageRadioInput";
-import { ReactComponent as MonthIcon } from "../../assets/widgets/monthCalendar.svg";
-
-export default {
-  title: "Widgets / Image Radio Input",
-  component: ImageRadioInput,
-} as Meta;
-
-export const Default: Story<ImageRadioInputProps> = (args) => {
-  return <ImageRadioInput {...args} />;
-};
-
-Default.args = {
-  img: <MonthIcon />,
-  label: "Month",
-};

package/src/widgets/ImageRadioInput/ImageRadioInput.tsx

@@ -1,29 +0,0 @@
-import React, { ReactNode } from "react";
-import { Form } from "react-bootstrap";
-import { useFormContext } from "react-hook-form";
-import { WidgetBuilderFormModel } from "../WidgetBuilderForm/WidgetBuilderForm";
-
-export type ImageRadioInputProps = {
-  img: ReactNode;
-  label: string;
-  name: keyof Partial<
-    Pick<WidgetBuilderFormModel, "calendarStyle" | "bookingWidgetStyle">
-  >;
-};
-
-export const ImageRadioInput = ({ img, label, name }: ImageRadioInputProps) => {
-  const { register } = useFormContext<WidgetBuilderFormModel>();
-
-  return (
-    <Form.Check className="image-radio-input">
-      <Form.Check.Label className="image-radio-input-wrapper">
-        {img}
-
-        <div className="image-radio-input-label">
-          <Form.Check.Input type="radio" value={label} {...register(name)} />
-          <span>{label}</span>
-        </div>
-      </Form.Check.Label>
-    </Form.Check>
-  );
-};

package/src/widgets/ProductSetSelector/ProductSetSelector.stories.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { ProductSetSelector } from "./ProductSetSelector";
-
-export default {
-  title: "Widgets / Product Set Selector",
-  component: ProductSetSelector,
-} as Meta;
-
-export const Default: Story = (args) => {
-  return <ProductSetSelector {...args} />;
-};

package/src/widgets/ProductSetSelector/ProductSetSelector.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { Button, Form } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { ReactComponent as Icon } from "../../assets/widgets/circlePlus.svg";
-
-export const ProductSetSelector = () => {
-  const { t } = useTranslation("Design");
-
-  return (
-    <div className="widget-builder-product-set-selector">
-      <h4>{t("productSet")}</h4>
-      <p>{t("widgetBuilderProductSetDescription")}</p>
-
-      <Form.Group>
-        <Form.Control as="select">
-          <option>{1}</option>
-          <option>{2}</option>
-        </Form.Control>
-      </Form.Group>
-
-      <Button className="">
-        <Icon type="circle-plus" />
-        {t("addProductSets")}
-      </Button>
-    </div>
-  );
-};

package/src/widgets/ProductSetSelector/index.ts

@@ -1 +0,0 @@
-export { ProductSetSelector } from "./ProductSetSelector";

package/src/widgets/SnippetCode/SnippetCode.stories.tsx

@@ -1,17 +0,0 @@
-/* eslint-disable max-len */
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { SnippetCode, SnippetCodeProps } from "./SnippetCode";
-
-export default {
-  title: "Widgets / Snippet Code",
-  component: SnippetCode,
-} as Meta;
-
-export const Default: Story<SnippetCodeProps> = (args) => {
-  return <SnippetCode {...args} />;
-};
-
-Default.args = {
-  code: '<iframe width="1238" height="696" src="https://www.youtube.com/embed/Kddw5pV7RZ0" title="Short Booked it software overview." frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />',
-};

package/src/widgets/SnippetCode/SnippetCode.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { Button } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { ReactComponent as CopyIcon } from "../../assets/widgets/copy.svg";
-
-export type SnippetCodeProps = {
-  code: string;
-};
-
-const copyCode = (code: string) => window.navigator.clipboard.writeText(code);
-
-export const SnippetCode = ({ code }: SnippetCodeProps) => {
-  const { t } = useTranslation("Design");
-
-  return (
-    <div className="widget-designer-snippet-code">
-      <h4>{t("codeSnippet")}</h4>
-
-      <p className="code-container">{code}</p>
-
-      <Button onClick={() => copyCode(code)}>
-        {t("copyCode")}
-        <CopyIcon />
-      </Button>
-    </div>
-  );
-};

package/src/widgets/SnippetCode/index.ts

@@ -1 +0,0 @@
-export { SnippetCode } from "./SnippetCode";

package/src/widgets/WidgetBuilderForm/WidgetBuilderForm.stories.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { WidgetBuilderForm } from "./WidgetBuilderForm";
-
-export default {
-  title: "Widgets / Widget Builder Form",
-  component: WidgetBuilderForm,
-} as Meta;
-
-export const Default: Story = (args) => {
-  return <WidgetBuilderForm {...args} />;
-};

package/src/widgets/WidgetBuilderForm/WidgetBuilderForm.tsx

@@ -1,84 +0,0 @@
-import React from "react";
-import { Button, Col, Form, Row } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { useForm, FormProvider } from "react-hook-form";
-import { WidgetTypeSelector } from "../WidgetTypeSelector/WidgetTypeSelector";
-import { CheckboxGroup } from "../CheckboxGroup";
-import { CalendarStyleSelector } from "../CalendarStyleSelector";
-import { BookingStyleSelector } from "../BookingStyleSelector";
-import { ProductSetSelector } from "../ProductSetSelector";
-import { SnippetCode } from "../SnippetCode";
-
-export type WidgetBuilderFormModel = {
-  name: string;
-  widgetType: string;
-  calendarStyle: string;
-  includeFromPrice: string[];
-  includeAvailability: string[];
-  productSets: string[];
-  bookingWidgetStyle: string;
-};
-
-export const WidgetBuilderForm = () => {
-  const { t } = useTranslation("Design");
-
-  const form = useForm<WidgetBuilderFormModel>({ mode: "onChange" });
-
-  const onSubmit = () => null;
-
-  return (
-    <FormProvider {...form}>
-      <Row
-        as="form"
-        className="widget-builder-form"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <Col lg={6} md={6}>
-          <h2>{t("eventPageOverlay")}</h2>
-
-          <Form.Group>
-            <Form.Label>{t("name")}</Form.Label>
-            <Form.Control type="text" {...form.register("name")} />
-          </Form.Group>
-
-          <WidgetTypeSelector />
-
-          <h3 className="widget-builder-form-customizations">
-            {t("customizations")}
-          </h3>
-
-          <CalendarStyleSelector />
-
-          <CheckboxGroup
-            heading={t("includeFromPrice")}
-            name="includeFromPrice"
-          />
-          <CheckboxGroup
-            heading={t("includeAvailability")}
-            name="includeAvailability"
-          />
-
-          <ProductSetSelector />
-        </Col>
-
-        <Col lg={5} md={5} className="widget-builder-right-column">
-          <div className="widget-builder-form-grey">
-            <BookingStyleSelector />
-
-            <div>
-              <h4>{t("stylingTemplate")}</h4>
-
-              <Form.Group>
-                <Form.Control as="select" />
-              </Form.Group>
-            </div>
-
-            <SnippetCode code="" />
-          </div>
-
-          <Button type="submit">{t("saveAndClose")}</Button>
-        </Col>
-      </Row>
-    </FormProvider>
-  );
-};

package/src/widgets/WidgetTypeRadio/WidgetTypeRadio.stories.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { WidgetTypeRadio, WidgetTypeRadioProps } from "./WidgetTypeRadio";
-
-export default {
-  title: "Widgets / Type Radio Selector",
-  component: WidgetTypeRadio,
-} as Meta;
-
-export const Default: Story<WidgetTypeRadioProps> = (args) => {
-  return <WidgetTypeRadio {...args} />;
-};
-
-Default.args = {
-  label: "Venue Map",
-  description: ["Date", "Floor", "Table", "Product Sets", "Checkout"],
-};

package/src/widgets/WidgetTypeRadio/WidgetTypeRadio.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { Form } from "react-bootstrap";
-import { useFormContext } from "react-hook-form";
-import { WidgetBuilderFormModel } from "../WidgetBuilderForm/WidgetBuilderForm";
-
-export type WidgetTypeRadioProps = {
-  label: string;
-  description: string[];
-};
-
-const prepareDescription = (description: string[]) =>
-  description.map((item, index) => {
-    if (index === 0) return item;
-    return `> ${item}`;
-  });
-
-export const WidgetTypeRadio = ({
-  label,
-  description,
-}: WidgetTypeRadioProps) => {
-  const { register } = useFormContext<WidgetBuilderFormModel>();
-
-  return (
-    <Form.Check className="widget-type-radio">
-      <Form.Check.Label>
-        <div className="widget-type-radio-controls">
-          <Form.Check.Input
-            type="radio"
-            value={label}
-            {...register("widgetType")}
-          />
-          <span>{label}</span>
-        </div>
-
-        <p className="widget-type-radio-description">
-          {prepareDescription(description).map((item) => (
-            <span key={item}> {item}</span>
-          ))}
-        </p>
-      </Form.Check.Label>
-    </Form.Check>
-  );
-};

package/src/widgets/WidgetTypeRadio/index.ts

@@ -1 +0,0 @@
-export { WidgetTypeRadio } from "./WidgetTypeRadio";

package/src/widgets/WidgetTypeSelector/WidgetTypeSelector.stories.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { WidgetTypeSelector } from "./WidgetTypeSelector";
-
-export default {
-  title: "Widgets / Widget Type Selector",
-  component: WidgetTypeSelector,
-} as Meta;
-
-export const Default: Story = (args) => {
-  return <WidgetTypeSelector {...args} />;
-};

package/src/widgets/WidgetTypeSelector/WidgetTypeSelector.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { Form } from "react-bootstrap";
-import { WidgetTypeRadio } from "../WidgetTypeRadio";
-
-const venueMapDescription = [
-  "date",
-  "floor",
-  "table",
-  "productSets",
-  "checkout",
-];
-
-export const WidgetTypeSelector = () => {
-  const { t } = useTranslation("Design");
-
-  return (
-    <div className="widget-type-selector">
-      <Form.Label>{t("selectBookingType")}</Form.Label>
-
-      <WidgetTypeRadio
-        label={t("eventList")}
-        description={[t("eventListing")]}
-      />
-
-      <WidgetTypeRadio
-        label={t("venueMap")}
-        description={venueMapDescription.map((item) => t(item))}
-      />
-    </div>
-  );
-};