@a2v2ai/uikit 0.0.3 → 0.0.5

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 direction="column" 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 direction="column" 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 direction="column" 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.tsx

@@ -1,102 +0,0 @@
-import * as React from "react"
-import { cva } from "class-variance-authority"
-import { cn } from "../lib/utils"
-
-type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse"
-type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline"
-type FlexJustify = "start" | "center" | "end" | "between" | "around" | "evenly"
-type FlexWrap = "nowrap" | "wrap" | "wrap-reverse"
-type FlexGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48
-
-const flexVariants = cva("flex", {
-  variants: {
-    direction: {
-      row: "flex-row",
-      column: "flex-col",
-      "row-reverse": "flex-row-reverse",
-      "column-reverse": "flex-col-reverse",
-    },
-    align: {
-      start: "items-start",
-      center: "items-center",
-      end: "items-end",
-      stretch: "items-stretch",
-      baseline: "items-baseline",
-    },
-    justify: {
-      start: "justify-start",
-      center: "justify-center",
-      end: "justify-end",
-      between: "justify-between",
-      around: "justify-around",
-      evenly: "justify-evenly",
-    },
-    wrap: {
-      nowrap: "flex-nowrap",
-      wrap: "flex-wrap",
-      "wrap-reverse": "flex-wrap-reverse",
-    },
-    gap: {
-      0: "gap-0",
-      1: "gap-1",
-      2: "gap-2",
-      3: "gap-3",
-      4: "gap-4",
-      5: "gap-5",
-      6: "gap-6",
-      8: "gap-8",
-      10: "gap-10",
-      12: "gap-12",
-      16: "gap-16",
-      20: "gap-20",
-      24: "gap-24",
-      32: "gap-32",
-      40: "gap-40",
-      48: "gap-48",
-    },
-  },
-  defaultVariants: {
-    direction: "row",
-    align: "stretch",
-    justify: "start",
-    wrap: "nowrap",
-    gap: 0,
-  },
-})
-
-type FlexProps = React.HTMLAttributes<HTMLDivElement> & {
-  direction?: FlexDirection
-  align?: FlexAlign
-  justify?: FlexJustify
-  wrap?: FlexWrap
-  gap?: FlexGap
-  as?: React.ElementType
-}
-
-const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
-  (
-    {
-      className,
-      direction,
-      align,
-      justify,
-      wrap,
-      gap,
-      as: Component = "div",
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <Component
-        ref={ref}
-        className={cn(flexVariants({ direction, align, justify, wrap, gap, className }))}
-        {...props}
-      />
-    )
-  }
-)
-Flex.displayName = "Flex"
-
-export { Flex, flexVariants }
-export type { FlexProps, FlexDirection, FlexAlign, FlexJustify, FlexWrap, FlexGap }