@commercetools/nimbus 0.0.2 → 0.0.3

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";

package/src/components/select/components/select.root.tsx

@@ -1,81 +0,0 @@
-import { forwardRef } from "react";
-import { chakra, useSlotRecipe } from "@chakra-ui/react";
-
-import {
-  KeyboardArrowDown as DropdownIndicatorIcon,
-  Loop as SpinnerIcon,
-} from "@commercetools/nimbus-icons";
-
-import { Flex, Box } from "@/components";
-import {
-  Button as RaButton,
-  Popover as RaPopover,
-  Select as RaSelect,
-  SelectValue as RaSelectValue,
-} from "react-aria-components";
-import {
-  SelectRootSlot,
-  SelectTriggerSlot,
-  SelectTriggerLabelSlot,
-} from "./../select.slots";
-import { SelectClearButton } from "./select.clear-button";
-import { type SelectRootProps } from "./../select.types";
-import { selectSlotRecipe } from "../select.recipe";
-import { extractStyleProps } from "@/utils/extractStyleProps";
-
-export const SelectRoot = forwardRef<HTMLDivElement, SelectRootProps>(
-  ({ children, isLoading, isDisabled, ...props }, ref) => {
-    const recipe = useSlotRecipe({ recipe: selectSlotRecipe });
-    const [recipeProps, restRecipeProps] = recipe.splitVariantProps(props);
-    const [styleProps, restProps] = extractStyleProps(restRecipeProps);
-
-    const raSelectProps = {
-      ...restProps,
-      isDisabled: isLoading || isDisabled,
-    };
-
-    return (
-      <SelectRootSlot asChild ref={ref} {...recipeProps} {...styleProps}>
-        <RaSelect {...raSelectProps}>
-          <chakra.div position="relative">
-            <SelectTriggerSlot zIndex={0} asChild>
-              <RaButton>
-                <SelectTriggerLabelSlot asChild>
-                  <RaSelectValue />
-                </SelectTriggerLabelSlot>
-              </RaButton>
-            </SelectTriggerSlot>
-            <Flex
-              position="absolute"
-              top="0"
-              bottom="0"
-              zIndex={1}
-              right="400"
-              pointerEvents="none"
-            >
-              <Flex width="600" my="auto">
-                <SelectClearButton />
-              </Flex>
-
-              <Flex my="auto" w="600" h="600" pointerEvents="none">
-                <Box color="neutral.9" asChild m="auto" w="400" h="400">
-                  {isLoading ? (
-                    <Box asChild animation="spin" animationDuration="slowest">
-                      <SpinnerIcon />
-                    </Box>
-                  ) : (
-                    <DropdownIndicatorIcon />
-                  )}
-                </Box>
-              </Flex>
-            </Flex>
-          </chakra.div>
-
-          <RaPopover>{children}</RaPopover>
-        </RaSelect>
-      </SelectRootSlot>
-    );
-  }
-);
-
-SelectRoot.displayName = "Select.Root";

package/src/components/select/index.ts

@@ -1,2 +0,0 @@
-export * from "./select";
-export * from "./select.types";

package/src/components/select/select.mdx

@@ -1,170 +0,0 @@
----
-id: Components-Select
-title: Select
-description:
-  displays a collapsible list of options and allows a user to select one of
-  them.
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Inputs
-  - Select
-tags:
-  - component
----
-
-# Select
-
-A select displays a collapsible list of options and allows a user to select one
-of them.
-
-## Basic Usage
-
-```jsx-live
-const App = () => (
-  <Select.Root aria-label="Select a fruit" data-testid="select">
-    <Select.Options>
-      <Select.Option>Apples</Select.Option>
-      <Select.Option>Bananas</Select.Option>
-      <Select.Option>Oranges</Select.Option>
-      <Select.Option>Cherries</Select.Option>
-    </Select.Options>
-  </Select.Root>
-)
-```
-
-### Sizes
-
-Available sizes.
-
-```jsx-live
-const App = () => {
-
-  const sizes = ['md', 'sm'];
-
-  return (
-    <Stack direction="horizontal" alignItems="center">
-      {sizes.map(size => (
-        <Select.Root size={size} key={size} aria-label="Select a fruit" data-testid="select">
-          <Select.Options>
-            <Select.Option>Apples</Select.Option>
-            <Select.Option>Bananas</Select.Option>
-            <Select.Option>Oranges</Select.Option>
-            <Select.Option>Cherries</Select.Option>
-          </Select.Options>
-        </Select.Root>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Variants
-
-Available variants.
-
-```jsx-live
-const App = () => {
-
-  const variants = ['outline', 'ghost'];
-
-  return (
-    <Stack direction="horizontal" alignItems="center">
-      {variants.map(variant => (
-        <Select.Root variant={variant} key={variant} aria-label="Select a fruit" data-testid="select">
-          <Select.Options>
-            <Select.Option>Apples</Select.Option>
-            <Select.Option>Bananas</Select.Option>
-            <Select.Option>Oranges</Select.Option>
-            <Select.Option>Cherries</Select.Option>
-          </Select.Options>
-        </Select.Root>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Label + Descriptions
-
-You can add descriptions to the labels.
-
-```jsx-live
-const App = () => {
-  return (
-    <Select.Root aria-label="Select some fruit(s)" data-testid="select">
-        <Select.Options>
-          {/** Variant A - plain html-tags with slot property */}
-          <Select.Option textValue="Apple">
-            <p slot="label">Apple</p>
-            <p slot="description">A classic and versatile fruit.</p>
-          </Select.Option>
-          {/** Variant B - text component with slot property */}
-          <Select.Option textValue="Banana">
-            <Text slot="label">Banana</Text>
-            <Text slot="description">A good source of potassium.</Text>
-          </Select.Option>
-          <Select.Option textValue="Oranges">
-            <Text slot="label">Oranges</Text>
-            <Text slot="description">Rich in vitamin C.</Text>
-          </Select.Option>
-          <Select.Option textValue="Strawberries">
-            <Text slot="label">Strawberries</Text>
-            <Text slot="description">Sweet and full of antioxidants.</Text>
-          </Select.Option>
-          <Select.Option textValue="Grapes">
-            <Text slot="label">Grapes</Text>
-            <Text slot="description">
-              Available in various colors and flavors.
-            </Text>
-          </Select.Option>
-        </Select.Options>
-      </Select.Root>
-  )
-}
-```
-
-### Controlled usage
-
-```jsx-live
-const App = () => {
-  const [animal, setAnimal] = useState<Key>("Bison");
-
-  const options = [
-    { id: 1, name: "Koala" },
-    { id: 2, name: "Kangaroo" },
-    { id: 3, name: "Platypus" },
-    { id: 4, name: "Bald Eagle" },
-    { id: 5, name: "Bison" },
-    { id: 6, name: "Skunk" },
-  ];
-
-
-  return (
-    <Box>
-      <Box mb="400">Selection: {animal}</Box>
-      <Select.Root
-        defaultSelectedKey={animal}
-        selectedKey={animal}
-        onSelectionChange={setAnimal}
-        aria-label="Select your new pet"
-        data-testid="select"
-      >
-        <Select.Options items={options}>
-          {(item) => (
-            <Select.Option id={item.name}>{item.name}</Select.Option>
-          )}
-        </Select.Options>
-      </Select.Root>
-    </Box>
-  );
-}
-```
-
-## Props
-
-<PropTables
-  root="Select"
-  ids="SelectRoot, SelectOptions, SelectOptionGroup, SelectOption"
-/>