@licklist/design 0.44.485-dev.89 → 0.44.485-dev.9

package/src/product-set/hooks/useSortableTreeFunctions.ts

@@ -1,37 +0,0 @@
-import { useState } from "react";
-import { useFormContext } from "react-hook-form";
-
-interface useSortableTreeFunctionsProps {
-  fieldName: string;
-  remove: (index?: number | number[]) => void;
-}
-export const useSortableTreeFunctions = ({
-  fieldName,
-  remove,
-}: useSortableTreeFunctionsProps) => {
-  const { getValues, setValue } = useFormContext();
-  const [previousValue, setEditValue] = useState(null);
-
-  const edit = (index: number) => {
-    const currentCategoryProduct = getValues(`${fieldName}.${index}` as const);
-    const cloneCategoryProduct = structuredClone(currentCategoryProduct);
-    setEditValue(cloneCategoryProduct);
-  };
-
-  const cancelChanges = (index: number) => {
-    if (!previousValue) {
-      return remove(index);
-    }
-    return setValue(`${fieldName}.${index}` as const, previousValue);
-  };
-
-  const saveValidField = () => {
-    setEditValue(null);
-  };
-
-  return {
-    edit,
-    cancelChanges,
-    saveValidField,
-  };
-};

package/src/product-set/product/constants.ts

@@ -1 +0,0 @@
-export const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000;

package/src/provider/constants.ts

@@ -1 +0,0 @@
-export const MAX_DESCRIPTION_CHARACTERS_LENGTH = 25500;

package/src/radio-card/RadioCard.stories.tsx

@@ -1,48 +0,0 @@
-import React, { useEffect } from "react";
-import { Meta, Story } from "@storybook/react";
-import { FormProvider, useForm } from "react-hook-form";
-import { RadioCard, RadioCardProps } from "./RadioCard";
-
-export default {
-  title: "Widgets / Widget Type Radio Card",
-  component: RadioCard,
-} as Meta;
-
-type FormModel = {
-  name: string;
-};
-
-export const Default: Story<RadioCardProps<FormModel>> = (args) => {
-  const form = useForm<FormModel>();
-
-  return (
-    <FormProvider {...form}>
-      <RadioCard {...args} />
-    </FormProvider>
-  );
-};
-
-Default.args = {
-  label: "Venue Map",
-  description: "Date > Floor",
-  name: "name",
-};
-
-export const Invalid: Story<RadioCardProps<FormModel>> = (args) => {
-  const form = useForm<FormModel>();
-
-  return (
-    <FormProvider {...form}>
-      <RadioCard {...args} />
-    </FormProvider>
-  );
-};
-
-Invalid.args = {
-  label: "Venue Map",
-  description: "Date > Floor",
-  name: "name",
-  inputProps: {
-    isInvalid: true,
-  },
-};

package/src/radio-card/RadioCard.tsx

@@ -1,49 +0,0 @@
-import clsx from "clsx";
-import React, { ReactNode } from "react";
-import { Form } from "react-bootstrap";
-import { FormCheckInputProps } from "react-bootstrap/esm/FormCheckInput";
-import { Path, RegisterOptions, useFormContext } from "react-hook-form";
-
-export type RadioCardProps<FormModel> = {
-  label: string;
-  description: ReactNode;
-  name: Path<FormModel>;
-  value: string;
-  rules: RegisterOptions<FormModel>;
-  inputProps?: FormCheckInputProps;
-};
-
-export const RadioCard = <FormModel,>({
-  label,
-  description,
-  name,
-  value,
-  rules,
-  inputProps,
-}: RadioCardProps<FormModel>) => {
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext<FormModel>();
-
-  const isInvalid = !!errors[name as string] || inputProps?.isInvalid;
-
-  return (
-    <Form.Check className={clsx("radio-card", isInvalid && "invalid")}>
-      <Form.Check.Label>
-        <div className="radio-card-controls">
-          <Form.Check.Input
-            type="radio"
-            isInvalid={isInvalid}
-            value={value}
-            {...register(name, rules)}
-            {...inputProps}
-          />
-          <span>{label}</span>
-        </div>
-
-        <p className="radio-card-description">{description}</p>
-      </Form.Check.Label>
-    </Form.Check>
-  );
-};

package/src/radio-card/index.ts

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

package/src/sortable-fields/SortableFieldItem.tsx

@@ -1,60 +0,0 @@
-import React, { createContext, useContext, useMemo } from "react";
-import type { CSSProperties, PropsWithChildren } from "react";
-import type {
-  DraggableSyntheticListeners,
-  UniqueIdentifier,
-} from "@dnd-kit/core";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-
-interface Props {
-  id: UniqueIdentifier;
-}
-
-interface Context {
-  listeners: DraggableSyntheticListeners;
-  ref(node: HTMLElement | null): void;
-}
-
-const SortableItemContext = createContext<Context>({
-  listeners: undefined,
-  ref: () => {},
-});
-
-export function SortableFieldItem({ children, id }: PropsWithChildren<Props>) {
-  const { isDragging, listeners, setNodeRef, setDraggableNodeRef, transform } =
-    useSortable({ id });
-  const context = useMemo(
-    () => ({
-      listeners,
-      ref: setDraggableNodeRef,
-    }),
-    [listeners, setDraggableNodeRef]
-  );
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.4 : undefined,
-    transform: CSS.Translate.toString(transform),
-  };
-
-  return (
-    <SortableItemContext.Provider value={context}>
-      <div ref={setNodeRef} className="sortable-field-list" style={style}>
-        {children}
-      </div>
-    </SortableItemContext.Provider>
-  );
-}
-
-export function DragHandle() {
-  const { listeners, ref } = useContext(SortableItemContext);
-
-  return (
-    <div {...listeners} ref={ref}>
-      <div className="icon-container">
-        <div />
-        <div />
-        <div />
-      </div>
-    </div>
-  );
-}

package/src/sortable-fields/SortableFieldList.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import type { ReactNode } from "react";
-import {
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import type { UniqueIdentifier } from "@dnd-kit/core";
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-} from "@dnd-kit/sortable";
-
-import { DragHandle, SortableFieldItem } from "./SortableFieldItem";
-
-interface BaseItem {
-  id: UniqueIdentifier;
-}
-
-export interface SortableFieldListProps<T extends BaseItem> {
-  items: T[];
-  onChange(activeIndex: number, overIndex: number): void;
-  renderItem(item: T, index: number): ReactNode;
-}
-
-export function SortableFieldList<T extends BaseItem>({
-  items,
-  onChange,
-  renderItem,
-}: SortableFieldListProps<T>) {
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  return (
-    <DndContext
-      sensors={sensors}
-      onDragEnd={({ active, over }) => {
-        if (over && active.id !== over?.id) {
-          const activeIndex = items.findIndex(({ id }) => id === active.id);
-          const overIndex = items.findIndex(({ id }) => id === over.id);
-
-          onChange(activeIndex, overIndex);
-        }
-      }}
-    >
-      <SortableContext items={items}>
-        {items.map((item, index) => (
-          <div key={item.id}>{renderItem(item, index)}</div>
-        ))}
-      </SortableContext>
-    </DndContext>
-  );
-}
-
-SortableFieldList.Item = SortableFieldItem;
-SortableFieldList.DragHandle = DragHandle;

package/src/sortable-fields/index.ts

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

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/striped-static-table/StripedStaticTable.stories.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import {
-  StripedStaticTable,
-  StripedStaticTableProps,
-} from "./StripedStaticTable";
-
-export default {
-  title: "StripedStaticTable",
-  component: StripedStaticTable,
-} as Meta;
-
-export const Default: Story<StripedStaticTableProps> = (args) => {
-  return <StripedStaticTable {...args} />;
-};
-
-Default.args = {
-  columns: [
-    { key: "name", label: "" },
-    { key: "quantity", label: "" },
-    { key: "total", label: "" },
-  ],
-  data: [
-    [
-      {
-        key: 1,
-        name: "test category",
-        quantity: "Qty",
-        total: "Total",
-      },
-      {
-        key: 2,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 4,
-        name: "total per category",
-        quantity: "2/16",
-        total: "160",
-      },
-    ],
-    [
-      {
-        key: 1,
-        name: "test category",
-        quantity: "Qty",
-        total: "Total",
-      },
-      {
-        key: 2,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 5,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 4,
-        name: "total per category",
-        quantity: "2/16",
-        total: "160",
-      },
-    ],
-  ],
-};

package/src/striped-static-table/StripedStaticTable.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-
-import { StaticTableProps, StaticTable, StaticTableData } from "../table";
-
-export type StripedStaticTableProps = Omit<StaticTableProps, "data"> & {
-  data: StaticTableData[][];
-};
-
-export const StripedStaticTable = ({
-  columns,
-  className = "",
-  data,
-  ...props
-}: StripedStaticTableProps) => {
-  const styledData = data
-    .map(
-      (section) =>
-        section.map((row, rowIndex, array) => {
-          const { length } = array;
-
-          return Object.fromEntries(
-            Object.entries(row).map(([key, value]) => {
-              if (key === "key") {
-                return [key, value];
-              }
-
-              // make first row blue and bold
-              if (rowIndex === 0) {
-                return [
-                  key,
-                  <div key={key} className="bold header-row">
-                    {value}
-                  </div>,
-                ];
-              }
-
-              // make last row bold
-              if (rowIndex === length - 1) {
-                return [
-                  key,
-                  <div key={key} className="bold">
-                    {value}
-                  </div>,
-                ];
-              }
-
-              return [key, value];
-            })
-          );
-        }) as StaticTableData[]
-    )
-    .flat();
-
-  return (
-    <StaticTable
-      columns={columns}
-      data={styledData}
-      className={`striped-static-table ${className}`}
-      displayHeader={false}
-      {...props}
-    />
-  );
-};

package/src/striped-static-table/index.ts

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

package/src/styles/iframe-customers-journey/ActivitiesCard.scss

@@ -1,37 +0,0 @@
-@import "../snippet-templates/snippetVariables";
-
-.activity-card {
-  border: 2px solid transparent;
-  transition: $color-transition;
-  color: $snippet-elements-body-color;
-  border-radius: 0.5rem;
-  padding: 0.375rem;
-  min-height: 12.5rem;
-  width: 11.5rem;
-  word-wrap: break-word;
-  background-color: #fff;
-  font-size: 0.8rem;
-  color: $snippet-elements-body-color;
-
-  div {
-    text-align: left;
-  }
-
-  &.active {
-    border: 2px solid #0e8be1;
-  }
-
-  &-image {
-    width: 100%;
-    height: 6.3rem;
-    margin-bottom: 0.5rem;
-    border-radius: 0.3rem;
-  }
-
-  &-title {
-    font-weight: 600;
-    line-height: 1.25rem;
-    cursor: pointer;
-    font-size: 0.875rem;
-  }
-}

package/src/styles/iframe-customers-journey/ActivitiesSelectedCard.scss

@@ -1,57 +0,0 @@
-@import "../snippet-templates/snippetVariables";
-
-.list-activity-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  height: 5rem;
-  border: 2px solid transparent;
-  border: 2px solid transparent;
-  background-color: $snippet-product-set-background-color;
-  color: $snippet-product-set-font-color;
-  transition: $color-transition;
-
-  &.active {
-    border: 2px solid #0e8be1;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-
-  .description {
-    width: 70%;
-    font-size: 0.81rem;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .title {
-    font-weight: 600;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-  }
-
-  .image-container {
-    display: flex;
-    justify-content: start;
-    height: 100%;
-
-    .image {
-      display: flex;
-      align-items: start;
-      width: 7rem;
-      height: 4rem;
-      margin-left: 3rem;
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: center;
-      border-radius: 0.5rem;
-    }
-  }
-}
-
-.list-activity-card-hr {
-  margin-top: 0;
-}

package/src/styles/iframe-customers-journey/DateTimeButton.scss

@@ -1,84 +0,0 @@
-.date-time-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  font-size: 0.82rem;
-  line-height: 1.3rem;
-  font-weight: 600;
-  background-color: $snippet-calendar-button-background-color;
-  border-radius: 0.4rem;
-  text-align: center;
-  border: 2px solid $snippet-calendar-button-border-color;
-  color: $snippet-calendar-button-font-color;
-  flex-grow: 1;
-  transition: $color-transition;
-  min-width: 6rem;
-  max-width: 7.25rem;
-  min-height: 3.3rem;
-  max-height: 8.375rem;
-
-  &.disabled {
-    border: 2px solid $snippet-calendar-disabled-button-border-color;
-    background-color: $snippet-calendar-disabled-button-background-color;
-    color: $snippet-calendar-disabled-button-font-color;
-
-    .descriptions {
-      color: $snippet-calendar-disabled-button-font-color;
-    }
-  }
-
-  &.selected {
-    border: 2px solid $snippet-calendar-active-button-border-color;
-    background-color: $snippet-calendar-active-button-background-color;
-    color: $snippet-calendar-active-button-font-color;
-    transition: $color-transition;
-
-    .descriptions {
-      color: $snippet-calendar-active-button-font-color;
-      background-color: $snippet-calendar-active-button-background-color;
-      font-weight: 600;
-      transition: $color-transition;
-    }
-
-    .time {
-      font-weight: 600;
-    }
-  }
-
-  &.time-button {
-    min-width: 4.75rem;
-    max-width: 4.75rem;
-    min-height: 2.75rem;
-  }
-
-  &.only-time-container {
-    min-width: 5.3rem;
-    max-width: 5.3rem;
-    min-height: 2.75rem;
-  }
-}
-
-.time {
-  font-size: 0.875rem;
-  font-weight: 300;
-}
-
-.descriptions {
-  font-size: 0.7rem;
-  line-height: 1.03rem;
-  font-weight: 300;
-  color: $snippet-calendar-button-font-color;
-}
-
-.info {
-  display: flex;
-  justify-content: center;
-  font-weight: 300;
-  flex-direction: row;
-
-  .logo {
-    width: 0.5rem;
-    margin-right: 0.5rem;
-  }
-}

package/src/styles/iframe-customers-journey/_index.scss

@@ -1,3 +0,0 @@
-@import "./ActivitiesSelectedCard.scss";
-@import "./ActivitiesCard.scss";
-@import "./DateTimeButton.scss";