@recursica/mui-adapter 0.1.0

package/src/components/Stack/Stack.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stack } from "./Stack";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Stack> = {
+  title: "UI-Kit/🚧 Stack",
+  component: Stack,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Stack>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Stack" />,
+};

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type StackProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Stack: React.FC<StackProps> = (props) => {
+  return <div {...props}>Stack</div>;
+};

package/src/components/Stack/index.ts

@@ -0,0 +1 @@
+export * from "./Stack";

package/src/components/Stepper/Stepper.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stepper } from "./Stepper";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Stepper> = {
+  title: "UI-Kit/🚧 Stepper",
+  component: Stepper,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Stepper>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Stepper" />,
+};

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type StepperProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Stepper: React.FC<StepperProps> = (props) => {
+  return <div {...props}>Stepper</div>;
+};

package/src/components/Stepper/index.ts

@@ -0,0 +1 @@
+export * from "./Stepper";

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "./Switch";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Switch> = {
+  title: "UI-Kit/🚧 Switch",
+  component: Switch,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Switch" />,
+};

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type SwitchProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Switch: React.FC<SwitchProps> = (props) => {
+  return <div {...props}>Switch</div>;
+};

package/src/components/Switch/index.ts

@@ -0,0 +1 @@
+export * from "./Switch";

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

@@ -0,0 +1,16 @@
+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",
+  component: Table,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Table" />,
+};

package/src/components/Table/Table.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TableProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Table: React.FC<TableProps> = (props) => {
+  return <div {...props}>Table</div>;
+};

package/src/components/Table/index.ts

@@ -0,0 +1 @@
+export * from "./Table";

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tabs } from "./Tabs";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Tabs> = {
+  title: "UI-Kit/🚧 Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Tabs" />,
+};

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TabsProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Tabs: React.FC<TabsProps> = (props) => {
+  return <div {...props}>Tabs</div>;
+};

package/src/components/Tabs/index.ts

@@ -0,0 +1 @@
+export * from "./Tabs";

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Text } from "./Text";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Text> = {
+  title: "UI-Kit/🚧 Text",
+  component: Text,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Text" />,
+};

package/src/components/Text/Text.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TextProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Text: React.FC<TextProps> = (props) => {
+  return <div {...props}>Text</div>;
+};

package/src/components/Text/index.ts

@@ -0,0 +1 @@
+export * from "./Text";

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextArea } from "./TextArea";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof TextArea> = {
+  title: "UI-Kit/🚧 TextArea",
+  component: TextArea,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="TextArea" />,
+};

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TextAreaProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const TextArea: React.FC<TextAreaProps> = (props) => {
+  return <div {...props}>TextArea</div>;
+};

package/src/components/TextArea/index.ts

@@ -0,0 +1 @@
+export * from "./TextArea";

package/src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextField } from "./TextField";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof TextField> = {
+  title: "UI-Kit/🚧 TextField",
+  component: TextField,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof TextField>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="TextField" />,
+};

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TextFieldProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const TextField: React.FC<TextFieldProps> = (props) => {
+  return <div {...props}>TextField</div>;
+};

package/src/components/TextField/index.ts

@@ -0,0 +1 @@
+export * from "./TextField";

package/src/components/TimePicker/TimePicker.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimePicker } from "./TimePicker";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof TimePicker> = {
+  title: "UI-Kit/🚧 TimePicker",
+  component: TimePicker,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof TimePicker>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="TimePicker" />,
+};

package/src/components/TimePicker/TimePicker.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TimePickerProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const TimePicker: React.FC<TimePickerProps> = (props) => {
+  return <div {...props}>TimePicker</div>;
+};

package/src/components/TimePicker/index.ts

@@ -0,0 +1 @@
+export * from "./TimePicker";

package/src/components/Timeline/Timeline.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Timeline } from "./Timeline";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Timeline> = {
+  title: "UI-Kit/🚧 Timeline",
+  component: Timeline,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Timeline>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Timeline" />,
+};

package/src/components/Timeline/Timeline.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TimelineProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Timeline: React.FC<TimelineProps> = (props) => {
+  return <div {...props}>Timeline</div>;
+};

package/src/components/Timeline/index.ts

@@ -0,0 +1 @@
+export * from "./Timeline";

package/src/components/Title/Title.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Title } from "./Title";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Title> = {
+  title: "UI-Kit/🚧 Title",
+  component: Title,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Title>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Title" />,
+};

package/src/components/Title/Title.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TitleProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Title: React.FC<TitleProps> = (props) => {
+  return <div {...props}>Title</div>;
+};

package/src/components/Title/index.ts

@@ -0,0 +1 @@
+export * from "./Title";

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toast } from "./Toast";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Toast> = {
+  title: "UI-Kit/🚧 Toast",
+  component: Toast,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Toast>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Toast" />,
+};

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type ToastProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Toast: React.FC<ToastProps> = (props) => {
+  return <div {...props}>Toast</div>;
+};

package/src/components/Toast/index.ts

@@ -0,0 +1 @@
+export * from "./Toast";

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip } from "./Tooltip";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "UI-Kit/🚧 Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Tooltip" />,
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TooltipProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Tooltip: React.FC<TooltipProps> = (props) => {
+  return <div {...props}>Tooltip</div>;
+};

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./Tooltip";

package/src/components/TransferList/TransferList.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TransferList } from "./TransferList";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof TransferList> = {
+  title: "UI-Kit/🚧 TransferList",
+  component: TransferList,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof TransferList>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="TransferList" />,
+};

package/src/components/TransferList/TransferList.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TransferListProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const TransferList: React.FC<TransferListProps> = (props) => {
+  return <div {...props}>TransferList</div>;
+};

package/src/components/TransferList/index.ts

@@ -0,0 +1 @@
+export * from "./TransferList";

package/src/components/index.ts

@@ -0,0 +1,46 @@
+export * from "./Accordion";
+export * from "./AssistiveElement";
+export * from "./Avatar";
+export * from "./Badge";
+export * from "./Box";
+export * from "./Breadcrumb";
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./Chip";
+export * from "./Container";
+export * from "./DatePicker";
+export * from "./Dropdown";
+export * from "./FileInput";
+export * from "./FileUpload";
+export * from "./Flex";
+export * from "./FormControlLayout";
+export * from "./FormControlWrapper";
+export * from "./Group";
+export * from "./HoverCard";
+export * from "./Label";
+export * from "./Link";
+export * from "./Loader";
+export * from "./Menu";
+export * from "./Modal";
+export * from "./NumberInput";
+export * from "./Pagination";
+export * from "./Panel";
+export * from "./Radio";
+export * from "./ReadOnlyField";
+export * from "./SegmentedControl";
+export * from "./Slider";
+export * from "./Stack";
+export * from "./Stepper";
+export * from "./Switch";
+export * from "./Table";
+export * from "./Tabs";
+export * from "./Text";
+export * from "./TextArea";
+export * from "./TextField";
+export * from "./TimePicker";
+export * from "./Timeline";
+export * from "./Title";
+export * from "./Toast";
+export * from "./Tooltip";
+export * from "./TransferList";

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import "@recursica/adapter-common/style.css";
+export * from "./components";
+export * from "@recursica/adapter-common";

package/src/types/index.ts

@@ -0,0 +1,9 @@
+export interface ComboboxItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  // icon?: IconName;
+  onClick?: () => void;
+}
+
+// Export other shared types here

package/src/types/mantine.d.ts

@@ -0,0 +1,7 @@
+import type { ComboboxItem as RecursicaComboboxItem } from "./index";
+import "@mantine/core";
+
+declare module "@mantine/core" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface ComboboxItem extends RecursicaComboboxItem {}
+}

package/src/types/scss-modules.d.ts

@@ -0,0 +1,9 @@
+declare module "*.scss" {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module "*.module.scss" {
+  const content: { [className: string]: string };
+  export default content;
+}

package/src/utils/ColorSchemeWrapper.tsx

@@ -0,0 +1,27 @@
+import { useMantineColorScheme } from "@mantine/core";
+import { useEffect } from "react";
+import { addons } from "storybook/internal/preview-api";
+import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
+
+const channel = addons.getChannel();
+
+export function ColorSchemeWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { setColorScheme } = useMantineColorScheme();
+
+  useEffect(() => {
+    const handleColorScheme = (value: boolean) => {
+      const theme = value ? "dark" : "light";
+      setColorScheme(theme);
+      document.documentElement.setAttribute("data-recursica-theme", theme);
+    };
+
+    channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
+    return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
+  }, [setColorScheme]);
+
+  return <>{children}</>;
+}

package/src/utils/RequireAccessibleLabel.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+/**
+ * Enforces accessibility by strictly requiring at least one form of labeling:
+ * either a visual \`label\`, an \`aria-label\`, or an \`aria-labelledby\`.
+ */
+export type RequireAccessibleLabel<T> = T &
+  (
+    | { label: ReactNode; "aria-label"?: string; "aria-labelledby"?: string }
+    | { label?: ReactNode; "aria-label": string; "aria-labelledby"?: string }
+    | { label?: ReactNode; "aria-label"?: string; "aria-labelledby": string }
+  );

package/src/utils/copyToClipboard.ts

@@ -0,0 +1,36 @@
+import React from "react";
+
+/**
+ * Helper function for copy text to clipboard
+ * @param {string} textToCopy The text string for copying to the clipboard
+ * @param {element|node} componentRef The ref of the component that we want to trigger the copy
+ */
+const copyToClipboard = (
+  textToCopy: string,
+  componentRef: React.RefObject<HTMLElement | null>,
+): Promise<void> => {
+  const currentFocus = document.activeElement as HTMLInputElement;
+  return new Promise((resolve, reject) => {
+    if (componentRef && componentRef.current) {
+      const textArea = document.createElement("textarea");
+      textArea.readOnly = true;
+      textArea.defaultValue = textToCopy;
+      componentRef.current.appendChild(textArea);
+      textArea.select();
+      const wasCopied = document.execCommand("copy");
+      componentRef.current.removeChild(textArea);
+      if (currentFocus) {
+        currentFocus.focus();
+      }
+      if (wasCopied) {
+        resolve();
+      } else {
+        reject(new Error("Failed to copy"));
+      }
+    } else {
+      reject(new Error("Copy area reference is not defined"));
+    }
+  });
+};
+
+export { copyToClipboard };