@luanthnh/cntt-ui 0.1.5

package/components/ui/Dropzone/index.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Dropzone } from './index';
+
+const meta: Meta<typeof Dropzone> = {
+  title: 'UI/Dropzone',
+  component: Dropzone,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Dropzone>;
+
+export const Default: Story = {
+  args: {
+    onFile: (file) => console.log('File dropped:', file),
+  },
+};

package/components/ui/Dropzone/index.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useCallback } from 'react';
+import { UploadCloud } from 'lucide-react';
+import { useDropzone } from 'react-dropzone';
+
+import { cn } from '@/lib/utils';
+
+interface Props {
+  onFile: (file: File) => void;
+  className?: string;
+}
+
+export function Dropzone({ onFile, className }: Props) {
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (acceptedFiles[0]) onFile(acceptedFiles[0]);
+    },
+    [onFile],
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: { 'image/*': [] },
+    multiple: false,
+  });
+
+  return (
+    <div
+      {...getRootProps()}
+      className={cn(
+        'group border-muted-foreground/25 hover:border-muted-foreground/50 relative grid h-32 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-6 py-4 text-center transition',
+        isDragActive && 'border-primary',
+        className,
+      )}
+    >
+      <input {...getInputProps()} />
+      <div className="text-muted-foreground flex flex-col items-center gap-1 text-sm">
+        <UploadCloud className="h-6 w-6" />
+        <span className="font-medium">
+          {isDragActive ? 'Thả ảnh vào đây' : 'Kéo thả hoặc click để chọn'}
+        </span>
+        <span className="text-xs">PNG, JPG, GIF tối đa 5 MB</span>
+      </div>
+    </div>
+  );
+}

package/components/ui/Form/date-field.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import type * as React from 'react';
+import { format } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+import { Calendar } from '@/components/ui/Calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover';
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from './index';
+
+interface Props<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends Omit<React.ComponentProps<'button'>, 'name' | 'type' | 'defaultValue'> {
+  name: TName;
+  control: ControllerProps<TFieldValues, TName>['control'];
+  label?: string;
+  isRequired?: boolean;
+}
+
+export function DateField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({ name, control, label, isRequired, ...props }: Props<TFieldValues, TName>) {
+  return (
+    <FormField
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <FormItem className="flex flex-col gap-2">
+          {label && <FormLabel isRequired={isRequired}>{label}</FormLabel>}
+          <FormControl>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className={cn(
+                    'border-primary-100 h-11 w-full justify-start text-left font-normal text-black shadow-xs transition-[color,box-shadow]',
+                    !field.value && 'text-muted-foreground',
+                    props.className,
+                  )}
+                  {...props}
+                >
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  {field.value ? (
+                    typeof field.value === 'string' ? (
+                      format(new Date(field.value), 'dd/MM/yyyy')
+                    ) : (
+                      format(field.value, 'dd/MM/yyyy')
+                    )
+                  ) : (
+                    <span>Chọn ngày</span>
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="single"
+                  captionLayout="dropdown"
+                  selected={field.value ? new Date(field.value) : undefined}
+                  onSelect={field.onChange}
+                  fromYear={1900}
+                  toYear={new Date().getFullYear() + 10}
+                />
+              </PopoverContent>
+            </Popover>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

package/components/ui/Form/index.stories.tsx

@@ -0,0 +1,67 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './index';
+
+const meta: Meta<typeof Form> = {
+  title: 'UI/Form',
+  component: Form,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+});
+
+export const Default: StoryObj = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const form = useForm<z.infer<typeof formSchema>>({
+      resolver: zodResolver(formSchema),
+      defaultValues: {
+        username: '',
+      },
+    });
+
+    function onSubmit(values: z.infer<typeof formSchema>) {
+      alert(JSON.stringify(values, null, 2));
+    }
+
+    return (
+      <Form form={form} onSubmit={onSubmit} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>This is your public display name.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+  },
+};

package/components/ui/Form/index.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  Controller,
+  FormProvider,
+  SubmitHandler,
+  useFormContext,
+  UseFormReturn,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form';
+
+import { cn } from '@/lib/utils';
+import { Label } from '@/components/ui/Label';
+
+export interface FormProps<T extends FieldValues> {
+  form: UseFormReturn<T, unknown>;
+  onSubmit?: SubmitHandler<T>;
+  children: React.ReactNode;
+  id?: string;
+  className?: string;
+}
+
+const Form = <T extends FieldValues>({
+  form,
+  onSubmit,
+  children,
+  id = 'form',
+  className,
+}: FormProps<T>) => {
+  return (
+    <FormProvider {...form}>
+      <form
+        id={id}
+        className={className}
+        onSubmit={form.handleSubmit(onSubmit as SubmitHandler<T>)}
+        noValidate
+      >
+        {children}
+      </form>
+    </FormProvider>
+  );
+};
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  isRequired,
+  children,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root> & { isRequired?: boolean }) {
+  const { error, formItemId } = useFormField();
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    >
+      {children}
+      {isRequired && <span className="text-destructive">*</span>}
+    </Label>
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? '') : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

package/components/ui/Form/select-field.tsx

@@ -0,0 +1,55 @@
+import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/Select';
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from './index';
+
+export interface SelectFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> {
+  name: TName;
+  control: ControllerProps<TFieldValues, TName>['control'];
+  label?: string;
+  placeholder?: string;
+  options: { value: string; label: string }[];
+  isRequired?: boolean;
+}
+
+export function SelectField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({ label, placeholder, options, isRequired, ...rest }: SelectFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      name={rest.name}
+      control={rest.control}
+      render={({ field }) => (
+        <FormItem>
+          {label && <FormLabel isRequired={isRequired}>{label}</FormLabel>}
+          <Select onValueChange={field.onChange} defaultValue={field.value}>
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder={placeholder} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              {options.map((o) => (
+                <SelectItem key={o.value} value={o.value}>
+                  {o.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

package/components/ui/Form/text-area-field.tsx

@@ -0,0 +1,37 @@
+import type * as React from 'react';
+import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+
+import { Textarea } from '@/components/ui/Textarea';
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from './index';
+
+export interface TextAreaFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'> {
+  name: TName;
+  control: ControllerProps<TFieldValues, TName>['control'];
+  label?: string;
+  isRequired?: boolean;
+}
+
+export function TextAreaField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({ label, isRequired, ...textareaProps }: TextAreaFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      name={textareaProps.name}
+      control={textareaProps.control}
+      render={({ field }) => (
+        <FormItem>
+          {label && <FormLabel isRequired={isRequired}>{label}</FormLabel>}
+          <FormControl>
+            <Textarea {...field} {...textareaProps} className="min-h-37.5" />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

package/components/ui/Form/text-field.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+
+import { Input } from '@/components/ui/Input';
+
+import { FormField, FormItem, FormLabel, FormMessage } from './index';
+
+export interface TextFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'> {
+  name: TName;
+  control: ControllerProps<TFieldValues, TName>['control'];
+  label?: string;
+  isPassword?: boolean;
+  isRequired?: boolean;
+}
+
+export function TextField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  label,
+  type = 'text',
+  isPassword,
+  isRequired,
+  ...inputProps
+}: TextFieldProps<TFieldValues, TName>) {
+  const [show, setShow] = React.useState(false);
+  const toggle = () => setShow((prev) => !prev);
+  const isNum = type === 'number';
+  const renderedType = isPassword ? (show ? 'text' : 'password') : 'text';
+
+  return (
+    <FormField
+      name={inputProps.name}
+      control={inputProps.control}
+      render={({ field }) => (
+        <FormItem>
+          {label && <FormLabel isRequired={isRequired}>{label}</FormLabel>}
+          <div className="relative">
+            <FormItem>
+              <Input
+                {...field}
+                {...inputProps}
+                type={renderedType}
+                inputMode={isNum ? 'decimal' : undefined}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  let val = e.target.value;
+                  if (isNum) val = val.replace(/[^0-9]/g, '');
+                  field.onChange(val);
+                }}
+              />
+            </FormItem>
+            {isPassword && (
+              <button
+                type="button"
+                tabIndex={-1}
+                onClick={toggle}
+                className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer"
+              >
+                {show ? <EyeOff size={16} /> : <Eye size={16} />}
+              </button>
+            )}
+          </div>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

package/components/ui/HStack/index.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HStack } from './index';
+
+const meta: Meta<typeof HStack> = {
+  title: 'UI/Layout/HStack',
+  component: HStack,
+  tags: ['autodocs'],
+  argTypes: {
+    spacing: {
+      control: 'select',
+      options: [0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 'none'],
+    },
+    justify: {
+      control: 'select',
+      options: ['left', 'right', 'center', 'between', 'around', 'evenly'],
+    },
+    align: {
+      control: 'select',
+      options: ['default', 'center', 'start', 'end', 'baseline'],
+    },
+    noWrap: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HStack>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <div className="bg-primary flex h-10 w-10 items-center justify-center rounded text-white">
+          1
+        </div>
+        <div className="bg-primary flex h-10 w-10 items-center justify-center rounded text-white">
+          2
+        </div>
+        <div className="bg-primary flex h-10 w-10 items-center justify-center rounded text-white">
+          3
+        </div>
+      </>
+    ),
+    spacing: 16,
+  },
+};

package/components/ui/HStack/index.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { motion, type HTMLMotionProps } from 'motion/react';
+
+import { cn } from '@/lib/utils';
+
+const hStackVariants = cva('flex flex-wrap items-center', {
+  variants: {
+    justify: {
+      left: 'justify-start',
+      right: 'justify-end',
+      center: 'justify-center',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    align: {
+      default: 'items-stretch',
+      center: 'items-center',
+      start: 'items-start',
+      end: 'items-end',
+      baseline: 'items-baseline',
+    },
+    spacing: {
+      0: 'gap-0',
+      2: 'gap-0.5',
+      4: 'gap-1',
+      6: 'gap-1.5',
+      8: 'gap-2',
+      12: 'gap-3',
+      16: 'gap-4',
+      20: 'gap-5',
+      24: 'gap-6',
+      32: 'gap-8',
+      40: 'gap-10',
+      48: 'gap-12',
+      64: 'gap-16',
+      none: 'gap-0',
+    },
+    noWrap: {
+      true: 'flex-nowrap',
+    },
+  },
+  defaultVariants: {
+    spacing: 16,
+    justify: 'left',
+    align: 'default',
+  },
+});
+
+export interface HStackProps extends VariantProps<typeof hStackVariants>, HTMLMotionProps<'div'> {
+  className?: string;
+}
+
+const HStack = React.forwardRef<HTMLDivElement, HStackProps>(
+  ({ className, noWrap, justify, align, spacing, children, ...motionProps }, ref) => {
+    return (
+      <motion.div
+        ref={ref}
+        className={cn(hStackVariants({ spacing, align, justify, noWrap }), className)}
+        {...motionProps}
+      >
+        {children}
+      </motion.div>
+    );
+  },
+);
+
+HStack.displayName = 'HStack';
+
+export { HStack, hStackVariants };