@neoptocom/neopto-ui 0.4.0 → 0.5.0

package/src/components/Search.tsx

@@ -0,0 +1,244 @@
+import * as React from "react";
+import { useId, useMemo, useRef, useState, useCallback } from "react";
+import { IconButton } from "./IconButton";
+import Typo from "./Typo";
+import Avatar from "./Avatar";
+import AvatarGroup from "./AvatarGroup";
+
+export type SearchOption = {
+  label: string;
+  value: any;
+  image?: string;
+  group?: Array<{ name: string; image?: string }>;
+};
+
+export interface SearchProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** Array of options to display */
+  options: SearchOption[] | string[];
+  /** Callback when search is performed (debounced) */
+  onSearch: (query: string) => void;
+  /** Currently selected option */
+  selectedOption: SearchOption | string | null;
+  /** Callback when an option is selected */
+  onSelect: (option: SearchOption | string | null) => void;
+  /** Search delay in milliseconds (default: 300ms) */
+  searchDelay?: number;
+  /** Whether the component is disabled */
+  disabled?: boolean;
+  /** Maximum height of the options dropdown */
+  maxHeight?: number;
+  /** Optional id base (for accessibility hooks) */
+  id?: string;
+  /** Optional filter children to render when filters are expanded */
+  children?: React.ReactNode;
+}
+
+export default function Search({
+  className = "",
+  options,
+  onSearch,
+  selectedOption,
+  onSelect,
+  searchDelay = 300,
+  disabled = false,
+  maxHeight = 152,
+  id,
+  children,
+  ...props
+}: SearchProps) {
+  const inputId = id ?? useId();
+  const listboxId = `${inputId}-listbox`;
+  const [searchQuery, setSearchQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
+  const [filtersExpanded, setFiltersExpanded] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const searchTimeoutRef = useRef<number | null>(null);
+
+  // Normalize options
+  const normalizedOptions: SearchOption[] = useMemo(() => {
+    if (Array.isArray(options) && typeof options[0] === "string") {
+      return (options as string[]).map((str) => ({ label: str, value: str }));
+    }
+    return options as SearchOption[];
+  }, [options]);
+
+  const anyOptionHasImage = useMemo(
+    () => normalizedOptions.some((o) => !!o.image),
+    [normalizedOptions]
+  );
+
+  const displayValue =
+    selectedOption != null
+      ? typeof selectedOption === "string"
+        ? selectedOption
+        : selectedOption.label
+      : searchQuery;
+
+  // Debounced search function
+  const debouncedSearch = useCallback(
+    (query: string) => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      searchTimeoutRef.current = window.setTimeout(() => {
+        onSearch(query);
+      }, searchDelay);
+    },
+    [onSearch, searchDelay]
+  );
+
+  function openList() {
+    if (disabled) return;
+    setOpen(true);
+  }
+  function closeList() {
+    setOpen(false);
+    setActiveIndex(-1);
+  }
+  function handleSelect(option: SearchOption) {
+    onSelect(option);
+    setSearchQuery("");
+    closeList();
+  }
+  function handleClear() {
+    onSelect(null);
+    setSearchQuery("");
+    closeList();
+  }
+
+  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      setOpen(true);
+      setActiveIndex(0);
+      e.preventDefault();
+      return;
+    }
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, normalizedOptions.length - 1));
+      scrollActiveIntoView();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+      scrollActiveIntoView();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const item = normalizedOptions[activeIndex];
+      if (item) handleSelect(item);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      closeList();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActiveIndex(0);
+      scrollActiveIntoView();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActiveIndex(normalizedOptions.length - 1);
+      scrollActiveIntoView();
+    }
+  }
+
+  function scrollActiveIntoView() {
+    const list = listRef.current;
+    const idx = activeIndex;
+    if (!list || idx < 0) return;
+    const el = list.children[idx] as HTMLElement | undefined;
+    el?.scrollIntoView({ block: "nearest" });
+  }
+
+  // Cleanup timeout on unmount
+  React.useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      ref={rootRef}
+      className={["relative w-full", className].join(" ")}
+      {...props}
+    >
+      <div
+        className={[
+          "w-full min-w-0 border rounded-[24px] bg-[var(--surface)] transition-all",
+          "border-[var(--border)] focus-within:border-[var(--color-brand)]",
+          disabled ? "opacity-60 cursor-not-allowed" : "",
+          !filtersExpanded && "h-12"
+        ].join(" ")}
+      >
+        <div className="relative flex h-full">
+          <div className={[
+            "flex flex-col w-full overflow-hidden transition-all",
+            filtersExpanded && children ? "h-auto pb-3" : "h-full"
+          ].join(" ")}>
+          <div className="flex w-full items-center h-12 px-2">
+            {/* Filter button (if children exist) */}
+            {children && (
+              <IconButton
+                icon="filter_list"
+                onClick={() => setFiltersExpanded((prev) => !prev)}
+                disabled={disabled}
+                aria-label={filtersExpanded ? "Hide filters" : "Show filters"}
+                aria-expanded={filtersExpanded}
+                className="mr-2"
+              />
+            )}
+            {/* Input */}
+            <input
+              id={inputId}
+              role="combobox"
+              aria-expanded={open}
+              aria-controls={listboxId}
+              aria-autocomplete="list"
+              aria-disabled={disabled || undefined}
+              type="text"
+              value={displayValue}
+              onChange={(e) => {
+                const query = e.target.value;
+                setSearchQuery(query);
+                debouncedSearch(query);
+                if (!open) setOpen(true);
+                setActiveIndex(0);
+              }}
+              onFocus={openList}
+              onKeyDown={onKeyDown}
+              onBlur={() => setTimeout(closeList, 150)}
+              disabled={disabled}
+              style={{ fontFamily: 'var(--font-display)', fontSize: '16px' }}
+              className={[
+                "w-full rounded-full border-0 outline-none bg-transparent h-12",
+                "leading-tight text-[var(--fg)] placeholder:text-[var(--muted-fg)]",
+                "px-2"
+              ].join(" ")}
+              placeholder="Pesquisar"
+              onClick={() => !disabled && setOpen(true)}
+            />
+            {/* Action button (clear or expand) */}
+            <IconButton
+              icon="search"
+              onClick={
+                selectedOption && !open ? handleClear : () => setOpen((s) => !s)
+              }
+              disabled={disabled}
+              aria-label={selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand"}
+            />
+          </div>
+          {children && (
+            <div className="w-full px-4.5 pb-3 pt-2">
+              {children}
+            </div>
+          )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/Skeleton.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+};
+
+const roundMap: Record<NonNullable<SkeletonProps["rounded"]>, string> = {
+  none: "rounded-none",
+  sm: "rounded-[var(--radius-sm)]",
+  md: "rounded-[var(--radius-md)]",
+  lg: "rounded-[var(--radius-lg)]",
+  xl: "rounded-[var(--radius-xl)]",
+  full: "rounded-full"
+};
+
+export function Skeleton({ className = "", rounded = "md", ...props }: SkeletonProps) {
+  return (
+    <div
+      className={[
+        "animate-pulse bg-[var(--muted)]",
+        roundMap[rounded],
+        className
+      ].join(" ")}
+      {...props}
+    />
+  );
+}
+
+

package/src/components/Typo.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+
+export type TypoVariant =
+  | "display-lg" | "display-md" | "display-sm"
+  | "headline-lg" | "headline-md" | "headline-sm"
+  | "title-lg" | "title-md" | "title-sm"
+  | "label-lg" | "label-md" | "label-sm"
+  | "body-lg" | "body-md" | "body-sm"
+  | "button";
+
+export type TypoWeight = "normal" | "medium" | "semibold" | "bold";
+
+const styles = tv({
+  base: "text-current",
+  variants: {
+    variant: {
+      "display-lg": "text-5xl leading-tight",
+      "display-md": "text-4xl leading-tight",
+      "display-sm": "text-4xl leading-tight",
+      "headline-lg": "text-3xl leading-tight",
+      "headline-md": "text-3xl leading-tight",
+      "headline-sm": "text-3xl leading-tight",
+      "title-lg": "text-xl leading-tight",
+      "title-md": "text-lg leading-tight",
+      "title-sm": "text-base leading-tight",
+      "label-lg": "text-sm leading-tight",
+      "label-md": "text-xs leading-tight",
+      "label-sm": "text-xs leading-tight",
+      "body-lg": "text-base leading-relaxed",
+      "body-md": "text-sm leading-relaxed",
+      "body-sm": "text-xs leading-relaxed",
+      "button": "text-base leading-normal"
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    },
+    muted: {
+      true: "text-[var(--muted-fg)]"
+    }
+  },
+  defaultVariants: {
+    weight: "normal"
+  }
+});
+
+export type TypoProps<T extends React.ElementType = "span"> = {
+  /**
+   * Typography scale name (e.g., "title-md", "body-sm", "display-lg").
+   * Uses Tailwind utilities with design tokens for consistent theming.
+   */
+  variant: TypoVariant;
+  /** Optional font weight override */
+  bold?: TypoWeight;
+  /** Use muted foreground token */
+  muted?: boolean;
+  /** Render as a different element (e.g., "p", "h3") */
+  as?: T;
+  children: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "children">;
+
+export default function Typo<T extends React.ElementType = "span">({
+  variant,
+  bold,
+  muted,
+  as,
+  className,
+  children,
+  ...props
+}: TypoProps<T>) {
+  const Component = (as ?? "span") as React.ElementType;
+  
+  // Determine font family based on variant
+  const getFontFamily = (variant: TypoVariant) => {
+    if (variant.startsWith("body")) {
+      return "var(--font-body)";
+    }
+    return "var(--font-display)";
+  };
+  
+  return (
+    <Component
+      className={styles({ variant, weight: bold, muted, className })}
+      style={{ fontFamily: getFontFamily(variant) }}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+// Components
+export * from "./components/Input";
+export * from "./components/Modal";
+export { default as Typo } from "./components/Typo";
+export { default as Avatar } from "./components/Avatar";
+export { default as AvatarGroup } from "./components/AvatarGroup";
+export * from "./components/Skeleton";
+export { default as Autocomplete } from "./components/Autocomplete";
+export { default as Search } from "./components/Search";
+export { Button } from "./components/Button";
+export { IconButton } from "./components/IconButton";
+export { default as Icon } from "./components/Icon";
+export { default as Chip } from "./components/Chip";
+export { default as Counter } from "./components/Counter";
+export * from "./components/Chat";
+
+// Types
+export type { InputProps } from "./components/Input";
+export type { ModalProps } from "./components/Modal";
+export type { TypoProps, TypoVariant, TypoWeight } from "./components/Typo";
+export type { AvatarProps } from "./components/Avatar";
+export type { AvatarGroupProps } from "./components/AvatarGroup";
+export type { SkeletonProps } from "./components/Skeleton";
+export type { AutocompleteProps, AutocompleteOption } from "./components/Autocomplete";
+export type { SearchProps, SearchOption } from "./components/Search";
+export type { ButtonProps } from "./components/Button";
+export type { IconButtonProps } from "./components/IconButton";
+export type { IconProps } from "./components/Icon";
+export type { ChipProps } from "./components/Chip";
+export type { CounterProps } from "./components/Counter";
+export type { ChatButtonProps } from "./components/Chat";

package/src/stories/Autocomplete.stories.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Autocomplete, { type AutocompleteOption } from "../components/Autocomplete";
+
+const OPTIONS: AutocompleteOption[] = [
+  { 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" }
+];
+
+const meta: Meta<typeof Autocomplete> = {
+  title: "Components/Autocomplete",
+  component: Autocomplete,
+  args: {
+    title: "Assignee",
+    options: OPTIONS,
+    selectedOption: null,
+    placeholder: "Search people…",
+    disabled: false,
+    maxHeight: 180
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Autocomplete>;
+
+export const Playground: Story = {
+  render: (args) => {
+    const [value, setValue] = React.useState<AutocompleteOption | string | null>(args.selectedOption);
+    return (
+      <div className="max-w-md">
+        <Autocomplete {...args} selectedOption={value} onSelect={setValue} />
+        <div className="mt-3 text-xs text-[--muted-fg]">
+          Selected: {typeof value === "string" ? value : value?.label ?? "none"}
+        </div>
+      </div>
+    );
+  }
+};

package/src/stories/Avatar.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Avatar from "../components/Avatar";
+
+const meta: Meta<typeof Avatar> = {
+  title: "Components/Avatar",
+  component: Avatar,
+  args: {
+    name: "Ada Lovelace",
+    size: "sm"
+  },
+  argTypes: {
+    size: { control: "radio", options: ["sm", "md"] }
+  }
+};
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const WithImage: Story = {
+  args: {
+    src: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=256&auto=format&fit=facearea&facepad=2"
+  }
+};
+
+export const DifferentSizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Avatar name="Ada Lovelace" size="sm" color="#5ABDCC"/>
+      <Avatar name="Grace Hopper" size="md" color="#22A9CB"/>
+    </div>)
+};
+
+
+export const CustomColor: Story = {
+  args: {
+    name: "Grace Hopper",
+    color: "#5ABDCC"
+  }
+};

package/src/stories/AvatarGroup.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Avatar from "../components/Avatar";
+import AvatarGroup from "../components/AvatarGroup";
+
+const meta: Meta<typeof AvatarGroup> = {
+  title: "Components/AvatarGroup",
+  component: AvatarGroup,
+  args: {
+    max: 5,
+    withRings: true,
+    overlapPx: 8
+  }
+};
+export default meta;
+type Story = StoryObj<typeof AvatarGroup>;
+
+const sample = [
+  { name: "Ada Lovelace", src: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=128&auto=format&fit=facearea&facepad=2" },
+  { name: "Grace Hopper", src: "https://images.unsplash.com/photo-1545184180-25d471fe75d8?q=80&w=128&auto=format&fit=facearea&facepad=2" },
+  { name: "Alan Turing"  },
+  { name: "Edsger Dijkstra" },
+  { name: "Barbara Liskov" },
+  { name: "Donald Knuth" }
+];
+
+export const Default: Story = {
+  render: (args) => (
+    <AvatarGroup {...args}>
+      {sample.map((p, i) => (
+        <Avatar key={i} name={p.name} src={p.src} size="sm" />
+      ))}
+    </AvatarGroup>
+  )
+};
+
+export const LimitedWithCounter: Story = {
+  args: { max: 3 },
+  render: (args) => (
+    <AvatarGroup {...args}>
+      {sample.map((p, i) => (
+        <Avatar key={i} name={p.name} src={p.src} size="sm" />
+      ))}
+    </AvatarGroup>
+  )
+};
+

package/src/stories/Button.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../components/Button";
+import Icon from "../components/Icon";
+import Typo from "../components/Typo";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  args: {
+    children: "Button",
+    variant: "primary",
+    size: "md",
+    disabled: false
+  },
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["primary", "secondary", "ghost"]
+    },
+    size: {
+      control: "radio", 
+      options: ["sm", "md", "lg"]
+    },
+    fullWidth: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Playground: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button variant="primary">
+        <Typo variant="title-sm" bold="semibold">Primary</Typo>
+      </Button>
+      <Button variant="secondary">
+        <Typo variant="title-sm" bold="semibold">Secondary</Typo>
+      </Button>
+      <Button variant="ghost">
+        <Typo variant="title-sm" bold="semibold">Ghost</Typo>
+      </Button>
+    </div>
+  )
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button size="sm">
+        <Typo variant="title-sm" bold="semibold">Small</Typo>
+      </Button>
+      <Button size="md">
+        <Typo variant="title-sm" bold="semibold">Medium</Typo>
+      </Button>
+      <Button size="lg">
+        <Typo variant="title-sm" bold="semibold">Large</Typo>
+      </Button>
+    </div>
+  )
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button>
+        <Typo variant="title-sm" bold="semibold">Default</Typo>
+      </Button>
+      <Button disabled>
+        <Typo variant="title-sm" bold="semibold">Disabled</Typo>
+      </Button>
+      <Button fullWidth>
+        <Typo variant="title-sm" bold="semibold">Full Width</Typo>
+      </Button>
+    </div>
+  )
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button>
+        <Icon name="add" />
+        <Typo variant="title-sm" bold="semibold">Add Item</Typo>
+      </Button>
+      <Button variant="secondary">
+        <Icon name="delete" />
+        <Typo variant="title-sm" bold="semibold">Delete</Typo>
+      </Button>
+      <Button variant="ghost">
+        <Icon name="settings" />
+        <Typo variant="title-sm" bold="semibold">Settings</Typo>
+      </Button>
+    </div>
+  )
+};