@licklist/design 0.44.485-dev.64 → 0.44.485-dev.65

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -11,18 +11,15 @@ export default {
 
 export function Default() {
   const showImage = boolean("showImage", true);
-  const displayCost = boolean("displayCost", false);
-  const displayType = boolean("displayType", true);
-  const displayDescription = boolean("displayDescription", false);
   const isListView = boolean("isListView", false);
 
   return (
     <div>
       <IframeEventCard
         imageSrc={
-          // eslint-disable-next-line max-len
           showImage
-            ? "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
+            ? // eslint-disable-next-line max-len
+              "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
             : undefined
         }
         title="Glitterbomb Bucks / Baga Chipz"
@@ -43,9 +40,8 @@ export function Default() {
         RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
         the...`}
         snippetSetting={{
-          displayCost,
-          displayType,
-          displayDescription,
+          includeAvailability: ["calendar", "product_sets", "time_slots"],
+          includeFromPrice: ["calendar", "product_sets", "time_slots"],
         }}
         goToDetails={() => null}
         isListView={isListView}
@@ -59,9 +55,6 @@ export function Default() {
 
 export function EventCardSkeleton() {
   const showImage = boolean("showImage", true);
-  const displayCost = boolean("displayCost", false);
-  const displayType = boolean("displayType", true);
-  const displayDescription = boolean("displayDescription", false);
   const isListView = boolean("isListView", false);
 
   return (
@@ -69,9 +62,8 @@ export function EventCardSkeleton() {
       <IframeEventCardSkeleton
         showImage={showImage}
         snippetSetting={{
-          displayCost,
-          displayType,
-          displayDescription,
+          includeAvailability: ["calendar", "product_sets", "time_slots"],
+          includeFromPrice: ["calendar", "product_sets", "time_slots"],
         }}
         isListView={isListView}
       />

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -3,7 +3,7 @@ import { Card } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import clsx from "clsx";
-import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
+import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 import { TipTapEditor } from "../../../tiptap-editor/TipTapEditor";
 import { formatContent } from "../../../events/event-card/utils";
 import { ReactComponent as ClockSvg } from "../../../assets/iframe/clock.svg";
@@ -18,7 +18,8 @@ interface IframeEventCardProps {
   cost?: number;
   date: string;
   imageSrc?: string;
-  snippetSetting?: SnippetSetting;
+  // eslint-disable-next-line react/no-unused-prop-types
+  snippetSetting?: Snippet["widgetSetting"];
   colour?: string;
   goToDetails?: () => void;
   description?: string | null;
@@ -35,11 +36,6 @@ export function IframeEventCard({
   cost,
   date,
   imageSrc,
-  snippetSetting = {
-    displayType: true,
-    displayCost: true,
-    displayDescription: true,
-  },
   colour,
   goToDetails,
   description,
@@ -102,7 +98,7 @@ export function IframeEventCard({
             </div>
           </Card.Text>
 
-          {type && !!snippetSetting.displayType && (
+          {type && (
             <Card.Text as="div" className="list-view-hided">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -113,7 +109,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {typeof cost === "number" && !!snippetSetting.displayCost && (
+          {typeof cost === "number" && (
             <Card.Text as="div">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -127,7 +123,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {description && !!snippetSetting.displayDescription && (
+          {description && (
             <Card.Text as="div" className="list-view-hided">
               <TipTapEditor
                 viewMode

package/src/iframe/event/event-card/IframeEventCardSkeleton.tsx

@@ -2,11 +2,12 @@ import React, { memo } from "react";
 import { Card } from "react-bootstrap";
 import clsx from "clsx";
 import Skeleton from "react-loading-skeleton";
-import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
+import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 
 interface IframeEventCardSkeletonProps {
   showImage?: boolean;
-  snippetSetting?: SnippetSetting;
+  // eslint-disable-next-line react/no-unused-prop-types
+  snippetSetting?: Snippet["widgetSetting"];
   colour?: string;
   isListView?: boolean;
   className?: string;
@@ -15,11 +16,6 @@ interface IframeEventCardSkeletonProps {
 export const IframeEventCardSkeleton = memo(
   ({
     showImage,
-    snippetSetting = {
-      displayType: true,
-      displayCost: true,
-      displayDescription: true,
-    },
     colour,
     isListView = false,
     className,
@@ -61,31 +57,25 @@ export const IframeEventCardSkeleton = memo(
               </div>
             </Card.Text>
 
-            {!!snippetSetting.displayType && (
-              <Card.Text as="div" className="list-view-hided">
-                <div className="d-flex align-items-center mb-3">
-                  <p className="iframe-event-card__bold m-0">
-                    <Skeleton className="skeleton-w6" />
-                  </p>
-                </div>
-              </Card.Text>
-            )}
+            <Card.Text as="div" className="list-view-hided">
+              <div className="d-flex align-items-center mb-3">
+                <p className="iframe-event-card__bold m-0">
+                  <Skeleton className="skeleton-w6" />
+                </p>
+              </div>
+            </Card.Text>
 
-            {!!snippetSetting.displayCost && (
-              <Card.Text as="div">
-                <div className="d-flex align-items-center mb-3">
-                  <p className="iframe-event-card__bold m-0">
-                    <Skeleton className="skeleton-w6" />
-                  </p>
-                </div>
-              </Card.Text>
-            )}
+            <Card.Text as="div">
+              <div className="d-flex align-items-center mb-3">
+                <p className="iframe-event-card__bold m-0">
+                  <Skeleton className="skeleton-w6" />
+                </p>
+              </div>
+            </Card.Text>
 
-            {!!snippetSetting.displayDescription && (
-              <Card.Text as="div" className="list-view-hided">
-                <Skeleton className="w-100 h-100" />
-              </Card.Text>
-            )}
+            <Card.Text as="div" className="list-view-hided">
+              <Skeleton className="w-100 h-100" />
+            </Card.Text>
           </div>
         </Card.Body>
       </Card>

package/src/iframe/event/event-card/IframeEventCards.stories.tsx

@@ -581,9 +581,8 @@ export function Default() {
             date={String(event.startAt)}
             colour={event.colour}
             snippetSetting={{
-              displayCost,
-              displayType,
-              displayDescription,
+              includeAvailability: [],
+              includeFromPrice: [],
             }}
             imageSrc={event.imgSrc}
             goToDetails={() => {}}

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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,53 @@
+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/index.ts

@@ -34,3 +34,6 @@ export * from "./resource";
 export * from "./virtualized";
 export * from "./customers";
 export * from "./striped-static-table";
+export * from "./radio-card";
+export * from "./image-radio-input";
+export * from "./sorting-select";

package/src/radio-card/RadioCard.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import { Meta, Story } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { RadioCard, RadioCardProps } from "./RadioCard";
+
+export default {
+  title: "Widgets / Widget Type Radio Card",
+  component: RadioCard,
+} as Meta;
+
+type FormModel = {
+  name: string;
+};
+
+export const Default: Story<RadioCardProps<FormModel>> = (args) => {
+  const form = useForm<FormModel>();
+
+  return (
+    <FormProvider {...form}>
+      <RadioCard {...args} />
+    </FormProvider>
+  );
+};
+
+Default.args = {
+  label: "Venue Map",
+  description: "Date > Floor",
+  name: "name",
+};
+
+export const Invalid: Story<RadioCardProps<FormModel>> = (args) => {
+  const form = useForm<FormModel>();
+
+  return (
+    <FormProvider {...form}>
+      <RadioCard {...args} />
+    </FormProvider>
+  );
+};
+
+Invalid.args = {
+  label: "Venue Map",
+  description: "Date > Floor",
+  name: "name",
+  inputProps: {
+    isInvalid: true,
+  },
+};

package/src/radio-card/RadioCard.tsx

@@ -0,0 +1,49 @@
+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 RadioCardProps<FormModel> = {
+  label: string;
+  description: ReactNode;
+  name: Path<FormModel>;
+  value: string;
+  rules: RegisterOptions<FormModel>;
+  inputProps?: FormCheckInputProps;
+};
+
+export const RadioCard = <FormModel,>({
+  label,
+  description,
+  name,
+  value,
+  rules,
+  inputProps,
+}: RadioCardProps<FormModel>) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<FormModel>();
+
+  const isInvalid = !!errors[name as string] || inputProps?.isInvalid;
+
+  return (
+    <Form.Check className={clsx("radio-card", isInvalid && "invalid")}>
+      <Form.Check.Label>
+        <div className="radio-card-controls">
+          <Form.Check.Input
+            type="radio"
+            isInvalid={isInvalid}
+            value={value}
+            {...register(name, rules)}
+            {...inputProps}
+          />
+          <span>{label}</span>
+        </div>
+
+        <p className="radio-card-description">{description}</p>
+      </Form.Check.Label>
+    </Form.Check>
+  );
+};

package/src/radio-card/index.ts

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

package/src/setting/dashboard/index.ts

@@ -1,7 +1,5 @@
 export * from "./DashboardSettingForm";
-export * from "./snippets/form";
 export * from "./snippets/card";
 export * from "./snippet-templates/card";
 export * from "./payments/payments-form/PaymentsForm";
 export * from "./payments/payments-modal/PaymentsModal";
-export * from "./snippets/modal";

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -368,11 +368,6 @@ export function Preview({
                   type="Party Doors 22:00 - 03:00"
                   cost={6}
                   date="Sat 2nd May"
-                  snippetSetting={{
-                    displayCost: true,
-                    displayType: true,
-                    displayDescription: true,
-                  }}
                   goToDetails={() => null}
                   shortDate="07/03/2023"
                 />

package/src/sorting-select/SortingSelect.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { SortingSelect, SortingSelectProps } from "./SortingSelect";
+
+export default {
+  title: "SortingSelect",
+} as Meta;
+
+export const Default: Story<SortingSelectProps> = (props) => {
+  return <SortingSelect {...props} />;
+};
+
+Default.args = {
+  onSortingChange: () => null,
+};

package/src/sorting-select/SortingSelect.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
+import { Form, FormGroupProps } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import {
+  SORT_DIRECTION_ASC,
+  SORT_DIRECTION_NEWEST,
+  SORT_DIRECTION_DESC,
+  SORT_KEY_NAME,
+  SORT_KEY_CREATED_AT,
+} from "@licklist/core/dist/Config";
+
+export type SortingSelectProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formGroupProps?: FormGroupProps & Record<string, any>;
+  defaultSortKey?: string;
+  defaultSortDirection?: string;
+  onSortingChange?: (url: URLSearchParams) => void;
+};
+
+export const SortingSelect = ({
+  formGroupProps,
+  defaultSortKey = SORT_KEY_NAME,
+  defaultSortDirection = SORT_DIRECTION_ASC,
+  onSortingChange,
+}: SortingSelectProps) => {
+  const { t } = useTranslation("Design");
+  const [controlValue, setControlValue] = useState(SORT_DIRECTION_ASC);
+  const searchParams = useQuery();
+
+  const { sortKey = defaultSortKey, sortDirection = defaultSortDirection } =
+    Object.fromEntries(searchParams);
+
+  const onSortingValueChange = ({ target: { value } }) => {
+    setControlValue(value);
+
+    const nextSortDirection =
+      value === SORT_DIRECTION_NEWEST ? SORT_DIRECTION_DESC : value;
+
+    const nextSortKey =
+      value === SORT_DIRECTION_NEWEST ? SORT_KEY_CREATED_AT : sortKey;
+
+    const nextSearchParams = new URLSearchParams(searchParams);
+
+    nextSearchParams.set("sortDirection", nextSortDirection);
+    nextSearchParams.set("sortKey", nextSortKey);
+
+    onSortingChange(nextSearchParams);
+  };
+
+  useEffect(() => {
+    if (sortKey === SORT_KEY_CREATED_AT) {
+      setControlValue(SORT_DIRECTION_NEWEST);
+      return;
+    }
+
+    setControlValue(sortDirection);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortKey, sortDirection]);
+
+  return (
+    <Form.Group className="d-flex align-items-center p-0" {...formGroupProps}>
+      <Form.Label className="text-nowrap mr-4 mb-0">
+        {t("App:sortBy")}:
+      </Form.Label>
+      <Form.Control
+        as="select"
+        data-testid="sorting-select"
+        onChange={onSortingValueChange}
+        custom
+        value={controlValue}
+      >
+        <option value={SORT_DIRECTION_ASC}>A-Z</option>
+        <option value={SORT_DIRECTION_DESC}>Z-A</option>
+        <option value={SORT_DIRECTION_NEWEST}>{t("newestOnTop")}</option>
+      </Form.Control>
+    </Form.Group>
+  );
+};

package/src/sorting-select/index.ts

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

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

@@ -1,4 +1,5 @@
 .image-radio-input {
+  width: min-content;
   padding: 0;
 
   &-wrapper {
@@ -9,9 +10,16 @@
     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 {
@@ -19,4 +27,8 @@
       margin: 0;
     }
   }
+
+  .disabled {
+    opacity: 0.5;
+  }
 }

package/src/styles/packages.scss

@@ -29,7 +29,6 @@
 @import "./iframe-page";
 @import "./affiliate";
 @import "./zones";
-@import "./widgets/";
 @import "./resources-blocking";
 @import "./ryft-payment-form";
 @import "./skeleton";
@@ -37,3 +36,5 @@
 @import "./error";
 @import "./customers/";
 @import "./striped-static-table/";
+@import "./image-radio-input/";
+@import "./radio-card/";

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

@@ -1,8 +1,15 @@
-.widget-type-radio {
+.radio-card {
   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/dist/assets/widgets/circlePlus.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <circle cx="10" cy="10" r="10" fill="#0E8CE2"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 5H9V9H5V11H9V15H11V11H15V9H11V5Z" fill="white"/>
-</svg>

package/dist/assets/widgets/inPage.svg

@@ -1,10 +0,0 @@
-<svg width="120" height="68" viewBox="0 0 120 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="119" height="67" rx="3.5" fill="white" stroke="#DCDCDC"/>
-<rect x="8.5" y="9.25" width="103" height="3" rx="1.5" fill="white" stroke="#FF0099"/>
-<rect x="8.5" y="15.5" width="82" height="45.7283" rx="3.5" fill="#F8F8F8" stroke="#FF0099"/>
-<path d="M0 2.5C0 1.11929 1.11929 0 2.5 0H117.5C118.881 0 120 1.11929 120 2.5V6H0V2.5Z" fill="#D8D8D8"/>
-<circle cx="3.5" cy="3" r="1" fill="#FF1111"/>
-<circle cx="6.5" cy="3" r="1" fill="#FFE311"/>
-<circle cx="9.5" cy="3" r="1" fill="#11FF52"/>
-<rect x="93.5" y="15.7715" width="18" height="45.7283" rx="3.5" fill="#D8D8D8" stroke="#FF0099"/>
-</svg>

package/dist/assets/widgets/overlay.svg

@@ -1,9 +0,0 @@
-<svg width="120" height="68" viewBox="0 0 120 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="119" height="67" rx="3.5" fill="white" stroke="#DCDCDC"/>
-<rect x="28.5" y="17.5" width="63" height="35" rx="3.5" fill="#F8F8F8" stroke="#FF0099"/>
-<path d="M0 2.5C0 1.11929 1.11929 0 2.5 0H117.5C118.881 0 120 1.11929 120 2.5V6H0V2.5Z" fill="#D8D8D8"/>
-<circle cx="3.5" cy="3" r="1" fill="#FF1111"/>
-<circle cx="6.5" cy="3" r="1" fill="#FFE311"/>
-<circle cx="9.5" cy="3" r="1" fill="#11FF52"/>
-<path d="M76 18H88C89.6569 18 91 19.3431 91 21V49C91 50.6569 89.6569 52 88 52H76V18Z" fill="#D8D8D8"/>
-</svg>

package/dist/assets/widgets/sidebar.svg

@@ -1,9 +0,0 @@
-<svg width="120" height="68" viewBox="0 0 120 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="119" height="67" rx="3.5" fill="white" stroke="#DCDCDC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M116 66.5H92.5C90.2909 66.5 88.5 64.7091 88.5 62.5L88.5 10.5C88.5 8.29086 90.2909 6.5 92.5 6.5L119 6.5V63.5C119 63.5 119 64.5 118 65.5C117 66.5 116 66.5 116 66.5Z" fill="#F8F8F8" stroke="#FF0099"/>
-<path d="M0 2.5C0 1.11929 1.11929 0 2.5 0H117.5C118.881 0 120 1.11929 120 2.5V6H0V2.5Z" fill="#D8D8D8"/>
-<circle cx="3.5" cy="3" r="1" fill="#FF1111"/>
-<circle cx="6.5" cy="3" r="1" fill="#FFE311"/>
-<circle cx="9.5" cy="3" r="1" fill="#11FF52"/>
-<path d="M118.5 51V63C118.5 64.6569 117.157 66 115.5 66H92C90.3431 66 89 64.6569 89 63V51L118.5 51Z" fill="#D8D8D8"/>
-</svg>

package/dist/setting/dashboard/snippets/control/SnippetControl.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { ShortSnippetTemplate } from "../form/SnippetForm";
-export interface SnippetControlProps {
-    isLoading: boolean;
-    templates: Array<ShortSnippetTemplate>;
-    providerHasMap?: boolean | null;
-}
-export declare function SnippetControl({ isLoading, templates, providerHasMap, }: SnippetControlProps): JSX.Element;
-//# sourceMappingURL=SnippetControl.d.ts.map