@recursica/mantine-adapter 0.15.0 → 0.16.0

package/src/components/Pagination/Pagination.module.css

@@ -0,0 +1,225 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--recursica_ui-kit_components_pagination_properties_item-gap);
+}
+
+.control {
+  box-sizing: border-box;
+  margin: 0;
+  border-style: solid;
+  position: relative;
+  transition: all 0.2s ease;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Typography */
+  font-family: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-family,
+    var(--recursica_brand_fonts_primary)
+  );
+  font-size: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-size,
+    var(--recursica_brand_dimensions_text-size_default)
+  );
+  font-style: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-style,
+    normal
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-weight,
+    500
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_letter-spacing,
+    0
+  );
+  line-height: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_line-height,
+    1.5
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_text-decoration,
+    none
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_text-transform,
+    none
+  );
+
+  /* Dimensions */
+  border-radius: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_border-radius
+  );
+  height: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_height
+  );
+  min-width: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_horizontal-padding
+    );
+
+  /* Base Inactive Style: Outline */
+  border-width: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_border-size
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_elevation
+  );
+  background-color: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_text
+  );
+}
+
+.control:disabled {
+  opacity: var(--recursica_brand_states_disabled);
+  cursor: not-allowed;
+}
+
+.control:hover:not(:disabled) {
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_text-hover
+  );
+}
+
+/* Hover Overlay */
+.control::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  z-index: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+  opacity: 0;
+  background-color: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_hover-color
+  );
+}
+
+.control:hover:not(:disabled)::after {
+  opacity: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_hover-opacity,
+    0.1
+  );
+}
+
+/* Active Style: Solid */
+.control[data-active] {
+  border-width: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_border-size
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_elevation
+  );
+  background-color: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_text
+  );
+}
+
+.control[data-active]:hover:not(:disabled) {
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_text-hover
+  );
+}
+
+/* Navigation Style: Text */
+.control[data-variant="text"] {
+  border-width: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_border-size
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_elevation
+  );
+  background-color: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_text
+  );
+
+  /* Also explicitly inherit navigation sizes incase they differ from pages */
+  border-radius: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_border-radius
+  );
+  height: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_height
+  );
+  min-width: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_horizontal-padding
+    );
+}
+
+.control[data-variant="text"]:hover:not(:disabled) {
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_text-hover
+  );
+}
+
+/* Hover Overlay for Navigation */
+.control[data-variant="text"]::after {
+  background-color: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_hover-color
+  );
+}
+.control[data-variant="text"]:hover:not(:disabled)::after {
+  opacity: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_hover-opacity,
+    0.1
+  );
+}
+
+/* Dots */
+.dots {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_height
+  );
+  min-width: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_min-width
+  );
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_colors_dots-color
+  );
+}
+
+/* Icon Styles */
+.iconWithLabel {
+  display: flex;
+  align-items: center;
+  gap: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_icon-text-gap,
+    4px
+  );
+}
+
+.baseIcon {
+  width: calc(var(--pagination-control-size) / 1.8);
+  height: calc(var(--pagination-control-size) / 1.8);
+}

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,17 +1,57 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Pagination } from "./Pagination";
-import { ComingSoon } from "@recursica/storybook-template";
 
 const meta: Meta<typeof Pagination> = {
-  title: "UI-Kit/🚧 Pagination",
+  title: "UI-Kit/Pagination",
   component: Pagination,
   tags: ["autodocs"],
+  argTypes: {
+    total: { control: "number" },
+    withEdges: { control: "boolean" },
+    withControls: { control: "boolean" },
+    disabled: { control: "boolean" },
+    withLabels: {
+      control: "boolean",
+      description: "Toggle text labels alongside icons",
+    },
+    defaultChecked: { table: { disable: true } },
+  },
+  args: {
+    total: 10,
+    withEdges: false,
+    withControls: true,
+    withLabels: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <Pagination {...args} />;
+  },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof Pagination>;
 
-export const Default: Story = {
-  render: () => <ComingSoon componentName="Pagination" />,
+export const Default: Story = {};
+
+export const WithEdges: Story = {
+  args: {
+    withEdges: true,
+  },
+};
+
+export const Compositional: Story = {
+  render: () => (
+    <Pagination.Root total={10}>
+      <Pagination.Items />
+    </Pagination.Root>
+  ),
+};
+
+export const WithTextLabels: Story = {
+  args: {
+    withEdges: true,
+    withLabels: true,
+  },
 };

package/src/components/Pagination/Pagination.tsx

@@ -1,7 +1,217 @@
-import React from "react";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { forwardRef } from "react";
+import {
+  Pagination as MantinePagination,
+  type PaginationProps as MantinePaginationProps,
+  type PaginationRootProps as MantinePaginationRootProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Pagination.module.css";
+import {
+  NextWithLabel,
+  PrevWithLabel,
+  FirstWithLabel,
+  LastWithLabel,
+  PaginationIcon,
+} from "./Pagination.icons";
 
-export type PaginationProps = React.HTMLAttributes<HTMLDivElement>;
+export type PaginationProps = RecursicaOverStyled<MantinePaginationProps> & {
+  /** If set to true, displays text labels alongside the icons for next/previous/first/last edges. */
+  withLabels?: boolean;
+};
+
+export type PaginationRootProps =
+  RecursicaOverStyled<MantinePaginationRootProps>;
+
+export type PaginationEdgeProps<T extends React.ElementType> =
+  React.ComponentProps<T> & {
+    /** If set to true, displays text labels alongside the icon. */
+    withLabel?: boolean;
+    icon?: any;
+  };
+
+function usePaginationClassNames(restRecord: Record<string, unknown>): {
+  className: string;
+  classNames: Partial<Record<string, string>>;
+} {
+  const mergedClassNames: Partial<Record<string, string>> = {
+    root: styles.root,
+    control: styles.control,
+    dots: styles.dots,
+  };
+
+  const classNamesProp = restRecord.classNames;
+  if (
+    classNamesProp &&
+    typeof classNamesProp === "object" &&
+    !Array.isArray(classNamesProp)
+  ) {
+    const o = classNamesProp as Partial<Record<string, string>>;
+    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
+    mergedClassNames.control = o.control
+      ? `${styles.control} ${o.control}`
+      : styles.control;
+    mergedClassNames.dots = o.dots ? `${styles.dots} ${o.dots}` : styles.dots;
+  }
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return { className: finalClass, classNames: mergedClassNames };
+}
+
+const _PaginationRoot = forwardRef<HTMLDivElement, PaginationRootProps>(
+  function PaginationRoot({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const stylingParams = usePaginationClassNames(
+      sanitizedProps as Record<string, unknown>,
+    );
+
+    return (
+      <MantinePagination.Root
+        ref={ref}
+        className={stylingParams.className}
+        classNames={stylingParams.classNames}
+        {...(sanitizedProps as MantinePaginationRootProps)}
+      />
+    );
+  },
+);
+_PaginationRoot.displayName = "Pagination.Root";
 
-export const Pagination: React.FC<PaginationProps> = (props) => {
-  return <div {...props}>Pagination</div>;
+const _PaginationNext = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.Next>
+>(function PaginationNext({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? NextWithLabel : undefined);
+  return (
+    <MantinePagination.Next
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationNext.displayName = "Pagination.Next";
+
+const _PaginationPrevious = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.Previous>
+>(function PaginationPrevious({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? PrevWithLabel : undefined);
+  return (
+    <MantinePagination.Previous
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationPrevious.displayName = "Pagination.Previous";
+
+const _PaginationFirst = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.First>
+>(function PaginationFirst({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? FirstWithLabel : undefined);
+  return (
+    <MantinePagination.First
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationFirst.displayName = "Pagination.First";
+
+const _PaginationLast = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.Last>
+>(function PaginationLast({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? LastWithLabel : undefined);
+  return (
+    <MantinePagination.Last
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationLast.displayName = "Pagination.Last";
+
+const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
+  function Pagination(
+    { overStyled = false, getControlProps, withLabels, ...rest },
+    ref,
+  ) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const stylingParams = usePaginationClassNames(
+      sanitizedProps as Record<string, unknown>,
+    );
+
+    const mergedGetControlProps = (
+      control: "first" | "previous" | "last" | "next",
+    ) => {
+      const baseProps = { "data-variant": "text" };
+      if (getControlProps) {
+        return { ...baseProps, ...getControlProps(control) };
+      }
+      return baseProps;
+    };
+
+    const labelsIcons = withLabels
+      ? {
+          nextIcon: NextWithLabel,
+          previousIcon: PrevWithLabel,
+          firstIcon: FirstWithLabel,
+          lastIcon: LastWithLabel,
+        }
+      : {};
+
+    return (
+      <MantinePagination
+        ref={ref}
+        className={stylingParams.className}
+        classNames={stylingParams.classNames}
+        getControlProps={mergedGetControlProps}
+        {...labelsIcons}
+        {...(sanitizedProps as MantinePaginationProps)}
+      />
+    );
+  },
+);
+_Pagination.displayName = "Pagination";
+
+/**
+ * Recursica Pagination component wrapping Mantine's Pagination.
+ */
+export const Pagination = _Pagination as typeof _Pagination & {
+  Root: typeof _PaginationRoot;
+  Items: typeof MantinePagination.Items;
+  Control: typeof MantinePagination.Control;
+  Dots: typeof MantinePagination.Dots;
+  Next: typeof _PaginationNext;
+  Previous: typeof _PaginationPrevious;
+  First: typeof _PaginationFirst;
+  Last: typeof _PaginationLast;
+  Icon: typeof PaginationIcon;
 };
+
+Pagination.Root = _PaginationRoot;
+Pagination.Items = MantinePagination.Items;
+Pagination.Control = MantinePagination.Control;
+Pagination.Dots = MantinePagination.Dots;
+Pagination.Next = _PaginationNext;
+Pagination.Previous = _PaginationPrevious;
+Pagination.First = _PaginationFirst;
+Pagination.Last = _PaginationLast;
+Pagination.Icon = PaginationIcon;

package/src/components/Pagination/index.ts

@@ -0,0 +1,5 @@
+export {
+  Pagination,
+  type PaginationProps,
+  type PaginationRootProps,
+} from "./Pagination";