@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

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

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

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

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

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

package/src/components/index.ts

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

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

package/src/components/input/input.mdx

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

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

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

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

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

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

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

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

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

package/src/components/kbd/kbd.mdx

@@ -1,18 +0,0 @@
----
-id: Kbd
-title: Kbd
-description: marks a string as keyboard input
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Typography
-  - Kbd
-tags:
-  - keyboard
-  - key
----
-
-# Kbd
-
-Add description later.

package/src/components/kbd/kbd.recipe.ts

@@ -1,57 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-export const kbdRecipe = defineRecipe({
-  className: "nimbus-kbd",
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    fontWeight: "medium",
-    fontFamily: "mono",
-    flexShrink: "0",
-    whiteSpace: "nowrap",
-    wordSpacing: "-0.5em",
-    userSelect: "none",
-    px: "100",
-    borderRadius: "100",
-  },
-  variants: {
-    variant: {
-      raised: {
-        bg: "colorPalette.subtle",
-        color: "colorPalette.fg",
-        borderWidth: "1px",
-        borderBottomWidth: "2px",
-        borderColor: "colorPalette.muted",
-      },
-      outline: {
-        borderWidth: "1px",
-        color: "colorPalette.fg",
-      },
-      subtle: {
-        bg: "colorPalette.muted",
-        color: "colorPalette.fg",
-      },
-      plain: {
-        color: "colorPalette.fg",
-      },
-    },
-    size: {
-      sm: {
-        textStyle: "xs",
-        height: "450",
-      },
-      md: {
-        textStyle: "sm",
-        height: "500",
-      },
-      lg: {
-        textStyle: "md",
-        height: "600",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "raised",
-  },
-});

package/src/components/kbd/kbd.tsx

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

package/src/components/link/index.ts

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

package/src/components/link/link.mdx

@@ -1,77 +0,0 @@
----
-id: Components-link
-title: link
-description: To allow a user to navigate to a different page or resource
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Navigation
-  - link
-tags:
-  - component
-figmaLink: >-
-  https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=384-5726&m=dev
----
-
-# Link
-
-Allows a user to navigate to a different page or resource.
-
-## Basic Usage
-
-If unconfigured it will default to a neutral state. It is important to configure
-the Link properly to ensure it displays as intended.
-
-```jsx-live
-const App = () => <Link href="#">I am Link!</Link>
-```
-
-### Sizes
-
-Available sizes.
-
-```jsx-live
-const App = () => {
-
-  const sizes = ['md', 'sm', 'xs'].reverse();
-
-  return (
-    <Stack direction="horizontal" alignItems="center">
-      {sizes.map(size => (
-        <Link key={size} size={size}>'{size}' Link</Link>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Colors
-
-The Link component will default to it's surrounding context for color. You can
-also specify a color directly.
-
-```jsx-live
-const App = () => {
-  const sizes = ['md', 'sm', 'xs'].reverse();
-  const colors = ["primary", "inherit"];
-
-  return (
-    <Stack>
-      {colors.map((color) => (
-        <Stack key={color} direction="horizontal">
-          {sizes.map((size) => (
-            <Link fontColor={color} key={size} size={size}>
-              '{size}' Link w/ color '{color}'
-            </Link>
-          ))}
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-```
-
-## Props
-
-<PropTable id="Link" />

package/src/components/link/link.recipe.ts

@@ -1,52 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the Link component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const linkRecipe = defineRecipe({
-  className: "nimbus-link",
-  // Base styles applied to all instances of the component
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    color: "colorPalette.11",
-    borderRadius: "100",
-    focusVisibleRing: "outside",
-    bg: "transparent",
-    outline: "none",
-    cursor: "pointer",
-    textDecoration: "underline",
-    textUnderlineOffset: "3px",
-    _hover: {
-      textDecorationThickness: "12%",
-    },
-  },
-  // Available variants for customizing the component's appearance
-  variants: {
-    // Size variants from smallest to largest
-    size: {
-      xs: {
-        fontSize: "300",
-        lineHeight: "450",
-      },
-      sm: {
-        fontSize: "350",
-        lineHeight: "500",
-      },
-      md: {
-        fontSize: "400",
-        lineHeight: "600",
-      },
-    },
-    // style variants
-    fontColor: {
-      primary: {
-        color: "primary",
-      },
-      inherit: {
-        color: "inherit",
-      },
-    },
-  },
-});