@commercetools/nimbus 0.0.1 → 0.0.3

package/src/components/badge/badge.recipe.tsx

@@ -1,72 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the Badge component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const badgeRecipe = defineRecipe({
-  className: "nimbus-badge",
-
-  // Base styles applied to all instances of the component
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    borderRadius: "200",
-    justifyContent: "center",
-    whiteSpace: "nowrap",
-    verticalAlign: "middle",
-    py: "25",
-    fontWeight: "500",
-    backgroundColor: "colorPalette.3",
-    color: "colorPalette.11",
-    w: "auto",
-    userSelect: "none",
-    _icon: {
-      flexShrink: "0",
-    },
-  },
-
-  // Available variants for customizing the component's appearance
-  variants: {
-    size: {
-      "2xs": {
-        fontSize: "300",
-        gap: "100",
-        h: "600",
-        lineHeight: "350",
-        px: "200",
-        _icon: {
-          width: "400",
-          height: "400",
-        },
-      },
-      xs: {
-        fontSize: "350",
-        gap: "100",
-        h: "800",
-        lineHeight: "400",
-        px: "300",
-        _icon: {
-          width: "500",
-          height: "500",
-        },
-      },
-      md: {
-        fontSize: "400",
-        gap: "200",
-        h: "1000",
-        lineHeight: "500",
-        px: "400",
-        _icon: {
-          width: "600",
-          height: "600",
-        },
-      },
-    },
-  },
-
-  // Default variant values when not explicitly specified
-  defaultVariants: {
-    size: "md",
-  },
-});

package/src/components/badge/badge.slots.tsx

@@ -1,8 +0,0 @@
-import { createRecipeContext } from "@chakra-ui/react";
-
-import { badgeRecipe } from "./badge.recipe";
-import type { BadgeRootProps } from "./badge.types";
-
-const { withContext } = createRecipeContext({ recipe: badgeRecipe });
-
-export const BadgeRoot = withContext<HTMLSpanElement, BadgeRootProps>("span");

package/src/components/badge/badge.stories.tsx

@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Badge } from "./badge";
-import { Stack } from "./../stack";
-import type { BadgeProps } from "./badge.types";
-import { SentimentSatisfied as DemoIcon } from "@commercetools/nimbus-icons";
-import { within, expect } from "@storybook/test";
-
-const sizes: BadgeProps["size"][] = ["2xs", "xs", "md"];
-const colors: Array<
-  "amber" | "blue" | "grass" | "slate" | "tomato" | "primary"
-> = ["primary", "tomato", "grass", "amber", "blue", "slate"];
-
-/**
- * Storybook metadata configuration
- * - title: determines the location in the sidebar
- * - component: references the component being documented
- */
-const meta: Meta<typeof Badge> = {
-  title: "components/Badge",
-  component: Badge,
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- * StoryObj provides type checking for our story configurations
- */
-type Story = StoryObj<typeof Badge>;
-/**
- * Base story
- * Demonstrates the most basic implementation
- * Uses the args pattern for dynamic control panel inputs
- */
-
-export const Base: Story = {
-  args: {
-    children: "Demo Badge",
-    size: "md",
-    colorPalette: "grass",
-    ["data-testid"]: "badge-test",
-    ["aria-label"]: "badge",
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const link = canvas.getByTestId("badge-test");
-
-    await step("Uses a <span> element by default", async () => {
-      await expect(link.tagName).toBe("SPAN");
-    });
-    await step("Forwards data- & aria-attributes", async () => {
-      await expect(link).toHaveAttribute("data-testid", "badge-test");
-      await expect(link).toHaveAttribute("aria-label", "badge");
-    });
-
-    await step("Renders children", async () => {
-      await expect(link).toHaveTextContent("Demo Badge");
-    });
-  },
-};
-
-/**
- * Showcase Sizes
- */
-export const Sizes: Story = {
-  args: {},
-  render: (args) => {
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        {sizes.map((size) => (
-          <Badge key={size as string} {...args} size={size}>
-            {String(size)}
-          </Badge>
-        ))}
-      </Stack>
-    );
-  },
-};
-
-/**
- * Showcase Possible Colors
- */
-export const Colors: Story = {
-  args: {
-    children: "Demo Badge",
-    size: "xs",
-  },
-  render: (args) => {
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        {colors.map((color) => (
-          <Badge key={color as string} {...args} colorPalette={color} />
-        ))}
-      </Stack>
-    );
-  },
-};
-
-/**
- * Showcase Icons
- */
-export const WithIcons: Story = {
-  args: {
-    size: "md",
-  },
-  render: (args) => {
-    const demoText = "Demo Badge";
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        <Badge {...args}>
-          {demoText} <DemoIcon />
-        </Badge>
-
-        <Badge {...args}>
-          <DemoIcon /> {demoText}
-        </Badge>
-
-        <Badge {...args}>
-          <DemoIcon /> {demoText} <DemoIcon />
-        </Badge>
-      </Stack>
-    );
-  },
-};

package/src/components/badge/badge.tsx

@@ -1,35 +0,0 @@
-import { forwardRef, useRef } from "react";
-import { BadgeRoot } from "./badge.slots";
-import type { BadgeProps } from "./badge.types";
-import { mergeRefs } from "@chakra-ui/react";
-import { useObjectRef, mergeProps } from "react-aria";
-/**
- * Badge
- * ============================================================
- * badge
- *
- * Features:
- *
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLSpanElement' 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 Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  (props, forwardedRef) => {
-    const { as, asChild, children, ...rest } = props;
-
-    const localRef = useRef<HTMLSpanElement>(null);
-    const ref = useObjectRef(mergeRefs(localRef, forwardedRef));
-
-    const elementType = as || "span";
-
-    return (
-      <BadgeRoot as={elementType} {...mergeProps(rest, { ref })}>
-        {children}
-      </BadgeRoot>
-    );
-  }
-);

package/src/components/badge/badge.types.tsx

@@ -1,40 +0,0 @@
-import type {
-  RecipeProps,
-  UnstyledProp,
-  HTMLChakraProps,
-  RecipeVariantProps,
-} from "@chakra-ui/react";
-import { badgeRecipe } from "./badge.recipe";
-
-/**
- * Base recipe props interface that combines Chakra UI's recipe props
- * with the unstyled prop option for the span element.
- */
-export interface BadgeRecipeProps extends RecipeProps<"span">, 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 interface BadgeRootProps
-  extends HTMLChakraProps<"span", BadgeRecipeProps> {}
-
-/**
- * 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.
- */
-type BadgeVariantProps = BadgeRootProps &
-  RecipeVariantProps<typeof badgeRecipe> & {
-    [key: `data-${string}`]: string;
-  };
-
-/**
- * Main props interface for the Badge component.
- * Extends BadgeVariantProps to include both root props and variant props,
- * while adding support for React children.
- */
-export interface BadgeProps extends BadgeVariantProps {
-  children?: React.ReactNode;
-}

package/src/components/badge/index.ts

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

package/src/components/bleed/bleed.tsx

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

package/src/components/bleed/index.ts

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

package/src/components/box/box.mdx

@@ -1,115 +0,0 @@
----
-id: Components-Box
-title: Box
-description: A basic layout component that serves as a wrapper or container.
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Layout
-  - Box
-tags:
-  - component
----
-
-# Box
-
-Box is a basic layout component that serves as a wrapper or container. It's
-based on the
-[Chakra UI Box component](https://chakra-ui.com/docs/components/box) and
-supports all style props for rapid UI development.
-
-## Import
-
-```jsx
-import { Box } from "@commercetools/nimbus";
-```
-
-## Usage
-
-### Basic Usage
-
-```jsx-live
-const App = () => (
-  <Box p="100" bg="primary.3">
-    Basic Box
-  </Box>
-);
-```
-
-### As Flex Container
-
-```jsx-live
-const App = () => (
-  <Box display="flex" gap="100">
-    <Box p="100" bg="primary.3">
-      Item 1
-    </Box>
-    <Box p="100" bg="primary.3">
-      Item 2
-    </Box>
-  </Box>
-);
-```
-
-### With Border
-
-```jsx-live
-const App = () => (
-  <Box p="100" border="solid-50" borderColor="primary.3">
-    Box with border
-  </Box>
-);
-```
-
-### With Shadow
-
-```jsx-live
-const App = () => (
-  <Box p="100" boxShadow="6">
-    Box with shadow
-  </Box>
-);
-```
-
-### With asChild
-
-Use the `asChild` prop to apply Box styles to any child element while
-maintaining the child's functionality:
-
-```jsx-live
-const App = () => (
-  <Box p="100" bg="primary.3" asChild>
-    <button onClick={() => alert("Clicked!")}>
-      I am a button with Box styles
-    </button>
-  </Box>
-);
-```
-
-## Props
-
-The Box component accepts all system props from Chakra UI, including:
-
-- Space props (margin, padding)
-- Color props (background, color)
-- Typography props (fontSize, fontWeight)
-- Layout props (width, height, display)
-- Flexbox props
-- Grid props
-- Border props
-- Position props
-- Shadow props
-
-## Accessibility
-
-Box renders a `div` by default but can be changed to any other HTML element
-using the `as` prop.
-
-```jsx-live
-const App = () => (
-  <Box as="section" p="100">
-    Section content
-  </Box>
-);
-```

package/src/components/box/box.stories.tsx

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Box } from "./box";
-
-const meta: Meta<typeof Box> = {
-  title: "Components/Box",
-  component: Box,
-  tags: ["autodocs"],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Box>;
-
-export const Base: Story = {
-  args: {
-    p: "100",
-    bg: "primary.3",
-    children: "Basic Box",
-  },
-};
-
-export const WithBorder: Story = {
-  args: {
-    p: "100",
-    border: "solid-50",
-    borderColor: "primary.3",
-    children: "Box with border",
-  },
-};
-
-export const AsFlexContainer: Story = {
-  args: {
-    display: "grid",
-    children: (
-      <>
-        <Box p="100" bg="primary.3">
-          Item 1
-        </Box>
-        <Box p="100" bg="primary.3">
-          Item 2
-        </Box>
-        <Box p="100" bg="primary.3">
-          Item 3
-        </Box>
-      </>
-    ),
-  },
-};
-
-export const WithShadow: Story = {
-  args: {
-    p: "100",
-    shadow: "6",
-    borderRadius: "100",
-    children: "Box with shadow",
-  },
-};
-
-export const AsChild: Story = {
-  args: {
-    p: "100",
-    bg: "primary.3",
-    color: "primary.11",
-    asChild: true,
-    children: (
-      <button onClick={() => alert("Clicked!")}>
-        Click me! I am a button with Box styles
-      </button>
-    ),
-  },
-};

package/src/components/box/box.tsx

@@ -1,11 +0,0 @@
-import { forwardRef } from "react";
-import { Box as ChakraBox, type HTMLChakraProps } from "@chakra-ui/react";
-export interface BoxProps extends HTMLChakraProps<"div"> {
-  children?: React.ReactNode;
-}
-
-export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
-  return <ChakraBox ref={ref} {...props} />;
-});
-
-Box.displayName = "Box";

package/src/components/box/index.ts

@@ -1 +0,0 @@
-export { Box, type BoxProps } from "./box";

package/src/components/button/button.mdx

@@ -1,169 +0,0 @@
----
-id: Forms-Button
-title: Button
-description: Displays a Button.
-documentState: ReviewedInternal
-documentAudiences: []
-order: 999
-menu:
-  - Components
-  - Inputs
-  - Button
-tags:
-  - document
-figmaLink: >-
-  https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/New-Design-System?node-id=58-132&m=dev
----
-
-# Button
-
-Displays a Button.
-
-## Basic Usage
-
-If unconfigured it will default to a neutral state. It is important to configure
-the Button properly to ensure it displays as intended.
-
-```jsx-live
-const App = () => <Button>I am a Button</Button>
-```
-
-## Events
-
-To handle the differences between mouse-, touch- and keyboard-interactions, the
-`Button` supports `onPress*` events. The misc `onPress*` events (`onPress`,
-`onPressStart`, `onPressEnd`, etc.) provide a more seamless and inclusive user
-experience across different devices and input methods:
-
-```jsx-live
-const App = () => <Button tone="primary" variant="solid" onPress={()=>alert()}>I am accessible</Button>
-```
-
-## Custom DOM-element
-
-The Button component uses the native
-[HTML button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
-by default, but supports rendering as a different tag to the DOM. Use the
-`asChild` property and the tag you want to render as _only_ child.
-
-```jsx-live
-const App = () => (
-  <Button tone="primary" variant="solid" asChild>
-    <a href="http://www.commercetools.com" target="_blank">I am a button in disguise</a>
-  </Button>
-)
-```
-
-## Aria- & Data-Attributes
-
-The Button component supports forwarding `data-*` and `aria-*` attributes. This
-can be useful for tracking tools & a11y.
-
-```jsx-live
-const App = () => <Button tone="primary" variant="solid" data-foo="bar">I can have data-attributes</Button>
-```
-
-## Customizing the look
-
-### Sizes
-
-Buttons come in different sizes, sizing a button is done by setting the `size`
-prop. Setting the size has no effect on the variant or color of the Button.
-
-```jsx-live
-const App = () => {
-
-  const sizes = ['2xs', 'xs', 'md'].reverse();
-
-  return (
-    <Stack direction="horizontal" alignItems="center">
-      {sizes.map(size => (
-        <Button tone="primary" variant="solid" key={size} size={size}>'{size}' Button</Button>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Variants
-
-Look how the buttons change their appearance but not their size. It is important
-that the variant has no effect on the size. Only then it can be guaranteed that
-buttons with different variants can be used and displayed next to each other.
-
-```jsx-live
-const App = () => {
-
-  const variants = ['solid', 'outline', 'ghost', "link"]
-
-  return (
-    <Stack direction="horizontal">
-      {variants.map(variant => (
-        <Button tone="primary" key={variant} variant={variant}>'{variant}' Button</Button>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Tones / Colors
-
-Since the different `variants` operate purely on contrast level differences
-(think: dark & light elements), the `colorPalette` prop can be used to colorize
-the Button.
-
-```jsx-live
-const App = () => {
-  const variants = ["solid", "outline", "ghost", "link"];
-  const colors = ["primary", "critical"];
-
-  return (
-    <Stack>
-      {colors.map((color) => (
-        <Stack key={color} direction="horizontal">
-          {variants.map((variant) => (
-            <Button tone={color} key={variant} variant={variant}>
-              '{variant}' Button
-            </Button>
-          ))}
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-```
-
-### Icons
-
-Simply drop the desired icon into the `Button`:
-
-```jsx-live
-const App = () => {
-  const sizes = ["2xs", "xs", "md"].reverse();
-
-  return (
-    <Stack>
-      {sizes.map((size) => (
-        <Stack key={size} direction="horizontal">
-          <Button size={size} colorPalette="success" variant="solid" startIcon={<Icons.Check />}>
-            <Icons.Check />
-            Yes
-          </Button>
-          <Button size={size} colorPalette="error" variant="solid" startIcon={<Icons.X />}>
-            <Icons.Close />
-            No
-          </Button>
-          <Button size={size} colorPalette="neutral" variant="ghost" endIcon={<Box animation="spin" asChild><Icons.Loader/></Box>}>
-             Maybe
-             <Icons.HelpOutline />
-          </Button>
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-```
-
-## Properties / API
-
-<PropTable id="Button" />