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

package/src/stories/ColorPalette.stories.tsx

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ColorPalette } from "./ColorPalette";
-
-const meta = {
-  title: "Design System/Color Palette",
-  component: ColorPalette,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof ColorPalette>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/stories/ColorPalette.tsx

@@ -1,85 +0,0 @@
-import { theme } from "../tailwind-theme";
-
-const colorGroups = {
-  Gray: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  Green: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  Blue: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  Red: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  Orange: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  Purple: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  Brand: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-};
-
-export const ColorPalette = () => {
-  const getColorValue = (colorName: string, shade: string): string => {
-    const colorKey = colorName.toLowerCase() as keyof typeof theme.colors;
-    const color = theme.colors[colorKey];
-    if (typeof color === "object" && color !== null && shade in color) {
-      return (color as Record<string, string>)[shade];
-    }
-    return "#000000";
-  };
-
-  return (
-    <div className="p-8 space-y-8">
-      <h2 className="text-2xl font-bold mb-4">Color Palette</h2>
-
-      {Object.entries(colorGroups).map(([colorName, shades]) => (
-        <div key={colorName}>
-          <h3 className="text-lg font-semibold mb-4">{colorName}</h3>
-          <div className="grid grid-cols-10 gap-2">
-            {shades.map((shade) => {
-              const colorValue = getColorValue(colorName, shade);
-              return (
-                <div key={shade} className="text-center">
-                  <div
-                    className="h-20 rounded-md border border-gray-200"
-                    style={{ backgroundColor: colorValue }}
-                  />
-                  <p className="text-xs mt-1">{shade}</p>
-                  <p className="text-xs text-gray-500">
-                    {colorName.toLowerCase()}-{shade}
-                  </p>
-                  <p className="text-xs text-gray-400">{colorValue}</p>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Special Colors</h3>
-        <div className="grid grid-cols-6 gap-4">
-          <div className="text-center">
-            <div className="bg-brand-purple h-20 rounded-md border border-gray-200" />
-            <p className="text-xs mt-1">Brand Purple</p>
-            <p className="text-xs text-gray-500">#ab68ff</p>
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">CSS Variables</h3>
-        <div className="grid grid-cols-4 gap-4">
-          <div className="text-center">
-            <div className="bg-surface-primary h-20 rounded-md border border-gray-200" />
-            <p className="text-xs mt-1">Surface Primary</p>
-          </div>
-          <div className="text-center">
-            <div className="bg-surface-secondary h-20 rounded-md border border-gray-200" />
-            <p className="text-xs mt-1">Surface Secondary</p>
-          </div>
-          <div className="text-center">
-            <div className="bg-surface-tertiary h-20 rounded-md border border-gray-200" />
-            <p className="text-xs mt-1">Surface Tertiary</p>
-          </div>
-          <div className="text-center">
-            <div className="bg-surface-submit h-20 rounded-md border border-gray-200" />
-            <p className="text-xs mt-1">Surface Submit</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/DocumentEditor.stories.tsx

@@ -1,287 +0,0 @@
-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/stories/Dropdowns.stories.tsx

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Dropdowns } from "./Dropdowns";
-
-const meta = {
-  title: "Design System/Dropdowns",
-  component: Dropdowns,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof Dropdowns>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/stories/Dropdowns.tsx

@@ -1,52 +0,0 @@
-import {
-  Button,
-  IconButton,
-  Menu,
-  MenuHandler,
-  MenuItem,
-  MenuList,
-} from "@material-tailwind/react";
-import { Icon } from "@iconify/react";
-
-export const Dropdowns = () => (
-  <div className="p-8 grid gap-4">
-    <div className="flex gap-4">
-      <Menu>
-        <MenuHandler>
-          <Button>Menu</Button>
-        </MenuHandler>
-        <MenuList>
-          <MenuItem>Menu Item 1</MenuItem>
-          <MenuItem>Menu Item 2</MenuItem>
-          <MenuItem>Menu Item 3</MenuItem>
-        </MenuList>
-      </Menu>
-
-      <Menu>
-        <MenuHandler>
-          <Button color="blue">
-            <Icon icon="hugeicons:menu-01" /> Menu
-          </Button>
-        </MenuHandler>
-        <MenuList>
-          <MenuItem>Menu Item 1</MenuItem>
-          <MenuItem>Menu Item 2</MenuItem>
-          <MenuItem>Menu Item 3</MenuItem>
-        </MenuList>
-      </Menu>
-
-      <Menu>
-        <MenuHandler>
-          <IconButton color="neutral" variant="outlined">
-            <Icon icon="hugeicons:menu-01" />
-          </IconButton>
-        </MenuHandler>
-        <MenuList>
-          <MenuItem>Menu Item 1</MenuItem>
-          <MenuItem>Menu Item 2</MenuItem>
-          <MenuItem>Menu Item 3</MenuItem>
-        </MenuList>
-      </Menu>
-    </div>
-  </div>
-);

package/src/stories/InputPrompt.stories.tsx

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { InputPrompts } from "./InputPrompt";
-
-const meta = {
-  title: "Design System/InputPrompts",
-  component: InputPrompts,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof InputPrompts>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/stories/InputPrompt.tsx

@@ -1,63 +0,0 @@
-import { Button, IconButton } from "@material-tailwind/react";
-import { InputPrompt } from "../components/";
-import { Icon } from "@iconify/react";
-
-export const InputPrompts = () => {
-  const bottomButtons = (
-    <div>
-      <Button variant="text" color="gray">
-        Select ship
-      </Button>
-    </div>
-  );
-
-  const rightButtons = (
-    <div className="flex gap-2">
-      <IconButton variant="text" color="gray">
-        <Icon icon="material-symbols:attach-file-rounded" className="size-6" />
-      </IconButton>
-      <InputPrompt.SubmitButton onClick={() => alert("Click")} />
-    </div>
-  );
-
-  const topContent = (
-    <div className="p-2 mt-2 mx-2 rounded bg-orange-50">
-      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex minima hic
-      qui! Ipsum et, perferendis molestias ut voluptatum laborum id similique.
-    </div>
-  );
-
-  const textArea = (
-    <InputPrompt.Textarea placeholder="Write your message here" />
-  );
-
-  return (
-    <div className="w-[650px] grid gap-8 p-4">
-      <InputPrompt.Container right={rightButtons} textArea={textArea} />
-      <InputPrompt.Container
-        right={rightButtons}
-        bottom={bottomButtons}
-        textArea={textArea}
-      />
-      <InputPrompt.Container
-        right={rightButtons}
-        top={topContent}
-        textArea={textArea}
-      />
-
-      <div className="border rounded-lg">
-        <div className="border-b p-4">Lorem Ipsum dorcet sit amet</div>
-        <div className="p-4 border-b">
-          <div className="h-[650px] text-gray-400 font-semibold bg-gray-100 rounded-2xl items-center justify-center flex">
-            Content placeholder
-          </div>
-        </div>
-        <InputPrompt.Container
-          right={rightButtons}
-          textArea={textArea}
-          className="border-none shadow-none"
-        />
-      </div>
-    </div>
-  );
-};

package/src/stories/ModalHeader.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ModalPanel } from "../components/ModalPanel";
-
-const meta: Meta<typeof ModalPanel.Header> = {
-  title: "Design System/ModalPanel",
-  component: ModalPanel.Header,
-  parameters: {
-    layout: "centered",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ModalPanel.Header>;
-
-export const Default: Story = {
-  args: {
-    onClose: () => console.log("Close button clicked"),
-    children: "Modal Panel Example",
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-[500px] border border-gray-200 rounded-xl">
-        <Story />
-        <ModalPanel.Body className="h-64 p-4">
-          <p className="text-body">
-            This is the modal body content. The height is controlled by the h-64 class,
-            and the width fills the container automatically.
-          </p>
-          <p className="text-body mt-4">
-            You can add any content here and control the height through the className prop.
-          </p>
-        </ModalPanel.Body>
-      </div>
-    ),
-  ],
-};