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

package/.cache/admin/src/components/molecules/table/filtering-option.tsx

@@ -0,0 +1,96 @@
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+import clsx from "clsx"
+import React, { useState } from "react"
+import CheckIcon from "../../fundamentals/icons/check-icon"
+import ChevronDownIcon from "../../fundamentals/icons/chevron-down"
+
+export type FilteringOptionProps = {
+  title: string
+  options: {
+    title: string
+    count?: number
+    onClick: () => void
+  }[]
+} & React.HTMLAttributes<HTMLDivElement>
+
+const FilteringOptions: React.FC<FilteringOptionProps> = ({
+  title,
+  options,
+  className,
+  ...props
+}) => {
+  const [selected, setSelected] = useState(options?.[0]?.title || "All")
+  const [open, setOpen] = useState(false)
+  return (
+    <div
+      className={clsx(
+        "inter-small-regular text-grey-50 mr-6 flex last:mr-0",
+        className
+      )}
+      {...props}
+    >
+      <span className="">{title}:</span>
+      <DropdownMenu.Root onOpenChange={setOpen}>
+        <DropdownMenu.Trigger
+          asChild
+          className={clsx(
+            "inter-small-regular text-grey-50 active:bg-grey-5 hover:bg-grey-5 flex items-center rounded pl-1.5 pr-0.5",
+            { "bg-grey-5": open }
+          )}
+        >
+          <div className="align-center flex">
+            {selected}
+            <div className="text-grey-40 h-min">
+              <ChevronDownIcon size={16} />
+            </div>
+          </div>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          sideOffset={8}
+          className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown z-40 border p-2"
+        >
+          {options.map((opt, idx) => (
+            <DropdownMenu.DropdownMenuItem
+              key={`${idx}-${opt.title}`}
+              onSelect={() => {
+                opt.onClick()
+                setSelected(opt.title)
+              }}
+              disabled={typeof opt.count !== "undefined" && opt.count < 1}
+              className={clsx(
+                "text-grey-90 inter-small-semibold my-1 flex w-48 items-center rounded py-1.5  px-3 hover:border-0 hover:outline-none",
+                {
+                  "hover:bg-grey-10 cursor-pointer":
+                    typeof opt.count === "undefined" || opt.count > 0,
+                }
+              )}
+            >
+              {selected === opt.title && (
+                <span className="w-4">
+                  <CheckIcon size={16} />
+                </span>
+              )}
+              <div
+                className={clsx("ml-3 flex w-full justify-between", {
+                  "ml-7": selected !== opt.title,
+                  "text-grey-30": (opt.count || 0) < 1,
+                })}
+              >
+                {opt.title}
+                <span
+                  className={clsx("inter-small-regular text-grey-40 ml-3", {
+                    "text-grey-30": (opt.count || 0) < 1,
+                  })}
+                >
+                  {opt.count}
+                </span>
+              </div>
+            </DropdownMenu.DropdownMenuItem>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </div>
+  )
+}
+
+export default FilteringOptions

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

@@ -0,0 +1,265 @@
+import Actionables, { ActionType } from "../../molecules/actionables"
+import FilteringOptions, { FilteringOptionProps } from "./filtering-option"
+
+import React from "react"
+import SortingIcon from "../../fundamentals/icons/sorting-icon"
+import TableSearch from "./table-search"
+import clsx from "clsx"
+import { useNavigate } from "react-router-dom"
+
+type TableRowProps = React.HTMLAttributes<HTMLTableRowElement> & {
+  forceDropdown?: boolean
+  actions?: ActionType[]
+  linkTo?: string
+  clickable?: boolean
+}
+
+type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement> & {
+  linkTo?: string
+  name?: string
+}
+
+type SortingHeadCellProps = {
+  onSortClicked: () => void
+  sortDirection?: "ASC" | "DESC"
+  setSortDirection: (string) => void
+} & React.HTMLAttributes<HTMLTableCellElement>
+
+export type TableProps = {
+  filteringOptions?: FilteringOptionProps[] | React.ReactNode
+  tableActions?: React.ReactNode
+  enableSearch?: boolean
+  searchClassName?: string
+  immediateSearchFocus?: boolean
+  searchPlaceholder?: string
+  searchValue?: string
+  containerClassName?: string
+  handleSearch?: (searchTerm: string) => void
+} & React.HTMLAttributes<HTMLTableElement>
+
+type TableElement<T> = React.ForwardRefExoticComponent<T> &
+  React.RefAttributes<unknown>
+
+type TableType = {
+  Head: TableElement<React.HTMLAttributes<HTMLTableSectionElement>>
+  HeadRow: TableElement<React.HTMLAttributes<HTMLTableRowElement>>
+  HeadCell: TableElement<React.ThHTMLAttributes<HTMLTableCellElement>>
+  SortingHeadCell: TableElement<SortingHeadCellProps>
+  Body: TableElement<React.HTMLAttributes<HTMLTableSectionElement>>
+  Row: TableElement<TableRowProps>
+  Cell: TableElement<TableCellProps>
+} & TableElement<TableProps>
+
+const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  (
+    {
+      className,
+      children,
+      tableActions,
+      enableSearch,
+      searchClassName,
+      immediateSearchFocus,
+      searchPlaceholder,
+      searchValue,
+      handleSearch,
+      filteringOptions,
+      containerClassName,
+      ...props
+    },
+    ref
+  ) => {
+    if (enableSearch && !handleSearch) {
+      throw new Error("Table cannot enable search without a search handler")
+    }
+
+    return (
+      <div className={`flex flex-col ${containerClassName}`}>
+        <div className="mb-2 flex w-full justify-between">
+          {filteringOptions ? (
+            <div className="mb-2 flex self-end">
+              {Array.isArray(filteringOptions)
+                ? filteringOptions.map((fo, idx) => <FilteringOptions {...fo} key={idx} />)
+                : filteringOptions}
+            </div>
+          ) : (
+            <span aria-hidden />
+          )}
+          <div className="gap-x-xsmall flex items-center">
+            {tableActions && <div>{tableActions}</div>}
+            {enableSearch && (
+              <TableSearch
+                autoFocus={immediateSearchFocus}
+                placeholder={searchPlaceholder}
+                searchValue={searchValue}
+                onSearch={handleSearch!}
+                className={searchClassName}
+              />
+            )}
+          </div>
+        </div>
+        <div className="relative">
+          <table
+            ref={ref}
+            className={clsx("w-full table-auto", className)}
+            {...props}
+          >
+            {children}
+          </table>
+        </div>
+      </div>
+    )
+  }
+) as TableType
+
+Table.Head = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, children, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={clsx(
+      "inter-small-semibold text-grey-50 border-grey-20 whitespace-nowrap border-t border-b",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </thead>
+))
+
+Table.HeadRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, children, ...props }, ref) => (
+  <tr ref={ref} className={clsx(className)} {...props}>
+    {children}
+  </tr>
+))
+
+Table.HeadCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.HTMLAttributes<HTMLTableCellElement>
+>(({ className, children, ...props }, ref) => (
+  <th ref={ref} className={clsx("h-[40px] text-left", className)} {...props}>
+    {children}
+  </th>
+))
+
+Table.SortingHeadCell = React.forwardRef<
+  HTMLTableCellElement,
+  SortingHeadCellProps
+>(
+  (
+    {
+      onSortClicked,
+      sortDirection,
+      setSortDirection,
+      className,
+      children,
+      ...props
+    }: SortingHeadCellProps,
+    ref
+  ) => {
+    return (
+      <th ref={ref} className={clsx("py-2.5 text-left", className)} {...props}>
+        <div
+          className="flex cursor-pointer select-none items-center"
+          onClick={(e) => {
+            e.preventDefault()
+            if (!sortDirection) {
+              setSortDirection("ASC")
+            } else {
+              if (sortDirection === "ASC") {
+                setSortDirection("DESC")
+              } else {
+                setSortDirection(undefined)
+              }
+            }
+            onSortClicked()
+          }}
+        >
+          {children}
+          <SortingIcon
+            size={16}
+            ascendingColor={sortDirection === "ASC" ? "#111827" : undefined}
+            descendingColor={sortDirection === "DESC" ? "#111827" : undefined}
+          />
+        </div>
+      </th>
+    )
+  }
+)
+
+Table.Body = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, children, ...props }, ref) => (
+  <tbody ref={ref} className={clsx(className)} {...props}>
+    {children}
+  </tbody>
+))
+
+Table.Cell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({ className, linkTo, children, ...props }, ref) => {
+    const navigate = useNavigate()
+    return (
+      <td
+        ref={ref}
+        className={clsx("inter-small-regular h-[40px]", className)}
+        {...props}
+        {...(linkTo && {
+          onClick: (e) => {
+            navigate(linkTo)
+            e.stopPropagation()
+          },
+        })}
+      >
+        {children}
+      </td>
+    )
+  }
+)
+
+Table.Row = React.forwardRef<HTMLTableRowElement, TableRowProps>(
+  (
+    {
+      className,
+      actions,
+      children,
+      linkTo,
+      forceDropdown,
+      clickable,
+      ...props
+    },
+    ref
+  ) => {
+    const navigate = useNavigate()
+    return (
+      <tr
+        ref={ref}
+        className={clsx(
+          "inter-small-regular border-grey-20 text-grey-90 border-t border-b",
+          className,
+          {
+            "hover:bg-grey-5 cursor-pointer": linkTo !== undefined || clickable,
+          }
+        )}
+        {...props}
+        {...(linkTo && {
+          onClick: () => {
+            navigate(linkTo)
+          },
+        })}
+      >
+        {children}
+        {actions && (
+          <Table.Cell onClick={(e) => e.stopPropagation()} className="w-[32px]">
+            <Actionables forceDropdown={forceDropdown} actions={actions} />
+          </Table.Cell>
+        )}
+      </tr>
+    )
+  }
+)
+
+export default Table

package/.cache/admin/src/components/molecules/table/table-search.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx"
+import React from "react"
+import SearchIcon from "../../fundamentals/icons/search-icon"
+
+type TableSearchProps = {
+  autoFocus?: boolean
+  onSearch: (term: string) => void
+  placeholder?: string
+  searchValue?: string
+} & React.HTMLAttributes<HTMLDivElement>
+
+const TableSearch: React.FC<TableSearchProps> = ({
+  autoFocus,
+  onSearch,
+  placeholder = "Search",
+  searchValue,
+  className,
+  ...props
+}) => {
+  return (
+    <div
+      className={clsx(
+        "inter-small-regular transition-color text-grey-50 rounded-rounded border-grey-20 min-w-content focus-within:shadow-input focus-within:border-violet-60 bg-grey-5 mt-1 mb-1 flex w-60 items-center border py-1.5 pl-1",
+        className
+      )}
+      {...props}
+    >
+      <span className="px-2.5 py-0.5">
+        <SearchIcon size={16} />
+      </span>
+      <input
+        autoFocus={autoFocus}
+        type="text"
+        value={searchValue}
+        className={clsx(
+          "inter-small-regular focus:text-grey-90 caret-violet-60 placeholder:inter-small-regular placeholder-grey-40 w-full bg-transparent focus:border-none focus:outline-none"
+        )}
+        placeholder={placeholder}
+        onChange={(e) => {
+          onSearch(e.target.value)
+        }}
+      />
+    </div>
+  )
+}
+
+export default TableSearch

package/.cache/admin/src/components/molecules/table-fileds-filter/index.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect, useRef, useState } from "react"
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+import { sortBy } from "lodash"
+
+import PlusIcon from "../../fundamentals/icons/plus-icon"
+import Button from "../../fundamentals/button"
+import CrossIcon from "../../fundamentals/icons/cross-icon"
+import Checkbox from "../../atoms/checkbox"
+
+/** ****************** TYPES ********************/
+
+type Field = {
+  id: string
+  short: string
+  label: React.ReactChild | ((args: { isSelected: boolean }) => void)
+}
+
+type ChipProps = Field & {
+  remove: () => void
+}
+
+type TableFieldsFilterProps = {
+  fields: Field[]
+  onChange: (selectedFieldIds: string[]) => void
+}
+
+type FieldsMenuProps = {
+  fields: Field[]
+  onBlur: (ids: string[]) => void
+  selectedFields: string[]
+}
+
+type FieldMenuItemProps = {
+  field: Field
+  checked: boolean
+  onChange: () => void
+}
+
+/** ****************** COMPONENTS ********************/
+
+/**
+ * Table field chip component.
+ */
+function Chip(props: ChipProps) {
+  const { remove, short } = props
+  return (
+    <div className="text-small text-grey-70 border-gray-70 mr-1 inline-flex h-[32px] shrink-0 items-center gap-1 rounded-lg border px-3 last:mr-2">
+      {short}
+      <CrossIcon
+        className="text-grey-40 cursor-pointer"
+        onClick={remove}
+        size={13}
+      />
+    </div>
+  )
+}
+
+/**
+ * `FieldMenu` item component.
+ */
+function FieldMenuItem(props: FieldMenuItemProps) {
+  const { checked, field, onChange } = props
+  return (
+    <DropdownMenu.Item>
+      <Checkbox
+        checked={checked}
+        className="hover:bg-grey-10 text-small mx-2 h-[32px] rounded px-[6px]"
+        onChange={onChange}
+        label={
+          typeof field.label === "function"
+            ? field.label({ isSelected: props.checked })
+            : field.label
+        }
+      />
+    </DropdownMenu.Item>
+  )
+}
+
+/** ****************** CONTAINERS ********************/
+
+/**
+ * The dropdown menu for selecting currently active table fields.
+ */
+function FieldsMenu(props: FieldsMenuProps) {
+  const { fields, onBlur, selectedFields } = props
+
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
+  // local copy of selected filters which is synced with the container list on blur
+  const [currentlySelected, setCurrentlySelected] = useState<string[]>([])
+
+  const onTriggerClick = () => {
+    setOpen(true)
+  }
+
+  const toggleCheck = (id: string) => {
+    if (currentlySelected.includes(id)) {
+      setCurrentlySelected(currentlySelected.filter((f) => f !== id))
+    } else {
+      setCurrentlySelected([...currentlySelected, id])
+    }
+  }
+
+  useEffect(() => {
+    if (open) {
+      setCurrentlySelected(selectedFields)
+    }
+  }, [open, selectedFields])
+
+  useEffect(() => {
+    if (!open) {
+      onBlur(currentlySelected)
+    }
+  }, [open])
+
+  // close dropdown "manually" on click outside the menu
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!contentRef.current?.contains(event.target)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [contentRef])
+
+  return (
+    <DropdownMenu.Root open={open}>
+      <DropdownMenu.Trigger>
+        <Button
+          onClick={onTriggerClick}
+          variant="secondary"
+          className="text-small text-grey-90 inline-flex h-[32px] rounded-lg px-3 font-semibold"
+        >
+          <span className="flex items-center gap-1 whitespace-nowrap">
+            Add fields <PlusIcon size={14} />
+          </span>
+        </Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content
+        ref={contentRef}
+        className="w-[240px] rounded-xl bg-white p-2 shadow"
+      >
+        {fields.map((f) => (
+          <FieldMenuItem
+            key={f.id}
+            field={f}
+            onChange={() => toggleCheck(f.id)}
+            checked={currentlySelected.includes(f.id)}
+          />
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}
+
+/**
+ * Table fields filter root container.
+ */
+function TableFieldsFilters(props: TableFieldsFilterProps) {
+  const { fields, onChange } = props
+
+  const [selectedFields, setSelectedFields] = useState<Field["id"][]>([])
+
+  useEffect(() => {
+    onChange(selectedFields)
+  }, [selectedFields])
+
+  const removeSelected = (id: string) => {
+    setSelectedFields(selectedFields.filter((f) => f !== id))
+  }
+
+  const _selected = [...selectedFields]
+  _selected.sort((a, b) => a.localeCompare(b))
+
+  const visibleFields = _selected.map((id) => fields.find((f) => f.id === id))
+
+  return (
+    <div className="flex flex-wrap items-center gap-y-2">
+      <span className="text-small mr-2 whitespace-nowrap font-semibold text-gray-500">
+        Currently editing these fields:
+      </span>
+
+      {visibleFields.map((f) => (
+        <Chip key={f!.id} remove={() => removeSelected(f!.id)} {...f!} />
+      ))}
+
+      <FieldsMenu
+        fields={sortBy(fields, "id")}
+        onBlur={setSelectedFields}
+        selectedFields={_selected}
+      />
+    </div>
+  )
+}
+
+export default TableFieldsFilters

package/.cache/admin/src/components/molecules/table-pagination/index.ts

@@ -0,0 +1 @@
+export { TablePagination as default } from "./table-pagination"

package/.cache/admin/src/components/molecules/table-pagination/table-pagination.tsx

@@ -0,0 +1,77 @@
+import { Table } from "@tanstack/react-table"
+import clsx from "clsx"
+import { useMemo } from "react"
+import Button from "../../fundamentals/button"
+import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
+import ArrowRightIcon from "../../fundamentals/icons/arrow-right-icon"
+
+type Props<T> = {
+  count?: number
+  table: Table<T>
+  className?: string
+}
+
+/**
+ * Table pagnination component that is compatible with @tanstack/react-table
+ */
+export const TablePagination = <T,>({
+  count = 0,
+  table,
+  className,
+}: Props<T>) => {
+  const {
+    getState,
+    getPageCount,
+    getCanNextPage,
+    getCanPreviousPage,
+    previousPage,
+    nextPage,
+  } = table
+
+  const { pageIndex, pageSize } = getState().pagination
+
+  const { from, to } = useMemo(() => {
+    const from = pageIndex * pageSize + 1
+    const to = Math.min(count, (pageIndex + 1) * pageSize)
+
+    return { from, to }
+  }, [count, pageIndex, pageSize])
+
+  return (
+    <div
+      className={clsx(
+        "inter-small-regular text-grey-50 flex items-center justify-between",
+        className
+      )}
+    >
+      <div>
+        <p>{`${from} – ${to} of ${count} results`}</p>
+      </div>
+      <div className="gap-x-small flex items-center">
+        <p>{`${getState().pagination.pageIndex + 1} of ${getPageCount()}`}</p>
+        <div className="gap-x-2xsmall flex items-center">
+          <Button
+            variant="ghost"
+            size="small"
+            className="h-xlarge w-xlarge disabled:text-grey-40"
+            type="button"
+            disabled={!getCanPreviousPage()}
+            onClick={previousPage}
+          >
+            <ArrowLeftIcon size={16} />
+          </Button>
+          <Button
+            variant="ghost"
+            size="small"
+            className="h-xlarge w-xlarge disabled:text-grey-40"
+            type="button"
+            disabled={!getCanNextPage()}
+            onClick={nextPage}
+          >
+            <ArrowRightIcon size={16} />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}