@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

package/src/components/tooltip/tooltip.mdx

@@ -1,48 +0,0 @@
----
-id: Components-tooltip
-title: Tooltip
-description:
-  A contextual popup that displays a description for an element.  See
-  https://www.w3.org/TR/wai-aria-1.2/#tooltip
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Media
-  - Tooltip
-tags:
-  - component
-  - media
----
-
-# Tooltip
-
-A contextual popup that displays a description for an element.
-
-[React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
-[Tooltip Aria Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)
-
-## Basic Usage
-
-All instances of `Tooltip` consist of two components, the `TooltipTrigger` and
-the `Tooltip`.
-
-The `TooltipTrigger` is required to wrap both the trigger element and the
-`Tooltip`.
-
-```jsx-live
-const App = () => (
-  <TooltipTrigger>
-    <Button>Trigger Element</Button>
-    <Tooltip>Tooltip</Tooltip>
-  </TooltipTrigger>
-  )
-```
-
-## Tooltip Trigger Props
-
-<PropTable id="TooltipTrigger" />
-
-## Tooltip Props
-
-<PropTable id="Tooltip" />

package/src/components/tooltip/tooltip.recipe.ts

@@ -1,26 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the Tooltip component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const tooltipRecipe = defineRecipe({
-  // Unique class name prefix for the component
-  className: "nimbus-tooltip",
-
-  // Base styles applied to all instances of the component
-  base: {
-    color: "white",
-    textStyle: "xs",
-    fontWeight: "400",
-    background: "slate.12",
-    display: "inline-flex",
-    alignItems: "center",
-    borderRadius: "100",
-    paddingX: "300",
-    paddingY: "100",
-    margin: "100",
-    maxW: "6400",
-    boxShadow: "1",
-  },
-});

package/src/components/tooltip/tooltip.slots.ts

@@ -1,35 +0,0 @@
-import {
-  type HTMLChakraProps,
-  type RecipeProps,
-  type UnstyledProp,
-  createRecipeContext,
-} from "@chakra-ui/react";
-
-import { type TooltipProps as RATooltipProps } from "react-aria-components";
-
-import { tooltipRecipe } from "./tooltip.recipe";
-
-/**
- * Base recipe props interface that combines Chakra UI's recipe props
- */
-interface TooltipRecipeProps extends RecipeProps<"div">, UnstyledProp {}
-
-/**
- * Root props interface that extends Chakra's HTML props with our recipe props.
- * This creates a complete set of props for the root element, combining
- * HTML attributes, Chakra's styling system, and our custom recipe props.
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface TooltipRootProps
-  extends HTMLChakraProps<"div", TooltipRecipeProps> {}
-
-const { withContext } = createRecipeContext({ recipe: tooltipRecipe });
-
-/**
- * Root component that provides the styling context for the Tooltip component.
- * Uses Chakra UI's recipe context system for consistent styling across instances.
- */
-export const TooltipRoot = withContext<
-  HTMLDivElement,
-  TooltipRootProps & RATooltipProps
->("div");

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

@@ -1,139 +0,0 @@
-import { createRef } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { within, expect } from "@storybook/test";
-import {
-  Tooltip,
-  TooltipTrigger,
-  Button,
-  Stack,
-  type TooltipProps,
-} from "@/components";
-
-const placements = {
-  top: ["top", "top left", "top right", "top start", "top end"],
-  bottom: [
-    "bottom",
-    "bottom left",
-    "bottom right",
-    "bottom start",
-    "bottom end",
-  ],
-  left: ["left", "left top", "left bottom"],
-  right: ["right", "right top", "right bottom"],
-  start: ["start", "start top", "start bottom"],
-  end: ["end", "end top", "end bottom"],
-};
-
-const allPlacements = Object.values(placements).flatMap((x) => x);
-
-const meta: Meta<typeof Tooltip> = {
-  title: "components/tooltip/Tooltip",
-  component: Tooltip,
-  argTypes: {
-    placement: {
-      options: allPlacements,
-      control: { type: "select" },
-    },
-  },
-  render: (args) => (
-    <TooltipTrigger delay={0} closeDelay={0}>
-      <Button>hover/focus me</Button>
-      <Tooltip {...args} />
-    </TooltipTrigger>
-  ),
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- * StoryObj provides type checking for our story configurations
- */
-type Story = StoryObj<typeof Tooltip>;
-
-/**
- * Demonstrates the most basic implementation
- */
-const tooltipRef = createRef<HTMLDivElement>();
-export const Base: Story = {
-  args: {
-    children: "Demo Tooltip",
-    ref: tooltipRef,
-  },
-  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",
-      });
-    });
-    await step("it forwards a ref to the tooltip", async () => {
-      const button = canvas.getByRole("button", { name: "hover/focus me" });
-
-      button.focus();
-      const tooltip = await canvas.findByRole("tooltip", {
-        name: "Demo Tooltip",
-      });
-      await expect(tooltipRef.current).toBe(tooltip);
-    });
-  },
-};
-
-/**
- * Shows all possible placements
- */
-export const Placement: Story = {
-  args: {},
-  render: () => {
-    return (
-      <Stack
-        direction="column"
-        alignItems="start"
-        marginY="1000"
-        marginX="2000"
-      >
-        {Object.entries(placements).map(([type, values]) => (
-          <Stack direction="row" alignItems="center" key={type} wrap="wrap">
-            {values.map((placement) => (
-              <TooltipTrigger key={placement} delay={0}>
-                <Button w="200px" h="60px">
-                  {placement}
-                </Button>
-                <Tooltip placement={placement as TooltipProps["placement"]}>
-                  {placement}
-                </Tooltip>
-              </TooltipTrigger>
-            ))}
-          </Stack>
-        ))}
-      </Stack>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(
-      (canvasElement.parentNode as HTMLElement) ?? canvasElement
-    );
-    for (const placement of allPlacements) {
-      await step(`Implements ${placement} placement on focus`, async () => {
-        const button = await canvas.findByRole("button", {
-          name: placement,
-        });
-
-        button.focus();
-
-        const tooltip = await canvas.findByRole("tooltip", {
-          name: placement,
-        });
-
-        await expect(tooltip).toHaveTextContent(placement);
-      });
-    }
-  },
-};

package/src/components/tooltip/tooltip.tsx

@@ -1,31 +0,0 @@
-import { forwardRef } from "react";
-import { Tooltip as RATooltip } from "react-aria-components";
-import { TooltipRoot } from "./tooltip.slots";
-import type { TooltipProps } from "./tooltip.types";
-
-/**
- * Tooltip
- * ============================================================
- * A contextual popup that displays a description for an element, uses `Tooltip` component from `react-aria-components`.
- *
- * Features:
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLDivElement' attributes (including aria- & data-attributes)
- * - allows overriding styles by using style-props
- *
- * Further Context:
- * - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
- * - [ARIA Tooltip Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)
- */
-export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
-  function Tooltip({ children, placement = "bottom", ...props }, forwardedRef) {
-    return (
-      <TooltipRoot ref={forwardedRef} asChild {...props}>
-        <RATooltip placement={placement} {...props}>
-          {children}
-        </RATooltip>
-      </TooltipRoot>
-    );
-  }
-);
-Tooltip.displayName = "Tooltip";

package/src/components/tooltip/tooltip.types.ts

@@ -1,44 +0,0 @@
-import type { PropsWithChildren } from "react";
-import type {
-  TooltipProps as RATooltipProps,
-  TooltipTriggerComponentProps,
-} from "react-aria-components";
-import type { TooltipRootProps } from "./tooltip.slots";
-import type { RecipeVariantProps } from "@chakra-ui/react";
-import { tooltipRecipe } from "./tooltip.recipe";
-
-/**
- * For use in components that use the polymorphic `as` and `asChild` props
- * internally, but do not make them available to the consumer.
- *
- * Long rambling background:
- * React-Aria's components cannot be configured to use `as` and `asChild` internally,
- * and cannot be directly styled by chakra's styledSystem. Therefore components
- * from `react-aria-components` should be wrapped in a chakra `withContext`
- * root component to set the styles onto the `r-a-c` component using `asChild`.
- * This means that we need to allow polymorphism internally, but should not
- * allow it in the external props api since it would not work.
- */
-type ExcludePolymorphicFromProps<T> = Omit<T, "as" | "asChild">;
-
-/**
- * Combines the root props with Chakra UI's recipe variant props, and
- * react-aria-component's TooltipProps
- * This allows the component to accept:
- * - structural props from Root
- * - styling variants from the recipe
- * - a11y/state related props from react-aria-components Tooltip
- */
-type TooltipVariantProps = ExcludePolymorphicFromProps<
-  TooltipRootProps & RecipeVariantProps<typeof tooltipRecipe> & RATooltipProps
->;
-
-/**
- * Main props interface for the Tooltip components
- * Extends TooltipVariantProps to include root props, variant props,
- * and react-aria props, while adding support for React children.
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface TooltipProps extends PropsWithChildren<TooltipVariantProps> {}
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface TooltipTriggerProps extends TooltipTriggerComponentProps {}

package/src/components/visually-hidden/index.ts

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

package/src/components/visually-hidden/visually-hidden.mdx

@@ -1,61 +0,0 @@
----
-id: Components-VisuallyHidden
-title: VisuallyHidden
-description: makes content accessible to screen readers but hides it visually
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Accessibility
-  - VisuallyHidden
-tags:
-  - component
----
-
-# VisuallyHidden
-
-Makes content accessible to screen readers but hides it visually.
-
-## Basic Usage
-
-Just wrap the content you want to hide visually, but keep accessible to screen
-readers, with the `VisuallyHidden` component.
-
-```jsx
-const App = () => <VisuallyHidden>I am VisuallyHidden!</VisuallyHidden>;
-```
-
-## Focusable Content
-
-If the content you want to hide visually contains focusable elements, add the
-`isFocusable` property to the `VisuallyHidden` component. The content then
-becomes visible if the first focusable element inside is focused with the
-_keyboard_.
-
-```jsx-live
-const App = () => (
-  <VisuallyHidden isFocusable>
-    <Button>I can have focus</Button>
-  </VisuallyHidden>
-);
-```
-
-## Inline Content
-
-`VisuallyHidden` uses a `<div>` element by default to render into the DOM. If
-you need to hide inline content, you can use the `as` prop to render a `<span>`
-element instead, keeping the `html` semantics intact.
-
-```jsx-live
-const App = () => (
-  <p>
-    Text that will be visible.
-    <VisuallyHidden as="span">I will blend just in.</VisuallyHidden>
-    Text that will be visible.
-  </p>
-);
-```
-
-## Props
-
-<PropTable id="VisuallyHidden" />

package/src/components/visually-hidden/visually-hidden.stories.tsx

@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { VisuallyHidden } from "./visually-hidden";
-import { Button } from "@/components";
-import { expect, userEvent, within } from "@storybook/test";
-
-// CSS property combination, that makes content invisible to the viewer
-const invisibleCssProps = {
-  clip: "rect(0px, 0px, 0px, 0px)",
-  clipPath: "inset(50%)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: "0px",
-  position: "absolute",
-  width: "1px",
-  whiteSpace: "nowrap",
-};
-
-/**
- * hides content from the viewers eye but keeps it visible to screen readers.
- * Makes it visible if focused.
- */
-const meta: Meta<typeof VisuallyHidden> = {
-  title: "utils/VisuallyHidden",
-  component: VisuallyHidden,
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- * StoryObj provides type checking for our story configurations
- */
-type Story = StoryObj<typeof VisuallyHidden>;
-
-/**
- * You should not see anything here, that's the whole purpose of this component.
- */
-export const Base: Story = {
-  render: () => {
-    return (
-      <VisuallyHidden data-testid="container">
-        <div data-testid="content">I should not be visible.</div>
-        <Button data-testid="button" onClick={() => alert("meh")}>
-          I should not be focusable.
-        </Button>
-      </VisuallyHidden>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const container = canvas.getByTestId("container");
-    const content = canvas.getByTestId("content");
-    const button = canvas.getByTestId("button");
-
-    await step("container is in the document, but invisible", async () => {
-      await expect(container).toBeInTheDocument();
-      await expect(container).toHaveStyle(invisibleCssProps);
-    });
-
-    await step("content is inside container", async () => {
-      await expect(content.parentElement).toBe(container);
-    });
-
-    await step("button is focusable", async () => {
-      await userEvent.tab();
-      await expect(button).toHaveFocus();
-    });
-  },
-};
-
-/**
- * Use a `as="span"` if you want to hide inline-content visually.
- */
-export const SpanAsContainer: Story = {
-  render: () => {
-    return (
-      <VisuallyHidden as="span" data-testid="container">
-        <span data-testid="content">I am a span inside a span</span>
-      </VisuallyHidden>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const container = canvas.getByTestId("container");
-    const content = canvas.getByTestId("content");
-
-    await step("container uses a span element", async () => {
-      await expect(content.parentElement).toBe(container);
-      await expect(container.tagName).toBe("SPAN");
-    });
-  },
-};
-
-/**
- * `<VisuallyHidden/>` contains content that can be focused, but only if `isFocusable`
- * is set to true, it will become visible when focused
- */
-export const VisibleWhenFocused: Story = {
-  render: () => {
-    return (
-      <VisuallyHidden data-testid="container" isFocusable>
-        <Button data-testid="button">Skip Navigation</Button>
-      </VisuallyHidden>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const container = canvas.getByTestId("container");
-    const button = canvas.getByTestId("button");
-
-    await step("when button is focused, container is visible", async () => {
-      await userEvent.tab();
-      await expect(button).toHaveFocus();
-
-      // Check for a subset of properties to make sure they are not applied
-      const { height, width, clip, position } = invisibleCssProps;
-      await expect(container).not.toHaveStyle({ clip });
-      await expect(container).not.toHaveStyle({ position });
-      await expect(container).not.toHaveStyle({ height });
-      await expect(container).not.toHaveStyle({ width });
-    });
-  },
-};

package/src/components/visually-hidden/visually-hidden.tsx

@@ -1,18 +0,0 @@
-import {
-  VisuallyHidden as ReactAriaViusallyHidden,
-  type VisuallyHiddenProps as ReactAriaVisuallyHiddenProps,
-} from "react-aria";
-
-export interface VisuallyHiddenProps
-  extends Omit<ReactAriaVisuallyHiddenProps, "elementType"> {
-  /** specifies the element type to render, use `span` for inline content
-   * and `div` for block content */
-  as?: "span" | "div";
-}
-
-export const VisuallyHidden = (props: VisuallyHiddenProps) => {
-  const { as = "div", ...leftoverProps } = props;
-  return <ReactAriaViusallyHidden elementType={as} {...leftoverProps} />;
-};
-
-VisuallyHidden.displayName = "VisuallyHidden";

package/src/docs/accessibility.mdx

@@ -1,21 +0,0 @@
----
-id: Components-Accessibility
-title: Accessibility
-description: Components designed to enhance accessibility and ARIA compliance.
-documentState: InitialDraft
-order: 11
-menu:
-  - Components
-  - Accessibility
-tags:
-  - document
-icon: Blind
----
-
-# Accessibility
-
-Components designed to enhance accessibility and ARIA compliance.
-
-- **Screen Reader Aids**: e.g., VisuallyHidden, AccessibleLabel.
-- **Keyboard Navigation**: e.g., FocusTrap, SkipLink.
-- **ARIA Enhancers**: e.g., AriaLiveRegion.