@neoptocom/neopto-ui 0.4.1 → 0.5.0

package/src/stories/ChatButton.stories.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ChatButton } from "../components/Chat";
+import Typo from "../components/Typo";
+import agentLogoDark from "../assets/agent-neopto-dark.svg";
+import agentLogoLight from "../assets/agent-neopto.svg";
+
+const meta: Meta<typeof ChatButton> = {
+  title: "Components/ChatButton",
+  component: ChatButton,
+  args: {
+    hasNotification: false,
+    notificationMessage: "Hello! How can I help you today?",
+    logoSrc: agentLogoDark,
+    logoAlt: "NeoPTO Agent",
+  },
+  argTypes: {
+    hasNotification: { control: "boolean" },
+    notificationMessage: { control: "text" },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen relative">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ChatButton>;
+
+export const Playground: Story = {
+  render: (args) => {
+    const [chatOpen, setChatOpen] = React.useState(false);
+
+    return (
+      <>
+        <ChatButton
+          {...args}
+          onOpenChat={() => {
+            setChatOpen(true);
+            console.log("Chat opened!");
+          }}
+        />
+        {chatOpen && (
+          <div className="fixed bottom-24 right-8 bg-[var(--surface)] border border-[var(--border)] rounded-lg p-4 shadow-lg z-50">
+            <Typo variant="body-md" className="text-[var(--fg)]">Chat opened!</Typo>
+            <button
+              onClick={() => setChatOpen(false)}
+              className="mt-2 underline"
+            >
+              <Typo variant="label-sm" className="text-[var(--muted-fg)]">Close</Typo>
+            </button>
+          </div>
+        )}
+      </>
+    );
+  },
+};
+
+export const WithNotification: Story = {
+  args: {
+    hasNotification: true,
+    notificationMessage: "I have a new update for your project. Would you like to see it?",
+  },
+};
+
+export const AutoToggleNotification: Story = {
+  render: (args) => {
+    const [hasNotification, setHasNotification] = React.useState(false);
+
+    React.useEffect(() => {
+      const interval = setInterval(() => {
+        setHasNotification((prev) => !prev);
+      }, 5000);
+
+      return () => clearInterval(interval);
+    }, []);
+
+    return (
+      <ChatButton
+        {...args}
+        hasNotification={hasNotification}
+        notificationMessage="This notification toggles every 5 seconds!"
+        onOpenChat={() => {
+          setHasNotification(false);
+          console.log("Chat opened!");
+        }}
+      />
+    );
+  },
+};
+

package/src/stories/Chip.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Chip from "../components/Chip";
+
+const meta: Meta<typeof Chip> = {
+  title: "Components/Chip",
+  component: Chip,
+  args: {
+    label: "Status",
+    variant: "success"
+  },
+  argTypes: {
+    variant: { control: "radio", options: ["success", "warning", "error", "light", "dark"] }
+  }
+};
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Playground: Story = {};
+
+export const WithIcon: Story = {
+  args: { icon: "check", label: "Completed", variant: "success" }
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Chip variant="success" icon="check" label="Success" />
+      <Chip variant="warning" icon="error_outline" label="Warning" />
+      <Chip variant="error" icon="error" label="Error" />
+      <Chip variant="light" icon="help_outline" label="Info" />
+      <Chip variant="dark" icon="schedule" label="Scheduled" />
+    </div>
+  )
+};
+
+

package/src/stories/Counter.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Counter from "../components/Counter";
+
+const meta: Meta<typeof Counter> = {
+  title: "Components/Counter",
+  component: Counter,
+  args: {
+    value: 0,
+    min: 0,
+    max: 99,
+    step: 1
+  },
+  argTypes: {
+    value: { control: "number" },
+    min: { control: "number" },
+    max: { control: "number" },
+    step: { control: "number" }
+  }
+};
+export default meta;
+type Story = StoryObj<typeof Counter>;
+
+export const Playground: Story = {};
+export const Multiple: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Counter value={5} />
+      <Counter value={10} />
+      <Counter value={0} />
+      <Counter value={3} />
+      <Counter value={7} />
+    </div>
+  )
+};
+

package/src/stories/Icon.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Icon from "../components/Icon";
+
+const meta: Meta<typeof Icon> = {
+  title: "Components/Icon",
+  component: Icon,
+  args: { name: "search", size: "md", fill: 0 }
+};
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+export const Playground: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Icon name="favorite" size="sm" />
+      <Icon name="favorite" size="md" />
+      <Icon name="favorite" size="lg" />
+    </div>
+  )
+};
+
+export const WithColorUtilities: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Icon name="check" className="text-green-600" />
+      <Icon name="error" className="text-red-600" />
+      <Icon name="info" className="text-sky-600" />
+    </div>
+  )
+};
+
+

package/src/stories/IconButton.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton } from "../components/IconButton";
+
+const meta: Meta<typeof IconButton> = {
+  title: "Components/IconButton",
+  component: IconButton,
+  args: {
+    icon: "search",
+    variant: "ghost",
+    size: "md",
+    disabled: false,
+    iconFill: 0
+  },
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["ghost", "primary", "secondary"]
+    },
+    size: {
+      control: "radio",
+      options: ["sm", "md", "lg"]
+    },
+    iconFill: {
+      control: "radio",
+      options: [0, 1],
+      description: "0 = outlined, 1 = filled"
+    },
+    disabled: {
+      control: "boolean"
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const Playground: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <IconButton icon="search" variant="ghost" />
+      <IconButton icon="search" variant="primary" />
+      <IconButton icon="search" variant="secondary" />
+    </div>
+  )
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <IconButton icon="search" size="sm" />
+      <IconButton icon="search" size="md" />
+      <IconButton icon="search" size="lg" />
+    </div>
+  )
+};
+
+export const CommonIcons: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <IconButton icon="search" title="Search" />
+      <IconButton icon="filter_list" title="Filter" />
+      <IconButton icon="close" title="Close" />
+      <IconButton icon="menu" title="Menu" />
+      <IconButton icon="more_vert" title="More options" />
+      <IconButton icon="settings" title="Settings" />
+      <IconButton icon="person" title="Profile" />
+      <IconButton icon="notifications" title="Notifications" />
+      <IconButton icon="favorite" title="Favorite" />
+      <IconButton icon="share" title="Share" />
+    </div>
+  )
+};
+
+export const FilledIcons: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <IconButton icon="favorite" iconFill={0} title="Outlined" />
+      <IconButton icon="favorite" iconFill={1} title="Filled" />
+      <IconButton icon="star" iconFill={0} title="Outlined" />
+      <IconButton icon="star" iconFill={1} title="Filled" />
+      <IconButton icon="bookmark" iconFill={0} title="Outlined" />
+      <IconButton icon="bookmark" iconFill={1} title="Filled" />
+    </div>
+  )
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <IconButton icon="search" />
+      <IconButton icon="search" disabled />
+    </div>
+  )
+};
+
+export const AllVariantsAndSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {(["ghost", "primary", "secondary"] as const).map((variant) => (
+        <div key={variant} className="flex flex-col gap-3">
+          <div className="text-sm font-medium text-[var(--fg)] capitalize">
+            {variant}
+          </div>
+          <div className="flex flex-wrap items-center gap-4">
+            <IconButton icon="search" variant={variant} size="sm" />
+            <IconButton icon="search" variant={variant} size="md" />
+            <IconButton icon="search" variant={variant} size="lg" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+};
+

package/src/stories/Input.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "../components/Input";
+
+const meta: Meta<typeof Input> = {
+  title: "Components/Input",
+  component: Input
+};
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Input placeholder="Enter your email" type="email" />
+      <Input placeholder="Enter your password" type="password" />
+      <Input placeholder="Search..." />
+    </div>
+  )
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Input placeholder="Disabled input" disabled />
+    </div>
+  )
+};
+
+export const Types: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Input placeholder="Text input" type="text" />
+      <Input placeholder="Email input" type="email" />
+      <Input placeholder="Password input" type="password" />
+      <Input placeholder="Number input" type="number" />
+    </div>
+  )
+};

package/src/stories/Search.stories.tsx

@@ -0,0 +1,228 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Search, { type SearchOption } from "../components/Search";
+import Counter from "../components/Counter";
+import Icon from "../components/Icon";
+import Typo from "../components/Typo";
+
+const SEARCH_RESULTS: SearchOption[] = [
+  { label: "Ada Lovelace", value: "ada", image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=128&auto=format&fit=facearea&facepad=2" },
+  { label: "Alan Turing", value: "turing" },
+  { label: "Grace Hopper", value: "hopper", image: "https://images.unsplash.com/photo-1545184180-25d471fe75d8?q=80&w=128&auto=format&fit=facearea&facepad=2" },
+  { label: "Edsger Dijkstra", value: "dijkstra" },
+  { label: "Barbara Liskov", value: "liskov" },
+  { label: "Donald Knuth", value: "knuth" },
+  { label: "Margaret Hamilton", value: "hamilton", image: "https://images.unsplash.com/photo-1494790108755-2616b612b786?q=80&w=128&auto=format&fit=facearea&facepad=2" },
+  { label: "John von Neumann", value: "neumann" },
+  { label: "Gordon Moore", value: "moore" },
+  { label: "Andy Grove", value: "grove" },
+  { label: "Steve Jobs", value: "jobs", image: "https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=128&auto=format&fit=facearea&facepad=2" },
+  { label: "Steve Wozniak", value: "wozniak" },
+  { label: "Bill Gates", value: "gates", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=128&auto=format&fit=facearea&facepad=2" },
+  { label: "Paul Allen", value: "allen" },
+  { label: "Larry Page", value: "page" },
+  { label: "Sergey Brin", value: "brin" },
+  { label: "Jeff Bezos", value: "bezos" },
+  { label: "Elon Musk", value: "musk", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=128&auto=format&fit=facearea&facepad=2" },
+  { label: "Mark Zuckerberg", value: "zuckerberg" },
+  { label: "Satya Nadella", value: "nadella" },
+  { label: "Sundar Pichai", value: "pichai" },
+  { label: "Jensen Huang", value: "huang" },
+  { label: "Lisa Su", value: "su" },
+];
+
+const meta: Meta<typeof Search> = {
+  title: "Components/Search",
+  component: Search,
+  args: {
+    options: SEARCH_RESULTS,
+    selectedOption: null,
+    disabled: false,
+    maxHeight: 180,
+    searchDelay: 300
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Search>;
+
+export const Playground: Story = {
+  render: (args) => {
+    const [value, setValue] = React.useState<SearchOption | string | null>(args.selectedOption);
+    const [results, setResults] = React.useState<SearchOption[]>([]);
+    const [isSearching, setIsSearching] = React.useState(false);
+
+    const handleSearch = React.useCallback((query: string) => {
+      if (query.trim()) {
+        setIsSearching(true);
+        // Simulate API call delay
+        setTimeout(() => {
+          const filtered = SEARCH_RESULTS.filter(item => 
+            item.label.toLowerCase().includes(query.toLowerCase())
+          );
+          setResults(filtered);
+          setIsSearching(false);
+        }, 500);
+      } else {
+        setResults([]);
+        setIsSearching(false);
+      }
+    }, []);
+
+    return (
+      <div className="max-w-md">
+        <Search 
+          {...args} 
+          options={isSearching ? [] : results}
+          selectedOption={value} 
+          onSelect={setValue}
+          onSearch={handleSearch}
+        />
+        <div className="mt-3 text-xs text-[var(--muted-fg)]">
+          Selected: {typeof value === "string" ? value : value?.label ?? "none"}
+        </div>
+        {isSearching && (
+          <div className="mt-2 text-xs text-[var(--muted-fg)]">
+            🔍 Searching...
+          </div>
+        )}
+      </div>
+    );
+  }
+};
+
+export const WithCustomDelay: Story = {
+  args: {
+    searchDelay: 1000
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<SearchOption | string | null>(null);
+    const [results, setResults] = React.useState<SearchOption[]>([]);
+    const [searchCount, setSearchCount] = React.useState(0);
+
+    const handleSearch = React.useCallback((query: string) => {
+      setSearchCount(prev => prev + 1);
+      if (query.trim()) {
+        const filtered = SEARCH_RESULTS.filter(item => 
+          item.label.toLowerCase().includes(query.toLowerCase())
+        );
+        setResults(filtered);
+      } else {
+        setResults([]);
+      }
+    }, []);
+
+    return (
+      <div className="max-w-md">
+        <Search 
+          {...args} 
+          options={results}
+          selectedOption={value} 
+          onSelect={setValue}
+          onSearch={handleSearch}
+        />
+        <div className="mt-3 text-xs text-[var(--muted-fg)]">
+          Search calls made: {searchCount} (1 second delay)
+        </div>
+      </div>
+    );
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    options: SEARCH_RESULTS
+  }
+};
+
+export const WithFilters: Story = {
+  render: (args) => {
+    const [value, setValue] = React.useState<SearchOption | string | null>(null);
+    const [results, setResults] = React.useState<SearchOption[]>([]);
+    const [topK, setTopK] = React.useState<number>(20);
+    const [totalResults, setTotalResults] = React.useState<number>(20);
+    const [showTooltip1, setShowTooltip1] = React.useState(false);
+    const [showTooltip2, setShowTooltip2] = React.useState(false);
+
+    const handleSearch = React.useCallback((query: string) => {
+      if (query.trim()) {
+        const filtered = SEARCH_RESULTS.filter(item => 
+          item.label.toLowerCase().includes(query.toLowerCase())
+        );
+        setResults(filtered);
+      } else {
+        setResults([]);
+      }
+    }, []);
+
+    return (
+      <div className="max-w-md">
+        <Search 
+          {...args} 
+          options={results}
+          selectedOption={value} 
+          onSelect={setValue}
+          onSearch={handleSearch}
+        >
+          {/* Filter content */}
+          <div className="flex flex-col gap-3">
+            {/* Semantic Search - Top K */}
+            <div className="flex items-center gap-3">
+              <Counter 
+                value={topK} 
+                onChange={setTopK}
+                min={1}
+                max={100}
+              />
+              <Typo variant="label-lg" className="mr-1">Semantic Search – Top K</Typo>
+              <div className="relative">
+                <div
+                  onMouseEnter={() => setShowTooltip1(true)}
+                  onMouseLeave={() => setShowTooltip1(false)}
+                >
+                  <Icon name="help" size="sm" className="text-[var(--muted-fg)] cursor-help" />
+                </div>
+                {showTooltip1 && (
+                  <div className="absolute left-0 top-6 z-50 px-2 py-1 bg-[var(--surface)] border border-[var(--border)] rounded shadow-lg text-xs text-[var(--fg)] whitespace-nowrap">
+                    lorem ipsum dolor sit amet
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Total Results */}
+            <div className="flex items-center gap-3">
+              <Counter 
+                value={totalResults} 
+                onChange={setTotalResults}
+                min={1}
+                max={100}
+              />
+              <Typo variant="label-lg" className="mr-1">Total Results</Typo>
+              <div className="relative">
+                <div
+                  onMouseEnter={() => setShowTooltip2(true)}
+                  onMouseLeave={() => setShowTooltip2(false)}
+                >
+                  <Icon name="help" size="sm" className="text-[var(--muted-fg)] cursor-help" />
+                </div>
+                {showTooltip2 && (
+                  <div className="absolute left-0 top-6 z-50 px-2 py-1 bg-[var(--surface)] border border-[var(--border)] rounded shadow-lg text-xs text-[var(--fg)] whitespace-nowrap">
+                    lorem ipsum dolor sit amet
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </Search>
+        <div className="mt-3 text-xs text-[var(--muted-fg)]">
+          Selected: {typeof value === "string" ? value : value?.label ?? "none"}
+        </div>
+        <div className="mt-1 text-xs text-[var(--muted-fg)]">
+          Top K: {topK}, Total Results: {totalResults}
+        </div>
+      </div>
+    );
+  }
+};

package/src/stories/Skeleton.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "../components/Skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Components/Skeleton",
+  component: Skeleton
+};
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Blocks: Story = {
+  render: () => (
+    <div className="space-y-3">
+      <Skeleton className="h-4 w-48" />
+      <Skeleton className="h-4 w-72" />
+      <Skeleton className="h-24 w-full rounded-[--radius-lg]" />
+    </div>
+  )
+};
+
+export const FullyRounded: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Skeleton rounded="full" className="h-10 w-10" />
+      <Skeleton rounded="full" className="h-12 w-12" />
+      <Skeleton rounded="full" className="h-16 w-16" />
+    </div>
+  )
+};
+
+export const AvatarWithText: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Skeleton rounded="full" className="h-12 w-12" />
+      <div className="flex-1 space-y-2">
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-3 w-48" />
+      </div>
+    </div>
+  )
+};
+
+