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

package/.cache/admin/src/components/molecules/form-toaster/index.tsx

@@ -0,0 +1,177 @@
+import * as Dropdown from "@radix-ui/react-dropdown-menu"
+import clsx from "clsx"
+import React, { Children, HTMLAttributes, useMemo } from "react"
+import { Toast } from "react-hot-toast"
+import Spinner from "../../atoms/spinner"
+import ChevronDownIcon from "../../fundamentals/icons/chevron-down"
+import RefreshIcon from "../../fundamentals/icons/refresh-icon"
+
+type FormToasterContainerProps = {
+  toast?: Toast
+  isLoading?: boolean
+  loadingMessage?: string
+  unsavedChangesMessage?: string
+  icon?: React.ReactNode
+}
+
+type MultiActionButtonProps = {
+  actions: {
+    onClick: () => void | Promise<void>
+    label: string
+    icon?: any
+  }[]
+  className?: string
+}
+
+const FormToasterContainer: React.FC<FormToasterContainerProps> & {
+  Actions: React.FC
+  DiscardButton: React.FC<HTMLAttributes<HTMLButtonElement>>
+  ActionButton: React.FC<HTMLAttributes<HTMLButtonElement>>
+  MultiActionButton: React.FC<MultiActionButtonProps>
+} = ({
+  children,
+  toast,
+  isLoading = false,
+  loadingMessage = "Hang on, this may take a few moments...",
+  unsavedChangesMessage = "You have unsaved changes",
+  icon = <RefreshIcon size="20" />,
+}) => {
+  const content = useMemo(() => {
+    if (isLoading) {
+      return (
+        <div className="p-base gap-x-base flex items-center">
+          <span>
+            <Spinner />
+          </span>
+          <span className="inter-small-regular">{loadingMessage}</span>
+        </div>
+      )
+    } else {
+      return (
+        <>
+          <div className="p-base gap-x-base flex items-center">
+            <span>{icon}</span>
+            <span className="inter-small-regular">{unsavedChangesMessage}</span>
+          </div>
+          {children}
+        </>
+      )
+    }
+  }, [isLoading, children])
+
+  return (
+    <div
+      className={clsx({
+        "animate-enter": toast?.visible,
+        "animate-leave": !toast?.visible,
+      })}
+      {...toast?.ariaProps}
+    >
+      <div className="rounded-rounded bg-grey-90 text-grey-0 flex h-[72px] w-[344px] items-center justify-between">
+        {content}
+      </div>
+    </div>
+  )
+}
+
+const Actions: React.FC = ({ children }) => {
+  return (
+    <div className="border-grey-70 h-full border-l">
+      {Children.map(children, (child) => {
+        return (
+          <div className="border-grey-70 flex h-1/2 w-[72px] items-center justify-center border-b last:border-none">
+            {child}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+const DiscardButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <button
+      className={clsx(
+        "inter-small-semibold flex h-full w-full items-center justify-center text-white",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+const ActionButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <button
+      className={clsx(
+        "inter-small-semibold flex h-full w-full items-center justify-center text-white",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+const MultiActionButton: React.FC<MultiActionButtonProps> = ({
+  children,
+  className,
+  actions,
+}) => {
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger
+        className={clsx(
+          "inter-small-semibold flex h-full w-full items-center justify-center",
+          className
+        )}
+      >
+        {children}
+        <ChevronDownIcon size={16} className="ml-[2px]" />
+      </Dropdown.Trigger>
+
+      <Dropdown.Content
+        className="rounded-rounded bg-grey-90 p-xsmall flex min-w-[208px] flex-col text-white"
+        sideOffset={10}
+      >
+        {actions.map((action, i) => {
+          return (
+            <Dropdown.Item key={i}>
+              <button
+                onClick={action.onClick}
+                className="p-2xsmall hover:bg-grey-80 inter-small-semibold rounded-base flex w-full items-center text-left hover:outline-none"
+              >
+                {action.icon && (
+                  <span className="text-grey-0 mr-xsmall">
+                    {React.cloneElement(action.icon, {
+                      size: 20,
+                    })}
+                  </span>
+                )}
+                {action.label}
+              </button>
+            </Dropdown.Item>
+          )
+        })}
+      </Dropdown.Content>
+    </Dropdown.Root>
+  )
+}
+
+FormToasterContainer.Actions = Actions
+FormToasterContainer.DiscardButton = DiscardButton
+FormToasterContainer.ActionButton = ActionButton
+FormToasterContainer.MultiActionButton = MultiActionButton
+
+export default FormToasterContainer

package/.cache/admin/src/components/molecules/generating-input/index.tsx

@@ -0,0 +1,93 @@
+import React, {
+  InputHTMLAttributes,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react"
+import { generatePromotionCode } from "../../../utils/generate-promotion-code"
+import RefreshIcon from "../../fundamentals/icons/refresh-icon"
+import InputContainer from "../../fundamentals/input-container"
+import InputHeader from "../../fundamentals/input-header"
+import { InputProps } from "../input"
+
+const GeneratingInput = React.forwardRef(
+  (
+    {
+      placeholder,
+      label,
+      name,
+      required,
+      deletable,
+      onDelete,
+      onChange,
+      onFocus,
+      tooltipContent,
+      tooltip,
+      props,
+      className,
+      value: valueProp,
+      ...fieldProps
+    }: Omit<InputProps, "prefix" | "key">,
+    ref
+  ) => {
+    const [value, setValue] = useState<
+      InputHTMLAttributes<HTMLInputElement>["value"]
+    >(valueProp || "")
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    useImperativeHandle(ref, () => inputRef.current)
+
+    const generateCode = () => {
+      setValue(generatePromotionCode())
+    }
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value)
+      if (onChange) {
+        onChange(e)
+      }
+    }
+
+    return (
+      <InputContainer
+        className={className}
+        key={name}
+        onClick={() => !fieldProps.disabled && inputRef?.current?.focus()}
+        {...props}
+      >
+        <div className="flex">
+          <InputHeader {...{ label, required, tooltipContent, tooltip }} />
+          {!value && (
+            <button
+              onClick={generateCode}
+              className="inter-small-semibold text-violet-50"
+            >
+              Generate
+            </button>
+          )}
+        </div>
+        <div className="flex">
+          <input
+            ref={inputRef}
+            value={value}
+            onChange={handleChange}
+            className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-inherit font-normal outline-none outline-0"
+            placeholder={placeholder}
+            autoComplete="off"
+            name={name}
+            onFocus={onFocus}
+            required={required}
+            {...fieldProps}
+          />
+          {value && (
+            <button onClick={generateCode}>
+              <RefreshIcon size={16} className="text-grey-50" />
+            </button>
+          )}
+        </div>
+      </InputContainer>
+    )
+  }
+)
+
+export default GeneratingInput

package/.cache/admin/src/components/molecules/grid-input/index.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+type GridInputProps = React.InputHTMLAttributes<HTMLInputElement>
+
+const GridInput: React.FC<GridInputProps> = ({ value, ...props }) => {
+  return (
+    <input
+      className="leading-base rounded-rounded inter-small-regular placeholder:text-grey-40 focus-within:shadow-input focus-within:border-violet-60 h-full w-full border border-transparent bg-transparent py-4 px-2 outline-none outline-0 focus-within:border"
+      value={value}
+      {...props}
+    />
+  )
+}
+
+export default GridInput

package/.cache/admin/src/components/molecules/hot-key-action/index.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+
+type HotKeyActionProps = {
+  label: string
+  hotKey: string
+  icon: React.ReactNode
+  onAction: (keyboardEvent: KeyboardEvent, hotkeysEvent: any) => void | boolean
+}
+
+const HotKeyAction = ({ label, hotKey, icon, onAction }: HotKeyActionProps) => {
+  useHotkeys(hotKey, onAction, {})
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-grey-0 inter-small-semibold">{label}</span>
+      <div className="inter-small-semibold text-grey-30 bg-grey-70 flex h-[24px] w-[24px] items-center justify-center rounded">
+        {icon}
+      </div>
+    </div>
+  )
+}
+
+export default HotKeyAction

package/.cache/admin/src/components/molecules/icon-tooltip/index.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import Tooltip, { TooltipProps } from "../../atoms/tooltip"
+import AlertIcon from "../../fundamentals/icons/alert-icon"
+import InfoIcon from "../../fundamentals/icons/info-icon"
+import IconProps from "../../fundamentals/icons/types/icon-type"
+import XCircleIcon from "../../fundamentals/icons/x-circle-icon"
+
+type IconTooltipProps = TooltipProps & {
+  type?: "info" | "warning" | "error"
+} & Pick<IconProps, "size">
+
+const IconTooltip: React.FC<IconTooltipProps> = ({
+  type = "info",
+  size = 16,
+  content,
+  ...props
+}) => {
+  const icon = (type: IconTooltipProps["type"]) => {
+    switch (type) {
+      case "warning":
+        return <AlertIcon size={size} className="text-orange-40 flex" />
+      case "error":
+        return <XCircleIcon size={size} className="text-rose-40 flex" />
+      default:
+        return <InfoIcon size={size} className="text-grey-40 flex" />
+    }
+  }
+
+  return (
+    <Tooltip content={content} {...props}>
+      {icon(type)}
+    </Tooltip>
+  )
+}
+
+export default IconTooltip

package/.cache/admin/src/components/molecules/indeterminate-checkbox/index.tsx

@@ -0,0 +1,84 @@
+import clsx from "clsx"
+import React, { useImperativeHandle } from "react"
+
+import CheckIcon from "../../fundamentals/icons/check-icon"
+import MinusIcon from "../../fundamentals/icons/minus-icon"
+
+type IndeterminateCheckboxProps = {
+  type?: "checkbox" | "radio"
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  checked?: boolean
+  title?: string
+  indeterminate?: boolean
+  className?: React.HTMLAttributes<HTMLInputElement>["className"]
+  name?: string
+  disabled?: boolean // NOTE: only visual, still have to filter disabled ids out
+}
+
+const IndeterminateCheckbox = React.forwardRef<
+  HTMLInputElement,
+  IndeterminateCheckboxProps
+>(({ indeterminate = false, className, checked, ...rest }, ref) => {
+  const type = rest.type || "checkbox"
+  const innerRef = React.useRef<HTMLInputElement | null>(null)
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    ref,
+    () => innerRef.current
+  )
+
+  React.useEffect(() => {
+    if (innerRef.current) {
+      innerRef.current.indeterminate = indeterminate
+    }
+  }, [innerRef, indeterminate])
+
+  const handleClick = () => {
+    if (!rest.disabled && innerRef.current) {
+      innerRef.current.click()
+    }
+  }
+
+  if (type === "radio") {
+    return (
+      <div className="flex h-full items-center">
+        <input
+          className={clsx({ "accent-violet-60": checked })}
+          type="radio"
+          checked={checked}
+          ref={innerRef}
+          {...rest}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full items-center">
+      <div
+        onClick={handleClick}
+        className={`rounded-base border-grey-30 text-grey-0 flex h-5 w-5 cursor-pointer justify-center border ${
+          rest.disabled
+            ? checked
+              ? "bg-gray-300"
+              : ""
+            : checked && "bg-violet-60"
+        }`}
+      >
+        <span className="self-center">
+          {checked && <CheckIcon size={16} />}
+          {indeterminate && <MinusIcon size={16} />}
+        </span>
+      </div>
+      <input
+        type="checkbox"
+        className={clsx("hidden", className)}
+        defaultChecked={checked}
+        ref={innerRef}
+        {...rest}
+      />
+    </div>
+  )
+})
+
+export default IndeterminateCheckbox

package/.cache/admin/src/components/molecules/input/index.tsx

@@ -0,0 +1,165 @@
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  MouseEventHandler,
+  useImperativeHandle,
+  useRef,
+} from "react"
+import InputHeader, { InputHeaderProps } from "../../fundamentals/input-header"
+
+import clsx from "clsx"
+import InputError from "../../atoms/input-error"
+import MinusIcon from "../../fundamentals/icons/minus-icon"
+import PlusIcon from "../../fundamentals/icons/plus-icon"
+
+export type InputProps = Omit<React.ComponentPropsWithRef<"input">, "prefix"> &
+  InputHeaderProps & {
+    small?: boolean
+    label?: string
+    deletable?: boolean
+    onDelete?: MouseEventHandler<HTMLSpanElement>
+    onChange?: ChangeEventHandler<HTMLInputElement>
+    onFocus?: FocusEventHandler<HTMLInputElement>
+    errors?: { [x: string]: unknown }
+    prefix?: React.ReactNode
+    suffix?: React.ReactNode
+    props?: React.HTMLAttributes<HTMLDivElement>
+  }
+
+const InputField = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      small,
+      placeholder,
+      label,
+      name,
+      required,
+      deletable,
+      onDelete,
+      onChange,
+      onFocus,
+      tooltipContent,
+      tooltip,
+      prefix,
+      suffix,
+      errors,
+      props,
+      className,
+      ...fieldProps
+    }: InputProps,
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement | null>(null)
+
+    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+      ref,
+      () => inputRef.current
+    )
+
+    const onNumberIncrement = () => {
+      inputRef.current?.stepUp()
+      if (onChange) {
+        inputRef.current?.dispatchEvent(
+          new InputEvent("change", {
+            view: window,
+            bubbles: true,
+            cancelable: false,
+          })
+        )
+      }
+    }
+
+    const onNumberDecrement = () => {
+      inputRef.current?.stepDown()
+      if (onChange) {
+        inputRef.current?.dispatchEvent(
+          new InputEvent("change", {
+            view: window,
+            bubbles: true,
+            cancelable: false,
+          })
+        )
+      }
+    }
+
+    return (
+      <div className={clsx("w-full", className)} {...props}>
+        {label && (
+          <InputHeader
+            {...{ label, required, tooltipContent, tooltip }}
+            className="mb-xsmall"
+          />
+        )}
+        <div
+          className={clsx(
+            "bg-grey-5 border-gray-20 px-small py-xsmall rounded-rounded focus-within:shadow-input focus-within:border-violet-60 flex w-full items-center border",
+            {
+              "focus-within:shadow-cta focus-within:shadow-rose-60/10 border-rose-50 focus-within:border-rose-50":
+                errors && name && errors[name],
+            },
+            small ? "h-8" : "h-10"
+          )}
+        >
+          {prefix ? (
+            <span className="text-grey-40 mr-2xsmall">{prefix}</span>
+          ) : null}
+          <input
+            className={clsx(
+              "remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent font-normal outline-none outline-0",
+              { "text-small": small, "pt-[1px]": small }
+            )}
+            ref={inputRef}
+            autoComplete="off"
+            name={name}
+            placeholder={placeholder || `${label}...` || "Placeholder"}
+            onChange={onChange}
+            onFocus={onFocus}
+            required={required}
+            {...fieldProps}
+          />
+          {suffix ? (
+            <span className="mx-2xsmall text-grey-40">{suffix}</span>
+          ) : null}
+
+          {deletable && (
+            <button
+              onClick={onDelete}
+              className="text-grey-50 hover:bg-grey-10 focus:bg-grey-20 rounded-soft ml-2 flex h-4 w-4 cursor-pointer items-center justify-center pb-px outline-none"
+              type="button"
+            >
+              &times;
+            </button>
+          )}
+
+          {fieldProps.type === "number" && (
+            <div className="flex h-full items-center self-end">
+              <button
+                onClick={onNumberDecrement}
+                onMouseDown={(e) => e.preventDefault()}
+                className="text-grey-50 hover:bg-grey-10 focus:bg-grey-20 rounded-soft mr-2 h-4 w-4 cursor-pointer outline-none"
+                type="button"
+                tabIndex={-1}
+              >
+                <MinusIcon size={16} />
+              </button>
+              <button
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={onNumberIncrement}
+                className="text-grey-50 hover:bg-grey-10 focus:bg-grey-20 rounded-soft h-4 w-4 cursor-pointer outline-none"
+                type="button"
+                tabIndex={-1}
+              >
+                <PlusIcon size={16} />
+              </button>
+            </div>
+          )}
+        </div>
+        <InputError name={name} errors={errors} />
+      </div>
+    )
+  }
+)
+
+InputField.displayName = "InputField"
+
+export default InputField

package/.cache/admin/src/components/molecules/input-signin/index.tsx

@@ -0,0 +1,101 @@
+import clsx from "clsx"
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react"
+import EyeIcon from "../../fundamentals/icons/eye-icon"
+import EyeOffIcon from "../../fundamentals/icons/eye-off-icon"
+import LockIcon from "../../fundamentals/icons/lock-icon"
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  key?: string
+  onChange?: ChangeEventHandler<HTMLInputElement>
+  onFocus?: FocusEventHandler<HTMLInputElement>
+  props?: React.HTMLAttributes<HTMLDivElement>
+}
+
+const SigninInput = React.forwardRef(
+  (
+    {
+      placeholder,
+      name,
+      key,
+      onChange,
+      onFocus,
+      className,
+      type,
+      ...props
+    }: InputProps,
+    ref
+  ) => {
+    const inputRef = useRef(null)
+    const [showPassword, setShowPassword] = useState(false)
+    const [inputType, setInputType] = useState(type)
+
+    useEffect(() => {
+      if (type === "password" && showPassword) {
+        setInputType("text")
+      }
+
+      if (type === "password" && !showPassword) {
+        setInputType("password")
+      }
+    }, [type, showPassword])
+
+    useImperativeHandle(ref, () => inputRef.current)
+
+    return (
+      <div
+        className={clsx(
+          "rounded-rounded h-[40px] w-[300px] overflow-hidden border",
+          "bg-grey-5 inter-base-regular placeholder:text-grey-40",
+          "focus-within:shadow-input focus-within:border-violet-60",
+          "flex items-center",
+          {
+            "text-grey-40 pl-xsmall pointer-events-none focus-within:border-none focus-within:shadow-none":
+              props.readOnly,
+          },
+          className
+        )}
+      >
+        <input
+          className={clsx(
+            "remove-number-spinner leading-base w-full bg-transparent py-3 px-4 outline-none outline-0",
+            {
+              "pl-xsmall": props.readOnly,
+            }
+          )}
+          ref={inputRef}
+          name={name}
+          key={key || name}
+          placeholder={placeholder || "Placeholder"}
+          onChange={onChange}
+          onFocus={onFocus}
+          type={inputType}
+          {...props}
+        />
+        {type === "password" && (
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="text-grey-40 focus:text-violet-60 px-4 focus:outline-none"
+            tabIndex={-1}
+          >
+            {showPassword ? <EyeIcon size={16} /> : <EyeOffIcon size={16} />}
+          </button>
+        )}
+        {props.readOnly && (
+          <LockIcon size={16} className="text-grey-40 mr-base" />
+        )}
+      </div>
+    )
+  }
+)
+
+SigninInput.displayName = "SigninInput"
+
+export default SigninInput