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

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

@@ -1,64 +0,0 @@
-import {
-  DAY_OF_WEEK,
-  DAY_NUMBER_WITH_MONTH,
-  TIME_FORMAT,
-  DAY_NUMBER,
-} from "@licklist/core/dist/Config";
-import { getDayWithOrdinal } from "@licklist/plugins/dist/utils/formatDate";
-import clsx from "clsx";
-import { isToday, isTomorrow } from "date-fns";
-import { DateTime } from "luxon";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { DateTimeButtonProps, Variant } from "./DateTimeButton";
-
-type DateContentProps = Pick<
-  DateTimeButtonProps,
-  "isDisabled" | "isSelected" | "variant"
-> & {
-  date: DateTime;
-};
-
-export const DateContent = ({
-  date,
-  variant,
-  isDisabled,
-  isSelected,
-}: DateContentProps) => {
-  const { t } = useTranslation("Design");
-
-  if (variant === Variant.time) {
-    return <>{date.toFormat(TIME_FORMAT)}</>;
-  }
-
-  if (variant === Variant.month) {
-    return <>{date.toFormat(DAY_NUMBER)}</>;
-  }
-
-  const [day, month] = date.toFormat(DAY_NUMBER_WITH_MONTH).split(" ");
-
-  const label = t(getDate(date));
-
-  return (
-    <div className="weekday-info">
-      <div>{label}</div>
-      <div
-        className={clsx(
-          "descriptions",
-          isSelected && "selected",
-          isDisabled && "disabled"
-        )}
-      >
-        {`${getDayWithOrdinal(+day)} ${month}`}
-      </div>
-    </div>
-  );
-};
-
-const getDate = (date: DateTime): string => {
-  if (isToday(date.toJSDate())) return "today";
-
-  if (isTomorrow(date.toJSDate())) return "tomorrow";
-
-  return date.toFormat(DAY_OF_WEEK);
-};

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

@@ -1,96 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { DateTime } from "luxon";
-import { DateTimeButton, DateTimeButtonProps, Variant } from "./DateTimeButton";
-
-export default {
-  title: "DateTimeButton",
-  component: DateTimeButton,
-} as Meta;
-
-const date = DateTime.now();
-
-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: DateTime.now().plus({ hours: 10 }),
-  isSelected: false,
-  isDisabled: false,
-  onSelect: () => null,
-  variant: Variant.time,
-};
-
-export const Calendar: Story<DateTimeButtonProps> = (args) => {
-  return <DateTimeButton {...args} />;
-};
-
-Calendar.args = {
-  date: DateTime.now(),
-  isSelected: false,
-  isDisabled: false,
-  onSelect: () => null,
-  variant: Variant.month,
-};
-
-export const WithPrice: Story<DateTimeButtonProps> = (args) => {
-  return <DateTimeButton {...args} />;
-};
-
-WithPrice.args = {
-  date,
-  isSelected: false,
-  isDisabled: false,
-  onSelect: () => null,
-  price: "from $8000",
-};
-
-export const WithAvailability: Story<DateTimeButtonProps> = (args) => {
-  return <DateTimeButton {...args} />;
-};
-
-WithAvailability.args = {
-  date,
-  isSelected: false,
-  isDisabled: false,
-  onSelect: () => null,
-  showResources: true,
-  resources: {
-    bookedResources: 1,
-    totalResources: 3,
-  },
-};

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

@@ -1,84 +0,0 @@
-import React, { ReactElement } from "react";
-import clsx from "clsx";
-import { DateTime } from "luxon";
-import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
-import { AvailabilityIndicator } from "../availability-indicator";
-import { DateContent } from "./DateContent";
-
-export enum Variant {
-  week = "week",
-  month = "month",
-  time = "time",
-}
-
-export type DateTimeButtonProps = {
-  date: DateTime;
-  isSelected?: boolean;
-  isDisabled?: boolean;
-  isSoldOut?: boolean;
-  onSelect: (date: DateTime) => void;
-  price?: string | number | ReactElement | null;
-  resources?: ZoneResourcesAvailability | null;
-  showResources?: boolean;
-  variant: Variant;
-};
-
-export const DateTimeButton = ({
-  date,
-  isDisabled: _isDisabled,
-  isSelected,
-  isSoldOut: _isSoldOut,
-  onSelect,
-  price,
-  resources,
-  showResources,
-  variant = Variant.week,
-}: DateTimeButtonProps) => {
-  const isSoldOut =
-    _isSoldOut ||
-    (resources && resources.bookedResources >= resources.totalResources);
-
-  const isTimeVariant = variant === Variant.time;
-
-  const isTimeInPast = isTimeVariant && isDateInPast(date);
-
-  const isDisabled = _isDisabled || isSoldOut || isTimeInPast;
-
-  return (
-    <button
-      type="button"
-      onClick={() => onSelect(date)}
-      disabled={isDisabled}
-      className={clsx(
-        "date-time-button",
-        isDisabled && "disabled",
-        isSelected && "selected",
-        // TODO refactor this
-        isTimeVariant && "time-button",
-        isTimeVariant && "only-time-container",
-        !isTimeVariant && "today",
-        variant === Variant.month && "calendar-view"
-      )}
-    >
-      <DateContent
-        date={date}
-        isDisabled={isDisabled}
-        isSelected={isSelected}
-        variant={variant}
-      />
-
-      {price && !isDisabled && <div className="price">{price}</div>}
-
-      {showResources && resources && (
-        <AvailabilityIndicator
-          resources={resources}
-          isUnavailable={_isDisabled || isTimeInPast}
-          isSoldOut={isSoldOut}
-        />
-      )}
-    </button>
-  );
-};
-
-const isDateInPast = (date: DateTime): boolean =>
-  date.toUTC() <= DateTime.now().toUTC();

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

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

package/src/error/Error.stories.tsx

@@ -1,15 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-import { ErrorFallback, ErrorFallbackProps } from "./ErrorFallback";
-
-export default {
-  title: "Error",
-  component: ErrorFallback,
-} as Meta;
-
-export const ErrorFallbackComponent: Story<ErrorFallbackProps> = (args) => (
-  <ErrorFallback {...args} />
-);
-ErrorFallbackComponent.args = {
-  error: "Whoops, something went wrong!",
-};

package/src/error/ErrorFallback.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-
-function ErrorFallback() {
-  const { t } = useTranslation("Design");
-
-  return (
-    <div role="alert" className="error-fallback">
-      <div>
-        <h1>{t("somethingWrong")}</h1>
-        <p>{t("somethingWrongMessage")}</p>
-      </div>
-    </div>
-  );
-}
-
-export { ErrorFallback };

package/src/error/index.ts

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

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -1,254 +0,0 @@
-import React, { useMemo, useState, useRef, useEffect } from "react";
-import { DateTime, Interval } from "luxon";
-import { Col, Form } from "react-bootstrap";
-import { Controller, RegisterOptions, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { useIntl } from "react-intl";
-
-import { useId } from "@react-aria/utils";
-import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import HTMLInputDateElement from "../../types/static/HTMLInputDateElement";
-import { RecurrenceInput } from "../../recurrence-input";
-import { WarningMessage } from "../../static";
-import { ProductSetFormValues } from "../../product-set/form";
-
-interface IntervalInputProps {
-  editedProductSet?: ProductSetFormValues;
-  productSets?: ProductSet[];
-  productSetId?: number;
-  disabled?: boolean;
-}
-
-export interface IntervalInputValues {
-  start: string;
-  end: string;
-  rrule: string | null;
-}
-
-export function IntervalInput({
-  disabled = false,
-  editedProductSet,
-  productSetId,
-  productSets,
-}: IntervalInputProps) {
-  const { t } = useTranslation(["Design", "Validation"]);
-  const {
-    register,
-    formState: { errors },
-    watch,
-    control,
-    trigger,
-    setValue,
-  } = useFormContext<IntervalInputValues>();
-
-  const formattedDuration = useFormattedDuration();
-  const validationOptions = useValidationOptions();
-
-  const rrule = watch("rrule");
-  const start = watch("start");
-  const end = watch("end");
-  const [recurrent, setRecurrent] = useState(Boolean(rrule));
-  const [isOverriden, setIsOverriden] = useState(false);
-  const recurrentId = useId();
-
-  const startDateInput = useRef<HTMLInputDateElement | null>(null);
-  const endDateInput = useRef<HTMLInputDateElement | null>(null);
-
-  const updateEndDate = ({ target: { value: nextStartDate } }) => {
-    setRecurrent(false);
-    setValue("start", nextStartDate);
-
-    if (
-      DateTime.fromISO(end).diff(DateTime.fromISO(nextStartDate)).toMillis() < 0
-    ) {
-      setValue("end", nextStartDate);
-    }
-  };
-
-  useEffect(() => {
-    if (!editedProductSet) {
-      return;
-    }
-    setRecurrent(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editedProductSet]);
-
-  useEffect(() => {
-    if (!productSets) return;
-
-    const isOverridenProductSet = productSets.find(
-      (productSet) =>
-        (editedProductSet && productSet?.id === editedProductSet?.id) ||
-        (Boolean(productSet?.parentMenuId) && productSet?.id === productSetId)
-    );
-
-    setIsOverriden(Boolean(isOverridenProductSet));
-  }, [productSets, productSetId, setIsOverriden, editedProductSet]);
-
-  const onChangeEndDate = (nextEndtDate: string) => {
-    setValue("end", nextEndtDate);
-    trigger("end");
-  };
-
-  return (
-    <>
-      <Form.Row className="interval-container">
-        <Form.Group as={Col} controlId="start">
-          <Form.Label>{t("start")}</Form.Label>
-          <Form.Control
-            type="datetime-local"
-            {...register("start", validationOptions.start)}
-            value={start}
-            name="start"
-            required
-            isInvalid={Boolean(errors.start)}
-            onChange={updateEndDate}
-            onClick={() => startDateInput?.current?.showPicker()}
-            ref={startDateInput}
-            disabled={disabled}
-          />
-          <Form.Control.Feedback type="invalid">
-            {errors.start?.message}
-          </Form.Control.Feedback>
-        </Form.Group>
-
-        <Form.Group as={Col} controlId="end">
-          <Form.Label>{t("end")}</Form.Label>
-          <Form.Control
-            type="datetime-local"
-            {...register("end", validationOptions.end)}
-            value={end}
-            name="end"
-            onChange={({ target: { value: nextEndtDate } }) =>
-              onChangeEndDate(nextEndtDate)
-            }
-            min={start}
-            isInvalid={Boolean(errors.end)}
-            onClick={() => endDateInput?.current?.showPicker()}
-            ref={endDateInput}
-            disabled={disabled}
-          />
-
-          <Form.Control.Feedback type="invalid">
-            {errors.end?.message}
-          </Form.Control.Feedback>
-          <Form.Text muted>
-            {formattedDuration && `lasts ${formattedDuration}`}
-          </Form.Text>
-        </Form.Group>
-      </Form.Row>
-      {start && (
-        <Form.Group controlId={recurrentId}>
-          <Form.Check
-            label="Recurrent"
-            custom
-            checked={recurrent}
-            onChange={({ target: { checked } }) => {
-              setRecurrent(checked);
-            }}
-            disabled={disabled || Boolean(editedProductSet)}
-          />
-          {!recurrent && (
-            <Form.Text muted>
-              {t("reccurentDescription", { item: t("event") })}
-            </Form.Text>
-          )}
-        </Form.Group>
-      )}
-      {isOverriden && (
-        <WarningMessage message={t("recurrentOverridesWarining")} />
-      )}
-      {recurrent && start && (
-        <Form.Group>
-          <Controller
-            control={control}
-            name="rrule"
-            render={({ field: { value, onChange } }) => (
-              <RecurrenceInput
-                value={value}
-                onChange={onChange}
-                date={start}
-                minDate={DateTime.fromISO(start)
-                  .plus({ day: 1 })
-                  .toFormat("yyyy-MM-dd")}
-                disabled={disabled}
-              />
-            )}
-          />
-        </Form.Group>
-      )}
-    </>
-  );
-}
-
-const useFormattedDuration = () => {
-  const { watch } = useFormContext<IntervalInputValues>();
-  const start = watch("start");
-  const end = watch("end");
-  const { formatList, formatNumber } = useIntl();
-
-  return useMemo(() => {
-    const interval = Interval.fromDateTimes(
-      DateTime.fromISO(start),
-      DateTime.fromISO(end)
-    ).toDuration(["days", "hours", "minutes"]);
-
-    if (!interval.isValid) return undefined;
-
-    const formatUnit = (value: number, unit: string) =>
-      formatNumber(value, { style: "unit", unit, unitDisplay: "long" });
-
-    const units = (
-      [
-        [interval.days, "day"],
-        [interval.hours, "hour"],
-        [interval.minutes, "minute"],
-      ] as Parameters<typeof formatUnit>[]
-    ).filter(([value]) => value);
-
-    return formatList(
-      units.map((args) => formatUnit(...args)),
-      { style: "long", type: "unit" }
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [start, end]);
-};
-
-const useValidationOptions = () => {
-  const { watch } = useFormContext();
-  const { t } = useTranslation(["Design", "Validation"]);
-  const start = watch("start");
-  const end = watch("end");
-
-  return {
-    start: useMemo<RegisterOptions>(
-      () => ({
-        required: t("Validation:fieldRequired", {
-          attribute: t("start"),
-        }) as string,
-        // TODO: uncomment when event splitting is implemented
-        // and extract into plugins
-        validate: (value) =>
-          DateTime.fromISO(value).diffNow().toMillis() > 0 ||
-          (t("Validation:fieldValidEventStart") as string),
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      []
-    ),
-
-    end: useMemo<RegisterOptions>(
-      () => ({
-        // TODO: uncomment when event splitting is implemented
-        // and extract into plugins
-        validate: (value) =>
-          // endAt not required
-          value
-            ? DateTime.fromISO(value).diff(DateTime.fromISO(start)).toMillis() >
-                0 || (t("Validation:fieldValidEventEnd") as string)
-            : true,
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [start, end]
-    ),
-  };
-};