@commercetools/nimbus 0.0.2 → 0.0.3

package/src/components/accordion/components/accordion-group.tsx

@@ -1,27 +0,0 @@
-import React, { forwardRef, type Key } from "react";
-import { AccordionRoot as AccordionRootSlot } from "../accordion.slots";
-import { useDisclosureGroupState } from "react-stately";
-import { useSlotRecipe } from "@chakra-ui/react";
-import type { DisclosureGroupProps } from "../accordion.types";
-import { DisclosureGroupStateContext } from "../accordion-context";
-
-export const AccordionGroup = forwardRef<HTMLDivElement, DisclosureGroupProps>(
-  ({ children, onExpandedChange, ...props }, forwardedRef) => {
-    const state = useDisclosureGroupState({
-      ...props,
-      onExpandedChange: (keys: Set<Key>) => {
-        onExpandedChange?.(keys.size > 0);
-      },
-    });
-    const recipe = useSlotRecipe({ key: "accordion" });
-    const [recipeProps] = recipe.splitVariantProps(props);
-
-    return (
-      <DisclosureGroupStateContext.Provider value={state}>
-        <AccordionRootSlot data-slot="root" ref={forwardedRef} {...recipeProps}>
-          {children}
-        </AccordionRootSlot>
-      </DisclosureGroupStateContext.Provider>
-    );
-  }
-);

package/src/components/accordion/components/accordion-header.tsx

@@ -1,63 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import {
-  AccordionTrigger,
-  AccordionTitle,
-  HeaderRightContent,
-} from "../accordion.slots";
-import { mergeRefs } from "@chakra-ui/react";
-import { Flex } from "@/components";
-import { KeyboardArrowRight } from "@commercetools/nimbus-icons";
-import type { DisclosureGroupProps } from "../accordion.types";
-import { ItemContext } from "../accordion-context";
-
-export const AccordionHeader = forwardRef<
-  HTMLButtonElement,
-  DisclosureGroupProps
->(({ children }, ref) => {
-  const context = useContext(ItemContext);
-  if (!context) {
-    throw new Error("Accordion.Header must be used within Accordion.Item");
-  }
-
-  // Extract HeaderRightContent if present
-  const headerContent = React.Children.toArray(children).reduce<{
-    main: React.ReactNode[];
-    rightContent: React.ReactNode[];
-  }>(
-    (acc, child) => {
-      if (React.isValidElement(child) && child.type === HeaderRightContent) {
-        acc.rightContent.push(child);
-      } else {
-        acc.main.push(child);
-      }
-      return acc;
-    },
-    { main: [], rightContent: [] }
-  );
-
-  return (
-    <Flex
-      justifyContent="space-between"
-      alignItems="center"
-      borderBottom="solid-25"
-      borderColor="neutral.4"
-    >
-      <AccordionTrigger
-        ref={mergeRefs(context.triggerRef, ref)}
-        {...context.buttonProps}
-        data-slot="trigger"
-        outline={context.isFocusVisible ? undefined : "none"}
-      >
-        <KeyboardArrowRight />
-        <AccordionTitle data-slot="accordionTitle">
-          {headerContent.main}
-        </AccordionTitle>
-      </AccordionTrigger>
-      {headerContent.rightContent.length > 0 && (
-        <HeaderRightContent data-slot="headerContentRight">
-          {headerContent.rightContent}
-        </HeaderRightContent>
-      )}
-    </Flex>
-  );
-});

package/src/components/accordion/components/accordion-item.tsx

@@ -1,87 +0,0 @@
-import React, { forwardRef, useContext, useRef } from "react";
-import { AccordionDisclosure } from "../accordion.slots";
-import { useDisclosureState } from "react-stately";
-import {
-  useDisclosure,
-  mergeProps,
-  useButton,
-  useFocusRing,
-  useId,
-} from "react-aria";
-import type { DisclosureItemProps } from "../accordion.types";
-// Import the contexts from the shared file
-import { ItemContext, DisclosureGroupStateContext } from "../accordion-context";
-
-export const AccordionItem = forwardRef<HTMLDivElement, DisclosureItemProps>(
-  (
-    { children, id, isDisabled, isExpanded, onExpandedChange, value },
-    forwardedRef
-  ) => {
-    const defaultId = useId();
-    const itemId = id || defaultId;
-    const itemValue = value || itemId;
-
-    // Get group state from context
-    const groupState = useContext(DisclosureGroupStateContext);
-
-    // Determine if expanded based on group state or prop
-    const expanded = groupState
-      ? groupState.expandedKeys.has(itemValue)
-      : isExpanded;
-
-    // Create disclosure state
-    const state = useDisclosureState({
-      isExpanded: expanded,
-      onExpandedChange: (isExpanded) => {
-        if (groupState) {
-          groupState.toggleKey(itemValue);
-        }
-        onExpandedChange?.(isExpanded);
-      },
-    });
-
-    // Create refs and get props
-    const panelRef = useRef<HTMLDivElement>(null);
-    const triggerRef = useRef<HTMLButtonElement>(null);
-    const disabled = isDisabled || groupState?.isDisabled || false;
-
-    const { buttonProps, panelProps } = useDisclosure(
-      {
-        isExpanded: state.isExpanded,
-        isDisabled: disabled,
-      },
-      state,
-      panelRef
-    );
-
-    const { buttonProps: finalButtonProps } = useButton(
-      buttonProps,
-      triggerRef
-    );
-    const { focusProps, isFocusVisible } = useFocusRing();
-
-    // Create context value for Header and Content
-    const contextValue = {
-      isExpanded: state.isExpanded,
-      triggerRef,
-      panelRef,
-      buttonProps: mergeProps(finalButtonProps, focusProps),
-      panelProps,
-      isFocusVisible,
-    };
-
-    // Using the imported ItemContext
-    return (
-      <ItemContext.Provider value={contextValue}>
-        <AccordionDisclosure
-          data-slot="disclosure"
-          data-value={itemValue}
-          data-expanded={state.isExpanded}
-          ref={forwardedRef}
-        >
-          {children}
-        </AccordionDisclosure>
-      </ItemContext.Provider>
-    );
-  }
-);

package/src/components/accordion/index.ts

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

package/src/components/alert/alert.mdx

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

package/src/components/alert/alert.recipe.tsx

@@ -1,65 +0,0 @@
-import { defineSlotRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the Alert component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const alertRecipe = defineSlotRecipe({
-  slots: ["root", "title", "description", "icon", "actions", "dismissButton"],
-  // Unique class name prefix for the component
-  className: "nimbus-alert",
-
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      display: "inline-flex",
-      flexDirection: "row",
-      gap: "200",
-      width: "100%",
-    },
-    icon: {
-      marginTop: "50",
-      "& svg": {
-        width: "500",
-        height: "500",
-        color: "colorPalette.11",
-      },
-    },
-    title: {
-      color: "colorPalette.11",
-    },
-    description: {
-      color: "colorPalette.11",
-    },
-  },
-
-  variants: {
-    tone: {
-      critical: {
-        root: { colorPalette: "error" },
-      },
-      info: {
-        root: { colorPalette: "info" },
-      },
-      warning: {
-        root: { colorPalette: "amber" },
-      },
-      positive: {
-        root: { colorPalette: "success" },
-      },
-    },
-
-    variant: {
-      flat: {},
-      outlined: {
-        root: {
-          border: "solid-25",
-          borderColor: "colorPalette.5",
-          backgroundColor: "colorPalette.2",
-          padding: "200",
-          borderRadius: "200",
-        },
-      },
-    },
-  },
-});

package/src/components/alert/alert.slots.tsx

@@ -1,46 +0,0 @@
-import { createSlotRecipeContext } from "@chakra-ui/react";
-import { alertRecipe } from "./alert.recipe";
-import type {
-  AlertActionsProps,
-  AlertDescriptionProps,
-  AlertDismissButtonProps,
-  AlertIconProps,
-  AlertRootProps,
-  AlertTitleProps,
-} from "./alert.types";
-
-const { withProvider, withContext } = createSlotRecipeContext({
-  recipe: alertRecipe,
-});
-
-export const AlertRoot = withProvider<HTMLDivElement, AlertRootProps>(
-  "div",
-  "root"
-);
-
-export const AlertTitle = withContext<HTMLDivElement, AlertTitleProps>(
-  "div",
-  "title"
-);
-
-export const AlertDescription = withContext<
-  HTMLDivElement,
-  AlertDescriptionProps
->("div", "description");
-
-export const AlertIcon = withContext<HTMLDivElement, AlertIconProps>(
-  "div",
-  "icon"
-);
-
-export const AlertActions = withContext<HTMLDivElement, AlertActionsProps>(
-  "div",
-  "actions"
-);
-
-// This is a div wrapper for layout placement - note that we expect it to receive `IconButton` props, but we use a `div`.
-// We then forward the consumer props to the interior `IconButton` component.
-export const AlertDismissButton = withContext<
-  HTMLDivElement,
-  AlertDismissButtonProps
->("div", "dismissButton");

package/src/components/alert/alert.stories.tsx

@@ -1,308 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within, expect, fn } from "@storybook/test";
-import { Alert } from "./alert";
-import { Stack } from "./../stack";
-import { Button } from "../button";
-import type { AlertProps } from "./alert.types";
-
-const tones: AlertProps["tone"][] = ["critical", "info", "warning", "positive"];
-const variants: AlertProps["variant"][] = ["flat", "outlined"];
-
-/**
- * Storybook metadata configuration
- * - title: determines the location in the sidebar
- * - component: references the component being documented
- */
-const meta: Meta<typeof Alert.Root> = {
-  title: "components/Alert",
-  component: Alert.Root,
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- * StoryObj provides type checking for our story configurations
- */
-type Story = StoryObj<typeof Alert.Root>;
-
-// Mock function for dismiss button onPress
-const mockOnDismiss = fn();
-
-/**
- * Base story
- * Demonstrates the most basic implementation with all parts.
- * Uses the args pattern for dynamic control panel inputs.
- * Includes interaction tests.
- */
-export const Base: Story = {
-  args: {
-    tone: "positive",
-    variant: "outlined",
-    "data-testid": "base-alert",
-    children: (
-      <>
-        <Alert.Title>Base Alert Title</Alert.Title>
-        <Alert.Description>Base Alert Description</Alert.Description>
-        <Alert.Actions>
-          <Stack direction="row" gap="8px" alignItems="center">
-            <Button variant="outline">Action 1</Button>
-            <Button variant="outline">Action 2</Button>
-          </Stack>
-        </Alert.Actions>
-        <Alert.DismissButton
-          onPress={mockOnDismiss}
-          data-testid="dismiss-button"
-        />
-      </>
-    ),
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const alertRoot = canvas.getByTestId("base-alert");
-    const dismissButton = await canvas.findByTestId("dismiss-button");
-    // Find the icon inside the button
-    const dismissIcon = within(dismissButton).getByRole("img", {
-      hidden: true,
-    });
-
-    await step("Renders all parts correctly", async () => {
-      await expect(alertRoot).toBeInTheDocument();
-      await expect(alertRoot).toHaveAttribute("role", "alert");
-      await expect(canvas.getByText("Base Alert Title")).toBeInTheDocument();
-      await expect(
-        canvas.getByText("Base Alert Description")
-      ).toBeInTheDocument();
-      await expect(canvas.getByText("Action 1")).toBeInTheDocument();
-      await expect(canvas.getByText("Action 2")).toBeInTheDocument();
-      await expect(dismissButton).toBeInTheDocument();
-      await expect(dismissButton).toHaveAttribute("aria-label", "Dismiss"); // Default label from IconButton
-      await expect(dismissIcon).toBeInTheDocument(); // Check if the clear icon is rendered
-    });
-
-    await step("Dismiss button is clickable and calls onPress", async () => {
-      await userEvent.click(dismissButton);
-      await expect(mockOnDismiss).toHaveBeenCalledTimes(1);
-    });
-  },
-};
-
-export const TonesShowcase: Story = {
-  name: "Showcase: Tones",
-  render: () => (
-    <Stack direction="column" gap="400" alignItems="flex-start">
-      {tones.map((tone) => (
-        <Alert.Root
-          key={`alert-${tone as string}`}
-          tone={tone}
-          variant="outlined"
-        >
-          <Alert.Title>Alert Title ({tone as string})</Alert.Title>
-          <Alert.Description>Alert Description</Alert.Description>
-          <Alert.Actions>
-            <Stack direction="row" gap="8px" alignItems="center">
-              <Button variant="outline">Button</Button>
-            </Stack>
-          </Alert.Actions>
-          <Alert.DismissButton
-            onPress={() => alert(`Dismissed ${tone as string}`)}
-          />
-        </Alert.Root>
-      ))}
-    </Stack>
-  ),
-};
-
-export const VariantsShowcase: Story = {
-  name: "Showcase: Variants",
-  render: () => (
-    <Stack direction="column" gap="400" alignItems="flex-start">
-      {tones.map((tone) => (
-        <Stack
-          key={`stack-${tone as string}`}
-          direction="row"
-          gap="400"
-          width="100%"
-        >
-          {variants.map((variant) => (
-            <Alert.Root
-              key={`alert-${tone as string}-${variant as string}`}
-              tone={tone}
-              variant={variant}
-            >
-              <Alert.Title>
-                {tone as string} / {variant as string}
-              </Alert.Title>
-              <Alert.Description>Desc.</Alert.Description>
-              <Alert.DismissButton onPress={() => alert("Dismissed")} />
-            </Alert.Root>
-          ))}
-        </Stack>
-      ))}
-    </Stack>
-  ),
-};
-
-export const TitleOnly: Story = {
-  name: "Composition: Title Only",
-  args: {
-    tone: "positive",
-    variant: "outlined",
-    "data-testid": "alert-title-only",
-    children: (
-      <>
-        <Alert.Title>Title Only Alert</Alert.Title>
-        {/* Intentionally omit Description, Actions, DismissButton */}
-      </>
-    ),
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const alert = canvas.getByTestId("alert-title-only");
-
-    await step("Renders only the title", async () => {
-      const title = await within(alert).findByText("Title Only Alert");
-      expect(title).toBeInTheDocument();
-    });
-
-    await step("Does not render other parts", async () => {
-      await expect(
-        within(alert).queryByText(/Description/i)
-      ).not.toBeInTheDocument();
-      await expect(
-        within(alert).queryByRole("button") // Check for any button
-      ).not.toBeInTheDocument();
-    });
-  },
-};
-
-export const DescriptionOnly: Story = {
-  name: "Composition: Description Only",
-  args: {
-    tone: "info",
-    variant: "flat",
-    "data-testid": "alert-desc-only",
-    children: (
-      <>
-        <Alert.Description>Description Only Alert</Alert.Description>
-        {/* Intentionally omit Title, Actions, DismissButton */}
-      </>
-    ),
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const alert = canvas.getByTestId("alert-desc-only");
-
-    await step("Renders only the description", async () => {
-      const title = await within(alert).findByText("Description Only Alert");
-      expect(title).toBeInTheDocument();
-    });
-
-    await step("Does not render other parts", async () => {
-      await expect(within(alert).queryByText(/Title/i)).not.toBeInTheDocument();
-      await expect(
-        within(alert).queryByRole("button") // Check for any button
-      ).not.toBeInTheDocument();
-    });
-  },
-};
-
-export const TitleAndActions: Story = {
-  name: "Composition: Title and Actions",
-  args: {
-    tone: "warning",
-    variant: "outlined",
-    "data-testid": "alert-title-actions",
-    children: (
-      <>
-        <Alert.Title>Title and Actions only</Alert.Title>
-        <Alert.Actions>
-          <Stack direction="row" gap="8px" alignItems="center">
-            <Button variant="outline">Action A</Button>
-            <Button variant="ghost">Action B</Button>
-          </Stack>
-        </Alert.Actions>
-        {/* Intentionally omit Description, DismissButton */}
-      </>
-    ),
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const alert = canvas.getByTestId("alert-title-actions");
-
-    await step("Renders title and action buttons", async () => {
-      const title = await within(alert).findByText("Title and Actions only");
-      expect(title).toBeInTheDocument();
-
-      await expect(
-        within(alert).getByRole("button", { name: "Action A" })
-      ).toBeInTheDocument();
-      await expect(
-        within(alert).getByRole("button", { name: "Action B" })
-      ).toBeInTheDocument();
-    });
-
-    await step("Does not render description or dismiss button", async () => {
-      await expect(
-        within(alert).queryByText(/Description/i)
-      ).not.toBeInTheDocument();
-      await expect(
-        within(alert).queryByRole("button", { name: /Dismiss/i })
-      ).not.toBeInTheDocument();
-    });
-  },
-};
-
-const mockDismissNoActions = fn();
-export const NoActions: Story = {
-  name: "Composition: Title, Description, Dismiss (No Actions)",
-  args: {
-    tone: "positive",
-    variant: "outlined",
-    "data-testid": "alert-no-actions",
-    children: (
-      <>
-        <Alert.Title>Complete Alert (No Actions)</Alert.Title>
-        <Alert.Description>
-          Title and description are present.
-        </Alert.Description>
-        {/* Intentionally omit Actions */}
-        <Alert.DismissButton
-          onPress={mockDismissNoActions}
-          data-testid="dismiss-no-actions-button"
-        />
-      </>
-    ),
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const alert = canvas.getByTestId("alert-no-actions");
-    const dismissButton = await within(alert).findByTestId(
-      "dismiss-no-actions-button"
-    );
-
-    await step("Renders title, description, and dismiss button", async () => {
-      await expect(
-        within(alert).getByText("Complete Alert (No Actions)")
-      ).toBeInTheDocument();
-      await expect(
-        within(alert).getByText("Title and description are present.")
-      ).toBeInTheDocument();
-      await expect(dismissButton).toBeInTheDocument();
-      await expect(dismissButton).toHaveAttribute("aria-label", "Dismiss");
-    });
-
-    await step("Does not render action buttons", async () => {
-      // Check specifically for non-dismiss buttons
-      const actionButtons = within(alert)
-        .queryAllByRole("button")
-        .filter((btn) => btn !== dismissButton);
-      await expect(actionButtons.length).toBe(0);
-    });
-
-    await step("Dismiss button is clickable and calls onPress", async () => {
-      await userEvent.click(dismissButton);
-      await expect(mockDismissNoActions).toHaveBeenCalledTimes(1);
-    });
-  },
-};