@lateralus-ai/shipping-ui 1.2.0 → 1.3.1

package/src/components/DocumentEditor/index.ts

@@ -0,0 +1 @@
+export { default as DocumentEditor } from "./DocumentEditor";

package/src/components/PdfViewer/PdfViewer.tsx

@@ -6,7 +6,7 @@ import { Icon } from "@iconify/react";
 import { cn } from "../../utils/cn";
 import "react-pdf/dist/Page/AnnotationLayer.css";
 import "react-pdf/dist/Page/TextLayer.css";
-import { useState, ChangeEvent, useMemo } from "react";
+import { useState, ChangeEvent, useMemo, MouseEvent as ReactMouseEvent } from "react";
 import { useZoom } from "./useZoom";
 import { useRotation } from "./useRotation";
 import { usePageManagement } from "./usePageManagement";
@@ -18,6 +18,7 @@ interface PdfViewerProps extends React.HTMLProps<HTMLDivElement> {
   onClose: () => void;
   src: string;
   title?: string;
+  onOpen?: (event: ReactMouseEvent<HTMLAnchorElement>) => void;
 }
 
 export const PdfViewer = ({
@@ -25,16 +26,33 @@ export const PdfViewer = ({
   src,
   title = "PDF Viewer",
   className,
+  onOpen,
 }: PdfViewerProps) => {
   const [zoom, zoomActions] = useZoom();
   const [rotation, rotationActions] = useRotation();
   const [{ currentPage, totalPages }, pageActions] = usePageManagement();
   const [{ pan, isDragging }, panActions] = usePanning();
 
+  const handleOpen = (event: ReactMouseEvent<HTMLAnchorElement>) => {
+    onOpen?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    // Allow default anchor behavior when event isn't prevented
+    if (!src) {
+      event.preventDefault();
+    }
+  };
 
   const rightButtons = (
     <IconButton variant="text" color="gray">
-      <a href={src} target="_blank" rel="noopener noreferrer">
+      <a
+        href={src}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={handleOpen}
+      >
         <ExpandIcon className="size-4" />
       </a>
     </IconButton>

package/src/components/index.ts

@@ -3,3 +3,4 @@ export * as InputPrompt from "./InputPrompt";
 export * as Sidebar from "./Sidebar";
 export * from "./PdfViewer/";
 export * from "./Tabs";
+export * from "./DocumentEditor";

package/src/stories/DocumentEditor.stories.tsx

@@ -0,0 +1,287 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DocumentEditor } from "../components/DocumentEditor";
+import type { Schema } from "../types/documentEditor";
+
+// Sample schema based on the defect report form
+const sampleSchema: Schema = {
+  type: "object",
+  properties: {
+    shipName: {
+      type: "string",
+      description: "Name of the ship",
+    },
+    reportDate: {
+      type: "string",
+      format: "date",
+      description: "Date of the report",
+    },
+    reportNo: {
+      type: "string",
+      description: "Report number",
+    },
+    malfunctionDateTime: {
+      type: "string",
+      format: "date",
+      description: "Date the malfunction occurred",
+    },
+    malfunctionDescription: {
+      type: "string",
+      description: "Description of the malfunction or defect",
+    },
+    isCriticalEquipment: {
+      type: "boolean",
+      description: "Whether the equipment referenced is critical",
+      docx_mapping: {
+        type: "checkbox",
+        true_name: "Check1",
+        false_name: "Check2",
+      },
+    },
+    equipmentManufacturer: {
+      type: "string",
+      description: "The malfunctioning equipment manufacturer",
+    },
+    equipmentModel: {
+      type: "string",
+      description: "The malfunctioning equipment model",
+    },
+    equipmentSerial: {
+      type: "string",
+      description: "The malfunctioning equipment serial number",
+    },
+    equipmentManufacturerModelSerial: {
+      type: "string",
+      description: "Manufacturer, model, type, and serial number",
+    },
+    consequences: {
+      type: "string",
+      description: "Consequences of the malfunction",
+    },
+    rootCause: {
+      type: "string",
+      description: "Root cause of the defect (if known)",
+    },
+    actionsTaken: {
+      type: "string",
+      description: "Actions taken or suggestions for corrective actions",
+    },
+    isShoreAssistanceRequired: {
+      type: "boolean",
+      description: "Whether shore assistance is required",
+      docx_mapping: {
+        type: "checkbox",
+        true_name: "Check3",
+        false_name: "Check4",
+      },
+    },
+    shoreAssistanceRequisition: {
+      type: "string",
+      description: "Requisition details for shore assistance",
+    },
+    isEquipmentLandedAshore: {
+      type: "boolean",
+      description: "Whether equipment/machinery was landed ashore",
+      docx_mapping: {
+        type: "checkbox",
+        true_name: "Check5",
+        false_name: "Check6",
+      },
+    },
+    equipmentLandedRequisition: {
+      type: "string",
+      description: "Requisition details for equipment landed ashore",
+    },
+    areSparesAvailableOnboard: {
+      type: "boolean",
+      description: "Whether required spare parts are available onboard",
+      docx_mapping: {
+        type: "checkbox",
+        true_name: "Check7",
+        false_name: "Check8",
+      },
+    },
+    sparesAvailableRequisition: {
+      type: "string",
+      description: "Requisition details if spares are available onboard",
+    },
+    isNextDryDock: {
+      type: "boolean",
+      description: "If it's going to close out in next dry dock",
+      docx_mapping: {
+        type: "checkbox",
+        true_name: "Check9",
+        false_name: "Check10",
+      },
+    },
+    proposedCompletionDate: {
+      type: "string",
+      format: "date",
+      description: "Proposed date for completion",
+    },
+    chiefEngineerName: {
+      type: "string",
+      description: "Name of the Chief Engineer",
+    },
+    chiefEngineerSignature: {
+      type: "string",
+      description: "Signature of the Chief Engineer (surname only)",
+    },
+    chiefEngineerDate: {
+      type: "string",
+      format: "date",
+      description: "Date signed by the Chief Engineer",
+    },
+    masterName: {
+      type: "string",
+      description: "Name of the Master",
+    },
+    masterSignature: {
+      type: "string",
+      description: "Signature of the Master (surname only)",
+    },
+    masterDate: {
+      type: "string",
+      format: "date",
+      description: "Date signed by the Master",
+    },
+  },
+  required: [],
+};
+
+// Sample initial data for demonstration
+const sampleInitialData = {
+  shipName: "MV Excellence",
+  reportNo: "DR-2024-001",
+  reportDate: "2024-03-15",
+  malfunctionDateTime: "2024-03-14",
+  malfunctionDescription:
+    "Main engine turbocharger failure during normal operation",
+  isCriticalEquipment: true,
+  equipmentManufacturer: "ABB",
+  equipmentModel: "TPL 85-B",
+  equipmentSerial: "TC-12345-2020",
+  consequences: "Reduced engine power, speed limited to 10 knots",
+  rootCause: "Bearing failure due to inadequate lubrication",
+  actionsTaken:
+    "Turbocharger isolated, vessel proceeding at reduced speed to nearest port",
+  isShoreAssistanceRequired: true,
+  shoreAssistanceRequisition:
+    "Service engineer required for turbocharger overhaul",
+  isEquipmentLandedAshore: false,
+  areSparesAvailableOnboard: false,
+  isNextDryDock: false,
+  proposedCompletionDate: "2024-03-20",
+};
+
+const DocumentEditorWrapper = () => {
+  const handleDataChange = (data: Record<string, any>) => {
+    console.log("Data changed:", data);
+  };
+
+  return (
+    <div className="w-full max-w-6xl mx-auto p-4">
+      <DocumentEditor
+        docxUrl="/sample-document.docx"
+        schema={sampleSchema}
+        onDataChange={handleDataChange}
+        initialData={sampleInitialData}
+        readonly={false}
+      />
+    </div>
+  );
+};
+
+const meta = {
+  title: "Design System/DocumentEditor",
+  component: DocumentEditorWrapper,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: `
+The DocumentEditor component provides an interactive Word document editor with inline field editing capabilities.
+
+## Features
+- Renders Word documents using docx-preview
+- Supports inline editing with various field types (text, boolean, date, dropdown)
+- Tracks field changes with visual color coding
+- Handles checkbox patterns (single, dual Yes/No, radio buttons)
+- Preserves document formatting and layout
+
+## Usage
+\`\`\`tsx
+import { DocumentEditor } from '@lateralus-ai/shipping-ui';
+
+<DocumentEditor
+  docxUrl="/path/to/document.docx"
+  schema={documentSchema}
+  onDataChange={(data) => console.log(data)}
+  initialData={initialValues}
+  readonly={false}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    docxUrl: {
+      control: "text",
+      description: "URL to the DOCX document template",
+    },
+    readonly: {
+      control: "boolean",
+      description: "Whether the document is in read-only mode",
+    },
+  },
+} satisfies Meta<typeof DocumentEditorWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <div className="w-full max-w-6xl mx-auto p-4">
+        <DocumentEditor
+          docxUrl="/sample-document.docx"
+          schema={sampleSchema}
+          initialData={sampleInitialData}
+          onDataChange={(data) => console.log(data)}
+        />
+      </div>
+    );
+  },
+};
+
+export const ReadOnly: Story = {
+  render: () => {
+    return (
+      <div className="w-full max-w-6xl mx-auto p-4">
+        <DocumentEditor
+          docxUrl="/sample-document.docx"
+          schema={sampleSchema}
+          initialData={sampleInitialData}
+          readonly={true}
+        />
+      </div>
+    );
+  },
+};
+
+export const Empty: Story = {
+  render: () => {
+    return (
+      <div className="w-full max-w-6xl mx-auto p-4">
+        <DocumentEditor
+          docxUrl="/sample-document.docx"
+          schema={sampleSchema}
+          initialData={{}}
+          readonly={false}
+          onDataChange={(data) => console.log(data)}
+        />
+      </div>
+    );
+  },
+};

package/src/types/documentEditor.ts

@@ -0,0 +1,56 @@
+// Type definitions for Document Editor components
+
+export interface SchemaProperty {
+  type: "string" | "boolean" | "number" | "integer";
+  enum?: string[];
+  format?: "date" | "date-time" | string;
+  description?: string;
+  title?: string;
+  "ui:widget"?: string;
+  "ui:rows"?: number;
+  docx_mapping?: DocxMapping;
+}
+
+export interface DocxMapping {
+  type: "checkbox" | "radio" | "text";
+  name?: string;
+  true_name?: string;
+  false_name?: string;
+  mapping?: RadioMapping[];
+}
+
+export interface RadioMapping {
+  name: string;
+  value: string | boolean;
+}
+
+export interface Schema {
+  type: string;
+  properties: Record<string, SchemaProperty>;
+  required?: string[];
+}
+
+export interface CheckboxModuleOptions {
+  checkboxData?: Record<string, boolean>;
+  schema?: Schema;
+  finalGeneration?: boolean;
+}
+
+export interface DocumentEditorProps {
+  docxUrl: string;
+  schema: Schema;
+  onDataChange?: (data: Record<string, any>) => void;
+  initialData?: Record<string, any>;
+  onSaveRef?: React.MutableRefObject<(() => void) | null>;
+  readonly?: boolean;
+}
+
+export interface DocxtemplaterPart {
+  value?: string;
+  [key: string]: any;
+}
+
+export interface DocxtemplaterOptions {
+  contentType?: string;
+  [key: string]: any;
+}

package/src/utils/checkboxModule.ts

@@ -0,0 +1,242 @@
+import type {
+  CheckboxModuleOptions,
+  Schema,
+  DocxtemplaterPart,
+  DocxtemplaterOptions,
+} from "../types/documentEditor";
+
+/**
+ * CheckboxModule for docxtemplater
+ *
+ * This module handles three distinct checkbox patterns in DOCX documents:
+ *
+ * 1. **Single Checkbox Pattern**: A field maps to a single checkbox
+ *    - Schema: `docx_mapping: { type: "checkbox", name: "Check1" }`
+ *    - Maps boolean field value directly to checkbox state
+ *
+ * 2. **Dual Checkbox Pattern**: Yes/No checkboxes for a single field
+ *    - Schema: `docx_mapping: { type: "checkbox", true_name: "Check1", false_name: "Check2" }`
+ *    - true_name checkbox checked when field is true
+ *    - false_name checkbox checked when field is false
+ *    - Used for Yes/No questions where both options have checkboxes
+ *
+ * 3. **Radio Button Pattern**: Multiple checkboxes acting as radio buttons
+ *    - Schema: `docx_mapping: { type: "radio", mapping: [{ name: "Check1", value: "option1" }, ...] }`
+ *    - Only the checkbox corresponding to the field's value is checked
+ *    - Used for multiple choice questions
+ *
+ * The module operates in two modes:
+ * - **Preview Mode** (finalGeneration: false): Creates visual markers for inline editing
+ * - **Final Generation Mode** (finalGeneration: true): Updates actual Word form fields
+ */
+class CheckboxModule {
+  private checkboxData: Record<string, boolean>;
+  private schema?: Schema;
+  private finalGeneration: boolean;
+
+  constructor(options: CheckboxModuleOptions = {}) {
+    this.checkboxData = options.checkboxData || {};
+    this.schema = options.schema;
+    this.finalGeneration = options.finalGeneration || false;
+  }
+
+  // Required docxtemplater module interface
+  name = "CheckboxModule";
+
+  parse(placeHolderContent: string) {
+    // Return null to indicate this module doesn't handle this placeholder
+    // This allows other modules/default processing to handle it
+    return null;
+  }
+
+  postparse(parsed: any) {
+    return parsed;
+  }
+
+  render(part: any, options: any) {
+    return part;
+  }
+
+  postrender(parts: DocxtemplaterPart[], options: DocxtemplaterOptions) {
+    const hasValidOptions = !!(
+      options &&
+      options.contentType &&
+      options.contentType ===
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"
+    );
+
+    return !hasValidOptions ? parts : (() => {
+      try {
+        // Convert parts to string for processing
+        const xmlContent = parts
+          .map((part) => {
+            const isString = typeof part === "string";
+            const hasValue = part && typeof part === "object" && part.value;
+
+            const getString = () => isString && part;
+            const getValue = () => !isString && hasValue && part.value;
+            const getStringified = () => !isString && !hasValue && String(part);
+
+            return getString() || getValue() || getStringified();
+          })
+          .join("");
+
+        // Process checkbox patterns
+        const processedContent = this.processCheckboxPatterns(xmlContent);
+
+        // Return the processed content maintaining the same structure as input
+        return [processedContent];
+      } catch (error) {
+        // Return original parts if processing fails
+        return parts;
+      }
+    })();
+  }
+
+  /**
+   * Process checkbox patterns in the document XML
+   * Identifies Word form field checkboxes by their bookmark names (Check1, Check2, etc.)
+   * and either updates their values or replaces them with visual markers
+   */
+  private processCheckboxPatterns(xmlContent: string): string {
+    try {
+      // Pattern 1: Simple checkbox bookmarks (most conservative approach)
+      // Matches: <w:bookmarkStart w:name="Check1" w:id="0"/>
+      const simpleBookmarkRegex =
+        /<w:bookmarkStart[^>]*w:name="(Check\d+)"[^>]*\/>/gi;
+
+      // Reset regex
+      simpleBookmarkRegex.lastIndex = 0;
+
+      const checkboxMatches: string[] = [];
+      let match;
+      while ((match = simpleBookmarkRegex.exec(xmlContent)) !== null) {
+        checkboxMatches.push(match[1]);
+      }
+
+      // Only process if we found actual checkbox bookmarks
+      const hasCheckboxMatches = checkboxMatches.length > 0;
+
+      return !hasCheckboxMatches ? xmlContent : (() => {
+        const processForFinalGeneration = () => {
+          // For final generation, update the checkbox default values directly in the XML
+          checkboxMatches.forEach((checkboxName) => {
+            const isChecked = this.getCheckboxState(checkboxName);
+            const checkedValue = isChecked ? "1" : "0";
+
+            // Update the default value in the checkbox XML
+            const checkboxRegex = new RegExp(
+              `(<w:fldChar w:fldCharType="begin">.*?<w:name w:val="${checkboxName}".*?<w:default w:val=")([01])(".*?</w:fldChar>)`,
+              "gs",
+            );
+
+            xmlContent = xmlContent.replace(checkboxRegex, `$1${checkedValue}$3`);
+          });
+          return xmlContent;
+        };
+
+        const processForPreview = () => {
+          // For preview mode, create visual markers
+          // Reset regex for replacement
+          simpleBookmarkRegex.lastIndex = 0;
+
+          return xmlContent.replace(
+            simpleBookmarkRegex,
+            (match, checkboxName) => {
+              try {
+                const isChecked = this.getCheckboxState(checkboxName);
+                const symbol = isChecked ? "☑" : "☐";
+                const marker = `|||${symbol}|||checkbox:${checkboxName}|||`;
+
+                // Replace just the bookmark start with our marker in a text run
+                return `<w:r><w:t>${marker}</w:t></w:r><w:bookmarkStart w:name="${checkboxName}" w:id="0"/>`;
+              } catch (error) {
+                // Return original if processing fails
+                return match;
+              }
+            },
+          );
+        };
+
+        const renderFinalGeneration = () => this.finalGeneration && processForFinalGeneration();
+        const renderPreview = () => !this.finalGeneration && processForPreview();
+
+        return renderFinalGeneration() || renderPreview();
+      })();
+    } catch (error) {
+      // Return original content if processing fails
+      return xmlContent;
+    }
+  }
+
+  /**
+   * Determine the state of a checkbox based on field mappings and data
+   * @param checkboxName - The name of the checkbox (e.g., "Check1")
+   * @returns true if checkbox should be checked, false otherwise
+   */
+  private getCheckboxState(checkboxName: string): boolean {
+    const hasSchema = !!this.schema;
+
+    const getSimpleLookup = () => !hasSchema && (this.checkboxData[checkboxName] || false);
+    const getSchemaBasedLookup = () => hasSchema && (() => {
+          // Check all fields in the schema for checkbox mappings
+          const matchedField = Object.entries(
+            this.schema!.properties || {},
+          ).find(([fieldName, fieldConfig]) => {
+            const config = fieldConfig as any;
+            const docxMapping = config.docx_mapping;
+            const hasCheckboxMapping = docxMapping && docxMapping.type === "checkbox";
+            const hasRadioMapping = docxMapping && docxMapping.type === "radio" && docxMapping.mapping;
+
+            // Pattern 1: Single checkbox with "name" property
+            const isSingleCheckbox = hasCheckboxMapping && docxMapping.name === checkboxName;
+
+            // Pattern 2: Dual checkbox with "true_name" and "false_name" properties
+            const isTrueCheckbox = hasCheckboxMapping && docxMapping.true_name === checkboxName;
+            const isFalseCheckbox = hasCheckboxMapping && docxMapping.false_name === checkboxName;
+
+            // Pattern 3: Radio button mapping
+            const radioMapping = hasRadioMapping && docxMapping.mapping.find(
+              (m: any) => m.name === checkboxName,
+            );
+
+            return isSingleCheckbox || isTrueCheckbox || isFalseCheckbox || !!radioMapping;
+          });
+
+          return matchedField ? (() => {
+            const [fieldName, fieldConfig] = matchedField;
+            const config = fieldConfig as any;
+            const docxMapping = config.docx_mapping;
+
+            // Pattern 1: Single checkbox with "name" property
+            const isSingleCheckbox = docxMapping && docxMapping.type === "checkbox" && docxMapping.name === checkboxName;
+
+            // Pattern 2: Dual checkbox with "true_name" and "false_name" properties
+            const isTrueCheckbox = docxMapping && docxMapping.type === "checkbox" && docxMapping.true_name === checkboxName;
+            const isFalseCheckbox = docxMapping && docxMapping.type === "checkbox" && docxMapping.false_name === checkboxName;
+
+            // Pattern 3: Radio button mapping
+            const radioMapping = docxMapping && docxMapping.type === "radio" && docxMapping.mapping &&
+                                docxMapping.mapping.find((m: any) => m.name === checkboxName);
+
+            const checkSingleOrTrue = () => (isSingleCheckbox || isTrueCheckbox) && this.checkboxData[fieldName] === true;
+            const checkFalse = () => isFalseCheckbox && this.checkboxData[fieldName] === false;
+            const checkRadio = () => radioMapping && this.checkboxData[fieldName] === radioMapping.value;
+
+            return checkSingleOrTrue() || checkFalse() || checkRadio() || false;
+          })() : (this.checkboxData[checkboxName] || false);
+        })();
+
+    return getSimpleLookup() || getSchemaBasedLookup() || false;
+  }
+
+  /**
+   * Update checkbox data (can be called to change checkbox states)
+   * @param checkboxData - New checkbox data to merge with existing data
+   */
+  updateCheckboxData(checkboxData: Record<string, boolean>) {
+    this.checkboxData = { ...this.checkboxData, ...checkboxData };
+  }
+}
+
+export default CheckboxModule;