@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

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";

package/src/components/card/card.mdx

@@ -1,92 +0,0 @@
----
-id: Components-Card
-title: Card
-description: A versatile bordered container for grouping related content
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Card
-tags:
-  - component
----
-
-# Card
-
-A versatile bordered container for grouping related content
-
-## Basic Usage
-
-[Explain the basic usage / usecase of the component].
-
-```jsx-live
-const App = () => <Card>I am Card!</Card>
-```
-
-
-### Sizes
-
-Available sizes.
-
-```jsx-live
-const App = () => {
-
-  const sizes = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs'];
-
-  return (
-    <Stack direction="horizontal" alignItems="center">
-      {sizes.map(size => (
-        <Card key={size} size={size}>'{size}' Card</Card>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Variants
-
-Available variants.
-
-```jsx-live
-const App = () => {
-
-  const variants = ['solid', 'subtle', 'outline', 'ghost', 'plain'];
-
-  return (
-    <Stack direction="horizontal">
-      {variants.map(variant => (
-        <Card key={variant} variant={variant}>'{variant}' Card</Card>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Colors
-
-[Explain usage with different colors/semantics.]
-
-```jsx-live
-const App = () => {
-  const variants = ["solid", "subtle", "outline", "ghost", "link", "plain"];
-  const colors = ["neutral", "primary", "info", "success", "danger", "error"];
-
-  return (
-    <Stack>
-      {colors.map((color) => (
-        <Stack key={color} direction="horizontal">
-          {variants.map((variant) => (
-            <Card colorPalette={color} key={variant} variant={variant}>
-              '{variant}' Card
-            </Card>
-          ))}
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-```
-
-## Props
-
-<PropTable id="Card" />

package/src/components/card/card.recipe.tsx

@@ -1,71 +0,0 @@
-import { defineSlotRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the Card component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const cardRecipe = defineSlotRecipe({
-  slots: ["root", "header", "content"],
-
-  className: "nimbus-card",
-
-  base: {
-    root: {
-      colorPalette: "slate",
-      display: "inline-flex",
-      alignItems: "flex-start",
-      borderRadius: "300",
-      focusVisibleRing: "outside",
-    },
-  },
-
-  variants: {
-    cardPadding: {
-      sm: {
-        root: {
-          padding: "200",
-        },
-      },
-      md: {
-        root: {
-          padding: "400",
-        },
-      },
-      lg: {
-        root: {
-          padding: "600",
-        },
-      },
-    },
-
-    borderStyle: {
-      none: {},
-      outlined: {
-        root: {
-          border: "solid-25",
-          borderColor: "colorPalette.3",
-        },
-      },
-    },
-    elevation: {
-      none: {},
-      elevated: {
-        root: {
-          shadow: "1",
-        },
-      },
-    },
-    backgroundStyle: {
-      default: {
-        root: {
-          backgroundColor: "colorPalette.contrast",
-        },
-      },
-      muted: {
-        root: {
-          backgroundColor: "colorPalette.2",
-        },
-      },
-    },
-  },
-});

package/src/components/card/card.slots.tsx

@@ -1,50 +0,0 @@
-import {
-  type HTMLChakraProps,
-  type RecipeProps,
-  type UnstyledProp,
-  createSlotRecipeContext,
-} from "@chakra-ui/react";
-
-import { cardRecipe } from "./card.recipe";
-
-/**
- * Base recipe props interface that combines Chakra UI's recipe props
- * with the unstyled prop option for the div element.
- */
-interface CardRecipeProps 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.
- */
-export interface CardRootProps
-  extends HTMLChakraProps<"div", CardRecipeProps> {}
-
-export interface CardHeaderProps
-  extends HTMLChakraProps<"div", CardRecipeProps> {}
-
-export interface CardContentProps
-  extends HTMLChakraProps<"div", CardRecipeProps> {}
-
-const { withProvider, withContext } = createSlotRecipeContext({
-  recipe: cardRecipe,
-});
-
-/**
- * Root component that provides the styling context for the Card component.
- * Uses Chakra UI's recipe context system for consistent styling across instances.
- */
-export const CardRoot = withProvider<HTMLDivElement, CardRootProps>(
-  "div",
-  "root"
-);
-
-export const CardHeader = withContext<HTMLDivElement, CardHeaderProps>(
-  "div",
-  "header"
-);
-export const CardContent = withContext<HTMLDivElement, CardContentProps>(
-  "div",
-  "content"
-);