@lateralus-ai/shipping-ui 1.1.2 → 1.3.0

package/dist/material-theme.d.ts

@@ -413,4 +413,30 @@ export declare const materialTheme: {
             };
         };
     };
+    tabsHeader: {
+        defaultProps: {
+            className: string;
+        };
+    };
+    tab: {
+        defaultProps: {
+            className: string;
+        };
+        styles: {
+            base: {
+                indicator: {
+                    bg: string;
+                    borderRadius: string;
+                    boxShadow: string;
+                };
+            };
+        };
+    };
+    tabPanel: {
+        styles: {
+            base: {
+                p: string;
+            };
+        };
+    };
 };

package/dist/stories/SearchModal.d.ts

@@ -0,0 +1 @@
+export declare const SearchModals: () => import("react/jsx-runtime").JSX.Element;

package/dist/style.css

@@ -0,0 +1 @@
+:root{--react-pdf-annotation-layer: 1;--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color: Highlight;--input-focus-outline: 1px solid Canvas;--input-unfocused-border-color: transparent;--input-disabled-border-color: transparent;--input-hover-border-color: black;--link-outline: none}@media screen and (forced-colors: active){:root{--input-focus-border-color: CanvasText;--input-unfocused-border-color: ActiveText;--input-disabled-border-color: GrayText;--input-hover-border-color: Highlight;--link-outline: 1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selectedItem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert(100%);backdrop-filter:invert(100%)}}.annotationLayer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0;z-index:3}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg) translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg) translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg) translateY(-100%)}.annotationLayer canvas{position:absolute;width:100%;height:100%}.annotationLayer section{position:absolute;text-align:initial;pointer-events:auto;box-sizing:border-box;margin:0;transform-origin:0 0}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer;width:100%;height:100%;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--total-scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{background:none;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{background:none;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-image:none;background-color:transparent}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;height:50%;left:30%;top:20%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.annotationLayer .popupTriggerArea{height:100%;width:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{position:absolute;font-size:calc(9px * var(--total-scale-factor));width:100%;min-width:calc(180px * var(--total-scale-factor));pointer-events:none}.annotationLayer .popup{position:absolute;max-width:calc(180px * var(--total-scale-factor));background-color:#ff9;box-shadow:0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) #888;border-radius:calc(2px * var(--total-scale-factor));padding:calc(6px * var(--total-scale-factor));margin-left:calc(5px * var(--total-scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto}.annotationLayer .popup>*{font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{display:inline-block;margin-left:calc(5px * var(--total-scale-factor))}.annotationLayer .popupContent{border-top:1px solid rgba(51,51,51,1);margin-top:calc(2px * var(--total-scale-factor));padding-top:calc(2px * var(--total-scale-factor))}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{position:absolute;width:100%;height:100%;top:0;left:0}.annotationLayer .annotationTextContent{position:absolute;width:100%;height:100%;opacity:0;color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}:root{--react-pdf-text-layer: 1;--highlight-bg-color: rgba(180, 0, 170, 1);--highlight-selected-bg-color: rgba(0, 100, 0, 1)}@media screen and (forced-colors: active){:root{--highlight-bg-color: Highlight;--highlight-selected-bg-color: ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg) translate(-100%)}.textLayer{position:absolute;text-align:initial;top:0;right:0;bottom:0;left:0;overflow:hidden;line-height:1;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2}.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;margin:0;transform-origin:0 0}.textLayer span.markedContent{top:0;height:0}.textLayer .highlight{margin:-1px;padding:1px;background-color:var(--highlight-bg-color);border-radius:4px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::-moz-selection{background:transparent}.textLayer br::selection{background:transparent}.textLayer .endOfContent{display:block;position:absolute;top:100%;right:0;bottom:0;left:0;z-index:-1;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.textLayer.selecting .endOfContent{top:0}.hiddenCanvasElement{position:absolute;top:0;left:0;width:0;height:0;display:none}.tabs-container{width:100%;min-width:400px}.tabs-header{display:flex;border-bottom:2px solid #e5e7eb;margin-bottom:16px}.tab-button{padding:12px 24px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#6b7280;position:relative;transition:color .2s}.tab-button:hover{color:#374151}.tab-button.active{color:#3b82f6}.tab-button.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background-color:#3b82f6}.tab-content{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

package/dist/tailwind-theme.d.ts

@@ -71,6 +71,18 @@ export declare const theme: {
         "accordion-up": string;
     };
     colors: {
+        brand: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
         gray: {
             50: string;
             100: string;

package/dist/types/documentEditor.d.ts

@@ -0,0 +1,47 @@
+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/dist/utils/checkboxModule.d.ts

@@ -0,0 +1,54 @@
+import { CheckboxModuleOptions, 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
+ */
+declare class CheckboxModule {
+    private checkboxData;
+    private schema?;
+    private finalGeneration;
+    constructor(options?: CheckboxModuleOptions);
+    name: string;
+    parse(placeHolderContent: string): null;
+    postparse(parsed: any): any;
+    render(part: any, options: any): any;
+    postrender(parts: DocxtemplaterPart[], options: DocxtemplaterOptions): string[] | DocxtemplaterPart[];
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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>): void;
+}
+export default CheckboxModule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -82,6 +82,10 @@
   "dependencies": {
     "@iconify/react": "^6.0.2",
     "@react-hooks-library/core": "^0.6.2",
+    "docx-preview": "^0.3.7",
+    "docxtemplater": "^3.66.6",
+    "pizzip": "^3.2.0",
+    "react-hotkeys-hook": "^5.1.0",
     "react-pdf": "^10.1.0",
     "react-router": "^7.9.3"
   }