@lateralus-ai/shipping-ui 1.1.2 → 1.3.0

package/src/material-theme.ts

@@ -1,3 +1,5 @@
+import { tabPanel } from "@material-tailwind/react";
+
 export const materialTheme = {
   button: {
     defaultProps: {
@@ -444,4 +446,32 @@ export const materialTheme = {
       },
     },
   },
+  tabsHeader: {
+    defaultProps: {
+      className:
+        "grow gap-6 rounded-none bg-transparent !p-0 border-b border-b-gray-100 flex items-end px-0 w-full mb-6",
+    },
+  },
+  tab: {
+    defaultProps: {
+      className:
+        "min-w-fit max-w-fit justify-start font-medium text-gray-600 pl-0 pr-2 h-12",
+    },
+    styles: {
+      base: {
+        indicator: {
+          bg: "bg-transparent border-b-2 border-gray-900 !transform-none",
+          borderRadius: "radius-none",
+          boxShadow: "shadow-none",
+        },
+      },
+    },
+  },
+  tabPanel: {
+    styles: {
+      base: {
+        p: "px-0",
+      },
+    },
+  },
 };

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/stories/ModalHeader.stories.tsx

@@ -0,0 +1,36 @@
+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>
+    ),
+  ],
+};

package/src/stories/PDFViewer.stories.tsx

@@ -17,7 +17,7 @@ const StoryPage = () => {
         className="w-[600px] h-[800px] p-8 flex flex-col"
         title="Document Viewer"
       >
-        <PdfViewer src="https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf" />
+        <PdfViewer src="/defect-report.pdf" />
       </div>
     </div>
   );

package/src/stories/SearchModal.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import SearchModal from "../components/SearchModal";
+import type { SearchItem } from "../components/SearchModal";
+import { Icon } from "@iconify/react";
+
+const meta: Meta<typeof SearchModal> = {
+  title: "Design System/SearchModal",
+  component: SearchModal,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchModal>;
+
+const mockItems: SearchItem[] = [
+  {
+    id: "1",
+    title: "Engine maintenance report",
+    subtitle: "Created by John Doe on January 15, 2025",
+    icon: <Icon icon="lucide:users" />,
+  },
+  {
+    id: "2",
+    title: "Navigation system update",
+    subtitle: "Updated yesterday at 3:45 PM",
+    icon: <Icon icon="lucide:message-circle" />,
+  },
+  {
+    id: "3",
+    title: "Crew training schedule",
+    subtitle: "Due date: February 1, 2025",
+    icon: <Icon icon="lucide:file" />,
+  },
+  {
+    id: "4",
+    title: "Fuel consumption analysis",
+    subtitle: "Last reviewed 3 days ago",
+    icon: <Icon icon="lucide:file-lock" />,
+  },
+  {
+    id: "5",
+    title: "Weather routing optimization",
+    subtitle: "Active route to Singapore",
+    icon: <Icon icon="lucide:file-lock" />,
+  },
+];
+
+const SearchModalWrapper = (args: any) => {
+  const [open, setOpen] = useState(true);
+  const [items, setItems] = useState(mockItems);
+  const [loading, setLoading] = useState(false);
+  const [selectedFilter, setSelectedFilter] = useState("All");
+
+  const handleSearch = (query: string) => {
+    setLoading(true);
+    setTimeout(() => {
+      const filtered = mockItems.filter(
+        (item) =>
+          item.title.toLowerCase().includes(query.toLowerCase()) ||
+          item.subtitle?.toLowerCase().includes(query.toLowerCase()),
+      );
+      setItems(filtered);
+      setLoading(false);
+    }, 300);
+  };
+
+  const handleSelect = (item: SearchItem) => {
+    console.log("Selected item:", item);
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="px-4 py-2 bg-blue-500 text-white rounded-lg"
+      >
+        Open Search
+      </button>
+      <SearchModal
+        {...args}
+        open={open}
+        onClose={() => setOpen(false)}
+        items={items}
+        loading={loading}
+        onSearch={handleSearch}
+        onSelect={handleSelect}
+        selectedFilter={selectedFilter}
+        onFilterChange={setSelectedFilter}
+      />
+    </>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <SearchModalWrapper {...args} />,
+  args: {
+    placeholder: "Search reports, chats, or issues…",
+    recentlyViewedLabel: "Recently viewed",
+    noResultsText: "No results found.",
+  },
+};
+
+export const WithFilters: Story = {
+  render: (args) => <SearchModalWrapper {...args} />,
+  args: {
+    placeholder: "Search reports, chats, or issues…",
+    filterOptions: ["All", "Chats", "Issues", "Resolved"],
+    recentlyViewedLabel: "Recently viewed",
+    noResultsText: "No results found.",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    open: true,
+    loading: true,
+    onClose: () => console.log("Closed"),
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    open: true,
+    items: [],
+    onClose: () => console.log("Closed"),
+    placeholder: "Search for something...",
+    noResultsText: "No items found. Try a different search.",
+  },
+};

package/src/stories/SearchModal.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { SearchModal } from "../components/SearchModal";
+
+const mockResults = [
+  {
+    id: "1",
+    title: "Create React App",
+    description: "Set up a modern web app by running one command",
+    category: "Documentation",
+  },
+  {
+    id: "2",
+    title: "React Router",
+    description: "Declarative routing for React apps at any scale",
+    category: "Library",
+  },
+  {
+    id: "3",
+    title: "Redux Toolkit",
+    description:
+      "The official, opinionated, batteries-included toolset for efficient Redux development",
+    category: "State Management",
+  },
+  {
+    id: "4",
+    title: "Material Tailwind",
+    description:
+      "React components library that implements Google's Material Design",
+    category: "UI Library",
+  },
+  {
+    id: "5",
+    title: "Tailwind CSS",
+    description: "A utility-first CSS framework for rapid UI development",
+    category: "Styling",
+  },
+];
+
+export const SearchModals = () => {
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeFilter, setActiveFilter] = useState<string>("");
+
+  const filteredResults = mockResults.filter((result) => {
+    const matchesQuery = result.title
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase());
+    const matchesFilter = !activeFilter || result.category === activeFilter;
+    return matchesQuery && matchesFilter;
+  });
+
+  return (
+    <div className="p-8">
+      <button
+        onClick={() => setOpen(true)}
+        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Open Search Modal
+      </button>
+
+      <SearchModal
+        open={open}
+        onClose={() => setOpen(false)}
+        results={searchQuery ? filteredResults : []}
+        onSearch={setSearchQuery}
+        onResultClick={(result) => {
+          console.log("Selected:", result);
+          alert(`Selected: ${result.title}`);
+        }}
+        filters={[
+          "Documentation",
+          "Library",
+          "State Management",
+          "UI Library",
+          "Styling",
+        ]}
+        activeFilter={activeFilter}
+        onFilterChange={setActiveFilter}
+      />
+    </div>
+  );
+};

package/src/stories/Tabs.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Tabs,
+  TabsHeader,
+  Tab,
+  TabsBody,
+  TabPanel,
+} from "@material-tailwind/react";
+import { SettingsIcon } from "../components/icons/SettingsIcon";
+
+const TabsComponent = () => (
+  <Tabs value="chats" className="w-[800px]">
+    <TabsHeader>
+      <Tab value="chats">Chats</Tab>
+      <Tab value="issues">Issues</Tab>
+
+      <button className="cursor-pointer mb-2 ml-auto rounded p-1 hover:bg-gray-100">
+        <SettingsIcon className="size-4" />
+      </button>
+    </TabsHeader>
+
+    <TabsBody>
+      <TabPanel value="chats">
+        Chats panel orem ipsum dolor sit, amet consectetur adipisicing elit.
+        Saepe deserunt officiis tempora accusamus sunt illo quae placeat velit
+        eius maiores, iste ipsa alias quos similique dolores odio? Magnam, quia
+        deleniti?
+      </TabPanel>
+      <TabPanel value="issues">
+        Issues panel orem ipsum dolor sit, amet consectetur adipisicing elit.
+        Saepe deserunt officiis tempora accusamus sunt illo quae placeat velit
+        eius maiores, iste ipsa alias quos similique dolores odio? Magnam, quia
+        deleniti?
+      </TabPanel>
+    </TabsBody>
+  </Tabs>
+);
+
+const meta = {
+  title: "Design System/Tabs",
+  component: TabsComponent,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof TabsComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/styles/tabs.css

@@ -0,0 +1,55 @@
+.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 0.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 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}