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

package/dist/styles/sortable-field/SortableField.scss

@@ -1,21 +0,0 @@
-.sortable-field-list {
-    display: flex;
-
-    .icon-container {
-        margin-right: .8rem;
-        margin-left: .2rem;
-        margin-top: 1rem;
-
-        div {
-            width: 0.75rem;
-            height: 2px;
-            margin-bottom: 2px;
-            background-color: #B5CCDE;
-            border-radius: 1px;
-        }
-    }
-
-    .form-group {
-        width: 100%;
-    }
-}

package/dist/styles/sortable-field/_index.scss

@@ -1 +0,0 @@
-@import "./SortableField";

package/dist/styles/striped-static-table/_index.scss

@@ -1,33 +0,0 @@
-table.striped-static-table {
-  tbody {
-    tr {
-      border-bottom: 1px solid $gray-500;
-      td {
-        text-transform: capitalize;
-
-        &:nth-child(2),
-        &:nth-child(3) {
-          text-align: right;
-        }
-        &:nth-child(2) {
-          width: 20%;
-        }
-        &:nth-child(3) {
-          width: 35%;
-        }
-      }
-
-      td:has(div.header-row) {
-        background-color: #d8ecf7;
-      }
-
-      &:first-child {
-        border-top: 1px solid $gray-500;
-      }
-    }
-  }
-
-  .bold {
-    font-weight: 600;
-  }
-}

package/src/assets/iframe/dateInfo/available.svg

@@ -1,5 +0,0 @@
-<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.943939" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-</svg>

package/src/assets/iframe/dateInfo/limited.svg

@@ -1,5 +0,0 @@
-<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.2406" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#E4E4E4" stroke="white"/>
-<rect x="1.2406" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
-<rect x="1.2406" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
-</svg>

package/src/assets/iframe/dateInfo/soldOut.svg

@@ -1,6 +0,0 @@
-<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="5.94013" height="10" transform="translate(0.497131)" fill="white"/>
-<rect x="0.591156" y="0.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
-<rect x="0.591156" y="3.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
-<rect x="0.591156" y="6.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
-</svg>

package/src/date-time-button/DateTimeButton.stories.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { DateTime } from "luxon";
-import { DateTimeButton, DateTimeButtonProps } from "./DateTimeButton";
-
-export default {
-  title: "DateTimeButton",
-  component: DateTimeButton,
-} as Meta;
-
-const date = DateTime.fromISO("2023-12-28T10:10:10.000Z");
-
-export const Default: Story<DateTimeButtonProps> = (args) => {
-  return <DateTimeButton {...args} />;
-};
-
-Default.args = {
-  date,
-  isSelected: false,
-  isDisabled: false,
-  onSelect: () => null,
-};
-
-export const Selected: Story<DateTimeButtonProps> = (args) => {
-  return <DateTimeButton {...args} />;
-};
-
-Selected.args = {
-  date,
-  isSelected: true,
-  isDisabled: false,
-  onSelect: () => null,
-};
-
-export const Disabled: Story<DateTimeButtonProps> = (args) => {
-  return <DateTimeButton {...args} />;
-};
-
-Disabled.args = {
-  date,
-  isSelected: false,
-  isDisabled: true,
-  onSelect: () => null,
-};
-
-export const Time: Story<DateTimeButtonProps> = (args) => {
-  return <DateTimeButton {...args} />;
-};
-
-Time.args = {
-  date,
-  isSelected: false,
-  isDisabled: true,
-  onSelect: () => null,
-  isTimeButton: true,
-};
-
-export const OnlyTime: Story<DateTimeButtonProps> = (args) => {
-  return <DateTimeButton {...args} />;
-};
-
-OnlyTime.args = {
-  date,
-  isSelected: false,
-  isDisabled: true,
-  onSelect: () => null,
-  isOnlyTimeContainer: true,
-};

package/src/date-time-button/DateTimeButton.tsx

@@ -1,106 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import { DateTime } from "luxon";
-import { DAY_NUMBER_WITH_MONTH, DAY_OF_WEEK } from "@licklist/core/dist/Config";
-import { useTranslation } from "react-i18next";
-import { isToday, isTomorrow } from "date-fns";
-
-export type DateTimeButtonProps = {
-  date?: DateTime;
-  time?: string;
-  isSelected?: boolean;
-  isDisabled?: boolean;
-  onSelect: (date: DateTime | string) => void;
-  isOnlyTimeContainer?: boolean;
-};
-
-export const DateTimeButton = ({
-  date,
-  isDisabled,
-  time,
-  isSelected,
-  onSelect,
-  isOnlyTimeContainer,
-}: DateTimeButtonProps) => {
-  const onClick = () => {
-    if (isDisabled) return;
-    onSelect(date || time);
-  };
-
-  // const infoLogo = useMemo(() => {
-  //   if (info?.logo === infoLogoType.LIMIT) {
-  //     return <LimitedSvg />;
-  //   }
-  //   if (info?.logo === infoLogoType.AVAILABLE) {
-  //     return <AvailableSvg />;
-  //   }
-  //   if (info?.logo === infoLogoType.SOLD_OUT) {
-  //     return <SoldOutSvg />;
-  //   }
-  //   return null;
-  // }, [info]);
-
-  return (
-    <div
-      role="button"
-      onClick={onClick}
-      onKeyPress={onClick}
-      className={clsx(
-        "date-time-button",
-        isDisabled && "disabled",
-        isSelected && "selected",
-        time && "time-button",
-        isOnlyTimeContainer && "only-time-container"
-      )}
-      tabIndex={0}
-    >
-      {date ? (
-        <DateContent
-          date={date}
-          isDisabled={isDisabled}
-          isSelected={isSelected}
-        />
-      ) : (
-        time
-      )}
-
-      {/* TODO fix info props */}
-      {/* {info && (
-        <div className="info">
-          {info.logo && <Logo className="logo" logo={infoLogo} />}
-          <div>{info.description}</div>
-        </div>
-      )} */}
-    </div>
-  );
-};
-
-const DateContent = ({
-  date,
-  isDisabled,
-  isSelected,
-}: Pick<DateTimeButtonProps, "date" | "isDisabled" | "isSelected">) => {
-  const { t } = useTranslation("Design");
-
-  const getDate = () => {
-    if (isToday(date.toJSDate())) return t("today");
-    if (isTomorrow(date.toJSDate())) return t("tomorrow");
-    return date.toFormat(DAY_OF_WEEK);
-  };
-
-  return (
-    <>
-      {getDate()}
-      <div
-        className={clsx(
-          "descriptions",
-          isSelected && "selected",
-          isDisabled && "disabled"
-        )}
-      >
-        {/* TODO add ordinal to date format */}
-        {date.toFormat(DAY_NUMBER_WITH_MONTH)}
-      </div>
-    </>
-  );
-};

package/src/date-time-button/index.ts

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

package/src/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { Group, Rect, Text } from "react-konva";
-
-const TOOLTIP_WIDTH = 60;
-const TOOLTIP_HEIGHT = 20;
-
-const BACKGROUND_COLOR = "#000";
-const BACKGROUND_Y_OFFSET = 1;
-const BACKGROUND_X_OFFSET = 30;
-const BACKGROUND_RADIUS = 5;
-const BACKGROUND_OPACITY = 0.8;
-
-const TEXT_Y_OFFSET = 4;
-const TEXT_STROKE_WIDTH = 5;
-const TEXT_COLOR = "#FFF";
-const TEXT_ALIGN = "center";
-const TEXT_VERTICAL_ALIGN = "middle";
-
-type ProductTooltipProps = {
-  x: number;
-  y: number;
-  text: string;
-};
-
-export const ProductTooltip = ({ x, y, text }: ProductTooltipProps) => {
-  return (
-    <Group
-      width={TOOLTIP_WIDTH}
-      height={TOOLTIP_HEIGHT}
-      x={x + BACKGROUND_X_OFFSET}
-      y={y - BACKGROUND_Y_OFFSET}
-    >
-      <Rect
-        x={-5}
-        y={5}
-        sceneFunc={(context) => {
-          context.beginPath();
-          context.moveTo(0, 5);
-          context.lineTo(5, 0);
-          context.lineTo(5, 10);
-          context.closePath();
-          context.fill();
-        }}
-        fill={BACKGROUND_COLOR}
-        borderColor={BACKGROUND_COLOR}
-        opacity={BACKGROUND_OPACITY}
-      />
-      <Rect
-        x={0}
-        y={0}
-        width={TOOLTIP_WIDTH}
-        height={TOOLTIP_HEIGHT}
-        fill={BACKGROUND_COLOR}
-        cornerRadius={BACKGROUND_RADIUS}
-        opacity={BACKGROUND_OPACITY}
-      />
-      <Text
-        y={TEXT_Y_OFFSET}
-        text={text}
-        strokeWidth={TEXT_STROKE_WIDTH}
-        width={TOOLTIP_WIDTH}
-        align={TEXT_ALIGN}
-        verticalAlign={TEXT_VERTICAL_ALIGN}
-        fill={TEXT_COLOR}
-      />
-    </Group>
-  );
-};

package/src/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.ts

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

package/src/iframe/activity-cards/activity-card/ActivityCard.stories.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { ActivityCard, ActivityCardProps } from "./ActivityCard";
-
-export default {
-  title: "Iframe/ActivityCard",
-  component: ActivityCard,
-} as Meta;
-
-export const Default: Story<ActivityCardProps> = (props) => {
-  return <ActivityCard {...props} />;
-};
-
-Default.args = {
-  title: "Clay Pigeons & Axe Thowing",
-  duration: "60 mins",
-  price: "from £20",
-  image: {
-    hash: "0b37b130e22aa2d3",
-    id: 195,
-    imageType: "cover",
-    imageableId: 25,
-    imageableType: "zone",
-    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-    // eslint-disable-next-line max-len
-    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-  },
-  onSelect: () => null,
-  isSelected: false,
-};
-
-export const Selected: Story<ActivityCardProps> = (props) => {
-  return <ActivityCard {...props} />;
-};
-
-Selected.args = {
-  title: "Clay Pigeons & Axe Thowing",
-  duration: "60 mins",
-  price: "from £20",
-  image: {
-    hash: "0b37b130e22aa2d3",
-    id: 195,
-    imageType: "cover",
-    imageableId: 25,
-    imageableType: "zone",
-    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-    // eslint-disable-next-line max-len
-    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-  },
-  onSelect: () => null,
-  isSelected: true,
-};

package/src/iframe/activity-cards/activity-card/ActivityCard.tsx

@@ -1,38 +0,0 @@
-import React, { ReactNode } from "react";
-import clsx from "clsx";
-import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
-
-export interface ActivityCardProps {
-  title: ReactNode;
-  duration: ReactNode;
-  price: ReactNode;
-  image?: Image | null;
-  onSelect: () => void;
-  isSelected: boolean;
-}
-
-export const ActivityCard = ({
-  title,
-  duration,
-  price,
-  image,
-  onSelect,
-  isSelected,
-}: ActivityCardProps) => {
-  return (
-    <button
-      type="button"
-      className={clsx("activity-card", isSelected && "active")}
-      onClick={onSelect}
-    >
-      {image && <img className="activity-card-image" alt="" src={image.url} />}
-      <div className={clsx("d-flex", "flex-column", !image && "no-image")}>
-        <div className="activity-card-title">{title}</div>
-
-        {duration && <div>{duration}</div>}
-
-        {price && <div>{price}</div>}
-      </div>
-    </button>
-  );
-};

package/src/iframe/activity-cards/index.ts

@@ -1,2 +0,0 @@
-export * from "./list-activity-card/ListActivityCard";
-export * from "./activity-card/ActivityCard";

package/src/iframe/activity-cards/list-activity-card/ListActivityCard.stories.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { ListActivityCardProps, ListActivityCard } from "./ListActivityCard";
-
-export default {
-  title: "Iframe/ListActivityCard",
-  component: ListActivityCard,
-} as Meta;
-
-export const Default: Story<ListActivityCardProps> = (props) => {
-  return <ListActivityCard {...props} />;
-};
-
-Default.args = {
-  title: "Clay Pigeons & Axe Thowing",
-  duration: "60 mins",
-  price: "from £20",
-  image: {
-    hash: "0b37b130e22aa2d3",
-    id: 195,
-    imageType: "cover",
-    imageableId: 25,
-    imageableType: "zone",
-    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-    // eslint-disable-next-line max-len
-    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-  },
-  onSelect: () => null,
-  isSelected: false,
-};
-
-export const Selected: Story<ListActivityCardProps> = (props) => {
-  return <ListActivityCard {...props} />;
-};
-
-Selected.args = {
-  title: "Clay Pigeons & Axe Thowing",
-  duration: "60 mins",
-  price: "from £20",
-  image: {
-    hash: "0b37b130e22aa2d3",
-    id: 195,
-    imageType: "cover",
-    imageableId: 25,
-    imageableType: "zone",
-    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-    // eslint-disable-next-line max-len
-    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-  },
-  onSelect: () => null,
-  isSelected: true,
-};

package/src/iframe/activity-cards/list-activity-card/ListActivityCard.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
-
-export interface ListActivityCardProps {
-  title: string;
-  duration: string;
-  price: string;
-  image?: Image | null;
-  onSelect: () => void;
-  isSelected: boolean;
-}
-
-export const ListActivityCard = ({
-  title,
-  duration,
-  price,
-  image,
-  onSelect,
-  isSelected,
-}: ListActivityCardProps) => {
-  return (
-    <div role="button" onClick={onSelect} onKeyPress={onSelect} tabIndex={0}>
-      <div
-        className={clsx("list-activity-card", {
-          active: isSelected,
-        })}
-      >
-        <div className="description">
-          <div className="title">{title}</div>
-          {duration && (
-            <div>
-              <p>{duration}</p>
-            </div>
-          )}
-
-          {price && <div>{price}</div>}
-        </div>
-
-        {image && (
-          <div className="image-container">
-            <img className="image" src={image.url} alt="" />
-          </div>
-        )}
-      </div>
-      <hr className="list-activity-card-hr" />
-    </div>
-  );
-};

package/src/iframe/order-process/components/ErrorModal/index.ts

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

package/src/image-radio-input/ImageRadioInput.stories.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { FormProvider, useForm } from "react-hook-form";
-import { ImageRadioInput, ImageRadioInputProps } from "./ImageRadioInput";
-import { ReactComponent as MonthIcon } from "../assets/widgets/monthCalendar.svg";
-import Icon from "../static/Icon";
-
-export default {
-  title: "ImageRadioInput",
-  component: ImageRadioInput,
-} as Meta;
-
-type FormModel = {
-  test: string;
-};
-
-export const Default: Story<ImageRadioInputProps<FormModel>> = (args) => {
-  const form = useForm();
-
-  return (
-    <FormProvider {...form}>
-      <ImageRadioInput {...args} />
-    </FormProvider>
-  );
-};
-
-Default.args = {
-  img: <MonthIcon />,
-  label: "Month",
-  name: "test",
-};
-
-export const WithFontAwesomeIcon: Story<ImageRadioInputProps<FormModel>> = (
-  args
-) => {
-  const form = useForm();
-
-  return (
-    <FormProvider {...form}>
-      <ImageRadioInput {...args} />
-    </FormProvider>
-  );
-};
-
-WithFontAwesomeIcon.args = {
-  img: <Icon type="bars" />,
-  label: "List",
-  name: "test",
-};
-
-export const Disabled: Story<ImageRadioInputProps<FormModel>> = (args) => {
-  const form = useForm();
-
-  return (
-    <FormProvider {...form}>
-      <ImageRadioInput {...args} />
-    </FormProvider>
-  );
-};
-
-Disabled.args = {
-  img: <MonthIcon />,
-  label: "Month",
-  name: "test",
-  disabled: true,
-  disabledMessage: "Coming soon",
-};

package/src/image-radio-input/ImageRadioInput.tsx

@@ -1,53 +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 ImageRadioInputProps<FormModel> = {
-  img: ReactNode;
-  label: string;
-  value: string | number;
-  name: Path<FormModel>;
-  disabled?: boolean;
-  disabledMessage?: string;
-  rules?: RegisterOptions<FormModel>;
-  inputProps?: FormCheckInputProps;
-};
-
-export const ImageRadioInput = <FormModel,>({
-  img,
-  label,
-  value,
-  name,
-  disabled,
-  disabledMessage,
-  rules,
-  inputProps,
-}: ImageRadioInputProps<FormModel>) => {
-  const { register } = useFormContext<FormModel>();
-
-  return (
-    <Form.Check className="image-radio-input">
-      <Form.Check.Label
-        className={clsx("image-radio-input-wrapper", disabled && "disabled")}
-      >
-        <div className="image-radio-input-image-wrapper">{img}</div>
-
-        <div className="image-radio-input-label">
-          <Form.Check.Input
-            type="radio"
-            value={value}
-            disabled={disabled}
-            {...register(name, rules)}
-            {...inputProps}
-          />
-          <span>{label}</span>
-        </div>
-      </Form.Check.Label>
-      <Form.Control.Feedback type="valid" className="d-block text-center">
-        {disabledMessage}
-      </Form.Control.Feedback>
-    </Form.Check>
-  );
-};

package/src/notification/hooks/useTranslatedParameters.ts

@@ -1,27 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-type UseTranslatedParametersProps = {
-  isDefault: boolean;
-  isActive: boolean;
-};
-
-export const useTranslatedParameters = ({
-  isActive,
-  isDefault,
-}: UseTranslatedParametersProps) => {
-  const { t } = useTranslation(["Design"]);
-
-  const translatedParameters = () => {
-    const texts: string[] = [];
-    if (isDefault) {
-      texts.push(t("Design:default"));
-    }
-    if (isActive) {
-      texts.push(t("Design:active"));
-    }
-
-    return texts.join(", ");
-  };
-
-  return translatedParameters();
-};