@commercetools/nimbus 0.0.1

package/src/components/grid/grid.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import {
+  Grid as ChakraGrid,
+  GridItem,
+  type GridProps as ChakraGridProps,
+} from "@chakra-ui/react";
+
+/**
+ * Grid
+ * ============================================================
+ * The Grid Layout Component provides a flexible and responsive way to structure content using a two-dimensional grid system. It allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes.
+ *
+ * Features:
+ *
+ * - allows forwarding refs to the underlying DOM element
+ */
+export interface GridProps extends ChakraGridProps {
+  children?: React.ReactNode;
+}
+
+const GridComponent = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
+  return <ChakraGrid ref={ref} {...props} />;
+});
+
+GridComponent.displayName = "Grid";
+
+export const Grid = Object.assign(GridComponent, {
+  Item: GridItem,
+});

package/src/components/grid/index.ts

@@ -0,0 +1 @@
+export { Grid, type GridProps } from "./grid";

package/src/components/heading/heading.mdx

@@ -0,0 +1,23 @@
+---
+id: Heading
+title: Heading
+description: renders a heading
+documentState: InitialDraft
+order: 2
+menu:
+  - Components
+  - Typography
+  - Heading
+tags:
+  - heading
+---
+
+# Heading
+
+Like Text, but with predefined styles for a heading/title look and semantic
+meaning, which makes source code easier to scan by clearly highlighting the
+content's hierarchy and purpose.
+
+> [!NOTE]  
+> Checkout the [Text component](/components/typography/text) for configuration
+> options.

package/src/components/heading/heading.recipe.ts

@@ -0,0 +1,49 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const headingRecipe = defineRecipe({
+  className: "nimbus-heading",
+  base: {
+    fontFamily: "heading",
+    fontWeight: "600",
+  },
+  variants: {
+    size: {
+      xs: {
+        textStyle: "xs",
+      },
+      sm: {
+        textStyle: "sm",
+      },
+      md: {
+        textStyle: "md",
+      },
+      lg: {
+        textStyle: "lg",
+      },
+      xl: {
+        textStyle: "xl",
+      },
+      "2xl": {
+        textStyle: "2xl",
+      },
+      "3xl": {
+        textStyle: "3xl",
+      },
+      "4xl": {
+        textStyle: "4xl",
+      },
+      "5xl": {
+        textStyle: "5xl",
+      },
+      "6xl": {
+        textStyle: "6xl",
+      },
+      "7xl": {
+        textStyle: "7xl",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "xl",
+  },
+});

package/src/components/heading/heading.tsx

@@ -0,0 +1 @@
+export { Heading } from "@chakra-ui/react";

package/src/components/heading/index.ts

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

package/src/components/highlight/highlight.mdx

@@ -0,0 +1,18 @@
+---
+id: Highlight
+title: Highlight
+description: highlights a substring in a string
+documentState: InitialDraft
+order: 999
+menu:
+  - Components
+  - Typography
+  - Highlight
+tags:
+  - highlight
+  - mark
+---
+
+# Highlight
+
+Add description later.rr

package/src/components/highlight/highlight.tsx

@@ -0,0 +1 @@
+export { Highlight } from "@chakra-ui/react";

package/src/components/highlight/index.ts

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

package/src/components/icon-button/icon-button.mdx

@@ -0,0 +1,98 @@
+---
+id: Components-IconButton
+title: IconButton
+description: displays a button with an icon only as child
+documentState: InitialDraft
+order: 999
+menu:
+  - Components
+  - Inputs
+  - IconButton
+tags:
+  - component
+figmaLink: >-
+  https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/New-Design-System?node-id=58-132&m=dev
+---
+
+# IconButton
+
+displays a button with an icon only as child.
+
+## Basic Usage
+
+If unconfigured `IconButton` will default to a neutral state. It is important to
+configure `IconButton` properly to ensure it displays as intended.
+
+```jsx-live
+const App = () => <IconButton><Icons.ArrowForward/></IconButton>
+```
+
+### Sizes
+
+Available sizes.
+
+```jsx-live
+const App = () => {
+  const sizes = ['md', 'xs', '2xs'];
+
+  return (
+    <Stack direction="horizontal" alignItems="center">
+      {sizes.map(size => (
+        <IconButton tone="primary" variant="solid" key={size} size={size}>
+          <Icons.AutoFixHigh/>
+        </IconButton>
+      ))}
+    </Stack>
+  )
+}
+```
+
+### Variants
+
+Available variants.
+
+```jsx-live
+const App = () => {
+
+  const variants = ['solid', 'outline', 'ghost', 'link'];
+
+  return (
+    <Stack direction="horizontal">
+      {variants.map(variant => (
+        <IconButton tone="primary" key={variant} variant={variant}>
+          <Icons.AutoFixHigh/>
+        </IconButton>
+      ))}
+    </Stack>
+  )
+}
+```
+
+### Tones
+
+Available tones.
+
+```jsx-live
+const App = () => {
+  const variants = ["solid", "outline", "ghost", "link"];
+  const colors = ["primary", "error"];
+
+  return (
+    <Stack>
+      {colors.map((color) => (
+        <Stack key={color} direction="horizontal">
+          {variants.map((variant) => (
+            <IconButton colorPalette={color} key={variant} variant={variant}>
+              <Icons.AutoFixHigh/>
+            </IconButton>
+          ))}
+        </Stack>
+      ))}
+    </Stack>
+  );
+};
+```
+
+## Props
+
+<PropTable id="IconButton" />

package/src/components/icon-button/icon-button.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton } from "./icon-button";
+import { Stack } from "./../stack";
+import { Apps as DemoIcon } from "@commercetools/nimbus-icons";
+import type { IconButtonProps } from "./icon-button.types";
+import { createRef } from "react";
+import { expect, fn, within, userEvent } from "@storybook/test";
+
+const meta: Meta<typeof IconButton> = {
+  title: "components/IconButton",
+  component: IconButton,
+};
+
+export default meta;
+
+const sizes: IconButtonProps["size"][] = [
+  //"2xl",
+  //"xl",
+  //"lg",
+  "md",
+  //"sm",
+  "xs",
+  "2xs",
+];
+
+const variants: IconButtonProps["variant"][] = [
+  "solid",
+  "subtle",
+  "outline",
+  "ghost",
+  "link",
+];
+
+const tones: IconButtonProps["tone"][] = ["primary", "neutral", "critical"];
+
+/**
+ * Story type for TypeScript support
+ * StoryObj provides type checking for our story configurations
+ */
+type Story = StoryObj<typeof IconButton>;
+
+/**
+ * Base story
+ * Demonstrates the most basic implementation
+ * Uses the args pattern for dynamic control panel inputs
+ */
+export const Base: Story = {
+  args: {
+    children: <DemoIcon />,
+    onPress: fn(),
+    ["data-testid"]: "test",
+    ["aria-label"]: "test-button",
+  },
+  play: async ({ canvasElement, args, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("test");
+    const onPress = args.onPress;
+
+    await step("Uses a <button> element by default", async () => {
+      await expect(button.tagName).toBe("BUTTON");
+    });
+
+    await step("Forwards data- & aria-attributes", async () => {
+      await expect(button).toHaveAttribute("data-testid", "test");
+      await expect(button).toHaveAttribute("aria-label", "test-button");
+    });
+
+    // ATTENTION: react-aria does some complicated science,
+    // if there is a **KEYSTROKE** before the click (like a tab-key aiming to focus the button),
+    // the first click is not counted as a valid click
+    await step("Is clickable", async () => {
+      button.click();
+      await expect(onPress).toHaveBeenCalledTimes(1);
+      button.blur();
+    });
+
+    await step("Is focusable with <tab> key", async () => {
+      await userEvent.tab();
+      await expect(button).toHaveFocus();
+    });
+
+    await step("Can be triggered with enter", async () => {
+      await userEvent.keyboard("{enter}");
+      await expect(onPress).toHaveBeenCalledTimes(2);
+    });
+
+    await step("Can be triggered with space-bar", async () => {
+      await expect(button).toHaveFocus();
+      await userEvent.keyboard(" ");
+      await expect(onPress).toHaveBeenCalledTimes(3);
+    });
+  },
+};
+
+/**
+ * Showcase Sizes
+ */
+export const Sizes: Story = {
+  args: {
+    children: <DemoIcon />,
+    ["aria-label"]: "test-button",
+  },
+  render: (args) => {
+    return (
+      <Stack direction="row" gap="400" alignItems="center">
+        {sizes.map((size) => (
+          <IconButton key={size as string} size={size} {...args} />
+        ))}
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Showcase Variants
+ */
+export const Variants: Story = {
+  args: {
+    children: <DemoIcon />,
+    ["aria-label"]: "test-button",
+  },
+  render: (args) => {
+    return (
+      <Stack direction="row" gap="400" alignItems="center">
+        {variants.map((variant) => (
+          <IconButton key={variant as string} {...args} variant={variant} />
+        ))}
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Showcase Tones
+ */
+export const Tones: Story = {
+  args: {
+    children: <DemoIcon />,
+    ["aria-label"]: "test-button",
+  },
+  render: (args) => {
+    return (
+      <Stack>
+        {tones.map((tone) => (
+          <Stack
+            key={tone as string}
+            direction="row"
+            gap="400"
+            alignItems="center"
+          >
+            {variants.map((variant) => (
+              <IconButton
+                key={variant as string}
+                {...args}
+                variant={variant}
+                tone={tone}
+              />
+            ))}
+          </Stack>
+        ))}
+      </Stack>
+    );
+  },
+};
+
+const buttonRef = createRef<HTMLButtonElement>();
+
+export const WithRef: Story = {
+  args: {
+    children: <DemoIcon />,
+    ["aria-label"]: "test-button",
+  },
+  render: (args) => {
+    return (
+      <IconButton ref={buttonRef} {...args}>
+        {args.children}
+      </IconButton>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+
+    await step("Does accept ref's", async () => {
+      await expect(buttonRef.current).toBe(button);
+    });
+  },
+};

package/src/components/icon-button/icon-button.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+import type { IconButtonProps } from "./icon-button.types";
+import { Button } from "@/components";
+
+/**
+ * IconButton
+ * ============================================================
+ * displays a button with only an icon as child. It is based
+ * on the regular `Button` component, but with a few adjustments.
+ */
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Button px={0} py={0} ref={ref} {...props}>
+        {children}
+      </Button>
+    );
+  }
+);
+
+IconButton.displayName = "IconButton";

package/src/components/icon-button/icon-button.types.tsx

@@ -0,0 +1,10 @@
+import { type ButtonProps } from "@/components";
+
+/**
+ * Main props interface for the IconButton component.
+ */
+
+export interface IconButtonProps extends ButtonProps {
+  /** explains the intended action, required for accessibility */
+  "aria-label": string;
+}

package/src/components/icon-button/index.ts

@@ -0,0 +1,2 @@
+export * from "./icon-button";
+export * from "./icon-button.types";

package/src/components/index.ts

@@ -0,0 +1,33 @@
+export * from "./avatar";
+export * from "./box";
+export * from "./bleed";
+export * from "./button";
+export * from "./code";
+export * from "./dialog";
+export * from "./em";
+export * from "./flex";
+export * from "./heading";
+export * from "./highlight";
+export * from "./icon-button";
+export * from "./input";
+export * from "./input-group";
+export * from "./kbd";
+export * from "./link";
+export * from "./list";
+export * from "./simple-grid";
+export * from "./table";
+export * from "./text";
+export * from "./tooltip";
+export * from "./nimbus-provider";
+export * from "./checkbox";
+export * from "./stack";
+export * from "./visually-hidden";
+export * from "./text-input";
+export * from "./grid";
+export * from "./select";
+export * from "./accordion";
+export * from "./loading-spinner";
+export * from "./card";
+export * from "./badge";
+export * from "./alert";
+export * from "./toggle-button-group";

package/src/components/input/index.ts

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

package/src/components/input/input.mdx

@@ -0,0 +1,20 @@
+---
+id: Input
+title: Input
+description: displays a Input field
+documentState: InitialDraft
+order: 999
+menu:
+  - Components
+  - Inputs
+  - Input
+tags:
+  - text
+  - input
+---
+
+# Input
+
+add description here.
+
+<PropTable id="Input" />

package/src/components/input/input.recipe.ts

@@ -0,0 +1,95 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const inputRecipe = defineRecipe({
+  className: "nimbus-input",
+  base: {
+    width: "full",
+    minWidth: "0",
+    outline: "0",
+    position: "relative",
+    appearance: "none",
+    textAlign: "start",
+    _disabled: {
+      layerStyle: "disabled",
+    },
+    height: "var(--input-height)",
+    minW: "var(--input-height)",
+    "--focus-color": "colors.colorPalette.focusRing",
+    "--error-color": "colors.border.error",
+    "&::placeholder": {
+      color: "colorPalette.11",
+      opacity: 3 / 4,
+    },
+    _invalid: {
+      focusRingColor: "var(--error-color)",
+      borderColor: "var(--error-color)",
+    },
+  },
+  variants: {
+    size: {
+      "2xs": {
+        textStyle: "xs",
+        px: "200",
+        "--input-height": "sizes.700",
+      },
+      xs: {
+        textStyle: "xs",
+        px: "200",
+        "--input-height": "sizes.800",
+      },
+      sm: {
+        textStyle: "sm",
+        px: "250",
+        "--input-height": "sizes.900",
+      },
+      md: {
+        textStyle: "sm",
+        px: "300",
+        "--input-height": "sizes.1000",
+      },
+      lg: {
+        textStyle: "md",
+        px: "400",
+        "--input-height": "sizes.1100",
+      },
+      xl: {
+        textStyle: "md",
+        px: "450",
+        "--input-height": "sizes.1200",
+      },
+      "2xl": {
+        textStyle: "lg",
+        px: "500",
+        "--input-height": "sizes.1600",
+      },
+    },
+    variant: {
+      outline: {
+        bg: "transparent",
+        borderWidth: "1px",
+        borderColor: "border",
+        focusVisibleRing: "inside",
+      },
+      subtle: {
+        borderWidth: "1px",
+        borderColor: "transparent",
+        bg: "bg.muted",
+        focusVisibleRing: "inside",
+      },
+      flushed: {
+        bg: "transparent",
+        borderBottomWidth: "1px",
+        borderBottomColor: "border",
+        px: "0",
+        _focusVisible: {
+          borderColor: "var(--focus-color)",
+          boxShadow: "0px 1px 0px 0px var(--focus-color)",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline",
+  },
+});

package/src/components/input/input.tsx

@@ -0,0 +1 @@
+export { Input } from "@chakra-ui/react";

package/src/components/input-group/index.ts

@@ -0,0 +1 @@
+export * from "./input-group.tsx";

package/src/components/input-group/input-group.mdx

@@ -0,0 +1,20 @@
+---
+id: InputGroup
+title: InputGroup
+description: displays an InputGroup
+documentState: InitialDraft
+order: 999
+menu:
+  - Components
+  - Inputs
+  - InputGroup
+tags:
+  - input
+  - grouping
+---
+
+# InputGroup
+
+add description here.
+
+<PropTable id="InputGroup" />

package/src/components/input-group/input-group.tsx

@@ -0,0 +1,44 @@
+import type { BoxProps, InputElementProps } from "@chakra-ui/react";
+import { Group, InputElement } from "@chakra-ui/react";
+import { cloneElement, forwardRef } from "react";
+
+export interface InputGroupProps extends BoxProps {
+  startElementProps?: InputElementProps;
+  endElementProps?: InputElementProps;
+  startElement?: React.ReactNode;
+  endElement?: React.ReactNode;
+  children: React.ReactElement;
+}
+
+export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
+  function InputGroup(props, ref) {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      children,
+      ...rest
+    } = props;
+
+    return (
+      <Group ref={ref} {...rest}>
+        {startElement && (
+          <InputElement pointerEvents="none" {...startElementProps}>
+            {startElement}
+          </InputElement>
+        )}
+        {cloneElement(children, {
+          ...(startElement && { ps: "calc(var(--input-height) - 6px)" }),
+          ...(endElement && { pe: "calc(var(--input-height) - 6px)" }),
+          ...children.props,
+        })}
+        {endElement && (
+          <InputElement placement="end" {...endElementProps}>
+            {endElement}
+          </InputElement>
+        )}
+      </Group>
+    );
+  }
+);

package/src/components/kbd/index.ts

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