@commercetools/nimbus 0.0.1

package/src/components/kbd/kbd.mdx

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

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

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

package/src/components/link/index.ts

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

package/src/components/link/link.mdx

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

@@ -0,0 +1,52 @@
+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",
+      },
+    },
+  },
+});

package/src/components/link/link.slots.tsx

@@ -0,0 +1,29 @@
+import {
+  type HTMLChakraProps,
+  type RecipeProps,
+  type UnstyledProp,
+  createRecipeContext,
+} from "@chakra-ui/react";
+
+import { linkRecipe } from "./link.recipe";
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the a element.
+ */
+interface LinkRecipeProps extends RecipeProps<"a">, 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 LinkRootProps = HTMLChakraProps<"a", LinkRecipeProps>;
+
+const { withContext } = createRecipeContext({ recipe: linkRecipe });
+
+/**
+ * Root component that provides the styling context for the Link component.
+ * Uses Chakra UI's recipe context system for consistent styling across instances.
+ */
+export const LinkRoot = withContext<HTMLAnchorElement, LinkRootProps>("a");

package/src/components/link/link.stories.tsx

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Link } from "./link";
+import { Box, Stack } from "@/components";
+import type { LinkProps } from "./link.types";
+import { userEvent, within, expect, fn } from "@storybook/test";
+import { createRef } from "react";
+
+const sizes: LinkProps["size"][] = ["xs", "sm", "md"];
+const fontColors: LinkProps["fontColor"][] = ["primary", "inherit"];
+
+/**
+ * The Link component allows a user to navigate to a different page or resource.
+ */
+const meta: Meta<typeof Link> = {
+  title: "components/Link",
+  component: Link,
+};
+
+export default meta;
+
+/**
+ * Story type for TypeScript support
+ * StoryObj provides type checking for our story configurations
+ */
+type Story = StoryObj<typeof Link>;
+
+/**
+ * Base story
+ * Demonstrates the most basic implementation
+ * Uses the args pattern for dynamic control panel inputs
+ */
+export const Base: Story = {
+  args: {
+    children: "Demo Link",
+    onClick: fn(),
+    ["data-testid"]: "link-test",
+    ["aria-label"]: "link-to-somewhere",
+    ["href"]: "#",
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const link = canvas.getByTestId("link-test");
+
+    await step("Uses an <a> element by default", async () => {
+      await expect(link.tagName).toBe("A");
+    });
+
+    await step("Forwards data- & aria-attributes", async () => {
+      await expect(link).toHaveAttribute("data-testid", "link-test");
+      await expect(link).toHaveAttribute("aria-label", "link-to-somewhere");
+    });
+
+    await step("Renders children", async () => {
+      await expect(link).toHaveTextContent("Demo Link");
+    });
+
+    await step("Is focusable with <tab> key", async () => {
+      await userEvent.tab();
+      await expect(link).toHaveFocus();
+    });
+  },
+};
+
+/**
+ * Showcase Sizes
+ */
+export const Sizes: Story = {
+  render: (args) => {
+    return (
+      <Stack direction="row" gap="400" alignItems="center">
+        {sizes.map((size) => (
+          <Link key={size as string} {...args} size={size} />
+        ))}
+      </Stack>
+    );
+  },
+
+  args: {
+    children: "Demo Link",
+  },
+};
+
+/**
+ * Showcase FontColors
+ */
+export const FontColors: Story = {
+  render: (args) => {
+    return (
+      <Box p="400" bg="primary.7">
+        <Stack direction="row" gap="500" alignItems="center">
+          {fontColors.map((color) => (
+            <p key={color as string} style={{ color: "white" }}>
+              This is a {JSON.stringify(color)}{" "}
+              <Link key={color as string} {...args} fontColor={color} /> in
+              action.
+            </p>
+          ))}
+        </Stack>
+      </Box>
+    );
+  },
+
+  args: {
+    children: "Link",
+  },
+};
+
+/**
+ * Showcase asChild
+ */
+export const AsChild: Story = {
+  render: (args) => {
+    return (
+      <Stack direction="row" gap="400" alignItems="center">
+        <Link {...args}>{args.children}</Link>
+      </Stack>
+    );
+  },
+
+  args: {
+    children: <span>I am just a span</span>,
+    asChild: true,
+    ["data-testid"]: "test",
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const link = canvas.getByTestId("test");
+
+    await step("Uses a <span> element", async () => {
+      await expect(link.tagName).toBe("SPAN");
+    });
+
+    await step("Is focusable with <tab> key", async () => {
+      await userEvent.tab();
+      await expect(link).toHaveFocus();
+    });
+  },
+};
+
+/**
+ * Showcase withRef
+ */
+const linkRef = createRef<HTMLAnchorElement>();
+export const WithRef: Story = {
+  args: {
+    children: "Demo Link",
+    ["data-testid"]: "ref-test",
+  },
+  render: (args) => {
+    return (
+      <Link ref={linkRef} {...args}>
+        {args.children}
+      </Link>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("ref-test");
+
+    await step("Does accept ref's", async () => {
+      await expect(linkRef.current).toBe(button);
+    });
+  },
+};
+
+export const withCustomHref: Story = {
+  args: {
+    children: "Demo Link",
+    href: "https://commercetools.com",
+  },
+  render: (args) => {
+    return <Link {...args}>{args.children}</Link>;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const link = canvas.getByText("Demo Link");
+
+    await step("Uses the provided href", async () => {
+      await expect(link).toHaveAttribute("href", "https://commercetools.com");
+    });
+  },
+};
+
+export const SmokeTest: Story = {
+  args: {
+    children: "Demo Link",
+    ["data-testid"]: "smoke-test",
+  },
+  render: (args) => {
+    return (
+      <Stack gap="1200">
+        {fontColors.map((color) => (
+          <Stack key={color as string} direction="row" gap="400">
+            {sizes.map((size) => (
+              <Stack direction="row" key={size as string}>
+                <Link {...args} size={size} fontColor={color} />
+              </Stack>
+            ))}
+          </Stack>
+        ))}
+      </Stack>
+    );
+  },
+};

package/src/components/link/link.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, useRef } from "react";
+import { LinkRoot } from "./link.slots";
+import type { LinkProps } from "./link.types";
+import { useLink, useObjectRef, mergeProps } from "react-aria";
+import { mergeRefs } from "@chakra-ui/react";
+
+/**
+ * Link
+ * ============================================================
+ * To allow a user to navigate to a different page or resource
+ *
+ * Features:
+ *
+ * - allows forwarding refs to the underlying DOM element
+ * - accepts all native html 'HTMLAnchorElement' attributes (including aria- & data-attributes)
+ * - supports 'variants', 'sizes', etc. configured in the recipe
+ * - allows overriding styles by using style-props
+ * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
+ */
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, forwardedRef) => {
+    const { as, asChild, children, ...rest } = props;
+
+    const localRef = useRef<HTMLAnchorElement>(null);
+    const ref = useObjectRef(mergeRefs(localRef, forwardedRef));
+
+    const elementType = (as as string) || (asChild ? "span" : "a") || "a";
+    const { linkProps } = useLink({ ...rest, elementType }, ref);
+
+    return (
+      <LinkRoot {...mergeProps(rest, linkProps, { as, asChild, ref })}>
+        {children}
+      </LinkRoot>
+    );
+  }
+);
+
+Link.displayName = "Link";

package/src/components/link/link.types.tsx

@@ -0,0 +1,26 @@
+import type { LinkRootProps } from "./link.slots";
+import type { RecipeVariantProps } from "@chakra-ui/react";
+import type { AriaLinkOptions } from "react-aria";
+import { linkRecipe } from "./link.recipe";
+
+/**
+ * Combines the root props with Chakra UI's recipe variant props.
+ * This allows the component to accept both structural props from Root
+ * and styling variants from the recipe.
+ *
+ * Differences between LinkRootProps and LinkVariantProps necessitate
+ * the use of Omit and Pick to ensure the correct props are passed
+ */
+type LinkVariantProps = Omit<LinkRootProps, "onFocus" | "onBlur"> &
+  Pick<AriaLinkOptions, "onFocus" | "onBlur"> &
+  RecipeVariantProps<typeof linkRecipe> & {
+    [key: `data-${string}`]: string;
+  };
+/**
+ * Main props interface for the Link component.
+ * Extends LinkVariantProps to include both root props and variant props,
+ * while adding support for React children.
+ */
+export interface LinkProps extends LinkVariantProps {
+  children?: React.ReactNode;
+}

package/src/components/list/index.ts

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

package/src/components/list/list.mdx

@@ -0,0 +1,18 @@
+---
+id: List
+title: List
+description: displays a list
+documentState: InitialDraft
+order: 999
+menu:
+  - Components
+  - Typography
+  - List
+tags:
+  - list
+  - collections
+---
+
+# List
+
+Add description later.

package/src/components/list/list.recipe.ts

@@ -0,0 +1,68 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+export const listSlotRecipe = defineSlotRecipe({
+  className: "chakra-list",
+  slots: ["root", "item", "indicator"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--list-gap)",
+      "& :where(ul, ol)": {
+        marginTop: "var(--list-gap)",
+      },
+    },
+    item: {
+      whiteSpace: "normal",
+      display: "list-item",
+    },
+    indicator: {
+      marginEnd: "200",
+      minHeight: "1lh",
+      flexShrink: 0,
+      display: "inline-block",
+      verticalAlign: "middle",
+    },
+  },
+  variants: {
+    variant: {
+      marker: {
+        root: {
+          listStyle: "revert",
+          listStylePosition: "inside",
+        },
+        item: {
+          _marker: {
+            color: "fg.subtle",
+          },
+        },
+      },
+      plain: {
+        item: {
+          alignItems: "flex-start",
+          display: "inline-flex",
+        },
+      },
+    },
+    align: {
+      center: {
+        item: {
+          alignItems: "center",
+        },
+      },
+      start: {
+        item: {
+          alignItems: "flex-start",
+        },
+      },
+      end: {
+        item: {
+          alignItems: "flex-end",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "marker",
+  },
+});

package/src/components/list/list.tsx

@@ -0,0 +1,9 @@
+import { List } from "@chakra-ui/react";
+
+export type ListRootType = React.ComponentProps<typeof List.Root>;
+export type ListItemType = React.ComponentProps<typeof List.Item>;
+
+const ListRoot = (props: ListRootType) => <List.Root {...props} />;
+const ListItem = (props: ListItemType) => <List.Item {...props} />;
+
+export { List, ListRoot, ListItem };

package/src/components/loading-spinner/index.ts

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