@lateralus-ai/shipping-ui 1.1.2 → 1.2.0

package/src/components/Tabs.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import "../styles/tabs.css";
+import {
+  Tabs,
+  TabPanel,
+  TabsBody,
+  TabsHeader,
+  Tab,
+} from "@material-tailwind/react";
+import { Icon } from "@iconify/react";
+import { cn } from "../utils/cn";
+import { SettingsIcon } from "./icons/SettingsIcon";
+
+interface Tab {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+  defaultTab?: string;
+}
+
+export const TabsContainer: React.FC<TabsProps> = () => {
+  return (
+    <Tabs 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">ChatsPanel</TabPanel>
+        <TabPanel value="issues">IssuesPanel</TabPanel>
+      </TabsBody>
+    </Tabs>
+  );
+};

package/src/components/icons/SettingsIcon.tsx

@@ -0,0 +1,33 @@
+export const SettingsIcon = ({ ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3.16699 7.7334C4.91574 7.73357 6.33301 9.1516 6.33301 10.9004C6.33283 12.3905 5.30337 13.6386 3.91699 13.9756V15.25C3.91685 15.664 3.58098 15.9998 3.16699 16C2.75287 16 2.41713 15.6641 2.41699 15.25V13.9756C1.0303 13.6387 0.000177983 12.3906 0 10.9004C0 9.15149 1.41809 7.7334 3.16699 7.7334ZM3.16699 9.2334C2.24652 9.2334 1.5 9.97992 1.5 10.9004C1.50021 11.8207 2.24665 12.5664 3.16699 12.5664C4.08719 12.5662 4.8328 11.8206 4.83301 10.9004C4.83301 9.98002 4.08732 9.23357 3.16699 9.2334Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.8662 9.66699C12.2804 9.66699 12.6162 10.0028 12.6162 10.417V15.25C12.616 15.6641 12.2803 16 11.8662 16C11.4523 15.9998 11.1164 15.6639 11.1162 15.25V10.417C11.1162 10.0029 11.4522 9.66722 11.8662 9.66699Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.8662 0C12.2804 0 12.6162 0.335786 12.6162 0.75V2.02344C14.0032 2.36025 15.0332 3.60999 15.0332 5.10059C15.0329 6.84904 13.6157 8.26633 11.8672 8.2666C10.1185 8.2666 8.70052 6.84921 8.7002 5.10059C8.7002 3.6104 9.7297 2.36066 11.1162 2.02344V0.75C11.1162 0.335929 11.4522 0.000230806 11.8662 0ZM11.8672 3.43359C10.9467 3.43359 10.2002 4.18011 10.2002 5.10059C10.2005 6.02078 10.9469 6.7666 11.8672 6.7666C12.7872 6.76633 13.5329 6.02062 13.5332 5.10059C13.5332 4.18028 12.7874 3.43387 11.8672 3.43359Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.16699 0C3.58107 0.000164881 3.91699 0.335888 3.91699 0.75V5.58301C3.91699 5.99712 3.58107 6.33284 3.16699 6.33301C2.75278 6.33301 2.41699 5.99722 2.41699 5.58301V0.75C2.41699 0.335786 2.75278 0 3.16699 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/index.ts

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

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/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);
+  }
+}

package/src/tailwind-theme.ts

@@ -93,6 +93,18 @@ export const theme = {
     "accordion-up": "accordion-up 0.2s ease-out",
   },
   colors: {
+    brand: {
+      50: "#e0fff2",
+      100: "#adf0d3",
+      200: "#8aeac1",
+      300: "#67e4ae",
+      400: "#45de9c",
+      500: "#26d489",
+      600: "#1da56a",
+      700: "#15754c",
+      800: "#0c452d",
+      900: "#04160e",
+    },
     gray: {
       50: "#fafafa",
       100: "#f0f0f0",