@lateralus-ai/shipping-ui 1.4.15 → 2.0.0-dev.0

package/src/components/Header.tsx

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+export type HeaderVariant = "standard" | "nested";
+
+export type HeaderProps = {
+  variant?: HeaderVariant;
+  title: string;
+  actions?: ReactNode;
+  className?: string;
+};
+
+export const Header = ({
+  variant = "standard",
+  title,
+  actions,
+  className,
+}: HeaderProps) => (
+  <header
+    data-variant={variant}
+    className={cn(
+      "flex w-full items-center justify-between gap-4",
+      variant === "standard" && "border-b border-divider-primary px-6 py-4",
+      variant === "nested" && "px-4 py-3",
+      className,
+    )}
+  >
+    <h2
+      className={cn(
+        "text-display-on-light-primary",
+        variant === "standard" && "font-heading text-heading",
+        variant === "nested" && "text-subheader-em",
+      )}
+    >
+      {title}
+    </h2>
+    {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+  </header>
+);

package/src/components/Input.tsx

@@ -0,0 +1,69 @@
+import { type InputHTMLAttributes, useId } from "react";
+import { cn } from "../utils/cn";
+
+export type InputState = "idle" | "hover" | "disabled" | "edit";
+
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  error?: string;
+  state?: InputState;
+  onChange?: (value: string) => void;
+};
+
+const fieldStyles: Record<InputState, string> = {
+  idle: "border-divider-primary bg-white",
+  hover: "border-grey-300 bg-white",
+  disabled: "border-divider-primary bg-grey-50 text-display-on-light-quaternary cursor-not-allowed",
+  edit: "border-accent-on-light bg-white ring-1 ring-accent-on-light",
+};
+
+export const Input = ({
+  label,
+  value = "",
+  placeholder,
+  error,
+  state = "idle",
+  onChange,
+  disabled,
+  className,
+  id: idProp,
+  ...props
+}: InputProps) => {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const isDisabled = disabled ?? state === "disabled";
+  const visualState = isDisabled ? "disabled" : state;
+  const hasError = Boolean(error);
+
+  return (
+    <div className={cn("flex w-full flex-col gap-1", className)}>
+      {label && (
+        <label htmlFor={id} className="text-caption-2-em text-display-on-light-secondary">
+          {label}
+        </label>
+      )}
+      <input
+        id={id}
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        disabled={isDisabled}
+        data-state={visualState}
+        onChange={(event) => onChange?.(event.target.value)}
+        className={cn(
+          "h-10 w-full rounded-control border px-3 text-body text-display-on-light-primary outline-none transition-colors placeholder:text-display-on-light-quaternary",
+          "hover:border-grey-300 focus:border-accent-on-light focus:ring-1 focus:ring-accent-on-light",
+          "data-[state=hover]:border-grey-300",
+          "data-[state=edit]:border-accent-on-light data-[state=edit]:ring-1 data-[state=edit]:ring-accent-on-light",
+          "data-[state=disabled]:border-divider-primary data-[state=disabled]:bg-grey-50 data-[state=disabled]:text-display-on-light-quaternary",
+          hasError && "border-red-500 ring-1 ring-red-500",
+          !hasError && fieldStyles[visualState],
+        )}
+        {...props}
+      />
+      {error && <span className="text-footnote text-red-500">{error}</span>}
+    </div>
+  );
+};

package/src/components/InputType.tsx

@@ -0,0 +1,76 @@
+import { cn } from "../utils/cn";
+
+export type InputTypeKind = "text" | "binary";
+export type InputTypeState = "on" | "off";
+
+export type InputTypeProps = {
+  type: InputTypeKind;
+  state: InputTypeState;
+  onChange?: (state: InputTypeState) => void;
+  disabled?: boolean;
+  className?: string;
+};
+
+const labels: Record<InputTypeKind, { on: string; off: string }> = {
+  text: { on: "On", off: "Off" },
+  binary: { on: "Yes", off: "No" },
+};
+
+export const InputType = ({
+  type,
+  state,
+  onChange,
+  disabled = false,
+  className,
+}: InputTypeProps) => {
+  const isOn = state === "on";
+  const { on: onLabel, off: offLabel } = labels[type];
+
+  const toggle = (next: InputTypeState) => {
+    if (disabled) return;
+    onChange?.(next);
+  };
+
+  return (
+    <div
+      role="group"
+      aria-label={`${type} input type`}
+      data-type={type}
+      data-state={state}
+      className={cn(
+        "inline-flex rounded-control border border-divider-primary bg-white p-0.5",
+        disabled && "opacity-50",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        disabled={disabled}
+        aria-pressed={!isOn}
+        onClick={() => toggle("off")}
+        className={cn(
+          "min-w-12 rounded-[6px] px-3 py-1.5 text-caption-2 transition-colors",
+          !isOn
+            ? "bg-grey-900 text-display-on-dark-primary"
+            : "text-display-on-light-secondary hover:bg-grey-100",
+        )}
+      >
+        {offLabel}
+      </button>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-pressed={isOn}
+        onClick={() => toggle("on")}
+        className={cn(
+          "min-w-12 rounded-[6px] px-3 py-1.5 text-caption-2 transition-colors",
+          isOn
+            ? "bg-grey-900 text-display-on-dark-primary"
+            : "text-display-on-light-secondary hover:bg-grey-100",
+        )}
+      >
+        {onLabel}
+      </button>
+    </div>
+  );
+};

package/src/components/ModalPanel.tsx

@@ -1,48 +1,33 @@
-import { IconButton } from "@material-tailwind/react";
-import XIcon from "./icons/XIcon";
-import { PropsWithChildren } from "react";
+import { type PropsWithChildren, type ReactNode } from "react";
+import { IconButton } from "../primitives/IconButton";
+import { ClearIcon } from "../icons";
+import { cn } from "../utils/cn";
 
-interface HeaderProps {
+type HeaderProps = {
   onClose: () => void;
-  right?: React.ReactNode;
-}
+  right?: ReactNode;
+};
 
-const Header = ({
-  onClose,
-  right,
-  children,
-}: PropsWithChildren<HeaderProps>) => {
-  return (
-    <div className="bg-gray-50 flex gap-2 items-center px-2 py-3 rounded-t-xl">
-      <div className="grow text-subheader-em">{children}</div>
-      <div className="flex items-center gap-4">
-        {right}
-        <IconButton
-          variant="text"
-          size="sm"
-          color="gray"
-          className="rounded-full"
-          onClick={onClose}
-        >
-          <XIcon className="size-4 text-gray-600" />
-        </IconButton>
-      </div>
+const Header = ({ onClose, right, children }: PropsWithChildren<HeaderProps>) => (
+  <div className="flex items-center gap-2 rounded-t-xl bg-background-secondary px-2 py-3">
+    <div className="grow text-subheader-em text-display-on-light-primary">{children}</div>
+    <div className="flex items-center gap-4">
+      {right}
+      <IconButton hierarchy="quaternary" size="small" aria-label="Close" onClick={onClose}>
+        <ClearIcon size="small" />
+      </IconButton>
     </div>
-  );
-};
+  </div>
+);
 
-interface BodyProps {
+type BodyProps = {
   className?: string;
-}
-
-const Body = ({ children, className = "" }: PropsWithChildren<BodyProps>) => {
-  return (
-    <div className={`w-full overflow-auto ${className}`}>
-      {children}
-    </div>
-  );
 };
 
+const Body = ({ children, className }: PropsWithChildren<BodyProps>) => (
+  <div className={cn("w-full overflow-auto", className)}>{children}</div>
+);
+
 export const ModalPanel = {
   Header,
   Body,

package/src/components/PdfViewer/ImageViewer.tsx

@@ -1,25 +1,27 @@
-import { IconButton, ButtonGroup, Tooltip } from "@material-tailwind/react"
-import { ModalPanel } from "../ModalPanel"
-import ExpandIcon from "../icons/ExpandIcon"
-import { Icon } from "@iconify/react"
-import { ChangeEvent, useEffect, useState } from "react"
-import { useZoom } from "./useZoom"
-import { useRotation } from "./useRotation"
-import { usePanning } from "./usePanning"
-import { usePageManagement } from "./usePageManagement"
-import { cn } from "../../utils/cn"
+import { IconButton } from "../../primitives/IconButton";
+import { ChevronIcon, MinusIcon, PlusIcon, ExpandIcon } from "../../icons";
+import { ModalPanel } from "../ModalPanel";
+import { type ChangeEvent, useEffect, useState } from "react";
+import { useZoom } from "./useZoom";
+import { useRotation } from "./useRotation";
+import { usePanning } from "./usePanning";
+import { usePageManagement } from "./usePageManagement";
+import { cn } from "../../utils/cn";
 
-interface ImageViewerProps {
-  className?: string
-  canvasClassName?: string
-  documentUrl?: string
-  mainCanvasClassname?: string
-  initialPage?: number
-  onClose: () => void
-  totalPages: number
-  getImageSrc: (page: number) => string | Promise<string>
-  title?: string
-}
+type ImageViewerProps = {
+  className?: string;
+  canvasClassName?: string;
+  documentUrl?: string;
+  mainCanvasClassname?: string;
+  initialPage?: number;
+  onClose: () => void;
+  totalPages: number;
+  getImageSrc: (page: number) => string | Promise<string>;
+  title?: string;
+};
+
+const toolbarButtonClass =
+  "flex h-8 w-8 items-center justify-center rounded-control border border-divider-primary bg-white text-display-on-light-secondary hover:bg-background-secondary disabled:opacity-50";
 
 export const ImageViewer = ({
   className,
@@ -32,180 +34,117 @@ export const ImageViewer = ({
   documentUrl,
   title = "PDF Viewer",
 }: ImageViewerProps) => {
-  const [zoom, zoomActions] = useZoom()
-  const [rotation, rotationActions] = useRotation()
-  const [{ pan, isDragging }, panActions] = usePanning()
-  const [{ currentPage }, pageActions] = usePageManagement(
-    totalPages,
-    initialPage
-  )
-  const [imageSrc, setImageSrc] = useState<string>(() => {
-    const initialResult = getImageSrc(currentPage)
-    return typeof initialResult === "string" ? initialResult : ""
-  })
+  const [zoom, zoomActions] = useZoom();
+  const [rotation, rotationActions] = useRotation();
+  const [{ pan, isDragging }, panActions] = usePanning();
+  const [{ currentPage }, pageActions] = usePageManagement(totalPages, initialPage);
+  const [imageSrc, setImageSrc] = useState<string>("");
 
   useEffect(() => {
-    let isActive = true
-
-    const loadImage = async () => {
-      const result = getImageSrc(currentPage)
-      const resolvedSrc = await Promise.resolve(result)
-
-      if (isActive) {
-        setImageSrc(resolvedSrc)
-      }
-    }
+    const load = async () => {
+      const src = await getImageSrc(currentPage);
+      setImageSrc(src);
+    };
+    load();
+  }, [currentPage, getImageSrc]);
 
-    void loadImage()
-
-    return () => {
-      isActive = false
-    }
-  }, [currentPage, getImageSrc])
-
-  const rightButtons = (
-    <IconButton variant="text" color="gray">
-      <a href={documentUrl} target="_blank" rel="noopener noreferrer">
-        <ExpandIcon className="size-4" />
-      </a>
-    </IconButton>
-  )
+  const handleOpen = () => {
+    if (!documentUrl) return;
+    window.open(documentUrl, "_blank", "noopener,noreferrer");
+  };
 
   return (
-    <div className={cn("shadow rounded-t-lg flex flex-col h-full", className)}>
-      <ModalPanel.Header onClose={onClose} right={rightButtons}>
+    <div className={cn("flex h-full flex-col rounded-t-lg shadow-raise2", className)}>
+      <ModalPanel.Header
+        onClose={onClose}
+        right={
+          documentUrl ? (
+            <IconButton hierarchy="quaternary" size="small" aria-label="Open" onClick={handleOpen}>
+              <ExpandIcon size="small" />
+            </IconButton>
+          ) : undefined
+        }
+      >
         {title}
       </ModalPanel.Header>
 
-      <div className="flex flex-col h-full justify-between">
-        <div className="grid relative h-full">
-          <div
-            className={`overflow-hidden col-start-1 row-start-1 bg-gray-200 h-full relative`}
-            onMouseMove={panActions.handleMouseMove}
-            onMouseUp={panActions.handleMouseUp}
-            onMouseLeave={panActions.handleMouseUp}
-            onWheel={zoomActions.handleWheel}
-          >
-            <div
-              className={mainCanvasClassname}
+      <div className={cn("grid h-full grow overflow-hidden", canvasClassName)}>
+        <div
+          className={cn(
+            "col-start-1 row-start-1 flex items-center justify-center overflow-hidden bg-background-tertiary p-8",
+            isDragging ? "cursor-grabbing" : "cursor-grab",
+            mainCanvasClassname,
+          )}
+          onMouseDown={panActions.handleMouseDown}
+          onMouseMove={panActions.handleMouseMove}
+          onMouseUp={panActions.handleMouseUp}
+          onMouseLeave={panActions.handleMouseUp}
+        >
+          {imageSrc && (
+            <img
+              src={imageSrc}
+              alt={`Page ${currentPage}`}
               style={{
-                transform: `translate(${pan.x}px, ${pan.y}px)`,
-                cursor: isDragging ? "grabbing" : "grab",
-                width: "100%",
-                height: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
+                transform: `translate(${pan.x}px, ${pan.y}px) rotate(${rotation}deg) scale(${zoom / 100})`,
+              }}
+              className="max-w-full"
+              draggable={false}
+            />
+          )}
+        </div>
+
+        <div className="z-10 col-start-1 row-start-1 flex items-center justify-between gap-3 self-start bg-background-secondary p-2 shadow">
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              className={toolbarButtonClass}
+              onClick={pageActions.prevPage}
+              disabled={currentPage === 1}
+              aria-label="Previous page"
+            >
+              <ChevronIcon direction="left" size="small" />
+            </button>
+            <input
+              className="h-8 w-14 rounded-control border border-divider-primary bg-white text-center text-caption-2"
+              value={currentPage}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                const page = parseInt(e.target.value, 10);
+                if (!isNaN(page)) pageActions.goToPage(page);
               }}
-              onMouseDown={panActions.handleMouseDown}
+              type="number"
+              min={1}
+              max={totalPages}
+            />
+            <span className="px-2 text-caption-2">of {totalPages}</span>
+            <button
+              type="button"
+              className={toolbarButtonClass}
+              onClick={pageActions.nextPage}
+              disabled={currentPage === totalPages}
+              aria-label="Next page"
             >
-              <div
-                style={{
-                  transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
-                  transformOrigin: "center",
-                  transition: isDragging ? "none" : "transform 0.3s ease",
-                }}
-              >
-                {imageSrc ? (
-                  <img
-                    src={imageSrc}
-                    style={{ userSelect: "none", pointerEvents: "none" }}
-                  />
-                ) : null}
-              </div>
-            </div>
+              <ChevronIcon direction="right" size="small" />
+            </button>
           </div>
-
-          <div
-            className={`${canvasClassName} col-start-1 row-start-1 self-end p-4 flex gap-2 justify-between w-full z-10`}
-          >
-            <ButtonGroup className="divide-x-0 h-[52px]">
-              <IconButton
-                variant="filled"
-                color="white"
-                className="py-[26px]"
-                onClick={zoomActions.zoomOut}
-              >
-                <Icon icon="lucide:minus" />
-              </IconButton>
-              <Tooltip content="Click to reset zoom and pan">
-                <button
-                  className="!bg-white text-center cursor-pointer w-[60px]"
-                  onClick={() => {
-                    zoomActions.reset()
-                    panActions.reset()
-                  }}
-                >
-                  {zoom}%
-                </button>
-              </Tooltip>
-              <IconButton
-                variant="filled"
-                color="white"
-                className="py-[26px]"
-                onClick={zoomActions.zoomIn}
-              >
-                <Icon icon="lucide:plus" />
-              </IconButton>
-            </ButtonGroup>
-            <ButtonGroup className="divide-x-0 h-[52px]">
-              <IconButton
-                variant="filled"
-                color="white"
-                className="py-[26px]"
-                onClick={rotationActions.rotateClockwise}
-              >
-                <Icon icon="lucide:iteration-cw" />
-              </IconButton>
-
-              <IconButton
-                variant="filled"
-                color="white"
-                className="py-[26px]"
-                onClick={rotationActions.rotateCounterClockwise}
-              >
-                <Icon icon="lucide:iteration-ccw" />
-              </IconButton>
-            </ButtonGroup>
-            <ButtonGroup className="divide-x-0 ">
-              <IconButton
-                variant="filled"
-                color="white"
-                className="py-[26px]"
-                onClick={pageActions.prevPage}
-                disabled={currentPage === 1}
-              >
-                <Icon icon="lucide:chevron-left" />
-              </IconButton>
-              <input
-                className="bg-white pl-4 flex items-center w-[50px] text-center focus:outline-none w-[60px]"
-                value={currentPage}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  const page = parseInt(e.target.value)
-                  if (!isNaN(page)) {
-                    pageActions.goToPage(page)
-                  }
-                }}
-                type="number"
-                min="1"
-                max={totalPages}
-              />
-              <div className="flex items-center bg-white px-2">
-                of {totalPages}
-              </div>
-              <IconButton
-                variant="filled"
-                color="white"
-                className="py-[26px]"
-                onClick={pageActions.nextPage}
-                disabled={currentPage === totalPages}
-              >
-                <Icon icon="lucide:chevron-right" />
-              </IconButton>
-            </ButtonGroup>
+          <div className="flex items-center gap-1">
+            <button type="button" className={toolbarButtonClass} onClick={zoomActions.zoomOut} aria-label="Zoom out">
+              <MinusIcon size="small" />
+            </button>
+            <span className="w-14 text-center text-caption-2">{zoom}%</span>
+            <button type="button" className={toolbarButtonClass} onClick={zoomActions.zoomIn} aria-label="Zoom in">
+              <PlusIcon size="small" />
+            </button>
+            <button
+              type="button"
+              className={toolbarButtonClass}
+              onClick={rotationActions.rotateCounterClockwise}
+              aria-label="Rotate"
+            >
+              <ChevronIcon direction="left" size="small" />
+            </button>
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};