@commercetools/nimbus 0.0.1

package/src/components/button/button.recipe.ts

@@ -0,0 +1,185 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const buttonRecipe = defineRecipe({
+  className: "nimbus-button",
+  base: {
+    borderRadius: "200",
+    display: "inline-flex",
+    appearance: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    userSelect: "none",
+    position: "relative",
+    whiteSpace: "nowrap",
+    verticalAlign: "middle",
+    borderWidth: "1px",
+    borderColor: "transparent",
+    cursor: "button",
+    flexShrink: "0",
+    outline: "0",
+    lineHeight: "1.2",
+    isolation: "isolate",
+    fontWeight: "500",
+    transitionProperty: "common",
+    transitionDuration: "moderate",
+    focusVisibleRing: "outside",
+    _disabled: {
+      layerStyle: "disabled",
+    },
+    _icon: {
+      flexShrink: "0",
+    },
+  },
+  variants: {
+    size: {
+      "2xs": {
+        h: "600",
+        minW: "600",
+        fontSize: "300",
+        fontWeight: "500",
+        lineHeight: "400",
+        px: "200",
+        gap: "100",
+        _icon: {
+          width: "400",
+          height: "400",
+        },
+      },
+      xs: {
+        h: "800",
+        minW: "800",
+        fontSize: "350",
+        fontWeight: "500",
+        lineHeight: "400",
+        px: "300",
+        gap: "100",
+        _icon: {
+          width: "500",
+          height: "500",
+        },
+      },
+      /* sm: {
+        h: "900",
+        minW: "900",
+        px: "350",
+        textStyle: "sm",
+        gap: "200",
+        _icon: {
+          width: "400",
+          height: "400",
+        },
+      }, */
+      md: {
+        h: "1000",
+        minW: "1000",
+        fontSize: "400",
+        lineHeight: "500",
+        px: "400",
+        gap: "200",
+        _icon: {
+          width: "600",
+          height: "600",
+        },
+      },
+      /*  lg: {
+        h: "1100",
+        minW: "1100",
+        textStyle: "md",
+        px: "500",
+        gap: "300",
+        _icon: {
+          width: "500",
+          height: "500",
+        },
+      }, */
+      /*  xl: {
+        h: "1200",
+        minW: "1200",
+        textStyle: "md",
+        px: "500",
+        gap: "250",
+        _icon: {
+          width: "500",
+          height: "500",
+        },
+      }, */
+      /* "2xl": {
+        h: "1600",
+        minW: "1600",
+        textStyle: "lg",
+        px: "700",
+        gap: "300",
+        _icon: {
+          width: "600",
+          height: "600",
+        },
+      }, */
+    },
+    variant: {
+      solid: {
+        bg: "colorPalette.9",
+        color: "colorPalette.contrast",
+        _hover: {
+          bg: "colorPalette.10",
+        },
+        _expanded: {
+          bg: "colorPalette.10",
+        },
+      },
+      subtle: {
+        bg: "colorPalette.3",
+        color: "colorPalette.11",
+        _hover: {
+          bg: "colorPalette.4",
+        },
+        _expanded: {
+          bg: "colorPalette.4",
+        },
+      },
+      outline: {
+        borderWidth: "1px",
+        borderColor: "colorPalette.7",
+        color: "colorPalette.11",
+        transitionProperty: "background-color, border-color, color",
+        transitionDuration: "moderate",
+        _hover: {
+          bg: "colorPalette.3",
+          borderColor: "colorPalette.8",
+        },
+        _expanded: {
+          bg: "colorPalette.subtle",
+        },
+      },
+      ghost: {
+        color: "colorPalette.11",
+        _hover: {
+          bg: "colorPalette.4",
+        },
+        _expanded: {
+          bg: "colorPalette.4",
+        },
+      },
+      link: {
+        color: "colorPalette.11",
+        _hover: {
+          textDecoration: "underline",
+        },
+      },
+    },
+    tone: {
+      primary: {
+        colorPalette: "primary",
+      },
+      critical: {
+        colorPalette: "error",
+      },
+      neutral: {
+        colorPalette: "neutral",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "subtle",
+  },
+});

package/src/components/button/button.slots.tsx

@@ -0,0 +1,45 @@
+import {
+  type HTMLChakraProps,
+  type RecipeProps,
+  type UnstyledProp,
+  createRecipeContext,
+  defaultSystem,
+} from "@chakra-ui/react";
+import { buttonRecipe } from "./button.recipe";
+import shouldForwardProp from "@emotion/is-prop-valid";
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the button element.
+ */
+interface ButtonRecipeProps extends RecipeProps<"button">, 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.
+ */
+export type ButtonRootProps = HTMLChakraProps<"button", ButtonRecipeProps>;
+
+const { withContext } = createRecipeContext({
+  recipe: buttonRecipe,
+});
+
+/**
+ * Root component that provides the styling context for the Battn component.
+ * Uses Chakra UI's recipe context system for consistent styling across instances.
+ */
+export const ButtonRoot = withContext<HTMLButtonElement, ButtonRootProps>(
+  "button",
+  {
+    defaultProps: {
+      type: "button",
+    },
+    /** make sure the `onPress` properties won't end up as attribute on the rendered DOM element */
+    shouldForwardProp(prop, variantKeys) {
+      const chakraSfp =
+        !variantKeys?.includes(prop) && !defaultSystem.isValidProperty(prop);
+      return shouldForwardProp(prop) && chakraSfp && !prop.includes("onPress");
+    },
+  }
+);

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

@@ -0,0 +1,369 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { Box, Stack } from "@/components";
+import type { ButtonProps } from "./button.types";
+import { userEvent, within, expect, fn } from "@storybook/test";
+import { ArrowRight as DemoIcon } from "@commercetools/nimbus-icons";
+import { createRef, useState } from "react";
+
+const meta: Meta<typeof Button> = {
+  title: "components/Button",
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+const sizes: ButtonProps["size"][] = [
+  //"2xl",
+  //"xl",
+  //"lg",
+  "md",
+  //"sm",
+  "xs",
+  "2xs",
+];
+
+const variants: ButtonProps["variant"][] = [
+  "solid",
+  "subtle",
+  "outline",
+  "ghost",
+  "link",
+];
+
+const tones: ButtonProps["tone"][] = [
+  "primary",
+  "neutral",
+  "critical",
+] as const;
+
+export const Base: Story = {
+  args: {
+    children: "Button",
+    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);
+    });
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Disabled Button",
+    isDisabled: true,
+    onPress: fn(),
+
+    ["data-testid"]: "test",
+  },
+  play: async ({ canvasElement, step, args }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("test");
+
+    await step("Can not be clicked", async () => {
+      await userEvent.click(button);
+      await userEvent.click(button);
+      await expect(args.onPress).toHaveBeenCalledTimes(0);
+    });
+
+    await step("Can not be focused", async () => {
+      await userEvent.tab();
+      await expect(button).not.toHaveFocus();
+    });
+  },
+};
+
+export const AsLink: Story = {
+  args: {
+    children: "Link disguised as Button",
+    as: "a",
+    href: "/",
+    ["data-testid"]: "test",
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const link = canvas.getByTestId("test");
+
+    await step("Uses an <a> element", async () => {
+      await expect(link.tagName).toBe("A");
+    });
+  },
+};
+
+export const WithAsChild: Story = {
+  args: {
+    children: (
+      <a>
+        <DemoIcon /> I look like a button but am using an a-tag
+      </a>
+    ),
+    asChild: true,
+
+    ["data-testid"]: "test",
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const link = canvas.getByTestId("test");
+
+    await step("Uses an <a> element", async () => {
+      await expect(link.tagName).toBe("A");
+    });
+  },
+};
+
+export const Sizes: Story = {
+  args: {
+    children: "Demo Button",
+  },
+  render: (args) => {
+    return (
+      <Stack direction="row" gap="400" alignItems="center">
+        {sizes.map((size) => (
+          <Button key={size as string} {...args} size={size} />
+        ))}
+      </Stack>
+    );
+  },
+};
+
+export const Variants: Story = {
+  args: {
+    children: "Demo Button",
+  },
+  render: (args) => {
+    return (
+      <Stack direction="row" gap="400" alignItems="center">
+        {variants.map((size) => (
+          <Button key={size as string} {...args} variant={size} />
+        ))}
+      </Stack>
+    );
+  },
+};
+
+export const Tones: Story = {
+  args: {
+    children: "Demo Button",
+  },
+  render: (args) => {
+    return (
+      <Stack>
+        {tones.map((tone) => (
+          <Stack
+            key={tone as string}
+            direction="row"
+            gap="400"
+            alignItems="center"
+          >
+            {variants.map((variant) => (
+              <Button
+                key={variant as string}
+                {...args}
+                variant={variant}
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                tone={tone}
+              />
+            ))}
+          </Stack>
+        ))}
+      </Stack>
+    );
+  },
+};
+
+const buttonRef = createRef<HTMLButtonElement>();
+
+export const WithRef: Story = {
+  args: {
+    children: "Demo Button",
+  },
+  render: (args) => {
+    return (
+      <Button ref={buttonRef} {...args}>
+        {args.children}
+      </Button>
+    );
+  },
+  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);
+    });
+  },
+};
+
+const Spacer = () => <Box flexGrow="1" />;
+export const ComplexIconLayouts: Story = {
+  args: {
+    children: "Demo Button",
+  },
+  render: (args) => {
+    const [dir, setDir] = useState<"ltr" | "rtl">("ltr");
+    return (
+      <>
+        <Button mb="800" onClick={() => setDir(dir === "ltr" ? "rtl" : "ltr")}>
+          Change direction
+        </Button>
+        <Stack
+          direction="column"
+          gap="400"
+          width="1/3"
+          style={{ direction: dir }}
+        >
+          <Button {...args}>
+            <DemoIcon />
+            {args.children}
+          </Button>
+          <Button {...args}>
+            Demo
+            <DemoIcon />
+            Button
+          </Button>
+          <Button {...args}>
+            <Spacer />
+            <DemoIcon />
+            {args.children}
+          </Button>
+          <Button {...args}>
+            <DemoIcon />
+            {args.children}
+            <Spacer />
+          </Button>
+          <Button {...args}>
+            <DemoIcon />
+            <Spacer />
+            {args.children}
+          </Button>
+          <Button {...args}>
+            {args.children}
+            <Spacer />
+            <DemoIcon />
+          </Button>
+        </Stack>
+      </>
+    );
+  },
+};
+
+export const SmokeTest: Story = {
+  args: {
+    children: "Button",
+    onPress: fn(),
+    ["data-testid"]: "test",
+    ["aria-label"]: "test-button",
+  },
+  render: (args) => {
+    return (
+      <Stack gap="1200">
+        {tones.map((tone) => (
+          <Stack key={tone as string} direction="column" gap="400">
+            {sizes.map((size) => (
+              <Stack direction="row" key={size as string}>
+                {variants.map((variant) => (
+                  <Box key={variant as string}>
+                    <Stack direction="column" css={{ "> *": { flex: "none" } }}>
+                      <Box>
+                        <Button
+                          {...args}
+                          variant={variant}
+                          size={size}
+                          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                          tone={tone}
+                        >
+                          <DemoIcon />
+                          {JSON.stringify(variant)} {args.children}
+                          <DemoIcon />
+                        </Button>
+                      </Box>
+                      <Box>
+                        <Button
+                          {...args}
+                          as="a"
+                          variant={variant}
+                          size={size}
+                          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                          tone={tone}
+                          isDisabled
+                        >
+                          <DemoIcon />
+                          {JSON.stringify(variant)} {args.children}
+                          <DemoIcon />
+                        </Button>
+                      </Box>
+                      <Box>
+                        <Button
+                          {...args}
+                          variant={variant}
+                          size={size}
+                          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                          tone={tone}
+                        >
+                          <DemoIcon />
+                          {JSON.stringify(variant)} {args.children}
+                        </Button>
+                      </Box>
+                      <Box>
+                        <Button
+                          {...args}
+                          variant={variant}
+                          size={size}
+                          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                          tone={tone}
+                        >
+                          {JSON.stringify(variant)} {args.children}
+                          <DemoIcon />
+                        </Button>
+                      </Box>
+                    </Stack>
+                  </Box>
+                ))}
+              </Stack>
+            ))}
+          </Stack>
+        ))}
+      </Stack>
+    );
+  },
+};

package/src/components/button/button.tsx

@@ -0,0 +1,37 @@
+import { forwardRef, useRef } from "react";
+import { useButton, useObjectRef, mergeProps } from "react-aria";
+import { mergeRefs } from "@chakra-ui/react";
+import { ButtonRoot } from "./button.slots.tsx";
+import type { ButtonProps } from "./button.types.ts";
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, forwardedRef) => {
+    const { as, asChild, children, ...rest } = props;
+
+    // create a local ref (because the consumer may not provide a forwardedRef)
+    const localRef = useRef<HTMLButtonElement>(null);
+    // merge the local ref with a potentially forwarded ref
+    const ref = useObjectRef(mergeRefs(localRef, forwardedRef));
+
+    // if asChild is set, for react-aria to add the button-role, the elementType
+    // has to be manually set to something else than button
+    const elementType = as || (asChild ? "a" : "button") || "button";
+
+    const { buttonProps } = useButton(
+      {
+        ...rest,
+        elementType,
+      },
+      ref
+    );
+
+    return (
+      <ButtonRoot {...mergeProps(rest, buttonProps, { as, asChild, ref })}>
+        {children}
+      </ButtonRoot>
+    );
+  }
+);
+
+// Manually assign a displayName for debugging purposes
+Button.displayName = "Button";

package/src/components/button/button.types.ts

@@ -0,0 +1,14 @@
+import type { ButtonRootProps } from "./button.slots.tsx";
+import type { AriaButtonProps } from "react-aria";
+
+/** combine chakra-button props with aria-button props */
+type FunctionalButtonProps = ButtonRootProps &
+  AriaButtonProps & {
+    [key: `data-${string}`]: unknown;
+  };
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ButtonProps extends FunctionalButtonProps {
+  // TODO: evaluate if we should require setting a tone
+  // tone: FunctionalButtonProps["tone"];
+}

package/src/components/button/index.ts

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