@licklist/design 0.44.551-dev.8 → 0.45.0-dev.0

package/src/sortable-tree/SortableTreeItem.tsx

@@ -1,382 +0,0 @@
-import React, { ReactNode, useCallback, useEffect, useState } from "react";
-import { DndContext, useDraggable } from "@dnd-kit/core";
-import {
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { Button, Collapse, Modal } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import clsx from "clsx";
-
-import { ConfirmModal } from "../modals";
-import Icon from "../static/Icon";
-import { DeleteFieldButton } from "../product-set/elements/DeleteFieldButton";
-
-const DRAG_RADIUS_LIMIT = 5;
-
-export const ProductSetModalClasses = {
-  step: "edit-product-step",
-  category: "edit-product-category",
-  product: "edit-product",
-} as const;
-
-export type ProductSetModalClassesType =
-  typeof ProductSetModalClasses[keyof typeof ProductSetModalClasses];
-
-export interface SortableTreeItemProps {
-  id: string;
-  title: string;
-  badge?: ReactNode;
-  subTitle?: ReactNode;
-  body: ReactNode;
-  children?: ReactNode;
-  preItem?: ReactNode;
-  postItem?: ReactNode;
-  sortableItems?: string[];
-  isExpanded?: boolean;
-  isInvalid?: boolean;
-  isIconInHeader?: boolean;
-  treeLineIconColor?: string;
-  modalLabel?: string;
-  cancelChanges?: () => void;
-  edit?: () => void;
-  saveValidField?: () => void;
-  modalClass?: ProductSetModalClassesType;
-  isNewAdded?: boolean;
-  onDelete?: () => void;
-  validate?: () => Promise<boolean>;
-  secondaryBadge?: {
-    label: string;
-    className: string;
-  };
-  setIsExpanded?: () => void;
-}
-
-export function SortableTreeItem({
-  id,
-  title,
-  badge,
-  subTitle,
-  body,
-  children,
-  preItem,
-  postItem,
-  sortableItems,
-  isExpanded = false,
-  isInvalid = false,
-  isIconInHeader = true,
-  treeLineIconColor = "",
-  modalLabel = "",
-  modalClass,
-  isNewAdded = false,
-  onDelete,
-  validate,
-  cancelChanges,
-  saveValidField,
-  edit,
-  secondaryBadge,
-  setIsExpanded,
-}: SortableTreeItemProps) {
-  const [expanded, setExpanded] = useState(isExpanded);
-  const [isModalVisible, setIsModalVisible] = useState(isNewAdded);
-  const { t } = useTranslation("Design");
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id });
-
-  const [position, setPosition] = useState<{ pageX: number; pageY: number }>({
-    pageX: 0,
-    pageY: 0,
-  });
-
-  const {
-    isDragging,
-    attributes: dragAttributes,
-    listeners: dragListeners,
-    setNodeRef: setDragNodeRef,
-    transform: dragTransform,
-  } = useDraggable({
-    id,
-  });
-
-  const onHandleExpand = useCallback(
-    (event) => {
-      const deltaX = event.pageX - position.pageX;
-      const deltaY = event.pageY - position.pageY;
-      const euclidean = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-
-      if (euclidean > DRAG_RADIUS_LIMIT) {
-        return;
-      }
-
-      if (setIsExpanded) {
-        setIsExpanded();
-        return;
-      }
-
-      setExpanded((expanded) => !expanded);
-    },
-    [position, setIsExpanded]
-  );
-
-  const onButtonMouseDown = useCallback((event) => {
-    setPosition({ pageX: event.pageX, pageY: event.pageY });
-  }, []);
-
-  const onHide = async () => {
-    if (!validate) setIsModalVisible(false);
-
-    const success = await validate?.();
-
-    if (success) {
-      if (saveValidField) saveValidField();
-      setIsModalVisible(false);
-    }
-  };
-
-  const onCancel = () => {
-    if (!cancelChanges) {
-      onHide();
-      return;
-    }
-    cancelChanges();
-    setIsModalVisible(false);
-  };
-
-  const onEdit = (e) => {
-    e.stopPropagation();
-    if (edit && !isModalVisible) edit();
-    setIsModalVisible(true);
-  };
-
-  useEffect(() => {
-    setExpanded(isExpanded);
-  }, [isExpanded]);
-
-  return (
-    <div
-      className="sortable-tree-root"
-      style={{
-        transform: CSS.Translate.toString(transform),
-        transition,
-      }}
-      {...dragAttributes}
-      {...dragListeners}
-      ref={setNodeRef}
-    >
-      <div
-        className="sortable-tree-wrapper"
-        ref={setDragNodeRef}
-        {...dragAttributes}
-        {...dragListeners}
-        onKeyDown={(e) => e.stopPropagation()}
-        onMouseDown={(e) => {
-          if (isModalVisible) {
-            e.stopPropagation();
-          }
-        }}
-        onMouseUp={(e) => {
-          if (isModalVisible) {
-            e.stopPropagation();
-          }
-        }}
-        role="button"
-        tabIndex={0}
-        style={
-          modalClass === ProductSetModalClasses.step
-            ? {
-                transform: CSS.Translate.toString(dragTransform),
-                opacity: isDragging ? 0.7 : 1,
-              }
-            : null
-        }
-      >
-        <div className="sortable-tree-line">
-          <Button
-            variant="link"
-            size="sm"
-            onMouseDown={onButtonMouseDown}
-            onMouseUp={onHandleExpand}
-          >
-            {expanded ? (
-              <Icon type="minus" width=".7rem" />
-            ) : (
-              <div className="expand-icon-container">
-                <div />
-                <div />
-                <div />
-              </div>
-            )}
-          </Button>
-
-          {expanded && (
-            <svg
-              className="sortable-tree-line-icon"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              width="100%"
-              height="100%"
-              viewBox="0 0 100 100"
-              preserveAspectRatio="none"
-            >
-              <g>
-                <path
-                  className={clsx(
-                    "sortable-tree-line-icon-path",
-                    treeLineIconColor && "sortable-tree-line-product-element"
-                  )}
-                  style={{ stroke: treeLineIconColor }}
-                  d="M 50 0 V 100"
-                />
-              </g>
-            </svg>
-          )}
-        </div>
-
-        <div className="sortable-tree-item-wrapper">
-          <div
-            className={clsx("sortable-tree-item", isInvalid ? "invalid" : "")}
-          >
-            <div className="sortable-tree-item-header">
-              {isIconInHeader && (
-                <Button
-                  variant="link"
-                  className="sortable-tree-item-handle"
-                  {...attributes}
-                  {...listeners}
-                >
-                  <Icon type="grip-vertical" />
-                </Button>
-              )}
-              <Button
-                className="sortable-tree-item-toggle"
-                variant="link"
-                onMouseDown={onButtonMouseDown}
-                onMouseUp={onHandleExpand}
-              >
-                {badge && (
-                  <span className="sortable-tree-item-badge">{badge}</span>
-                )}
-                <div
-                  className={clsx(
-                    modalLabel
-                      ? "sortable-tree-product-set-title-container"
-                      : "sortable-tree-title-container"
-                  )}
-                >
-                  <span
-                    className={clsx(
-                      "sortable-tree-item-title",
-                      modalLabel && "sortable-tree-product-set-element-title"
-                    )}
-                  >
-                    {title}
-                  </span>
-                  {!expanded && (
-                    <span className="sortable-tree-item-subtitle">
-                      {subTitle}
-                    </span>
-                  )}
-                </div>
-                <div
-                  className="border-0 open-edit-right-modal-button"
-                  role="button"
-                  tabIndex={0}
-                  onClick={(e) => onEdit(e)}
-                  onKeyDown={(e) => e.stopPropagation()}
-                >
-                  <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
-                </div>
-              </Button>
-            </div>
-            {/* dont need collaps for product sets elements (category, step, product), only modal in body */}
-            {isIconInHeader ? (
-              <Collapse in={expanded}>
-                <div>
-                  <div className="sortable-tree-item-body">{body}</div>
-                </div>
-              </Collapse>
-            ) : (
-              <Modal
-                size="lg"
-                show={isModalVisible}
-                // unique class
-                className={clsx(
-                  "m-0 edit-product-set-element-modal edit-right-form-modal h-100",
-                  modalClass
-                )}
-                dialogClassName="edit-event-dialog edit-step-dialog"
-                onHide={onHide}
-              >
-                <div className="edit-step-modal-header">
-                  <button
-                    className="p-0 cancel-add-step-btn border-0"
-                    type="button"
-                    onClick={onCancel}
-                  >
-                    <span>{t("Design:cancel")}</span>
-                  </button>
-
-                  {secondaryBadge && (
-                    <div
-                      className={`secondary-badge ${secondaryBadge?.className}`}
-                    >
-                      {secondaryBadge?.label}
-                    </div>
-                  )}
-                </div>
-                <Modal.Body as="form" noValidate>
-                  <div className="top-label-container">
-                    <span>{modalLabel}</span>
-                  </div>
-                  {body}
-
-                  <div className="d-flex product-set-element-control-btns justify-content-between">
-                    <Button
-                      className="step-save-btn mt-4"
-                      type="button"
-                      onClick={onHide}
-                    >
-                      {t("saveAndAdd")}
-                    </Button>
-                    <div className="d-flex justify-content-end mt-4 delete-btn">
-                      {Boolean(onDelete) && (
-                        <ConfirmModal>
-                          {(confirm) => (
-                            <DeleteFieldButton
-                              onDelete={() => confirm(onDelete)}
-                            />
-                          )}
-                        </ConfirmModal>
-                      )}
-                    </div>
-                  </div>
-                </Modal.Body>
-              </Modal>
-            )}
-          </div>
-
-          {sortableItems && (
-            <div className="sortable-tree-subitems">
-              {preItem}
-
-              <DndContext>
-                <SortableContext
-                  items={sortableItems}
-                  strategy={verticalListSortingStrategy}
-                >
-                  <Collapse in={expanded}>
-                    <div className="ml-0">{children}</div>
-                  </Collapse>
-                </SortableContext>
-              </DndContext>
-
-              {postItem}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/sortable-tree/index.ts

@@ -1,2 +0,0 @@
-export * from "./SortableTree";
-export { SortableTreeItemProps } from "./SortableTreeItem";

package/src/sorting-select/SortingSelect.stories.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { SortingSelect, SortingSelectProps } from "./SortingSelect";
-
-export default {
-  title: "SortingSelect",
-} as Meta;
-
-export const Default: Story<SortingSelectProps> = (props) => {
-  return <SortingSelect {...props} />;
-};
-
-Default.args = {
-  onSortingChange: () => null,
-};

package/src/sorting-select/SortingSelect.tsx

@@ -1,79 +0,0 @@
-import React, { useEffect, useState } from "react";
-import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
-import { Form, FormGroupProps } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import {
-  SORT_DIRECTION_ASC,
-  SORT_DIRECTION_NEWEST,
-  SORT_DIRECTION_DESC,
-  SORT_KEY_NAME,
-  SORT_KEY_CREATED_AT,
-} from "@licklist/core/dist/Config";
-
-export type SortingSelectProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  formGroupProps?: FormGroupProps & Record<string, any>;
-  defaultSortKey?: string;
-  defaultSortDirection?: string;
-  onSortingChange?: (url: URLSearchParams) => void;
-};
-
-export const SortingSelect = ({
-  formGroupProps,
-  defaultSortKey = SORT_KEY_NAME,
-  defaultSortDirection = SORT_DIRECTION_ASC,
-  onSortingChange,
-}: SortingSelectProps) => {
-  const { t } = useTranslation("Design");
-  const [controlValue, setControlValue] = useState(SORT_DIRECTION_ASC);
-  const searchParams = useQuery();
-
-  const { sortKey = defaultSortKey, sortDirection = defaultSortDirection } =
-    Object.fromEntries(searchParams);
-
-  const onSortingValueChange = ({ target: { value } }) => {
-    setControlValue(value);
-
-    const nextSortDirection =
-      value === SORT_DIRECTION_NEWEST ? SORT_DIRECTION_DESC : value;
-
-    const nextSortKey =
-      value === SORT_DIRECTION_NEWEST ? SORT_KEY_CREATED_AT : sortKey;
-
-    const nextSearchParams = new URLSearchParams(searchParams);
-
-    nextSearchParams.set("sortDirection", nextSortDirection);
-    nextSearchParams.set("sortKey", nextSortKey);
-
-    onSortingChange(nextSearchParams);
-  };
-
-  useEffect(() => {
-    if (sortKey === SORT_KEY_CREATED_AT) {
-      setControlValue(SORT_DIRECTION_NEWEST);
-      return;
-    }
-
-    setControlValue(sortDirection);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sortKey, sortDirection]);
-
-  return (
-    <Form.Group className="d-flex align-items-center p-0" {...formGroupProps}>
-      <Form.Label className="text-nowrap mr-4 mb-0">
-        {t("App:sortBy")}:
-      </Form.Label>
-      <Form.Control
-        as="select"
-        data-testid="sorting-select"
-        onChange={onSortingValueChange}
-        custom
-        value={controlValue}
-      >
-        <option value={SORT_DIRECTION_ASC}>A-Z</option>
-        <option value={SORT_DIRECTION_DESC}>Z-A</option>
-        <option value={SORT_DIRECTION_NEWEST}>{t("newestOnTop")}</option>
-      </Form.Control>
-    </Form.Group>
-  );
-};

package/src/sorting-select/index.ts

@@ -1 +0,0 @@
-export * from "./SortingSelect";

package/src/static/CountryCodeSelect.tsx

@@ -1,65 +0,0 @@
-import React from "react";
-import Form from "react-bootstrap/Form";
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { getCountries } from "react-phone-number-input/input";
-import en from "react-phone-number-input/locale/en.json";
-
-interface CountryCodeSelectProps {
-  fieldName: string;
-  className?: string;
-  disabled?: boolean;
-  errorLabel?: string;
-  error?: string;
-}
-
-function CountryCodeSelect({
-  className,
-  disabled,
-  fieldName,
-  errorLabel,
-  error,
-}: CountryCodeSelectProps) {
-  const { register } = useFormContext();
-  const { t } = useTranslation(["Design", "Validation"]);
-  const sortedCountries = getCountries().sort((a, b) => {
-    const countryNameA = en[a];
-    const countryNameB = en[b];
-    // we sort countries in this way, because some countries has non-ASCII characters like ä
-    return countryNameA.localeCompare(countryNameB);
-  });
-
-  const errorMessage = errorLabel
-    ? t("Validation:fieldRequired", {
-        attribute: errorLabel,
-      })
-    : true;
-
-  return (
-    <>
-      <Form.Control
-        {...register(fieldName, {
-          required: errorMessage,
-        })}
-        as="select"
-        className={className}
-        custom
-        disabled={disabled}
-        defaultValue=""
-        isInvalid={Boolean(error)}
-      >
-        <option key="" value="" disabled>
-          {t("chooseCountry")}
-        </option>
-        {sortedCountries.map((key: keyof typeof en) => (
-          <option key={key as string} value={key as string}>
-            {en[key]}
-          </option>
-        ))}
-      </Form.Control>
-      <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
-    </>
-  );
-}
-
-export default CountryCodeSelect;

package/src/static/CountrySelect.tsx

@@ -1,74 +0,0 @@
-import React, { ChangeEvent, useState, useEffect } from "react";
-import Form from "react-bootstrap/Form";
-import {
-  getCountries,
-  getCountryCallingCode,
-} from "react-phone-number-input/input";
-import FlagComponent from "react-phone-number-input/commonjs/Flag";
-import en from "react-phone-number-input/locale/en.json";
-import "react-phone-number-input/style.css";
-
-interface Props {
-  defaultCountry: string;
-  className?: any;
-  onChange?: (country: string, code: string) => void;
-  disabled?: boolean;
-}
-
-function CountrySelect(props: Props) {
-  const { defaultCountry, className, onChange, disabled } = props;
-  const [country, setCountry] = useState<string>(defaultCountry);
-  const [prevCountry, setPrevCountry] = useState<string>("");
-
-  const handleOnChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    const { value } = event.target;
-    const finalValue = value || defaultCountry;
-
-    setCountry(() => finalValue);
-  };
-
-  useEffect(() => {
-    const init = () => {
-      if (onChange) {
-        onChange(country, getCountryCallingCode(country));
-      }
-
-      setPrevCountry(() => country);
-    };
-
-    if (country !== prevCountry) {
-      init();
-    }
-  }, [onChange, country, prevCountry]);
-
-  return (
-    <div className="PhoneInputCountry">
-      <div className="PhoneInputCountryIcon">
-        <FlagComponent
-          country={country}
-          countryName={country}
-          // it points to `country-flag-icons` gitlab pages website.
-          flagUrl="https://purecatamphetamine.github.io/country-flag-icons/3x2/{XX}.svg"
-          className="PhoneInputCountryIconImg"
-        />
-      </div>
-
-      <Form.Control
-        as="select"
-        className={["PhoneInputCountrySelect", className].join(" ")}
-        custom
-        onChange={handleOnChange}
-        value={country}
-        disabled={disabled}
-      >
-        {getCountries().map((key: keyof typeof en) => (
-          <option key={key as string} value={key as string}>
-            {en[key]} +{getCountryCallingCode(key)}
-          </option>
-        ))}
-      </Form.Control>
-    </div>
-  );
-}
-
-export default CountrySelect;

package/src/static/CurrencyNumberInput.tsx

@@ -1,57 +0,0 @@
-import React, { forwardRef, ReactNode } from "react";
-import { Form, FormControlProps } from "react-bootstrap";
-
-export interface CurrencyNumberInputProps extends FormControlProps {
-  value?: number;
-  label: string;
-  disabled?: boolean;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  labelClassName?: string;
-  controlClassName?: string;
-  currency?: string;
-  error?: ReactNode;
-  min?: number;
-  max?: number;
-  step?: number;
-  placeholder?: string;
-}
-
-export const CurrencyNumberInput = forwardRef<
-  HTMLInputElement,
-  CurrencyNumberInputProps
->(
-  (
-    {
-      value,
-      label,
-      disabled = false,
-      onChange,
-      labelClassName,
-      controlClassName,
-      currency = "£",
-      error,
-      ...props
-    },
-    ref
-  ) => (
-    <Form.Group className="currency-number-input">
-      <Form.Label className={labelClassName}>{label}</Form.Label>
-      <div className="position-relative">
-        <div className="currency">{currency}</div>
-
-        <Form.Control
-          className={controlClassName}
-          type="number"
-          disabled={disabled}
-          value={value}
-          onChange={onChange}
-          ref={ref}
-          {...props}
-        />
-        <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
-      </div>
-    </Form.Group>
-  )
-);
-
-CurrencyNumberInput.displayName = "CurrencyNumberInput";

package/src/static/FormCard.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import Card from "react-bootstrap/Card";
-
-export interface Props {
-  children?: React.ReactNode | React.ReactNode[];
-  className?: string;
-}
-
-function FormCard(props: Props) {
-  const { children, className } = props;
-
-  return (
-    <Card body className={["form-card", className].join(" ")}>
-      {children}
-    </Card>
-  );
-}
-
-export default FormCard;