@commercetools/nimbus 0.0.1 → 0.0.3

package/src/components/loading-spinner/loading-spinner.mdx

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

package/src/components/loading-spinner/loading-spinner.recipe.tsx

@@ -1,70 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the LoadingSpinner component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const loadingSpinnerRecipe = defineRecipe({
-  className: "nimbus-loading-spinner",
-
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    "& svg": {
-      overflow: "visible",
-      // This proportionally scales the spinner to fit the container while also scaling padding
-      transform: "scale(calc(1 - 2/12))",
-    },
-    "& svg [data-svg-path='spinner-pointer']": {
-      stroke: "colorPalette.10",
-      animationName: "spin",
-      animationDuration: "0.5s",
-      animationTimingFunction: "linear",
-      animationIterationCount: "infinite",
-      transformOrigin: "center center 0",
-    },
-    "& svg [data-svg-path='spinner-circle']": {
-      stroke: "colorPalette.5",
-    },
-  },
-
-  variants: {
-    size: {
-      "2xs": {
-        width: "350",
-        height: "350",
-      },
-      xs: {
-        width: "500",
-        height: "500",
-      },
-      sm: {
-        width: "600",
-        height: "600",
-      },
-      md: {
-        width: "800",
-        height: "800",
-      },
-      lg: {
-        width: "1000",
-        height: "1000",
-      },
-    },
-
-    tone: {
-      primary: {
-        colorPalette: "ctvioletAlpha",
-      },
-      white: {
-        colorPalette: "whiteAlpha",
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: "sm",
-    tone: "primary",
-  },
-});

package/src/components/loading-spinner/loading-spinner.slots.tsx

@@ -1,38 +0,0 @@
-import {
-  type HTMLChakraProps,
-  type RecipeProps,
-  type UnstyledProp,
-  createRecipeContext,
-} from "@chakra-ui/react";
-
-import { loadingSpinnerRecipe } from "./loading-spinner.recipe";
-
-/**
- * Base recipe props interface that combines Chakra UI's recipe props
- * with the unstyled prop option for the div element.
- */
-export interface LoadingSpinnerRecipeProps
-  extends RecipeProps<"div">,
-    UnstyledProp {}
-
-/**
- * Root props interface that extends Chakra's HTML props with our recipe props.
- * This creates a complete set of props for the root element, combining
- * HTML attributes, Chakra's styling system, and our custom recipe props.
- */
-export type LoadingSpinnerRootProps = Omit<
-  HTMLChakraProps<"div", LoadingSpinnerRecipeProps>,
-  // We want to omit polymorphic props from the root props since they are not used internally.
-  "as" | "asChild"
->;
-
-const { withContext } = createRecipeContext({ recipe: loadingSpinnerRecipe });
-
-/**
- * Root component that provides the styling context for the LoadingSpinner component.
- * Uses Chakra UI's recipe context system for consistent styling across instances.
- */
-export const LoadingSpinnerRoot = withContext<
-  HTMLDivElement,
-  LoadingSpinnerRootProps
->("div");

package/src/components/loading-spinner/loading-spinner.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { LoadingSpinner } from "./loading-spinner";
-import { Stack } from "./../stack";
-import type { LoadingSpinnerProps } from "./loading-spinner.types";
-import { within, expect } from "@storybook/test";
-import { Box } from "@chakra-ui/react";
-
-const sizes: LoadingSpinnerProps["size"][] = ["lg", "md", "sm", "xs", "2xs"];
-
-const tones: LoadingSpinnerProps["tone"][] = ["primary", "white"];
-
-const meta: Meta<typeof LoadingSpinner> = {
-  title: "components/LoadingSpinner",
-  component: LoadingSpinner,
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- * StoryObj provides type checking for our story configurations
- */
-type Story = StoryObj<typeof LoadingSpinner>;
-
-export const Base: Story = {
-  args: {
-    "data-testid": "spinner-test",
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const spinner = canvas.getByTestId("spinner-test");
-
-    await step("Uses a <div> wrapper by default", async () => {
-      await expect(spinner.tagName).toBe("DIV");
-    });
-
-    await step("Has ARIA role='progressbar'", async () => {
-      await expect(spinner).toHaveAttribute("role", "progressbar");
-    });
-
-    await step("Has an accessible label", async () => {
-      await expect(spinner).toHaveAttribute("aria-label", "Loading data");
-    });
-
-    await step("Has default aria-label", async () => {
-      await expect(spinner.ariaLabel).toBe("Loading data");
-    });
-  },
-};
-
-export const Sizes: Story = {
-  render: (args) => {
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        {sizes.map((size) => (
-          <LoadingSpinner key={size as string} {...args} size={size} />
-        ))}
-      </Stack>
-    );
-  },
-
-  args: {},
-};
-
-/**
- * One tone for a light background and one for a dark background
- */
-export const Tones: Story = {
-  render: (args) => {
-    return (
-      <Box backgroundColor="blackAlpha.5">
-        <Stack direction="row" gap="400" alignItems="center">
-          {tones.map((tone) => (
-            <LoadingSpinner
-              aria-label="Loading even more data"
-              key={tone as string}
-              {...args}
-              tone={tone}
-            />
-          ))}
-        </Stack>
-      </Box>
-    );
-  },
-
-  args: {
-    "data-testid": "spinner-test",
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const spinner = canvas.getAllByTestId("spinner-test");
-
-    await step("Forwards aria-label", async () => {
-      await expect(spinner[0].ariaLabel).toBe("Loading even more data");
-    });
-  },
-};

package/src/components/loading-spinner/loading-spinner.tsx

@@ -1,50 +0,0 @@
-import { forwardRef } from "react";
-import { LoadingSpinnerRoot } from "./loading-spinner.slots";
-import type { LoadingSpinnerProps } from "./loading-spinner.types";
-import { mergeProps, useProgressBar } from "react-aria";
-
-const circlePath =
-  "M22.5 12C22.5 13.3789 22.2284 14.7443 21.7007 16.0182C21.1731 17.2921 20.3996 18.4496 19.4246 19.4246C18.4496 20.3996 17.2921 21.1731 16.0182 21.7007C14.7443 22.2284 13.3789 22.5 12 22.5C10.6211 22.5 9.25574 22.2284 7.98182 21.7007C6.7079 21.1731 5.55039 20.3996 4.57538 19.4246C3.60036 18.4496 2.82694 17.2921 2.29926 16.0182C1.77159 14.7443 1.5 13.3789 1.5 12C1.5 10.6211 1.77159 9.25574 2.29927 7.98182C2.82694 6.7079 3.60037 5.55039 4.57538 4.57538C5.5504 3.60036 6.70791 2.82694 7.98183 2.29926C9.25575 1.77159 10.6211 1.5 12 1.5C13.3789 1.5 14.7443 1.77159 16.0182 2.29927C17.2921 2.82694 18.4496 3.60037 19.4246 4.57538C20.3996 5.5504 21.1731 6.70791 21.7007 7.98183C22.2284 9.25575 22.5 10.6211 22.5 12L22.5 12Z";
-const pointerPath =
-  "M12 1.5C13.3789 1.5 14.7443 1.77159 16.0182 2.29927C17.2921 2.82694 18.4496 3.60036 19.4246 4.57538C20.3996 5.55039 21.1731 6.70791 21.7007 7.98183C22.2284 9.25574 22.5 10.6211 22.5 12";
-
-/**
- * LoadingSpinner
- * ============================================================
- * Indicates ongoing processes or loading states
- */
-export const LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(
-  ({ "aria-label": ariaLabel = "Loading data", ...props }, ref) => {
-    const { progressBarProps } = useProgressBar({
-      isIndeterminate: true,
-      "aria-label": ariaLabel,
-      ...props,
-    });
-
-    return (
-      <LoadingSpinnerRoot
-        ref={ref}
-        {...mergeProps(props, progressBarProps)}
-        aria-label={ariaLabel}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-          <path
-            d={circlePath}
-            data-svg-path="spinner-circle"
-            strokeWidth="3"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d={pointerPath}
-            data-svg-path="spinner-pointer"
-            strokeWidth="3"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </LoadingSpinnerRoot>
-    );
-  }
-);
-LoadingSpinner.displayName = "LoadingSpinner";

package/src/components/loading-spinner/loading-spinner.types.tsx

@@ -1,21 +0,0 @@
-import type { LoadingSpinnerRootProps } from "./loading-spinner.slots";
-import type { RecipeVariantProps } from "@chakra-ui/react";
-import { loadingSpinnerRecipe } from "./loading-spinner.recipe";
-
-/**
- * Combines the root props with Chakra UI's recipe variant props and Aria's progress bar props.
- *
- * This allows the component to accept both structural props from Root
- * and styling variants from the recipe.
- */
-type LoadingSpinnerVariantProps = LoadingSpinnerRootProps &
-  RecipeVariantProps<typeof loadingSpinnerRecipe> & {
-    [key: `data-${string}`]: string;
-  };
-
-/**
- * Main props interface for the LoadingSpinner component.
- * Extends LoadingSpinnerVariantProps to include both root props and variant props,
- * while adding support for React children.
- */
-export type LoadingSpinnerProps = LoadingSpinnerVariantProps;

package/src/components/nimbus-provider/color-mode.tsx

@@ -1,32 +0,0 @@
-"use client";
-import { ThemeProvider, useTheme, type ThemeProviderProps } from "next-themes";
-
-export interface ColorModeProviderProps extends ThemeProviderProps {}
-
-export function ColorModeProvider(props: ColorModeProviderProps) {
-  return (
-    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
-  );
-}
-
-export function useColorMode() {
-  const { resolvedTheme, setTheme } = useTheme();
-  const toggleColorMode = () => {
-    setTheme(resolvedTheme === "light" ? "dark" : "light");
-  };
-  return {
-    colorMode: resolvedTheme,
-    setColorMode: setTheme,
-    toggleColorMode,
-  };
-}
-
-export function useColorModeValue<T>(light: T, dark: T) {
-  const { colorMode } = useColorMode();
-  return colorMode === "light" ? light : dark;
-}
-
-export function ColorModeLabel() {
-  const { colorMode } = useColorMode();
-  return colorMode === "light" ? "Light Theme" : "DarkTheme";
-}

package/src/components/nimbus-provider/index.ts

@@ -1,2 +0,0 @@
-export * from "./nimbus-provider.tsx";
-export { useColorMode, useColorModeValue, ColorModeLabel } from "./color-mode";

package/src/components/nimbus-provider/nimbus-provider.mdx

@@ -1,21 +0,0 @@
----
-id: NimbusProvider
-title: NimbusProvider
-description: provides an environment for the rest of the components to work in
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Utilities
-  - NimbusProvider
-tags:
-  - system
-  - required
-  - setup
----
-
-# NimbusProvider
-
-Provides the necesseary context for the rest of the components to work in.
-
-<PropTable id="NimbusProvider" />

package/src/components/nimbus-provider/nimbus-provider.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import {
-  ChakraProvider,
-  // defaultSystem as defaultSystemChakra,
-} from "@chakra-ui/react";
-import { ColorModeProvider, type ColorModeProviderProps } from "./color-mode";
-import { system } from "../../theme";
-import { useEffect, useState } from "react";
-
-export function useColorScheme() {
-  const [colorScheme, setColorScheme] = useState(getCurrentColorScheme());
-
-  // Helper function to get the current color-scheme from the <html> tag
-  function getCurrentColorScheme() {
-    return (
-      document.documentElement.style.getPropertyValue("color-scheme") ||
-      localStorage.getItem("theme") ||
-      "light"
-    );
-  }
-
-  useEffect(() => {
-    const htmlElement = document.documentElement;
-
-    const observer = new MutationObserver(() => {
-      const newColorScheme = getCurrentColorScheme();
-      setColorScheme(newColorScheme);
-    });
-
-    // Observe changes to the 'style' attribute of the <html> element
-    observer.observe(htmlElement, {
-      attributes: true,
-      attributeFilter: ["style"],
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  return colorScheme;
-}
-
-export function NimbusProvider({ children, ...props }: ColorModeProviderProps) {
-  return (
-    <ChakraProvider value={system}>
-      <ColorModeProvider enableSystem={false} {...props}>
-        <>{children}</>
-      </ColorModeProvider>
-    </ChakraProvider>
-  );
-}

package/src/components/select/components/select.clear-button.tsx

@@ -1,31 +0,0 @@
-import { useContext } from "react";
-import { Close as CloseIcon } from "@commercetools/nimbus-icons";
-import { IconButton } from "@/components";
-import { SelectStateContext } from "react-aria-components";
-
-export const SelectClearButton = () => {
-  const state = useContext(SelectStateContext);
-
-  if (!state?.selectedKey) {
-    return null;
-  }
-
-  const onPressRequest = () => {
-    state?.setSelectedKey(null);
-  };
-
-  return (
-    <IconButton
-      pointerEvents="all"
-      size="2xs"
-      variant="ghost"
-      tone="primary"
-      aria-label="Clear Selection"
-      onPress={onPressRequest}
-    >
-      <CloseIcon />
-    </IconButton>
-  );
-};
-
-SelectClearButton.displayName = "Select.ClearButton";

package/src/components/select/components/select.option-group.tsx

@@ -1,48 +0,0 @@
-import { forwardRef, type ForwardedRef, type ReactNode } from "react";
-
-import {
-  ListBoxSection as RaListBoxSection,
-  Header as RaHeader,
-  Collection,
-} from "react-aria-components";
-import { SelectOptionGroupSlot } from "./../select.slots";
-import type { SelectOptionGroupProps } from "../select.types";
-import { fixedForwardRef } from "@/utils/fixedForwardRef";
-
-export const SelectOptionGroup = fixedForwardRef(
-  <T extends object>(
-    { label, items, children, ...props }: SelectOptionGroupProps<T>,
-    forwardedRef: ForwardedRef<HTMLDivElement>
-  ) => {
-    // Validate that children is a function when items is provided
-    if (items && typeof children !== "function") {
-      throw new Error(
-        'SelectOptionGroup: When "items" is provided, "children" must be a function'
-      );
-    }
-
-    return (
-      <RaListBoxSection ref={forwardedRef} {...props}>
-        <SelectOptionGroupSlot asChild>
-          <RaHeader>{label}</RaHeader>
-        </SelectOptionGroupSlot>
-
-        {items ? (
-          <Collection items={items}>
-            {(item: T) => {
-              if (typeof children === "function") {
-                return children(item);
-              }
-              return null;
-            }}
-          </Collection>
-        ) : (
-          (children as ReactNode)
-        )}
-      </RaListBoxSection>
-    );
-  }
-);
-
-// @ts-expect-error - doesn't work with this complex types
-SelectOptionGroup.displayName = "Select.OptionGroup";

package/src/components/select/components/select.option.tsx

@@ -1,21 +0,0 @@
-import { type ForwardedRef } from "react";
-import { ListBoxItem as RaListBoxItem } from "react-aria-components";
-import { SelectOptionSlot } from "./../select.slots";
-import type { SelectOptionProps } from "../select.types";
-import { fixedForwardRef } from "@/utils/fixedForwardRef";
-
-export const SelectOption = fixedForwardRef(
-  <T extends object>(
-    props: SelectOptionProps<T>,
-    forwardedRef: ForwardedRef<HTMLDivElement>
-  ) => {
-    return (
-      <SelectOptionSlot asChild ref={forwardedRef}>
-        <RaListBoxItem {...props} />
-      </SelectOptionSlot>
-    );
-  }
-);
-
-// @ts-expect-error - doesn't work with this complex types
-SelectOption.displayName = "Select.Option";

package/src/components/select/components/select.options.tsx

@@ -1,23 +0,0 @@
-import { type ForwardedRef } from "react";
-import { ListBox as RaListBox } from "react-aria-components";
-import { SelectOptionsSlot } from "./../select.slots";
-import type { SelectOptionsProps } from "../select.types";
-import { extractStyleProps } from "@/utils/extractStyleProps";
-import { fixedForwardRef } from "@/utils/fixedForwardRef";
-
-export const SelectOptions = fixedForwardRef(
-  <T extends object>(
-    props: SelectOptionsProps<T>,
-    forwardedRef: ForwardedRef<HTMLDivElement>
-  ) => {
-    const [styleProps, rest] = extractStyleProps(props);
-    return (
-      <SelectOptionsSlot asChild {...styleProps}>
-        <RaListBox ref={forwardedRef} {...rest} />
-      </SelectOptionsSlot>
-    );
-  }
-);
-
-// @ts-expect-error - doesn't work with this complex types
-SelectOptions.displayName = "Select.Options";