import { cn } from "../../utils/cn";

// ❌ Incorrecto: Arrays manuales
const classes = [
  "ui-button",
  variant === "primary" && "ui-button--primary",
  disabled && "ui-button--disabled",
  className,
].filter(Boolean).join(" ");

// ✅ Correcto: Usar cn()
const classes = cn(
  "ui-button",
  `ui-button--${variant}`,
  {
    "ui-button--disabled": disabled,
    "ui-button--loading": loading,
  },
  className
);

import { ErrorMessage } from "@hookform/error-message";

// En el render:
<ErrorMessage
  errors={errors}
  name={name as string}
  render={({ message }) => (
    <span className="ui-field__error">{message}</span>
  )}
/>

// ✅ Correcto: Tailwind para layout
<div className="flex flex-col gap-4 p-6 md:flex-row">
  <TextField name="email" control={control} label="Email" />
</div>

// ✅ Correcto: SCSS para componentes con theming
.ui-input {
  border-color: var(--ui-color-gray-300);
  &:focus {
    border-color: var(--ui-color-primary);
  }
}

┌─────────────────────────────────────────────────────────────┐
│  SCSS + CSS Variables  →  Componentes exportables del Kit  │
│  Tailwind CSS          →  App demo, Storybook, layouts     │
└─────────────────────────────────────────────────────────────┘

FIELDS      → Integración con React Hook Form + ErrorMessage
CONTAINERS  → Layout y presentación (label, error, hint)
INPUTS      → Componentes raw/unstyled

"use client";

import React, { forwardRef } from "react";
import type { ComponentSize, FieldState } from "../types";
import { cn } from "../../utils/cn";

export interface MyComponentProps {
  size?: ComponentSize;
  state?: FieldState;
  disabled?: boolean;
  className?: string;
}

export const MyComponent = forwardRef<HTMLElement, MyComponentProps>(
  function MyComponent(
    {
      size = "md",
      state = "default",
      disabled = false,
      className,
      ...props
    },
    ref
  ) {
    const classes = cn(
      "ui-mycomponent",
      `ui-mycomponent--${size}`,
      state !== "default" && `ui-mycomponent--${state}`,
      { "ui-mycomponent--disabled": disabled },
      className
    );

    return <div ref={ref} className={classes} {...props} />;
  }
);

"use client";

import React, { useId } from "react";
import {
  useController,
  type UseControllerProps,
  type FieldValues,
  type FieldPath,
} from "react-hook-form";
import { ErrorMessage } from "@hookform/error-message";
import { MyInput, type MyInputProps } from "../inputs/MyInput";
import { cn } from "../../utils/cn";

export interface MyFieldProps<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> extends Omit<UseControllerProps<TFieldValues, TName>, "defaultValue">,
    Omit<MyInputProps, "name" | "value" | "onChange" | "state"> {
  label?: string;
  hint?: string;
}

export function MyField<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  name,
  control,
  rules,
  shouldUnregister,
  label,
  hint,
  className,
  ...inputProps
}: MyFieldProps<TFieldValues, TName>) {
  const generatedId = useId();
  const id = `field-${name}-${generatedId}`;

  const {
    field,
    fieldState: { error, invalid },
    formState: { errors },
  } = useController({ name, control, rules, shouldUnregister });

  const state = invalid ? "error" : "default";

  return (
    <div className={cn("ui-myfield", className)}>
      {label && <label htmlFor={id}>{label}</label>}
      <MyInput
        {...inputProps}
        id={id}
        name={field.name}
        value={field.value}
        onChange={field.onChange}
        state={state}
        ref={field.ref}
      />
      <div className="ui-myfield__helper">
        <ErrorMessage
          errors={errors}
          name={name as string}
          render={({ message }) => (
            <span className="ui-myfield__error">{message}</span>
          )}
        />
        {!error && hint && (
          <span className="ui-myfield__hint">{hint}</span>
        )}
      </div>
    </div>
  );
}

src/components/{layer}/__stories__/{Component}.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { ComponentName } from "../ComponentName";

/**
 * Descripción del componente para autodocs.
 *
 * ## Uso
 * ```tsx
 * <ComponentName prop="value" />
 * ```
 */
const meta: Meta<typeof ComponentName> = {
  title: "Category/ComponentName",
  component: ComponentName,
  tags: ["autodocs"],
  argTypes: {
    size: {
      control: "select",
      options: ["sm", "md", "lg"],
      description: "Tamaño del componente",
    },
  },
};

export default meta;
type Story = StoryObj<typeof ComponentName>;

export const Default: Story = {
  args: {
    // props por defecto
  },
};

// IMPORTANTE: Evitar duplicar nombres de funciones y exports
const VariantExample = () => <ComponentName variant="special" />;

export const Variant: Story = {
  render: () => <VariantExample />,
};

/**
 * ComponentName - Breve descripción
 *
 * @description
 * Descripción detallada.
 *
 * @example
 * ```tsx
 * <ComponentName prop="value" />
 * ```
 */

export interface Props {
  /**
   * Descripción de la prop
   * @default "md"
   */
  size?: ComponentSize;
}

--ui-{category}-{name}-{variant}

npm run dev           # Next.js dev
npm run build         # Next.js build
npm run build:lib     # Build librería (tsup)
npm run storybook     # Storybook dev
npm run build-storybook # Storybook build
npm run lint          # ESLint