@recursica/mantine-adapter 0.6.0 → 0.8.0

package/src/components/Group/Group.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from "react";
+import {
+  Group as MantineGroup,
+  type GroupProps as MantineGroupProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+  type RecursicaSpacing,
+} from "../../utils/filterStylingProps";
+import styles from "./Group.module.css";
+
+export interface RecursicaGroupProps {
+  /**
+   * Children components inside the group
+   */
+  children?: React.ReactNode;
+  gap?: MantineGroupProps["gap"] | RecursicaSpacing;
+  rowGap?: MantineGroupProps["gap"] | RecursicaSpacing;
+  columnGap?: MantineGroupProps["gap"] | RecursicaSpacing;
+}
+
+/**
+ * Group flex layout wrapper
+ */
+export type GroupProps = RecursicaOverStyled<
+  MantineGroupProps & RecursicaGroupProps
+>;
+
+export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(
+  { children, overStyled = false, gap = "rec-default", ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps({ ...rest, gap }, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
+
+  const mergedClassNames: Partial<Record<string, string>> = {
+    root: styles.root,
+  };
+
+  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;
+  }
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return (
+    <MantineGroup
+      ref={ref}
+      className={finalClass}
+      classNames={mergedClassNames}
+      {...sanitizedProps}
+    >
+      {children}
+    </MantineGroup>
+  );
+});
+
+Group.displayName = "Group";

package/src/components/HoverCard/HoverCard.stories.tsx

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

package/src/components/HoverCard/HoverCard.tsx

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

package/src/components/Label/LABEL_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,48 @@
+# Label Implementation Notes
+
+## Architecture Overview
+
+The `Label` component is fundamentally built as a strict, localized wrapper around Mantine's native `Input.Label`. The core goal is to preserve context, ref-forwarding, and native accessibility links, while completely overriding visual behaviors via Recursica design variables in scoped CSS.
+
+## Key Design Decisions
+
+### **Layout Architecture**
+
+- Because Recursica dictates complex alignments between primary label text, asterisks, edit icons, and optional strings, Mantine's rigid form label flow could not be used out-of-the-box.
+- Implemented `display: flex; flex-wrap: wrap;` directly on `.root`.
+- Injected strict integer-based flex `order` properties (e.g. `order: 1` for text, `order: 2` for `required`, `order: 5` for `optionalText`) to physically decouple DOM rendering from markup flow.
+- Because `optionalText` often acts as secondary contextual detail, it forces `flex-basis: 100%`, securely wrapping to a secondary line underneath the primary label properties and transforming the horizontal gap spacing seamlessly into a `margin-top` vector.
+
+### **Optional Text & Required Mutually Exclusive Parsing**
+
+- By design standards, a component cannot logically be both "Required" and mapped as "Optional".
+- To bulletproof implementations natively, the adapter forcibly suppresses rendering of the `resolvedOptionalText` strings if the parent wrapper invokes `required={true}`.
+- `optionalText` can operate as dynamic data or specifically as a boolean `true`, which forces the adapter to natively render the formal `(Optional)` string map.
+
+### **The "Edit Icon" Replacer Logic**
+
+- Passing `withEditIcon={true}` evaluates it as fundamentally mutually exclusive to the standard required indicator asterisk.
+- `required={required && !withEditIcon}` is passed to the underlying Mantine structure so the native `*` is entirely suppressed.
+- Added localized styling via `data-replaces-asterisk={required ? "true" : undefined}` onto the `.editIconWrapper` element. If an editable instance is simultaneously designated as required, the edit icon functionally assumes the indicator role natively, overriding its default icon metrics explicitly to match `--recursica_ui-kit_components_label_properties_colors_asterisk`.
+
+### **Bypassing `Input.Wrapper` Integrations**
+
+- By decoupling from Mantine's standard `Input.Wrapper`, the `Label` component is exclusively mapped manually through `FormControlWrapper`. This grants us exact visual sync regarding where the label renders based on `formLayout="stacked"` or `formLayout="side-by-side"`, without fighting internal Mantine positional hooks that assume vertical stacking by default.
+
+### **Label Size Container Constraints**
+
+- The `labelSize` parameter (mapping values like `"small"`) internally **does not scale typographic font metrics**. Instead, it dynamically defines the explicit horizontal bounding width limit of the block container itself.
+- **Architectural Rule:** `labelSize` modifications are strictly designed to execute exclusively when `formLayout="side-by-side"` is active. It acts as an optical grid threshold ensuring left-aligned string wrappers constrain correctly uniformly down a column without bleeding into the physical input arrays alongside them.
+
+## Outstanding Technical Debt / Issues
+
+### **Description Property Omission**
+
+- **Issue:** Currently, the adapter `Label` does not natively parse or support a structured `description` node directly attached beneath it.
+- **Context:** Standard forms often attach subtext beneath inputs, but mapping a description purely within the `<Label>` (distinct from an overall form-control description) is omitted structurally until subsequent UI Kit requirements mandate dedicated `description` styles locally on the label component itself.
+
+### **Global Interactive Hover Mappings**
+
+- **Issue:** Currently, the `editIconWrapper` lacks a dedicated hover background layer.
+- **Context:** While the global theme abstracts interactive hover environments deeply using layered variable syntax (e.g., `--recursica_brand_layer_1_elements_interactive_hover-color`), Recursica's token generation framework natively fails to expose a universally generic placeholder token (e.g., `--recursica_elements_interactive_hover-color`) which downstream wrappers can map their `<Layer>` injections directly into safely.
+- **Resolution Path:** We are explicitly ignoring the `.editIconWrapper:hover` background color assignment until the raw Figma token exports directly scaffold a generic token placeholder that we can interface cleanly with across arbitrary `<Layer>` contexts, avoiding manually mapping statically hardcoded depths (`layer-0`, `layer-1`).

package/src/components/Label/Label.module.css

@@ -0,0 +1,177 @@
+/* HARDCODED VALUES:
+   - display: flex helps us leverage flex 'order' to perfectly position Mantine's injected asterisk.
+   - align-items: baseline ensures text logic lines up nicely if font sizes differ slightly.
+   - margin/padding resets.
+*/
+
+.root {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  box-sizing: border-box;
+  margin: 0;
+  color: var(--recursica_ui-kit_components_label_properties_colors_text);
+}
+
+.root[data-alignment="left"] {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.root[data-alignment="right"] {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.root[data-layout="stacked"] {
+  padding-bottom: var(
+    --recursica_ui-kit_components_label_variants_layouts_stacked_properties_bottom-padding
+  );
+  min-height: var(
+    --recursica_ui-kit_components_label_variants_layouts_stacked_properties_min-height
+  );
+}
+
+.root[data-layout="side-by-side"] {
+  padding-top: var(
+    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_vertical-padding
+  );
+  padding-bottom: var(
+    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_vertical-padding
+  );
+  min-height: var(
+    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_min-height
+  );
+  /* In side-by-side, the label exists to the left of its input, so we use the gutter gap here. */
+  margin-right: var(
+    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_gutter
+  );
+}
+
+.root[data-layout="side-by-side"][data-size="default"] {
+  width: var(
+    --recursica_ui-kit_components_label_variants_layouts_side-by-side_variants_sizes_default_properties_width
+  );
+}
+
+.root[data-layout="side-by-side"][data-size="small"] {
+  width: var(
+    --recursica_ui-kit_components_label_variants_layouts_side-by-side_variants_sizes_small_properties_width
+  );
+}
+
+.labelText {
+  order: 1;
+  font-family: var(
+    --recursica_ui-kit_components_label_properties_label-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_label_properties_label-text_font-size
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_label_properties_label-text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_label_properties_label-text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_label_properties_label-text_line-height
+  );
+  font-style: var(
+    --recursica_ui-kit_components_label_properties_label-text_font-style,
+    normal
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_label_properties_label-text_text-decoration,
+    none
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_label_properties_label-text_text-transform,
+    none
+  );
+}
+
+.required {
+  order: 2;
+  margin-left: var(
+    --recursica_ui-kit_components_label_properties_required-indicator-gap
+  );
+  color: var(--recursica_ui-kit_components_label_properties_colors_asterisk);
+
+  /* Inherit identical typography bounds to prevent flex row line-height stretching */
+  font-family: var(
+    --recursica_ui-kit_components_label_properties_label-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_label_properties_label-text_font-size
+  );
+  line-height: var(
+    --recursica_ui-kit_components_label_properties_label-text_line-height
+  );
+}
+
+.optionalText {
+  order: 5;
+  flex-basis: 100%;
+  margin-top: var(
+    --recursica_ui-kit_components_label_properties_label-optional-text-gap
+  );
+  margin-left: 0;
+  font-family: var(
+    --recursica_ui-kit_components_label_properties_optional-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_label_properties_optional-text_font-size
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_label_properties_optional-text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_label_properties_optional-text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_label_properties_optional-text_line-height
+  );
+  font-style: normal;
+  text-decoration: var(
+    --recursica_ui-kit_components_label_properties_optional-text_text-decoration,
+    none
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_label_properties_optional-text_text-transform,
+    none
+  );
+  color: inherit;
+  opacity: var(
+    --recursica_ui-kit_components_label_properties_colors_optional-text-opacity
+  );
+}
+
+.actionAreaWrapper {
+  order: 4;
+  margin-left: var(
+    --recursica_ui-kit_components_label_properties_edit-icon-gap
+  );
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.editIconWrapper {
+  order: 4;
+  margin-left: var(
+    --recursica_ui-kit_components_label_properties_edit-icon-gap
+  );
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.editIconWrapper[data-replaces-asterisk="true"] {
+  color: var(--recursica_ui-kit_components_label_properties_colors_asterisk);
+}

package/src/components/Label/Label.stories.tsx

@@ -0,0 +1,123 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "./Label";
+import { TextField } from "../TextField/TextField";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+
+type LabelStoryProps = React.ComponentProps<typeof Label>;
+
+const meta: Meta<LabelStoryProps> = {
+  title: "UI-Kit/Label",
+  component: Label,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The `Label` component is a strict Recursica-styled wrapper around Mantine's native `Input.Label`. It serves as the primary compositional primitive for all form fields, preserving Mantine's accessibility associations and context while strictly enforcing the Recursica atomic design system.\n\n### Usage with Form Inputs\nWhen working with form structures, render this `Label` component directly above your inputs or supply it to a component's overriding properties. The component automatically maps structural layout dimensions, dynamic alignment (`left` vs `right`), custom indicator gaps, and integrates a customized `optionalText` and `withEditIcon` flow that safely bypasses Mantine's native required asterisk mechanisms.",
+      },
+    },
+  },
+  argTypes: {
+    ...formControlArgTypes,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<LabelStoryProps>;
+
+// Utility mapping to pipe raw Label args structurally into TextField accurately
+const renderWithTextField = ({ children, ...args }: LabelStoryProps) => (
+  <TextField
+    label={children as React.ReactNode}
+    placeholder="Form Control primitive mapped..."
+    {...(args as any)}
+  />
+);
+
+export const Default: Story = {
+  args: {
+    children: "Dynamic Label (Controls)",
+    formLayout: "stacked",
+    labelSize: "default",
+    labelAlignment: "left",
+    required: false,
+    labelOptionalText: "",
+    labelWithEditIcon: false,
+  },
+  render: renderWithTextField,
+};
+
+export const StackedDefault: Story = {
+  args: {
+    children: "Email Address",
+    formLayout: "stacked",
+  },
+  render: renderWithTextField,
+};
+
+export const StackedRequired: Story = {
+  args: {
+    children: "Primary Network Node",
+    formLayout: "stacked",
+    required: true,
+  },
+  render: renderWithTextField,
+};
+
+export const StackedWithEditIcon: Story = {
+  args: {
+    children: "Environment Variables",
+    formLayout: "stacked",
+    labelWithEditIcon: true,
+  },
+  render: renderWithTextField,
+};
+
+export const SideBySideDefault: Story = {
+  args: {
+    children: "Status",
+    formLayout: "side-by-side",
+    labelSize: "default",
+  },
+  render: renderWithTextField,
+};
+
+export const RequiredSuppressesOptionalText: Story = {
+  args: {
+    children: "Full Name",
+    formLayout: "stacked",
+    required: true,
+    labelOptionalText: "This should not render",
+  },
+  render: renderWithTextField,
+};
+
+export const BooleanOptionalText: Story = {
+  args: {
+    children: "Middle Initial",
+    formLayout: "side-by-side",
+    labelOptionalText: true,
+  },
+  render: renderWithTextField,
+};
+
+export const WithEditIcon: Story = {
+  args: {
+    children: "Shipping Address",
+    formLayout: "side-by-side",
+    labelWithEditIcon: true,
+  },
+  render: renderWithTextField,
+};
+
+export const LayerOneSideBySide: Story = {
+  args: {
+    children: "Configuration",
+    formLayout: "side-by-side",
+    labelWithEditIcon: true,
+  },
+  render: renderWithTextField,
+};

package/src/components/Label/Label.tsx

@@ -0,0 +1,132 @@
+import React, { forwardRef } from "react";
+import { Input, type InputLabelProps } from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Label.module.css";
+
+export interface RecursicaLabelProps {
+  /** Overall structural flow mapping the Form Control natively cascading down to Label and Input logic. */
+  formLayout?: "stacked" | "side-by-side";
+  /** Specifies the sizing metrics natively mapping the Label boundaries. */
+  labelSize?: "default" | "small";
+  /** Overall alignment directive for the label strings natively forcing Left/Right justification. */
+  labelAlignment?: "left" | "right";
+  /** Injects an indicator text block alongside the label. Can be boolean (`true` maps to '(Optional)') or custom React nodes. */
+  labelOptionalText?: boolean | React.ReactNode;
+  /** When true, forces the native Edit Icon to replace the standard asterisk visually. */
+  labelWithEditIcon?: boolean;
+  /** Custom action area to render alongside the label instead of the default edit icon. */
+  labelActionArea?: React.ReactNode;
+  /** Interaction hook invoked whenever a generated edit icon block natively triggers a click event. */
+  onLabelEditClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export type LabelProps = RecursicaOverStyled<
+  Omit<InputLabelProps, "size"> & RecursicaLabelProps
+>;
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  {
+    formLayout = "stacked",
+    labelSize = "default",
+    labelAlignment,
+    required = false,
+    labelOptionalText,
+    labelWithEditIcon,
+    labelActionArea,
+    onLabelEditClick,
+    children,
+    overStyled = false,
+    ...rest
+  },
+  ref,
+) {
+  const resolvedAlignment =
+    labelAlignment || (formLayout === "side-by-side" ? "right" : "left");
+
+  let resolvedOptionalText: React.ReactNode | undefined;
+  if (!required) {
+    if (labelOptionalText === true) resolvedOptionalText = "optional";
+    else if (labelOptionalText) resolvedOptionalText = labelOptionalText;
+  }
+
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
+
+  const mergedClassNames: Partial<Record<string, string>> = {
+    label: styles.root,
+    required: styles.required,
+  };
+
+  const classNamesProp = restRecord.classNames;
+  if (
+    classNamesProp &&
+    typeof classNamesProp === "object" &&
+    !Array.isArray(classNamesProp)
+  ) {
+    const o = classNamesProp as Partial<Record<string, string>>;
+    mergedClassNames.label = o.label
+      ? `${styles.root} ${o.label}`
+      : styles.root;
+    mergedClassNames.required = o.required
+      ? `${styles.required} ${o.required}`
+      : styles.required;
+  }
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return (
+    <Input.Label
+      ref={ref}
+      className={finalClass}
+      classNames={mergedClassNames}
+      data-layout={formLayout}
+      data-size={labelSize}
+      data-alignment={resolvedAlignment}
+      required={required && !labelWithEditIcon}
+      {...sanitizedProps}
+    >
+      <span className={styles.labelText}>{children}</span>
+      {resolvedOptionalText && (
+        <span className={styles.optionalText}>
+          {typeof resolvedOptionalText === "string"
+            ? `(${resolvedOptionalText})`
+            : resolvedOptionalText}
+        </span>
+      )}
+      {labelActionArea ? (
+        <span className={styles.actionAreaWrapper}>{labelActionArea}</span>
+      ) : labelWithEditIcon ? (
+        <button
+          type="button"
+          className={styles.editIconWrapper}
+          data-replaces-asterisk={required ? "true" : undefined}
+          onClick={onLabelEditClick}
+          aria-label="Edit"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.5303 2.46967C11.8232 2.17678 12.2981 2.17678 12.591 2.46967L13.5303 3.40898C13.8232 3.70188 13.8232 4.17675 13.5303 4.46964L5.61288 12.3871C5.45268 12.5473 5.24434 12.6483 5.01809 12.6766L2.39534 13.0044C2.10091 13.0412 1.83856 12.7789 1.87538 12.4845L2.2032 9.86175C2.23147 9.63551 2.3325 9.42716 2.4927 9.26696L11.5303 2.46967Z"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      ) : null}
+    </Input.Label>
+  );
+});
+
+Label.displayName = "Label";

package/src/components/Label/index.ts

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

package/src/components/Link/Link.stories.tsx

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

package/src/components/Link/Link.tsx

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

package/src/components/Loader/Loader.stories.tsx

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

package/src/components/Loader/Loader.tsx

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

package/src/components/Menu/Menu.stories.tsx

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

package/src/components/Menu/Menu.tsx

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

package/src/components/Modal/Modal.stories.tsx

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

package/src/components/Modal/Modal.tsx

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