@commercetools/nimbus 0.0.1 → 0.0.3

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

@@ -1,185 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,369 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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