@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/primitives/dropdown-menu.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import * as React from "react";
+import type { ComponentProps } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Dot } from "lucide-react";
+import { cn } from "../../utils";
+
+export function DropdownMenu({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+export function DropdownMenuPortal({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+export function DropdownMenuTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuGroup({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+export function DropdownMenuRadioGroup({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuSub({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+type DropdownMenuSubTriggerProps = ComponentProps<
+  typeof DropdownMenuPrimitive.SubTrigger
+> & {
+  inset?: boolean;
+};
+
+export function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "cursor-pointer flex items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:ps-8 focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ms-auto h-4 w-4 rtl:-scale-100" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+export function DropdownMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+export function DropdownMenuItem({
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:ps-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Check className="h-4 w-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+export function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Dot className="h-4 w-4 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+export function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+}

package/src/ui/primitives/dynamic-icon.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+// Refer to Lucide documentation for more details https://lucide.dev/guide/packages/lucide-react
+import { icons } from "lucide-react";
+
+import type { LucideProps } from "lucide-react";
+
+export type DynamicIconNameType = keyof typeof icons;
+
+interface DynamicIconProps extends LucideProps {
+  name?: DynamicIconNameType;
+}
+
+// Component to render a dynamic Lucide icon based on its name.
+export function DynamicIcon({ name, ...props }: DynamicIconProps) {
+  if (!name) return null;
+
+  const LucideIcon = icons[name]; // Dynamically retrieve the icon by name.
+
+  // Return null if the icon name is invalid.
+  if (!LucideIcon) return null;
+
+  return <LucideIcon {...props} />;
+}

package/src/ui/primitives/index.tsx

@@ -0,0 +1,134 @@
+// @goerp/core/ui/primitives
+// Primitive UI components (Server Compatible)
+
+import * as React from "react";
+import { cn } from "../../utils";
+import { Button } from "./button";
+import type { ButtonProps } from "./button";
+
+export * from "./badge";
+export * from "./button";
+export * from "./input";
+export * from "./checkbox";
+
+// ============================================================================
+// Textarea
+// ============================================================================
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export * from "./card";
+export * from "./separator";
+
+// ============================================================================
+// Spinner / Loading
+// ============================================================================
+
+export interface SpinnerProps {
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+export function Spinner({ size = "md", className }: SpinnerProps) {
+  const sizeClasses = {
+    sm: "h-4 w-4",
+    md: "h-6 w-6",
+    lg: "h-8 w-8",
+  };
+
+  return (
+    <div
+      className={cn(
+        "animate-spin rounded-full border-2 border-current border-t-transparent",
+        sizeClasses[size],
+        className,
+      )}
+    />
+  );
+}
+
+export interface ButtonLoadingProps extends ButtonProps {
+  isLoading?: boolean;
+}
+
+export const ButtonLoading = React.forwardRef<
+  HTMLButtonElement,
+  ButtonLoadingProps
+>(({ className, isLoading, children, disabled, ...props }, ref) => {
+  return (
+    <Button
+      className={cn("gap-2", className)}
+      disabled={isLoading || disabled}
+      ref={ref}
+      {...props}
+    >
+      {isLoading && <Spinner size="sm" />}
+      {children}
+    </Button>
+  );
+});
+ButtonLoading.displayName = "ButtonLoading";
+
+// ============================================================================
+// Skeleton
+// ============================================================================
+
+export function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+// Data Display
+export * from "./card"; // Added
+export * from "./table";
+export * from "./dropdown-menu";
+
+// Feedback
+export * from "./dialog";
+
+// Layout
+export * from "./tabs";
+
+export * from "./breadcrumb";
+export * from "./keyboard";
+export * from "./pagination";
+export * from "./status-badge";
+export * from "./sidebar";
+export * from "./popover";
+export * from "./scroll-area";
+export * from "./calendar";
+export * from "./resizable";
+export * from "./slider";
+export * from "./switch";
+export * from "./tooltip";
+export * from "./select";
+export * from "./menubar";
+export * from "./navigation-menu";
+export * from "./toggle";
+export * from "./toggle-group";
+export * from "./combobox";
+export * from "./label";

package/src/ui/primitives/input-number.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../utils";
+
+import { Input } from "./input";
+
+interface InputNumberProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "onChange" | "value"
+  > {
+  value?: number | string | null;
+  onChange?: (value: number | null) => void;
+  decimalScale?: number;
+  suffix?: string;
+}
+
+export const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
+  ({ value, onChange, className, decimalScale = 0, suffix, ...props }, ref) => {
+    // Internal string state to handle formatting
+    const [displayValue, setDisplayValue] = React.useState("");
+
+    // Helper to parse displayed string to number
+    const parseDisplayValue = (val: string) => {
+      // Remove dots (thousands), replace comma with dot (decimal)
+      const clean = val.replace(/\./g, "").replace(",", ".");
+      return Number(clean);
+    };
+
+    const formatNumber = React.useCallback(
+      (num: number) => {
+        return new Intl.NumberFormat("vi-VN", {
+          maximumFractionDigits: decimalScale,
+          minimumFractionDigits: 0,
+        }).format(num);
+      },
+      [decimalScale],
+    );
+
+    // Update display value when prop value changes
+    React.useEffect(() => {
+      if (value === null || value === undefined || value === "") {
+        setDisplayValue("");
+        return;
+      }
+
+      const numValue = Number(value);
+      if (isNaN(numValue)) return;
+
+      // Avoid overriding user input if they match numerically
+      const currentNum = parseDisplayValue(displayValue);
+      if (currentNum !== numValue) {
+        setDisplayValue(formatNumber(numValue));
+      }
+    }, [value, decimalScale, displayValue, formatNumber]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = e.target.value;
+
+      // Allow digits and one comma
+      let cleanVal = rawValue.replace(/[^0-9,]/g, "");
+
+      // Handle multiple commas - keep only first
+      const parts = cleanVal.split(",");
+      if (parts.length > 2) {
+        cleanVal = parts[0] + "," + parts.slice(1).join("");
+      }
+
+      if (cleanVal === "") {
+        setDisplayValue("");
+        onChange?.(null);
+        return;
+      }
+
+      // Split integer and decimal parts
+      const [integerPart, decimalPart] = cleanVal.split(",");
+
+      let formattedInteger = integerPart;
+      if (integerPart) {
+        formattedInteger = new Intl.NumberFormat("vi-VN").format(
+          Number(integerPart),
+        );
+      }
+
+      let newDisplayValue = formattedInteger;
+
+      // Check decimal scale truncation
+      let finalDecimalPart = decimalPart;
+
+      if (decimalPart !== undefined) {
+        if (decimalScale !== undefined && decimalPart.length > decimalScale) {
+          finalDecimalPart = decimalPart.substring(0, decimalScale);
+        }
+        newDisplayValue += "," + finalDecimalPart;
+      }
+
+      setDisplayValue(newDisplayValue);
+
+      // Calculate numeric value for parent
+      let numStr = integerPart;
+      if (finalDecimalPart !== undefined) {
+        numStr += "." + finalDecimalPart;
+      }
+
+      const numValue = Number(numStr.replace(/\./g, ""));
+      onChange?.(numValue);
+    };
+
+    return (
+      <div className="relative">
+        <Input
+          {...props}
+          ref={ref}
+          type="text"
+          inputMode="numeric"
+          value={displayValue}
+          onChange={handleChange}
+          className={cn("pr-8", className)}
+        />
+        {suffix && (
+          <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-muted-foreground text-sm">
+            {suffix}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+InputNumber.displayName = "InputNumber";

package/src/ui/primitives/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "../../utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";

package/src/ui/primitives/keyboard.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+export function Keyboard({
+  className,
+  children,
+  ...props
+}: ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="keyboard"
+      className={cn(
+        "pointer-events-none select-none h-5 inline-flex items-center gap-x-1 px-1.5 bg-muted text-sm text-muted-foreground font-mono border rounded-sm",
+        "before:content-['⌘']",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </kbd>
+  );
+}

package/src/ui/primitives/label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import type { ComponentProps } from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../../utils";
+
+export interface LabelProps
+  extends ComponentProps<typeof LabelPrimitive.Root> {}
+
+export const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  LabelProps
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;