@licklist/design 0.44.551 → 0.45.0-dev.0

package/src/snippet/snippet-template/context/snippetTemplate.tsx

@@ -1,190 +0,0 @@
-import React, { createContext, useRef, useState, useMemo } from "react";
-import {
-  SnippetTemplate,
-  DEFAULT_SNIPPET_TEMPLATE_COLORS,
-} from "@licklist/core/dist/DataMapper/Provider/SnippetTemplateDataMapper";
-import { safeMergeDefaultSettings } from "../utils";
-
-export type SnippetTemplateValuesWithName = Partial<
-  SnippetTemplate & {
-    name: string;
-  }
->;
-
-export interface SnippetTemplateContextValues {
-  template: SnippetTemplateValuesWithName;
-  actions: {
-    updateTemplate: (nextTemplate: SnippetTemplateValuesWithName) => void;
-  };
-}
-
-export const SnippetTemplateContext =
-  createContext<SnippetTemplateContextValues | null>(null);
-
-export interface SnippetTemplateLoadingContextProviderProps
-  extends React.PropsWithChildren<unknown> {
-  defaultValues?: SnippetTemplateValuesWithName;
-}
-
-export function SnippetTemplateContextProvider({
-  children,
-  defaultValues,
-}: SnippetTemplateLoadingContextProviderProps) {
-  const actionsRef = useRef(null);
-  const [template, setTemplate] = useState<SnippetTemplateValuesWithName>(
-    safeMergeDefaultSettings(defaultValues)
-  );
-
-  actionsRef.current = {
-    updateTemplate: (nextTemplate: SnippetTemplateValuesWithName) =>
-      setTemplate(() => nextTemplate),
-  };
-
-  // Correct way to use custom colors for
-  // dropdown element. When background image color
-  // should be changed. Used for arrow for dropdowns
-  const dropdownBackgroundIcon = useMemo(() => {
-    const color = encodeURIComponent(
-      template?.elementsButtonBackgroundColor ||
-        DEFAULT_SNIPPET_TEMPLATE_COLORS.elementsButtonBackgroundColor
-    );
-
-    // eslint-disable-next-line max-len
-    return `url("data:image/svg+xml;utf8,<svg width='12' height='11' viewBox='0 0 12 11' fill='none' xmlns='http://www.w3.org/2000/svg' class='svg-icon'><path fill-rule='evenodd' clip-rule='evenodd' d='M10.4593 0.961076C11.2406 0.961076 11.7201 1.81699 11.3121 2.48332L6.65163 10.0936C6.26153 10.7306 5.33613 10.7306 4.94603 10.0936L0.285581 2.48332C-0.122471 1.81699 0.357031 0.961076 1.13838 0.961076L10.4593 0.961076Z' fill='${color}'/></svg>")`;
-  }, [template]);
-
-  return (
-    <SnippetTemplateContext.Provider
-      value={{ template, actions: actionsRef.current }}
-    >
-      <div
-        className="w-100 h-100"
-        style={
-          {
-            "--snippet-page-background-color": template?.backgroundColor,
-            "--snippet-page-header-background-gradient-color-1":
-              template?.pageHeaderBackgroundGradientColor1,
-            "--snippet-page-header-background-gradient-color-2":
-              template?.pageHeaderBackgroundGradientColor2,
-            "--snippet-page-header-background-gradient-color-3":
-              template?.pageHeaderBackgroundGradientColor3,
-            "--snippet-page-header-background-gradient-color-4":
-              template?.pageHeaderBackgroundGradientColor4,
-            "--snippet-page-header-steps-active-step-background-color":
-              template?.pageHeaderStepsActiveStepBackgroundColor,
-            "--snippet-page-header-steps-active-step-border-color":
-              template?.pageHeaderStepsActiveStepBorderColor,
-            "--snippet-page-header-steps-active-step-body-color":
-              template?.pageHeaderStepsActiveStepBodyColor,
-            "--snippet-page-header-steps-inactive-step-background-color":
-              template?.pageHeaderStepsInactiveStepBackgroundColor,
-            "--snippet-page-header-steps-inactive-step-border-color":
-              template?.pageHeaderStepsInactiveStepBorderColor,
-            "--snippet-page-header-steps-inactive-step-body-color":
-              template?.pageHeaderStepsInactiveStepBodyColor,
-            "--snippet-page-header-steps-timer-background-color":
-              template?.pageHeaderStepsTimerBackgroundColor,
-            "--snippet-page-header-steps-timer-border-color":
-              template?.pageHeaderStepsTimerBorderColor,
-            "--snippet-page-header-steps-timer-body-color":
-              template?.pageHeaderStepsTimerBodyColor,
-            "--snippet-page-header-steps-body-color":
-              template?.pageHeaderStepsBodyColor,
-            "--snippet-page-header-steps-close-button-background-color":
-              template?.pageHeaderStepsCloseButtonBackgroundColor,
-            "--snippet-page-header-steps-close-button-border-color":
-              template?.pageHeaderStepsCloseButtonBorderColor,
-            "--snippet-page-body-left-block-background-color":
-              template?.pageBodyLeftBlockBackgroundColor,
-            "--snippet-page-body-left-block-back-button-background-color":
-              template?.pageBodyLeftBlockBackButtonBackgroundColor,
-            "--snippet-page-body-left-block-back-button-border-color":
-              template?.pageBodyLeftBlockBackButtonBorderColor,
-            "--snippet-page-body-left-block-back-button-body-color":
-              template?.pageBodyLeftBlockBackButtonBodyColor,
-            "--snippet-page-body-right-block-background-color":
-              template?.pageBodyRightBlockBackgroundColor,
-            "--snippet-elements-body-color": template?.elementsBodyColor,
-            "--snippet-elements-input-border-color":
-              template?.elementsInputBorderColor,
-            "--snippet-elements-input-background-color":
-              template?.elementsInputBackgroundColor,
-            "--snippet-elements-input-body-color":
-              template?.elementsInputBodyColor,
-            "--snippet-elements-number-input-background-color":
-              template?.elementsNumberInputBackgroundColor,
-            "--snippet-elements-number-input-border-color":
-              template?.elementsNumberInputBorderColor,
-            "--snippet-elements-number-input-body-color":
-              template?.elementsNumberInputBodyColor,
-            "--snippet-elements-number-input-button-border-color":
-              template?.elementsNumberInputButtonBorderColor,
-            "--snippet-elements-number-input-button-background-color":
-              template?.elementsNumberInputButtonBackgroundColor,
-            "--snippet-elements-button-color": template?.elementsButtonColor,
-            "--snippet-elements-button-background-color":
-              template?.elementsButtonBackgroundColor,
-            "--snippet-elements-button-border-color":
-              template?.elementsButtonBorderColor,
-            "--snippet-form-link-color": template?.formLinkColor,
-            "--snippet-steps-background-color": template.stepsBackgroundColor,
-
-            "--snippet-dropdown-background-color":
-              template?.dropdownBackgroundColor,
-            "--snippet-dropdown-border-color": template?.dropdownBorderColor,
-            "--snippet-dropdown-font-color": template?.dropdownFontColor,
-            "--snippet-dropdown-background-icon": dropdownBackgroundIcon,
-
-            "--snippet-calendar-button-border-color":
-              template?.calendarButtonBorderColor,
-            "--snippet-calendar-button-background-color":
-              template?.calendarButtonBackgroundColor,
-            "--snippet-calendar-button-font-color":
-              template?.calendarButtonFontColor,
-            "--snippet-calendar-disabled-button-border-color":
-              template?.calendarDisabledButtonBorderColor,
-            "--snippet-calendar-disabled-button-background-color":
-              template?.calendarDisabledButtonBackgroundColor,
-            "--snippet-calendar-disabled-button-font-color":
-              template?.calendarDisabledButtonFontColor,
-            "--snippet-calendar-active-button-border-color":
-              template?.calendarActiveButtonBorderColor,
-            "--snippet-calendar-active-button-background-color":
-              template?.calendarActiveButtonBackgroundColor,
-            "--snippet-calendar-active-button-font-color":
-              template?.calendarActiveButtonFontColor,
-
-            "--snippet-product-set-border-color":
-              template?.productSetBorderColor,
-            "--snippet-product-set-background-color":
-              template?.productSetBackgroundColor,
-            "--snippet-product-set-font-color": template?.productSetFontColor,
-            "--snippet-active-product-set-border-color":
-              template?.activeProductSetBorderColor,
-            "--snippet-active-product-set-background-color":
-              template?.activeProductSetBackgroundColor,
-            "--snippet-active-product-set-font-color":
-              template?.activeProductSetFontColor,
-
-            "--snippet-canvas-background-color":
-              template?.canvasBackgroundColor,
-            "--snippet-canvas-border-color": template?.canvasBorderColor,
-            "--snippet-canvas-point-border-color": template?.pointBorderColor,
-            "--snippet-canvas-point-background-color":
-              template?.pointBackgroundColor,
-            "--snippet-canvas-point-font-color": template?.pointFontColor,
-            "--snippet-canvas-active-point-border-color":
-              template?.activePointBorderColor,
-            "--snippet-canvas-active-point-background-color":
-              template?.activePointBackgroundColor,
-            "--snippet-canvas-active-point-font-color":
-              template?.activePointFontColor,
-          } as React.CSSProperties
-        }
-        id="snippet-template-context"
-      >
-        {children}
-      </div>
-    </SnippetTemplateContext.Provider>
-  );
-}

package/src/snippet/snippet-template/context/snippetTemplateLoading.tsx

@@ -1,19 +0,0 @@
-import React, { createContext, useState } from "react";
-
-export interface SnippetTemplateLoadingContextValues {
-  isLoading: boolean;
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export const SnippetTemplateLoadingContext =
-  createContext<SnippetTemplateLoadingContextValues | null>(null);
-
-export function SnippetTemplateLoadingContextProvider({ children }) {
-  const [isLoading, setIsLoading] = useState(false);
-
-  return (
-    <SnippetTemplateLoadingContext.Provider value={{ isLoading, setIsLoading }}>
-      {children}
-    </SnippetTemplateLoadingContext.Provider>
-  );
-}

package/src/snippet/snippet-template/context/snippetTemplateView.tsx

@@ -1,168 +0,0 @@
-import React, { createContext, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-export const snippetTemplateViews = {
-  pageHeader: {},
-  pageHeaderSteps: {},
-  page: {},
-  pageBodyLeftBlock: {},
-  pageBodyRightBlock: {},
-  elements: {},
-  calendar: {},
-  productSet: {},
-  venueMap: {},
-};
-
-export interface SnippetTemplateViewContextValues {
-  view: keyof typeof snippetTemplateViews;
-  properties: typeof snippetTemplateViews;
-  setView: React.Dispatch<
-    React.SetStateAction<keyof typeof snippetTemplateViews>
-  >;
-}
-
-export const SnippetTemplateViewContext =
-  createContext<SnippetTemplateViewContextValues | null>(null);
-
-export const DEFAULT_VIEW: keyof typeof snippetTemplateViews = "page";
-
-export function SnippetTemplateViewContextProvider({ children }) {
-  const { t } = useTranslation("Design");
-
-  const snippetTemplatePropertiesRef =
-    useRef<typeof snippetTemplateViews>(null);
-  const [view, setView] =
-    useState<keyof typeof snippetTemplateViews>(DEFAULT_VIEW);
-
-  snippetTemplatePropertiesRef.current = {
-    page: {
-      backgroundColor: t("backgroundColor"),
-    },
-    pageHeader: {
-      pageHeaderBackgroundGradientColor1: t("backgroundGradientColorNumber", {
-        number: 1,
-      }),
-      pageHeaderBackgroundGradientColor2: t("backgroundGradientColorNumber", {
-        number: 2,
-      }),
-      pageHeaderBackgroundGradientColor3: t("backgroundGradientColorNumber", {
-        number: 3,
-      }),
-      pageHeaderBackgroundGradientColor4: t("backgroundGradientColorNumber", {
-        number: 4,
-      }),
-    },
-
-    pageHeaderSteps: {
-      stepsBackgroundColor: t("backgroundColor"),
-      pageHeaderStepsTimerBackgroundColor: t("headerTimerBackgroundColor"),
-      pageHeaderStepsTimerBorderColor: t("headerTimerBorderColor"),
-      pageHeaderStepsTimerBodyColor: t("headerTimerBodyColor"),
-      pageHeaderStepsBodyColor: t("headerBodyColor"),
-
-      pageHeaderStepsActiveStepBackgroundColor: t("activeStepBackgroundColor"),
-      pageHeaderStepsActiveStepBorderColor: t("activeStepBorderColor"),
-      pageHeaderStepsActiveStepBodyColor: t("headerActiveStepBodyColor"),
-      pageHeaderStepsInactiveStepBackgroundColor: t(
-        "inactiveStepBackgroundColor"
-      ),
-      pageHeaderStepsInactiveStepBorderColor: t("inactiveStepBorderColor"),
-      pageHeaderStepsInactiveStepBodyColor: t("headerInactiveStepBodyColor"),
-
-      pageHeaderStepsCloseButtonBackgroundColor: t(
-        "headerButtonsBackgroundColor"
-      ),
-
-      // @TODO return back this color as pageHeaderStepsCloseButtonBodyColor
-      // When will be integration with Calendar view
-      pageHeaderStepsCloseButtonBorderColor: t("headerButtonsBodyColor"),
-    },
-
-    pageBodyLeftBlock: {
-      pageBodyLeftBlockBackgroundColor: t("backgroundColor"),
-      pageBodyLeftBlockBackButtonBackgroundColor: t(
-        "backButtonBackgroundColor"
-      ),
-      pageBodyLeftBlockBackButtonBorderColor: t("backButtonBorderColor"),
-      pageBodyLeftBlockBackButtonBodyColor: t("backButtonColor"),
-    },
-
-    pageBodyRightBlock: {
-      pageBodyRightBlockBackgroundColor: t("backgroundColor"),
-    },
-
-    elements: {
-      elementsBodyColor: t("bodyColor"),
-
-      elementsInputBorderColor: t("inputBorderColor"),
-      elementsInputBackgroundColor: t("inputBackgroundColor"),
-      elementsInputBodyColor: t("inputBodyColor"),
-
-      elementsNumberInputBackgroundColor: t("numberInputBackgroundColor"),
-      elementsNumberInputBorderColor: t("numberInputBorderColor"),
-      elementsNumberInputBodyColor: t("numberInputBodyColor"),
-      elementsNumberInputButtonBorderColor: t("numberInputButtonBorderColor"),
-      elementsNumberInputButtonBackgroundColor: t(
-        "numberInputButtonBackgroundColor"
-      ),
-
-      elementsButtonColor: t("buttonColor"),
-      elementsButtonBackgroundColor: t("buttonBackgroundColor"),
-      elementsButtonBorderColor: t("buttonBorderColor"),
-
-      formLinkColor: t("linkColor"),
-
-      dropdownBackgroundColor: t("dropdownBackgroundColor"),
-      dropdownBorderColor: t("dropdownBorderColor"),
-      dropdownFontColor: t("dropdownFontColor"),
-    },
-
-    calendar: {
-      calendarButtonBorderColor: t("calendarButtonBorderColor"),
-      calendarButtonBackgroundColor: t("calendarButtonBackgroundColor"),
-      calendarButtonFontColor: t("calendarButtonFontColor"),
-      calendarDisabledButtonBorderColor: t("calendarDisabledButtonBorderColor"),
-      calendarDisabledButtonBackgroundColor: t(
-        "calendarDisabledButtonBackgroundColor"
-      ),
-      calendarDisabledButtonFontColor: t("calendarDisabledButtonFontColor"),
-      calendarActiveButtonBorderColor: t("calendarActiveButtonBorderColor"),
-      calendarActiveButtonBackgroundColor: t(
-        "calendarActiveButtonBackgroundColor"
-      ),
-      calendarActiveButtonFontColor: t("calendarActiveButtonFontColor"),
-    },
-
-    productSet: {
-      productSetBorderColor: t("productSetBorderColor"),
-      productSetBackgroundColor: t("productSetBackgroundColor"),
-      productSetFontColor: t("productSetFontColor"),
-      activeProductSetBorderColor: t("activeProductSetBorderColor"),
-      activeProductSetBackgroundColor: t("activeProductSetBackgroundColor"),
-      activeProductSetFontColor: t("activeProductSetFontColor"),
-    },
-
-    venueMap: {
-      canvasBackgroundColor: t("canvasBackgroundColor"),
-      canvasBorderColor: t("canvasBorderColor"),
-      pointBorderColor: t("pointBorderColor"),
-      pointBackgroundColor: t("pointBackgroundColor"),
-      pointFontColor: t("pointFontColor"),
-      activePointBorderColor: t("activePointBorderColor"),
-      activePointBackgroundColor: t("activePointBackgroundColor"),
-      activePointFontColor: t("activePointFontColor"),
-    },
-  };
-
-  return (
-    <SnippetTemplateViewContext.Provider
-      value={{
-        view,
-        properties: snippetTemplatePropertiesRef.current,
-        setView,
-      }}
-    >
-      {children}
-    </SnippetTemplateViewContext.Provider>
-  );
-}

package/src/snippet/snippet-template/control/Control.stories.tsx

@@ -1,23 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import { PropertyControl, PropertyControlProps } from "./PropertyControl";
-import { FormProvider, useForm } from "react-hook-form";
-
-export default {
-  title: "Snippet/Template/Control",
-  component: PropertyControl,
-} as Meta;
-
-export const Default: Story<PropertyControlProps<any>> = (args) => {
-  const form = useForm();
-  return (
-    <FormProvider {...form}>
-      <PropertyControl<any> {...args} />
-    </FormProvider>
-  );
-};
-
-Default.args = {
-  item: "test",
-};

package/src/snippet/snippet-template/control/PropertyControl.tsx

@@ -1,107 +0,0 @@
-import React, { useCallback, useState } from "react";
-import { TwitterPicker } from "react-color";
-import { Form } from "react-bootstrap";
-import { useFormContext, Path } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-
-const DEFAULT_COLORS = [
-  "#FF6900",
-  "#FCB900",
-  "#7BDCB5",
-  "#00D084",
-  "#8ED1FC",
-  "#0693E3",
-  "#ABB8C3",
-  "#EB144C",
-  "#F78DA7",
-  "#9900EF",
-  "#FFFFFF",
-  "#000000",
-];
-
-export interface PropertyControlProps<T> {
-  item: Path<T>;
-  label: string;
-  isDisabled?: boolean;
-}
-
-export function PropertyControl<T>({
-  item,
-  label,
-  isDisabled = false,
-}: PropertyControlProps<T>) {
-  const { t } = useTranslation(["Validation"]);
-
-  const [isActive, setIsActive] = useState<boolean>(false);
-
-  const {
-    watch,
-    register,
-    setValue,
-    formState,
-    formState: { errors },
-  } = useFormContext<T>();
-
-  const value = watch(item);
-
-  const isFieldValid = useCallback(
-    (field: string) => HookFormService.isFieldValid(formState, errors, field),
-    [formState, errors]
-  );
-
-  const toggleIsActive = () => {
-    setIsActive((prevIsActive) => !prevIsActive);
-  };
-
-  return (
-    <Form.Group className="position-relative color-picker">
-      <Form.Label className="mt-2">{label}</Form.Label>
-
-      <div className="position-relative">
-        <Form.Control
-          {...register(item, {
-            required: {
-              value: true,
-              message: t("Validation:fieldRequired", {
-                attribute: label,
-              }),
-            },
-          })}
-          isValid={isFieldValid(item)}
-          isInvalid={HookFormService.isInvalid<T>(item, errors)}
-          disabled={isDisabled}
-          onFocus={toggleIsActive}
-        />
-
-        <div
-          className="color-picker__color"
-          style={{ backgroundColor: String(value) ?? "" }}
-        />
-      </div>
-
-      {isActive && (
-        <div className="color-picker__popover">
-          <div
-            className="color-picker__cover vh-100 vw-100"
-            onClick={toggleIsActive}
-            onKeyPress={toggleIsActive}
-            role="button"
-            tabIndex={0}
-          />
-          <TwitterPicker
-            color={value ?? ""}
-            onChangeComplete={(color) => {
-              setValue(item, color.hex);
-              toggleIsActive();
-            }}
-            colors={DEFAULT_COLORS}
-          />
-        </div>
-      )}
-      <Form.Control.Feedback type="invalid">
-        {HookFormService.getErrors<T>(item, errors)}
-      </Form.Control.Feedback>
-    </Form.Group>
-  );
-}

package/src/snippet/snippet-template/control/index.ts

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

package/src/snippet/snippet-template/form/SnippetTemplateForm.stories.tsx

@@ -1,89 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-import { boolean } from "@storybook/addon-knobs";
-import {
-  SnippetTemplateForm,
-  SnippetTemplateFormProps,
-} from "./SnippetTemplateForm";
-import { SnippetTemplateContextProvider } from "../context/snippetTemplate";
-import { SnippetTemplateViewContextProvider } from "../context/snippetTemplateView";
-import { SnippetTemplateLoadingContextProvider } from "../context/snippetTemplateLoading";
-
-export default {
-  title: "Snippet/Template/Form",
-  component: SnippetTemplateForm,
-} as Meta;
-
-const defaultValues = {
-  name: "Template #1",
-  backgroundColor: "#f2f2f2",
-  bookingBackgroundColor: "#CCCCCC",
-  bookingBorderColor: "#CCCCCC",
-  bookingBodyColor: "#333333",
-  bookingTotalColor: "#333333",
-  cardBackgroundColor: "#FFFFFF",
-  cardBorderColor: "#f2f2f2",
-  cardTitleColor: "#8ed1fc",
-  cardTextColor: "#333333",
-  cardButtonColor: "#FFFFFF",
-  cardButtonBackgroundColor: "#8ed1fc",
-  elementsTitleColor: "#8ed1fc",
-  elementsTextColor: "#333333",
-  elementsButtonColor: "#FFFFFF",
-  elementsButtonBackgroundColor: "#8ed1fc",
-  formBackgroundColor: "#FFFFFF",
-  formBorderColor: "#f2f2f2",
-  formTitleColor: "#8ed1fc",
-  formLabelColor: "#8ed1fc",
-  formLinkColor: "#8ed1fc",
-  stepsBackgroundColor: "#CCCCCC",
-  stepsBorderColor: "#CCCCCC",
-  stepsBodyColor: "#FFFFFF",
-  stepsActiveStepBackgroundColor: "#CCCCCC",
-  stepsActiveStepBodyColor: "#000000",
-  stepsInactiveStepBackgroundColor: "#F2F2F2",
-  stepsInactiveStepBodyColor: "#000000",
-  tableTitleColor: "#8ed1fc",
-  tableHeadColor: "#8ed1fc",
-  tableBodyColor: "#8ed1fc",
-  tableTotalColor: "#8ed1fc",
-  tableDiscountColor: "#8ed1fc",
-  tablePriceColor: "#8ed1fc",
-  timerBackgroundColor: "#CCCCCC",
-  timerBodyColor: "#FFFFFF",
-  timerBorderColor: "#CCCCCC",
-};
-
-export const Default: Story<SnippetTemplateFormProps> = (args) => {
-  const providerHasMap = boolean("providerHasMap", true);
-
-  return (
-    <SnippetTemplateLoadingContextProvider>
-      <SnippetTemplateContextProvider defaultValues={defaultValues}>
-        <SnippetTemplateViewContextProvider>
-          <SnippetTemplateForm {...args} providerHasMap={providerHasMap} />
-        </SnippetTemplateViewContextProvider>
-      </SnippetTemplateContextProvider>
-    </SnippetTemplateLoadingContextProvider>
-  );
-};
-
-export const ServerError: Story<SnippetTemplateFormProps> = (args) => {
-  const providerHasMap = boolean("providerHasMap", true);
-
-  return (
-    <SnippetTemplateLoadingContextProvider>
-      <SnippetTemplateContextProvider defaultValues={defaultValues}>
-        <SnippetTemplateViewContextProvider>
-          <SnippetTemplateForm {...args} providerHasMap={providerHasMap} />
-        </SnippetTemplateViewContextProvider>
-      </SnippetTemplateContextProvider>
-    </SnippetTemplateLoadingContextProvider>
-  );
-};
-
-ServerError.args = {
-  serverErrors: { name: ["Name is required "] },
-};
-
-Default.args = {};