@goplusvn/core 0.1.0 → 0.1.1

package/src/ui/forms/radio-group.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import type { ComponentProps } from "react";
+import { cn } from "../../utils";
+
+export function RadioGroup({
+  className,
+  ...props
+}: ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+export function RadioGroupItem({
+  className,
+  ...props
+}: ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "cursor-pointer aspect-square h-current w-4 rounded-full border-[1.5px] border-primary text-primary focus:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex items-center justify-center"
+      >
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}

package/src/ui/forms/rating.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useState } from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva } from "class-variance-authority";
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../utils";
+import { DynamicIcon } from "../primitives/dynamic-icon";
+import type { DynamicIconNameType } from "../primitives/dynamic-icon";
+import type { VariantProps } from "class-variance-authority";
+
+export const starVariants = cva(
+  "transition-all duration-100 ease-in-out hover:scale-110",
+  {
+    variants: {
+      size: {
+        sm: "w-4 h-4",
+        default: "w-6 h-6",
+        lg: "w-8 h-8",
+      },
+      variant: {
+        default: "text-yellow-400",
+        primary: "text-primary",
+        muted: "text-muted-foreground",
+      },
+      filled: {
+        true: "",
+        false: "text-gray-200",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+      filled: false,
+    },
+  },
+);
+
+interface RatingProps
+  extends ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
+    VariantProps<typeof starVariants> {
+  length?: number;
+  readOnly?: boolean;
+  iconName?: DynamicIconNameType;
+}
+
+export function Rating({
+  className,
+  length = 5,
+  size,
+  variant = "default",
+  orientation = "horizontal",
+  readOnly = false,
+  iconName = "Star",
+  ...props
+}: RatingProps) {
+  const currentValue = props.value || "0";
+  const [hoverValue, onHoverValue] = useState(currentValue);
+
+  if (readOnly) {
+    return (
+      <div
+        data-slot="rating"
+        role="img"
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "gap-x-1.5" : "flex-col space-y-1.5",
+          className,
+        )}
+        aria-label={`Rating: ${currentValue} out of ${length}`}
+        {...props}
+      >
+        {Array.from({ length }, (_, index) => {
+          const starValue = (index + 1).toString();
+          const filled = Number(starValue) <= Number(currentValue);
+
+          return (
+            <DynamicIcon
+              key={starValue}
+              name={iconName}
+              className={cn(
+                starVariants({ size, variant, filled }),
+                "fill-current",
+              )}
+              aria-hidden
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="rating"
+      className={cn(
+        "flex",
+        orientation === "horizontal" ? "gap-x-1.5" : "flex-col space-y-1.5",
+        className,
+      )}
+      orientation={orientation}
+      onMouseLeave={() => onHoverValue("0")}
+      aria-label="Rating"
+      {...props}
+    >
+      {Array.from({ length }).map((_, index) => {
+        const starValue = (index + 1).toString();
+        const filled =
+          Number(starValue) <= (Number(hoverValue) || Number(currentValue));
+
+        return (
+          <RatingStar
+            key={starValue}
+            variant={variant}
+            size={size}
+            filled={filled}
+            value={starValue}
+            onHoverValue={onHoverValue}
+            iconName={iconName}
+          />
+        );
+      })}
+    </RadioGroupPrimitive.Root>
+  );
+}
+
+interface RatingStarProps
+  extends RadioGroupPrimitive.RadioGroupItemProps,
+    VariantProps<typeof starVariants> {
+  onHoverValue: (rating: string) => void;
+  iconName: DynamicIconNameType;
+}
+
+export function RatingStar({
+  value,
+  size,
+  variant,
+  filled,
+  onHoverValue,
+  iconName,
+  ...props
+}: RatingStarProps) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="rating-star"
+      value={value}
+      className={cn(
+        starVariants({ size, variant, filled }),
+        "cursor-pointer focus:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      )}
+      onMouseEnter={() => onHoverValue(value)}
+      aria-label={`Rate ${value} star${value === "1" ? "" : "s"}`}
+      {...props}
+    >
+      <DynamicIcon name={iconName} className="h-full w-full fill-current" />
+    </RadioGroupPrimitive.Item>
+  );
+}

package/src/ui/forms/time-picker.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { format } from "date-fns";
+import { Clock } from "lucide-react";
+
+import type { ComponentProps } from "react";
+
+import { cn, timeToDate } from "../../utils";
+
+import { Button } from "../primitives";
+import { InputTime } from "./input-time";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/client";
+
+interface TimePickerProps extends ComponentProps<typeof InputTime> {
+  value: string | undefined;
+  popoverContentClassName?: string;
+  popoverContentOptions?: ComponentProps<typeof PopoverContent>;
+  buttonClassName?: string;
+  buttonOptions?: ComponentProps<typeof Button>;
+  placeholder?: string;
+}
+
+export function TimePicker({
+  value,
+  popoverContentClassName,
+  popoverContentOptions,
+  buttonClassName,
+  buttonOptions,
+  placeholder = "Pick time",
+  ...props
+}: TimePickerProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn("w-full px-3 text-start font-normal", buttonClassName)}
+          {...buttonOptions}
+        >
+          {value ? (
+            <span>{format(timeToDate(value), "p")}</span>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <Clock className="ms-auto h-4 w-4 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn("w-auto p-0", popoverContentClassName)}
+        align="start"
+        {...popoverContentOptions}
+      >
+        <InputTime className="border-0" value={value} {...props} />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/ui/index.tsx

@@ -0,0 +1,17 @@
+// @goerp/core/ui
+// Reusable UI components for GoERP applications
+// Based on shadcn/ui patterns
+
+// Re-export all primitives for backward compatibility
+export * from "./primitives";
+export * from "./primitives/client";
+
+// Re-export from sub-modules
+export * from "./forms";
+export * from "./data-display";
+export * from "./feedback";
+export * from "./layout";
+export * from "./auth";
+// export * from "./crud"
+export * from "./management";
+export * from "./pages/not-found";

package/src/ui/layout/animated-list.tsx

@@ -0,0 +1,77 @@
+import type { HTMLMotionProps, Variants } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
+import React from "react";
+
+type AnimatedListProps = HTMLMotionProps<"ul"> & {
+  children: React.ReactNode;
+  /**
+   * Whether to animate initial mount. Default is false to prevent flash on load.
+   */
+  initial?: boolean;
+  className?: string;
+};
+
+export const AnimatedList = ({
+  children,
+  className,
+  initial = false,
+  ...props
+}: AnimatedListProps) => {
+  return (
+    <AnimatePresence initial={initial} mode="popLayout">
+      <motion.ul
+        // @ts-ignore
+        className={className}
+        layout
+        style={{ listStyle: "none", padding: 0, margin: 0 }}
+        {...props}
+      >
+        {children}
+      </motion.ul>
+    </AnimatePresence>
+  );
+};
+
+type AnimatedItemProps = HTMLMotionProps<"li"> & {
+  children: React.ReactNode;
+  /**
+   * Unique ID for layout animations.
+   */
+  layoutId?: string;
+  /**
+   * Optional variants for enter/exit animations.
+   */
+  variants?: Variants;
+  className?: string;
+};
+
+const defaultItemVariants: Variants = {
+  hidden: { opacity: 0, scale: 0.95 },
+  visible: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.95, transition: { duration: 0.2 } },
+};
+
+export const AnimatedItem = ({
+  children,
+  className,
+  layoutId,
+  variants = defaultItemVariants,
+  ...props
+}: AnimatedItemProps) => {
+  return (
+    <motion.li
+      layout={!!layoutId}
+      layoutId={layoutId}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      variants={variants}
+      // @ts-ignore
+      className={className}
+      transition={{ type: "spring", stiffness: 300, damping: 30 }}
+      {...props}
+    >
+      {children}
+    </motion.li>
+  );
+};

package/src/ui/layout/animated-sidebar.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+/**
+ * Animated Sidebar Components using Framer Motion
+ *
+ * This module provides smooth animated versions of sidebar components
+ * using framer-motion for state transitions.
+ */
+
+import * as React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../../utils";
+import { useSidebar } from "../primitives/sidebar";
+
+// Animation variants for sidebar width
+const sidebarVariants = {
+  expanded: {
+    width: "var(--sidebar-width)",
+    transition: {
+      duration: 0.2,
+      ease: "easeInOut",
+    },
+  },
+  collapsed: {
+    width: "var(--sidebar-width-icon)",
+    transition: {
+      duration: 0.2,
+      ease: "easeInOut",
+    },
+  },
+  hoverExpanded: {
+    width: "var(--sidebar-width)",
+    transition: {
+      duration: 0.15,
+      ease: "easeOut",
+    },
+  },
+};
+
+// Animation variants for content opacity
+const contentVariants = {
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      duration: 0.2,
+      ease: "easeOut",
+      delay: 0.05,
+    },
+  },
+  hidden: {
+    opacity: 0,
+    x: -10,
+    transition: {
+      duration: 0.1,
+      ease: "easeIn",
+    },
+  },
+};
+
+// Animation variants for group labels
+const labelVariants = {
+  visible: {
+    opacity: 1,
+    marginTop: 0,
+    transition: {
+      duration: 0.2,
+      ease: "easeOut",
+    },
+  },
+  hidden: {
+    opacity: 0,
+    marginTop: -32,
+    transition: {
+      duration: 0.15,
+      ease: "easeIn",
+    },
+  },
+};
+
+interface AnimatedSidebarContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Animated sidebar content wrapper that handles smooth width transitions
+ */
+export function AnimatedSidebarContent({
+  children,
+  className,
+}: AnimatedSidebarContentProps) {
+  const { state, isHoverExpanded } = useSidebar();
+
+  const animationState = React.useMemo(() => {
+    if (isHoverExpanded) return "hoverExpanded";
+    return state;
+  }, [state, isHoverExpanded]);
+
+  return (
+    <motion.div
+      initial={false}
+      animate={animationState}
+      variants={sidebarVariants}
+      // @ts-ignore
+      className={cn("flex h-full flex-col overflow-hidden", className)}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+/**
+ * Animated text/label that fades in/out based on sidebar state
+ */
+export function AnimatedSidebarText({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const { state, isHoverExpanded } = useSidebar();
+  const isExpanded = state === "expanded" || isHoverExpanded;
+
+  return (
+    <AnimatePresence mode="wait">
+      {isExpanded && (
+        <motion.span
+          initial="hidden"
+          animate="visible"
+          exit="hidden"
+          variants={contentVariants}
+          // @ts-ignore
+          className={cn("whitespace-nowrap", className)}
+        >
+          {children}
+        </motion.span>
+      )}
+    </AnimatePresence>
+  );
+}
+
+/**
+ * Animated group label with smooth margin/opacity transitions
+ */
+export function AnimatedSidebarGroupLabel({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const { state, isHoverExpanded } = useSidebar();
+  const isExpanded = state === "expanded" || isHoverExpanded;
+
+  return (
+    <motion.div
+      initial={false}
+      animate={isExpanded ? "visible" : "hidden"}
+      variants={labelVariants}
+      // @ts-ignore
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-bold text-primary uppercase tracking-wider",
+        className,
+      )}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+/**
+ * Staggered animation container for menu items
+ */
+const staggerContainerVariants = {
+  visible: {
+    transition: {
+      staggerChildren: 0.03,
+    },
+  },
+  hidden: {
+    transition: {
+      staggerChildren: 0.02,
+      staggerDirection: -1,
+    },
+  },
+};
+
+const staggerItemVariants = {
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      duration: 0.15,
+      ease: "easeOut",
+    },
+  },
+  hidden: {
+    opacity: 0,
+    x: -8,
+    transition: {
+      duration: 0.1,
+      ease: "easeIn",
+    },
+  },
+};
+
+export function AnimatedSidebarMenuContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const { state, isHoverExpanded } = useSidebar();
+  const isExpanded = state === "expanded" || isHoverExpanded;
+
+  return (
+    <motion.ul
+      initial={false}
+      animate={isExpanded ? "visible" : "hidden"}
+      variants={staggerContainerVariants}
+      // @ts-ignore
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    >
+      {children}
+    </motion.ul>
+  );
+}
+
+export function AnimatedSidebarMenuItem({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <motion.li
+      variants={staggerItemVariants}
+      // @ts-ignore
+      className={className}
+    >
+      {children}
+    </motion.li>
+  );
+}
+
+/**
+ * Animated collapsible sub-menu
+ */
+export function AnimatedSidebarSubMenu({
+  children,
+  isOpen,
+  className,
+}: {
+  children: React.ReactNode;
+  isOpen: boolean;
+  className?: string;
+}) {
+  return (
+    <AnimatePresence initial={false}>
+      {isOpen && (
+        <motion.ul
+          initial={{ height: 0, opacity: 0 }}
+          animate={{
+            height: "auto",
+            opacity: 1,
+            transition: {
+              height: { duration: 0.2, ease: "easeOut" },
+              opacity: { duration: 0.15, delay: 0.05 },
+            },
+          }}
+          exit={{
+            height: 0,
+            opacity: 0,
+            transition: {
+              height: { duration: 0.15, ease: "easeIn" },
+              opacity: { duration: 0.1 },
+            },
+          }}
+          // @ts-ignore
+          className={cn(
+            "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 overflow-hidden",
+            className,
+          )}
+        >
+          {children}
+        </motion.ul>
+      )}
+    </AnimatePresence>
+  );
+}