@mbao01/common 0.0.19 → 0.0.21

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,132 @@
+import { forwardRef } from "react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons";
+import {
+  PaginationContentProps,
+  PaginationEllipsisProps,
+  PaginationItemProps,
+  PaginationLinkProps,
+  PaginationNextProps,
+  PaginationPreviousProps,
+  type PaginationProps,
+} from "./types";
+import { cn } from "../../utilities";
+import {
+  getPaginationClasses,
+  getPaginationContentClasses,
+  getPaginationEllipsisClasses,
+  getPaginationNextClasses,
+  getPaginationPreviousClasses,
+} from "./constants";
+
+import { getButtonClasses } from "../Button/constants";
+
+const Pagination = ({ className, ...props }: PaginationProps) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn(getPaginationClasses(), className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = forwardRef<HTMLUListElement, PaginationContentProps>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      className={cn(getPaginationContentClasses(), className)}
+      {...props}
+    />
+  )
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(
+  (props, ref) => <li ref={ref} {...props} />
+);
+PaginationItem.displayName = "PaginationItem";
+
+const PaginationLink = ({
+  className,
+  size,
+  wide,
+  outline,
+  variant = "ghost",
+  isActive,
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      getButtonClasses({
+        size,
+        wide,
+        outline: outline ?? isActive,
+        variant,
+      }),
+      className
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+  className,
+  children,
+  ...props
+}: PaginationPreviousProps) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    className={cn(getPaginationPreviousClasses(), className)}
+    {...props}
+  >
+    <ChevronLeftIcon className="h-4 w-4" />
+    {children && <span>{children}</span>}
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+  className,
+  children,
+  ...props
+}: PaginationNextProps) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    className={cn(getPaginationNextClasses(), className)}
+    {...props}
+  >
+    {children && <span>{children}</span>}
+    <ChevronRightIcon className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: PaginationEllipsisProps) => (
+  <span
+    aria-hidden
+    className={cn(getPaginationEllipsisClasses(), className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+Pagination.Content = PaginationContent;
+Pagination.Link = PaginationLink;
+Pagination.Item = PaginationItem;
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
+Pagination.Ellipsis = PaginationEllipsis;
+
+export { Pagination };

package/src/components/Pagination/constants.ts

@@ -0,0 +1,15 @@
+import { cva } from "../../libs";
+
+export const getPaginationClasses = cva("mx-auto flex w-full justify-center");
+
+export const getPaginationContentClasses = cva(
+  "flex flex-row items-center gap-1"
+);
+
+export const getPaginationEllipsisClasses = cva(
+  "flex h-9 w-9 items-center justify-center"
+);
+
+export const getPaginationNextClasses = cva("gap-1 px-3");
+
+export const getPaginationPreviousClasses = cva("gap-1 px-3");

package/src/components/Pagination/index.ts

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

package/src/components/Pagination/types.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from "../../libs";
+import { getButtonClasses } from "../Button/constants";
+
+export type PaginationProps = React.ComponentProps<"nav">;
+
+export type PaginationContentProps = React.ComponentProps<"ul">;
+
+export type PaginationEllipsisProps = React.ComponentProps<"span">;
+
+export type PaginationItemProps = React.ComponentProps<"li">;
+
+export type PaginationLinkProps = React.ComponentProps<"a"> &
+  VariantProps<typeof getButtonClasses> & {
+    isActive?: boolean;
+  };
+
+export type PaginationPreviousProps = PaginationLinkProps;
+
+export type PaginationNextProps = PaginationLinkProps;

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { forwardRef } from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import type { ScrollAreaProps, ScrollbarProps } from "./types";
+import { cn } from "../../utilities";
+import {
+  getScrollAreaClasses,
+  getScrollAreaScrollbarClasses,
+  getScrollAreaThumbClasses,
+  getScrollAreaViewportClasses,
+} from "./constants";
+
+const ScrollArea = ({
+  className,
+  children,
+  scrollbar,
+  ...props
+}: ScrollAreaProps) => (
+  <ScrollAreaPrimitive.Root
+    className={cn(getScrollAreaClasses(), className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport
+      className={cn(getScrollAreaViewportClasses())}
+    >
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <Scrollbar {...scrollbar} />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+);
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const Scrollbar = forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  ScrollbarProps
+>(({ className, variant, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(getScrollAreaScrollbarClasses({ orientation }), className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb
+      className={cn(getScrollAreaThumbClasses({ variant }))}
+    />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+Scrollbar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, Scrollbar };

package/src/components/ScrollArea/constants.ts

@@ -0,0 +1,36 @@
+import { cva } from "../../libs";
+
+export const getScrollAreaClasses = cva("relative overflow-hidden");
+
+export const getScrollAreaScrollbarClasses = cva(
+  "flex touch-none select-none transition-colors",
+  {
+    variants: {
+      orientation: {
+        horizontal: "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      },
+    },
+  }
+);
+
+export const getScrollAreaThumbClasses = cva("relative flex-1 rounded-full", {
+  variants: {
+    variant: {
+      accent: "bg-accent",
+      base: "bg-base-300",
+      error: "bg-error",
+      ghost: "bg-ghost",
+      info: "bg-info",
+      neutral: "bg-neutral",
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      success: "bg-success",
+      warning: "bg-warning",
+    },
+  },
+});
+
+export const getScrollAreaViewportClasses = cva(
+  "h-full w-full rounded-[inherit]"
+);

package/src/components/ScrollArea/index.ts

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

package/src/components/ScrollArea/types.ts

@@ -0,0 +1,14 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { VariantProps } from "../../libs";
+import { getScrollAreaThumbClasses } from "./constants";
+
+export type ScrollAreaProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.Root
+> & {
+  scrollbar?: ScrollbarProps;
+};
+
+export type ScrollbarProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+> &
+  VariantProps<typeof getScrollAreaThumbClasses>;

package/src/index.ts

@@ -1,6 +1,8 @@
 /** actions */
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
+export * from "./components/Menu";
+export * from "./components/Pagination";
 export * from "./components/Toggle";
 export * from "./components/ToggleGroup";
 
@@ -14,6 +16,7 @@ export * from "./components/Calendar";
 export * from "./components/Collapsible";
 export * from "./components/Description";
 export * from "./components/Progress";
+export * from "./components/ScrollArea";
 export * from "./components/Separator";
 export * from "./components/Sonner";
 export * from "./components/Tabs";

package/vitest-setup.ts

@@ -12,6 +12,9 @@ const ResizeObserverMock = vi.fn(() => ({
 // Stub the global ResizeObserver
 vi.stubGlobal("ResizeObserver", ResizeObserverMock);
 
+// Mock the scrollTo method
+vi.stubGlobal("scrollTo", vi.fn());
+
 // runs a cleanup after each test case (e.g. clearing jsdom)
 afterEach(() => {
   cleanup();