@lateralus-ai/shipping-ui 1.4.13 → 1.4.14

package/src/stories/SearchModal.stories.tsx

@@ -1,132 +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.",
-  },
-};
+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

@@ -1,82 +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>
-  );
-};
+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/Sidebar.stories.tsx

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

package/src/stories/Sidebar.tsx

@@ -1,108 +1,108 @@
-import { Icon } from "@iconify/react"
-import { Sidebar } from "../components"
-import {
-  Button,
-  IconButton,
-  Menu,
-  MenuHandler,
-  MenuItem,
-  MenuList,
-} from "@material-tailwind/react"
-
-const menuExample = (
-  <div className="opacity-0 group-hover:opacity-100">
-    <Menu placement="right" offset={{ mainAxis: -40 }}>
-      <MenuHandler>
-        <IconButton color="gray" size="sm" variant="text">
-          <Icon icon="lucide:ellipsis" className="size-4" />
-        </IconButton>
-      </MenuHandler>
-      <MenuList>
-        <MenuItem>Menu Item 1</MenuItem>
-        <MenuItem>Menu Item 2</MenuItem>
-        <MenuItem className="text-red-500">Menu Item 3</MenuItem>
-      </MenuList>
-    </Menu>
-  </div>
-)
-
-const arrowExample = (
-  <button>
-    <Icon icon="mage:caret-right" className="size-4" />
-  </button>
-)
-
-export const SidebarScreen = () => (
-  <div className="p-8 flex ">
-    <Sidebar.Layout
-      className="h-[800px]"
-      sideClassName="bg-gray-100"
-      sideContainer={
-        <>
-          <Button>
-            <Icon icon="mage:message" className="size-5 text-orange-400" />
-          </Button>
-          <Button>
-            <Icon icon="mage:book" className="size-5 text-orange-400" />
-          </Button>
-        </>
-      }
-    >
-      <div className="w-full flex flex-col gap-2 justify-center">
-        <div className="flex justify-between pr-1">
-          <Sidebar.Button
-            onClick={() => alert("click")}
-            icon={<Icon icon="mage:box-check" className="size-6" />}
-          >
-            {" "}
-            Lorem ipsum
-          </Sidebar.Button>
-
-          <Sidebar.ToggleCollapseButton />
-        </div>
-
-        <Sidebar.Item
-          icon={<Icon icon="mage:book" className="size-6" />}
-          trailing={arrowExample}
-        >
-          Dorcet sit amet
-        </Sidebar.Item>
-
-        <Sidebar.Item
-          icon={<Icon icon="mage:calendar" className="size-6" />}
-          isActive
-        >
-          Tempore ipsa
-        </Sidebar.Item>
-
-        <Sidebar.Item icon={<Icon icon="mage:email" className="size-6" />}>
-          {" "}
-          Duis ditarcher
-        </Sidebar.Item>
-
-        <div className="w-full flex flex-col gap-1 relative">
-          <Sidebar.SecondaryItem
-            trailing={menuExample}
-            icon={
-              <Icon icon="mage:message" className="size-5 text-orange-400" />
-            }
-          >
-            {" "}
-            Dolore eu fugiat nulla
-          </Sidebar.SecondaryItem>
-
-          <Sidebar.SecondaryItem
-            trailing={menuExample}
-            icon={<Icon icon="mage:message" className="size-5" />}
-          >
-            Lorem ipsum dorcet sit
-          </Sidebar.SecondaryItem>
-
-          <Sidebar.SecondaryItem>Show all</Sidebar.SecondaryItem>
-        </div>
-      </div>
-
-      <div className="h-20 bg-gray-100 w-full rounded-xl"></div>
-    </Sidebar.Layout>
-  </div>
-)
+import { Icon } from "@iconify/react"
+import { Sidebar } from "../components"
+import {
+  Button,
+  IconButton,
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+} from "@material-tailwind/react"
+
+const menuExample = (
+  <div className="opacity-0 group-hover:opacity-100">
+    <Menu placement="right" offset={{ mainAxis: -40 }}>
+      <MenuHandler>
+        <IconButton color="gray" size="sm" variant="text">
+          <Icon icon="lucide:ellipsis" className="size-4" />
+        </IconButton>
+      </MenuHandler>
+      <MenuList>
+        <MenuItem>Menu Item 1</MenuItem>
+        <MenuItem>Menu Item 2</MenuItem>
+        <MenuItem className="text-red-500">Menu Item 3</MenuItem>
+      </MenuList>
+    </Menu>
+  </div>
+)
+
+const arrowExample = (
+  <button>
+    <Icon icon="mage:caret-right" className="size-4" />
+  </button>
+)
+
+export const SidebarScreen = () => (
+  <div className="p-8 flex ">
+    <Sidebar.Layout
+      className="h-[800px]"
+      sideClassName="bg-gray-100"
+      sideContainer={
+        <>
+          <Button>
+            <Icon icon="mage:message" className="size-5 text-orange-400" />
+          </Button>
+          <Button>
+            <Icon icon="mage:book" className="size-5 text-orange-400" />
+          </Button>
+        </>
+      }
+    >
+      <div className="w-full flex flex-col gap-2 justify-center">
+        <div className="flex justify-between pr-1">
+          <Sidebar.Button
+            onClick={() => alert("click")}
+            icon={<Icon icon="mage:box-check" className="size-6" />}
+          >
+            {" "}
+            Lorem ipsum
+          </Sidebar.Button>
+
+          <Sidebar.ToggleCollapseButton />
+        </div>
+
+        <Sidebar.Item
+          icon={<Icon icon="mage:book" className="size-6" />}
+          trailing={arrowExample}
+        >
+          Dorcet sit amet
+        </Sidebar.Item>
+
+        <Sidebar.Item
+          icon={<Icon icon="mage:calendar" className="size-6" />}
+          isActive
+        >
+          Tempore ipsa
+        </Sidebar.Item>
+
+        <Sidebar.Item icon={<Icon icon="mage:email" className="size-6" />}>
+          {" "}
+          Duis ditarcher
+        </Sidebar.Item>
+
+        <div className="w-full flex flex-col gap-1 relative">
+          <Sidebar.SecondaryItem
+            trailing={menuExample}
+            icon={
+              <Icon icon="mage:message" className="size-5 text-orange-400" />
+            }
+          >
+            {" "}
+            Dolore eu fugiat nulla
+          </Sidebar.SecondaryItem>
+
+          <Sidebar.SecondaryItem
+            trailing={menuExample}
+            icon={<Icon icon="mage:message" className="size-5" />}
+          >
+            Lorem ipsum dorcet sit
+          </Sidebar.SecondaryItem>
+
+          <Sidebar.SecondaryItem>Show all</Sidebar.SecondaryItem>
+        </div>
+      </div>
+
+      <div className="h-20 bg-gray-100 w-full rounded-xl"></div>
+    </Sidebar.Layout>
+  </div>
+)