@licklist/design 0.44.486-dev.9 → 0.44.487

package/src/styles/sales/RandomColors.scss

@@ -1,20 +1,17 @@
 .random-color {
   &-blue {
-    background-color: #e4f9ff;
+    background-color: #E4F9FF;
   }
 
   &-yellow {
-    background-color: #f7f4c1;
+    background-color: #F7F4C1;
   }
 
   &-green {
-    background-color: #e4fff3;
+    background-color: #E4FFF3;
   }
 
   &-pink {
-    background-color: #ffe4f8;
-  }
-  &-violet {
-    background-color: #e4e4ff;
+    background-color: #FFE4F8;
   }
 }

package/src/styles/snippet-templates/SnippetTemplateCard.scss

@@ -45,22 +45,6 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    a {
-      white-space: nowrap;
-      display: inline-block;
-      text-overflow: ellipsis;
-      width: 85%;
-      overflow: hidden;
-    }
-  }
-
-  .snippet-template-card-subject {
-    white-space: nowrap;
-    display: inline-block;
-    text-overflow: ellipsis;
-    width: 100%;
-    overflow: hidden;
   }
 
   .snippet-template-card-button {

package/src/styles/static/DateRangeInput.scss

@@ -5,10 +5,6 @@
 
   .date-range-input[readonly] {
     background-color: transparent;
-
-    &:disabled {
-      background-color: #ebebeb;
-    }
   }
 
   .date-range-input-icon {
@@ -17,4 +13,4 @@
     bottom: 1rem;
     color: $gray-500;
   }
-}
+}

package/src/styles/themes/bookedit/_variables.scss

@@ -38,7 +38,7 @@ $blue: #0e8ce2;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
 $pink: #e83e8c !default;
-$dark-pink: #e20e58 !default;
+$dark-pink: #E20E58 !default;
 $red: #f94b25;
 $orange: #fd7e14 !default;
 $yellow: #ffc107 !default;
@@ -65,7 +65,7 @@ $colors: (
   "gray": $gray-600,
   "gray-dark": $gray-800,
   "light-yellow": $light-yellow,
-  "dark-pink": $dark-pink,
+  "dark-pink": $dark-pink
 );
 
 $primary: $blue !default;
@@ -231,7 +231,6 @@ $line-height-lg: 1.5 !default;
 $line-height-sm: 1.5 !default;
 
 $border-width: 1px !default;
-$calendar-border: 2px solid #f2f2f2;
 $border-color: $gray-300 !default;
 
 $border-radius: 1rem;

package/src/styles/widgets/BookingStyleSelector.scss

@@ -0,0 +1,14 @@
+.widget-booking-style-selector {
+  margin-bottom: 2rem;
+
+  h4 {
+    margin-bottom: 1.5rem;
+  }
+
+  .wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+}

package/src/styles/widgets/CalendarStyleSelector.scss

@@ -0,0 +1,17 @@
+.widget-calendar-style-selector {
+  margin-bottom: 2rem;
+
+  p {
+    font-size: 0.8125rem;
+  }
+
+  .controls {
+    display: flex;
+    gap: 2rem;
+    margin-top: 0.75rem;
+
+    .form-check {
+      padding-left: 0;
+    }
+  }
+}

package/src/styles/widgets/CheckboxGroup.scss

@@ -0,0 +1,15 @@
+.widgets-checkbox-group {
+  h3 {
+    margin-bottom: 0.75rem;
+  }
+
+  .custom-checkbox {
+    margin-top: 0;
+  }
+
+  .divider {
+    height: 2px;
+    margin-bottom: 1.5rem;
+    background-color: #e7e7e7;
+  }
+}

package/src/styles/{image-radio-input/_index.scss → widgets/ImageRadioInput.scss}

@@ -1,5 +1,4 @@
 .image-radio-input {
-  width: min-content;
   padding: 0;
 
   &-wrapper {
@@ -10,16 +9,9 @@
     cursor: pointer;
   }
 
-  &-image-wrapper {
-    display: flex;
-    max-width: 7.5rem;
-    max-height: 4.25rem;
-  }
-
   &-label {
     display: flex;
     justify-content: center;
-    align-items: center;
     gap: 0.5rem;
 
     input {
@@ -27,8 +19,4 @@
       margin: 0;
     }
   }
-
-  .disabled {
-    opacity: 0.5;
-  }
 }

package/src/styles/widgets/ProductSetSelector.scss

@@ -0,0 +1,19 @@
+.widget-builder-product-set-selector {
+  button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    height: 1.5rem;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    color: #000;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: transparent !important;
+      color: #0e8ce2 !important;
+    }
+  }
+}

package/src/styles/widgets/SnippetCode.scss

@@ -0,0 +1,18 @@
+.widget-designer-snippet-code {
+  .code-container {
+    padding: 1rem;
+    background: #fff;
+    border: 2px solid #dcdcdc;
+    border-radius: 0.5rem;
+    word-break: break-all;
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    border: 2px solid #0e8ce2;
+    background: #fff;
+    color: #0e8ce2;
+  }
+}

package/src/styles/widgets/WidgetBuilderForm.scss

@@ -0,0 +1,51 @@
+.widget-builder-form {
+  justify-content: space-between;
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  h4 {
+    font-size: 0.875rem;
+    font-weight: 400;
+  }
+
+  p {
+    font-size: 0.8125rem;
+  }
+
+  input[type="text"],
+  select {
+    height: 2.5rem;
+    border-radius: 0.5rem;
+  }
+
+  button {
+    border-radius: 0.75rem;
+  }
+
+  .form-label {
+    font-size: 0.875rem;
+  }
+
+  &-customizations {
+    margin-bottom: 1rem;
+  }
+
+  &-right-column {
+    padding: 0;
+  }
+
+  &-grey {
+    height: fit-content;
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    background-color: #fafafa;
+    border-radius: 0.75rem;
+  }
+}

package/src/styles/{radio-card/_index.scss → 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,6 +1,7 @@
 .zone-available-times {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
   gap: 1.5rem;
   height: 8rem;
   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}