@a2v2ai/uikit 0.0.37 → 0.0.38

package/Input/Input.stories.tsx

@@ -0,0 +1,566 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Search, Mail, Eye, EyeOff, Info, User, Lock } from "../icons"
+import { Typography } from "../Typography/Typography"
+import { Flex } from "../Flex/Flex"
+import { Button } from "../Button/Button"
+import { Input } from "./Input"
+
+const meta: Meta<typeof Input> = {
+  title: "Components/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["mini", "small", "regular", "large"],
+    },
+    roundness: {
+      control: "select",
+      options: ["default", "round"],
+    },
+    variant: {
+      control: "select",
+      options: ["default", "error"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text...",
+  },
+}
+
+export const WithBuiltInLabel: Story = {
+  render: () => (
+    <Flex gap={4} style={{ width: "320px" }}>
+      <Input
+        id="email"
+        label="Email Address"
+        labelVariant="body2"
+        labelColor="main-800"
+        placeholder="Enter your email"
+      />
+      <Input
+        id="password"
+        label="Password"
+        labelVariant="body2"
+        labelColor="main-800"
+        type="password"
+        placeholder="Enter your password"
+      />
+    </Flex>
+  ),
+}
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: "Hello World",
+  },
+}
+
+export const Placeholder: Story = {
+  args: {
+    placeholder: "Type something...",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+  },
+}
+
+export const DisabledWithValue: Story = {
+  args: {
+    defaultValue: "Cannot edit this",
+    disabled: true,
+  },
+}
+
+export const Error: Story = {
+  args: {
+    defaultValue: "Invalid value",
+    variant: "error",
+  },
+}
+
+export const ErrorWithMessage: Story = {
+  args: {
+    defaultValue: "invalid-email",
+    error: "Please enter a valid email address",
+  },
+}
+
+export const ErrorWithIcon: Story = {
+  render: () => (
+    <Flex style={{ width: "320px" }}>
+      <Input
+        leftIcon={<Mail size={16} />}
+        defaultValue="invalid@"
+        error="Please enter a valid email address"
+      />
+    </Flex>
+  ),
+}
+
+export const FormikTouchedUntouched: Story = {
+  render: function FormikExample() {
+    const [values, setValues] = useState({ email: "", password: "" })
+    const [touched, setTouched] = useState({ email: false, password: false })
+    const [errors] = useState({ email: "Please enter a valid email", password: "Password is required" })
+
+    const handleBlur = (field: "email" | "password") => {
+      setTouched((prev) => ({ ...prev, [field]: true }))
+    }
+
+    const handleChange = (field: "email" | "password", value: string) => {
+      setValues((prev) => ({ ...prev, [field]: value }))
+    }
+
+    return (
+      <Flex gap={6} style={{ width: "320px" }}>
+        <Typography variant="subtitle2" color="main-700">
+          Formik-style touched/untouched validation
+        </Typography>
+        <Typography variant="caption" color="grey-500">
+          Error messages only show after field is touched (blurred)
+        </Typography>
+
+        <Flex gap={4}>
+          <Flex gap={1}>
+            <Typography variant="body3" color="main-600">Email</Typography>
+            <Input
+              type="email"
+              placeholder="Enter email"
+              leftIcon={<Mail size={16} />}
+              value={values.email}
+              onChange={(e) => handleChange("email", e.target.value)}
+              onBlur={() => handleBlur("email")}
+              error={touched.email && errors.email ? errors.email : undefined}
+            />
+            <Typography variant="caption" color="grey-400">
+              {touched.email ? "Touched" : "Untouched"}
+            </Typography>
+          </Flex>
+
+          <Flex gap={1}>
+            <Typography variant="body3" color="main-600">Password</Typography>
+            <Input
+              type="password"
+              placeholder="Enter password"
+              leftIcon={<Lock size={16} />}
+              value={values.password}
+              onChange={(e) => handleChange("password", e.target.value)}
+              onBlur={() => handleBlur("password")}
+              error={touched.password && errors.password ? errors.password : undefined}
+            />
+            <Typography variant="caption" color="grey-400">
+              {touched.password ? "Touched" : "Untouched"}
+            </Typography>
+          </Flex>
+        </Flex>
+
+        <Button
+          variant="secondary"
+          size="small"
+          onClick={() => setTouched({ email: false, password: false })}
+        >
+          Reset Touched State
+        </Button>
+      </Flex>
+    )
+  },
+}
+
+export const WithLeftIcon: Story = {
+  args: {
+    placeholder: "Search...",
+    leftIcon: <Search size={16} />,
+  },
+}
+
+export const WithRightIcon: Story = {
+  args: {
+    placeholder: "Enter email",
+    rightIcon: <Info size={16} />,
+  },
+}
+
+export const WithBothIcons: Story = {
+  args: {
+    placeholder: "Search users...",
+    leftIcon: <Search size={16} />,
+    rightIcon: <User size={16} />,
+  },
+}
+
+export const WithAddons: Story = {
+  render: () => (
+    <Flex gap={4} style={{ width: "320px" }}>
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">URL Input</Typography>
+        <Input leftAddon="https://" placeholder="example.com" />
+      </Flex>
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Currency Input</Typography>
+        <Input leftAddon="$" rightAddon="USD" placeholder="0.00" />
+      </Flex>
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Email Input</Typography>
+        <Input leftIcon={<Mail size={16} />} placeholder="you@example.com" />
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const PasswordInput: Story = {
+  render: function PasswordInputStory() {
+    const [showPassword, setShowPassword] = useState(false)
+    return (
+      <Flex style={{ width: "320px" }}>
+        <Input
+          type={showPassword ? "text" : "password"}
+          placeholder="Enter password"
+          leftIcon={<Lock size={16} />}
+          rightIcon={
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              style={{ background: "none", border: "none", cursor: "pointer", padding: 0 }}
+            >
+              {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+            </button>
+          }
+        />
+      </Flex>
+    )
+  },
+}
+
+export const SearchWithButton: Story = {
+  render: () => (
+    <Flex style={{ width: "320px" }}>
+      <Input
+        placeholder="Type to search..."
+        rightElement={
+          <Button size="small" variant="secondary">
+            Search
+          </Button>
+        }
+      />
+    </Flex>
+  ),
+}
+
+export const AllVariantsAndSizes: Story = {
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: () => (
+    <Flex style={{ padding: "32px", backgroundColor: "#ffffff", minHeight: "100vh" }}>
+      {/* Header */}
+      <Flex style={{ borderBottom: "1px solid #e5e7eb", paddingBottom: "24px", marginBottom: "32px" }}>
+        <Typography variant="h3" color="main-950">Input</Typography>
+      </Flex>
+
+      {/* Main Content */}
+      <Flex gap={12}>
+        {/* Default Roundness Section */}
+        <Flex gap={6}>
+          <Typography variant="subtitle1" color="main-700">Default Roundness</Typography>
+
+          {/* Size Headers */}
+          <Flex direction="row">
+            <Flex style={{ width: "120px" }} />
+            <Flex direction="row" gap={4}>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Regular</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Large</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Small</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Mini</Typography>
+              </Flex>
+            </Flex>
+          </Flex>
+
+          {/* Empty Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Empty</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Placeholder Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Placeholder</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" placeholder="Value" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Value Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Value</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" defaultValue="Value" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Focus Row - simulated with ring */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Focus</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Error Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="error-500">Error</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" defaultValue="Value" variant="error" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Error Focus Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="error-500">Error Focus</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Disabled Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-400">Disabled</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" defaultValue="Value" disabled /></Flex>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* Round Section */}
+        <Flex gap={6}>
+          <Typography variant="subtitle1" color="main-700">Round</Typography>
+
+          {/* Size Headers */}
+          <Flex direction="row">
+            <Flex style={{ width: "120px" }} />
+            <Flex direction="row" gap={4}>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Regular</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Large</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Small</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Mini</Typography>
+              </Flex>
+            </Flex>
+          </Flex>
+
+          {/* Empty Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Empty</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Placeholder Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Placeholder</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" placeholder="Value" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Value Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Value</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" defaultValue="Value" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Focus Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Focus</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Error Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="error-500">Error</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" defaultValue="Value" variant="error" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Error Focus Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="error-500">Error Focus</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Disabled Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-400">Disabled</Typography>
+            </Flex>
+            <Flex direction="row" gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" defaultValue="Value" disabled /></Flex>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* Examples Section */}
+        <Flex gap={6} style={{ marginTop: "24px", paddingTop: "24px", borderTop: "1px solid #e5e7eb" }}>
+          <Typography variant="subtitle1" color="main-700">Examples</Typography>
+
+          <Flex direction="row" gap={6} wrap="wrap">
+            {/* Search with results */}
+            <Flex gap={2}>
+              <Typography variant="body3" color="main-500">Search Input</Typography>
+              <Input
+                leftIcon={<Search size={16} />}
+                defaultValue="Value"
+                rightAddon="12 results"
+                style={{ width: "280px" }}
+              />
+            </Flex>
+
+            {/* URL Input */}
+            <Flex gap={2}>
+              <Typography variant="body3" color="main-500">URL Input</Typography>
+              <Input
+                leftAddon="https://"
+                defaultValue="example.com"
+                rightIcon={<Info size={16} />}
+                style={{ width: "280px" }}
+              />
+            </Flex>
+
+            {/* Search with Button */}
+            <Flex gap={2}>
+              <Typography variant="body3" color="main-500">Search with Button</Typography>
+              <Input
+                placeholder="Type to search..."
+                rightElement={
+                  <Button size="small" variant="secondary">
+                    Search
+                  </Button>
+                }
+                style={{ width: "280px" }}
+              />
+            </Flex>
+
+            {/* Currency Input */}
+            <Flex gap={2}>
+              <Typography variant="body3" color="main-500">Currency Input</Typography>
+              <Input
+                leftAddon="$"
+                defaultValue="0.00"
+                rightAddon="USD"
+                style={{ width: "280px" }}
+              />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}