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

package/.cache/admin/src/components/helpers/form/form.tsx

@@ -0,0 +1,187 @@
+import {
+  Hint as HintComponent,
+  Label as LabelComponent,
+  clx,
+} from "@medusajs/ui"
+import * as LabelPrimitives from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import * as React from "react"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from "react-hook-form"
+
+const Provider = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const Field = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within a FormField")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formErrorMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+const Item = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        ref={ref}
+        className={clx("flex flex-col space-y-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+})
+Item.displayName = "Form.Item"
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitives.Root>
+>(({ className, ...props }, ref) => {
+  const { formItemId } = useFormField()
+
+  return (
+    <LabelComponent
+      ref={ref}
+      className={clx(className)}
+      htmlFor={formItemId}
+      weight="plus"
+      {...props}
+    />
+  )
+})
+Label.displayName = "Form.Label"
+
+const Control = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formErrorMessageId } =
+    useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formErrorMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+Control.displayName = "Form.Control"
+
+const Hint = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <HintComponent
+      ref={ref}
+      id={formDescriptionId}
+      className={className}
+      {...props}
+    />
+  )
+})
+Hint.displayName = "Form.Hint"
+
+const ErrorMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formErrorMessageId } = useFormField()
+  const msg = error ? String(error?.message) : children
+
+  if (!msg) {
+    return null
+  }
+
+  return (
+    <HintComponent
+      ref={ref}
+      id={formErrorMessageId}
+      className={className}
+      variant={error ? "error" : "info"}
+      {...props}
+    >
+      {msg}
+    </HintComponent>
+  )
+})
+ErrorMessage.displayName = "Form.ErrorMessage"
+
+const Form = Object.assign(Provider, {
+  Item,
+  Label,
+  Control,
+  Hint,
+  ErrorMessage,
+  Field,
+})
+
+export { Form }

package/.cache/admin/src/components/helpers/form/index.ts

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

package/.cache/admin/src/components/molecules/actionables.tsx

@@ -0,0 +1,115 @@
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+import clsx from "clsx"
+import React from "react"
+import Button from "../fundamentals/button"
+import MoreHorizontalIcon from "../fundamentals/icons/more-horizontal-icon"
+
+export type ActionType = {
+  label: string
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+  variant?: "normal" | "danger"
+  disabled?: boolean
+  icon?: React.ReactNode
+}
+
+type ActionablesProps = {
+  actions?: ActionType[]
+  customTrigger?: React.ReactNode
+  forceDropdown?: boolean
+}
+
+const Actionables: React.FC<ActionablesProps> = ({
+  actions,
+  customTrigger,
+  forceDropdown = false,
+}) => {
+  if (actions && (forceDropdown || actions.length > 1)) {
+    return (
+      <div>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            {!customTrigger ? (
+              <Button
+                variant="ghost"
+                size="small"
+                className="w-xlarge h-xlarge focus-visible:shadow-input focus-visible:border-violet-60 focus:shadow-none focus-visible:outline-none"
+              >
+                <MoreHorizontalIcon size={20} />
+              </Button>
+            ) : (
+              customTrigger
+            )}
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content
+            sideOffset={5}
+            className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall z-30 min-w-[200px] border"
+          >
+            {actions.map((action, i) => {
+              return (
+                <DropdownMenu.Item className="mb-1 last:mb-0" key={i}>
+                  {
+                    <Button
+                      variant="ghost"
+                      size="small"
+                      className={clsx("flex w-full justify-start", {
+                        "text-rose-50": action?.variant === "danger",
+                        "pointer-events-none select-none opacity-50":
+                          action?.disabled,
+                      })}
+                      onClick={action?.onClick}
+                    >
+                      {action.icon}
+                      {action.label}
+                    </Button>
+                  }
+                </DropdownMenu.Item>
+              )
+            })}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </div>
+    )
+  }
+
+  if (customTrigger) {
+    const triggers = Array.isArray(customTrigger)
+      ? customTrigger
+      : [customTrigger]
+    return (
+      <div>
+        {triggers.map((trigger, i) => (
+          <div key={i}>{trigger}</div>
+        ))}
+      </div>
+    )
+  }
+
+  const [action] = actions ?? []
+  if (action) {
+    return (
+      <div>
+        <Button
+          variant="secondary"
+          size="small"
+          type="button"
+          className="flex items-center"
+          onClick={action.onClick}
+        >
+          {action.icon ? (
+            <div className="gap-x-2xsmall flex items-center">
+              {action.icon}
+              {action.label}
+            </div>
+          ) : (
+            <>{action.label}</>
+          )}
+        </Button>
+      </div>
+    )
+  }
+
+  return null
+}
+
+export default Actionables

package/.cache/admin/src/components/molecules/activity-card/index.tsx

@@ -0,0 +1,68 @@
+import React, { ReactNode } from "react"
+import StatusIndicator from "../../fundamentals/status-indicator"
+import Tooltip from "../../atoms/tooltip"
+import clsx from "clsx"
+
+export type ActivityCardProps = {
+  key?: string
+  title: string
+  icon?: ReactNode
+  relativeTimeElapsed?: string
+  date?: string | Date
+  shouldShowStatus?: boolean
+  children?: ReactNode[]
+}
+
+export const ActivityCard: React.FC<ActivityCardProps> = (
+  props: ActivityCardProps
+) => {
+  const { key, title, icon, relativeTimeElapsed, shouldShowStatus, children } =
+    props
+
+  const date =
+    !!props.date &&
+    new Date(props.date).toLocaleDateString("en-us", {
+      hour12: true,
+      day: "2-digit",
+      month: "short",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+    })
+  const formattedDate = !!date && date.replace(",", " at")
+
+  const getTimeElement = () => {
+    return (
+      <div className="flex cursor-default">
+        {!!relativeTimeElapsed && <span>{relativeTimeElapsed}</span>}
+        {shouldShowStatus && (
+          <StatusIndicator variant={"primary"} className="ml-2" />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div key={key} className="border-grey-20 mx-8 border-b last:border-b-0">
+      <div className="hover:bg-grey-5 -mx-8 flex px-8 py-6">
+        <div className="relative h-full w-full">
+          <div className="inter-small-semibold text-grey-90 flex justify-between">
+            <div className="flex">
+              {!!icon && icon}
+              <span>{title}</span>
+            </div>
+
+            {(!!relativeTimeElapsed || shouldShowStatus) &&
+              (formattedDate ? (
+                <Tooltip content={formattedDate}>{getTimeElement()}</Tooltip>
+              ) : (
+                getTimeElement()
+              ))}
+          </div>
+
+          <div className={clsx(!!icon && "pl-8")}>{children}</div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/.cache/admin/src/components/molecules/amount-input/amount-and-currency-input.tsx

@@ -0,0 +1,134 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import AmountField from "react-currency-input-field"
+import { Option } from "../../../types/shared"
+import { currencies } from "../../../utils/currencies"
+import InputError from "../../atoms/input-error"
+import InputHeader from "../../fundamentals/input-header"
+import { NextSelect } from "../select/next-select"
+
+type Value = {
+  amount: number | null | undefined
+  currency: Option | null | undefined
+}
+
+type Props = {
+  label?: string
+  errors?: Record<string, unknown>
+  name?: string
+  onChange: (value: Value) => void
+  onBlur?: React.FocusEventHandler<HTMLInputElement>
+  value: Value
+}
+
+const AmountAndCurrencyInput = ({
+  label,
+  errors,
+  name,
+  value,
+  onChange,
+  onBlur,
+}: Props) => {
+  const { symbol_native, decimal_digits } = useMemo(() => {
+    let symbol_native = "$"
+    let decimal_digits = 2
+
+    if (value.currency) {
+      const currency = currencies[value.currency.value.toUpperCase()]
+
+      symbol_native = currency.symbol_native
+      decimal_digits = currency.decimal_digits
+    }
+
+    return { symbol_native, decimal_digits }
+  }, [value])
+
+  const step = useMemo(() => 10 ** -decimal_digits, [decimal_digits])
+
+  const getFormattedValue = useCallback(
+    (value: number) => {
+      return `${value / 10 ** decimal_digits}`
+    },
+    [decimal_digits]
+  )
+
+  const [formattedValue, setFormattedValue] = useState<string | undefined>(
+    value.amount !== undefined && value.amount !== null
+      ? getFormattedValue(value.amount)
+      : undefined
+  )
+
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  /**
+   * Update the amount when the decimal digits change
+   */
+  useEffect(() => {
+    inputRef.current?.dispatchEvent(new Event("blur"))
+  }, [decimal_digits])
+
+  const onCurrencyChange = (currency?: Option | null) => {
+    onChange({ amount: value.amount, currency: currency })
+  }
+
+  /**
+   * On amount change, update the amount and formatted value.
+   * The amount passed to the onChange function is the DB persisted value,
+   * the formatted value is the value that is displayed in the input.
+   */
+  const onAmountChange = (amount?: string, floatValue?: number | null) => {
+    let numericalValue: number | null | undefined = 0
+
+    if (floatValue) {
+      numericalValue = Math.round(floatValue * 10 ** decimal_digits)
+    }
+
+    onChange({ amount: numericalValue, currency: value.currency })
+    setFormattedValue(amount)
+  }
+
+  return (
+    <div className="flex w-full flex-col">
+      {label && <InputHeader label={label} className="mb-xsmall" />}
+      <div className="focus-within:shadow-focus-border rounded-rounded">
+        <div className="bg-grey-5 rounded-rounded shadow-border focus-within:shadow-cta relative h-10 transition-colors">
+          <NextSelect
+            customStyles={{
+              control:
+                "border-none absolute inset-0 bg-transparent focus-within:shadow-none !shadow-none focus-within:border-none pl-0",
+              inner_control: "!max-w-[92px] border-r border-grey-20 pl-base",
+            }}
+            placeholder="USD"
+            options={Object.values(currencies).map((c) => ({
+              value: c.code,
+              label: c.code,
+            }))}
+            isMulti={false}
+            onBlur={onBlur}
+            value={value.currency}
+            onChange={onCurrencyChange}
+          />
+          <div className="pl-xsmall pr-base inter-base-regular absolute inset-y-0 left-[92px] right-0 flex h-10 items-center">
+            <AmountField
+              ref={inputRef}
+              step={step}
+              value={formattedValue}
+              onValueChange={(value, _name, values) =>
+                onAmountChange(value, values?.float)
+              }
+              allowNegativeValue={false}
+              placeholder="-"
+              decimalScale={decimal_digits}
+              className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent text-right font-normal outline-none outline-0"
+            />
+            <div className="ml-2xsmall flex min-w-[16px] items-center">
+              <p className="text-grey-40 w-full text-right">{symbol_native}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <InputError errors={errors} name={name} />
+    </div>
+  )
+}
+
+export default AmountAndCurrencyInput

package/.cache/admin/src/components/molecules/amount-input/amount-input.tsx

@@ -0,0 +1,91 @@
+import clsx from "clsx"
+import { useEffect, useState } from "react"
+import AmountField from "react-currency-input-field"
+import { currencies } from "../../../utils/currencies"
+import InputError from "../../atoms/input-error"
+import InputHeader from "../../fundamentals/input-header"
+
+type Props = {
+  currencyCode: string
+  value?: number | null
+  onChange: (amount?: number | null) => void
+  errors?: { [x: string]: unknown }
+  name?: string
+  label?: string
+}
+
+const AmountInput = ({
+  name,
+  label,
+  currencyCode,
+  errors,
+  value,
+  onChange,
+}: Props) => {
+  const { symbol_native, decimal_digits } =
+    currencies[currencyCode.toUpperCase()]
+
+  const getFormattedValue = (value: number) => {
+    return `${value / 10 ** decimal_digits}`
+  }
+
+  const [formattedValue, setFormattedValue] = useState<string | undefined>(
+    value !== undefined && value !== null ? getFormattedValue(value) : undefined
+  )
+
+  useEffect(() => {
+    if (value) {
+      setFormattedValue(getFormattedValue(value))
+    }
+  }, [value, decimal_digits])
+
+  const onAmountChange = (value?: string, floatValue?: number | null) => {
+    if (floatValue) {
+      const numericalValue = Math.round(floatValue * 10 ** decimal_digits)
+      onChange(numericalValue)
+    } else {
+      onChange(0)
+    }
+    setFormattedValue(value)
+  }
+
+  const step = 10 ** -decimal_digits
+
+  return (
+    <div>
+      {label && <InputHeader label={label} className="mb-xsmall" />}
+      <div
+        className={clsx(
+          "bg-grey-5 border-gray-20 px-base py-xsmall rounded-rounded focus-within:shadow-input focus-within:border-violet-60 inter-base-regular flex h-10 w-full items-center border",
+          {
+            "border-rose-50": errors && name && errors[name],
+          }
+        )}
+      >
+        <div className="inter-base-regular text-grey-40">
+          <p>{currencyCode.toUpperCase()}</p>
+        </div>
+
+        <div className="gap-2xsmall flex w-full items-center">
+          <AmountField
+            step={step}
+            value={formattedValue}
+            onValueChange={(value, _name, values) =>
+              onAmountChange(value, values?.float)
+            }
+            allowNegativeValue={false}
+            placeholder="-"
+            decimalScale={decimal_digits}
+            className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent text-right font-normal outline-none outline-0"
+          />
+          <div className="ml-2xsmall flex min-w-[16px] items-center">
+            <p className="text-grey-40 w-full text-right">{symbol_native}</p>
+          </div>
+        </div>
+      </div>
+      <InputError name={name} errors={errors} />
+    </div>
+  )
+}
+
+export default AmountInput

package/.cache/admin/src/components/molecules/amount-input/index.ts

@@ -0,0 +1,4 @@
+import AmountAndCurrencyInput from "./amount-and-currency-input"
+import AmountInput from "./amount-input"
+
+export { AmountAndCurrencyInput, AmountInput }

package/.cache/admin/src/components/molecules/availability-duration/index.tsx

@@ -0,0 +1,86 @@
+import { parse } from "iso8601-duration"
+import React, { useEffect, useState } from "react"
+import InputField from "../input"
+
+type AvailabilityDurationProps = {
+  onChange: React.Dispatch<React.SetStateAction<string | undefined>>
+  value: string | undefined
+}
+
+const getValue = (e: React.ChangeEvent<HTMLInputElement>) =>
+  parseFloat(e.target.value)
+
+const AvailabilityDuration: React.FC<AvailabilityDurationProps> = ({
+  value,
+  onChange,
+}) => {
+  const duration = value ? parse(value) : {}
+  const [durationYears, setDurationYears] = useState(duration.years || 0)
+  const [durationMonths, setDurationMonths] = useState(duration.months || 0)
+  const [durationDays, setDurationDays] = useState(duration.days || 0)
+  const [durationHours, setDurationHours] = useState(duration.hours || 0)
+  const [durationMinutes, setDurationMinutes] = useState(duration.minutes || 0)
+
+  useEffect(() => {
+    const isoString = `P${durationYears || 0}Y${durationMonths || 0}M${
+      durationDays || 0
+    }DT${durationHours || 0}H${durationMinutes || 0}M`
+
+    onChange(isoString)
+  }, [
+    durationYears,
+    durationMonths,
+    durationDays,
+    durationHours,
+    durationMinutes,
+  ])
+
+  return (
+    <div>
+      <div className="gap-x-xsmall gap-y-base mt-xlarge grid grid-cols-3 grid-rows-2">
+        <InputField
+          label="Years"
+          type="number"
+          placeholder="0"
+          value={durationYears}
+          onChange={(e) => setDurationYears(getValue(e))}
+          min={0}
+        />
+        <InputField
+          label="Months"
+          type="number"
+          placeholder="0"
+          value={durationMonths}
+          onChange={(e) => setDurationMonths(getValue(e))}
+          min={0}
+        />
+        <InputField
+          label="Days"
+          type="number"
+          placeholder="0"
+          value={durationDays}
+          onChange={(e) => setDurationDays(getValue(e))}
+          min={0}
+        />
+        <InputField
+          label="Hours"
+          type="number"
+          placeholder="0"
+          value={durationHours}
+          onChange={(e) => setDurationHours(getValue(e))}
+          min={0}
+        />
+        <InputField
+          label="Minutes"
+          type="number"
+          placeholder="0"
+          value={durationMinutes}
+          onChange={(e) => setDurationMinutes(getValue(e))}
+          min={0}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default AvailabilityDuration