@a2v2ai/uikit 0.0.38 → 0.0.39

package/ErrorMessage/ErrorMessage.stories.tsx

@@ -1,159 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,390 +0,0 @@
-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>
-  ),
-}