@commercetools/nimbus 0.0.1 → 0.0.3

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",
-      },
-    },
-  },
-});

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

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

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

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

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

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

package/src/components/list/list.mdx

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

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

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

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