@lateralus-ai/shipping-ui 1.0.4

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@lateralus-ai/shipping-ui",
+  "version": "1.0.4",
+  "description": "Shared UI theme and components for Lateralus shipping applications",
+  "main": "dist/index.cjs",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "lib",
+    "src",
+    "tailwind.config.js"
+  ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "npx rimraf ./dist && vite build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "release": "npx release-it"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lateralus-ai/shipping-ui.git"
+  },
+  "keywords": [
+    "tailwind",
+    "material-tailwind",
+    "theme",
+    "shipping",
+    "storybook"
+  ],
+  "author": "Lateralus AI",
+  "license": "UNLICENSED",
+  "bugs": {
+    "url": "https://github.com/lateralus-ai/shipping-ui/issues"
+  },
+  "homepage": "https://github.com/lateralus-ai/shipping-ui#readme",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@material-tailwind/react": "^2.1.10",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@uidotdev/usehooks": "^2.4.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "ai": "^5.0.59",
+    "autoprefixer": "^10.4.16",
+    "clsx": "^1.2.0",
+    "postcss": "^8.4.32",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "release-it": "^19.0.5",
+    "storybook": "^8.2.9",
+    "tailwind-merge": "^1.9.0",
+    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-radix": "^3.0.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-textarea-autosize": "^8.5.9"
+  },
+  "dependencies": {
+    "@iconify/react": "^6.0.2",
+    "@react-hooks-library/core": "^0.6.2",
+    "react-pdf": "^10.1.0",
+    "react-router": "^7.9.3"
+  }
+}

package/src/components/HelloWorld.tsx

@@ -0,0 +1,3 @@
+export const HelloWorld = () => {
+  return <div className="bg-red-800 text-white p-2">Hello world</div>;
+};

package/src/components/InputPrompt.tsx

@@ -0,0 +1,96 @@
+import { IconButton, Tooltip } from "@material-tailwind/react";
+import { useState, type KeyboardEvent, type ReactNode } from "react";
+import TextareaAutosize from "react-textarea-autosize";
+import { cn } from "../utils/cn";
+import SendArrowIcon from "./icons/SendArrowIcon";
+import SendArrowIconGreen from "./icons/SendArrowIconGreen";
+
+interface SubmitButtonProps extends React.ComponentProps<typeof IconButton> {
+  tooltipContent?: string;
+  className?: string;
+}
+
+export const SubmitButton: React.FC<SubmitButtonProps> = ({
+  tooltipContent = "Send message",
+  className,
+  ...props
+}) => {
+  const [hover, setHover] = useState(false);
+
+  return (
+    <Tooltip content={tooltipContent}>
+      <IconButton
+        variant="text"
+        color="gray"
+        className={cn(className, "hover:rounded-lg hover:bg-gray-100")}
+        type="submit"
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        {...props}
+      >
+        {hover ? (
+          <SendArrowIconGreen className="size-6 " />
+        ) : (
+          <SendArrowIcon className="size-6 " />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+interface TextareaProps extends React.ComponentProps<typeof TextareaAutosize> {
+  onSubmit?: () => void;
+}
+
+export const Textarea: React.FC<TextareaProps> = ({
+  onSubmit = () => {},
+  ...props
+}) => {
+  return (
+    <TextareaAutosize
+      autoFocus
+      placeholder="Write your message here"
+      className="pl-1 block w-full focus:outline-none max-h-32 resize-none placeholder:text-gray-400"
+      onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          onSubmit();
+        }
+      }}
+      {...props}
+    />
+  );
+};
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  bottom?: ReactNode;
+  right?: ReactNode;
+  top?: ReactNode;
+  textArea?: ReactNode;
+}
+
+export const Container: React.FC<ContainerProps> = ({
+  bottom,
+  right,
+  top,
+  textArea = <Textarea />,
+  ...props
+}) => {
+  return (
+    <div
+      className="border gap-2 rounded-lg bg-white shadow-[0px_2px_2px_0px_#0000000A,0px_8px_8px_-8px_#0000000A] border-gray-100"
+      {...props}
+    >
+      {top}
+
+      <div className="flex gap-2 p-4 rounded-lg bg-white">
+        <div className="grow flex flex-col items-start justify-center">
+          {textArea}
+          {bottom}
+        </div>
+
+        <div className="shrink flex items-end justify-end">{right}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/ModalPanel.tsx

@@ -0,0 +1,31 @@
+import { IconButton } from "@material-tailwind/react";
+import XIcon from "./icons/XIcon";
+
+interface HeaderProps {
+  onClose: () => void;
+  right?: React.ReactNode;
+}
+
+const Header = ({ onClose, right, children }: 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>
+    </div>
+  );
+};
+
+export const ModalPanel = {
+  Header,
+};

package/src/components/PdfViewer/ImageViewer.tsx

@@ -0,0 +1,167 @@
+import { IconButton, ButtonGroup, Tooltip } from "@material-tailwind/react";
+import { ModalPanel } from "../ModalPanel";
+import ExpandIcon from "../icons/ExpandIcon";
+import { Icon } from "@iconify/react";
+import { ChangeEvent } from "react";
+import { useZoom } from "./useZoom";
+import { useRotation } from "./useRotation";
+import { usePanning } from "./usePanning";
+import { usePageManagement } from "./usePageManagement";
+
+interface ImageViewerProps {
+  onClose: () => void;
+  totalPages: number;
+  getImageSrc: (page: number) => string;
+  title: string;
+}
+
+export const ImageViewer = ({
+  onClose,
+  totalPages,
+  getImageSrc,
+  title = "PDF Viewer",
+}: ImageViewerProps) => {
+  const [zoom, zoomActions] = useZoom();
+  const [rotation, rotationActions] = useRotation();
+  const [{ pan, isDragging }, panActions] = usePanning();
+  const [currentPage, pageActions] = usePageManagement(totalPages);
+
+  const rightButtons = (
+    <IconButton variant="text" color="gray">
+      <ExpandIcon className="size-4" />
+    </IconButton>
+  );
+
+  return (
+    <div className="shadow rounded-t-lg">
+      <ModalPanel.Header onClose={onClose} right={rightButtons}>
+        {title}
+      </ModalPanel.Header>
+
+      <div className="grid">
+        <div className="grid relative">
+          <div
+            className="overflow-hidden col-start-1 row-start-1 bg-gray-200 h-[600px] relative"
+            onMouseMove={panActions.handleMouseMove}
+            onMouseUp={panActions.handleMouseUp}
+            onMouseLeave={panActions.handleMouseUp}
+            onWheel={zoomActions.handleWheel}
+          >
+            <div
+              style={{
+                transform: `translate(${pan.x}px, ${pan.y}px)`,
+                cursor: isDragging ? "grabbing" : "grab",
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+              onMouseDown={panActions.handleMouseDown}
+            >
+              <div
+                style={{
+                  transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
+                  transformOrigin: "center",
+                  transition: isDragging ? "none" : "transform 0.3s ease",
+                }}
+              >
+                <img
+                  src={getImageSrc(currentPage)}
+                  style={{ userSelect: "none", pointerEvents: "none" }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="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>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/PdfViewer/PdfViewer.tsx

@@ -0,0 +1,53 @@
+import { useRef } from "react";
+import { IconButton } from "@material-tailwind/react";
+import { ModalPanel } from "../ModalPanel";
+import ExpandIcon from "../icons/ExpandIcon";
+import { useRefDimensions } from "./useRefDimensions";
+
+interface PdfViewerProps {
+  onClose: () => void;
+  src: string;
+  title: string;
+}
+
+export const PdfViewer = ({
+  onClose,
+  src,
+  title = "PDF Viewer",
+}: PdfViewerProps) => {
+  const containerRef = useRef(null);
+  const dimensions = useRefDimensions(containerRef);
+
+  const rightButtons = (
+    <IconButton variant="text" color="gray">
+      <a href={src} target="_blank" rel="noopener noreferrer">
+        <ExpandIcon className="size-4" />
+      </a>
+    </IconButton>
+  );
+
+  return (
+    <div className="shadow rounded-t-lg">
+      <ModalPanel.Header onClose={onClose} right={rightButtons}>
+        {title}
+      </ModalPanel.Header>
+
+      <div className="grid">
+        <div className="grid relative">
+          <div
+            ref={containerRef}
+            className="overflow-hidden col-start-1 row-start-1 bg-gray-200 h-[600px] relative"
+          >
+            <embed
+              src={`${src}#view=FitH&navpanes=0&scrollbar=0`}
+              type="application/pdf"
+              width={dimensions.width}
+              height={dimensions.height}
+              style={{ border: "none" }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/PdfViewer/index.ts

@@ -0,0 +1,2 @@
+export * from "./ImageViewer";
+export * from "./PdfViewer";

package/src/components/PdfViewer/usePageManagement.ts

@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export const usePageManagement = (totalPages: number = 1) => {
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const actions = {
+    nextPage: () => setCurrentPage((prev) => Math.min(prev + 1, totalPages)),
+    prevPage: () => setCurrentPage((prev) => Math.max(prev - 1, 1)),
+    goToPage: (page: number) =>
+      setCurrentPage(Math.max(1, Math.min(page, totalPages))),
+  };
+
+  return [currentPage, actions] as const;
+};

package/src/components/PdfViewer/usePanning.ts

@@ -0,0 +1,42 @@
+import { useState, MouseEvent } from "react";
+
+interface PanState {
+  x: number;
+  y: number;
+}
+
+export const usePanning = () => {
+  const [pan, setPan] = useState<PanState>({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [dragStart, setDragStart] = useState<PanState>({ x: 0, y: 0 });
+
+  const handleMouseDown = (e: MouseEvent) => {
+    setIsDragging(true);
+    setDragStart({
+      x: e.clientX - pan.x,
+      y: e.clientY - pan.y,
+    });
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isDragging) return;
+
+    setPan({
+      x: e.clientX - dragStart.x,
+      y: e.clientY - dragStart.y,
+    });
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const actions = {
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    reset: () => setPan({ x: 0, y: 0 }),
+  };
+
+  return [{ pan, isDragging }, actions] as const;
+};

package/src/components/PdfViewer/useRefDimensions.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export const useRefDimensions = (ref) => {
+  const [dimensions, setDimensions] = useState({ width: 1, height: 2 });
+
+  useEffect(() => {
+    if (ref.current) {
+      const { current } = ref;
+      const boundingRect = current.getBoundingClientRect();
+      const { width, height } = boundingRect;
+      setDimensions({ width: Math.round(width), height: Math.round(height) });
+    }
+  }, [ref]);
+
+  return dimensions;
+};

package/src/components/PdfViewer/useRotation.ts

@@ -0,0 +1,13 @@
+import { useState } from "react";
+
+export const useRotation = () => {
+  const [rotation, setRotation] = useState<number>(0);
+
+  const actions = {
+    rotateClockwise: () => setRotation((prev) => (prev + 90) % 360),
+    rotateCounterClockwise: () =>
+      setRotation((prev) => (prev - 90 + 360) % 360),
+  };
+
+  return [rotation, actions] as const;
+};

package/src/components/PdfViewer/useZoom.ts

@@ -0,0 +1,26 @@
+import { useState, WheelEvent } from "react";
+
+export const useZoom = (
+  initialZoom = 100,
+  minZoom = 50,
+  maxZoom = 990,
+  step = 10,
+) => {
+  const [zoom, setZoom] = useState<number>(initialZoom);
+
+  const actions = {
+    zoomIn: () => setZoom((prev) => Math.min(prev + step, maxZoom)),
+    zoomOut: () => setZoom((prev) => Math.max(prev - step, minZoom)),
+    reset: () => setZoom(initialZoom),
+    zoomToValue: (value: number) =>
+      setZoom(Math.max(minZoom, Math.min(value, maxZoom))),
+  };
+
+  const handleWheel = (e: WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -step : step;
+    setZoom((prev) => Math.max(minZoom, Math.min(prev + delta, maxZoom)));
+  };
+
+  return [zoom, { ...actions, handleWheel }] as const;
+};

package/src/components/Sidebar/Button.tsx

@@ -0,0 +1,20 @@
+import { useContext, type ReactNode } from "react";
+import { collapsedContext } from "./Provider";
+
+interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
+  icon?: ReactNode;
+}
+
+export const Button = ({ icon, children, ...props }: ButtonProps) => {
+  const { isCollapsed, isHovered } = useContext(collapsedContext)!;
+
+  return (
+    <button
+      className="flex items-center gap-2 w-full hover:bg-gray-100 text-caption-1-em text-gray-600 hover:text-gray-900 h-[38px] rounded-lg px-2"
+      {...props}
+    >
+      {icon} {(!isCollapsed || isHovered) && children}
+    </button>
+  );
+};

package/src/components/Sidebar/Container.tsx

@@ -0,0 +1,32 @@
+import { useContext, type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import { collapsedContext } from "./Provider";
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+export const Container = ({
+  className,
+  children,
+  ...props
+}: ContainerProps) => {
+  const { isCollapsed, isHovered, setIsHovered } =
+    useContext(collapsedContext)!;
+
+  return (
+    <div
+      className={cn(
+        className,
+        isCollapsed && "shadow-lg",
+        isCollapsed && !isHovered ? "w-auto" : "w-[280px]",
+        "bg-gray-50 p-2 flex flex-col justify-between items-center rounded-lg",
+      )}
+      onMouseEnter={() => isCollapsed && setIsHovered(true)}
+      onMouseLeave={() => isCollapsed && setIsHovered(false)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Sidebar/Item.tsx

@@ -0,0 +1,39 @@
+import { useContext, type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import { collapsedContext } from "./Provider";
+
+interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  icon?: ReactNode;
+  isActive?: boolean;
+  trailing?: ReactNode;
+}
+
+export const Item = ({
+  children,
+  className,
+  icon,
+  isActive,
+  trailing,
+  ...props
+}: ItemProps) => {
+  const { isCollapsed, isHovered } = useContext(collapsedContext)!;
+
+  return (
+    <div
+      className={cn(
+        isActive ? "!text-gray-900" : "!text-gray-600",
+        "flex items-center justify-between w-full hover:bg-gray-100 text-caption-1-em hover:text-gray-900 h-[38px] rounded-lg px-2 cursor-pointer group",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        {icon}
+        {(!isCollapsed || isHovered) && children}
+      </div>
+
+      {(!isCollapsed || isHovered) && trailing}
+    </div>
+  );
+};

package/src/components/Sidebar/Layout.tsx

@@ -0,0 +1,23 @@
+import { Provider } from "./Provider";
+import { Container, type ContainerProps } from "./Container";
+
+interface LayoutProps extends ContainerProps {
+  isCollapsed?: boolean;
+  onSwitchLayout?: (isCollapsed: boolean) => void;
+}
+
+export const Layout = ({
+  className,
+  children,
+  isCollapsed,
+  onSwitchLayout,
+  ...props
+}: LayoutProps) => {
+  return (
+    <Provider isCollapsed={isCollapsed} onSwitchLayout={onSwitchLayout}>
+      <Container className={className} {...props}>
+        {children}
+      </Container>
+    </Provider>
+  );
+};