@luanthnh/cntt-ui 0.1.8 → 0.1.9

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

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

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

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

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

@@ -1,193 +0,0 @@
-'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,
-};
-
-export * from './text-field';
-export * from './text-area-field';
-export * from './select-field';
-export * from './date-field';

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

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

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

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

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

@@ -1,73 +0,0 @@
-'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 };