@commercetools/nimbus 0.0.1 → 0.0.3

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

package/src/components/select/select.recipe.tsx

@@ -1,216 +0,0 @@
-import { defineSlotRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the Select component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const selectSlotRecipe = defineSlotRecipe({
-  slots: [
-    "root",
-    "trigger",
-    "triggerLabel",
-    "options",
-    "optionGroup",
-    "option",
-  ],
-  // Unique class name prefix for the component
-  className: "nimbus-select",
-
-  // Base styles applied to all instances of the component
-  base: {
-    // RA <Select>
-    root: {
-      colorPalette: "primary",
-      display: "inline-block",
-      position: "relative",
-      maxWidth: "100%",
-      borderRadius: "200",
-      // [data-focused]
-      // [data-focus-visible]
-      // [data-open]
-      // [data-invalid]
-      // [data-required]
-      "&[data-disabled]": {
-        layerStyle: "disabled",
-        pointerEvents: "none",
-      },
-    },
-    trigger: {
-      cursor: "button",
-      display: "inline-flex",
-      focusRing: "outside",
-      alignItems: "flex-start",
-      borderRadius: "200",
-      color: "neutral.12",
-      width: "100%",
-      userSelect: "none",
-      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-
-      "& span": {
-        display: "inline-block",
-        my: "auto",
-      },
-      '& [slot="description"]': {
-        display: "none",
-      },
-
-      "[data-invalid] &": {
-        "--border-width": "sizes.50",
-        "--border-color": "colors.error.7",
-      },
-
-      // [data-hovered]
-      // [data-pressed]
-      // [data-focused]
-      // [data-focus-visible]
-      // [data-disabled]
-      // [data-pending]
-    },
-    triggerLabel: {
-      // *Magic*
-      // the trigger-label defines the overall width of the select,
-      // but since we position 2 buttons/icons next to it, we need to account for
-      // their width as well and reserve some space for them
-      // = label-button-gap + button-size + icon-size
-      // = 8px + 24px + 24px
-      // = 56px * 25 = 1400 token
-      "--button-safespace": "sizes.1400",
-      color: "neutral.12",
-      textAlign: "left",
-      marginRight: "var(--button-safespace)",
-      maxWidth: "100%",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-
-      "&[data-placeholder]": {
-        opacity: 0.5,
-      },
-      "[data-invalid] &": {
-        color: "error.11",
-      },
-    },
-    // Popover
-    options: {
-      "--scrollbar-color": "colors.neutral.8",
-      "--scrollbar-bg": "colors.neutral.3",
-
-      bg: "bg",
-      borderRadius: "200",
-      boxShadow: "5",
-      minWidth: "var(--trigger-width)",
-      p: "200",
-      focusRing: "outside",
-      maxHeight: "40svh",
-      overflowY: "auto",
-      scrollbarWidth: "thin",
-      scrollbarColor: "var(--scrollbar-color) var(--scrollbar-bg)",
-      // [data-trigger="..."]
-      // [data-placement="left | right | top | bottom"]
-      // [data-entering]
-      // [data-exiting]
-    },
-    // Option group header
-    optionGroup: {
-      textStyle: "xs",
-      color: "neutral.11",
-      fontWeight: "600",
-      lineHeight: "350",
-      letterSpacing: "25",
-      textTransform: "uppercase",
-      p: "200",
-      borderBottom: "solid-25",
-      borderColor: "neutral.6",
-      mx: "-200",
-      mt: "200",
-      mb: "300",
-    },
-    // ListBoxItem
-    option: {
-      focusRing: "outside",
-      cursor: "menuitem",
-      color: "neutral.12",
-      textStyle: "sm",
-      p: "200",
-      borderRadius: "200",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-
-      '&[aria-selected="true"], &[data-focused="true"]': {
-        bg: "primary.4",
-      },
-
-      '& [slot="label"]': {
-        display: "block",
-      },
-
-      '& [slot="description"]': {
-        display: "block",
-        color: "neutral.11",
-        textStyle: "xs",
-      },
-
-      '&[data-disabled="true"]': {
-        layerStyle: "disabled",
-      },
-    },
-  },
-
-  // Available variants for customizing the component's appearance
-  variants: {
-    // Size variants from smallest to largest
-    size: {
-      sm: {
-        root: {},
-        trigger: {
-          h: "800",
-          px: "400",
-          textStyle: "sm",
-        },
-      },
-      md: {
-        root: {},
-        trigger: {
-          h: "1000",
-          px: "400",
-          textStyle: "md",
-        },
-      }, // Medium
-    },
-
-    // Visual style variants
-    variant: {
-      outline: {
-        root: {
-          bg: "bg",
-          "&:hover": {
-            bg: "primary.2",
-          },
-        },
-        trigger: {
-          "--border-width": "sizes.25",
-          "--border-color": "colors.neutral.7",
-        },
-      },
-      ghost: {
-        root: {
-          bg: "transparent",
-          "&:hover": {
-            bg: "primaryAlpha.2",
-          },
-        },
-        trigger: {
-          "--border-width": "sizes.25",
-          "--border-color": "transparent",
-        },
-      },
-    },
-  },
-
-  // Default variant values when not explicitly specified
-  defaultVariants: {
-    size: "md",
-    variant: "outline",
-  },
-});

package/src/components/select/select.slots.tsx

@@ -1,58 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-import {
-  createSlotRecipeContext,
-  type HTMLChakraProps,
-  type RecipeVariantProps,
-} from "@chakra-ui/react";
-import { selectSlotRecipe } from "./select.recipe";
-import { type SelectProps as RaSelectProps } from "react-aria-components";
-
-const { withProvider, withContext } = createSlotRecipeContext({
-  key: "select",
-});
-
-// Select
-export interface SelectRootSlotProps
-  extends HTMLChakraProps<
-    "div",
-    RecipeVariantProps<typeof selectSlotRecipe> & RaSelectProps<object>
-  > {}
-export const SelectRootSlot = withProvider<HTMLDivElement, SelectRootSlotProps>(
-  "div",
-  "root"
-);
-
-// Trigger Button
-export interface SelectTriggerSlotProps extends HTMLChakraProps<"button"> {}
-export const SelectTriggerSlot = withContext<
-  HTMLButtonElement,
-  SelectTriggerSlotProps
->("button", "trigger");
-
-// Trigger Button Label
-export interface SelectTriggerLabelSlotProps extends HTMLChakraProps<"span"> {}
-export const SelectTriggerLabelSlot = withContext<
-  HTMLButtonElement,
-  SelectTriggerLabelSlotProps
->("span", "triggerLabel");
-
-// ListBox
-export interface SelectOptionsSlotProps extends HTMLChakraProps<"div"> {}
-export const SelectOptionsSlot = withContext<
-  HTMLDivElement,
-  SelectOptionsSlotProps
->("div", "options");
-
-// ListBoxItem
-export interface SelectOptionSlotProps extends HTMLChakraProps<"div"> {}
-export const SelectOptionSlot = withContext<
-  HTMLDivElement,
-  SelectOptionSlotProps
->("div", "option");
-
-// OptionGroup
-export interface SelectOptionGroupSlotProps extends HTMLChakraProps<"div"> {}
-export const SelectOptionGroupSlot = withContext<
-  HTMLDivElement,
-  SelectOptionGroupSlotProps
->("div", "optionGroup");