@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

package/src/components/card/card.stories.tsx

@@ -1,175 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Card } from "./card";
-import { Stack } from "./../stack";
-import type { CardProps } from "./card.types";
-import { within, expect, userEvent } from "@storybook/test";
-
-const cardPaddings: CardProps["cardPadding"][] = ["sm", "md", "lg"];
-const elevations: CardProps["elevation"][] = ["none", "elevated"];
-const borderStyles: CardProps["borderStyle"][] = ["none", "outlined"];
-const backgroundStyles: CardProps["backgroundStyle"][] = ["default", "muted"];
-
-const meta: Meta<typeof Card.Root> = {
-  title: "components/Card",
-  component: Card.Root,
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- * StoryObj provides type checking for our story configurations
- */
-type Story = StoryObj<typeof Card.Root>;
-
-/**
- * Base story
- * Demonstrates the most basic implementation
- */
-export const Base: Story = {
-  args: {
-    children: "Demo Card",
-    "data-testid": "test-card",
-    cardPadding: "md",
-    backgroundStyle: "default",
-    borderStyle: "none",
-    elevation: "none",
-  },
-  play: async ({ canvasElement, args, step }) => {
-    const canvas = within(canvasElement);
-    const card = canvas.getByTestId("test-card");
-
-    await step("Renders a <div> by default", async () => {
-      await expect(card.tagName).toBe("DIV");
-    });
-
-    await step("Displays correct content", async () => {
-      await expect(card).toHaveTextContent(args.children as string);
-    });
-
-    await step("Can be focused with the keyboard", async () => {
-      await userEvent.keyboard("{tab}");
-      await expect(card).toHaveFocus();
-    });
-  },
-};
-
-/**
- * Card padding
- */
-export const CardPaddings: Story = {
-  render: (args) => {
-    return (
-      <Stack>
-        {cardPaddings.map((cardPadding) => {
-          return (
-            <Stack direction="row" key={`stack-${cardPadding as string}`}>
-              <Card.Root
-                key={`${cardPadding as string}`}
-                {...args}
-                cardPadding={cardPadding}
-                borderStyle="outlined"
-                backgroundStyle="default"
-                elevation="none"
-              >
-                <Card.Header>
-                  <b>Padding size: {cardPadding as string}</b>
-                </Card.Header>
-                <Card.Content>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  </p>
-                </Card.Content>
-              </Card.Root>
-            </Stack>
-          );
-        })}
-      </Stack>
-    );
-  },
-
-  args: {},
-};
-
-/**
- * Showcase Configurations
- */
-export const Configurations: Story = {
-  render: (args) => {
-    return (
-      <Stack>
-        {borderStyles.map((border) => {
-          return (
-            <Stack direction="row" key={`stack-${border as string}`}>
-              {elevations.map((shadow) => {
-                return backgroundStyles.map((background) => {
-                  return (
-                    <Card.Root
-                      key={`${border as string}-${shadow as string}-${background as string}`}
-                      {...args}
-                      borderStyle={border}
-                      elevation={shadow}
-                      backgroundStyle={background}
-                      cardPadding="md"
-                    />
-                  );
-                });
-              })}
-            </Stack>
-          );
-        })}
-      </Stack>
-    );
-  },
-
-  args: {
-    children: (
-      <>
-        <Card.Header>
-          <b>Card title</b>
-        </Card.Header>
-        <Card.Content>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </Card.Content>
-      </>
-    ),
-  },
-};
-
-/**
- * Without compound components used by the consumer
- */
-export const WithoutCompound: Story = {
-  render: (args) => {
-    return (
-      <Stack>
-        {borderStyles.map((border) => {
-          return (
-            <Stack direction="row" key={`stack-${border as string}`}>
-              {elevations.map((shadow) => {
-                return (
-                  <Card.Root
-                    key={`${border as string}-${shadow as string}`}
-                    {...args}
-                    borderStyle={border}
-                    elevation={shadow}
-                    backgroundStyle="muted"
-                    cardPadding="md"
-                  />
-                );
-              })}
-            </Stack>
-          );
-        })}
-      </Stack>
-    );
-  },
-
-  args: {
-    children: (
-      <div>
-        I'm some other flexible content, outside of the compound component
-      </div>
-    ),
-  },
-};

package/src/components/card/card.tsx

@@ -1,9 +0,0 @@
-import CardRoot from "./components/card.root";
-import CardHeader from "./components/card.header";
-import CardContent from "./components/card.content";
-
-export const Card = {
-  Root: CardRoot,
-  Header: CardHeader,
-  Content: CardContent,
-};

package/src/components/card/card.types.ts

@@ -1,22 +0,0 @@
-import type { CardRootProps } from "./card.slots";
-import type { RecipeVariantProps } from "@chakra-ui/react";
-import { cardRecipe } from "./card.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.
- */
-type CardVariantProps = CardRootProps &
-  RecipeVariantProps<typeof cardRecipe> & {
-    [key: `data-${string}`]: unknown;
-  };
-
-/**
- * Main props interface for the Card component.
- * Extends CardVariantProps to include both root props and variant props,
- * while adding support for React children.
- */
-export interface CardProps extends CardVariantProps {
-  children?: React.ReactNode;
-}

package/src/components/card/components/card.content.tsx

@@ -1,29 +0,0 @@
-import { useContext, useEffect } from "react";
-import {
-  CardContent as CardContentSlot,
-  type CardContentProps,
-} from "../card.slots";
-import { CardContext } from "./card.root";
-
-export const CardContent = ({ children, ...props }: CardContentProps) => {
-  const context = useContext(CardContext);
-
-  useEffect(() => {
-    if (context) {
-      const slotElement = (
-        <CardContentSlot {...props}>{children}</CardContentSlot>
-      );
-      // Register it with the parent
-      context.setContent(slotElement);
-
-      // On unmount, remove it
-      return () => context.setContent(null);
-    }
-  }, [children, props]);
-
-  return null;
-};
-
-CardContent.displayName = "Card.Content";
-
-export default CardContent;

package/src/components/card/components/card.header.tsx

@@ -1,28 +0,0 @@
-import { useContext, useEffect } from "react";
-import {
-  CardHeader as CardHeaderSlot,
-  type CardHeaderProps,
-} from "../card.slots";
-import { CardContext } from "./card.root";
-
-const CardHeader = ({ children, ...props }: CardHeaderProps) => {
-  const context = useContext(CardContext);
-
-  useEffect(() => {
-    if (context) {
-      const slotElement = (
-        <CardHeaderSlot {...props}>{children}</CardHeaderSlot>
-      );
-      // Register it with the parent
-      context.setHeader(slotElement);
-
-      // On unmount, remove it
-      return () => context.setHeader(null);
-    }
-  }, [children, props]);
-
-  return null;
-};
-CardHeader.displayName = "Card.Header";
-
-export default CardHeader;

package/src/components/card/components/card.root.tsx

@@ -1,62 +0,0 @@
-import {
-  createContext,
-  forwardRef,
-  useMemo,
-  useState,
-  type ReactNode,
-} from "react";
-import { CardRoot as CardRootSlot } from "../card.slots";
-import type { CardProps } from "../card.types";
-import { Stack } from "../../stack";
-import { mergeProps, useFocusRing } from "react-aria";
-
-type CardContextValue = {
-  setHeader: (header: React.ReactNode) => void;
-  setContent: (content: React.ReactNode) => void;
-};
-
-export const CardContext = createContext<CardContextValue | undefined>(
-  undefined
-);
-
-const CardRoot = forwardRef<HTMLDivElement, CardProps>(
-  ({ children, ...props }, ref) => {
-    const { isFocused, isFocusVisible, focusProps } = useFocusRing();
-    const [headerNode, setHeader] = useState<ReactNode>(null);
-    const [contentNode, setContent] = useState<ReactNode>(null);
-
-    // Memoize the context value so we don't cause unnecessary re-renders
-    const contextValue = useMemo(
-      () => ({
-        setHeader,
-        setContent,
-      }),
-      [setHeader, setContent]
-    );
-
-    return (
-      <CardContext.Provider value={contextValue}>
-        <CardRootSlot
-          ref={ref}
-          {...mergeProps(props, focusProps)}
-          data-focus={isFocused || undefined}
-          data-focus-visible={isFocusVisible || undefined}
-          tabIndex={0}
-        >
-          {/* Always render them in this order/layout to protect consumers */}
-          <Stack direction="column" gap="200">
-            {headerNode}
-            {contentNode}
-          </Stack>
-
-          {/* Render all consumer sub-components, including our own */}
-          {children}
-        </CardRootSlot>
-      </CardContext.Provider>
-    );
-  }
-);
-
-CardRoot.displayName = "Card.Root";
-
-export default CardRoot;

package/src/components/card/index.ts

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

package/src/components/checkbox/checkbox.mdx

@@ -1,78 +0,0 @@
----
-id: Components-Checkbox
-title: Checkbox
-description: displays a checkbox and an associated label
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Inputs
-  - Checkbox
-tags:
-  - component
----
-
-# Checkbox
-
-displays a checkbox and an associated label
-
-## With label
-
-A checkbox with a visible label.
-
-```jsx-live
-const App = () => <Checkbox>I am a Checkbox</Checkbox>
-```
-
-## Without visible label
-
-A checkbox without a visible label.
-
-```jsx-live
-const App = () => <Checkbox aria-label="I am a Checkbox"/>
-```
-
-## Controlled Checkbox
-
-A checkbox that is controlled by a state.
-
-```jsx-live
-const App = () => {
-
-  const [isSelected, setIsSelected]  = useState(true)
-
-  return (
-   <Checkbox isSelected={isSelected} onChange={(v)=>setIsSelected(v)}>
-     Controlled Checkbox
-   </Checkbox>
-  )
-}
-```
-
-## Disabled Checkbox
-
-A checkbox that is disabled.
-
-```jsx-live
-const App = () => <Checkbox isDisabled>Disabled Checkbox</Checkbox>
-```
-
-## Invalid Checkbox
-
-A checkbox that is marked as invalid.
-
-```jsx-live
-const App = () => <Checkbox isInvalid>Invalid Checkbox</Checkbox>
-```
-
-## Indeterminate Checkbox
-
-A checkbox that is in an indeterminate state.
-
-```jsx-live
-const App = () => <Checkbox isIndeterminate>Indeterminate Checkbox</Checkbox>
-```
-
-## Props
-
-<PropTable id="Checkbox" />

package/src/components/checkbox/checkbox.recipe.tsx

@@ -1,116 +0,0 @@
-import { defineSlotRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the Checkbox component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const checkboxSlotRecipe = defineSlotRecipe({
-  slots: ["root", "label", "indicator"],
-  // Unique class name prefix for the component
-  className: "nimbus-checkbox",
-
-  base: {
-    root: {
-      colorPalette: "primary",
-      display: "inline-flex",
-      gap: "200",
-      alignItems: "center",
-      verticalAlign: "top",
-      minWidth: "600",
-      minHeight: "600",
-
-      ["&[data-disabled='true']"]: {
-        layerStyle: "disabled",
-      },
-    },
-    label: {
-      flexShrink: 0,
-      userSelect: "none",
-      color: "neutral.11",
-
-      ["&[data-invalid='true']"]: {
-        color: "error.11",
-      },
-    },
-    indicator: {
-      position: "relative",
-      display: "flex",
-      flexShrink: 0,
-      alignItems: "center",
-      justifyContent: "center",
-      border: "solid-50",
-      borderRadius: "50",
-      focusRing: "outside",
-      borderColor: "neutral.9",
-      bg: "transparent",
-      color: "neutral.11",
-
-      _icon: {
-        w: "350",
-        h: "350",
-      },
-
-      "&:hover": {
-        borderColor: "neutral.10",
-      },
-
-      ["&[data-invalid='true']"]: {
-        bg: "transparent",
-        borderColor: "error.9",
-        color: "error.11",
-
-        "&:hover": {
-          borderColor: "error.10",
-        },
-      },
-
-      ["&[data-selected='true'], &[data-indeterminate='true']"]: {
-        bg: "colorPalette.9",
-        borderColor: "colorPalette.9",
-        color: "colorPalette.contrast",
-
-        "&:hover": {
-          bg: "colorPalette.10",
-          borderColor: "colorPalette.10",
-        },
-
-        "&[data-invalid='true']": {
-          bg: "error.9",
-          borderColor: "error.9",
-          color: "error.contrast",
-
-          "&:hover": {
-            bg: "error.10",
-            borderColor: "error.10",
-          },
-        },
-      },
-    },
-  },
-  variants: {
-    size: {
-      md: {
-        label: {
-          fontSize: "350",
-          fontWeight: "400",
-          lineHeight: "400",
-        },
-        indicator: {
-          w: "400",
-          h: "400",
-          zIndex: 1,
-          _after: {
-            position: "absolute",
-            content: "''",
-            width: "600",
-            height: "600",
-            zIndex: 0,
-          },
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-  },
-});

package/src/components/checkbox/checkbox.slots.tsx

@@ -1,33 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-import {
-  createSlotRecipeContext,
-  type HTMLChakraProps,
-  type RecipeVariantProps,
-} from "@chakra-ui/react";
-import { checkboxSlotRecipe } from "./checkbox.recipe";
-
-const { withProvider, withContext } = createSlotRecipeContext({
-  key: "checkbox",
-});
-
-export interface CheckboxRootProps
-  extends HTMLChakraProps<
-    "label",
-    RecipeVariantProps<typeof checkboxSlotRecipe>
-  > {}
-export const CheckboxRoot = withProvider<HTMLLabelElement, CheckboxRootProps>(
-  "label",
-  "root"
-);
-
-interface CheckboxLabelProps extends HTMLChakraProps<"span"> {}
-export const CheckboxLabel = withContext<HTMLSpanElement, CheckboxLabelProps>(
-  "span",
-  "label"
-);
-
-interface ChekcboxIndicatorProps extends HTMLChakraProps<"span"> {}
-export const CheckboxIndicator = withContext<
-  HTMLSpanElement,
-  ChekcboxIndicatorProps
->("span", "indicator");