@commercetools/nimbus 0.0.2 → 0.0.3-alpha.3

package/src/components/grid/grid.tsx

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

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

package/src/components/heading/heading.mdx

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

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

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

package/src/components/heading/index.ts

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

package/src/components/highlight/highlight.mdx

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

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

package/src/components/highlight/index.ts

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

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

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

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