@lateralus-ai/shipping-ui 1.1.1 → 1.2.0

package/src/components/SearchModal.tsx

@@ -0,0 +1,320 @@
+import { Dialog, DialogBody } from "@material-tailwind/react";
+import { useEffect, useRef, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useMediaQuery } from "@uidotdev/usehooks";
+import { cn } from "../utils/cn";
+
+export const formatDateReport = (date: string | Date) => {
+  const formattedDate = new Date(date);
+  return formattedDate.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+};
+
+const highlightText = (text: string, searchTerm: string) => {
+  if (!searchTerm) return text;
+
+  const regex = new RegExp(`(\\b${searchTerm}\\b)`, "gi");
+  const parts = text.split(regex);
+  const firstMatchIndex = parts.findIndex((part) => regex.test(part));
+
+  if (firstMatchIndex === -1) return text;
+
+  if (firstMatchIndex === 0) {
+    return parts.map((part, i) =>
+      regex.test(part) ? (
+        <span key={i} className="text-gray-900 font-medium">
+          {part}
+        </span>
+      ) : (
+        part
+      ),
+    );
+  }
+
+  const matchedPart = parts[firstMatchIndex];
+  const beforeMatch = parts.slice(0, firstMatchIndex).join("");
+  const afterMatch = parts.slice(firstMatchIndex + 1).join("");
+
+  return (
+    <>
+      <span key="match" className="text-gray-900 font-medium">
+        {beforeMatch && <>...</>}
+        {matchedPart}
+      </span>
+      {afterMatch && <span key="after"> {afterMatch}</span>}
+    </>
+  );
+};
+
+export interface SearchItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  metadata?: Record<string, any>;
+}
+
+export interface SearchModalProps {
+  open: boolean;
+  onClose: () => void;
+  items?: SearchItem[];
+  loading?: boolean;
+  placeholder?: string;
+  onSearch?: (query: string) => void;
+  onSelect?: (item: SearchItem) => void;
+  filterOptions?: string[];
+  selectedFilter?: string;
+  onFilterChange?: (filter: string) => void;
+  recentlyViewedLabel?: string;
+  noResultsText?: string;
+}
+
+const SearchFilters = ({
+  filters,
+  selected,
+  onChange,
+}: {
+  filters: string[];
+  selected: string;
+  onChange: (filter: string) => void;
+}) => {
+  return (
+    <div className="flex gap-2 px-2">
+      {filters.map((filter) => (
+        <button
+          key={filter}
+          onClick={() => onChange(filter)}
+          className={cn(
+            "px-3 py-1 text-sm rounded-full transition-colors",
+            selected === filter
+              ? "bg-brand-600 text-white"
+              : "bg-gray-100 text-gray-600 hover:bg-gray-200",
+          )}
+        >
+          {filter}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+const SearchSkeleton = () => {
+  return (
+    <div className="p-4 flex flex-col gap-[6px]">
+      {[...Array(8)].map((_, i) => (
+        <div key={i} className="flex items-center gap-3 animate-pulse py-2">
+          <div className="size-3 bg-gray-100 rounded-full" />
+          <div className={cn(i % 2 === 0 ? "w-[250px]" : "w-[320px]","h-3 bg-gray-100 rounded-full")} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const SearchItemComponent = ({
+  item,
+  isActive,
+  onClick,
+  searchTerm,
+}: {
+  item: SearchItem;
+  isActive: boolean;
+  onClick: () => void;
+  searchTerm: string;
+}) => {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors",
+        isActive ? "bg-gray-100" : "hover:bg-gray-50",
+      )}
+    >
+      {item.icon && <div className="shrink-0 text-gray-600">{item.icon}</div>}
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-gray-900 truncate">
+          {item.title}
+        </div>
+        {item.subtitle && (
+          <div className="text-sm text-gray-600 truncate">
+            {typeof item.subtitle === "string"
+              ? highlightText(item.subtitle, searchTerm)
+              : item.subtitle}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const SearchModal = ({
+  open,
+  onClose,
+  items = [],
+  loading = false,
+  placeholder = "Search...",
+  onSearch,
+  onSelect,
+  filterOptions = [],
+  selectedFilter = "All",
+  onFilterChange,
+  recentlyViewedLabel = "Recently viewed",
+  noResultsText = "No results found.",
+}: SearchModalProps) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const isMobile = useMediaQuery("only screen and (max-width: 768px)");
+  const itemRefs = useRef<HTMLDivElement[]>([]);
+
+  useEffect(() => {
+    itemRefs.current = itemRefs.current.slice(0, items.length);
+  }, [items]);
+
+  useEffect(() => {
+    if (activeIndex > items.length) {
+      setActiveIndex(-1);
+    }
+  }, [items, activeIndex]);
+
+  useEffect(() => {
+    const currentItem = itemRefs.current[activeIndex];
+    currentItem?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+    });
+  }, [activeIndex]);
+
+  useHotkeys(
+    "ArrowUp",
+    () => {
+      if (items.length === 0) return;
+      setActiveIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));
+    },
+    {
+      preventDefault: true,
+      enableOnFormTags: true,
+      enabled: open,
+    },
+  );
+
+  useHotkeys(
+    "ArrowDown",
+    () => {
+      if (items.length === 0) return;
+      setActiveIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));
+    },
+    {
+      preventDefault: true,
+      enableOnFormTags: true,
+      enabled: open,
+    },
+  );
+
+  useHotkeys(
+    "Enter",
+    () => {
+      if (activeIndex >= 0 && activeIndex < items.length) {
+        handleItemSelect(items[activeIndex]);
+      }
+    },
+    {
+      enableOnFormTags: true,
+      preventDefault: true,
+      enabled: open,
+    },
+  );
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+    onSearch?.(value);
+  };
+
+  const handleItemSelect = (item: SearchItem) => {
+    onSelect?.(item);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setSearchValue("");
+    setActiveIndex(-1);
+    onClose();
+  };
+
+  const showFilters = filterOptions.length > 0 && searchValue;
+  const showRecentlyViewed = !searchValue && items.length > 0;
+
+  return (
+    <Dialog
+      open={open}
+      size="lg"
+      handler={handleClose}
+      className={cn(
+        isMobile && "w-screen m-0",
+        "focus:outline-none 2xl:min-w-px",
+      )}
+    >
+      <DialogBody className="relative px-0 py-2">
+        <div>
+          <div className="border-b border-b-gray-100 px-6 pb-2">
+            <input
+              type="text"
+              placeholder={placeholder}
+              value={searchValue}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              className="w-full bg-transparent p-2 px-0 text-sm font-medium text-gray-600 placeholder-gray-400 outline-none focus:outline-none"
+            />
+          </div>
+
+          {loading ? (
+            <SearchSkeleton />
+          ) : (
+            <div className="p-4 flex flex-col gap-2">
+              {showRecentlyViewed && (
+                <p className="text-sm font-normal text-gray-600 px-2">
+                  {recentlyViewedLabel}
+                </p>
+              )}
+
+              {showFilters && (
+                <SearchFilters
+                  filters={filterOptions}
+                  selected={selectedFilter}
+                  onChange={(filter) => onFilterChange?.(filter)}
+                />
+              )}
+
+              <div className="overflow-y-auto max-h-[320px]" tabIndex={0}>
+                {items.map((item, index) => (
+                  <div
+                    key={item.id}
+                    ref={(el) => {
+                      if (el) itemRefs.current[index] = el;
+                    }}
+                  >
+                    <SearchItemComponent
+                      item={item}
+                      isActive={activeIndex === index}
+                      onClick={() => handleItemSelect(item)}
+                      searchTerm={searchValue}
+                    />
+                  </div>
+                ))}
+
+                {!loading && items.length === 0 && (
+                  <div className="text-sm text-gray-900 font-medium">
+                    {noResultsText}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </DialogBody>
+    </Dialog>
+  );
+};
+
+export default SearchModal;

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

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