@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

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

package/src/components/loading-spinner/loading-spinner.mdx

@@ -1,92 +0,0 @@
----
-id: Components-LoadingSpinner
-title: LoadingSpinner
-description: Indicates ongoing processes or loading states
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - LoadingSpinner
-tags:
-  - component
----
-
-# LoadingSpinner
-
-Indicates ongoing processes or loading states
-
-## Basic Usage
-
-[Explain the basic usage / usecase of the component].
-
-```jsx-live
-const App = () => <LoadingSpinner>I am LoadingSpinner!</LoadingSpinner>
-```
-
-
-### 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 => (
-        <LoadingSpinner key={size} size={size}>'{size}' LoadingSpinner</LoadingSpinner>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Variants
-
-Available variants.
-
-```jsx-live
-const App = () => {
-
-  const variants = ['solid', 'subtle', 'outline', 'ghost', 'plain'];
-
-  return (
-    <Stack direction="horizontal">
-      {variants.map(variant => (
-        <LoadingSpinner key={variant} variant={variant}>'{variant}' LoadingSpinner</LoadingSpinner>
-      ))}
-    </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) => (
-            <LoadingSpinner colorPalette={color} key={variant} variant={variant}>
-              '{variant}' LoadingSpinner
-            </LoadingSpinner>
-          ))}
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-```
-
-## Props
-
-<PropTable id="LoadingSpinner" />

package/src/components/loading-spinner/loading-spinner.recipe.tsx

@@ -1,70 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the LoadingSpinner component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const loadingSpinnerRecipe = defineRecipe({
-  className: "nimbus-loading-spinner",
-
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    "& svg": {
-      overflow: "visible",
-      // This proportionally scales the spinner to fit the container while also scaling padding
-      transform: "scale(calc(1 - 2/12))",
-    },
-    "& svg [data-svg-path='spinner-pointer']": {
-      stroke: "colorPalette.10",
-      animationName: "spin",
-      animationDuration: "0.5s",
-      animationTimingFunction: "linear",
-      animationIterationCount: "infinite",
-      transformOrigin: "center center 0",
-    },
-    "& svg [data-svg-path='spinner-circle']": {
-      stroke: "colorPalette.5",
-    },
-  },
-
-  variants: {
-    size: {
-      "2xs": {
-        width: "350",
-        height: "350",
-      },
-      xs: {
-        width: "500",
-        height: "500",
-      },
-      sm: {
-        width: "600",
-        height: "600",
-      },
-      md: {
-        width: "800",
-        height: "800",
-      },
-      lg: {
-        width: "1000",
-        height: "1000",
-      },
-    },
-
-    tone: {
-      primary: {
-        colorPalette: "ctvioletAlpha",
-      },
-      white: {
-        colorPalette: "whiteAlpha",
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: "sm",
-    tone: "primary",
-  },
-});

package/src/components/loading-spinner/loading-spinner.slots.tsx

@@ -1,38 +0,0 @@
-import {
-  type HTMLChakraProps,
-  type RecipeProps,
-  type UnstyledProp,
-  createRecipeContext,
-} from "@chakra-ui/react";
-
-import { loadingSpinnerRecipe } from "./loading-spinner.recipe";
-
-/**
- * Base recipe props interface that combines Chakra UI's recipe props
- * with the unstyled prop option for the div element.
- */
-export interface LoadingSpinnerRecipeProps
-  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 type LoadingSpinnerRootProps = Omit<
-  HTMLChakraProps<"div", LoadingSpinnerRecipeProps>,
-  // We want to omit polymorphic props from the root props since they are not used internally.
-  "as" | "asChild"
->;
-
-const { withContext } = createRecipeContext({ recipe: loadingSpinnerRecipe });
-
-/**
- * Root component that provides the styling context for the LoadingSpinner component.
- * Uses Chakra UI's recipe context system for consistent styling across instances.
- */
-export const LoadingSpinnerRoot = withContext<
-  HTMLDivElement,
-  LoadingSpinnerRootProps
->("div");