@commercetools/nimbus 0.0.2 → 0.0.3

package/docs/architecture-decisions/adr-0002-compound-component-extraction.md

@@ -1,82 +0,0 @@
-# ADR: Standardizing Compound Component Extraction to a `components` Directory
-
-## Context
-
-To enhance the organization, maintainability, and scalability of our components
-that utilize the compound component pattern, we are establishing a consistent
-directory structure for their implementation. This ADR outlines the principle of
-extracting the core root component and its associated compound sub-components
-into a dedicated `components` subdirectory.
-
-## Decision
-
-For any component (`<ComponentName>`) that follows the compound component
-pattern (where sub-components like `<ComponentName.Part>`,
-`<ComponentName.Control>`, etc., are defined as properties of the main
-component), we will adopt the following directory structure:
-
-- The main component's directory will be
-  `packages/nimbus/src/components/<component-name>/`.
-- A subdirectory named `components` will be created within the main component's
-  directory: `packages/nimbus/src/components/<component-name>/components/`.
-- The implementation files for the root component (`<ComponentName.Root>`) and
-  all its compound sub-components (`<ComponentName.Part>`,
-  `<ComponentName.Control>`, etc.) will reside within this `components`
-  subdirectory.
-- The main `<component-name>.tsx` file within the `<component-name>` directory
-  will be responsible for:
-  - Importing the root component and all sub-components from the `components`
-    subdirectory.
-  - Re-exporting them as properties of the main `ComponentName` object.
-
-Storybook files (`<component-name>.stories.tsx`) will be updated to reflect this
-structure, primarily by referencing the appropriate root component (e.g.,
-`ComponentName.Root` or `ComponentName`) in the `Meta` configuration.
-
-## Why this is better:
-
-- **Consistent Code Organization:** This standardized structure will make it
-  easier for developers to locate the implementation files for any component
-  utilizing the compound pattern.
-- **Improved Maintainability:** Isolating the implementation of each part of a
-  compound component within its own file reduces the complexity of individual
-  files and minimizes the risk of unintended side effects during modifications.
-- **Enhanced Scalability:** As components grow and incorporate more
-  sub-components, this structure provides a clear and manageable way to organize
-  the increasing number of files.
-- **Clear Separation of Concerns:** Each file within the `components` directory
-  will focus on the implementation details of a specific part of the compound
-  component.
-
-## Consequences
-
-- **New Directory Structure:** Developers will need to be aware of this new
-  directory structure for all future and refactored compound components.
-- **Import Path Updates:** When working directly with the individual root or
-  sub-component implementations, import paths will need to reflect their
-  location within the `components` subdirectory. However, the main `index.tsx`
-  re-export should abstract this for most consumers using the compound component
-  API.
-- **Storybook Updates:** The `Meta` configuration in Storybook files for
-  compound components will need to point to the appropriate root component.
-
-## Examples
-
-**With `components` Subdirectory:**
-
-```
-packages/nimbus/src/components/component-name/index.tsx
-packages/nimbus/src/components/component-name/component-name.tsx
-packages/nimbus/src/components/component-name/components/component-name.root.tsx
-packages/nimbus/src/components/component-name/components/component-name.part.tsx
-packages/nimbus/src/components/component-name/components/component-name.control.tsx
-packages/nimbus/src/components/component-name/component-name.stories.tsx
-```
-
-## Summary
-
-Adopting this standardized directory structure for compound components will lead
-to a more organized, maintainable, and scalable UI Kit. By consistently
-separating the implementation details of the root and sub-components into a
-dedicated `components` subdirectory, we establish a clear pattern for future
-development and refactoring efforts.

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

@@ -1,17 +0,0 @@
-import React, { createContext } from "react";
-import type { DisclosureGroupState } from "react-stately";
-
-// Define types for the item context
-export interface ItemContextType {
-  isExpanded: boolean;
-  triggerRef: React.RefObject<HTMLButtonElement>;
-  panelRef: React.RefObject<HTMLDivElement>;
-  buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
-  panelProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
-  isFocusVisible: boolean;
-}
-
-// Create and export the contexts
-export const ItemContext = createContext<ItemContextType | null>(null);
-export const DisclosureGroupStateContext =
-  createContext<DisclosureGroupState | null>(null);

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