@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

package/src/components/toggle-button-group/toggle-button-group.stories.tsx

@@ -1,311 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ToggleButtonGroup } from "./toggle-button-group";
-import { Stack } from "../stack";
-import { userEvent, within, expect, fn } from "@storybook/test";
-import { SentimentSatisfied as DemoIcon } from "@commercetools/nimbus-icons";
-
-/**
- * Storybook metadata configuration
- */
-const meta: Meta<typeof ToggleButtonGroup.Root> = {
-  title: "components/ToggleButtonGroup",
-  component: ToggleButtonGroup.Root,
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- */
-type Story = StoryObj<typeof ToggleButtonGroup.Root>;
-
-const defaultChildren = (
-  <>
-    <ToggleButtonGroup.Button id="left">Left</ToggleButtonGroup.Button>
-    <ToggleButtonGroup.Button id="center">Center</ToggleButtonGroup.Button>
-    <ToggleButtonGroup.Button id="right">Right</ToggleButtonGroup.Button>
-  </>
-);
-
-type ToggleButtonGroupSize = "md" | "xs"; // Replace with actual derived type if possible
-type ToggleButtonGroupTone = "primary" | "critical" | "neutral"; // Replace with actual derived type
-
-const sizes: ToggleButtonGroupSize[] = ["md", "xs"];
-const tones: ToggleButtonGroupTone[] = ["primary", "critical", "neutral"];
-
-/**
- * Base story
- *
- * Demonstrates the most basic implementation with interaction tests.
- */
-export const Base: Story = {
-  args: {
-    size: "md",
-    tone: "primary",
-    children: defaultChildren,
-    onSelectionChange: fn(),
-    "aria-label": "Test Button Group",
-  },
-  play: async ({ canvasElement, args, step }) => {
-    const canvas = within(canvasElement);
-    // Get the group by its accessible name
-    const group = canvas.getByRole("radiogroup", {
-      name: /Test Button Group/i,
-    });
-    const buttons = within(group).getAllByRole("radio");
-    const [leftButton, centerButton, rightButton] = buttons;
-    const onSelectionChange = args.onSelectionChange as ReturnType<typeof fn>;
-
-    await step("Initial Rendering", async () => {
-      await expect(group).toBeInTheDocument();
-      await expect(buttons).toHaveLength(3);
-      // RAC ToggleButton uses aria-checked for selection state
-      await expect(leftButton).toHaveAttribute("aria-checked", "false");
-      await expect(centerButton).toHaveAttribute("aria-checked", "false");
-      await expect(rightButton).toHaveAttribute("aria-checked", "false");
-      await expect(onSelectionChange).not.toHaveBeenCalled();
-    });
-
-    await step(
-      "Keyboard Navigation (Tab into group, Arrows between buttons)",
-      async () => {
-        await userEvent.tab(); // Tab into the group (focuses the first button)
-        await expect(leftButton).toHaveFocus();
-
-        await userEvent.keyboard("{ArrowRight}");
-        await expect(centerButton).toHaveFocus();
-
-        await userEvent.keyboard("{ArrowRight}");
-        await expect(rightButton).toHaveFocus();
-
-        await userEvent.keyboard("{ArrowLeft}");
-        await expect(centerButton).toHaveFocus();
-      }
-    );
-
-    await step("Keyboard Selection (Space)", async () => {
-      // centerButton currently has focus
-      await userEvent.keyboard("{ }"); // Press Space
-      await expect(centerButton).toHaveAttribute("aria-checked", "true");
-      await expect(leftButton).toHaveAttribute("aria-checked", "false"); // Should deselect others in single-select mode
-      await expect(onSelectionChange).toHaveBeenCalledTimes(1);
-
-      // Select another button
-      await userEvent.keyboard("{ArrowLeft}"); // Move focus to leftButton
-      await expect(leftButton).toHaveFocus();
-      await userEvent.keyboard("{ }"); // Press Space
-      await expect(leftButton).toHaveAttribute("aria-checked", "true");
-      await expect(centerButton).toHaveAttribute("aria-checked", "false");
-      await expect(onSelectionChange).toHaveBeenCalledTimes(2);
-
-      // Deselect by pressing again (common toggle behavior)
-      await userEvent.keyboard("{ }"); // Press Space
-      await expect(leftButton).toHaveAttribute("aria-checked", "false");
-      await expect(onSelectionChange).toHaveBeenCalledTimes(3);
-    });
-
-    // Reset selection for next step
-    await userEvent.click(leftButton); // Click to select 'left'
-    onSelectionChange.mockClear(); // Clear mock history
-
-    await step("Mouse Selection", async () => {
-      await userEvent.click(rightButton);
-      await expect(rightButton).toHaveAttribute("aria-checked", "true");
-      await expect(leftButton).toHaveAttribute("aria-checked", "false");
-      await expect(centerButton).toHaveAttribute("aria-checked", "false");
-      await expect(onSelectionChange).toHaveBeenCalledTimes(1);
-
-      // Click again to deselect
-      await userEvent.click(rightButton);
-      await expect(rightButton).toHaveAttribute("aria-checked", "false");
-      await expect(onSelectionChange).toHaveBeenCalledTimes(2);
-    });
-  },
-};
-
-/**
- * Disabled Group Story
- *
- * Tests behavior when the entire group is disabled, with one button visually selected.
- */
-export const DisabledGroup: Story = {
-  args: {
-    ...Base.args, // Reuse args from Base
-    isDisabled: true,
-    selectedKeys: ["center"], // Set the middle button as initially selected
-    onSelectionChange: fn(),
-    "aria-label": "Disabled Test Group",
-  },
-  play: async ({ canvasElement, args, step }) => {
-    const canvas = within(canvasElement);
-    const group = canvas.getByRole("radiogroup", {
-      name: /Disabled Test Group/i,
-    });
-    const buttons = within(group).getAllByRole("radio");
-    const [leftButton, centerButton, rightButton] = buttons;
-    const onSelectionChange = args.onSelectionChange as ReturnType<typeof fn>;
-
-    await step("Initial Render shows default selection visually", async () => {
-      // Check that the defaultValue is reflected in aria-checked state
-      await expect(centerButton).toHaveAttribute("aria-checked", "true");
-      await expect(leftButton).toHaveAttribute("aria-checked", "false");
-      await expect(rightButton).toHaveAttribute("aria-checked", "false");
-    });
-
-    await step("Buttons are functionally disabled", async () => {
-      await expect(leftButton).toBeDisabled();
-      await expect(centerButton).toBeDisabled();
-      await expect(rightButton).toBeDisabled();
-    });
-
-    await step("Cannot focus buttons via keyboard", async () => {
-      // Try tabbing - focus should skip the disabled group
-      await userEvent.tab();
-      await expect(leftButton).not.toHaveFocus();
-      await expect(centerButton).not.toHaveFocus();
-      await expect(rightButton).not.toHaveFocus();
-    });
-
-    await step("Cannot change selection via click", async () => {
-      // Click the selected button
-      await userEvent.click(centerButton);
-      // State should not change
-      await expect(centerButton).toHaveAttribute("aria-checked", "true");
-      await expect(onSelectionChange).not.toHaveBeenCalled();
-
-      // Click a non-selected button
-      await userEvent.click(leftButton);
-      // State should not change
-      await expect(leftButton).toHaveAttribute("aria-checked", "false");
-      await expect(centerButton).toHaveAttribute("aria-checked", "true"); // Still selected
-      await expect(onSelectionChange).not.toHaveBeenCalled();
-    });
-  },
-};
-
-/**
- * Default Selection Story
- *
- * Tests behavior when a value is pre-selected.
- */
-export const DefaultSelection: Story = {
-  args: {
-    ...Base.args, // Reuse args from Base
-    selectedKeys: ["center"], // Set the middle button as initially selected
-    onSelectionChange: fn(), // Ensure separate mock for this story
-    "aria-label": "Default Selection Test Group",
-  },
-  play: async ({ canvasElement, args, step }) => {
-    const canvas = within(canvasElement);
-    const group = canvas.getByRole("radiogroup", {
-      name: /Default Selection Test Group/i,
-    });
-    const buttons = within(group).getAllByRole("radio");
-    const [leftButton, centerButton, rightButton] = buttons;
-    const onSelectionChange = args.onSelectionChange as ReturnType<typeof fn>;
-
-    await step("Initial Render shows default selection", async () => {
-      await expect(centerButton).toHaveAttribute("aria-checked", "true");
-      await expect(leftButton).toHaveAttribute("aria-checked", "false");
-      await expect(rightButton).toHaveAttribute("aria-checked", "false");
-    });
-
-    await step("Can change selection via click", async () => {
-      await userEvent.click(leftButton);
-      // await expect(leftButton).toHaveAttribute("aria-checked", "true");
-      // await expect(centerButton).toHaveAttribute("aria-checked", "false");
-      await expect(onSelectionChange).toHaveBeenCalledTimes(1);
-      await expect(onSelectionChange).toHaveBeenLastCalledWith(
-        new Set(["left"])
-      );
-    });
-  },
-};
-
-/**
- * Showcase Sizes - Minimal test focusing on rendering
- */
-export const Sizes: Story = {
-  render: (args) => (
-    <Stack direction="row" gap="400" alignItems="center">
-      {sizes.map((size) => (
-        <ToggleButtonGroup.Root
-          key={size}
-          {...args}
-          size={size}
-          aria-label={`Size ${size} Group`}
-        >
-          {defaultChildren}
-        </ToggleButtonGroup.Root>
-      ))}
-    </Stack>
-  ),
-  args: {
-    onSelectionChange: fn(), // Add mock even if not testing interaction heavily here
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    // Simple check: ensure both groups render
-    await step("Render groups for each size", async () => {
-      const groups = canvas.getAllByRole("radiogroup");
-      await expect(groups).toHaveLength(sizes.length);
-      // Optionally check a button exists in each
-      await expect(
-        within(groups[0]).getAllByRole("radio").length
-      ).toBeGreaterThan(0);
-      await expect(
-        within(groups[1]).getAllByRole("radio").length
-      ).toBeGreaterThan(0);
-    });
-  },
-};
-
-/**
- * Showcase Tones - Minimal test focusing on rendering
- */
-export const Tones: Story = {
-  render: (args) => (
-    <Stack>
-      {tones.map((tone) => (
-        <ToggleButtonGroup.Root
-          key={tone}
-          {...args}
-          tone={tone}
-          aria-label={`Tone ${tone} Group`}
-        >
-          <ToggleButtonGroup.Button id="left">
-            <DemoIcon />
-          </ToggleButtonGroup.Button>
-          <ToggleButtonGroup.Button id="center">
-            <DemoIcon />
-          </ToggleButtonGroup.Button>
-          <ToggleButtonGroup.Button id="right">
-            <DemoIcon />
-          </ToggleButtonGroup.Button>
-        </ToggleButtonGroup.Root>
-      ))}
-    </Stack>
-  ),
-  args: {
-    size: "md",
-    onSelectionChange: fn(),
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    // Ensure all groups render
-    await step("Render groups for each tone", async () => {
-      const groups = canvas.getAllByRole("radiogroup");
-      await expect(groups).toHaveLength(tones.length);
-      // Optionally check a button exists in each
-      await expect(
-        within(groups[0]).getAllByRole("radio").length
-      ).toBeGreaterThan(0);
-      await expect(
-        within(groups[1]).getAllByRole("radio").length
-      ).toBeGreaterThan(0);
-      await expect(
-        within(groups[2]).getAllByRole("radio").length
-      ).toBeGreaterThan(0);
-    });
-  },
-};

package/src/components/toggle-button-group/toggle-button-group.tsx

@@ -1,12 +0,0 @@
-import { ToggleButtonGroupRoot } from "./components/toggle-button-group.root";
-import { ToggleButtonGroupButton } from "./components/toggle-button-group.button";
-
-/**
- * ToggleButtonGroup
- * ============================================================
- * To group multiple `Button` components together, visually and logically, representing a set of related actions.
- */
-export const ToggleButtonGroup = {
-  Root: ToggleButtonGroupRoot,
-  Button: ToggleButtonGroupButton,
-};

package/src/components/toggle-button-group/toggle-button-group.types.tsx

@@ -1,62 +0,0 @@
-import type {
-  HTMLChakraProps,
-  RecipeProps,
-  RecipeVariantProps,
-} from "@chakra-ui/react";
-import { buttonGroupRecipe } from "./toggle-button-group.recipe";
-import type {
-  AriaToggleButtonGroupProps,
-  AriaToggleButtonProps,
-} from "react-aria";
-import {
-  ToggleButton as RacToggleButton,
-  ToggleButtonGroup as RacToggleButtonGroup,
-} from "react-aria-components";
-import type {
-  ForwardRefExoticComponent,
-  PropsWithChildren,
-  RefAttributes,
-} from "react";
-
-// ============================================================
-// Root Component (`<ToggleButtonGroup>`)
-// ============================================================
-
-/** Base Chakra styling props for the root `div` slot. */
-type ToggleButtonGroupRootSlotProps = HTMLChakraProps<
-  "div",
-  RecipeProps<"div">
->;
-
-/** Combined props for the root element (Chakra styles + Aria behavior + Recipe variants). */
-type ToggleButtonGroupRootProps = ToggleButtonGroupRootSlotProps &
-  AriaToggleButtonGroupProps &
-  RecipeVariantProps<typeof buttonGroupRecipe>;
-
-/** Final external props for the `<ToggleButtonGroup>` component, including `children`. */
-export type ToggleButtonGroupProps =
-  PropsWithChildren<ToggleButtonGroupRootProps>;
-
-/** Type signature for the main `ToggleButtonGroup` component (using `forwardRef`). */
-export type ToggleButtonGroupRootComponent = ForwardRefExoticComponent<
-  ToggleButtonGroupProps & RefAttributes<typeof RacToggleButtonGroup>
->;
-
-// ============================================================
-// Button Sub-Component (`<ToggleButtonGroup.Button>`)
-// ============================================================
-
-/** Base Chakra styling props for the `button` slot. */
-type ToggleButtonGroupButtonSlotProps = HTMLChakraProps<
-  "button",
-  RecipeProps<"button">
->;
-
-/** Combined props for the button element (Chakra styles + Aria behavior). */
-export type ToggleButtonGroupButtonProps = ToggleButtonGroupButtonSlotProps &
-  AriaToggleButtonProps;
-
-/** Type signature for the `ToggleButtonGroup.Button` sub-component (using `forwardRef`). */
-export type ToggleButtonGroupButtonComponent = ForwardRefExoticComponent<
-  ToggleButtonGroupButtonProps & RefAttributes<typeof RacToggleButton>
->;

package/src/components/tooltip/index.ts

@@ -1,4 +0,0 @@
-export * from "./tooltip";
-export * from "./tooltip-trigger";
-export * from "./make-element-focusable";
-export * from "./tooltip.types";

package/src/components/tooltip/make-element-focusable.stories.tsx

@@ -1,56 +0,0 @@
-import { createRef } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { within, expect } from "@storybook/test";
-import { Tooltip, TooltipTrigger, MakeElementFocusable } from "@/components";
-
-const meta: Meta<typeof MakeElementFocusable> = {
-  title: "components/Tooltip/MakeElementFocusable",
-  component: MakeElementFocusable,
-  render: (args) => (
-    <TooltipTrigger delay={0} closeDelay={0}>
-      <MakeElementFocusable {...args} />
-      <Tooltip>Demo Tooltip</Tooltip>
-    </TooltipTrigger>
-  ),
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- * StoryObj provides type checking for our story configurations
- */
-//TODO: figure out props table for this component
-type Story = StoryObj<typeof MakeElementFocusable>;
-
-// TODO: how much do we want to test react-aria-components?
-const elementRef = createRef<HTMLElement>();
-export const Base: Story = {
-  args: {
-    children: <button>custom button</button>,
-    ref: elementRef,
-  },
-  play: async ({ canvasElement, step }) => {
-    // need to get the parent node in order to have the tooltip portal in scope
-    const canvas = within(
-      (canvasElement.parentNode as HTMLElement) ?? canvasElement
-    );
-
-    await step(
-      "it renders a tooltip with the proper text when child is custom component",
-      async () => {
-        const button = canvas.getByRole("button", { name: "custom button" });
-        button.click();
-        button.focus();
-        await canvas.findByRole("tooltip", {
-          name: "Demo Tooltip",
-        });
-      }
-    );
-    await step("it forwards a ref to the custom element", async () => {
-      const button = canvas.getByRole("button", { name: "custom button" });
-
-      await expect(elementRef.current).toBe(button);
-    });
-  },
-};

package/src/components/tooltip/make-element-focusable.tsx

@@ -1,57 +0,0 @@
-import {
-  cloneElement,
-  forwardRef,
-  useRef,
-  type PropsWithChildren,
-  isValidElement,
-} from "react";
-import {
-  mergeProps,
-  useObjectRef,
-  useFocusable,
-  type FocusableOptions,
-} from "react-aria";
-
-import { mergeRefs } from "@chakra-ui/react";
-
-/**
- * MakeElementFocusable
- * ============================================================
- * A helper component that adds props from `react-aria`s `useFocusable` hook
- * to its child so that it can be used as a trigger element for a `Tooltip`
- *
- * Caveats:
- * - Using non-interactive elements as tooltip triggers is against ARIA best-practices,
- *   it is your responsibility to ensure that the underlying trigger element handles
- *   focus and hover interactions correctly for keyboard-only users
- *
- * Features:
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLElement' attributes (including aria- & data-attributes)
- *
- * Further Context:
- * - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
- * - [React Aria Components Issue re:Tooltip with custom trigger](https://github.com/adobe/react-spectrum/issues/5733#issuecomment-1918691983)
- * - [ARIA Tooltip Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)
- */
-export const MakeElementFocusable = forwardRef<
-  HTMLElement,
-  PropsWithChildren<FocusableOptions<HTMLElement>>
->(function MakeElementFocusable(props, forwardedRef) {
-  const localRef = useRef<HTMLElement>(null);
-  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));
-  const { focusableProps } = useFocusable(props, ref);
-  if (isValidElement(props.children)) {
-    return cloneElement(
-      props.children,
-      mergeProps(
-        focusableProps,
-        props.children.props as PropsWithChildren<
-          FocusableOptions<HTMLElement>
-        >,
-        { ref: ref }
-      )
-    );
-  }
-});
-MakeElementFocusable.displayName = "MakeElementFocusable";

package/src/components/tooltip/tooltip-trigger.stories.tsx

@@ -1,157 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { within, expect, fn } from "@storybook/test";
-import { Tooltip, TooltipTrigger, Button } from "@/components";
-
-const meta: Meta<typeof TooltipTrigger> = {
-  title: "components/tooltip/TooltipTrigger",
-  component: TooltipTrigger,
-  render: (args) => (
-    <TooltipTrigger {...args}>
-      <Button>hover/focus me</Button>
-      <Tooltip>Demo Tooltip</Tooltip>
-    </TooltipTrigger>
-  ),
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- * StoryObj provides type checking for our story configurations
- */
-//TODO: each component is in its own file so that the props table gets built for it,
-// is there a better way for declaring compound components such as this one?
-type Story = StoryObj<typeof TooltipTrigger>;
-
-// TODO: how much do we want to test react-aria-components?
-export const Base: Story = {
-  args: {},
-  play: async ({ canvasElement, step }) => {
-    // need to get the parent node in order to have the tooltip portal in scope
-    const canvas = within(
-      (canvasElement.parentNode as HTMLElement) ?? canvasElement
-    );
-    await step("it renders a tooltip with the proper text", async () => {
-      const button = canvas.getByRole("button", { name: "hover/focus me" });
-      button.click();
-      button.focus();
-      await canvas.findByRole("tooltip", {
-        name: "Demo Tooltip",
-      });
-    });
-  },
-};
-
-export const Delay: Story = {
-  args: {
-    delay: 0,
-  },
-  play: async ({ canvasElement, step }) => {
-    // need to get the parent node in order to have the tooltip portal in scope
-    const canvas = within(
-      (canvasElement.parentNode as HTMLElement) ?? canvasElement
-    );
-    await step("it renders a tooltip immediately when delay is 0", async () => {
-      const button = canvas.getByRole("button", { name: "hover/focus me" });
-      button.click();
-      button.focus();
-      await canvas.findByRole("tooltip", {
-        name: "Demo Tooltip",
-      });
-    });
-  },
-};
-
-export const isOpen: Story = {
-  args: {
-    isOpen: true,
-  },
-  play: async ({ canvasElement, step }) => {
-    // need to get the parent node in order to have the tooltip portal in scope
-    const canvas = within(
-      (canvasElement.parentNode as HTMLElement) ?? canvasElement
-    );
-    await step("it renders tooltip on mount when isOpen is true", async () => {
-      await canvas.findByRole("tooltip", {
-        name: "Demo Tooltip",
-      });
-    });
-    await step(
-      "it does not hide tooltip on blur when isOpen is true",
-      async () => {
-        await canvas.findByRole("tooltip", {
-          name: "Demo Tooltip",
-        });
-        const button = canvas.getByRole("button", { name: "hover/focus me" });
-        button.click();
-        button.focus();
-        button.blur();
-        await canvas.findByRole("tooltip", {
-          name: "Demo Tooltip",
-        });
-      }
-    );
-  },
-};
-
-export const defaultOpen: Story = {
-  args: {
-    defaultOpen: true,
-  },
-  play: async ({ canvasElement, step }) => {
-    // need to get the parent node in order to have the tooltip portal in scope
-    const canvas = within(
-      (canvasElement.parentNode as HTMLElement) ?? canvasElement
-    );
-    await step(
-      "it renders tooltip on mount when defaultOpen is true",
-      async () => {
-        await canvas.findByRole("tooltip", {
-          name: "Demo Tooltip",
-        });
-      }
-    );
-    await step(
-      "it does not hide tooltip on blur when isOpen is true",
-      async () => {
-        await canvas.findByRole("tooltip", {
-          name: "Demo Tooltip",
-        });
-        const button = canvas.getByRole("button", { name: "hover/focus me" });
-        button.click();
-        button.focus();
-        button.blur();
-        await new Promise((resolve) => setTimeout(resolve, 1));
-        await expect(
-          canvas.queryByRole("tooltip", {
-            name: "Demo Tooltip",
-          })
-        ).not.toBeInTheDocument();
-      }
-    );
-  },
-};
-
-export const onOpenChange: Story = {
-  args: {
-    onOpenChange: fn(),
-  },
-  play: async ({ canvasElement, args, step }) => {
-    // need to get the parent node in order to have the tooltip portal in scope
-    const canvas = within(
-      (canvasElement.parentNode as HTMLElement) ?? canvasElement
-    );
-
-    await step(
-      "it should call onOpenChange when entering and exiting",
-      async () => {
-        const button = canvas.getByRole("button", { name: "hover/focus me" });
-        button.click();
-        button.focus();
-        await expect(args.onOpenChange).toHaveBeenCalledTimes(1);
-        button.blur();
-        await expect(args.onOpenChange).toHaveBeenCalledTimes(2);
-      }
-    );
-  },
-};

package/src/components/tooltip/tooltip-trigger.tsx

@@ -1,15 +0,0 @@
-import { TooltipTrigger as RATooltipTrigger } from "react-aria-components";
-
-/**
- * TooltipTrigger
- * ============================================================
- * TooltipTrigger wraps around a trigger element and a Tooltip.
- * It handles opening and closing the Tooltip when the user hovers over or focuses the trigger,
- * and positioning the Tooltip relative to the trigger.
- *
- * Directly exported from `react-aria-components`
- * - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
- */
-export const TooltipTrigger = RATooltipTrigger;
-// @ts-expect-error displaynames can be set on component instances, necessary for pretty react-live output
-TooltipTrigger.displayName = "TooltipTrigger";