kmod-cli 1.0.10

package/component-templates/components/count-input.tsx

@@ -0,0 +1,221 @@
+"use client";
+import React, {
+  HTMLAttributes,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  Minus,
+  Plus,
+} from 'lucide-react';
+
+import { cn } from '../lib/utils';
+
+export type CountingProps = {
+  initialValue?: number;
+  min?: number;
+  max?: number;
+  durations?: number; // delay every step when holding
+  steps?: number;
+  holdDelay?: number; // delay before starting to hold
+  activeHolding?: boolean;
+  activeIncrement?: boolean;
+  activeDecrement?: boolean;
+  onIncrement?: (value?: number, changeStatus?: "active" | "freeze") => void;
+  onDecrement?: (value?: number, changeStatus?: "active" | "freeze") => void;
+  onValueChange?: (
+    value: number,
+    changeStatus?: "inc" | "dec" | "freeze"
+  ) => void;
+  inputClass?: HTMLAttributes<HTMLInputElement>["className"];
+  decreaseClass?: HTMLAttributes<HTMLButtonElement>["className"];
+  increaseClass?: HTMLAttributes<HTMLButtonElement>["className"];
+  containerClass?: HTMLAttributes<HTMLDivElement>["className"];
+  inputWrapperClass?: HTMLAttributes<HTMLDivElement>["className"];
+  inputProps?: HTMLAttributes<HTMLInputElement>;
+  decreaseProps?: HTMLAttributes<HTMLButtonElement>;
+  increaseProps?: HTMLAttributes<HTMLButtonElement>;
+  containerProps?: HTMLAttributes<HTMLDivElement>;
+  inputWrapperProps?: HTMLAttributes<HTMLDivElement>;
+  increaseChildren?: React.ReactNode;
+  decreaseChildren?: React.ReactNode;
+  beforeInputRender?: () => React.ReactNode; // Optional prop to render before the input
+  afterInputRender?: () => React.ReactNode; // Optional prop to render after the input
+}
+
+export const Counting: React.FC<CountingProps> = ({
+  initialValue = 0,
+  min = 0,
+  max = 100,
+  durations = 100,
+  steps = 1,
+  holdDelay = 500,
+  activeHolding = true,
+  activeIncrement = true,
+  activeDecrement = true,
+  onIncrement,
+  onDecrement,
+  onValueChange,
+  inputClass,
+  decreaseClass,
+  increaseClass,
+  containerClass,
+  inputWrapperClass,
+  inputProps,
+  decreaseProps,
+  increaseProps,
+  containerProps,
+  inputWrapperProps,
+  increaseChildren = <Plus size={20} />,
+  decreaseChildren = <Minus size={20} />,
+  beforeInputRender,
+  afterInputRender,
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const [inputValue, setInputValue] = useState(initialValue.toString());
+  const isHolding = useRef(false);
+  const holdTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const holdStarted = useRef(false);
+
+  const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms));
+
+  const stopContinuousChange = (type: "inc" | "dec") => {
+    isHolding.current = false;
+    holdStarted.current = false;
+    if (holdTimeout.current) clearTimeout(holdTimeout.current);
+
+    if (type === "inc") onIncrement?.(value, "freeze");
+    if (type === "dec") onDecrement?.(value, "freeze");
+    onValueChange?.(value, "freeze");
+  };
+
+  const startContinuousChange = async (type: "inc" | "dec") => {
+    if (!isHolding.current) return;
+    while (isHolding.current) {
+      setValue((prev) => {
+        let next = prev;
+        if (type === "inc" && prev < max) next = Math.min(prev + steps, max);
+        if (type === "dec" && prev > min) next = Math.max(prev - steps, min);
+
+        // callback
+        if (type === "inc" && next !== prev && activeIncrement)
+          onIncrement?.(next, "active");
+        if (type === "dec" && next !== prev && activeDecrement)
+          onDecrement?.(next, "active");
+        if (next !== prev)
+          onValueChange?.(next, type === "inc" ? "inc" : "dec");
+
+        setInputValue(next.toString()); // đồng bộ input
+        return next;
+      });
+
+      await sleep(durations);
+    }
+  };
+
+  const handleMouseDown = (type: "inc" | "dec") => {
+    if (!activeHolding) return;
+    isHolding.current = true;
+
+    holdTimeout.current = setTimeout(() => {
+      holdStarted.current = true;
+      startContinuousChange(type);
+    }, holdDelay);
+  };
+
+  const handleMouseUp = (type: "inc" | "dec") => {
+    if (!holdStarted.current) {
+      // nhấn nháy đơn
+      if (type === "inc" && value < max) {
+        const next = Math.min(value + steps, max);
+        setValue(next);
+        setInputValue(next.toString());
+        activeIncrement && onIncrement?.(next, "active");
+        onValueChange?.(next, "inc");
+      }
+      if (type === "dec" && value > min) {
+        const next = Math.max(value - steps, min);
+        setValue(next);
+        setInputValue(next.toString());
+        activeDecrement && onDecrement?.(next, "active");
+        onValueChange?.(next, "dec");
+      }
+    }
+    stopContinuousChange(type);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    if (/^\d*$/.test(val)) {
+      setInputValue(val);
+      const num = parseInt(val, 10);
+      if (!isNaN(num)) {
+        if (num >= min && num <= max) {
+          setValue(num);
+          if (num > value) onIncrement?.(num, "active");
+          if (num < value) onDecrement?.(num, "active");
+          if (num !== value) onValueChange?.(num, num > value ? "inc" : "dec");
+        }
+      }
+    }
+  };
+
+  const handleBlur = () => {
+    // đồng bộ lại input với value
+    setInputValue(value.toString());
+    onValueChange?.(value, "freeze");
+  };
+
+  return (
+    <div
+      {...containerProps}
+      className={cn(
+        "flex items-center border border-[#DDDDE3] h-7 rounded-[4px] overflow-hidden",
+        containerClass
+      )}
+    >
+      <button
+        onMouseDown={() => handleMouseDown("dec")}
+        onMouseUp={() => handleMouseUp("dec")}
+        onMouseLeave={() => stopContinuousChange("dec")}
+        className={cn(
+          "h-full bg-white w-7 flex items-center justify-center",
+          decreaseClass
+        )}
+        disabled={value <= min}
+        {...decreaseProps}
+      >
+        {decreaseChildren || <Minus size={20} />}
+      </button>
+      <div className={cn(inputWrapperClass)} {...inputWrapperProps}>
+        {beforeInputRender && beforeInputRender()}
+        <input
+          type="text"
+          value={inputValue}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          className={cn(
+            "w-10 h-full text-center bg-white text-sm font-medium focus:outline-none border-l border-r border-[#DDDDE3]",
+            inputClass
+          )}
+          {...inputProps}
+        />
+        {afterInputRender && afterInputRender()}
+      </div>
+      <button
+        onMouseDown={() => handleMouseDown("inc")}
+        onMouseUp={() => handleMouseUp("inc")}
+        onMouseLeave={() => stopContinuousChange("inc")}
+        className={cn(
+          "h-full bg-white w-7 flex items-center justify-center",
+          increaseClass
+        )}
+        disabled={value >= max}
+        {...increaseProps}
+      >
+        {increaseChildren || <Plus size={20} />}
+      </button>
+    </div>
+  );
+};

package/component-templates/components/date-range-calendar/button.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import {
+  cva,
+  type VariantProps,
+} from 'class-variance-authority';
+
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-full text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-black text-white',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-hover-secondary hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline'
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-full px-3',
+        lg: 'h-11 rounded-full px-8',
+        icon: 'h-10 w-10'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants };

package/component-templates/components/date-range-calendar/calendar.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import React, { JSX } from 'react';
+
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from 'lucide-react';
+import {
+  DayButton,
+  DayPicker,
+  getDefaultClassNames,
+} from 'react-day-picker';
+
+import { cn } from '../../lib/utils';
+import {
+  Button,
+  buttonVariants,
+} from './button';
+
+{}
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar ({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps): JSX.Element {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2 rounded-lg overflow-hidden',
+        cell: 'text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-8 w-8 p-0 font-normal aria-selected:opacity-100'
+        ),
+        day_selected:
+          'bg-indigo-500 hover:bg-indigo-500 focus:bg-indigo-500 text-white rounded-md',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside: 'text-muted-foreground opacity-40 invisible',
+        day_disabled: 'text-muted-foreground opacity-40',
+        day_range_middle:
+          'aria-selected:bg-indigo-100 aria-selected:text-indigo-800 rounded-none',
+        day_hidden: 'invisible',
+        // weekday: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        ...classNames
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return <Button variant="ghost" size="icon" className="hover:!bg-muted"><ChevronLeftIcon className={cn("size-4", className)} {...props} /></Button>;
+          }
+
+          if (orientation === "right") {
+            return <Button variant="ghost" size="icon" className="hover:!bg-muted"><ChevronRightIcon className={cn("size-4", className)} {...props} /></Button>;
+          }
+
+          return <Button variant="ghost" size="icon" className="hover:!bg-muted"><ChevronDownIcon className={cn("size-4", className)} {...props} /></Button>;
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">{children}</div>
+            </td>
+          );
+        },
+        Weekdays: ({ children,  ...props }) => {
+          return <div className="flex px-1 justify-between">
+           {children}
+          </div>;
+        }
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = 'Calendar'
+
+export { Calendar };
+
+export function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle}
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/component-templates/components/date-range-calendar/date-input.tsx

@@ -0,0 +1,259 @@
+import React, { useEffect, useRef } from 'react'
+
+interface DateInputProps {
+  value?: Date
+  onChange: (date: Date) => void
+}
+
+interface DateParts {
+  day: number
+  month: number
+  year: number
+}
+
+const DateInput: React.FC<DateInputProps> = ({ value, onChange }) => {
+  const [date, setDate] = React.useState<DateParts>(() => {
+    const d = value ? new Date(value) : new Date()
+    return {
+      day: d.getDate(),
+      month: d.getMonth() + 1, // JavaScript months are 0-indexed
+      year: d.getFullYear()
+    }
+  })
+
+  const monthRef = useRef<HTMLInputElement | null>(null)
+  const dayRef = useRef<HTMLInputElement | null>(null)
+  const yearRef = useRef<HTMLInputElement | null>(null)
+
+  useEffect(() => {
+    const d = value ? new Date(value) : new Date()
+    setDate({
+      day: d.getDate(),
+      month: d.getMonth() + 1,
+      year: d.getFullYear()
+    })
+  }, [value])
+
+  const validateDate = (field: keyof DateParts, value: number): boolean => {
+    if (
+      (field === 'day' && (value < 1 || value > 31)) ||
+      (field === 'month' && (value < 1 || value > 12)) ||
+      (field === 'year' && (value < 1000 || value > 9999))
+    ) {
+      return false
+    }
+
+    // Validate the day of the month
+    const newDate = { ...date, [field]: value }
+    const d = new Date(newDate.year, newDate.month - 1, newDate.day)
+    return d.getFullYear() === newDate.year &&
+           d.getMonth() + 1 === newDate.month &&
+           d.getDate() === newDate.day
+  }
+
+  const handleInputChange =
+    (field: keyof DateParts) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value ? Number(e.target.value) : ''
+      const isValid = typeof newValue === 'number' && validateDate(field, newValue)
+
+      // If the new value is valid, update the date
+      const newDate = { ...date, [field]: newValue }
+      setDate(newDate)
+
+      // only call onChange when the entry is valid
+      if (isValid) {
+        onChange(new Date(newDate.year, newDate.month - 1, newDate.day))
+      }
+    }
+
+  const initialDate = useRef<DateParts>(date)
+
+  const handleBlur = (field: keyof DateParts) => (
+    e: React.FocusEvent<HTMLInputElement>
+  ): void => {
+    if (!e.target.value) {
+      setDate(initialDate.current)
+      return
+    }
+
+    const newValue = Number(e.target.value)
+    const isValid = validateDate(field, newValue)
+
+    if (!isValid) {
+      setDate(initialDate.current)
+    } else {
+      // If the new value is valid, update the initial value
+      initialDate.current = { ...date, [field]: newValue }
+    }
+  }
+
+  const handleKeyDown =
+    (field: keyof DateParts) => (e: React.KeyboardEvent<HTMLInputElement>) => {
+      // Allow command (or control) combinations
+      if (e.metaKey || e.ctrlKey) {
+        return
+      }
+
+      // Prevent non-numeric characters, excluding allowed keys
+      if (
+        !/^[0-9]$/.test(e.key) &&
+        ![
+          'ArrowUp',
+          'ArrowDown',
+          'ArrowLeft',
+          'ArrowRight',
+          'Delete',
+          'Tab',
+          'Backspace',
+          'Enter'
+        ].includes(e.key)
+      ) {
+        e.preventDefault()
+        return
+      }
+
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        let newDate = { ...date }
+
+        if (field === 'day') {
+          if (date[field] === new Date(date.year, date.month, 0).getDate()) {
+            newDate = { ...newDate, day: 1, month: (date.month % 12) + 1 }
+            if (newDate.month === 1) newDate.year += 1
+          } else {
+            newDate.day += 1
+          }
+        }
+
+        if (field === 'month') {
+          if (date[field] === 12) {
+            newDate = { ...newDate, month: 1, year: date.year + 1 }
+          } else {
+            newDate.month += 1
+          }
+        }
+
+        if (field === 'year') {
+          newDate.year += 1
+        }
+
+        setDate(newDate)
+        onChange(new Date(newDate.year, newDate.month - 1, newDate.day))
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        let newDate = { ...date }
+
+        if (field === 'day') {
+          if (date[field] === 1) {
+            newDate.month -= 1
+            if (newDate.month === 0) {
+              newDate.month = 12
+              newDate.year -= 1
+            }
+            newDate.day = new Date(newDate.year, newDate.month, 0).getDate()
+          } else {
+            newDate.day -= 1
+          }
+        }
+
+        if (field === 'month') {
+          if (date[field] === 1) {
+            newDate = { ...newDate, month: 12, year: date.year - 1 }
+          } else {
+            newDate.month -= 1
+          }
+        }
+
+        if (field === 'year') {
+          newDate.year -= 1
+        }
+
+        setDate(newDate)
+        onChange(new Date(newDate.year, newDate.month - 1, newDate.day))
+      }
+
+      if (e.key === 'ArrowRight') {
+        if (
+          e.currentTarget.selectionStart === e.currentTarget.value.length ||
+          (e.currentTarget.selectionStart === 0 &&
+            e.currentTarget.selectionEnd === e.currentTarget.value.length)
+        ) {
+          e.preventDefault()
+          if (field === 'month') dayRef.current?.focus()
+          if (field === 'day') yearRef.current?.focus()
+        }
+      } else if (e.key === 'ArrowLeft') {
+        if (
+          e.currentTarget.selectionStart === 0 ||
+          (e.currentTarget.selectionStart === 0 &&
+            e.currentTarget.selectionEnd === e.currentTarget.value.length)
+        ) {
+          e.preventDefault()
+          if (field === 'day') monthRef.current?.focus()
+          if (field === 'year') dayRef.current?.focus()
+        }
+      }
+    }
+
+  return (
+    <div className="flex border rounded-lg items-center text-sm px-1">
+      <input
+        type="text"
+        ref={monthRef}
+        max={12}
+        maxLength={2}
+        value={date.month.toString()}
+        onChange={handleInputChange('month')}
+        onKeyDown={handleKeyDown('month')}
+        onFocus={(e) => {
+          if (window.innerWidth > 1024) {
+            e.target.select()
+          }
+        }}
+        onBlur={handleBlur('month')}
+        className="p-0 outline-none w-6 border-none text-center"
+        placeholder="M"
+      />
+      <span className="opacity-20 -mx-px">/</span>
+      <input
+        type="text"
+        ref={dayRef}
+        max={31}
+        maxLength={2}
+        value={date.day.toString()}
+        onChange={handleInputChange('day')}
+        onKeyDown={handleKeyDown('day')}
+        onFocus={(e) => {
+          if (window.innerWidth > 1024) {
+            e.target.select()
+          }
+        }}
+        onBlur={handleBlur('day')}
+        className="p-0 outline-none w-7 border-none text-center"
+        placeholder="D"
+      />
+      <span className="opacity-20 -mx-px">/</span>
+      <input
+        type="text"
+        ref={yearRef}
+        max={9999}
+        maxLength={4}
+        value={date.year.toString()}
+        onChange={handleInputChange('year')}
+        onKeyDown={handleKeyDown('year')}
+        onFocus={(e) => {
+          if (window.innerWidth > 1024) {
+            e.target.select()
+          }
+        }}
+        onBlur={handleBlur('year')}
+        className="p-0 outline-none w-12 border-none text-center"
+        placeholder="YYYY"
+      />
+    </div>
+  )
+}
+
+DateInput.displayName = 'DateInput'
+
+export { DateInput }