@commercetools/nimbus 0.0.1 → 0.0.3

package/src/components/accordion/accordion.mdx

@@ -1,172 +0,0 @@
----
-id: Components-Accordion
-title: Accordion
-description:
-  A component used for organizing contents. This allows users to toggle
-  visibility of the content sections in their individual panels when the
-  panel's header is clicked.
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Accordion
-tags:
-  - component
----
-
-# Accordion
-
-A component used for organizing contents. This allows users to toggle visibility
-of the content sections in their individual panels when the panel's header is
-clicked.
-
-## Basic Usage
-
-```jsx-live
-const App = () => (
-  <Accordion>
-    <Accordion.Header>Test Accordion</Accordion.Header>
-    <Accordion.Content>Test Accordion Content</Accordion.Content>
-  </Accordion>
-)
-```
-
-### Sizes
-
-Accordion come in different sizes, sizing an accordion is done by setting the
-`size` prop.
-
-```jsx-live
-const App = () => {
-
-  const accordionSizes = ["sm", "md"];;
-
-  return (
-   <>
-    {accordionSizes.map((size, index) => (
-        <Accordion key={index} size={size}>
-          <Accordion.Header>{<>{size} size</>}</Accordion.Header>
-          <Accordion.Content>
-            <>{size} size text</>
-          </Accordion.Content>
-        </Accordion>
-      ))}
-    </>
-  )
-}
-```
-
-### With Additional Contents On The Accordion Trigger
-
-The accordion can take in more properties at the trigger button level to allow
-you add more features or actions on the trigger interface. You can add any
-component or additional text of choice; Texts, buttons, toggle botton etc. Do
-this by setting the `additionalTriggerComponent` prop.
-
-```jsx-live
-const App = () => {
-  const items = [
-    { value: "a", title: "First Item", text: "Some value 1..." },
-    { value: "b", title: "Second Item", text: "Some value 2..." },
-    {
-      value: "c",
-      title: "Third Item",
-      text: "Some value 3",
-    },
-  ]
-
-  return (
-    <>
-      {items.map((item, index) => (
-        <Accordion key={index} size={"md"}>
-          <Accordion.Header
-            additionalTriggerComponent={
-              <div style={{ padding: "10px" }}>
-                <Button marginRight="100" tone="primary">
-                  Click me
-                </Button>
-                <Button marginRight="100" tone="neutral">
-                  Click me
-                </Button>
-                <Button marginRight="100" tone="critical">
-                  Click me
-                </Button>
-              </div>
-            }
-          >
-            {item.title}
-          </Accordion.Header>
-          <Accordion.Content>
-            <Flex
-              justifyContent="space-between"
-              alignItems={"center"}
-              borderColor="neutral.4"
-            >
-              <div style={{ marginRight: "100" }}>{item.text}</div>
-            </Flex>
-          </Accordion.Content>
-        </Accordion>
-      ))}
-    </>
-  );
-}
-```
-
-### With A Custom Component In The Accordion Content
-
-To render any component of choice, pass in the custom component as the child of
-the accordion.
-
-```jsx-live
-const App = () => {
-  const items = [
-    { value: "a", title: "First Item", text: "Some value 1..." },
-    { value: "b", title: "Second Item", text: "Some value 2..." },
-    {
-      value: "c",
-      title: "Third Item",
-      text: "Some value 3",
-    },
-  ]
-
-  const AccordionContent = () => {
-  const avatarImg = "https://thispersondoesnotexist.com/ ";
-
-  return (
-    <div style={{ display: "flex", alignItems: "center", padding: "10px" }}>
-      <Avatar src={avatarImg} firstName="Michael" lastName="Douglas" />
-      <Checkbox>Yes?</Checkbox>
-      <Checkbox>No?</Checkbox>
-    </div>
-  );
-};
-
-  return (
-    <>
-      {items.map((item, index) => (
-        <Accordion key={index} size={"md"}>
-          <Accordion.Header
-          >
-            {item.title}
-          </Accordion.Header>
-          <Accordion.Content>
-            <Flex
-              justifyContent="space-between"
-              alignItems={"center"}
-              borderColor="neutral.4"
-            >
-              <div style={{ marginRight: "100" }}>{item.text}</div>
-              <AccordionContent />
-            </Flex>
-          </Accordion.Content>
-        </Accordion>
-      ))}
-    </>
-  );
-}
-
-```
-
-## Props
-
-<PropTable id="Accordion" />

package/src/components/accordion/accordion.recipe.tsx

@@ -1,98 +0,0 @@
-import { defineSlotRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the Accordion component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const accordionSlotRecipe = defineSlotRecipe({
-  slots: [
-    "root",
-    "disclosure",
-    "trigger",
-    "panel",
-    "accordionTitle",
-    "headerContentRight",
-  ],
-  // Unique class name prefix for the component
-  className: "nimbus-accordion",
-
-  base: {
-    root: {
-      width: "100%",
-    },
-    disclosure: {
-      width: "100%",
-    },
-    trigger: {
-      fontSize: "var(--font-size)",
-      focusVisibleRing: "outside",
-      minHeight: "1200",
-      bg: "none",
-      flexGrow: 1,
-      display: "flex",
-      alignItems: "center",
-      gap: "8px",
-      width: "auto",
-      "& svg": {
-        width: "var(--width)",
-        height: "var(--height)",
-        rotate: "0deg",
-        transition: "rotate 200ms",
-      },
-      '&[aria-expanded="true"] svg': {
-        rotate: "90deg",
-      },
-      "&[disabled]": {
-        layerStyle: "disabled",
-      },
-    },
-    panel: {
-      paddingTop: "var(--padding-top)",
-      paddingBottom: "var(--padding-bottom)",
-      paddingLeft: "var(--padding-left)",
-      '&[aria-hidden="true"]': {
-        display: "none",
-      },
-    },
-    accordionTitle: {
-      fontWeight: "700",
-    },
-  },
-
-  variants: {
-    size: {
-      md: {
-        trigger: {
-          "--font-size": "fontSizes.500",
-          "& svg": {
-            "--width": "sizes.600",
-            "--height": "sizes.600",
-          },
-        },
-        panel: {
-          "--padding-top": "spacing.600",
-          "--padding-bottom": "spacing.800",
-          "--padding-left": "spacing.800",
-        },
-      },
-      sm: {
-        trigger: {
-          "--font-size": "fontSizes.400",
-          "& svg": {
-            "--width": "sizes.500",
-            "--height": "sizes.500",
-          },
-        },
-        panel: {
-          "--padding-top": "spacing.400",
-          "--padding-bottom": "spacing.600",
-          "--padding-left": "spacing.700",
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: "md",
-  },
-});

package/src/components/accordion/accordion.slots.tsx

@@ -1,39 +0,0 @@
-import {
-  createSlotRecipeContext,
-  type HTMLChakraProps,
-} from "@chakra-ui/react";
-import type { AccordionRootProps } from "./accordion.types";
-
-const { withProvider, withContext } = createSlotRecipeContext({
-  key: "accordion",
-});
-
-export const AccordionRoot = withProvider<HTMLDivElement, AccordionRootProps>(
-  "div",
-  "root"
-);
-
-export const AccordionDisclosure = withContext<
-  HTMLDivElement,
-  HTMLChakraProps<"div">
->("div", "disclosure");
-
-export const AccordionTrigger = withContext<
-  HTMLButtonElement,
-  HTMLChakraProps<"button">
->("button", "trigger");
-
-export const AccordionPanel = withContext<
-  HTMLDivElement,
-  HTMLChakraProps<"div">
->("div", "panel");
-
-export const AccordionTitle = withContext<
-  HTMLButtonElement,
-  HTMLChakraProps<"div">
->("div", "accordionTitle");
-
-export const HeaderRightContent = withContext<
-  HTMLDivElement,
-  HTMLChakraProps<"div">
->("div", "headerContentRight");

package/src/components/accordion/accordion.stories.tsx

@@ -1,188 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Accordion from "./accordion";
-import type { AccordionProps } from "./accordion.types";
-import { Avatar, Button, Checkbox, Flex } from "@/components";
-import { expect, userEvent, waitFor } from "@storybook/test";
-
-const meta: Meta<typeof Accordion.Root> = {
-  title: "components/Accordion",
-  component: Accordion.Root,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Accordion.Root>;
-
-const items = [
-  { value: "a", title: "First Item", text: "Some value 1..." },
-  { value: "b", title: "Second Item", text: "Some value 2..." },
-  { value: "c", title: "Third Item", text: "Some value 3..." },
-];
-
-const sizes: AccordionProps["size"][] = ["sm", "md"];
-
-export const Basic: Story = {
-  render: () => (
-    <Accordion.Root>
-      <Accordion.Item>
-        <Accordion.Header>First Item</Accordion.Header>
-        <Accordion.Content>First item content</Accordion.Content>
-      </Accordion.Item>
-    </Accordion.Root>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const accordion = canvasElement.querySelector(
-      '[data-slot="root"]'
-    ) as HTMLElement;
-
-    const trigger = accordion.querySelector(
-      '[data-slot="trigger"]'
-    ) as HTMLButtonElement;
-
-    const panel = accordion.querySelector(
-      '[data-slot="panel"]'
-    ) as HTMLDivElement;
-
-    await step("Can be focused with keyboard", async () => {
-      await userEvent.tab();
-      await waitFor(() => expect(trigger).toHaveFocus());
-    });
-
-    await step("Panel is initially hidden", async () => {
-      await expect(panel).not.toBeVisible();
-    });
-
-    await step("Can be triggered with Enter key", async () => {
-      await userEvent.keyboard("{Enter}");
-      await expect(panel).toBeVisible();
-    });
-
-    await step("Can be triggered with Space key", async () => {
-      await userEvent.keyboard(" ");
-      await expect(panel).not.toBeVisible();
-    });
-  },
-};
-
-export const WithHeaderItemsToRight: Story = {
-  render: () => (
-    <Accordion.Root>
-      <Accordion.Item value="a">
-        <Accordion.Header>First Item</Accordion.Header>
-        <Accordion.Content>First item content</Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item value="b">
-        <Accordion.Header>
-          Second Item
-          <Accordion.HeaderRightContent>
-            <Button tone="critical" m="100">
-              First action
-            </Button>
-            <Button tone="neutral" m="100">
-              Second Action
-            </Button>
-          </Accordion.HeaderRightContent>
-        </Accordion.Header>
-        <Accordion.Content>Second item content</Accordion.Content>
-      </Accordion.Item>
-    </Accordion.Root>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const accordion = canvasElement.querySelector(
-      '[data-slot="root"]'
-    ) as HTMLElement;
-    const additionalButtons = accordion.querySelectorAll("button");
-    const trigger = accordion.querySelector(
-      '[data-slot="trigger"]'
-    ) as HTMLButtonElement;
-
-    await step("Additional buttons don't trigger accordion", async () => {
-      const panel = accordion.querySelector(
-        '[data-slot="panel"]'
-      ) as HTMLDivElement;
-      await expect(panel).not.toBeVisible();
-
-      // Click additional buttons
-      for (const button of Array.from(additionalButtons)) {
-        if (button !== trigger) {
-          await userEvent.click(button);
-          await expect(panel).not.toBeVisible();
-        }
-      }
-    });
-
-    await step("Main trigger still works", async () => {
-      const panel = accordion.querySelector(
-        '[data-slot="panel"]'
-      ) as HTMLDivElement;
-      await userEvent.click(trigger);
-      await expect(panel).toBeVisible();
-    });
-
-    await step("Main trigger still works", async () => {
-      await userEvent.click(trigger);
-    });
-  },
-};
-
-const AccordionContent = () => {
-  const avatarImg = "https://thispersondoesnotexist.com/ ";
-
-  return (
-    <div style={{ display: "flex", alignItems: "center", padding: "10px" }}>
-      <Avatar src={avatarImg} firstName="Michael" lastName="Douglas" />
-      <Checkbox marginLeft="100">Yes?</Checkbox>
-      <Checkbox marginLeft="100">No?</Checkbox>
-    </div>
-  );
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <>
-      {sizes.map((size, index) => (
-        <Accordion.Root key={index} size={size}>
-          <Accordion.Item value={size}>
-            <Accordion.Header>{size} size</Accordion.Header>
-            <Accordion.Content>
-              <Flex
-                justifyContent="space-between"
-                alignItems={"center"}
-                borderColor="neutral.4"
-              >
-                <div style={{ marginRight: "100" }}>{size} size</div>
-                <AccordionContent />
-              </Flex>
-            </Accordion.Content>
-          </Accordion.Item>
-        </Accordion.Root>
-      ))}
-    </>
-  ),
-};
-
-export const AllowMultiple: Story = {
-  render: () => (
-    <Accordion.Root allowsMultipleExpanded>
-      {items.map((item, index) => (
-        <Accordion.Item key={index} value={item.value}>
-          <Accordion.Header>{item.title}</Accordion.Header>
-          <Accordion.Content>{item.text}</Accordion.Content>
-        </Accordion.Item>
-      ))}
-    </Accordion.Root>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <Accordion.Root isDisabled>
-      {items.map((item, index) => (
-        <Accordion.Item key={index} value={item.value}>
-          <Accordion.Header>{item.title}</Accordion.Header>
-          <Accordion.Content>{item.text}</Accordion.Content>
-        </Accordion.Item>
-      ))}
-    </Accordion.Root>
-  ),
-};

package/src/components/accordion/accordion.tsx

@@ -1,16 +0,0 @@
-import { HeaderRightContent } from "./accordion.slots";
-import { AccordionGroup } from "./components/accordion-group";
-import { AccordionHeader } from "./components/accordion-header";
-import { AccordionContent } from "./components/accordion-content";
-import { AccordionItem } from "./components/accordion-item";
-
-// Create the Accordion namespace object as an object literal
-const Accordion = {
-  Root: AccordionGroup,
-  Item: AccordionItem,
-  Header: AccordionHeader,
-  Content: AccordionContent,
-  HeaderRightContent,
-};
-
-export default Accordion;

package/src/components/accordion/accordion.types.tsx

@@ -1,54 +0,0 @@
-import type { RecipeVariantProps, HTMLChakraProps } from "@chakra-ui/react";
-import { accordionSlotRecipe } from "./accordion.recipe";
-import { type DisclosureProps } from "react-aria-components";
-import type { ReactNode, RefObject, RefAttributes } from "react";
-import { useButton, useDisclosure } from "react-aria";
-import type { useDisclosureState } from "react-stately";
-
-export type AccordionRootProps = HTMLChakraProps<
-  "div",
-  RecipeVariantProps<typeof accordionSlotRecipe>
->;
-
-export type AccordionComposition = {
-  state: ReturnType<typeof useDisclosureState>;
-  buttonProps: ReturnType<typeof useButton>["buttonProps"];
-  panelProps: ReturnType<typeof useDisclosure>["panelProps"];
-  triggerRef: RefObject<HTMLButtonElement>;
-  panelRef: RefObject<HTMLDivElement>;
-  isFocusVisible: boolean;
-};
-export interface AccordionProps
-  extends Omit<DisclosureProps, "children" | "id"> {
-  additionalTriggerComponent?: ReactNode;
-  children: ReactNode;
-  recipe?: string;
-  size?: "sm" | "md";
-}
-
-export type AccordionItemProps = {
-  isDisabled?: boolean;
-  isExpanded?: boolean;
-  onExpandedChange?: (isExpanded: boolean) => void;
-  id?: string;
-  children: ReactNode;
-  title?: string;
-};
-
-export type DisclosureGroupProps = AccordionProps & {
-  children: ReactNode;
-  ref?: RefAttributes<HTMLButtonElement>;
-  allowsMultipleExpanded?: boolean;
-  onExpandedChange?: (isExpanded: boolean) => void;
-  isDisabled?: boolean;
-  isExpanded?: boolean;
-};
-
-export type DisclosureItemProps = AccordionItemProps & {
-  children: ReactNode;
-  id?: string;
-  value?: string;
-  isDisabled?: boolean;
-  isExpanded?: boolean;
-  onExpandedChange?: (isExpanded: boolean) => void;
-};

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

@@ -1,28 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import { AccordionPanel } from "../accordion.slots";
-import { useObjectRef } from "react-aria";
-import { mergeProps, mergeRefs } from "@chakra-ui/react";
-import type { DisclosureGroupProps } from "../accordion.types";
-import { ItemContext } from "../accordion-context";
-
-// Create Content component
-export const AccordionContent = forwardRef<
-  HTMLDivElement,
-  DisclosureGroupProps
->((props, forwardedRef) => {
-  const context = useContext(ItemContext);
-  const ref = useObjectRef<HTMLDivElement>(
-    mergeRefs(context?.panelRef, forwardedRef)
-  );
-
-  return (
-    // @ts-expect-error TODO - fix prop types merging conflict
-    <AccordionPanel
-      ref={ref}
-      {...mergeProps({ ...context?.panelProps, ...props })}
-      data-slot="panel"
-    >
-      {props.children}
-    </AccordionPanel>
-  );
-});

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