kmod-cli 1.0.10

package/component-templates/components/segments-circle.tsx

@@ -0,0 +1,235 @@
+// import {cn} from "@/lib/utils";
+// import React from "react";
+
+// type ProgressCircleProps = {
+//   dashCount: number;
+//   dashColor?: string;
+//   dashBorderColor?: string;
+//   dashBorderWidth?: number;
+//   strokeWidth?: number;
+//   radius?: number;
+//   gapLength?: number;
+//   dashColorList?: string[];
+//   angle?: any;
+//   className?: string;
+//   pathClass?: string;
+// };
+
+// export const ProgressCircle: React.FC<ProgressCircleProps> = ({
+//   dashCount,
+//   dashColor = "black",
+//   dashBorderColor = "white",
+//   dashBorderWidth = 0,
+//   strokeWidth = 4,
+//   radius = 24,
+//   gapLength = 7,
+//   dashColorList = [],
+//   angle = -83,
+//   className,
+//   pathClass,
+// }) => {
+//   const circumference = 2 * Math.PI * radius;
+
+//   const totalGapLength = gapLength * dashCount;
+//   const totalDashLength = circumference - totalGapLength;
+
+//   const dashLength = totalDashLength / dashCount;
+//   const anglePerDash = (dashLength / circumference) * 360;
+
+//   const polarToCartesian = (
+//     cx: number,
+//     cy: number,
+//     r: number,
+//     angle: number
+//   ) => {
+//     const rad = (angle * Math.PI) / 180;
+//     return {
+//       x: cx + r * Math.cos(rad),
+//       y: cy + r * Math.sin(rad),
+//     };
+//   };
+
+//   const dashes = [];
+//   let currentAngle = angle;
+
+//   for (let i = 0; i < dashCount; i++) {
+//     const startAngle = currentAngle;
+//     const endAngle = startAngle + anglePerDash;
+
+//     const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
+
+//     const start = polarToCartesian(
+//       radius + strokeWidth,
+//       radius + strokeWidth,
+//       radius,
+//       startAngle
+//     );
+//     const end = polarToCartesian(
+//       radius + strokeWidth,
+//       radius + strokeWidth,
+//       radius,
+//       endAngle
+//     );
+
+//     dashes.push(
+//       <path
+//         className={cn(pathClass)}
+//         key={i}
+//         d={`M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`}
+//         fill="none"
+//         stroke={dashColorList[i] || dashColor}
+//         strokeWidth={strokeWidth}
+//         strokeLinecap="round"
+//         strokeLinejoin="round"
+//         style={{
+//           strokeWidth: dashBorderWidth > 0 ? dashBorderWidth : strokeWidth,
+//         }}
+//       />
+//     );
+
+//     currentAngle = endAngle + (gapLength / circumference) * 360;
+//   }
+
+//   return (
+//     <svg
+//       className={cn(className)}
+//       height={radius * 2 + strokeWidth * 2}
+//       width={radius * 2 + strokeWidth * 2}
+//     >
+//       {dashes}
+//     </svg>
+//   );
+// };
+
+import React from 'react';
+
+import { cn } from '../lib/utils';
+
+export type SegmentCircleProps = {
+  dashCount: number;
+  colors?: string[]; // list of colors for each dash
+  color?: string; // fallback color if colors array is not provided
+  radius?: number;
+  strokeWidth?: number;
+  gapLength?: number;
+  startAngle?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  className?: string;
+  pathClass?: string;
+  animate?: boolean; // animation rotation
+  speed?: number; // animation speed (s)
+};
+
+/**
+ * SegmentCircle component renders a circle with dashes (segments).
+ * It accepts various props to customize the appearance and behavior of the circle.
+ * @param {SegmentCircleProps} props - Properties for customizing the SegmentCircle component.
+ * @returns {JSX.Element} Rendered SegmentCircle component.
+ */
+/**
+ * SegmentCircleProps:
+ * - dashCount: number of dashes (segments)
+ * - colors: list of colors for each dash (fallbacks to color if not provided)
+ * - color: fallback color if colors array is not provided
+ * - radius: radius of the circle
+ * - strokeWidth: stroke width of the dashes
+ * - gapLength: length of the gap between dashes
+ * - startAngle: starting angle of the first dash
+ * - borderWidth: border width (if needed)
+ * - borderColor: border color (if needed)
+ * - className: class name for the container element
+ * - pathClass: class name for each dash path
+ * - animate: whether to animate the rotation of the circle
+ * - speed: animation speed (seconds)
+ */
+export const SegmentCircle: React.FC<SegmentCircleProps> = ({
+  dashCount,
+  colors = [],
+  color = "black",
+  radius = 24,
+  strokeWidth = 4,
+  gapLength = 7,
+  startAngle = -90,
+  borderWidth = 0,
+  borderColor = "white",
+  className,
+  pathClass,
+  animate = false,
+  speed = 2,
+}) => {
+  const circumference = 2 * Math.PI * radius;
+  const totalGapLength = gapLength * dashCount;
+  const totalDashLength = circumference - totalGapLength;
+  const dashLength = totalDashLength / dashCount;
+  const anglePerDash = (dashLength / circumference) * 360;
+
+  const polarToCartesian = (cx: number, cy: number, r: number, angle: number) => {
+    const rad = (angle * Math.PI) / 180;
+    return {
+      x: cx + r * Math.cos(rad),
+      y: cy + r * Math.sin(rad),
+    };
+  };
+
+  const dashes: React.ReactNode[] = [];
+  let currentAngle = startAngle;
+
+  for (let i = 0; i < dashCount; i++) {
+    const start = polarToCartesian(radius, radius, radius, currentAngle);
+    const end = polarToCartesian(radius, radius, radius, currentAngle + anglePerDash);
+    const largeArcFlag = anglePerDash > 180 ? 1 : 0;
+
+    // border (if needed)
+    if (borderWidth > 0) {
+      dashes.push(
+        <path
+          key={`border-${i}`}
+          d={`M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`}
+          fill="none"
+          stroke={borderColor}
+          strokeWidth={strokeWidth + borderWidth * 2}
+          strokeLinecap="round"
+        />
+      );
+    }
+
+    // main dash
+    dashes.push(
+      <path
+        className={cn(pathClass)}
+        key={i}
+        d={`M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`}
+        fill="none"
+        stroke={colors[i] || color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
+    );
+
+    currentAngle += anglePerDash + (gapLength / circumference) * 360;
+  }
+
+  return (
+    <svg
+      className={cn(className)}
+      viewBox={`0 0 ${radius * 2} ${radius * 2}`}
+      width={radius * 2}
+      height={radius * 2}
+      style={
+        animate
+          ? { animation: `spin ${speed}s linear infinite` }
+          : undefined
+      }
+    >
+      {dashes}
+      {animate && (
+        <style>{`
+          @keyframes spin {
+            100% { transform: rotate(360deg); }
+          }
+        `}</style>
+      )}
+    </svg>
+  );
+};

package/component-templates/components/single-select.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import * as React from 'react';
+
+import {
+  CheckIcon,
+  ChevronDown,
+  Loader2,
+  Plus,
+  WandSparkles,
+} from 'lucide-react';
+
+import { cn } from '../lib/utils';
+import { Button } from '../ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '../ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../ui/popover';
+import { Separator } from '../ui/separator';
+
+interface SingleSelectProps {
+  options: {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+
+  value?: string;
+  onValueChange: (value?: string) => void;
+
+  placeholder?: string;
+  animation?: number;
+  modalPopover?: boolean;
+  className?: string;
+
+  createNewWhenEmpty?: boolean;
+  onCreateNewWhenEmpty?: (
+    value: string,
+  ) => Promise<{ label: string; value: string; icon?: React.ComponentType<{ className?: string }> } | void>;
+  emptyLabel?: string;
+  newLabel?: React.ReactNode;
+  contentClassName?: string;
+}
+
+export const SingleSelect: React.FC<SingleSelectProps> = ({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select an option",
+  animation = 0,
+  modalPopover = false,
+  className,
+  createNewWhenEmpty = false,
+  onCreateNewWhenEmpty,
+  emptyLabel = "No options available",
+  contentClassName,
+  newLabel,
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const [searchInput, setSearchInput] = React.useState("");
+  const [isCreating, setIsCreating] = React.useState(false);
+  const [isAnimating, setIsAnimating] = React.useState(false);
+  
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+  const [triggerWidth, setTriggerWidth] = React.useState<number | undefined>();
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+
+React.useEffect(() => {
+  const trigger = triggerRef.current;
+  if (!trigger) return;
+
+  const updateWidth = () => {
+    setTriggerWidth(trigger.offsetWidth);
+  };
+
+  updateWidth(); // set lần đầu
+
+  const resizeObserver = new ResizeObserver(updateWidth);
+  resizeObserver.observe(trigger);
+
+  return () => resizeObserver.disconnect();
+}, []);
+
+
+
+  const handleClear = () => {
+    onValueChange(undefined);
+  };
+
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      setIsPopoverOpen(true);
+    }
+  };
+
+  const handleCreate = async () => {
+    try {
+      setIsCreating(true);
+      const newItem = await onCreateNewWhenEmpty?.(searchInput);
+      if (newItem) {
+        onValueChange(newItem.value);
+        setSearchInput("");
+        setIsPopoverOpen(false);
+      }
+    } catch (err) {
+      console.error("create error:", err);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
+      <PopoverTrigger asChild>
+        <Button
+          ref={triggerRef}
+          onClick={() => setIsPopoverOpen(true)}
+          className={cn(
+            "border-border flex h-auto min-h-10 w-full items-center justify-between rounded-md border bg-inherit p-1 hover:bg-inherit [&_svg]:pointer-events-auto",
+            className,
+          )}
+        >
+          {selectedOption ? (
+            <div className="flex w-full items-center justify-between">
+              <div className="flex items-center">
+                {selectedOption.icon && <selectedOption.icon className="mr-2 h-4 w-4" />}
+                <span className="text-foreground mx-3 text-sm">{selectedOption.label}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                {/* <XIcon
+                  className="text-muted-foreground mx-2 h-4 cursor-pointer"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleClear();
+                  }}
+                />
+                <Separator orientation="vertical" className="flex h-full min-h-6" /> */}
+                <ChevronDown className="text-muted-foreground mx-2 h-4 cursor-pointer" />
+              </div>
+            </div>
+          ) : (
+            <div className="mx-auto flex w-full items-center justify-between">
+              <span className="text-muted-foreground mx-3 text-sm">{placeholder}</span>
+              <ChevronDown className="text-muted-foreground mx-2 h-4 cursor-pointer" />
+            </div>
+          )}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent style={{ width: triggerWidth || "auto" }} className={cn("border-red-500 w-full p-0", contentClassName)} align="start">
+        <Command>
+          <CommandInput
+            placeholder="Search..."
+            value={searchInput}
+            onValueChange={setSearchInput}
+            onKeyDown={handleInputKeyDown}
+          />
+          <CommandList className={(createNewWhenEmpty && searchInput.trim() !== "" && "p-1") || ""}>
+            <CommandEmpty className={(createNewWhenEmpty && searchInput.trim() !== "" && "py-0") || ""}>
+              {createNewWhenEmpty && searchInput.trim() !== "" && onCreateNewWhenEmpty ? (
+                <div
+                  className={cn(
+                    "text-muted-foreground hover:bg-accent flex h-10 cursor-pointer items-center justify-center rounded-md px-4 text-sm",
+                    isCreating && "pointer-events-none opacity-50",
+                  )}
+                  onClick={() => handleCreate()}
+                >
+                  {isCreating ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <>
+                      {newLabel ?? <Plus className="mr-2 h-4 w-4" />}
+                      <span className="font-medium">"{searchInput}"</span>
+                    </>
+                  )}
+                </div>
+              ) : (
+                <div className="py-2 text-center text-sm text-muted-foreground">{emptyLabel}</div>
+              )}
+            </CommandEmpty>
+
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = option.value === value;
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      onValueChange(option.value);
+                      setIsPopoverOpen(false);
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <div
+                      className={cn(
+                        "border-border mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                        isSelected ? "bg-primary text-foreground" : "opacity-50 [&_svg]:invisible",
+                      )}
+                    >
+                      <CheckIcon className="h-4 w-4" />
+                    </div>
+                    {option.icon && <option.icon className="text-muted-foreground mr-2 h-4 w-4" />}
+                    <span>{option.label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup>
+              <div className="flex items-center justify-between">
+                {value && (
+                  <>
+                    <CommandItem onSelect={handleClear} className="flex-1 cursor-pointer justify-center">
+                      Clear
+                    </CommandItem>
+                    <Separator orientation="vertical" className="flex h-full min-h-6" />
+                  </>
+                )}
+                <CommandItem onSelect={() => setIsPopoverOpen(false)} className="flex-1 cursor-pointer justify-center">
+                  Close
+                </CommandItem>
+              </div>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+
+      {animation > 0 && value && (
+        <WandSparkles
+          className={cn("text-foreground bg-background my-2 h-3 w-3 cursor-pointer", isAnimating ? "" : "text-muted-foreground")}
+          onClick={() => setIsAnimating(!isAnimating)}
+        />
+      )}
+    </Popover>
+  );
+};

package/component-templates/components/stroke-circle.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+export type CircleStrokeProps = {
+  radius?: number;
+  strokeColor?: string;
+  strokeWidth?: number;
+  dashCount?: number; // dash count
+  gapLength?: number; // dash gap length 
+  strokeLinecap?: "butt" | "round" | "square";
+  strokeLinejoin?: "miter" | "round" | "bevel";
+  fill?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  cx?: number;
+  cy?: number;
+} & React.HTMLAttributes<SVGElement>;
+
+export const CircleStroke: React.FC<CircleStrokeProps> = ({
+  radius = 40,
+  strokeWidth = 5,
+  strokeColor = "black",
+  dashCount = 12,
+  gapLength = 5,
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+  fill = "transparent",
+  cx = 50,
+  cy = 50,
+  className,
+  style,
+  ...props
+}) => {
+  const circumference = 2 * Math.PI * radius;
+  const dashLength = (circumference - dashCount * gapLength) / dashCount;
+
+  return (
+    <svg
+      height={(radius + strokeWidth) * 2}
+      width={(radius + strokeWidth) * 2}
+      className={className}
+      style={style}
+      {...props}
+    >
+      <circle
+        cx={cx}
+        cy={cy}
+        r={radius}
+        stroke={strokeColor}
+        strokeWidth={strokeWidth}
+        fill={fill}
+        strokeDasharray={`${dashLength} ${gapLength}`}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
+      />
+    </svg>
+  );
+};

package/component-templates/components/table/column-table.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+export interface DataColumnProps<TData, TValue> {
+  arr: ColumnDef<TData, TValue>[];
+  onReady?: (columns: ColumnDef<TData, TValue>[]) => void;
+}
+
+export const DataColumns = <TData, TValue>({ arr, onReady }: DataColumnProps<TData, TValue>): ColumnDef<TData, TValue>[] => {
+  useEffect(() => {
+    onReady?.(arr);
+  }, [arr]);
+  return arr;
+};