@a2v2ai/uikit 0.0.37 → 0.0.38

package/ErrorMessage/ErrorMessage.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { ErrorMessage } from "./ErrorMessage"
+import { Input } from "../Input/Input"
+import { Label } from "../Label/Label"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+
+const meta: Meta<typeof ErrorMessage> = {
+  title: "Components/ErrorMessage",
+  component: ErrorMessage,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    name: {
+      control: "text",
+      description: "The field name to check for errors",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ErrorMessage>
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-72">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" placeholder="Enter email" className="border-error-500" />
+      <ErrorMessage
+        name="email"
+        errors={{ email: "Please enter a valid email address" }}
+      />
+    </div>
+  ),
+}
+
+export const WithTouched: Story = {
+  render: () => (
+    <Flex gap={4} className="w-72">
+      <div>
+        <Label htmlFor="username">Username (touched)</Label>
+        <Input id="username" placeholder="Enter username" className="border-error-500" />
+        <ErrorMessage
+          name="username"
+          errors={{ username: "Username is required" }}
+          touched={{ username: true }}
+        />
+      </div>
+      <div>
+        <Label htmlFor="password">Password (not touched - no error shown)</Label>
+        <Input id="password" type="password" placeholder="Enter password" />
+        <ErrorMessage
+          name="password"
+          errors={{ password: "Password is required" }}
+          touched={{ password: false }}
+        />
+      </div>
+    </Flex>
+  ),
+}
+
+export const NoError: Story = {
+  render: () => (
+    <div className="w-72">
+      <Label htmlFor="name">Name</Label>
+      <Input id="name" placeholder="Enter name" />
+      <ErrorMessage
+        name="name"
+        errors={{}}
+      />
+      <Typography variant="caption" color="grey-500" className="mt-2">
+        No error message shown when field has no errors
+      </Typography>
+    </div>
+  ),
+}
+
+export const FormExample: Story = {
+  render: () => {
+    const [errors] = React.useState({
+      email: "Please enter a valid email address",
+      password: "Password must be at least 8 characters",
+    })
+    const [touched] = React.useState({
+      email: true,
+      password: true,
+    })
+
+    return (
+      <Flex gap={4} className="w-80">
+        <Typography variant="h4">Sign Up Form</Typography>
+        <div>
+          <Label htmlFor="form-email">Email</Label>
+          <Input
+            id="form-email"
+            type="email"
+            placeholder="you@example.com"
+            className={touched.email && errors.email ? "border-error-500 focus-visible:ring-error-500" : ""}
+          />
+          <ErrorMessage name="email" errors={errors} touched={touched} />
+        </div>
+        <div>
+          <Label htmlFor="form-password">Password</Label>
+          <Input
+            id="form-password"
+            type="password"
+            placeholder="••••••••"
+            className={touched.password && errors.password ? "border-error-500 focus-visible:ring-error-500" : ""}
+          />
+          <ErrorMessage name="password" errors={errors} touched={touched} />
+        </div>
+      </Flex>
+    )
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex gap={6} className="w-80">
+      <div>
+        <Typography variant="h4" className="mb-4">Error Message Examples</Typography>
+      </div>
+
+      <div>
+        <Typography variant="body2" color="grey-600" className="mb-2">Basic Error</Typography>
+        <Label htmlFor="v1">Field with error</Label>
+        <Input id="v1" className="border-error-500" />
+        <ErrorMessage name="field" errors={{ field: "This field is required" }} />
+      </div>
+
+      <div>
+        <Typography variant="body2" color="grey-600" className="mb-2">Long Error Message</Typography>
+        <Label htmlFor="v2">Email</Label>
+        <Input id="v2" className="border-error-500" />
+        <ErrorMessage
+          name="email"
+          errors={{ email: "The email address you entered is not valid. Please check the format and try again." }}
+        />
+      </div>
+
+      <div>
+        <Typography variant="body2" color="grey-600" className="mb-2">With Custom Class</Typography>
+        <Label htmlFor="v3">Username</Label>
+        <Input id="v3" className="border-error-500" />
+        <ErrorMessage
+          name="username"
+          errors={{ username: "Username already taken" }}
+          className="font-medium"
+        />
+      </div>
+    </Flex>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+}

package/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Typography, type TypographyColor } from "../Typography/Typography"
+import { cn } from "../lib/utils"
+
+export interface ErrorMessageProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+  /**
+   * The field name to check for errors
+   */
+  name: string
+  /**
+   * Object containing error messages keyed by field name
+   */
+  errors: Record<string, string | undefined>
+  /**
+   * Optional object containing touched state keyed by field name
+   * If provided, error is only shown when field is touched
+   */
+  touched?: Record<string, boolean | undefined>
+  /**
+   * Color variant for the error message
+   * @default "error-600"
+   */
+  color?: TypographyColor
+}
+
+function ErrorMessage({
+  name,
+  errors,
+  touched,
+  className,
+  color = "error-600",
+  ...props
+}: ErrorMessageProps) {
+  const hasError = errors && typeof errors[name] === "string"
+  const shouldShow = touched ? hasError && touched[name] : hasError
+
+  if (!shouldShow) {
+    return null
+  }
+
+  return (
+    <Typography
+      variant="caption"
+      color={color}
+      className={cn("mt-1", className)}
+      {...props}
+    >
+      {errors[name]}
+    </Typography>
+  )
+}
+
+ErrorMessage.displayName = "ErrorMessage"
+
+export { ErrorMessage }

package/Flex/Flex.stories.tsx

@@ -0,0 +1,390 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Typography } from "../Typography/Typography"
+import { Flex } from "./Flex"
+
+const meta: Meta<typeof Flex> = {
+  title: "Layout/Flex",
+  component: Flex,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    direction: {
+      control: "select",
+      options: ["row", "column", "row-reverse", "column-reverse"],
+      description: "The flex direction",
+    },
+    align: {
+      control: "select",
+      options: ["start", "center", "end", "stretch", "baseline"],
+      description: "Align items (cross axis)",
+    },
+    justify: {
+      control: "select",
+      options: ["start", "center", "end", "between", "around", "evenly"],
+      description: "Justify content (main axis)",
+    },
+    wrap: {
+      control: "select",
+      options: ["nowrap", "wrap", "wrap-reverse"],
+      description: "Flex wrap behavior",
+    },
+    gap: {
+      control: "select",
+      options: [0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48],
+      description: "Gap between items",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Flex>
+
+const Box = ({ children, className = "" }: { children?: React.ReactNode; className?: string }) => (
+  <div className={`bg-accent-100 border border-accent-300 rounded-md p-4 text-accent-700 font-medium ${className}`}>
+    {children}
+  </div>
+)
+
+export const Default: Story = {
+  args: {
+    direction: "column",
+    align: "stretch",
+    justify: "start",
+    gap: 4,
+  },
+  render: (args) => (
+    <Flex {...args} className="w-64">
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+    </Flex>
+  ),
+}
+
+export const Row: Story = {
+  render: () => (
+    <Flex direction="row" gap={4}>
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+    </Flex>
+  ),
+}
+
+export const Column: Story = {
+  render: () => (
+    <Flex direction="column" gap={4}>
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+    </Flex>
+  ),
+}
+
+export const RowReverse: Story = {
+  render: () => (
+    <Flex direction="row-reverse" gap={4}>
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+    </Flex>
+  ),
+}
+
+export const ColumnReverse: Story = {
+  render: () => (
+    <Flex direction="column-reverse" gap={4}>
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+    </Flex>
+  ),
+}
+
+export const AlignStart: Story = {
+  render: () => (
+    <Flex direction="row" align="start" gap={4} className="h-32 bg-main-50 p-4 rounded-lg">
+      <Box>Short</Box>
+      <Box className="h-full">Tall</Box>
+      <Box>Short</Box>
+    </Flex>
+  ),
+}
+
+export const AlignCenter: Story = {
+  render: () => (
+    <Flex direction="row" align="center" gap={4} className="h-32 bg-main-50 p-4 rounded-lg">
+      <Box>Short</Box>
+      <Box className="h-full">Tall</Box>
+      <Box>Short</Box>
+    </Flex>
+  ),
+}
+
+export const AlignEnd: Story = {
+  render: () => (
+    <Flex direction="row" align="end" gap={4} className="h-32 bg-main-50 p-4 rounded-lg">
+      <Box>Short</Box>
+      <Box className="h-full">Tall</Box>
+      <Box>Short</Box>
+    </Flex>
+  ),
+}
+
+export const AlignStretch: Story = {
+  render: () => (
+    <Flex direction="row" align="stretch" gap={4} className="h-32 bg-main-50 p-4 rounded-lg">
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+    </Flex>
+  ),
+}
+
+export const JustifyStart: Story = {
+  render: () => (
+    <Flex direction="row" justify="start" gap={4} className="w-96 bg-main-50 p-4 rounded-lg">
+      <Box>1</Box>
+      <Box>2</Box>
+      <Box>3</Box>
+    </Flex>
+  ),
+}
+
+export const JustifyCenter: Story = {
+  render: () => (
+    <Flex direction="row" justify="center" gap={4} className="w-96 bg-main-50 p-4 rounded-lg">
+      <Box>1</Box>
+      <Box>2</Box>
+      <Box>3</Box>
+    </Flex>
+  ),
+}
+
+export const JustifyEnd: Story = {
+  render: () => (
+    <Flex direction="row" justify="end" gap={4} className="w-96 bg-main-50 p-4 rounded-lg">
+      <Box>1</Box>
+      <Box>2</Box>
+      <Box>3</Box>
+    </Flex>
+  ),
+}
+
+export const JustifyBetween: Story = {
+  render: () => (
+    <Flex direction="row" justify="between" className="w-96 bg-main-50 p-4 rounded-lg">
+      <Box>1</Box>
+      <Box>2</Box>
+      <Box>3</Box>
+    </Flex>
+  ),
+}
+
+export const JustifyAround: Story = {
+  render: () => (
+    <Flex direction="row" justify="around" className="w-96 bg-main-50 p-4 rounded-lg">
+      <Box>1</Box>
+      <Box>2</Box>
+      <Box>3</Box>
+    </Flex>
+  ),
+}
+
+export const JustifyEvenly: Story = {
+  render: () => (
+    <Flex direction="row" justify="evenly" className="w-96 bg-main-50 p-4 rounded-lg">
+      <Box>1</Box>
+      <Box>2</Box>
+      <Box>3</Box>
+    </Flex>
+  ),
+}
+
+export const WrapEnabled: Story = {
+  render: () => (
+    <Flex direction="row" wrap="wrap" gap={4} className="w-64 bg-main-50 p-4 rounded-lg">
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+      <Box>Item 4</Box>
+      <Box>Item 5</Box>
+      <Box>Item 6</Box>
+    </Flex>
+  ),
+}
+
+export const GapSizes: Story = {
+  render: () => (
+    <Flex gap={8}>
+      <Typography variant="subtitle1" color="main-700">Gap Sizes</Typography>
+
+      <Flex gap={4}>
+        <Typography variant="body2" color="main-500">gap={0}</Typography>
+        <Flex direction="row" gap={0} className="bg-main-50 p-2 rounded-lg">
+          <Box>1</Box>
+          <Box>2</Box>
+          <Box>3</Box>
+        </Flex>
+      </Flex>
+
+      <Flex gap={4}>
+        <Typography variant="body2" color="main-500">gap={2}</Typography>
+        <Flex direction="row" gap={2} className="bg-main-50 p-2 rounded-lg">
+          <Box>1</Box>
+          <Box>2</Box>
+          <Box>3</Box>
+        </Flex>
+      </Flex>
+
+      <Flex gap={4}>
+        <Typography variant="body2" color="main-500">gap={4}</Typography>
+        <Flex direction="row" gap={4} className="bg-main-50 p-2 rounded-lg">
+          <Box>1</Box>
+          <Box>2</Box>
+          <Box>3</Box>
+        </Flex>
+      </Flex>
+
+      <Flex gap={4}>
+        <Typography variant="body2" color="main-500">gap={8}</Typography>
+        <Flex direction="row" gap={8} className="bg-main-50 p-2 rounded-lg">
+          <Box>1</Box>
+          <Box>2</Box>
+          <Box>3</Box>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const CenteredContent: Story = {
+  render: () => (
+    <Flex
+      direction="row"
+      align="center"
+      justify="center"
+      className="w-96 h-48 bg-main-50 rounded-lg border-2 border-dashed border-main-300"
+    >
+      <Box>Centered Content</Box>
+    </Flex>
+  ),
+}
+
+export const Navbar: Story = {
+  render: () => (
+    <Flex
+      direction="row"
+      align="center"
+      justify="between"
+      className="w-full max-w-2xl bg-main-900 text-white px-6 py-3 rounded-lg"
+    >
+      <Typography variant="h6" className="text-white">Logo</Typography>
+      <Flex direction="row" gap={6}>
+        <Typography variant="body2" className="text-main-300 hover:text-white cursor-pointer">Home</Typography>
+        <Typography variant="body2" className="text-main-300 hover:text-white cursor-pointer">About</Typography>
+        <Typography variant="body2" className="text-main-300 hover:text-white cursor-pointer">Contact</Typography>
+      </Flex>
+      <Box className="bg-accent-500 border-accent-600 text-white text-sm py-2">Sign In</Box>
+    </Flex>
+  ),
+}
+
+export const CardLayout: Story = {
+  render: () => (
+    <Flex direction="row" wrap="wrap" gap={4} className="max-w-xl">
+      {[1, 2, 3, 4, 5, 6].map((i) => (
+        <Flex
+          key={i}
+          gap={2}
+          className="w-40 bg-white border border-main-200 rounded-lg p-4 shadow-sm"
+        >
+          <div className="w-full h-20 bg-main-100 rounded-md" />
+          <Typography variant="subtitle2">Card {i}</Typography>
+          <Typography variant="body3" color="main-500">Description text</Typography>
+        </Flex>
+      ))}
+    </Flex>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex gap={12}>
+      {/* Direction */}
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">Direction</Typography>
+        <Flex direction="row" gap={8} wrap="wrap">
+          <Flex gap={2}>
+            <Typography variant="body3" color="main-500">row</Typography>
+            <Flex direction="row" gap={2} className="bg-main-50 p-3 rounded-lg">
+              <Box className="text-xs py-2 px-3">1</Box>
+              <Box className="text-xs py-2 px-3">2</Box>
+              <Box className="text-xs py-2 px-3">3</Box>
+            </Flex>
+          </Flex>
+          <Flex gap={2}>
+            <Typography variant="body3" color="main-500">column</Typography>
+            <Flex direction="column" gap={2} className="bg-main-50 p-3 rounded-lg">
+              <Box className="text-xs py-2 px-3">1</Box>
+              <Box className="text-xs py-2 px-3">2</Box>
+              <Box className="text-xs py-2 px-3">3</Box>
+            </Flex>
+          </Flex>
+          <Flex gap={2}>
+            <Typography variant="body3" color="main-500">row-reverse</Typography>
+            <Flex direction="row-reverse" gap={2} className="bg-main-50 p-3 rounded-lg">
+              <Box className="text-xs py-2 px-3">1</Box>
+              <Box className="text-xs py-2 px-3">2</Box>
+              <Box className="text-xs py-2 px-3">3</Box>
+            </Flex>
+          </Flex>
+          <Flex gap={2}>
+            <Typography variant="body3" color="main-500">column-reverse</Typography>
+            <Flex direction="column-reverse" gap={2} className="bg-main-50 p-3 rounded-lg">
+              <Box className="text-xs py-2 px-3">1</Box>
+              <Box className="text-xs py-2 px-3">2</Box>
+              <Box className="text-xs py-2 px-3">3</Box>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Alignment */}
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">Align Items</Typography>
+        <Flex direction="row" gap={8} wrap="wrap">
+          {(["start", "center", "end", "stretch"] as const).map((alignment) => (
+            <Flex key={alignment} gap={2}>
+              <Typography variant="body3" color="main-500">{alignment}</Typography>
+              <Flex direction="row" align={alignment} gap={2} className="h-24 bg-main-50 p-3 rounded-lg">
+                <Box className="text-xs py-2 px-3">A</Box>
+                <Box className="text-xs py-4 px-3">B</Box>
+                <Box className="text-xs py-2 px-3">C</Box>
+              </Flex>
+            </Flex>
+          ))}
+        </Flex>
+      </Flex>
+
+      {/* Justify */}
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">Justify Content</Typography>
+        <Flex gap={4}>
+          {(["start", "center", "end", "between", "around", "evenly"] as const).map((justification) => (
+            <Flex key={justification} gap={2}>
+              <Typography variant="body3" color="main-500">{justification}</Typography>
+              <Flex direction="row" justify={justification} className="w-80 bg-main-50 p-3 rounded-lg">
+                <Box className="text-xs py-2 px-3">1</Box>
+                <Box className="text-xs py-2 px-3">2</Box>
+                <Box className="text-xs py-2 px-3">3</Box>
+              </Flex>
+            </Flex>
+          ))}
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}