@licklist/design 0.68.1 → 0.68.2-dev.1

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -1,17 +1,17 @@
-import { useMemo } from "react";
-import { DateTime } from "luxon";
-import { DateTimeButton, Variant } from "../../../date-time-button";
-import { CalendarWeekdays } from "../CalendarWeekdays";
-import { CalendarProps } from "../../Calendar";
+import { useMemo } from 'react'
+import { DateTime } from 'luxon'
+import { DateTimeButton, Variant } from '../../../date-time-button'
+import { CalendarWeekdays } from '../CalendarWeekdays'
+import { CalendarProps } from '../../Calendar'
 
 export type CalendarDatesProps = Pick<
   CalendarProps,
-  | "calendarDates"
-  | "selectedDate"
-  | "setSelectedDate"
-  | "fromPrice"
-  | "getDateTimeButtonProps"
->;
+  | 'calendarDates'
+  | 'selectedDate'
+  | 'setSelectedDate'
+  | 'fromPrice'
+  | 'getDateTimeButtonProps'
+>
 
 export const CalendarDates = ({
   calendarDates,
@@ -21,36 +21,36 @@ export const CalendarDates = ({
   getDateTimeButtonProps,
 }: CalendarDatesProps) => {
   const fillCalendarDates = useMemo(() => {
-    let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
+    let firstDayOfWeek = calendarDates[0]?.weekday ?? 0
 
     if (firstDayOfWeek === 1) {
-      return calendarDates;
+      return calendarDates
     }
 
-    const nullableDate: null[] = [];
+    const nullableDate: null[] = []
 
     while (firstDayOfWeek > 1) {
-      nullableDate.push(null);
-      firstDayOfWeek -= 1;
+      nullableDate.push(null)
+      firstDayOfWeek -= 1
     }
 
-    return [...nullableDate, ...calendarDates];
-  }, [calendarDates]);
+    return [...nullableDate, ...calendarDates]
+  }, [calendarDates])
 
   return (
     <div className="calendar-dates-wrapper">
       <CalendarWeekdays />
       <div className="calendar-dates">
         {fillCalendarDates.map((date: DateTime | null) => {
-          if (date === null) return <div />;
+          if (date === null) return <div />
 
-          const props = getDateTimeButtonProps(date);
+          const props = getDateTimeButtonProps(date)
 
           return (
             <DateTimeButton
               key={+date}
               isSelected={
-                selectedDate ? date.hasSame(selectedDate, "day") : undefined
+                selectedDate ? date.hasSame(selectedDate, 'day') : undefined
               }
               date={date}
               onSelect={() => setSelectedDate(date)}
@@ -58,9 +58,9 @@ export const CalendarDates = ({
               variant={Variant.month}
               {...props}
             />
-          );
+          )
         })}
       </div>
     </div>
-  );
-};
+  )
+}

package/src/calendar/components/CalendarDates/index.ts

@@ -1 +1 @@
-export { CalendarDates } from "./CalendarDates";
+export { CalendarDates } from './CalendarDates'

package/src/calendar/components/CalendarSelect/CalendarSelect.tsx

@@ -1,19 +1,19 @@
-import { useRef } from "react";
-import { Form } from "react-bootstrap";
-import clsx from "clsx";
-import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../iframe/page/components/PageBody/constants";
+import { useRef } from 'react'
+import { Form } from 'react-bootstrap'
+import clsx from 'clsx'
+import { PAGE_CALENDAR_SELECT_WRAPPER } from '../../../iframe/page/components/PageBody/constants'
 
 export type CalendarSelectOption = {
-  label: string;
-  value: string | number;
-};
+  label: string
+  value: string | number
+}
 
 export type CalendarSelectProps = {
-  options: CalendarSelectOption[];
-  onChange: (value: string) => void;
-  value: string | number;
-  className?: string;
-};
+  options: CalendarSelectOption[]
+  onChange: (value: string) => void
+  value: string | number
+  className?: string
+}
 
 export const CalendarSelect = ({
   options,
@@ -21,17 +21,17 @@ export const CalendarSelect = ({
   value,
   className,
 }: CalendarSelectProps) => {
-  const selectRef = useRef<HTMLSelectElement>(null);
+  const selectRef = useRef<HTMLSelectElement>(null)
 
   const onValueChange = ({ target: { value } }) => {
-    if (!onChange) return;
+    if (!onChange) return
 
-    onChange(value);
-  };
+    onChange(value)
+  }
 
   return (
     <div
-      className={clsx("calendar-select-wrapper", className)}
+      className={clsx('calendar-select-wrapper', className)}
       id={PAGE_CALENDAR_SELECT_WRAPPER}
     >
       <Form.Control
@@ -41,14 +41,12 @@ export const CalendarSelect = ({
         value={value}
         ref={selectRef}
       >
-        {options.map(({ label, value }) => {
-          return (
-            <option value={value} key={label || value}>
-              {label}
-            </option>
-          );
-        })}
+        {options.map(({ label, value }) => (
+          <option value={value} key={label || value}>
+            {label}
+          </option>
+        ))}
       </Form.Control>
     </div>
-  );
-};
+  )
+}

package/src/calendar/components/CalendarSelect/index.ts

@@ -1,5 +1,5 @@
-export { CalendarSelect } from "./CalendarSelect";
+export { CalendarSelect } from './CalendarSelect'
 export type {
   CalendarSelectProps,
   CalendarSelectOption,
-} from "./CalendarSelect";
+} from './CalendarSelect'

package/src/calendar/components/CalendarWeekdays/CalendarWeekdays.tsx

@@ -1,27 +1,25 @@
-import { useTranslation } from "react-i18next";
+import { useTranslation } from 'react-i18next'
 
 const WEEKDAYS = [
-  { key: "mondayShort" },
-  { key: "tuesdayShort" },
-  { key: "wednesdayShort" },
-  { key: "thursdayShort" },
-  { key: "fridayShort" },
-  { key: "saturdayShort" },
-  { key: "sundayShort" },
-];
+  { key: 'mondayShort' },
+  { key: 'tuesdayShort' },
+  { key: 'wednesdayShort' },
+  { key: 'thursdayShort' },
+  { key: 'fridayShort' },
+  { key: 'saturdayShort' },
+  { key: 'sundayShort' },
+]
 
 export const CalendarWeekdays = () => {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
   return (
     <div className="calendar-weekdays">
-      {WEEKDAYS.map(({ key }) => {
-        return (
-          <div key={key} className="calendar-weekday">
-            {t(key)}
-          </div>
-        );
-      })}
+      {WEEKDAYS.map(({ key }) => (
+        <div key={key} className="calendar-weekday">
+          {t(key)}
+        </div>
+      ))}
     </div>
-  );
-};
+  )
+}

package/src/calendar/components/CalendarWeekdays/index.ts

@@ -1 +1 @@
-export { CalendarWeekdays } from "./CalendarWeekdays";
+export { CalendarWeekdays } from './CalendarWeekdays'

package/src/calendar/index.ts

@@ -1,3 +1,3 @@
-export * from "./Calendar";
-export * from "./components/CalendarSelect";
-export * from "./utils";
+export * from './Calendar'
+export * from './components/CalendarSelect'
+export * from './utils'

package/src/calendar/utils/index.ts

@@ -1,40 +1,40 @@
-import { DateTime, Interval } from "luxon";
+import { DateTime, Interval } from 'luxon'
 
 export const getMonthCalendarDates = (
   initialDate: DateTime,
   timeZone?: string,
 ): DateTime[] => {
-  const startOfMonth = initialDate.startOf("month");
-  const endOfMonth = initialDate.endOf("month");
+  const startOfMonth = initialDate.startOf('month')
+  const endOfMonth = initialDate.endOf('month')
 
   const dateTimes = Interval.fromDateTimes(startOfMonth, endOfMonth)
     .splitBy({ day: 1 })
-    .map((d) => d.start);
+    .map((d) => d.start)
 
   if (timeZone) {
     return dateTimes.map((date) =>
       date.setZone(timeZone, { keepLocalTime: true }),
-    );
+    )
   }
 
-  return dateTimes;
-};
+  return dateTimes
+}
 
 export const getWeekCalendarDates = (
   initialDate: DateTime,
   timeZone?: string,
 ): DateTime[] => {
-  const lastDay = initialDate.plus({ days: 7 });
+  const lastDay = initialDate.plus({ days: 7 })
 
   const dateTimes = Interval.fromDateTimes(initialDate, lastDay)
     .splitBy({ day: 1 })
-    .map((d) => d.start);
+    .map((d) => d.start)
 
   if (timeZone) {
     return dateTimes.map((date) =>
       date.setZone(timeZone, { keepLocalTime: true }),
-    );
+    )
   }
 
-  return dateTimes;
-};
+  return dateTimes
+}

package/src/collapsible-input-group/CollapsibleInputGroup.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta, Story } from "@storybook/react";
-import { Accordion } from "react-bootstrap";
-import { FormProvider, useForm } from "react-hook-form";
+import { Meta, Story } from '@storybook/react'
+import { Accordion } from 'react-bootstrap'
+import { FormProvider, useForm } from 'react-hook-form'
 import {
   CategoriesInput,
   CategoriesInputDescription,
@@ -11,84 +11,84 @@ import {
   WorkingHoursInput,
   WorkingHoursInputDescription,
   WorkingHoursInputValues,
-} from "../provider";
+} from '../provider'
 import CollapsibleInputGroup, {
   CollapsibleInputGroupProps,
-} from "./CollapsibleInputGroup";
+} from './CollapsibleInputGroup'
 
 const categories = Array.from({ length: 6 }, (_, i) => ({
   id: `${i}`,
   name: `Category group ${i}`,
   categories: Array.from({ length: 12 }, (_, j) => {
-    const id = `${i * 12 + j}`;
-    return { id, name: `Category name ${id}` };
+    const id = `${i * 12 + j}`
+    return { id, name: `Category name ${id}` }
   }),
-}));
+}))
 
 const defaultValues: CategoriesInputValues &
   LocationInputValues &
   WorkingHoursInputValues = {
-  categories: ["1", "2", "3", "5", "8", "13", "21", "34", "55"],
+  categories: ['1', '2', '3', '5', '8', '13', '21', '34', '55'],
   location: {
-    latitude: "51.57536000",
-    longitude: "0.18256700",
-    street: "108 South Street",
-    city: "Romford",
-    postcode: "RM1 1SS",
-    state: "Essex",
-    country: "GB",
+    latitude: '51.57536000',
+    longitude: '0.18256700',
+    street: '108 South Street',
+    city: 'Romford',
+    postcode: 'RM1 1SS',
+    state: 'Essex',
+    country: 'GB',
   },
   workingHours: [
-    { start: "08:00", end: "18:00", description: "Description" },
+    { start: '08:00', end: '18:00', description: 'Description' },
     undefined,
-    { start: "09:00", end: "20:00", description: "Description" },
+    { start: '09:00', end: '20:00', description: 'Description' },
   ],
-};
+}
 
 export default {
-  title: "CollapsibleInputGroup",
+  title: 'CollapsibleInputGroup',
   component: CollapsibleInputGroup,
-} as Meta;
+} as Meta
 
 const Template: Story<CollapsibleInputGroupProps> = (args) => {
-  const form = useForm({ defaultValues });
+  const form = useForm({ defaultValues })
   return (
     <FormProvider {...form}>
       <Accordion>
         <CollapsibleInputGroup {...args} />
       </Accordion>
     </FormProvider>
-  );
-};
+  )
+}
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
-  eventKey: "default",
-  children: "Children",
-  description: "Description",
-  label: "Label",
-};
+  eventKey: 'default',
+  children: 'Children',
+  description: 'Description',
+  label: 'Label',
+}
 
-export const Categories = Template.bind({});
+export const Categories = Template.bind({})
 Categories.args = {
-  eventKey: "categories",
+  eventKey: 'categories',
   children: <CategoriesInput categories={categories} />,
   description: <CategoriesInputDescription categories={categories} />,
-  label: "Categories",
-};
+  label: 'Categories',
+}
 
-export const Location = Template.bind({});
+export const Location = Template.bind({})
 Location.args = {
-  eventKey: "location",
+  eventKey: 'location',
   children: <LocationInput />,
   description: <LocationInputDescription />,
-  label: "Location",
-};
+  label: 'Location',
+}
 
-export const WorkingHours = Template.bind({});
+export const WorkingHours = Template.bind({})
 WorkingHours.args = {
-  eventKey: "workingHours",
+  eventKey: 'workingHours',
   children: <WorkingHoursInput />,
   description: <WorkingHoursInputDescription />,
-  label: "Working hours",
-};
+  label: 'Working hours',
+}

package/src/collapsible-input-group/CollapsibleInputGroup.tsx

@@ -1,22 +1,22 @@
-import { ReactNode, useContext } from "react";
+import { ReactNode, useContext } from 'react'
 import {
   Accordion,
   AccordionContext,
   Card,
   Collapse,
   Form,
-} from "react-bootstrap";
-import clsx from "clsx";
-import { FaChevronUp, FaChevronDown } from "react-icons/fa";
+} from 'react-bootstrap'
+import clsx from 'clsx'
+import { FaChevronUp, FaChevronDown } from 'react-icons/fa'
 
 export type CollapsibleInputGroupProps = {
-  label: ReactNode;
-  description: ReactNode;
-  eventKey: string;
-  children: ReactNode;
-  error?: string;
-  alwaysOpen?: boolean;
-};
+  label: ReactNode
+  description: ReactNode
+  eventKey: string
+  children: ReactNode
+  error?: string
+  alwaysOpen?: boolean
+}
 
 export function CollapsibleInputGroup({
   label,
@@ -26,9 +26,9 @@ export function CollapsibleInputGroup({
   alwaysOpen,
   error,
 }: CollapsibleInputGroupProps) {
-  const currentEventKey = useContext(AccordionContext);
+  const currentEventKey = useContext(AccordionContext)
 
-  const isInvalid = Boolean(error);
+  const isInvalid = Boolean(error)
 
   return (
     <Card className="rounded-0">
@@ -37,7 +37,7 @@ export function CollapsibleInputGroup({
         eventKey={eventKey}
         alwaysopen={alwaysOpen}
         role="button"
-        className={clsx("accordion-form-control", isInvalid && "is-invalid")}
+        className={clsx('accordion-form-control', isInvalid && 'is-invalid')}
       >
         <div className="accordion-form-control-header">
           <h5 className="mb-0 pl-3">{label}</h5>
@@ -60,7 +60,7 @@ export function CollapsibleInputGroup({
         <Card.Body>{children}</Card.Body>
       </Accordion.Collapse>
     </Card>
-  );
+  )
 }
 
-export default CollapsibleInputGroup;
+export default CollapsibleInputGroup

package/src/collapsible-input-group/index.ts

@@ -1 +1 @@
-export * from "./CollapsibleInputGroup";
+export * from './CollapsibleInputGroup'