@recursica/mantine-adapter 0.26.0 → 0.27.0

package/src/components/Table/Table.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Table } from "./Table";
-import { ComingSoon } from "@recursica/storybook-template";
 
 const meta: Meta<typeof Table> = {
-  title: "UI-Kit/🚧 Table",
+  title: "UI-Kit/Table",
   component: Table,
   tags: ["autodocs"],
 };
@@ -12,6 +11,37 @@ export default meta;
 
 type Story = StoryObj<typeof Table>;
 
+const elements = [
+  { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
+  { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
+  { position: 8, mass: 15.999, symbol: "O", name: "Oxygen" },
+  { position: 9, mass: 18.998, symbol: "F", name: "Fluorine" },
+  { position: 10, mass: 20.18, symbol: "Ne", name: "Neon" },
+];
+
 export const Default: Story = {
-  render: () => <ComingSoon componentName="Table" />,
+  render: () => {
+    const rows = elements.map((element) => (
+      <Table.Tr key={element.name}>
+        <Table.Td>{element.position}</Table.Td>
+        <Table.Td>{element.name}</Table.Td>
+        <Table.Td>{element.symbol}</Table.Td>
+        <Table.Td>{element.mass}</Table.Td>
+      </Table.Tr>
+    ));
+
+    return (
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Element position</Table.Th>
+            <Table.Th>Element name</Table.Th>
+            <Table.Th>Symbol</Table.Th>
+            <Table.Th>Atomic mass</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>{rows}</Table.Tbody>
+      </Table>
+    );
+  },
 };

package/src/components/Table/Table.tsx

@@ -1,9 +1,60 @@
-import React from "react";
+import { forwardRef } from "react";
+import {
+  Table as MantineTable,
+  type TableProps as MantineTableProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
 import { type RecursicaTableProps } from "@recursica/adapter-common";
+import styles from "./Table.module.css";
 
-export type TableProps = React.HTMLAttributes<HTMLDivElement> &
-  RecursicaTableProps;
+export type TableProps = RecursicaOverStyled<
+  MantineTableProps & RecursicaTableProps
+>;
 
-export const Table: React.FC<TableProps> = (props) => {
-  return <div {...props}>Table</div>;
+const TableBase = forwardRef<HTMLTableElement, TableProps>(function Table(
+  { overStyled = false, className, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
+
+  const rootClass = styles.root;
+  const finalClass = classNameProp
+    ? `${rootClass} ${classNameProp}`
+    : rootClass;
+
+  return (
+    <MantineTable
+      ref={ref}
+      className={finalClass}
+      {...(sanitizedProps as unknown as MantineTableProps)}
+    />
+  );
+});
+
+TableBase.displayName = "Table";
+
+type TableComponent = typeof TableBase & {
+  Thead: typeof MantineTable.Thead;
+  Tbody: typeof MantineTable.Tbody;
+  Tr: typeof MantineTable.Tr;
+  Th: typeof MantineTable.Th;
+  Td: typeof MantineTable.Td;
+  Tfoot: typeof MantineTable.Tfoot;
+  Caption: typeof MantineTable.Caption;
+  ScrollContainer: typeof MantineTable.ScrollContainer;
 };
+
+export const Table = TableBase as TableComponent;
+Table.Thead = MantineTable.Thead;
+Table.Tbody = MantineTable.Tbody;
+Table.Tr = MantineTable.Tr;
+Table.Th = MantineTable.Th;
+Table.Td = MantineTable.Td;
+Table.Tfoot = MantineTable.Tfoot;
+Table.Caption = MantineTable.Caption;
+Table.ScrollContainer = MantineTable.ScrollContainer;

package/src/components/Tabs/Tabs.tsx

@@ -14,7 +14,11 @@ import styles from "./Tabs.module.css";
 
 import { type RecursicaTabsProps } from "@recursica/adapter-common";
 
-export type TabsProps = RecursicaOverStyled<RecursicaTabsProps>;
+export interface RecursicaTabsPropsExtended
+  extends Omit<MantineTabsProps, "variant">,
+    RecursicaTabsProps {}
+
+export type TabsProps = RecursicaOverStyled<RecursicaTabsPropsExtended>;
 
 const _Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(props, ref) {
   const {

package/src/components/Text/Text.tsx

@@ -11,7 +11,9 @@ import {
 
 import { type RecursicaTextProps } from "@recursica/adapter-common";
 
-export type TextProps = RecursicaOverStyled<RecursicaTextProps>;
+export type TextProps = RecursicaOverStyled<
+  Omit<MantineTextProps, "variant"> & RecursicaTextProps
+>;
 
 const _Text = forwardRef<HTMLDivElement, TextProps>(function Text(
   { overStyled = false, variant = "body", ...rest },

package/src/components/TextArea/TextArea.tsx

@@ -19,16 +19,9 @@ export interface RecursicaTextAreaProps
       MantineTextareaProps,
       "size" | "variant" | "radius" | "wrapperProps"
     >,
-    Pick<
+    Omit<
       RecursicaFormControlWrapperProps,
-      | "assistiveText"
-      | "assistiveWithIcon"
-      | "formLayout"
-      | "labelSize"
-      | "labelAlignment"
-      | "labelOptionalText"
-      | "labelWithEditIcon"
-      | "onLabelEditClick"
+      "controlMaxWidth" | "controlMinWidth"
     >,
     ReadOnlyControlProps,
     BaseRecursicaTextAreaProps {}

package/src/components/Title/Title.tsx

@@ -10,7 +10,9 @@ import {
 
 import { type RecursicaTitleProps } from "@recursica/adapter-common";
 
-export type TitleProps = RecursicaOverStyled<RecursicaTitleProps>;
+export type TitleProps = RecursicaOverStyled<
+  Omit<MantineTitleProps, "size"> & RecursicaTitleProps
+>;
 
 /**
  * Enforces highly accessible structural markup utilizing semantic `<h1>` through `<h6>` tags securely bound directly to Recursica typographic scales.

package/src/index.ts

@@ -1,3 +1,17 @@
 import "@recursica/adapter-common/style.css";
 export * from "./components";
 export * from "@recursica/adapter-common";
+
+export type {
+  RecursicaCheckboxGroupProps,
+  RecursicaDatePickerProps,
+  RecursicaDropdownProps,
+  RecursicaNumberInputProps,
+  RecursicaRadioGroupProps,
+  RecursicaReadOnlyFieldProps,
+  RecursicaReadOnlyTextFieldProps,
+  RecursicaSliderProps,
+  RecursicaSwitchGroupProps,
+  RecursicaTextAreaProps,
+  RecursicaTextFieldProps,
+} from "./components";

package/src/utils/filterStylingProps.ts

@@ -66,6 +66,7 @@ export {
   type RecursicaOverStyled,
   type BlockedStylingKeys,
   type ForbiddenStyles,
+  type WithRecursicaSpacing,
 } from "@recursica/adapter-common";
 
 const LAYOUT_PROPS = new Set([