@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

package/src/components/checkbox/checkbox.stories.tsx

@@ -1,200 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-import type { Meta, StoryObj } from "@storybook/react";
-import { Checkbox } from "./checkbox";
-import { Stack } from "@/components";
-import { userEvent, within, expect, fn } from "@storybook/test";
-
-const meta: Meta<typeof Checkbox> = {
-  title: "components/Checkbox",
-  component: Checkbox,
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- * StoryObj provides type checking for our story configurations
- */
-type Story = StoryObj<typeof Checkbox>;
-
-/**
- * Base Story showcasing the default Checkbox state
- */
-export const Base: Story = {
-  args: {
-    children: "Checkbox Label",
-    onChange: fn(),
-    // @ts-expect-error: data-testid is not a valid prop
-    "data-testid": "test-checkbox",
-    "aria-label": "test-label",
-  },
-  play: async ({ canvasElement, args, step }) => {
-    const canvas = within(canvasElement);
-    const htmlLabel = canvasElement.querySelector(
-      '[data-slot="root"]'
-    ) as HTMLLabelElement;
-    const displayLabel = canvasElement.querySelector(
-      '[data-slot="label"]'
-    ) as HTMLSpanElement;
-    const htmlInput = canvas.getByTestId("test-checkbox");
-    const onChange = args.onChange;
-
-    await step(
-      "Forwards data- & aria-attributes to the actual html-input",
-      async () => {
-        await expect(htmlInput.tagName).toBe("INPUT");
-        await expect(htmlInput).toHaveAttribute("data-testid", "test-checkbox");
-        await expect(htmlInput).toHaveAttribute("aria-label", "test-label");
-      }
-    );
-
-    await step("Can be focused with the keyboard", async () => {
-      await userEvent.keyboard("{tab}");
-      await expect(htmlInput).toHaveFocus();
-    });
-
-    await step("Can be triggered with space-bar", async () => {
-      await userEvent.keyboard(" ");
-      await expect(onChange).toHaveBeenCalledTimes(1);
-      await userEvent.keyboard(" ");
-      await expect(onChange).toHaveBeenCalledTimes(2);
-    });
-    await step("Can not be triggered with enter", async () => {
-      await userEvent.keyboard("{enter}");
-      await expect(onChange).toHaveBeenCalledTimes(2);
-    });
-
-    await step("Can be triggered by clicking on root & label", async () => {
-      htmlLabel.click();
-      await expect(onChange).toHaveBeenCalledTimes(3);
-      displayLabel.click();
-      await expect(onChange).toHaveBeenCalledTimes(4);
-    });
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    children: "Disabled Checkbox",
-    // @ts-expect-error: data-testid is not a valid prop
-    "data-testid": "test-checkbox",
-    isDisabled: true,
-    isSelected: false,
-    onChange: fn(),
-  },
-
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-    const htmlLabel = canvasElement.querySelector(
-      '[data-slot="root"]'
-    ) as HTMLLabelElement;
-    const htmlInput = canvas.getByTestId("test-checkbox");
-
-    await step("input has html 'disabled' attribute", async () => {
-      await expect(htmlInput).toHaveAttribute("disabled");
-    });
-
-    await step("Can not be focused with the keyboard", async () => {
-      await userEvent.keyboard("{tab}");
-      await expect(htmlInput).not.toHaveFocus();
-    });
-
-    await step(
-      "Can not be triggered by clicking on the root- or label-element",
-      async () => {
-        //await expect(htmlInput).toBeDisabled();
-        await expect(htmlInput).not.toBeChecked();
-        htmlLabel.click();
-        await expect(htmlInput).not.toBeChecked();
-        await expect(args.onChange).not.toBeCalled();
-      }
-    );
-  },
-};
-
-export const Invalid: Story = {
-  args: {
-    children: "Invalid Checkbox",
-    // @ts-expect-error: data-testid is not a valid prop
-    "data-testid": "test-checkbox",
-    isInvalid: true,
-    onChange: fn(),
-  },
-
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const htmlInput = canvas.getByTestId("test-checkbox");
-    await step("html input state is invalid", async () => {
-      await expect(htmlInput).toBeInvalid();
-    });
-  },
-};
-
-export const InvisibleLabel: Story = {
-  args: {
-    // @ts-expect-error: data-testid is not a valid prop
-    "data-testid": "test-checkbox",
-    "aria-label": "Checkbox without label",
-  },
-
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-    const htmlInput = canvas.getByTestId("test-checkbox");
-
-    await step("Has alternative label", async () => {
-      await expect(htmlInput).toHaveAttribute("aria-label", args["aria-label"]);
-    });
-  },
-};
-
-/**
- * Smoke Test
- * This story attempts to capture all visual permutations
- */
-export const SmokeTest: Story = {
-  render: () => {
-    return (
-      <Stack gap="1000">
-        {[false, true].map((isInvalid, j) => (
-          <Stack direction="row" key={j}>
-            {[false, true].map((isDisabled, i) => (
-              <Stack
-                width="1/2"
-                key={i}
-                direction="column"
-                alignItems="flex-start"
-              >
-                <Checkbox
-                  isSelected={false}
-                  isDisabled={isDisabled}
-                  isInvalid={isInvalid}
-                >
-                  Unchecked, {isDisabled ? "disabled" : "not disabled"},{" "}
-                  {isInvalid ? "invalid" : ""}
-                </Checkbox>
-
-                <Checkbox
-                  isDisabled={isDisabled}
-                  isInvalid={isInvalid}
-                  isSelected
-                >
-                  Checked, {isDisabled ? "disabled" : "not disabled"},{" "}
-                  {isInvalid ? "invalid" : ""}
-                </Checkbox>
-
-                <Checkbox
-                  isDisabled={isDisabled}
-                  isInvalid={isInvalid}
-                  isIndeterminate
-                >
-                  Indeterminate, {isDisabled ? "disabled" : "not disabled"},{" "}
-                  {isInvalid ? "invalid" : ""}
-                </Checkbox>
-              </Stack>
-            ))}
-          </Stack>
-        ))}
-      </Stack>
-    );
-  },
-};

package/src/components/checkbox/checkbox.tsx

@@ -1,77 +0,0 @@
-import { forwardRef, useRef } from "react";
-import { useToggleState } from "react-stately";
-import { useSlotRecipe } from "@chakra-ui/react";
-import { VisuallyHidden } from "@/components";
-import { Check, Remove as Minus } from "@commercetools/nimbus-icons";
-
-import {
-  useFocusRing,
-  useCheckbox,
-  useObjectRef,
-  mergeProps,
-} from "react-aria";
-
-import { mergeRefs } from "@chakra-ui/react";
-import type { CheckboxProps } from "./checkbox.types";
-import {
-  CheckboxIndicator,
-  CheckboxRoot,
-  CheckboxLabel,
-} from "./checkbox.slots";
-
-/**
- * Checkbox
- * ============================================================
- * displays a checkbox and an associated label
- *
- * Features:
- *
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLDivElement' 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 Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  (props, forwardedRef) => {
-    const localRef = useRef<HTMLInputElement>(null);
-    const ref = useObjectRef(mergeRefs(localRef, forwardedRef));
-
-    const recipe = useSlotRecipe({ key: "checkbox" });
-    const [recipeProps] = recipe.splitVariantProps(props);
-
-    const state = useToggleState(props);
-    const { inputProps } = useCheckbox(props, state, ref);
-
-    const { isFocused, focusProps } = useFocusRing();
-    const isSelected = state.isSelected && !props.isIndeterminate;
-    const isIndeterminate = props.isIndeterminate;
-
-    const stateProps = {
-      "data-selected": isSelected,
-      "data-indeterminate": isIndeterminate,
-      "data-invalid": props.isInvalid,
-      "data-disabled": props.isDisabled,
-      "data-focus": isFocused || undefined,
-    };
-
-    return (
-      <CheckboxRoot data-slot="root" {...recipeProps} {...stateProps}>
-        <CheckboxIndicator data-slot="indicator" {...stateProps}>
-          {isSelected && <Check />}
-          {isIndeterminate && <Minus />}
-          <VisuallyHidden as="span">
-            <input {...mergeProps(inputProps, focusProps)} ref={ref} />
-          </VisuallyHidden>
-        </CheckboxIndicator>
-
-        {props.children && (
-          <CheckboxLabel data-slot="label" {...stateProps}>
-            {props.children}
-          </CheckboxLabel>
-        )}
-      </CheckboxRoot>
-    );
-  }
-);
-Checkbox.displayName = "Checkbox";

package/src/components/checkbox/checkbox.types.tsx

@@ -1,22 +0,0 @@
-import type { CheckboxRootProps } from "./checkbox.slots";
-import type { RecipeVariantProps } from "@chakra-ui/react";
-import { checkboxSlotRecipe } from "./checkbox.recipe";
-import type { AriaCheckboxProps } from "react-aria";
-
-/**
- * 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 CheckboxVariantProps = CheckboxRootProps &
-  RecipeVariantProps<typeof checkboxSlotRecipe> &
-  AriaCheckboxProps;
-
-/**
- * Main props interface for the Checkbox component.
- * Extends CheckboxVariantProps to include both root props and variant props,
- * while adding support for React children.
- */
-export interface CheckboxProps extends CheckboxVariantProps {
-  children?: React.ReactNode;
-}

package/src/components/checkbox/index.ts

@@ -1,2 +0,0 @@
-export * from './checkbox'
-export * from './checkbox.types'

package/src/components/code/code.mdx

@@ -1,17 +0,0 @@
----
-id: Code
-title: Code
-description: renders code blocks
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Typography
-  - Code
-tags:
-  - code
----
-
-# Code
-
-Add description later.

package/src/components/code/code.recipe.ts

@@ -1,63 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-export const codeRecipe = defineRecipe({
-  className: "nimbus-code",
-  base: {
-    fontFamily: "mono",
-    alignItems: "center",
-    display: "inline-flex",
-    borderRadius: "100",
-  },
-  variants: {
-    variant: {
-      solid: {
-        bg: "colorPalette.4",
-        color: "colorPalette.11",
-      },
-      subtle: {
-        bg: "colorPalette.3",
-        color: "colorPalette.11",
-      },
-      outline: {
-        color: "colorPalette.fg",
-        shadow: "inset 0 0 0px 1px var(--shadow-color)",
-        shadowColor: "colorPalette.muted",
-      },
-      surface: {
-        bg: "colorPalette.subtle",
-        color: "colorPalette.fg",
-        shadow: "inset 0 0 0px 1px var(--shadow-color)",
-        shadowColor: "colorPalette.muted",
-      },
-      plain: {
-        color: "colorPalette.fg",
-      },
-    },
-    size: {
-      xs: {
-        textStyle: "2xs",
-        px: "100",
-        minH: "400",
-      },
-      sm: {
-        textStyle: "xs",
-        px: "150",
-        minH: "500",
-      },
-      md: {
-        textStyle: "sm",
-        px: "200",
-        minH: "600",
-      },
-      lg: {
-        textStyle: "sm",
-        px: "250",
-        minH: "700",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "solid",
-    size: "md",
-  },
-});

package/src/components/code/code.tsx

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

package/src/components/code/index.ts

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

package/src/components/dialog/dialog.mdx

@@ -1,20 +0,0 @@
----
-id: Dialog
-title: Dialog
-description: displays a dialog
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Feedback
-  - Dialog
-tags:
-  - dialog
-  - modal
----
-
-# Dialog
-
-## Props
-
-<PropTables ids="DialogRoot, DialogFooter, DialogHeader, DialogBody, DialogBackdrop, DialogTitle, DialogDescription, DialogTrigger, DialogActionTrigger" />

package/src/components/dialog/dialog.recipe.ts

@@ -1,254 +0,0 @@
-import { defineSlotRecipe } from "@chakra-ui/react";
-
-export const dialogSlotRecipe = defineSlotRecipe({
-  slots: [
-    "trigger",
-    "backdrop",
-    "positioner",
-    "content",
-    "title",
-    "description",
-    "closeTrigger",
-    "header",
-    "body",
-    "footer",
-    "backdrop",
-  ],
-  className: "nimbus-dialog",
-  base: {
-    backdrop: {
-      bg: {
-        _dark: "bg/50",
-        _light: "fg/50",
-      },
-      pos: "fixed",
-      left: 0,
-      top: 0,
-      w: "100vw",
-      h: "100dvh",
-      zIndex: "modal",
-      _open: {
-        animationName: "fade-in",
-        animationDuration: "slow",
-      },
-      _closed: {
-        animationName: "fade-out",
-        animationDuration: "moderate",
-      },
-    },
-    positioner: {
-      display: "flex",
-      width: "100vw",
-      height: "100dvh",
-      position: "fixed",
-      left: 0,
-      top: 0,
-      "--dialog-z-index": "zIndex.modal",
-      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
-      justifyContent: "center",
-      overscrollBehaviorY: "none",
-    },
-    content: {
-      display: "flex",
-      flexDirection: "column",
-      position: "relative",
-      width: "100%",
-      outline: 0,
-      borderRadius: "200",
-      textStyle: "sm",
-      my: "var(--dialog-margin, var(--dialog-base-margin))",
-      "--dialog-z-index": "zIndex.modal",
-      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
-      bg: "bg",
-      boxShadow: "lg",
-      _open: {
-        animationDuration: "moderate",
-      },
-      _closed: {
-        animationDuration: "faster",
-      },
-    },
-    header: {
-      flex: 0,
-      px: "600",
-      pt: "600",
-      pb: "400",
-    },
-    body: {
-      flex: "1",
-      px: "600",
-      pt: "200",
-      pb: "600",
-    },
-    footer: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      gap: "300",
-      px: "600",
-      pt: "200",
-      pb: "400",
-    },
-    title: {
-      textStyle: "lg",
-      fontWeight: "semibold",
-    },
-    description: {
-      color: "fg.muted",
-    },
-  },
-  variants: {
-    placement: {
-      center: {
-        positioner: {
-          alignItems: "center",
-        },
-        content: {
-          "--dialog-base-margin": "auto",
-          mx: "auto",
-        },
-      },
-      top: {
-        positioner: {
-          alignItems: "flex-start",
-        },
-        content: {
-          "--dialog-base-margin": "spacing.1600",
-          mx: "auto",
-        },
-      },
-      bottom: {
-        positioner: {
-          alignItems: "flex-end",
-        },
-        content: {
-          "--dialog-base-margin": "spacing.1600",
-          mx: "auto",
-        },
-      },
-    },
-    scrollBehavior: {
-      inside: {
-        positioner: {
-          overflow: "hidden",
-        },
-        content: {
-          maxH: "calc(100% - 7.5rem)",
-        },
-        body: {
-          overflow: "auto",
-        },
-      },
-      outside: {
-        positioner: {
-          overflow: "auto",
-          pointerEvents: "auto",
-        },
-      },
-    },
-    size: {
-      xs: {
-        content: {
-          maxW: "sm",
-        },
-      },
-      sm: {
-        content: {
-          maxW: "md",
-        },
-      },
-      md: {
-        content: {
-          maxW: "lg",
-        },
-      },
-      lg: {
-        content: {
-          maxW: "2xl",
-        },
-      },
-      xl: {
-        content: {
-          maxW: "4xl",
-        },
-      },
-      cover: {
-        positioner: {
-          padding: "1000",
-        },
-        content: {
-          width: "100%",
-          height: "100%",
-          "--dialog-margin": "0",
-        },
-      },
-      full: {
-        content: {
-          maxW: "100vw",
-          minH: "100vh",
-          "--dialog-margin": "0",
-          borderRadius: "0",
-        },
-      },
-    },
-    motionPreset: {
-      scale: {
-        content: {
-          _open: {
-            animationName: "scale-in, fade-in",
-          },
-          _closed: {
-            animationName: "scale-out, fade-out",
-          },
-        },
-      },
-      "slide-in-bottom": {
-        content: {
-          _open: {
-            animationName: "slide-from-bottom, fade-in",
-          },
-          _closed: {
-            animationName: "slide-to-bottom, fade-out",
-          },
-        },
-      },
-      "slide-in-top": {
-        content: {
-          _open: {
-            animationName: "slide-from-top, fade-in",
-          },
-          _closed: {
-            animationName: "slide-to-top, fade-out",
-          },
-        },
-      },
-      "slide-in-left": {
-        content: {
-          _open: {
-            animationName: "slide-from-left, fade-in",
-          },
-          _closed: {
-            animationName: "slide-to-left, fade-out",
-          },
-        },
-      },
-      "slide-in-right": {
-        content: {
-          _open: {
-            animationName: "slide-from-right, fade-in",
-          },
-          _closed: {
-            animationName: "slide-to-right, fade-out",
-          },
-        },
-      },
-      none: {},
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    scrollBehavior: "outside",
-    placement: "top",
-    motionPreset: "scale",
-  },
-});