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

package/src/domain/Workflows/WorkflowForm.tsx

@@ -0,0 +1,40 @@
+import { cn } from "../../utils/cn";
+import { FormIcon } from "../../icons/generated";
+
+export type WorkflowFormState = "idle" | "hover";
+
+export type WorkflowFormProps = {
+  name?: string;
+  description?: string;
+  state?: WorkflowFormState;
+  className?: string;
+};
+
+const stateStyles: Record<WorkflowFormState, string> = {
+  idle: "bg-background-primary",
+  hover: "bg-background-secondary",
+};
+
+export const WorkflowForm = ({
+  name = "Safety Management Form",
+  description = "ISM Code compliance checklist",
+  state = "idle",
+  className,
+}: WorkflowFormProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center gap-4 rounded-control border border-divider-primary px-4 py-3 transition-colors",
+      stateStyles[state],
+      state === "idle" && "hover:bg-background-secondary",
+      className,
+    )}
+  >
+    <span className="flex size-10 shrink-0 items-center justify-center rounded-control bg-background-secondary">
+      <FormIcon size="small" />
+    </span>
+    <div className="min-w-0 flex-1">
+      <p className="text-caption-1-em text-display-on-light-primary">{name}</p>
+      <p className="text-caption-2 text-display-on-light-tertiary">{description}</p>
+    </div>
+  </div>
+);

package/src/domain/Workflows/WorkflowHeader.tsx

@@ -0,0 +1,62 @@
+import { cn } from "../../utils/cn";
+import { Badge } from "../../primitives/Badge";
+import { WorkflowIcon } from "../../icons/generated";
+
+export type WorkflowHeaderWorkflow = "audit-response" | "audit-preparation" | "monthly-forms";
+export type WorkflowHeaderVariant = "created" | "pending";
+
+export type WorkflowHeaderProps = {
+  workflow?: WorkflowHeaderWorkflow;
+  variant?: WorkflowHeaderVariant;
+  title?: string;
+  description?: string;
+  dueDate?: string;
+  className?: string;
+};
+
+const workflowTitles: Record<WorkflowHeaderWorkflow, string> = {
+  "audit-response": "Audit Response",
+  "audit-preparation": "Audit Preparation",
+  "monthly-forms": "Monthly Forms",
+};
+
+export const WorkflowHeader = ({
+  workflow = "audit-response",
+  variant = "created",
+  title,
+  description = "Prepare documentation and assign tasks for the upcoming inspection.",
+  dueDate = "Due 14 Jul 2026",
+  className,
+}: WorkflowHeaderProps) => {
+  const displayTitle = title ?? workflowTitles[workflow];
+  const isPending = variant === "pending";
+
+  return (
+    <div
+      className={cn(
+        "w-full rounded-2xl border border-divider-primary bg-background-primary p-4",
+        className,
+      )}
+    >
+      <div className="flex items-start gap-4">
+        <span className="flex size-[46px] shrink-0 items-center justify-center rounded-control bg-background-secondary">
+          <WorkflowIcon size="large" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 className="text-body-em text-display-on-light-primary">{displayTitle}</h3>
+            <Badge color={isPending ? "orange" : "green"}>
+              {isPending ? "Pending" : "Created"}
+            </Badge>
+          </div>
+          {!isPending && (
+            <>
+              <p className="mt-1 text-caption-2 text-display-on-light-secondary">{description}</p>
+              <p className="mt-2 text-caption-2-em text-display-on-light-tertiary">{dueDate}</p>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/domain/Workflows/WorkflowListItem.tsx

@@ -0,0 +1,45 @@
+import { cn } from "../../utils/cn";
+import { Avatar } from "../../primitives/Avatar";
+import { WorkflowProgress } from "./WorkflowProgress";
+
+export type WorkflowListItemHover = "on" | "off";
+export type WorkflowListItemChief = "technical" | "compliance";
+
+export type WorkflowListItemProps = {
+  title?: string;
+  subtitle?: string;
+  chief?: WorkflowListItemChief;
+  hover?: WorkflowListItemHover;
+  progress?: "37%" | "54%" | "91%";
+  className?: string;
+};
+
+const hoverStyles: Record<WorkflowListItemHover, string> = {
+  off: "bg-transparent",
+  on: "bg-background-secondary",
+};
+
+export const WorkflowListItem = ({
+  title = "Monthly safety review",
+  subtitle = "Updated 2 hours ago",
+  chief = "technical",
+  hover = "off",
+  progress = "37%",
+  className,
+}: WorkflowListItemProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center gap-4 rounded-control px-3 py-2 transition-colors",
+      hoverStyles[hover],
+      hover === "off" && "hover:bg-background-secondary",
+      className,
+    )}
+  >
+    <Avatar chief={chief} size={32} />
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-caption-1-em text-display-on-light-primary">{title}</p>
+      <p className="truncate text-caption-2 text-display-on-light-tertiary">{subtitle}</p>
+    </div>
+    <WorkflowProgress progress={progress} />
+  </div>
+);

package/src/domain/Workflows/WorkflowProgress.tsx

@@ -0,0 +1,36 @@
+import { cn } from "../../utils/cn";
+
+export type WorkflowProgressValue = "7%" | "37%" | "54%" | "91%" | "100%";
+
+export type WorkflowProgressProps = {
+  progress?: WorkflowProgressValue;
+  className?: string;
+};
+
+const progressValues: Record<WorkflowProgressValue, number> = {
+  "7%": 7,
+  "37%": 37,
+  "54%": 54,
+  "91%": 91,
+  "100%": 100,
+};
+
+export const WorkflowProgress = ({
+  progress = "7%",
+  className,
+}: WorkflowProgressProps) => {
+  const value = progressValues[progress];
+  const isComplete = progress === "100%";
+
+  return (
+    <div className={cn("flex w-full max-w-[200px] flex-col gap-1", className)}>
+      <div className="h-1.5 overflow-hidden rounded-full bg-grey-200">
+        <div
+          className={cn("h-full rounded-full", isComplete ? "bg-meta-green" : "bg-blue-600")}
+          style={{ width: `${value}%` }}
+        />
+      </div>
+      <span className="text-footnote text-display-on-light-tertiary">{value}%</span>
+    </div>
+  );
+};

package/src/domain/Workflows/WorkflowRow.tsx

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import { WorkflowIcon } from "../../icons/generated";
+
+export type WorkflowRowState = "idle" | "hover";
+
+export type WorkflowRowProps = {
+  name?: string;
+  description?: string;
+  state?: WorkflowRowState;
+  icon?: ReactNode;
+  className?: string;
+};
+
+const stateStyles: Record<WorkflowRowState, string> = {
+  idle: "bg-background-primary",
+  hover: "bg-background-secondary",
+};
+
+export const WorkflowRow = ({
+  name = "Name",
+  description = "Description",
+  state = "idle",
+  icon,
+  className,
+}: WorkflowRowProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center gap-4 rounded-2xl border border-divider-primary p-3 transition-colors",
+      stateStyles[state],
+      state === "idle" && "hover:bg-background-secondary",
+      className,
+    )}
+  >
+    <span className="flex size-[46px] shrink-0 items-center justify-center rounded-control bg-background-secondary text-display-on-light-primary">
+      {icon ?? <WorkflowIcon size="large" />}
+    </span>
+    <div className="min-w-0 flex-1">
+      <p className="text-body-em text-display-on-light-primary">{name}</p>
+      <p className="text-caption-2 text-display-on-light-secondary">{description}</p>
+    </div>
+  </div>
+);

package/src/domain/Workflows/index.ts

@@ -0,0 +1,13 @@
+export { WorkflowRow, type WorkflowRowProps, type WorkflowRowState } from "./WorkflowRow";
+export { Progress, type ProgressProps, type ProgressState } from "./Progress";
+export { WorkflowHeader, type WorkflowHeaderProps, type WorkflowHeaderVariant, type WorkflowHeaderWorkflow } from "./WorkflowHeader";
+export { Task, type TaskProps, type TaskState, type TaskStatus } from "./Task";
+export { Importance, type ImportanceLevel, type ImportanceProps, type ImportanceStatus } from "./Importance";
+export { Question, type QuestionExpanded, type QuestionProps, type QuestionState } from "./Question";
+export { WorkflowForm, type WorkflowFormProps, type WorkflowFormState } from "./WorkflowForm";
+export { TaskHeader, type TaskHeaderProperty, type TaskHeaderProps } from "./TaskHeader";
+export { WorkflowProgress, type WorkflowProgressProps, type WorkflowProgressValue } from "./WorkflowProgress";
+export { WorkflowListItem, type WorkflowListItemChief, type WorkflowListItemHover, type WorkflowListItemProps } from "./WorkflowListItem";
+export { GroupHeader, type GroupHeaderGroup, type GroupHeaderProps } from "./GroupHeader";
+export { StatusPopover, type StatusPopoverProps, type StatusPopoverState } from "./StatusPopover";
+export { WorkflowFilters, type WorkflowFiltersProps } from "./WorkflowFilters";

package/src/domain/index.ts

@@ -0,0 +1,37 @@
+export * from "./Ships";
+export * from "./Report";
+export * from "./Settings";
+export * from "./Workflows";
+export * from "./Filters";
+
+export {
+  FormCard,
+  FormHeader,
+  RiskMeter,
+  ListRow as FormListRow,
+  type FormCardProps,
+  type FormCardState,
+  type FormHeaderProps,
+  type RiskMeterLevel,
+  type RiskMeterProps,
+  type ListRowProps as FormListRowProps,
+  type ListRowState as FormListRowState,
+} from "./Forms";
+
+export {
+  Folder,
+  File,
+  Navigation,
+  Folders,
+  ListRow as LibraryListRow,
+  type FolderProps,
+  type FolderState,
+  type FileProps,
+  type FileState,
+  type NavigationNested,
+  type NavigationProps,
+  type FoldersLayout,
+  type FoldersProps,
+  type ListRowProps as LibraryListRowProps,
+  type ListRowState as LibraryListRowState,
+} from "./Library";

package/src/icons/ArrowIcon.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, type SVGProps } from "react";
+import { cn } from "../utils/cn";
+import { ARROW_PATHS } from "./arrow-paths";
+import { ICON_BOX, type ArrowDirection, type IconProps } from "./types";
+
+export type ArrowIconProps = IconProps & {
+  direction?: ArrowDirection;
+};
+
+export const ArrowIcon = forwardRef<
+  SVGSVGElement,
+  ArrowIconProps & SVGProps<SVGSVGElement>
+>(({ size = "large", direction = "right", className, ...props }, ref) => {
+  const box = ICON_BOX[size];
+  const paths = ARROW_PATHS[direction];
+  const path = paths[size];
+
+  if (!path) return null;
+
+  const useStroke = path.strokeWidth !== undefined;
+
+  return (
+    <svg
+      ref={ref}
+      width={box}
+      height={box}
+      viewBox={`0 0 ${box} ${box}`}
+      fill={useStroke ? "none" : "currentColor"}
+      stroke={useStroke ? "currentColor" : undefined}
+      strokeWidth={path.strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("shrink-0", className)}
+      aria-hidden={props["aria-label"] ? undefined : true}
+      {...props}
+    >
+      <path d={path.d} fillRule={path.fillRule} />
+    </svg>
+  );
+});
+
+ArrowIcon.displayName = "ArrowIcon";

package/src/icons/ChevronIcon.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, type SVGProps } from "react";
+import { cn } from "../utils/cn";
+import { CHEVRON_PATHS } from "./chevron-paths";
+import { ICON_BOX, type ChevronDirection, type IconProps } from "./types";
+
+export type ChevronIconProps = IconProps & {
+  direction?: ChevronDirection;
+};
+
+export const ChevronIcon = forwardRef<
+  SVGSVGElement,
+  ChevronIconProps & SVGProps<SVGSVGElement>
+>(({ size = "small", direction = "right", className, ...props }, ref) => {
+  const box = ICON_BOX[size];
+  const paths = CHEVRON_PATHS[direction];
+  const path = paths[size];
+
+  if (!path) return null;
+
+  const useStroke = path.strokeWidth !== undefined;
+
+  return (
+    <svg
+      ref={ref}
+      width={box}
+      height={box}
+      viewBox={`0 0 ${box} ${box}`}
+      fill={useStroke ? "none" : "currentColor"}
+      stroke={useStroke ? "currentColor" : undefined}
+      strokeWidth={path.strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("shrink-0", className)}
+      aria-hidden={props["aria-label"] ? undefined : true}
+      {...props}
+    >
+      <path d={path.d} fillRule={path.fillRule} />
+    </svg>
+  );
+});
+
+ChevronIcon.displayName = "ChevronIcon";

package/src/icons/Icon.tsx

@@ -0,0 +1,184 @@
+import type { ComponentType, SVGProps } from "react";
+import { ArrowIcon } from "./ArrowIcon";
+import { ChevronIcon } from "./ChevronIcon";
+import {
+  ActionsIcon,
+  ActivityIcon,
+  AddIcon,
+  AnalyticsIcon,
+  ApprovalIcon,
+  ArchiveIcon,
+  AttachmentIcon,
+  BookIcon,
+  BulbIcon,
+  CautionIcon,
+  ChatIcon,
+  ChatProIcon,
+  CheckboxIcon,
+  ClearIcon,
+  ClockIcon,
+  CopyIcon,
+  CriticalIcon,
+  DateIcon,
+  DefectReportIcon,
+  DocumentIcon,
+  DoneIcon,
+  DownloadIcon,
+  ExpandIcon,
+  FileIcon,
+  FiltersIcon,
+  FixesIcon,
+  FolderIcon,
+  FolderStarredIcon,
+  FormIcon,
+  FormsIcon,
+  GapIcon,
+  HeartIcon,
+  InformationIcon,
+  InviteIcon,
+  IssuesIcon,
+  LocationIcon,
+  LogOutIcon,
+  MentionIcon,
+  MenuIcon,
+  MicrophoneIcon,
+  MinusIcon,
+  MoreIcon,
+  PenIcon,
+  PersonIcon,
+  PlusIcon,
+  PreviewIcon,
+  QualityIcon,
+  RefreshIcon,
+  ReportActionsIcon,
+  ReportIcon,
+  SearchIcon,
+  SendIcon,
+  SettingsIcon,
+  ShipIcon,
+  SidebarIcon,
+  SparklesIcon,
+  SpeakerIcon,
+  SpinnerIcon,
+  StarIcon,
+  StatusIcon,
+  TaskIcon,
+  TasksIcon,
+  TickIcon,
+  TrashIcon,
+  UndoIcon,
+  UploadIcon,
+  UsersIcon,
+  WorkflowIcon,
+} from "./generated";
+import type { ArrowDirection, ChevronDirection, IconProps } from "./types";
+
+const iconRegistry = {
+  heart: HeartIcon,
+  clear: ClearIcon,
+  chevron: ChevronIcon,
+  arrow: ArrowIcon,
+  attachment: AttachmentIcon,
+  microphone: MicrophoneIcon,
+  add: AddIcon,
+  plus: PlusIcon,
+  done: DoneIcon,
+  minus: MinusIcon,
+  send: SendIcon,
+  search: SearchIcon,
+  star: StarIcon,
+  analytics: AnalyticsIcon,
+  trash: TrashIcon,
+  chat: ChatIcon,
+  chatPro: ChatProIcon,
+  filters: FiltersIcon,
+  pen: PenIcon,
+  tick: TickIcon,
+  document: DocumentIcon,
+  sparkles: SparklesIcon,
+  expand: ExpandIcon,
+  speaker: SpeakerIcon,
+  copy: CopyIcon,
+  date: DateIcon,
+  refresh: RefreshIcon,
+  activity: ActivityIcon,
+  menu: MenuIcon,
+  invite: InviteIcon,
+  report: ReportIcon,
+  sidebar: SidebarIcon,
+  download: DownloadIcon,
+  upload: UploadIcon,
+  preview: PreviewIcon,
+  fixes: FixesIcon,
+  issues: IssuesIcon,
+  more: MoreIcon,
+  bulb: BulbIcon,
+  ship: ShipIcon,
+  person: PersonIcon,
+  archive: ArchiveIcon,
+  logOut: LogOutIcon,
+  settings: SettingsIcon,
+  tasks: TasksIcon,
+  workflow: WorkflowIcon,
+  form: FormIcon,
+  approval: ApprovalIcon,
+  forms: FormsIcon,
+  book: BookIcon,
+  mention: MentionIcon,
+  actions: ActionsIcon,
+  critical: CriticalIcon,
+  information: InformationIcon,
+  caution: CautionIcon,
+  folder: FolderIcon,
+  folderStarred: FolderStarredIcon,
+  quality: QualityIcon,
+  location: LocationIcon,
+  users: UsersIcon,
+  undo: UndoIcon,
+  spinner: SpinnerIcon,
+  clock: ClockIcon,
+  gap: GapIcon,
+  defectReport: DefectReportIcon,
+  task: TaskIcon,
+  file: FileIcon,
+  reportActions: ReportActionsIcon,
+  checkbox: CheckboxIcon,
+  status: StatusIcon,
+} as const;
+
+export type IconName = keyof typeof iconRegistry;
+
+type DirectionProps =
+  | { name: "chevron"; direction?: ChevronDirection }
+  | { name: "arrow"; direction?: ArrowDirection }
+  | { name: Exclude<IconName, "chevron" | "arrow"> };
+
+export type IconRegistryProps = IconProps &
+  DirectionProps & {
+    className?: string;
+  } & Omit<SVGProps<SVGSVGElement>, "ref">;
+
+export const Icon = ({
+  name,
+  size = "large",
+  filled,
+  className,
+  ...props
+}: IconRegistryProps) => {
+  const Component = iconRegistry[name] as ComponentType<
+    IconProps & SVGProps<SVGSVGElement>
+  >;
+
+  return (
+    <Component
+      size={size}
+      filled={filled}
+      className={className}
+      {...props}
+    />
+  );
+};
+
+Icon.displayName = "Icon";
+
+export { iconRegistry };

package/src/icons/arrow-paths.ts

@@ -0,0 +1,8 @@
+export const ARROW_PATHS = {
+  left: {
+    large: { d: "M10.2217 6.21973C10.5146 5.9271 10.9894 5.92692 11.2822 6.21973C11.5749 6.51254 11.5748 6.98742 11.2822 7.28027L7.56055 11.002H18.2549C18.6688 11.0023 19.0049 11.3379 19.0049 11.752C19.0049 12.166 18.6688 12.5016 18.2549 12.502H7.56055L11.2822 16.2236C11.5748 16.5165 11.5748 16.9914 11.2822 17.2842C10.9894 17.5769 10.5146 17.5768 10.2217 17.2842L5.21973 12.2822C5.16331 12.2258 5.12062 12.1611 5.08594 12.0938C5.07633 12.0751 5.06469 12.0576 5.05664 12.0381C5.04919 12.02 5.04504 12.0009 5.03906 11.9824C5.01544 11.9095 5 11.8327 5 11.752C5 11.6709 5.01525 11.5937 5.03906 11.5205C5.04453 11.5037 5.04801 11.4862 5.05469 11.4697L5.05859 11.46C5.06783 11.4381 5.08061 11.4182 5.0918 11.3975C5.12559 11.3348 5.16683 11.2746 5.21973 11.2217L10.2217 6.21973Z" },
+  },
+  right: {
+    large: { d: "M13.7808 17.282C13.4878 17.5746 13.013 17.5748 12.7202 17.282C12.4276 16.9892 12.4276 16.5143 12.7202 16.2214L16.4419 12.4998L5.74756 12.4998C5.33361 12.4995 4.99756 12.1638 4.99756 11.7498C4.99756 11.3357 5.3336 11.0001 5.74756 10.9998L16.4419 10.9998L12.7202 7.27808C12.4277 6.98524 12.4276 6.51036 12.7202 6.21753C13.013 5.92476 13.4879 5.9249 13.7808 6.21753L18.7827 11.2195C18.8391 11.2759 18.8818 11.3406 18.9165 11.408C18.9261 11.4266 18.9378 11.4441 18.9458 11.4636C18.9533 11.4817 18.9574 11.5008 18.9634 11.5193C18.987 11.5922 19.0024 11.669 19.0024 11.7498C19.0024 11.8309 18.9872 11.908 18.9634 11.9812C18.9579 11.998 18.9544 12.0155 18.9478 12.032L18.9438 12.0417C18.9346 12.0636 18.9218 12.0835 18.9106 12.1042C18.8769 12.1669 18.8356 12.2271 18.7827 12.28L13.7808 17.282Z" },
+  },
+} as const;

package/src/icons/chevron-paths.ts

@@ -0,0 +1,17 @@
+export const CHEVRON_PATHS = {
+  right: {
+    small: { d: "M10.9288 7.74314C11.0393 7.92719 11.0213 8.16626 10.8741 8.332L6.87414 12.832C6.69075 13.0383 6.37446 13.0572 6.16809 12.874C5.96185 12.6906 5.94294 12.3743 6.12609 12.1679L9.83117 7.99997L6.12609 3.832C5.94294 3.62563 5.96185 3.30933 6.16809 3.12595C6.37446 2.94274 6.69075 2.96168 6.87414 3.16794L10.8741 7.66794L10.9288 7.74314Z" },
+  },
+  left: {
+    small: { d: "M6.07117 8.25686C5.96073 8.07281 5.97872 7.83374 6.12586 7.668L10.1259 3.168C10.3093 2.96174 10.6255 2.94279 10.8319 3.12601C11.0381 3.30938 11.0571 3.62568 10.8739 3.83206L7.16883 8.00003L10.8739 12.168C11.0571 12.3744 11.0381 12.6907 10.8319 12.8741C10.6255 13.0573 10.3093 13.0383 10.1259 12.8321L6.12586 8.33206L6.07117 8.25686Z" },
+  },
+  down: {
+    small: { d: "M12.168 6.12597C12.3744 5.94274 12.6906 5.96165 12.874 6.16797C13.0572 6.37436 13.0383 6.69063 12.832 6.87402L8.33203 10.874C8.14266 11.0421 7.85733 11.0421 7.66797 10.874L3.16797 6.87402C2.96165 6.69063 2.94274 6.37436 3.12597 6.16797C3.30936 5.96165 3.62563 5.94274 3.83203 6.12597L8 9.83007L12.168 6.12597Z" },
+  },
+  up: {
+    small: { d: "M7.74314 6.07117C7.92719 5.96073 8.16626 5.97872 8.332 6.12586L12.832 10.1259C13.0383 10.3093 13.0572 10.6255 12.874 10.8319C12.6906 11.0381 12.3743 11.0571 12.1679 10.8739L7.99997 7.16883L3.832 10.8739C3.62563 11.0571 3.30933 11.0381 3.12595 10.8319C2.94274 10.6255 2.96168 10.3093 3.16794 10.1259L7.66794 6.12586L7.74314 6.07117Z" },
+  },
+  upDown: {
+    small: { d: "M12.1679 11.1259C12.3743 10.9426 12.6906 10.9615 12.874 11.1679C13.0572 11.3742 13.0383 11.6905 12.832 11.8739L8.332 15.8739C8.14266 16.0419 7.85728 16.0419 7.66794 15.8739L3.16794 11.8739C2.96165 11.6905 2.94278 11.3742 3.12595 11.1679C3.30933 10.9615 3.6256 10.9426 3.832 11.1259L7.99997 14.83L12.1679 11.1259ZM7.74313 0.0711718C7.92719 -0.0392683 8.16625 -0.021282 8.332 0.125859L12.832 4.12586C13.0383 4.30925 13.0572 4.62554 12.874 4.83191C12.6906 5.03814 12.3743 5.05706 12.1679 4.87391L7.99997 1.16883L3.832 4.87391C3.62563 5.05706 3.30932 5.03814 3.12595 4.83191C2.94274 4.62554 2.96168 4.30925 3.16794 4.12586L7.66794 0.125859L7.74313 0.0711718Z" },
+  },
+} as const;