@acmekit/dashboard 2.13.1

package/src/components/common/user-link/user-link.tsx

@@ -0,0 +1,45 @@
+import { Avatar, Text } from "@acmekit/ui"
+import { Link } from "react-router-dom"
+import { useUser } from "../../../hooks/api/users"
+
+type UserLinkProps = {
+  id: string
+  first_name?: string | null
+  last_name?: string | null
+  email: string
+  type?: "customer" | "user"
+}
+
+export const UserLink = ({
+  id,
+  first_name,
+  last_name,
+  email,
+  type = "user",
+}: UserLinkProps) => {
+  const name = [first_name, last_name].filter(Boolean).join(" ")
+  const fallback = name ? name.slice(0, 1) : email.slice(0, 1)
+  const link = type === "user" ? `/settings/users/${id}` : `/customers/${id}`
+
+  return (
+    <Link
+      to={link}
+      className="flex items-center gap-x-2 w-fit transition-fg hover:text-ui-fg-subtle outline-none focus-visible:shadow-borders-focus rounded-md"
+    >
+      <Avatar size="2xsmall" fallback={fallback.toUpperCase()} />
+      <Text size="small" leading="compact" weight="regular">
+        {name || email}
+      </Text>
+    </Link>
+  )
+}
+
+export const By = ({ id }: { id: string }) => {
+  const { user } = useUser(id) // todo: extend to support customers
+
+  if (!user) {
+    return null
+  }
+
+  return <UserLink {...user} />
+}

package/src/components/data-grid/components/data-grid-boolean-cell.tsx

@@ -0,0 +1,71 @@
+import { Checkbox } from "@acmekit/ui"
+import { Controller, ControllerRenderProps } from "react-hook-form"
+
+import { useCombinedRefs } from "../../../hooks/use-combined-refs"
+import { useDataGridCell, useDataGridCellError } from "../hooks"
+import { DataGridCellProps, InputProps } from "../types"
+import { DataGridCellContainer } from "./data-grid-cell-container"
+
+export const DataGridBooleanCell = <TData, TValue = any>({
+  context,
+  disabled,
+}: DataGridCellProps<TData, TValue> & { disabled?: boolean }) => {
+  const { field, control, renderProps } = useDataGridCell({
+    context,
+  })
+  const errorProps = useDataGridCellError({ context })
+
+  const { container, input } = renderProps
+
+  return (
+    <Controller
+      control={control}
+      name={field}
+      render={({ field }) => {
+        return (
+          <DataGridCellContainer {...container} {...errorProps}>
+            <Inner field={field} inputProps={input} disabled={disabled} />
+          </DataGridCellContainer>
+        )
+      }}
+    />
+  )
+}
+
+const Inner = ({
+  field,
+  inputProps,
+  disabled,
+}: {
+  field: ControllerRenderProps<any, string>
+  inputProps: InputProps
+  disabled?: boolean
+}) => {
+  const { ref, value, onBlur, name, disabled: fieldDisabled } = field
+  const {
+    ref: inputRef,
+    onBlur: onInputBlur,
+    onChange,
+    onFocus,
+    ...attributes
+  } = inputProps
+
+  const combinedRefs = useCombinedRefs(ref, inputRef)
+
+  return (
+    <Checkbox
+      disabled={disabled || fieldDisabled}
+      name={name}
+      checked={value}
+      onCheckedChange={(newValue) => onChange(newValue === true, value)}
+      onFocus={onFocus}
+      onBlur={() => {
+        onBlur()
+        onInputBlur()
+      }}
+      ref={combinedRefs}
+      tabIndex={-1}
+      {...attributes}
+    />
+  )
+}

package/src/components/data-grid/components/data-grid-cell-container.tsx

@@ -0,0 +1,97 @@
+import { ErrorMessage } from "@hookform/error-message"
+import { ExclamationCircle } from "@acmekit/icons"
+import { Tooltip, clx } from "@acmekit/ui"
+import { PropsWithChildren } from "react"
+import { get } from "react-hook-form"
+
+import { DataGridCellContainerProps, DataGridErrorRenderProps } from "../types"
+import { DataGridRowErrorIndicator } from "./data-grid-row-error-indicator"
+
+export const DataGridCellContainer = ({
+  isAnchor,
+  isSelected,
+  isDragSelected,
+  field,
+  showOverlay,
+  placeholder,
+  innerProps,
+  overlayProps,
+  children,
+  errors,
+  rowErrors,
+  outerComponent,
+  isMultiLine,
+}: DataGridCellContainerProps &
+  DataGridErrorRenderProps<any> & { isMultiLine?: boolean }) => {
+  const error = get(errors, field)
+  const hasError = !!error
+
+  return (
+    <div className={clx("group/container relative h-full w-full")}>
+      <div
+        className={clx(
+          "bg-ui-bg-base group/cell relative flex h-full w-full gap-x-2 px-4 py-2.5 outline-none",
+          {
+            "items-center": !isMultiLine,
+            "items-start": isMultiLine,
+            "bg-ui-tag-red-bg text-ui-tag-red-text":
+              hasError && !isAnchor && !isSelected && !isDragSelected,
+            "ring-ui-bg-interactive ring-2 ring-inset": isAnchor,
+            "bg-ui-bg-highlight [&:has([data-field]:focus)]:bg-ui-bg-base":
+              isSelected || isAnchor,
+            "bg-ui-bg-subtle": isDragSelected && !isAnchor,
+          }
+        )}
+        tabIndex={-1}
+        {...innerProps}
+      >
+        <ErrorMessage
+          name={field}
+          errors={errors}
+          render={({ message }) => {
+            return (
+              <div className="flex items-center justify-center">
+                <Tooltip content={message} delayDuration={0}>
+                  <ExclamationCircle className="text-ui-tag-red-icon z-[3]" />
+                </Tooltip>
+              </div>
+            )
+          }}
+        />
+        <div
+          className={clx("relative z-[1] flex h-full w-full", {
+            "items-center justify-center": !isMultiLine,
+            "items-start": isMultiLine,
+          })}
+        >
+          <RenderChildren isAnchor={isAnchor} placeholder={placeholder}>
+            {children}
+          </RenderChildren>
+        </div>
+        <DataGridRowErrorIndicator rowErrors={rowErrors} />
+        {showOverlay && (
+          <div
+            {...overlayProps}
+            data-cell-overlay="true"
+            className="absolute inset-0 z-[2]"
+          />
+        )}
+      </div>
+      {outerComponent}
+    </div>
+  )
+}
+
+const RenderChildren = ({
+  isAnchor,
+  placeholder,
+  children,
+}: PropsWithChildren<
+  Pick<DataGridCellContainerProps, "isAnchor" | "placeholder">
+>) => {
+  if (!isAnchor && placeholder) {
+    return placeholder
+  }
+
+  return children
+}

package/src/components/data-grid/components/data-grid-country-select-cell.tsx

@@ -0,0 +1,149 @@
+// Not currently used, re-implement or delete depending on whether there is a need for it in the future.
+
+// import { TrianglesMini } from "@acmekit/icons"
+// import { clx } from "@acmekit/ui"
+// import { ComponentPropsWithoutRef, forwardRef, memo } from "react"
+// import { Controller, ControllerRenderProps } from "react-hook-form"
+
+// import { useCombinedRefs } from "../../../hooks/use-combined-refs"
+// import { countries } from "../../../lib/data/countries"
+// import { useDataGridCell } from "../hooks"
+// import { DataGridCellProps, InputProps } from "../types"
+// import { DataGridCellContainer } from "./data-grid-cell-container"
+
+// export const DataGridCountrySelectCell = <TData, TValue = any>({
+//   field,
+//   context,
+// }: DataGridCellProps<TData, TValue>) => {
+//   const { control, renderProps } = useDataGridCell({
+//     field,
+//     context,
+//     type: "select",
+//   })
+
+//   const { container, input } = renderProps
+
+//   return (
+//     <Controller
+//       control={control}
+//       name={field}
+//       render={({ field: { value, onChange: _, disabled, ...field } }) => {
+//         return (
+//           <DataGridCellContainer
+//             {...container}
+//             placeholder={
+//               <DataGridCountryCellPlaceholder
+//                 value={value}
+//                 disabled={disabled}
+//                 attributes={attributes}
+//               />
+//             }
+//           >
+//             <MemoizedDataGridCountryCell
+//               value={value}
+//               onChange={(e) => onChange(e.target.value, value)}
+//               disabled={disabled}
+//               {...attributes}
+//               {...field}
+//             />
+//           </DataGridCellContainer>
+//         )
+//       }}
+//     />
+//   )
+// }
+
+// const Inner = ({
+//   field,
+//   inputProps,
+// }: {
+//   field: ControllerRenderProps<any, string>
+//   inputProps: InputProps
+// }) => {
+//   const { value, onChange, onBlur, ref, ...rest } = field
+//   const { ref: inputRef, onBlur: onInputBlur, ...input } = inputProps
+
+//   const combinedRefs = useCombinedRefs(inputRef, ref)
+
+//   return (
+//     <MemoizedDataGridCountryCell
+//       value={value}
+//       onChange={(e) => onChange(e.target.value, value)}
+//       onBlur={() => {
+//         onBlur()
+//         onInputBlur()
+//       }}
+//       ref={combinedRefs}
+//       {...input}
+//       {...rest}
+//     />
+//   )
+// }
+
+// const DataGridCountryCellPlaceholder = ({
+//   value,
+//   disabled,
+//   attributes,
+// }: {
+//   value?: string
+//   disabled?: boolean
+//   attributes: Record<string, any>
+// }) => {
+//   const country = countries.find((c) => c.iso_2 === value)
+
+//   return (
+//     <div className="relative flex size-full" {...attributes}>
+//       <TrianglesMini
+//         className={clx(
+//           "text-ui-fg-muted transition-fg pointer-events-none absolute right-4 top-1/2 -translate-y-1/2",
+//           {
+//             "text-ui-fg-disabled": disabled,
+//           }
+//         )}
+//       />
+//       <div
+//         className={clx(
+//           "txt-compact-small w-full appearance-none bg-transparent px-4 py-2.5 outline-none"
+//         )}
+//       >
+//         {country?.display_name}
+//       </div>
+//     </div>
+//   )
+// }
+
+// const DataGridCountryCellImpl = forwardRef<
+//   HTMLSelectElement,
+//   ComponentPropsWithoutRef<"select">
+// >(({ disabled, className, ...props }, ref) => {
+//   return (
+//     <div className="relative flex size-full">
+//       <TrianglesMini
+//         className={clx(
+//           "text-ui-fg-muted transition-fg pointer-events-none absolute right-4 top-1/2 -translate-y-1/2",
+//           {
+//             "text-ui-fg-disabled": disabled,
+//           }
+//         )}
+//       />
+//       <select
+//         {...props}
+//         ref={ref}
+//         className={clx(
+//           "txt-compact-small w-full appearance-none bg-transparent px-4 py-2.5 outline-none",
+//           className
+//         )}
+//       >
+//         <option value=""></option>
+//         {countries.map((country) => (
+//           <option key={country.iso_2} value={country.iso_2}>
+//             {country.display_name}
+//           </option>
+//         ))}
+//       </select>
+//     </div>
+//   )
+// })
+// DataGridCountryCellImpl.displayName = "DataGridCountryCell"
+
+// const MemoizedDataGridCountryCell = memo(DataGridCountryCellImpl)

package/src/components/data-grid/components/data-grid-currency-cell.tsx

@@ -0,0 +1,140 @@
+import CurrencyInput, {
+  CurrencyInputProps,
+  formatValue,
+} from "react-currency-input-field"
+import { Controller, ControllerRenderProps } from "react-hook-form"
+
+import { useCallback, useEffect, useState } from "react"
+import { useCombinedRefs } from "../../../hooks/use-combined-refs"
+import { CurrencyInfo, currencies } from "../../../lib/data/currencies"
+import { useDataGridCell, useDataGridCellError } from "../hooks"
+import { DataGridCellProps, InputProps } from "../types"
+import { DataGridCellContainer } from "./data-grid-cell-container"
+
+interface DataGridCurrencyCellProps<TData, TValue = any>
+  extends DataGridCellProps<TData, TValue> {
+  code: string
+}
+
+export const DataGridCurrencyCell = <TData, TValue = any>({
+  context,
+  code,
+}: DataGridCurrencyCellProps<TData, TValue>) => {
+  const { field, control, renderProps } = useDataGridCell({
+    context,
+  })
+  const errorProps = useDataGridCellError({ context })
+
+  const { container, input } = renderProps
+
+  const currency = currencies[code.toUpperCase()]
+
+  return (
+    <Controller
+      control={control}
+      name={field}
+      render={({ field }) => {
+        return (
+          <DataGridCellContainer {...container} {...errorProps}>
+            <Inner field={field} inputProps={input} currencyInfo={currency} />
+          </DataGridCellContainer>
+        )
+      }}
+    />
+  )
+}
+
+const Inner = ({
+  field,
+  inputProps,
+  currencyInfo,
+}: {
+  field: ControllerRenderProps<any, string>
+  inputProps: InputProps
+  currencyInfo: CurrencyInfo
+}) => {
+  const { value, onChange: _, onBlur, ref, ...rest } = field
+  const {
+    ref: inputRef,
+    onBlur: onInputBlur,
+    onFocus,
+    onChange,
+    ...attributes
+  } = inputProps
+
+  const formatter = useCallback(
+    (value?: string | number) => {
+      const ensuredValue =
+        typeof value === "number" ? value.toString() : value || ""
+
+      return formatValue({
+        value: ensuredValue,
+        decimalScale: currencyInfo.decimal_digits,
+        disableGroupSeparators: true,
+        decimalSeparator: ".",
+      })
+    },
+    [currencyInfo]
+  )
+
+  const [localValue, setLocalValue] = useState<string | number>(value || "")
+
+  const handleValueChange: CurrencyInputProps["onValueChange"] = (
+    value,
+    _name,
+    _values
+  ) => {
+    if (!value) {
+      setLocalValue("")
+      return
+    }
+
+    setLocalValue(value)
+  }
+
+  useEffect(() => {
+    let update = value
+
+    // The component we use is a bit fidly when the value is updated externally
+    // so we need to ensure a format that will result in the cell being formatted correctly
+    // according to the users locale on the next render.
+    if (!isNaN(Number(value))) {
+      update = formatter(update)
+    }
+
+    setLocalValue(update)
+  }, [value, formatter])
+
+  const combinedRed = useCombinedRefs(inputRef, ref)
+
+  return (
+    <div className="relative flex size-full items-center">
+      <span
+        className="txt-compact-small text-ui-fg-muted pointer-events-none absolute left-0 w-fit min-w-4"
+        aria-hidden
+      >
+        {currencyInfo.symbol_native}
+      </span>
+      <CurrencyInput
+        {...rest}
+        {...attributes}
+        ref={combinedRed}
+        className="txt-compact-small w-full flex-1 cursor-default appearance-none bg-transparent pl-8 text-right outline-none"
+        value={localValue || undefined}
+        onValueChange={handleValueChange}
+        formatValueOnBlur
+        onBlur={() => {
+          onBlur()
+          onInputBlur()
+
+          onChange(localValue, value)
+        }}
+        onFocus={onFocus}
+        decimalScale={currencyInfo.decimal_digits}
+        decimalsLimit={currencyInfo.decimal_digits}
+        autoComplete="off"
+        tabIndex={-1}
+      />
+    </div>
+  )
+}

package/src/components/data-grid/components/data-grid-duplicate-cell.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react"
+import { useDataGridDuplicateCell } from "../hooks"
+
+interface DataGridDuplicateCellProps<TValue> {
+  duplicateOf: string
+  children?: ReactNode | ((props: { value: TValue }) => ReactNode)
+}
+export const DataGridDuplicateCell = <TValue,>({
+  duplicateOf,
+  children,
+}: DataGridDuplicateCellProps<TValue>) => {
+  const { watchedValue } = useDataGridDuplicateCell({ duplicateOf })
+
+  return (
+    <div className="bg-ui-bg-base txt-compact-small text-ui-fg-subtle flex size-full cursor-not-allowed items-center justify-between overflow-hidden px-4 py-2.5 outline-none">
+      {typeof children === "function"
+        ? children({ value: watchedValue })
+        : children}
+    </div>
+  )
+}