@mbao01/common 0.0.4 → 0.0.6

package/src/components/Tooltip/Tooltip.tsx

@@ -1,11 +1,36 @@
-import c from 'clsx';
-import { getTooltipClasses } from './constants';
-import { type TooltipProps } from './types';
-
-export const Tooltip = ({ tip, children, variant, position, className }: TooltipProps) => {
-  return (
-    <div className={c(getTooltipClasses({ variant, position }), className)} data-tip={tip}>
-      {children}
-    </div>
-  );
-};
+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";
+
+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/index.ts

@@ -1 +1 @@
-export { Tooltip } from './Tooltip';
+export { Tooltip } from "./Tooltip";

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 = {
-  tip: 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,6 +1,16 @@
-export * from "./components/Badge";
+/** actions */
 export * from "./components/Button";
+export * from "./components/Breadcrumbs";
+
+/** data display */
+export * from "./components/Badge";
 export * from "./components/Card";
-export * from "./components/Detail";
+export * from "./components/Description";
 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();

package/dist/types/components/Detail/Detail.d.ts

@@ -1,2 +0,0 @@
-import { type DetailProps } from './types';
-export declare const Detail: ({ term, children }: DetailProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Detail/index.d.ts

@@ -1 +0,0 @@
-export { Detail } from './Detail';

package/dist/types/components/Detail/types.d.ts

@@ -1,5 +0,0 @@
-import { type ReactNode } from 'react';
-export type DetailProps = {
-    term: string;
-    children: ReactNode;
-};

package/src/components/Detail/Detail.tsx

@@ -1,10 +0,0 @@
-import { type DetailProps } from './types';
-
-export const Detail = ({ term, children }: DetailProps) => {
-  return (
-    <dl>
-      <dt className="mb-1 py-2 text-sm font-medium">{term}</dt>
-      <dd className="text-base">{children}</dd>
-    </dl>
-  );
-};

package/src/components/Detail/index.ts

@@ -1 +0,0 @@
-export { Detail } from './Detail';

package/src/components/Detail/types.ts

@@ -1,6 +0,0 @@
-import { type ReactNode } from 'react';
-
-export type DetailProps = {
-  term: string;
-  children: ReactNode;
-};