add input and select components

.changeset/blue-pumpkins-complain.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": minor
+---
+
+add input and select components

src/components/Dialog/Dialog.stories.tsx

@@ -5,7 +5,7 @@ import { Dialog, DialogFooter, DialogBody, DialogHeader } from "./index";
 
 import { ScrollLocker } from "@/context/Dialog.context";
 import { Button } from "@/components/Button";
-import { Checkbox } from "@/components/Input";
+import { Checkbox } from "@/components/Inputs";
 import { Text } from "@/components/Text";
 import { Heading } from "@/index";
 

src/components/Dialog/MobileDialog.stories.tsx

@@ -5,7 +5,7 @@ import { MobileDialog, DialogFooter, DialogBody, DialogHeader } from "./index";
 
 import { ScrollLocker } from "@/context/Dialog.context";
 import { Button } from "@/components/Button";
-import { Checkbox } from "@/components/Input";
+import { Checkbox } from "@/components/Inputs";
 import { Text } from "@/components/Text";
 
 const meta: Meta<typeof MobileDialog> = {

src/components/Inputs/Input.css

@@ -0,0 +1,15 @@
+.bbn-input {
+  @apply relative flex items-center rounded border border-primary-light/20 bg-secondary-contrast px-4 py-2 text-primary-light transition-colors;
+
+  &:focus-within {
+    @apply border-primary-light;
+  }
+
+  &-field {
+    @apply w-full bg-transparent text-sm outline-none placeholder:text-primary-light/50;
+  }
+
+  &-suffix {
+    @apply ml-2 flex items-center text-primary-light/50;
+  }
+} 

src/components/Inputs/Input.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RiSearchLine } from "react-icons/ri";
+import { useState } from "react";
+
+import { Input } from "./Input";
+
+const meta: Meta<typeof Input> = {
+  component: Input,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Default input",
+  },
+};
+
+export const WithSuffix: Story = {
+  args: {
+    placeholder: "Search by Name or Public Key",
+    suffix: <RiSearchLine size={20} />,
+  },
+};
+
+export const WithClickableSuffix: Story = {
+  args: {
+    placeholder: "Click the search icon",
+    suffix: <RiSearchLine size={20} />,
+    onSuffixClick: () => alert("Search clicked!"),
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    placeholder: "Loading state",
+    suffix: <RiSearchLine size={20} />,
+    isLoading: true,
+  },
+};
+
+export const LoadingWithInteraction: Story = {
+  render: () => {
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleSearch = () => {
+      setIsLoading(true);
+      setTimeout(() => setIsLoading(false), 2000);
+    };
+
+    return (
+      <Input
+        placeholder="Click search to see loading"
+        suffix={<RiSearchLine size={20} />}
+        isLoading={isLoading}
+        onSuffixClick={handleSearch}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+  },
+};

src/components/Inputs/Input.tsx

@@ -0,0 +1,37 @@
+import { forwardRef, type DetailedHTMLProps, type InputHTMLAttributes, type ReactNode } from "react";
+import { twJoin } from "tailwind-merge";
+import { Loader } from "../Loader";
+import "./Input.css";
+
+export interface InputProps
+  extends Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "prefix" | "suffix"> {
+  className?: string;
+  wrapperClassName?: string;
+  suffix?: ReactNode;
+  isLoading?: boolean;
+  onSuffixClick?: () => void;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, wrapperClassName, suffix, isLoading, onSuffixClick, disabled, ...props }, ref) => {
+    return (
+      <div className={twJoin("bbn-input", wrapperClassName)}>
+        <input ref={ref} className={twJoin("bbn-input-field", className)} disabled={disabled || isLoading} {...props} />
+        {suffix && (
+          <div
+            className={twJoin(
+              "bbn-input-suffix",
+              onSuffixClick && !isLoading && "cursor-pointer hover:text-primary-main",
+              isLoading && "pointer-events-none",
+            )}
+            onClick={!isLoading ? onSuffixClick : undefined}
+          >
+            {isLoading ? <Loader size={20} /> : suffix}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";

src/components/Inputs/Select.css

@@ -0,0 +1,31 @@
+.bbn-select {
+  @apply relative;
+
+  &-trigger {
+    @apply flex w-full cursor-pointer items-center justify-between rounded border border-primary-light/20 bg-secondary-contrast px-4 py-2 text-sm text-primary-light transition-colors;
+
+    &:focus-within {
+      @apply border-primary-light;
+    }
+  }
+
+  &-icon {
+    @apply ml-2 text-primary-light/50 transition-transform;
+
+    &-open {
+      @apply rotate-180;
+    }
+  }
+
+  &-menu {
+    @apply z-50 mt-1 max-h-60 overflow-auto rounded border border-primary-light/20 bg-secondary-contrast py-1 shadow-lg;
+  }
+
+  &-option {
+    @apply cursor-pointer px-4 py-2 text-sm text-primary-light transition-colors hover:bg-primary-light/10;
+
+    &-selected {
+      @apply bg-primary-light/10;
+    }
+  }
+} 

src/components/Inputs/Select.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import { Select } from "./Select";
+
+const meta: Meta<typeof Select> = {
+  component: Select,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const options = [
+  { value: "active", label: "Active" },
+  { value: "inactive", label: "Inactive" },
+  { value: "pending", label: "Pending" },
+];
+
+export const Default: Story = {
+  args: {
+    options,
+    placeholder: "Select status",
+  },
+};
+
+export const Controlled: Story = {
+  args: {
+    options,
+    placeholder: "Select status",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("active");
+
+    return (
+      <Select
+        {...args}
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    options,
+    placeholder: "Select status",
+    disabled: true,
+  },
+};

src/components/Inputs/Select.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, useState, useCallback, type DetailedHTMLProps, type SelectHTMLAttributes } from "react";
+import { twJoin } from "tailwind-merge";
+import { RiArrowDownSLine } from "react-icons/ri";
+import { Portal } from "../Portal";
+import "./Select.css";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps
+  extends Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLDivElement>, HTMLDivElement>, "value" | "onChange"> {
+  options: SelectOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+  placeholder?: string;
+}
+
+export const Select = forwardRef<HTMLDivElement, SelectProps>(
+  ({ className, options, value, onChange, placeholder = "Select option", ...props }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedOption, setSelectedOption] = useState<SelectOption | undefined>(
+      options.find((option) => option.value === value),
+    );
+
+    const handleSelect = useCallback(
+      (option: SelectOption) => {
+        setSelectedOption(option);
+        onChange?.(option.value);
+        setIsOpen(false);
+      },
+      [onChange],
+    );
+
+    return (
+      <div className="bbn-select" ref={ref}>
+        <div className={twJoin("bbn-select-trigger", className)} onClick={() => setIsOpen(!isOpen)} {...props}>
+          <span>{selectedOption?.label || placeholder}</span>
+          <RiArrowDownSLine className={twJoin("bbn-select-icon", isOpen && "bbn-select-icon-open")} size={20} />
+        </div>
+
+        <Portal mounted={isOpen}>
+          <div className="bbn-select-menu">
+            {options.map((option) => (
+              <div
+                key={option.value}
+                className={twJoin(
+                  "bbn-select-option",
+                  selectedOption?.value === option.value && "bbn-select-option-selected",
+                )}
+                onClick={() => handleSelect(option)}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        </Portal>
+      </div>
+    );
+  },
+);
+
+Select.displayName = "Select";

src/components/Input/index.tsx → src/components/Inputs/index.tsx

@@ -1,2 +1,4 @@
 export * from "./Checkbox";
 export * from "./Radio";
+export * from "./Select";
+export * from "./Input";

src/index.tsx

@@ -5,7 +5,7 @@ export * from "./components/Text";
 export * from "./components/Heading";
 export * from "./components/Button";
 export * from "./components/Avatar";
-export * from "./components/Input";
+export * from "./components/Inputs";
 export * from "./components/Dialog";
 export * from "./components/Chip";
 export * from "./components/Portal";

tailwind.config.js

@@ -7,6 +7,7 @@ export default {
   theme: {
     colors: {
       current: "currentColor",
+      transparent: "transparent",
       primary: {
         DEFAULT: "#000000DE",
         main: "#042F40",