@recursica/mui-adapter 0.5.0 → 0.6.0

package/src/components/Pagination/Pagination.tsx

@@ -1,8 +1,196 @@
-import React from "react";
-import "./Pagination.module.css";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { forwardRef } from "react";
+import {
+  Pagination as MuiPagination,
+  type PaginationProps as MuiPaginationProps,
+  type PaginationRootProps as MuiPaginationRootProps,
+} from "@mui/material";
+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<MuiPaginationProps> & {
+  /** If set to true, displays text labels alongside the icons for next/previous/first/last edges. */
+  withLabels?: boolean;
+};
+
+export type PaginationRootProps = RecursicaOverStyled<MuiPaginationRootProps>;
+
+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 (
+      <div
+        ref={ref}
+        className={stylingParams.className}
+        classes={stylingParams.classNames}
+        {...(sanitizedProps as MuiPaginationRootProps)}
+      />
+    );
+  },
+);
+_PaginationRoot.displayName = "Pagination.Root";
 
-export const Pagination: React.FC<PaginationProps> = (props) => {
-  return <div {...props}>Pagination</div>;
+const _PaginationNext = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MuiPagination.Next>
+>(function PaginationNext({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? NextWithLabel : undefined);
+  return (
+    <div ref={ref} data-variant="text" icon={renderIcon as any} {...props} />
+  );
+});
+_PaginationNext.displayName = "Pagination.Next";
+
+const _PaginationPrevious = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MuiPagination.Previous>
+>(function PaginationPrevious({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? PrevWithLabel : undefined);
+  return (
+    <div ref={ref} data-variant="text" icon={renderIcon as any} {...props} />
+  );
+});
+_PaginationPrevious.displayName = "Pagination.Previous";
+
+const _PaginationFirst = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MuiPagination.First>
+>(function PaginationFirst({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? FirstWithLabel : undefined);
+  return (
+    <div ref={ref} data-variant="text" icon={renderIcon as any} {...props} />
+  );
+});
+_PaginationFirst.displayName = "Pagination.First";
+
+const _PaginationLast = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MuiPagination.Last>
+>(function PaginationLast({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? LastWithLabel : undefined);
+  return (
+    <div 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 (
+      <MuiPagination
+        ref={ref}
+        className={stylingParams.className}
+        classes={stylingParams.classNames}
+        getControlProps={mergedGetControlProps}
+        {...labelsIcons}
+        {...(sanitizedProps as MuiPaginationProps)}
+      />
+    );
+  },
+);
+_Pagination.displayName = "Pagination";
+
+/**
+ * Recursica Pagination component wrapping Mui's Pagination.
+ */
+export const Pagination = _Pagination as typeof _Pagination & {
+  Root: typeof _PaginationRoot;
+  Items: typeof MuiPagination.Items;
+  Control: typeof MuiPagination.Control;
+  Dots: typeof MuiPagination.Dots;
+  Next: typeof _PaginationNext;
+  Previous: typeof _PaginationPrevious;
+  First: typeof _PaginationFirst;
+  Last: typeof _PaginationLast;
+  Icon: typeof PaginationIcon;
 };
+
+Pagination.Root = _PaginationRoot;
+Pagination.Items = MuiPagination.Items;
+Pagination.Control = MuiPagination.Control;
+Pagination.Dots = MuiPagination.Dots;
+Pagination.Next = _PaginationNext;
+Pagination.Previous = _PaginationPrevious;
+Pagination.First = _PaginationFirst;
+Pagination.Last = _PaginationLast;
+Pagination.Icon = PaginationIcon;

package/src/components/Panel/Panel.module.css

@@ -1,38 +1,206 @@
-/* EXEMPTIONS:
-   This component is a placeholder stub. Once fully implemented, its specific
-   tokens will be fully wired up to direct styles. */
-
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_border-radius */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_content */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_divider-color */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_header-footer-background */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_title */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-horizontal-padding */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_fontFamily */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_fontSize */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_fontStyle */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_fontWeight */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_letterSpacing */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_lineHeight */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_textCase */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_textDecoration */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-vertical-padding */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_divider-size */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_elevation */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_footer-button-gap */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-close-gap */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-footer-horizontal-padding */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-footer-vertical-padding */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_fontFamily */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_fontSize */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_fontStyle */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_fontWeight */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_letterSpacing */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_lineHeight */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_textCase */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_textDecoration */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_max-width */
-/* recursica-ignore: --recursica_ui-kit_components_panel_properties_min-width */
+/* HARDCODED VALUES:
+   - border-style: solid: Structural rendering rule for the panel border.
+   - .inner { left: 0 }: Prevents the fixed Drawer portal from being pushed off-screen in centered flex environments (like Storybook Canvas).
+   - flexbox layout on .content & .body: Required to create a vertical flex context that pushes the footer to the bottom.
+   - position: sticky & negative margins on .footer: A CSS technique used to break the footer out of the .body padding constraints so it stretches edge-to-edge, while remaining fixed at the bottom of the scroll container.
+   - z-index: 10 on .footer: Ensures the footer covers the body content as it scrolls underneath.
+ */
+
+/* ======================================
+   PANEL CONTENT (outer drawer container)
+   ====================================== */
+
+.content {
+  background-color: var(
+    --recursica_ui-kit_components_panel_properties_colors_background
+  );
+  border-style: solid;
+  border-width: var(--recursica_ui-kit_components_panel_properties_border-size);
+  border-color: var(
+    --recursica_ui-kit_components_panel_properties_colors_border-color
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_panel_properties_border-radius
+  );
+  box-shadow: var(--recursica_ui-kit_components_panel_properties_elevation);
+  min-width: var(--recursica_ui-kit_components_panel_properties_min-width);
+  max-width: var(--recursica_ui-kit_components_panel_properties_max-width);
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.inner {
+  /* Forces the Drawer Inner container to the left edge, preventing it from inheriting
+     a centered static position in flex environments like Storybook's Canvas wrapper */
+  left: 0;
+}
+
+/* ======================================
+   PANEL HEADER
+   ====================================== */
+
+.header {
+  background-color: var(
+    --recursica_ui-kit_components_panel_properties_colors_header-footer-background
+  );
+  padding: var(
+      --recursica_ui-kit_components_panel_properties_header-footer-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_panel_properties_header-footer-horizontal-padding
+    );
+  border-bottom: var(
+      --recursica_ui-kit_components_panel_properties_divider-size
+    )
+    solid
+    var(--recursica_ui-kit_components_panel_properties_colors_divider-color);
+  gap: var(--recursica_ui-kit_components_panel_properties_header-close-gap);
+}
+
+/* ======================================
+   PANEL TITLE
+   ====================================== */
+
+.title {
+  color: var(--recursica_ui-kit_components_panel_properties_colors_title);
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_panel_properties_header-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_panel_properties_header-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_panel_properties_header-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_panel_properties_header-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_panel_properties_header-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_panel_properties_header-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_panel_properties_header-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_panel_properties_header-style_textDecoration
+  );
+}
+
+.titleTruncate {
+  composes: title;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  flex: 1;
+  min-width: 0;
+}
+
+/* ======================================
+   PANEL BODY
+   ====================================== */
+
+.body {
+  padding: var(
+      --recursica_ui-kit_components_panel_properties_content-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_panel_properties_content-horizontal-padding
+    );
+  color: var(--recursica_ui-kit_components_panel_properties_colors_content);
+
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_panel_properties_content-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_panel_properties_content-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_panel_properties_content-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_panel_properties_content-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_panel_properties_content-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_panel_properties_content-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_panel_properties_content-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_panel_properties_content-style_textDecoration
+  );
+}
+
+/* ======================================
+   PANEL FOOTER
+   ====================================== */
+
+.footer {
+  background-color: var(
+    --recursica_ui-kit_components_panel_properties_colors_header-footer-background
+  );
+  padding: var(
+      --recursica_ui-kit_components_panel_properties_header-footer-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_panel_properties_header-footer-horizontal-padding
+    );
+  border-top: var(--recursica_ui-kit_components_panel_properties_divider-size)
+    solid
+    var(--recursica_ui-kit_components_panel_properties_colors_divider-color);
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--recursica_ui-kit_components_panel_properties_footer-button-gap);
+
+  /* Ensure footer sticks to the bottom of the scroll container */
+  margin-top: auto;
+  position: sticky;
+
+  /* Break out of .body padding constraints to stretch edge-to-edge */
+  bottom: calc(
+    var(
+        --recursica_ui-kit_components_panel_properties_content-vertical-padding
+      ) *
+      -1
+  );
+  margin-left: calc(
+    var(
+        --recursica_ui-kit_components_panel_properties_content-horizontal-padding
+      ) *
+      -1
+  );
+  margin-right: calc(
+    var(
+        --recursica_ui-kit_components_panel_properties_content-horizontal-padding
+      ) *
+      -1
+  );
+  margin-bottom: calc(
+    var(
+        --recursica_ui-kit_components_panel_properties_content-vertical-padding
+      ) *
+      -1
+  );
+
+  /* Render over scrolling content */
+  z-index: 10;
+}