@sgftech/medusa-plugin-product-variant-licenses 0.0.1

package/.cache/admin/src/components/atoms/file-upload-field/index.tsx

@@ -0,0 +1,105 @@
+import clsx from "clsx"
+import React, { useRef, useState } from "react"
+
+type FileUploadFieldProps = {
+  onFileChosen: (files: File[]) => void
+  filetypes: string[]
+  errorMessage?: string
+  placeholder?: React.ReactElement | string
+  className?: string
+  multiple?: boolean
+  text?: React.ReactElement | string
+}
+
+const defaultText = (
+  <span>
+    Drop your images here, or{" "}
+    <span className="text-violet-60">click to browse</span>
+  </span>
+)
+
+const FileUploadField: React.FC<FileUploadFieldProps> = ({
+  onFileChosen,
+  filetypes,
+  errorMessage,
+  className,
+  text = defaultText,
+  placeholder = "",
+  multiple = false,
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [fileUploadError, setFileUploadError] = useState(false)
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const fileList = e.target.files
+
+    if (fileList) {
+      onFileChosen(Array.from(fileList))
+    }
+  }
+
+  const handleFileDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    setFileUploadError(false)
+
+    e.preventDefault()
+
+    const files: File[] = []
+
+    if (e.dataTransfer.items) {
+      // Use DataTransferItemList interface to access the file(s)
+      for (let i = 0; i < e.dataTransfer.items.length; i++) {
+        // If dropped items aren't files, reject them
+        if (e.dataTransfer.items[i].kind === "file") {
+          const file = e.dataTransfer.items[i].getAsFile()
+          if (file && filetypes.indexOf(file.type) > -1) {
+            files.push(file)
+          }
+        }
+      }
+    } else {
+      // Use DataTransfer interface to access the file(s)
+      for (let i = 0; i < e.dataTransfer.files.length; i++) {
+        if (filetypes.indexOf(e.dataTransfer.files[i].type) > -1) {
+          files.push(e.dataTransfer.files[i])
+        }
+      }
+    }
+    if (files.length === 1) {
+      onFileChosen(files)
+    } else {
+      setFileUploadError(true)
+    }
+  }
+
+  return (
+    <div
+      onClick={() => inputRef?.current?.click()}
+      onDrop={handleFileDrop}
+      onDragOver={(e) => e.preventDefault()}
+      className={clsx(
+        "inter-base-regular text-grey-50 rounded-rounded border-grey-20 hover:border-violet-60 hover:text-grey-40 flex h-full w-full cursor-pointer select-none flex-col items-center justify-center border-2 border-dashed transition-colors",
+        className
+      )}
+    >
+      <div className="flex flex-col items-center">
+        <p>{text}</p>
+        {placeholder}
+      </div>
+      {fileUploadError && (
+        <span className="text-rose-60">
+          {errorMessage || "Please upload an image file"}
+        </span>
+      )}
+      <input
+        ref={inputRef}
+        accept={filetypes.join(", ")}
+        multiple={multiple}
+        type="file"
+        onChange={handleFileUpload}
+        className="hidden"
+      />
+    </div>
+  )
+}
+
+export default FileUploadField

package/.cache/admin/src/components/atoms/includes-tax-tooltip/index.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx"
+import TaxesIcon from "../../fundamentals/icons/taxes-icon"
+import Tooltip from "../tooltip"
+
+type Props = {
+  includesTax?: boolean
+}
+
+const IncludesTaxTooltip = ({ includesTax }: Props) => {
+  return (
+    <Tooltip content={includesTax ? "Tax incl. price" : "Tax excl. price"}>
+      <div className="w-large h-large rounded-rounded border-grey-20 flex items-center justify-center border">
+        <TaxesIcon
+          size={16}
+          className={clsx({
+            "text-grey-50": includesTax,
+            "text-grey-30": !includesTax,
+          })}
+        />
+      </div>
+    </Tooltip>
+  )
+}
+
+export default IncludesTaxTooltip

package/.cache/admin/src/components/atoms/input-error/index.tsx

@@ -0,0 +1,72 @@
+import { ErrorMessage } from "@hookform/error-message"
+import clsx from "clsx"
+import { MultipleFieldErrors } from "react-hook-form"
+import Tooltip from "../tooltip"
+
+type InputErrorProps = {
+  errors?: { [x: string]: unknown }
+  name?: string
+  className?: string
+}
+
+const InputError = ({ errors, name, className }: InputErrorProps) => {
+  if (!errors || !name) {
+    return null
+  }
+
+  return (
+    <ErrorMessage
+      name={name}
+      errors={errors}
+      render={({ message, messages }) => {
+        return (
+          <div
+            className={clsx("inter-small-regular mt-2 text-rose-50", className)}
+          >
+            {messages ? (
+              <MultipleMessages messages={messages} />
+            ) : (
+              <p>{message}</p>
+            )}
+          </div>
+        )
+      }}
+    />
+  )
+}
+
+const MultipleMessages = ({ messages }: { messages: MultipleFieldErrors }) => {
+  const errors = Object.entries(messages).map(([_, message]) => message)
+
+  const displayedError = errors[0]
+  const remainderErrors = errors.slice(1)
+
+  return (
+    <div className="flex cursor-default items-center gap-x-1">
+      <p>{displayedError}</p>
+      {remainderErrors?.length > 0 && (
+        <Tooltip
+          content={
+            <div className="inter-small-regular text-rose-50">
+              {remainderErrors.map((e, i) => {
+                return (
+                  <p key={i}>
+                    {Array.from(Array(i + 1)).map((_) => "*")}
+                    {e}
+                  </p>
+                )
+              })}
+            </div>
+          }
+        >
+          <p>
+            +{remainderErrors.length}{" "}
+            {remainderErrors.length > 1 ? "errors" : "error"}
+          </p>
+        </Tooltip>
+      )}
+    </div>
+  )
+}
+
+export default InputError

package/.cache/admin/src/components/atoms/loading-container/index.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import Spinner from "../spinner"
+
+type LoadingContainerProps = {
+  isLoading: boolean
+  placeholder?: React.ReactElement
+  children: React.ReactElement | React.ReactElement[]
+}
+
+const LoadingContainer = ({
+  isLoading,
+  children,
+  placeholder,
+  ...props
+}: LoadingContainerProps) => {
+  placeholder = placeholder || <Spinner size="large" variant="secondary" />
+
+  if (isLoading) {
+    return (
+      <div
+        className="pt-2xlarge flex min-h-[756px] w-full items-center justify-center"
+        {...props}
+      >
+        {placeholder}
+      </div>
+    )
+  }
+
+  return children as React.ReactElement
+}
+
+export default LoadingContainer

package/.cache/admin/src/components/atoms/notification/index.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import type { Toast } from "react-hot-toast"
+import { toast as globalToast } from "react-hot-toast"
+import AlertIcon from "../../fundamentals/icons/alert-icon"
+import CheckCircleIcon from "../../fundamentals/icons/check-circle-icon"
+import CrossIcon from "../../fundamentals/icons/cross-icon"
+import InfoIcon from "../../fundamentals/icons/info-icon"
+import XCircleIcon from "../../fundamentals/icons/x-circle-icon"
+import ToasterContainer from "../toaster-container"
+
+export type NotificationTypes = "success" | "warning" | "error" | "info"
+
+type NotificationProps = {
+  toast: Toast
+  type: NotificationTypes
+  title: string
+  message: string
+}
+
+const Notification: React.FC<NotificationProps> = ({
+  toast,
+  type,
+  title,
+  message,
+}) => {
+  const onDismiss = () => {
+    globalToast.dismiss(toast.id)
+  }
+
+  return (
+    <ToasterContainer visible={toast.visible} className="w-[380px]">
+      <div>{getIcon(type)}</div>
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col text-white">
+        <span className="inter-small-semibold">{title}</span>
+        <span className="inter-small-regular text-grey-20">{message}</span>
+      </div>
+      <div>
+        <button onClick={onDismiss}>
+          <CrossIcon size={ICON_SIZE} className="text-grey-40" />
+        </button>
+        <span className="sr-only">Close</span>
+      </div>
+    </ToasterContainer>
+  )
+}
+
+const ICON_SIZE = 20
+
+function getIcon(type: NotificationTypes) {
+  switch (type) {
+    case "success":
+      return <CheckCircleIcon size={ICON_SIZE} className="text-emerald-40" />
+    case "warning":
+      return <AlertIcon size={ICON_SIZE} className="text-orange-40" />
+    case "error":
+      return <XCircleIcon size={ICON_SIZE} className="text-rose-40" />
+    default:
+      return <InfoIcon size={ICON_SIZE} className="text-grey-40" />
+  }
+}
+
+export default Notification

package/.cache/admin/src/components/atoms/number-scroller/index.tsx

@@ -0,0 +1,51 @@
+import clsx from "clsx"
+import React from "react"
+
+type NumberScrollerProps = {
+  numbers: number[]
+  selected: number
+  onSelect: (value: number) => void
+} & React.HTMLAttributes<HTMLDivElement>
+
+const NumberScroller: React.FC<NumberScrollerProps> = ({
+  numbers,
+  selected,
+  onSelect,
+  className,
+  ...props
+}) => {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        "time-list flex h-[305px] flex-col overflow-y-auto",
+        className
+      )}
+    >
+      {numbers.map((n, i) => {
+        return (
+          <div
+            key={i}
+            className={clsx(
+              "inter-base-regular hover:bg-grey-20 h-[40px] w-[40px] rounded last:mb-4",
+              {
+                "bg-violet-60 text-grey-0 inter-base-semibold hover:bg-violet-50":
+                  n === selected,
+              }
+            )}
+          >
+            <button
+              onClick={() => onSelect(n)}
+              className="h-full w-full py-2"
+              type="button"
+            >
+              {n.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
+            </button>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default NumberScroller

package/.cache/admin/src/components/atoms/os-shortcut/index.tsx

@@ -0,0 +1,48 @@
+type OSShortcutProps = {
+  winModifiers: string | string[]
+  macModifiers: string | string[]
+  keys: string[] | string
+}
+
+const OSShortcut = ({ winModifiers, macModifiers, keys }: OSShortcutProps) => {
+  const isMac =
+    typeof window !== "undefined" &&
+    navigator?.platform?.toUpperCase().indexOf("MAC") >= 0
+      ? true
+      : false
+
+  let modifiers: string
+
+  if (isMac) {
+    if (Array.isArray(macModifiers)) {
+      modifiers = macModifiers.join("")
+    } else {
+      modifiers = macModifiers
+    }
+  } else {
+    if (Array.isArray(winModifiers)) {
+      modifiers = winModifiers.join(" + ")
+    } else {
+      modifiers = winModifiers
+    }
+  }
+
+  let input: string
+
+  if (Array.isArray(keys)) {
+    input = keys.join(" + ")
+  } else {
+    input = keys
+  }
+
+  return (
+    <div className="text-grey-40 flex items-center">
+      <p className="inter-base-semibold m-0">
+        <span className="inter-base-semibold">{modifiers} </span>
+        {input}
+      </p>
+    </div>
+  )
+}
+
+export default OSShortcut

package/.cache/admin/src/components/atoms/page-description/index.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+type PageDescriptionProps = {
+  title?: string
+  subtitle?: string
+}
+
+const PageDescription: React.FC<PageDescriptionProps> = ({
+  title,
+  subtitle,
+}) => {
+  return (
+    <div className="mb-xlarge">
+      <h1 className="inter-2xlarge-semibold mb-xsmall">{title}</h1>
+      <h2 className="inter-base-regular text-grey-50">{subtitle}</h2>
+    </div>
+  )
+}
+
+export default PageDescription

package/.cache/admin/src/components/atoms/save-notification/error-state.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from "react"
+import type { Toast } from "react-hot-toast"
+import CrossIcon from "../../fundamentals/icons/cross-icon"
+import XCircleIcon from "../../fundamentals/icons/x-circle-icon"
+import ToasterContainer from "../toaster-container"
+
+type SavingStateProps = {
+  toast: Toast
+  title?: string
+  message?: string
+  onDismiss: () => void
+}
+
+const ErrorState: React.FC<SavingStateProps> = ({
+  toast,
+  title = "Error",
+  message = "An error occured while trying to save your changes. Please try again.",
+  onDismiss,
+}) => {
+  useEffect(() => {
+    const life = setTimeout(() => {
+      onDismiss()
+    }, 2000)
+
+    return () => {
+      clearTimeout(life)
+    }
+  }, [toast])
+
+  return (
+    <ToasterContainer visible={toast.visible} className="w-[448px]">
+      <div>
+        <XCircleIcon size={20} className="text-rose-40" />
+      </div>
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
+        <span className="inter-small-semibold">{title}</span>
+        <span className="inter-small-regular text-grey-50">{message}</span>
+      </div>
+      <div>
+        <button onClick={onDismiss}>
+          <CrossIcon size={20} className="text-grey-40" />
+        </button>
+        <span className="sr-only">Close</span>
+      </div>
+    </ToasterContainer>
+  )
+}
+
+export default ErrorState

package/.cache/admin/src/components/atoms/save-notification/index.tsx

@@ -0,0 +1,94 @@
+import React, { ReactNode } from "react"
+import type { Toast } from "react-hot-toast"
+import { toast as globalToast } from "react-hot-toast"
+import RefreshIcon from "../../fundamentals/icons/refresh-icon"
+import ToasterContainer from "../toaster-container"
+import ErrorState from "./error-state"
+import SavingState from "./saving-state"
+import SuccessState from "./success-state"
+
+type SaveNotificationProps = {
+  toast: Toast
+  icon?: ReactNode
+  title?: string
+  message?: string
+  onSave: () => Promise<void>
+  reset: () => void
+}
+
+const SaveNotification: React.FC<SaveNotificationProps> = ({
+  toast,
+  icon,
+  title = "Unsaved changes",
+  message = "You have unsaved changes. Do you want to save and publish or discard them?",
+  onSave,
+  reset,
+}) => {
+  const onDismiss = () => {
+    reset()
+    globalToast.dismiss(toast.id)
+  }
+
+  const handleSave = () => {
+    globalToast.custom((t) => <SavingState toast={t} />, {
+      id: toast.id,
+    })
+
+    onSave()
+      .then(() => {
+        globalToast.custom(
+          (t) => <SuccessState toast={t} onDismiss={onDismiss} />,
+          {
+            id: toast.id,
+          }
+        )
+      })
+      .catch((_err) => {
+        globalToast.custom(
+          (t) => <ErrorState toast={t} onDismiss={onDismiss} />,
+          {
+            id: toast.id,
+          }
+        )
+      })
+  }
+
+  return (
+    <ToasterContainer visible={toast.visible} className="pl-base w-[448px] p-0">
+      <div className="py-base">{getIcon(icon)}</div>
+      <div className="ml-small mr-base gap-y-2xsmall py-base flex flex-grow flex-col">
+        <span className="inter-small-semibold">{title}</span>
+        <span className="inter-small-regular text-grey-50">{message}</span>
+      </div>
+      <div className="inter-small-semibold border-grey-20 flex h-full flex-col border-l">
+        <button
+          onClick={handleSave}
+          className="inter-small-semibold border-grey-20 px-base text-violet-60 flex h-1/2 items-center justify-center border-b"
+        >
+          Publish
+        </button>
+        <button
+          className="inter-small-semibold px-base flex h-1/2 items-center justify-center"
+          onClick={onDismiss}
+        >
+          Discard
+        </button>
+      </div>
+    </ToasterContainer>
+  )
+}
+
+const ICON_SIZE = 20
+
+function getIcon(icon?: any) {
+  if (icon) {
+    return React.cloneElement(icon, {
+      size: ICON_SIZE,
+      className: "text-grey-90",
+    })
+  } else {
+    return <RefreshIcon size={20} className="text-grey-90" />
+  }
+}
+
+export default SaveNotification

package/.cache/admin/src/components/atoms/save-notification/saving-state.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import type { Toast } from "react-hot-toast"
+import Spinner from "../spinner"
+import ToasterContainer from "../toaster-container"
+
+type SavingStateProps = {
+  toast: Toast
+  title?: string
+  message?: string
+}
+
+const SavingState: React.FC<SavingStateProps> = ({
+  toast,
+  title = "Saving changes",
+  message = "Hang on, this may take a few moments.",
+}) => {
+  return (
+    <ToasterContainer visible={toast.visible} className="w-[448px]">
+      <div>
+        <Spinner variant="secondary" size="large" />
+      </div>
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
+        <span className="inter-small-semibold">{title}</span>
+        <span className="inter-small-regular text-grey-50">{message}</span>
+      </div>
+    </ToasterContainer>
+  )
+}
+
+export default SavingState

package/.cache/admin/src/components/atoms/save-notification/success-state.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from "react"
+import type { Toast } from "react-hot-toast"
+import CheckCircleIcon from "../../fundamentals/icons/check-circle-icon"
+import CrossIcon from "../../fundamentals/icons/cross-icon"
+import ToasterContainer from "../toaster-container"
+
+type SavingStateProps = {
+  toast: Toast
+  title?: string
+  message?: string
+  onDismiss: () => void
+}
+
+const SuccessState: React.FC<SavingStateProps> = ({
+  toast,
+  title = "Success",
+  message = "Your changes have been saved.",
+  onDismiss,
+}) => {
+  useEffect(() => {
+    const life = setTimeout(() => {
+      onDismiss()
+    }, 2000)
+
+    return () => {
+      clearTimeout(life)
+    }
+  }, [toast])
+
+  return (
+    <ToasterContainer visible={toast.visible} className="w-[448px]">
+      <div>
+        <CheckCircleIcon size={20} className="text-emerald-40" />
+      </div>
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
+        <span className="inter-small-semibold">{title}</span>
+        <span className="inter-small-regular text-grey-50">{message}</span>
+      </div>
+      <div>
+        <button onClick={onDismiss}>
+          <CrossIcon size={20} className="text-grey-40" />
+        </button>
+        <span className="sr-only">Close</span>
+      </div>
+    </ToasterContainer>
+  )
+}
+
+export default SuccessState