@mbao01/common 0.0.5 → 0.0.7

package/src/components/Progress/index.ts

@@ -0,0 +1 @@
+export { Progress } from "./Progress";

package/src/components/Progress/types.ts

@@ -0,0 +1,9 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { type VariantProps } from "../../libs";
+import { getProgressClasses } from "./constants";
+
+export type ProgressProps = Omit<
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,
+  "asChild"
+> &
+  VariantProps<typeof getProgressClasses>;

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { type SeparatorProps } from "./types";
+import { getSeparatorClasses } from "./constants";
+import { cn } from "../../utilities";
+
+export const Separator = ({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: SeparatorProps) => (
+  <SeparatorPrimitive.Root
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(getSeparatorClasses({ orientation }), className)}
+    {...props}
+  />
+);

package/src/components/Separator/constants.ts

@@ -0,0 +1,10 @@
+import { cva } from "../../libs";
+
+export const getSeparatorClasses = cva("shrink-0 bg-base-300", {
+  variants: {
+    orientation: {
+      horizontal: "h-[1px] w-full",
+      vertical: "h-full w-[1px]",
+    },
+  },
+});

package/src/components/Separator/index.ts

@@ -0,0 +1 @@
+export { Separator } from "./Separator";

package/src/components/Separator/types.ts

@@ -0,0 +1,5 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+export type SeparatorProps = React.ComponentPropsWithoutRef<
+  typeof SeparatorPrimitive.Root
+>;

package/src/components/Skeleton/Skeleton.tsx

@@ -1,26 +1,22 @@
-import c from "clsx";
 import { type SkeletonProps } from "./types";
-import { getSkeletonSize } from "./constants";
+import { getSkeletonClasses } from "./constants";
+import { cn } from "../../utilities";
 
 export const Skeleton = ({
-  className,
   round,
   width,
   height,
+  variant,
+  className,
   ...props
 }: SkeletonProps) => {
   return (
     <div
-      {...props}
-      className={c(
-        "skeleton",
-        getSkeletonSize({ width, height }),
-        {
-          "rounded-md": !round,
-          "rounded-full": round,
-        },
+      className={cn(
+        getSkeletonClasses({ width, height, round, variant }),
         className
       )}
+      {...props}
     />
   );
 };

package/src/components/Skeleton/constants.ts

@@ -1,38 +1,40 @@
-import c from "clsx";
-import { Size } from "./types";
+import { cva } from "../../libs";
 
-const WIDTH_SIZES = {
-  2: c("w-2"),
-  4: c("w-4"),
-  8: c("w-8"),
-  12: c("w-12"),
-  16: c("w-16"),
-  24: c("w-24"),
-  32: c("w-32"),
-  48: c("w-48"),
-  64: c("w-64"),
-  full: c("w-full"),
-} satisfies Record<Size, string>;
-
-const HEIGHT_SIZES = {
-  2: c("h-2"),
-  4: c("h-4"),
-  8: c("h-8"),
-  12: c("h-12"),
-  16: c("h-16"),
-  24: c("h-24"),
-  32: c("h-32"),
-  48: c("h-48"),
-  64: c("h-64"),
-  full: c("h-full"),
-} satisfies Record<Size, string>;
-
-export const getSkeletonSize = ({
-  width,
-  height,
-}: {
-  width?: Size;
-  height?: Size;
-}) => {
-  return c(WIDTH_SIZES[width!] ?? "w-full", HEIGHT_SIZES[height!] ?? "h-4");
-};
+export const getSkeletonClasses = cva("skeleton", {
+  variants: {
+    variant: { pulse: "animate-pulse" },
+    width: {
+      2: "w-2",
+      4: "w-4",
+      8: "w-8",
+      12: "w-12",
+      16: "w-16",
+      24: "w-24",
+      32: "w-32",
+      48: "w-48",
+      64: "w-64",
+      full: "w-full",
+    },
+    height: {
+      2: "h-2",
+      4: "h-4",
+      8: "h-8",
+      12: "h-12",
+      16: "h-16",
+      24: "h-24",
+      32: "h-32",
+      48: "h-48",
+      64: "h-64",
+      full: "h-full",
+    },
+    round: {
+      true: "rounded-full",
+      false: "rounded-md",
+    },
+  },
+  defaultVariants: {
+    width: "full",
+    height: 4,
+    round: false,
+  },
+});

package/src/components/Skeleton/types.ts

@@ -1,8 +1,5 @@
-export type Size = 2 | 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | "full";
+import { type VariantProps } from "../../libs";
+import { getSkeletonClasses } from "./constants";
 
-export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
-  width?: Size;
-  height?: Size;
-  round?: boolean;
-  className?: string;
-};
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getSkeletonClasses>;

package/src/components/Text/Text.tsx

@@ -1,12 +1,27 @@
-import c from 'clsx';
-import { createElement } from 'react';
-import { type TextProps } from './types';
-import { getTextClasses } from './constants';
+import React from "react";
+import { type TextProps } from "./types";
+import { getTextClasses } from "./constants";
+import { cn } from "../../utilities";
+import { Slot } from "@radix-ui/react-slot";
 
-export const Text = ({ as = 'span', size, variant, children, className }: TextProps) => {
-  return createElement(
-    as,
-    { className: c(getTextClasses({ size, variant }), className) },
-    children
+export const Text = ({
+  as,
+  size,
+  variant,
+  children,
+  className,
+  ...props
+}: TextProps) => {
+  const Comp = as ? Slot : "span";
+  const SlotChild = as ? as : React.Fragment;
+
+  return (
+    <Comp
+      className={cn(getTextClasses({ size, variant }), className)}
+      {...props}
+    >
+      {/* slot merges it's prop into it's immediate child */}
+      <SlotChild>{children}</SlotChild>
+    </Comp>
   );
 };

package/src/components/Text/constants.ts

@@ -1,29 +1,27 @@
-import c from 'clsx';
-import type { TextSize, TextVariant } from './types';
+import { cva } from "../../libs";
 
-const TEXT_SIZE = {
-  xs: c('text-xs'),
-  sm: c('text-sm'),
-  base: c('text-base'),
-  lg: c('text-lg'),
-  xl: c('text-xl'),
-  '2xl': c('text-2xl'),
-  '3xl': c('text-3xl'),
-  '4xl': c('text-4xl'),
-  '5xl': c('text-5xl'),
-} satisfies Record<TextSize, string>;
-
-const TEXT_VARIANT = {
-  info: c('text-info'),
-  error: c('text-error'),
-  success: c('text-success'),
-  warning: c('text-warning'),
-  primary: c('text-primary'),
-  secondary: c('text-secondary'),
-  accent: c('text-accent'),
-  neutral: c('text-neutral'),
-} satisfies Record<TextVariant, string>;
-
-export const getTextClasses = ({ size, variant }: { size?: TextSize; variant?: TextVariant }) => {
-  return c(TEXT_VARIANT[variant!], TEXT_SIZE[size!]);
-};
+export const getTextClasses = cva("", {
+  variants: {
+    variant: {
+      info: "text-info",
+      error: "text-error",
+      success: "text-success",
+      warning: "text-warning",
+      primary: "text-primary",
+      secondary: "text-secondary",
+      accent: "text-accent",
+      neutral: "text-neutral",
+    },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+    },
+  },
+});

package/src/components/Text/types.ts

@@ -1,21 +1,10 @@
-export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+import { type VariantProps } from "../../libs";
+import { getTextClasses } from "./constants";
 
-export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span';
-
-export type TextVariant =
-  | 'info'
-  | 'error'
-  | 'success'
-  | 'warning'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'neutral';
-
-export type TextProps = {
-  as?: TextTag;
-  size?: TextSize;
-  variant?: TextVariant;
-  children: React.ReactNode;
-  className?: string;
-};
+export type TextProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof getTextClasses> & {
+    as?: keyof Pick<
+      JSX.IntrinsicElements,
+      "h1" | "h2" | "h3" | "h4" | "h5" | "p"
+    >;
+  };

package/src/components/Tooltip/Tooltip.tsx

@@ -1,22 +1,36 @@
-import c from 'clsx';
-import { getTooltipClasses } from './constants';
-import { type TooltipProps } from './types';
+import React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type { TooltipArrowProps, TooltipContentProps } from "./types";
+import { getTooltipArrowClasses, getTooltipContentClasses } from "./constants";
+import { cn } from "../../utilities";
 
-export const Tooltip = ({
-  content,
-  children,
-  variant,
-  position,
-  className,
-  ...props
-}: TooltipProps) => {
-  return (
-    <div
-      {...props}
-      className={c(getTooltipClasses({ variant, position }), className)}
-      data-tip={content}
-    >
-      {children}
-    </div>
-  );
-};
+const Tooltip = (props: TooltipPrimitive.TooltipProps) => (
+  <TooltipPrimitive.Root {...props} />
+);
+
+const TooltipArrow = ({ className, variant, ...props }: TooltipArrowProps) => (
+  <TooltipPrimitive.Arrow
+    className={cn(getTooltipArrowClasses({ variant }), className)}
+    {...props}
+  />
+);
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipContentProps
+>(({ className, variant, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    className={cn(getTooltipContentClasses({ variant }), className)}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+Tooltip.Content = TooltipContent;
+Tooltip.Arrow = TooltipArrow;
+Tooltip.Portal = TooltipPrimitive.Portal;
+Tooltip.Provider = TooltipPrimitive.Provider;
+Tooltip.Trigger = TooltipPrimitive.Trigger;
+
+export { Tooltip };

package/src/components/Tooltip/constants.ts

@@ -1,33 +1,34 @@
-import c from "clsx";
-import type { TooltipPosition, TooltipVariant } from "./types";
+import { cva } from "../../libs";
 
-const TOOLTIP_POSITION = {
-  top: c("tooltip-top"),
-  right: c("tooltip-right"),
-  bottom: c("tooltip-bottom"),
-  left: c("tooltip-left"),
-} satisfies Record<TooltipPosition, string>;
+export const getTooltipContentClasses = cva(
+  "bg-base-200 text-base-content z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-content",
+        secondary: "bg-secondary text-secondary-content",
+        accent: "bg-accent text-accent-content",
+        neutral: "bg-neutral text-neutral-content",
+        info: "bg-info text-info-content",
+        success: "bg-success text-success-content",
+        warning: "bg-warning text-warning-content",
+        error: "bg-error text-error-content",
+      },
+    },
+  }
+);
 
-const TOOLTIP_VARIANTS = {
-  accent: c("tooltip-accent"),
-  default: c("tooltip-default"),
-  error: c("tooltip-error"),
-  ghost: c("tooltip-ghost"),
-  info: c("tooltip-info"),
-  link: c("tooltip-link"),
-  neutral: c("tooltip-neutral"),
-  primary: c("tooltip-primary"),
-  secondary: c("tooltip-secondary"),
-  success: c("tooltip-success"),
-  warning: c("tooltip-warning"),
-} satisfies Record<TooltipVariant, string>;
-
-export const getTooltipClasses = ({
-  variant,
-  position,
-}: {
-  variant?: TooltipVariant;
-  position?: TooltipPosition;
-}) => {
-  return c("tooltip", TOOLTIP_VARIANTS[variant!], TOOLTIP_POSITION[position!]);
-};
+export const getTooltipArrowClasses = cva("fill-base-200", {
+  variants: {
+    variant: {
+      primary: "fill-primary",
+      secondary: "fill-secondary",
+      accent: "fill-accent",
+      neutral: "fill-neutral",
+      info: "fill-info",
+      success: "fill-success",
+      warning: "fill-warning",
+      error: "fill-error",
+    },
+  },
+});

package/src/components/Tooltip/types.ts

@@ -1,24 +1,15 @@
-import { type ReactNode } from 'react';
+import { type VariantProps } from "../../libs";
+import { getTooltipArrowClasses, getTooltipContentClasses } from "./constants";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipArrowProps = React.HTMLAttributes<
+  React.ElementRef<typeof TooltipPrimitive.Arrow>
+> &
+  TooltipPrimitive.TooltipArrowProps &
+  VariantProps<typeof getTooltipArrowClasses>;
 
-export type TooltipVariant =
-  | 'default'
-  | 'neutral'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'ghost'
-  | 'link'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error';
-
-export type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {
-  content: string;
-  children: ReactNode;
-  variant?: TooltipVariant;
-  position?: TooltipPosition;
-  className?: string;
-};
+export type TooltipContentProps = React.HTMLAttributes<
+  React.ElementRef<typeof TooltipPrimitive.Content>
+> &
+  TooltipPrimitive.TooltipContentProps &
+  VariantProps<typeof getTooltipContentClasses>;

package/src/index.ts

@@ -1,14 +1,19 @@
 /** actions */
 export * from "./components/Button";
+export * from "./components/Breadcrumbs";
 
 /** data display */
+export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Card";
 export * from "./components/Description";
+export * from "./components/Progress";
+export * from "./components/Separator";
 export * from "./components/Text";
 
 /** data input */
 
 /** feedback */
+export * from "./components/Loading";
 export * from "./components/Skeleton";
 export * from "./components/Tooltip";

package/src/libs/cva.ts

@@ -0,0 +1 @@
+export { cva, type VariantProps } from "class-variance-authority";

package/src/libs/index.ts

@@ -0,0 +1 @@
+export { cva, type VariantProps } from "./cva";

package/src/utilities/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utilities/getSubpaths/getSubpaths.ts

@@ -0,0 +1,34 @@
+const PATH_SEPARATOR = "/";
+
+const createPathObject = (
+  segment: string,
+  pathname: string,
+  pathLabels?: Record<string, string>
+) => ({
+  href: { pathname },
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  label: pathLabels?.[pathname] || segment, // always fallback to segment if label does not exist
+});
+
+export const getSubpaths = (
+  pathname: string,
+  pathLabels?: Record<string, string> | undefined,
+  includeRoot?: boolean
+) => {
+  const segments = pathname?.split(PATH_SEPARATOR).filter(Boolean);
+
+  const breadcrumbs = segments.map((segment, index) => {
+    const path = `${PATH_SEPARATOR}${segments
+      .slice(0, index + 1)
+      .join(PATH_SEPARATOR)}`;
+
+    return createPathObject(segment, path, pathLabels);
+  });
+
+  if (includeRoot) {
+    const ROOT_PATH = PATH_SEPARATOR;
+    breadcrumbs.unshift(createPathObject("", ROOT_PATH, pathLabels));
+  }
+
+  return breadcrumbs;
+};

package/src/utilities/getSubpaths/index.ts

@@ -0,0 +1 @@
+export { getSubpaths } from "./getSubpaths";

package/src/utilities/index.ts

@@ -0,0 +1,2 @@
+export { cn } from "./cn";
+export { getSubpaths } from "./getSubpaths";

package/vitest-setup.ts

@@ -1,7 +1,17 @@
-import { afterEach } from "vitest";
+import { afterEach, vi } from "vitest";
 import { cleanup } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
 
+// Mock the ResizeObserver
+const ResizeObserverMock = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+// Stub the global ResizeObserver
+vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+
 // runs a cleanup after each test case (e.g. clearing jsdom)
 afterEach(() => {
   cleanup();