@licklist/design 0.44.486-dev.83 → 0.44.486

package/{dist/styles/radio-card/_index.scss → src/styles/widgets/WidgetTypeRadioButton.scss}

@@ -1,15 +1,8 @@
-.radio-card {
+.widget-type-radio {
   padding: 0;
 
-  &.invalid {
-    label {
-      border-color: $red;
-    }
-  }
-
   label {
     display: block;
-    align-items: center;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
     border: 2px solid #dcdcdc;

package/src/styles/widgets/WidgetTypeSelector.scss

@@ -0,0 +1,6 @@
+.widget-type-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+}

package/src/styles/widgets/_index.scss

@@ -0,0 +1,9 @@
+@import "./WidgetTypeRadioButton";
+@import "./CalendarStyleSelector";
+@import "./CheckboxGroup";
+@import "./ImageRadioInput";
+@import "./BookingStyleSelector";
+@import "./WidgetTypeSelector";
+@import "./WidgetBuilderForm";
+@import "./SnippetCode";
+@import "./ProductSetSelector";

package/src/styles/zones/ZoneForm.scss

@@ -1,10 +1,8 @@
 .zone-available-times {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
   gap: 1.5rem;
   height: 8rem;
-  padding-left: 1.5rem;
-  justify-content: start;
-  width: 95%;
   overflow: scroll;
 }

package/src/table/FilterHelperComponent.tsx

@@ -33,7 +33,6 @@ function FilterHelperComponent({
     if (onClickFn) {
       onClickFn("");
     }
-    setItem("");
   };
 
   const onSearch = () => {

package/src/table/StaticTable.tsx

@@ -11,17 +11,14 @@ export interface StaticTableData {
   [key: string]: ReactNode;
 }
 
-export interface StaticTableProps {
+interface StaticTableProps {
   className?: string;
   columns: StaticTableColumn[];
-  data: StaticTableData[] | any[];
+  data: StaticTableData[];
   striped?: boolean;
   bordered?: boolean;
   hover?: boolean;
   size?: string;
-  displayHeader?: boolean;
-  renderItemFn?: (data?: any) => ReactNode;
-  isSingleRowForKey?: boolean;
 }
 
 export function StaticTable({
@@ -32,9 +29,6 @@ export function StaticTable({
   bordered = false,
   hover = false,
   size,
-  displayHeader = true,
-  isSingleRowForKey = false,
-  renderItemFn,
 }: StaticTableProps) {
   return (
     <Table
@@ -44,38 +38,18 @@ export function StaticTable({
       hover={hover}
       size={size}
     >
-      {displayHeader && <TableHead columns={columns} />}
-      {isSingleRowForKey ? (
-        <tbody>
-          {data.map((row) => (
-            <>
-              {renderItemFn
-                ? renderItemFn(row)
-                : columns.map((column) => (
-                    <tr key={row.key}>
-                      <td key={`${column.key}-${row[column.key]}`}>
-                        {row[column.key]}
-                      </td>
-                    </tr>
-                  ))}
-            </>
-          ))}
-        </tbody>
-      ) : (
-        <tbody>
-          {data.map((row) => (
-            <tr key={row.key}>
-              {renderItemFn
-                ? renderItemFn(row)
-                : columns.map((column) => (
-                    <td key={`${column.key}-${row[column.key]}`}>
-                      {row[column.key]}
-                    </td>
-                  ))}
-            </tr>
-          ))}
-        </tbody>
-      )}
+      <TableHead columns={columns} />
+      <tbody>
+        {data.map((row) => (
+          <tr key={row.key}>
+            {columns.map((column) => (
+              <td key={`${column.key}-${row[column.key]}`}>
+                {row[column.key]}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
     </Table>
   );
 }

package/src/table/Table.stories.tsx

@@ -1,7 +1,7 @@
 import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
 import { Meta, Story } from "@storybook/react";
 import { range } from "lodash";
-import React, { useRef } from "react";
+import React from "react";
 import { Router } from "../auth/Router";
 import {
   FilterHelperComponent as FilterHelper,
@@ -19,13 +19,6 @@ import {
   TableHelperComponent as TableHelper,
   TableHelperComponentProps,
 } from "./TableHelperComponent";
-import {
-  ReactTableHelperComponent as ReactTableHelper,
-  ReactTableHelperComponentProps,
-  ReactTableHelperRow,
-  ReactTableHelperComponentRef,
-} from "./ReactTableHelperComponent";
-import { flexRender } from "./utils/index";
 
 export default {
   title: "Table",
@@ -52,40 +45,6 @@ export const PerPageHelperComponent: Story<PerPageHelperComponentProps> = (
   args
 ) => <PerPageHelper {...args} />;
 
-export const ReactTableHelperComponent: Story<
-  ReactTableHelperComponentProps<any>
-> = (args) => (
-  <>
-    <Router>
-      <ReactTableHelper {...args} />
-    </Router>
-  </>
-);
-
-const ComponentInsideRouter = (args) => {
-  const ref = useRef<ReactTableHelperComponentRef>(null);
-
-  return (
-    <ReactTableHelper
-      {...args}
-      ref={ref}
-      externalFilters={{ uniqField: "uniqField" }}
-    />
-  );
-};
-
-export const ReactTableHelperComponentWithColumns: Story<
-  ReactTableHelperComponentProps<any>
-> = (args) => {
-  return (
-    <>
-      <Router>
-        <ComponentInsideRouter {...args} />
-      </Router>
-    </>
-  );
-};
-
 const getPaginator = (perPage, items = 100) =>
   ({
     current_page: 1,
@@ -139,88 +98,3 @@ TableHelperComponent.args = {
 PaginationHelperComponent.args = {
   paginator: getPaginator(24, 100),
 };
-
-ReactTableHelperComponent.args = {
-  isLoading: false,
-  headers: [
-    {
-      title: "ID",
-      key: "id",
-      isSortable: true,
-      width: "600px",
-    },
-    "Title",
-    "Description",
-    "Action",
-  ],
-  paginator: getPaginator(24, 10),
-  renderItemFn: (row) => {
-    return (
-      <tr key={row.id}>
-        <td>{row.id}</td>
-        <td>{row.title}</td>
-        <td>{row.description}</td>
-        <td>ADD | REMOVE</td>
-      </tr>
-    );
-  },
-  striped: false,
-  bordered: false,
-  displayShowingSection: false,
-  initialOptions: {
-    page: 1,
-    perPage: 10,
-    sortKey: "id",
-    sortDirection: "desc",
-    filter: "",
-  },
-};
-
-ReactTableHelperComponentWithColumns.args = {
-  isLoading: false,
-  columns: [
-    {
-      accessorKey: "id",
-      header: () => "CustomHeader",
-    },
-    {
-      accessorKey: "title",
-      header: () => "SuperTitle",
-    },
-    {
-      accessorKey: "description",
-      header: () => "AwesomeDescription",
-    },
-    {
-      accessorKey: "actions",
-      header: () => "Incredible Actions",
-    },
-  ],
-  sortableColumns: ["id"],
-  paginator: getPaginator(24, 10),
-  renderRow: (row: ReactTableHelperRow<any>) => {
-    return (
-      <tr key={row.id}>
-        {row.getVisibleCells().map((cell) => {
-          return (
-            <td key={cell.id}>
-              {cell.column.id === "actions"
-                ? "ADD | REMOVE"
-                : flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </td>
-          );
-        })}
-      </tr>
-    );
-  },
-  striped: false,
-  bordered: false,
-  displayShowingSection: false,
-  initialOptions: {
-    page: 1,
-    perPage: 10,
-    sortKey: "id",
-    sortDirection: "desc",
-    filter: "",
-  },
-};

package/src/table/TableHelperComponent.tsx

@@ -14,7 +14,6 @@ import { FilterHelperComponent } from "./FilterHelperComponent";
 import { PaginationHelperComponent } from "./PaginationHelperComponent";
 import { PerPageHelperComponent } from "./PerPageHelperComponent";
 import { getFilterOptionsValue } from "./utils";
-import { ExtendedTableOptions } from "./types";
 
 export interface TableHelperComponentProps {
   headers: ITableHeader[];
@@ -32,6 +31,7 @@ export interface TableHelperComponentProps {
   initialOptions?: Partial<ITableProps>;
 }
 
+export type ExtendedTableOptions = ITableProps & { [key: string]: any };
 // @TODO Refactor? component to get less complexity
 // with query filter params. Now External filters use only in
 // one place of Dashboard.
@@ -42,8 +42,6 @@ export interface TableHelperComponentProps {
 
 /**
  * TableHelperComponent
- * @deprecated use new ReactTableHelperComponent
- * for default tables
  * @param props
  * @constructor
  */

package/src/table/index.ts

@@ -4,4 +4,3 @@ export * from "./PerPageHelperComponent";
 export * from "./StaticTable";
 export * from "./TableHelperComponent";
 export * from "./MenuButton";
-export * from "./ReactTableHelperComponent";

package/src/table/utils/index.ts

@@ -1,8 +1,6 @@
 import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
 import TableService from "@licklist/plugins/dist/services/Table/TableService";
 
-export { flexRender } from "@tanstack/react-table";
-
 const DEFAULT_QUERY_VALUES: { [key in keyof ITableProps]: string | number } = {
   page: TableService.DEFAULT_PAGE,
   perPage: TableService.DEFAULT_PER_PAGE,

package/src/typeahead/Typeahead.stories.tsx

@@ -1,23 +1,20 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import { FormProvider, useForm } from "react-hook-form";
 import { Typeahead } from "./Typeahead";
 
-storiesOf("Typeahead", module).add("Typeahead", () => {
-  const form = useForm();
-  return (
-    <FormProvider {...form}>
+storiesOf("Typeahead", module)
+  .add("Typeahead", () => (
+    <>
       <Typeahead
         name="user"
-        isMultipleChoise
         options={[
           { id: 1, value: "user1", label: "User1" },
           { id: 2, value: "user2", label: "User2" },
           { id: 3, value: "user3", label: "User3" },
         ]}
+        setValue={() => {}}
         placeholder="Select"
         noOptionsMessage="No Options Found"
       />
-    </FormProvider>
-  );
-});
+    </>
+  ));

package/src/typeahead/Typeahead.tsx

@@ -1,55 +1,47 @@
 import React from "react";
-import Select, { CSSObjectWithLabel } from "react-select";
-import { Controller, useFormContext } from "react-hook-form";
+import Select from "react-select";
+import { useForm, Controller } from "react-hook-form";
 
 export type TypeaheadOptions = {
-  id: number | string;
-  value: any;
+  id: number;
+  value: string;
   label: string;
 };
 
 export interface TypeaheadProps {
   options: TypeaheadOptions[];
+  setValue: (value: string | any) => void;
   placeholder: string;
   isRequired?: boolean;
   name: string;
-  isMultipleChoise?: boolean;
   noOptionsMessage: string;
-  isInvalid?: boolean;
 }
 
 function Typeahead({
   options,
+  setValue,
   placeholder,
   isRequired = false,
-  isMultipleChoise,
   name = "",
   noOptionsMessage = "",
-  isInvalid,
-}: TypeaheadProps) {
-  const { control } = useFormContext();
-
-  const getErrorStyle = (): CSSObjectWithLabel =>
-    isInvalid ? { borderColor: "red" } : {};
+}) {
+  const { control } = useForm({
+    mode: "onChange",
+  });
+  const prefix = "id";
 
   return (
     <>
       <Controller
-        name={name}
+        name={`${name}.${prefix as string}` as const}
         control={control}
         rules={{ required: isRequired }}
         render={({ field }) => (
           <Select
             placeholder={placeholder}
             value={field.value}
-            isMulti={isMultipleChoise}
-            styles={{
-              control: (base) => ({
-                ...base,
-                ...getErrorStyle(),
-              }),
-            }}
             onChange={(value) => {
+              setValue(`${name}.${prefix}`, value.id);
               field.onChange(value);
             }}
             options={options}

package/src/types/iframe.ts

@@ -1,5 +1,4 @@
 import { Product as CoreProduct } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 
 export interface Product {
   id: number;
@@ -7,15 +6,12 @@ export interface Product {
   description: string;
   deposit: number;
   price: number;
-  minSub?: number;
   minAmount?: number;
   maxAmount?: number;
-  minSpend?: number | null;
   isSoldOut?: boolean;
   isRequired?: boolean;
   isUnlimited?: boolean;
   images: CoreProduct["images"];
-  capacity?: number | null;
   uuid: string;
 }
 
@@ -27,13 +23,12 @@ export interface ProductCategory {
   minSubItems: number | null;
   maxSubItems: number | null;
   products?: Product[];
-  zone?: Zone | null;
 }
 
 export interface MenuStep {
   id: number;
   name: string;
-  productCategories?: ProductCategory[];
+  productCategories: ProductCategory[];
 }
 
 export interface Menu {
@@ -41,8 +36,6 @@ export interface Menu {
   menuSteps: MenuStep[];
 }
 
-// TODO similar type exists in iframe app
-// remove this when components are moved to iframe
 export interface Order {
   id: number;
   quantity: number;

package/src/typings.d.ts

@@ -28,14 +28,3 @@ declare module "*.json" {
 
 declare module "react-phone-number-input/input";
 declare module "react-phone-number-input/commonjs/Flag";
-
-// @TODO: this is a hofix for the following issue:
-// licklist_workspace_frontend/packages/design/src/product-set/hooks/useSortableTreeFunctions.ts(17,34):
-// semantic error TS2304: Cannot find name 'structuredClone'.
-interface WindowOrWorkerGlobalScope {
-  structuredClone(value: any, options?: StructuredSerializeOptions): any;
-}
-declare function structuredClone(
-  value: any,
-  options?: StructuredSerializeOptions
-): any;

package/src/virtualized/components/VirtualizedWindowScroller.tsx

@@ -39,8 +39,7 @@ const WrappedVirtualizedWindowScroller = ({
     if (!onDataUpdate) return;
 
     onDataUpdate();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [windowDimensions]);
+  }, [windowDimensions, scrollElement, gridRef, onDataUpdate]);
 
   return (
     <WindowScroller scrollElement={scrollElement}>

package/src/widgets/BookingStyleSelector/BookingStyleSelector.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { BookingStyleSelector } from "./BookingStyleSelector";
+
+export default {
+  title: "Widgets / Booking Style Selector",
+  component: BookingStyleSelector,
+} as Meta;
+
+export const Default: Story = (args) => {
+  return <BookingStyleSelector {...args} />;
+};

package/src/widgets/BookingStyleSelector/BookingStyleSelector.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ImageRadioInput } from "../ImageRadioInput";
+import { ReactComponent as Overlay } from "../../assets/widgets/overlay.svg";
+import { ReactComponent as InPage } from "../../assets/widgets/inPage.svg";
+import { ReactComponent as Sidebar } from "../../assets/widgets/sidebar.svg";
+
+export const BookingStyleSelector = () => {
+  const { t } = useTranslation("Design");
+
+  return (
+    <div className="widget-booking-style-selector">
+      <h4>{t("selectBookingStyle")}</h4>
+
+      <div className="wrapper">
+        <ImageRadioInput
+          img={<Overlay />}
+          label={t("overlay")}
+          name="bookingWidgetStyle"
+        />
+        <ImageRadioInput
+          img={<InPage />}
+          label={t("inPage")}
+          name="bookingWidgetStyle"
+        />
+        <ImageRadioInput
+          img={<Sidebar />}
+          label={t("sidebar")}
+          name="bookingWidgetStyle"
+        />
+      </div>
+    </div>
+  );
+};

package/src/widgets/BookingStyleSelector/index.ts

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

package/src/widgets/CalendarStyleSelector/CalendarStyleSelector.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { CalendarStyleSelector } from "./CalendarStyleSelector";
+
+export default {
+  title: "Widgets / Calendar Style Selector",
+  component: CalendarStyleSelector,
+} as Meta;
+
+export const Default: Story = (args) => {
+  return <CalendarStyleSelector {...args} />;
+};

package/src/widgets/CalendarStyleSelector/CalendarStyleSelector.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ReactComponent as MonthIcon } from "../../assets/widgets/monthCalendar.svg";
+import { ReactComponent as WeekIcon } from "../../assets/widgets/weekCalendar.svg";
+import { ImageRadioInput } from "../ImageRadioInput/ImageRadioInput";
+
+export const CalendarStyleSelector = () => {
+  const { t } = useTranslation("Design");
+
+  return (
+    <div className="widget-calendar-style-selector">
+      <h4>{t("calendarStyle")}</h4>
+      <p>{t("calendarStyleDescription")}</p>
+
+      <div className="controls">
+        <ImageRadioInput
+          label={t("month")}
+          img={<MonthIcon />}
+          name="calendarStyle"
+        />
+        <ImageRadioInput
+          label={t("week")}
+          img={<WeekIcon />}
+          name="calendarStyle"
+        />
+      </div>
+    </div>
+  );
+};

package/src/widgets/CalendarStyleSelector/index.ts

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

package/src/widgets/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { CheckboxGroup, CheckboxGroupProps } from "./CheckboxGroup";
+
+export default {
+  title: "Widgets / Checkbox Group",
+  component: CheckboxGroup,
+} as Meta;
+
+export const Default: Story<CheckboxGroupProps> = (args) => {
+  return <CheckboxGroup {...args} />;
+};
+
+Default.args = {
+  heading: "Include from price",
+};