@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

package/src/components/text-input/text-input.stories.tsx

@@ -1,282 +0,0 @@
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { TextInput } from "./text-input";
-import type { TextInputProps } from "./text-input.types";
-import { userEvent, within, expect, fn } from "@storybook/test";
-import { Box, Stack, Text } from "@/components";
-
-const meta: Meta<typeof TextInput> = {
-  title: "components/TextInput",
-  component: TextInput,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TextInput>;
-
-const inputVariants: TextInputProps["variant"][] = ["solid", "ghost"];
-const inputSize: TextInputProps["size"][] = ["md", "sm"];
-
-export const Base: Story = {
-  args: {
-    placeholder: "base text input",
-    ["aria-label"]: "test-input",
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText("test-input");
-
-    await step("Uses an <input> element by default", async () => {
-      await expect(input.tagName).toBe("INPUT");
-    });
-
-    await step("Forwards data- & aria-attributes", async () => {
-      await expect(input).toHaveAttribute("aria-label", "test-input");
-    });
-
-    await step("Is focusable with <tab> key", async () => {
-      await userEvent.tab();
-      await expect(input).toHaveFocus();
-    });
-
-    await step("Can type text", async () => {
-      await userEvent.type(input, "Base text input");
-      await expect(input).toHaveValue("Base text input");
-      await userEvent.clear(input);
-    });
-  },
-};
-
-export const Sizes: Story = {
-  args: {
-    "aria-label": "test-input",
-  },
-  render: (args) => {
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        {inputSize.map((size) => (
-          <TextInput
-            key={size as string}
-            {...args}
-            size={size}
-            placeholder={size as string}
-          />
-        ))}
-      </Stack>
-    );
-  },
-};
-
-export const Variants: Story = {
-  args: {
-    placeholder: "text input",
-    ["aria-label"]: "test-input",
-  },
-  render: (args) => {
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        {inputVariants.map((variant) => (
-          <TextInput
-            key={variant as string}
-            {...args}
-            variant={variant}
-            placeholder={variant as string}
-          />
-        ))}
-      </Stack>
-    );
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    isDisabled: true,
-  },
-  render: (args) => {
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        {inputVariants.map((variant) => (
-          <TextInput
-            key={variant as string}
-            {...args}
-            variant={variant}
-            placeholder={variant as string}
-            aria-label={`${variant as string}-disabled`}
-          />
-        ))}
-      </Stack>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText("solid-disabled");
-
-    await step("Has disabled attribute", async () => {
-      await expect(input).toBeDisabled();
-    });
-
-    await step("Cannot be focused", async () => {
-      await userEvent.tab();
-      await expect(input).not.toHaveFocus();
-    });
-
-    await step("Cannot type text when disabled", async () => {
-      await userEvent.type(input, "Test");
-      await expect(input).toHaveValue("");
-    });
-  },
-};
-
-export const Invalid: Story = {
-  args: {
-    isInvalid: true,
-  },
-  render: (args) => {
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        {inputVariants.map((variant) => (
-          <TextInput
-            key={variant as string}
-            {...args}
-            variant={variant}
-            placeholder={variant as string}
-            aria-label={`${variant as string}-invalid`}
-          />
-        ))}
-      </Stack>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText("solid-invalid");
-
-    await step("Has invalid state", async () => {
-      await expect(input).toHaveAttribute("data-invalid", "true");
-    });
-
-    await step("Is still focusable when invalid", async () => {
-      await userEvent.tab();
-      await expect(input).toHaveFocus();
-    });
-
-    await step("Can still type when invalid", async () => {
-      await userEvent.type(input, "Test Input");
-      await expect(input).toHaveValue("Test Input");
-      await userEvent.clear(input);
-    });
-  },
-};
-
-export const SmokeTest: Story = {
-  args: {
-    onChange: fn(),
-    ["aria-label"]: "test-input",
-  },
-  render: (args) => {
-    const states = [
-      { label: "Default", props: {} },
-      { label: "Disabled", props: { isDisabled: true } },
-      { label: "Invalid", props: { isInvalid: true } },
-      {
-        label: "Invalid & Disabled",
-        props: { isInvalid: true, isDisabled: true },
-      },
-    ];
-
-    return (
-      <Stack gap="600">
-        {states.map((state) => (
-          <Stack key={state.label} direction="column" gap="400">
-            {inputSize.map((size) => (
-              <Stack
-                direction="row"
-                key={size as string}
-                gap="400"
-                alignItems="center"
-              >
-                {inputVariants.map((variant) => (
-                  <Box key={variant as string}>
-                    <TextInput
-                      {...args}
-                      {...state.props}
-                      variant={variant}
-                      size={size}
-                      placeholder={`${variant as string} ${size as string} ${state.label}`}
-                    />
-                  </Box>
-                ))}
-              </Stack>
-            ))}
-          </Stack>
-        ))}
-      </Stack>
-    );
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [value, setValue] = useState("");
-    const onChangeRequest = (e: string) => {
-      setValue(e);
-    };
-
-    return (
-      <Stack gap="400">
-        <TextInput
-          value={value}
-          onChange={onChangeRequest}
-          placeholder="Type something..."
-          aria-label="controlled-input"
-        />
-        <Text data-testid="value-display">Current value: {value}</Text>
-      </Stack>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText("controlled-input");
-    const valueDisplay = canvas.getByTestId("value-display");
-
-    await step("Updates controlled value", async () => {
-      await userEvent.type(input, "Hello");
-      await expect(input).toHaveValue("Hello");
-      await expect(valueDisplay).toHaveTextContent("Current value: Hello");
-    });
-
-    await step("Clears controlled value", async () => {
-      await userEvent.clear(input);
-      await expect(input).toHaveValue("");
-      await expect(valueDisplay).toHaveTextContent("Current value:");
-    });
-  },
-};
-
-export const InputTypes: Story = {
-  args: {
-    ["aria-label"]: "test-input",
-  },
-  render: (args) => {
-    const inputTypes = [
-      "date",
-      "datetime-local",
-      "email",
-      "month",
-      "number",
-      "password",
-      "search",
-      "tel",
-      "text",
-      "time",
-      "url",
-      "week",
-    ] as const;
-    return (
-      <Stack direction="column" gap="400">
-        {inputTypes.map((type) => (
-          <TextInput key={type} {...args} placeholder={type} type={type} />
-        ))}
-      </Stack>
-    );
-  },
-};

package/src/components/text-input/text-input.tsx

@@ -1,39 +0,0 @@
-import { forwardRef, useRef } from "react";
-import { TextInputRoot } from "./text-input.slots";
-import type { TextInputProps } from "./text-input.types";
-import { useObjectRef } from "react-aria";
-import { mergeRefs, useRecipe } from "@chakra-ui/react";
-import { textInputRecipe } from "./text-input.recipe";
-import { TextField, Input } from "react-aria-components";
-import { extractStyleProps } from "@/utils/extractStyleProps";
-
-/**
- * TextInput
- * ============================================================
- * An input component that takes in a text as input
- *
- * Features:
- *
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLInputElement' attributes (including aria- & data-attributes)
- * - supports 'variants', 'sizes', etc. configured in the recipe
- * - allows overriding styles by using style-props
- */
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-  (props, forwardedRef) => {
-    const localRef = useRef<HTMLInputElement>(null);
-    const ref = useObjectRef(mergeRefs(localRef, forwardedRef));
-    const recipe = useRecipe({ recipe: textInputRecipe });
-    const [recipeProps, leftOverProps] = recipe.splitVariantProps(props);
-    const [styleProps, textfieldProps] = extractStyleProps(leftOverProps);
-
-    return (
-      <TextField {...textfieldProps}>
-        <TextInputRoot ref={ref} {...recipeProps} {...styleProps} asChild>
-          <Input />
-        </TextInputRoot>
-      </TextField>
-    );
-  }
-);
-TextInput.displayName = "TextInput";

package/src/components/text-input/text-input.types.ts

@@ -1,7 +0,0 @@
-import type { TextInputRootProps } from "./text-input.slots";
-import type { TextFieldProps } from "react-aria-components";
-
-// Helper type to merge props and resolve conflicts
-export interface TextInputProps
-  extends TextFieldProps,
-    Omit<TextInputRootProps, keyof TextFieldProps | "as" | "asChild"> {}

package/src/components/toggle-button-group/components/toggle-button-group.button.tsx

@@ -1,14 +0,0 @@
-import { forwardRef } from "react";
-import { ToggleButtonGroupButton as ToggleButtonGroupButtonSlot } from "../toggle-button-group.slots";
-import type { ToggleButtonGroupButtonComponent } from "../toggle-button-group.types";
-
-export const ToggleButtonGroupButton: ToggleButtonGroupButtonComponent =
-  forwardRef(({ children, ...rest }, ref) => {
-    return (
-      <ToggleButtonGroupButtonSlot {...rest} ref={ref}>
-        {children}
-      </ToggleButtonGroupButtonSlot>
-    );
-  });
-
-ToggleButtonGroupButton.displayName = "ToggleButtonGroup.Button";

package/src/components/toggle-button-group/components/toggle-button-group.root.tsx

@@ -1,15 +0,0 @@
-import { forwardRef } from "react";
-import { ToggleButtonGroupRoot as ToggleButtonGroupRootSlot } from "../toggle-button-group.slots";
-import type { ToggleButtonGroupRootComponent } from "../toggle-button-group.types";
-
-export const ToggleButtonGroupRoot: ToggleButtonGroupRootComponent = forwardRef(
-  ({ children, ...rest }, ref) => {
-    return (
-      <ToggleButtonGroupRootSlot ref={ref} {...rest}>
-        {children}
-      </ToggleButtonGroupRootSlot>
-    );
-  }
-);
-
-ToggleButtonGroupRoot.displayName = "ToggleButtonGroup.Root";

package/src/components/toggle-button-group/index.ts

@@ -1,2 +0,0 @@
-export * from "./toggle-button-group";
-export * from "./toggle-button-group.types";

package/src/components/toggle-button-group/toggle-button-group.mdx

@@ -1,94 +0,0 @@
----
-id: Components-ToggleButtonGroup
-title: ToggleButtonGroup
-description:
-  To group multiple `Button` or `IconButton` components together, visually and
-  logically, representing a set of related actions.
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - ToggleButtonGroup
-tags:
-  - component
----
-
-# ToggleButtonGroup
-
-To group multiple `Button` or `IconButton` components together, visually and
-logically, representing a set of related actions.
-
-## Basic Usage
-
-[Explain the basic usage / usecase of the component].
-
-```jsx-live
-const App = () => <ToggleButtonGroup>I am ToggleButtonGroup!</ToggleButtonGroup>
-```
-
-### 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 => (
-        <ToggleButtonGroup key={size} size={size}>'{size}' ToggleButtonGroup</ToggleButtonGroup>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Variants
-
-Available variants.
-
-```jsx-live
-const App = () => {
-
-  const variants = ['solid', 'subtle', 'outline', 'ghost', 'plain'];
-
-  return (
-    <Stack direction="horizontal">
-      {variants.map(variant => (
-        <ToggleButtonGroup key={variant} variant={variant}>'{variant}' ToggleButtonGroup</ToggleButtonGroup>
-      ))}
-    </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) => (
-            <ToggleButtonGroup colorPalette={color} key={variant} variant={variant}>
-              '{variant}' ToggleButtonGroup
-            </ToggleButtonGroup>
-          ))}
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-```
-
-## Props
-
-<PropTable id="ToggleButtonGroup" />

package/src/components/toggle-button-group/toggle-button-group.recipe.tsx

@@ -1,64 +0,0 @@
-import { defineSlotRecipe } from "@chakra-ui/react";
-import { buttonRecipe } from "../button/button.recipe";
-
-/**
- * Recipe configuration for the ToggleButtonGroup component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const buttonGroupRecipe = defineSlotRecipe({
-  slots: ["root", "button"],
-  // Unique class name prefix for the component
-  className: "nimbus-toggle-button-group",
-
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      display: "inline-flex",
-    },
-    button: {
-      // Base style is the same as our Button
-      ...buttonRecipe.base,
-      // Default style is outlined
-      ...buttonRecipe.variants?.variant.outline,
-      // Create overrides for custom ToggleButtonGroup styles
-      borderRadius: "0",
-      borderRightWidth: "0",
-      "&:first-of-type": {
-        borderLeftRadius: "200",
-      },
-      "&:last-of-type": {
-        borderRightWidth: "1px",
-        borderRightRadius: "200",
-      },
-      // When selected, the button is styled like a solid button
-      "&[data-selected=true]": buttonRecipe.variants?.variant.solid,
-    },
-  },
-
-  variants: {
-    size: {
-      xs: {
-        button: buttonRecipe.variants?.size.xs,
-      },
-      md: {
-        button: buttonRecipe.variants?.size.md,
-      },
-    },
-
-    tone: {
-      primary: {
-        button: { colorPalette: "primary" },
-      },
-      critical: {
-        button: { colorPalette: "error" },
-      },
-      neutral: {
-        button: { colorPalette: "neutral" },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: "md",
-  },
-});

package/src/components/toggle-button-group/toggle-button-group.slots.tsx

@@ -1,26 +0,0 @@
-import { createSlotRecipeContext } from "@chakra-ui/react";
-import { buttonGroupRecipe } from "./toggle-button-group.recipe";
-import type {
-  ToggleButtonGroupButtonProps,
-  ToggleButtonGroupProps,
-  ToggleButtonGroupButtonComponent,
-} from "./toggle-button-group.types";
-import {
-  ToggleButton as RacToggleButton,
-  ToggleButtonGroup as RacToggleButtonGroup,
-} from "react-aria-components";
-
-const { withContext, withProvider } = createSlotRecipeContext({
-  recipe: buttonGroupRecipe,
-});
-
-export const ToggleButtonGroupRoot = withProvider<
-  typeof RacToggleButtonGroup,
-  ToggleButtonGroupProps
->(RacToggleButtonGroup, "root");
-
-export const ToggleButtonGroupButton: ToggleButtonGroupButtonComponent =
-  withContext<typeof RacToggleButton, ToggleButtonGroupButtonProps>(
-    RacToggleButton,
-    "button"
-  );