@commercetools/nimbus 0.0.1

package/src/components/select/select.tsx

@@ -0,0 +1,18 @@
+import { SelectRoot as _SelectRoot } from "./components/select.root";
+import { SelectOptions as _SelectOptions } from "./components/select.options";
+import { SelectOption as _SelectOption } from "./components/select.option";
+import { SelectOptionGroup as _SelectOptionGroup } from "./components/select.option-group";
+
+export const Select = {
+  Root: _SelectRoot,
+  Options: _SelectOptions,
+  Option: _SelectOption,
+  OptionGroup: _SelectOptionGroup,
+};
+
+/**
+ * todo: get rid of this, this is needed for the react-docgen-typescript script
+ * that is parsing the typescript types for our documentation. The _ underscores
+ * serve as a reminder that this exports are awkward and should not be used.
+ */
+export { _SelectRoot, _SelectOptions, _SelectOption, _SelectOptionGroup };

package/src/components/select/select.types.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import type {
+  SelectOptionsSlotProps,
+  SelectOptionSlotProps,
+  SelectRootSlotProps,
+  SelectOptionGroupSlotProps,
+} from "./select.slots";
+
+import {
+  type SelectProps as RaSelectProps,
+  type ListBoxProps as RaListBoxProps,
+  type ListBoxItemProps as RaListBoxItemProps,
+  type ListBoxSectionProps as RaListBoxSectionProps,
+} from "react-aria-components";
+
+export interface SelectRootProps extends SelectRootSlotProps, RaSelectProps {
+  /** set to true if Select is currently busy with something */
+  isLoading?: boolean;
+  /** Children must be ReactNode, no render props/functions allowed */
+  children: ReactNode;
+}
+
+// Fix the incompatible event handler types by using a more specific type
+export interface SelectOptionsProps<T>
+  extends RaListBoxProps<T>,
+    Omit<SelectOptionsSlotProps, keyof RaListBoxProps<T>> {}
+
+export interface SelectOptionProps<T>
+  extends Omit<RaListBoxItemProps<T>, keyof SelectOptionSlotProps>,
+    SelectOptionSlotProps {}
+
+export interface SelectOptionGroupProps<T>
+  extends RaListBoxSectionProps<T>,
+    Omit<SelectOptionGroupSlotProps, keyof RaListBoxSectionProps<T>> {
+  /** the label for the section */
+  label: string;
+}

package/src/components/simple-grid/index.ts

@@ -0,0 +1 @@
+export * from "./simple-grid";

package/src/components/simple-grid/simple-grid.mdx

@@ -0,0 +1,133 @@
+---
+id: SimpleGrid
+title: SimpleGrid
+description: displays a simple grid / matrix
+documentState: InitialDraft
+order: 999
+menu:
+  - Components
+  - Layout
+  - SimpleGrid
+tags:
+  - grid
+  - simple
+---
+
+# SimpleGrid
+
+SimpleGrid offers an intuitive way to easily create responsive grid layouts.
+
+## Basic Usage
+
+Use SimpleGrid → When you need a quick, responsive, equal-sized grid (e.g.,
+product listings, image galleries).
+
+```jsx
+import { Grid } from "@commercetools/nimbus";
+```
+
+```jsx-live
+const App = () => (
+  <SimpleGrid gap="100">
+    <Box key="1" p="400" bg="neutral.7">
+      Item 1
+    </Box>
+    <Box key="2" p="400" bg="neutral.7">
+      Item 2
+    </Box>
+  </SimpleGrid>
+)
+```
+
+## With Columns
+
+Use the columns prop to define the number of columns in the grid layout.
+
+```jsx-live
+const App = () => (
+  <SimpleGrid gap="100" columns={2}>
+    <Box key="1" p="400" bg="neutral.7">
+      Item 1
+    </Box>
+    <Box key="2" p="400" bg="neutral.7">
+      Item 2
+    </Box>
+    <Box key="3" p="400" bg="neutral.7">
+      Item 3
+    </Box>
+    <Box key="4" p="400" bg="neutral.7">
+      Item 4
+    </Box>
+  </SimpleGrid>
+)
+```
+
+## Auto Responsive layout
+
+An Auto-Responsive Grid dynamically adjusts the number of columns and item sizes
+based on the viewport width, ensuring an adaptive and fluid layout. adjust
+viewport to see layout rearrangements.
+
+```jsx-live
+const App = () => (
+  <SimpleGrid gap="100" minChildWidth="sm">
+    <Box key="1" p="400" bg="neutral.7">
+      Item 1
+    </Box>
+    <Box key="2" p="400" bg="neutral.7">
+      Item 2
+    </Box>
+    <Box key="3" p="400" bg="neutral.7">
+      Item 3
+    </Box>
+    <Box key="4" p="400" bg="neutral.7">
+      Item 4
+    </Box>
+  </SimpleGrid>
+)
+```
+
+## Simple Grid With ColSpan
+
+```jsx-live
+const App = () => (
+  <SimpleGrid
+    columns={{ base: 2, md: 4 }}
+    gap={{ base: "600", md: "1000" }}
+  >
+    <SimpleGrid.Item colSpan={{ base: 1, md: 3 }}>
+      <Box height="20" p="400" bg="neutral.7">
+        Column 1
+      </Box>
+    </SimpleGrid.Item>
+    <SimpleGrid.Item colSpan={{ base: 1, md: 1 }}>
+      <Box height="20" p="400" bg="neutral.7">
+        Column 2
+      </Box>
+    </SimpleGrid.Item>
+  </SimpleGrid>
+)
+```
+
+## With Row And Column Gap
+
+```jsx-live
+const App = () => (
+  <SimpleGrid rowGap="400" columnGap="200" columns={2}>
+    <Box key="1" p="400" bg="neutral.7">
+      Item 1
+    </Box>
+    <Box key="2" p="400" bg="neutral.7">
+      Item 2
+    </Box>
+    <Box key="3" p="400" bg="neutral.7">
+      Item 3
+    </Box>
+    <Box key="4" p="400" bg="neutral.7">
+      Item 4
+    </Box>
+  </SimpleGrid>
+)
+```
+
+<PropTable id="SimpleGrid" />

package/src/components/simple-grid/simple-grid.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../box";
+import { SimpleGrid } from "./simple-grid";
+import { within, expect } from "@storybook/test";
+
+/**
+ * Storybook metadata configuration
+ * - title: determines the location in the sidebar
+ * - component: references the component being documented
+ */
+const meta: Meta<typeof SimpleGrid> = {
+  title: "components/SimpleGrid",
+  component: SimpleGrid,
+};
+
+export default meta;
+
+/**
+ * Story type for TypeScript support
+ * StoryObj provides type checking for our story configurations
+ */
+type Story = StoryObj<typeof SimpleGrid>;
+
+/**
+ * Base story
+ * Demonstrates the most basic implementation
+ * Uses the args pattern for dynamic control panel inputs
+ */
+export const Base: Story = {
+  args: {
+    gap: "100",
+    ["aria-label"]: "test-layout",
+    // @ts-expect-error - data-testid is not a valid prop
+    ["data-testid"]: "test",
+
+    children: [
+      <Box key="1" p="400" bg="neutral.7">
+        Item 1
+      </Box>,
+      <Box key="2" p="400" bg="neutral.7">
+        Item 2
+      </Box>,
+    ],
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const layout = canvas.getByTestId("test");
+
+    await step("Forwards data- & aria-attributes", async () => {
+      await expect(layout).toHaveAttribute("data-testid", "test");
+      await expect(layout).toHaveAttribute("aria-label", "test-layout");
+    });
+  },
+};
+
+export const WithColumns: Story = {
+  args: {
+    gap: "100",
+    columns: 2,
+    children: [
+      <Box key="1" p="400" bg="neutral.7">
+        Item 1
+      </Box>,
+      <Box key="2" p="400" bg="neutral.7">
+        Item 2
+      </Box>,
+      <Box key="3" p="400" bg="neutral.7">
+        Item 3
+      </Box>,
+      <Box key="4" p="400" bg="neutral.7">
+        Item 4
+      </Box>,
+    ],
+  },
+};
+
+/**
+ * Adjust the viewport to see variations in the layout
+ */
+export const AutoResponsive: Story = {
+  args: {
+    gap: "100",
+    minChildWidth: "sm",
+    children: [
+      <Box key="1" p="400" bg="neutral.7">
+        Item 1
+      </Box>,
+      <Box key="2" p="400" bg="neutral.7">
+        Item 2
+      </Box>,
+      <Box key="3" p="400" bg="neutral.7">
+        Item 3
+      </Box>,
+      <Box key="4" p="400" bg="neutral.7">
+        Item 4
+      </Box>,
+    ],
+  },
+};
+
+export const SimpleGridWithColSpan: Story = {
+  render: () => {
+    return (
+      <SimpleGrid
+        columns={{ base: 2, md: 4 }}
+        gap={{ base: "600", md: "1000" }}
+      >
+        <SimpleGrid.Item colSpan={{ base: 1, md: 3 }}>
+          <Box height="20" p="400" bg="neutral.7">
+            Column 1
+          </Box>
+        </SimpleGrid.Item>
+        <SimpleGrid.Item colSpan={{ base: 1, md: 1 }}>
+          <Box height="20" p="400" bg="neutral.7">
+            Column 2
+          </Box>
+        </SimpleGrid.Item>
+      </SimpleGrid>
+    );
+  },
+};
+
+export const RowAndColumnGap: Story = {
+  args: {
+    columns: 2,
+    columnGap: "200",
+    rowGap: "400",
+    children: [
+      <Box key="1" p="400" bg="neutral.7">
+        Item 1
+      </Box>,
+      <Box key="2" p="400" bg="neutral.7">
+        Item 2
+      </Box>,
+      <Box key="3" p="400" bg="neutral.7">
+        Item 3
+      </Box>,
+      <Box key="4" p="400" bg="neutral.7">
+        Item 4
+      </Box>,
+    ],
+  },
+};

package/src/components/simple-grid/simple-grid.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import {
+  SimpleGrid as ChakraSimpleGrid,
+  GridItem,
+  type SimpleGridProps as ChakraSimpleGridProps,
+} from "@chakra-ui/react";
+
+/**
+ * SimpleGrid
+ * ============================================================
+ * The SimpleGrid Layout Component provides a flexible and responsive way to structure content.
+ *
+ * Features:
+ *
+ * - allows forwarding refs to the underlying DOM element
+ */
+export interface SimpleGridProps extends ChakraSimpleGridProps {
+  children?: React.ReactNode;
+}
+
+const GridComponent = forwardRef<HTMLDivElement, SimpleGridProps>(
+  (props, ref) => {
+    return <ChakraSimpleGrid ref={ref} {...props} />;
+  }
+);
+
+GridComponent.displayName = "SimpleGrid";
+
+export const SimpleGrid = Object.assign(GridComponent, {
+  Item: GridItem,
+});

package/src/components/stack/index.ts

@@ -0,0 +1 @@
+export { Stack, type StackProps } from "./stack";

package/src/components/stack/stack.mdx

@@ -0,0 +1,88 @@
+---
+id: Components-Stack
+title: Stack
+description:
+  An easily customizable Stack component, re-exported from Chakra UI, that
+  provides a consistent layout structure across different products.
+documentState: InitialDraft
+order: 999
+menu:
+  - Components
+  - Layout
+  - Stack
+tags:
+  - component
+---
+
+# Stack
+
+An easily customizable Stack component, re-exported from
+[Chakra UI stack component](https://www.chakra-ui.com/docs/components/stack) ,
+that provides a consistent and responsive layout structure across different
+products.
+
+Stacks allow you to effortlessly build flexible layouts with automatic
+distribution. You can arrange elements horizontally or vertically, adding
+spacing and/or separators between each item.
+
+## Basic Usage
+
+```jsx
+import { Stack } from "@commercetools/nimbus";
+```
+
+```jsx-live
+const App = () => (
+  <Stack>
+    {" "}
+    <Box key="1" p="400" bg="primary.7">
+      Item 1
+    </Box>
+    <Box key="1" p="400" bg="primary.7">
+      Item 2
+    </Box>
+  </Stack>
+);
+```
+
+### With Direction
+
+Use the direction prop to change the layout direction. The default direction is
+"column" (vertical). Set it to "row" for horizontal stacking.
+
+```jsx-live
+const App = () => (
+  <Stack direction="row">
+    <Box key="1" p="400" bg="primary.7">Item 1</Box>
+    <Box key="1" p="400" bg="primary.7">Item 2</Box>
+    <Box key="1" p="400" bg="primary.7">Item 3</Box>
+  </Stack>
+)
+```
+
+### With Spacing
+
+```jsx-live
+const App = () => (
+  <Stack gap="100">
+    <Box key="1" p="400" bg="primary.7">Spaced Item 1</Box>
+    <Box key="1" p="400" bg="primary.7">Spaced Item 2</Box>
+    <Box key="1" p="400" bg="primary.7">Spaced Item 3</Box>
+  </Stack>
+)
+```
+
+### With Separator
+
+Add a visual separator between stacked items using the separator prop. You can
+also use custom separators like icons or styled elements.
+
+```jsx-live
+const App = () => (
+ <Stack separator={<hr />}>
+    <Box key="1" p="400" bg="primary.7">Spaced Item with separator 1</Box>
+    <Box key="1" p="400" bg="primary.7">Spaced Item with separator 2</Box>
+    <Box key="1" p="400" bg="primary.7">Spaced Item with separator 3</Box>
+ </Stack>
+)
+```

package/src/components/stack/stack.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../box";
+import { Stack } from "./stack";
+
+const meta: Meta<typeof Stack> = {
+  title: "Components/Stack",
+  component: Stack,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Stack>;
+
+export const Base: Story = {
+  args: {
+    children: [
+      <Box key="1" p="400" bg="primary.7">
+        Item 1
+      </Box>,
+      <Box key="2" p="400" bg="primary.7">
+        Item 2
+      </Box>,
+    ],
+  },
+};
+
+export const WithDirection: Story = {
+  args: {
+    direction: "row",
+    children: [
+      <Box key="1" p="400" bg="primary.7">
+        Item 1
+      </Box>,
+      <Box key="2" p="400" bg="primary.7">
+        Item 2
+      </Box>,
+      <Box key="3" p="400" bg="primary.7">
+        Item 3
+      </Box>,
+    ],
+  },
+  argTypes: {
+    direction: {
+      options: ["row", "column", "row-reverse", "column-reverse"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+export const WithSpacing: Story = {
+  args: {
+    gap: "100",
+    children: [
+      <Box key="1" p="400" bg="primary.7">
+        Spaced Item 1
+      </Box>,
+      <Box key="2" p="400" bg="primary.7">
+        Spaced Item 2
+      </Box>,
+      <Box key="3" p="400" bg="primary.7">
+        Spaced Item 3
+      </Box>,
+    ],
+  },
+};
+
+export const WithSeparator: Story = {
+  args: {
+    separator: <hr />,
+    children: [
+      <Box key="1" p="400" bg="primary.7">
+        Spaced Item with separator 1
+      </Box>,
+      <Box key="2" p="400" bg="primary.7">
+        Spaced Item with separator 2
+      </Box>,
+      <Box key="3" p="400" bg="primary.7">
+        Spaced Item with separator 3
+      </Box>,
+    ],
+  },
+};

package/src/components/stack/stack.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import {
+  Stack as ChakraStack,
+  type StackProps as ChakraStackProps,
+} from "@chakra-ui/react";
+
+export interface StackProps extends ChakraStackProps {
+  children?: React.ReactNode;
+}
+
+export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
+  return <ChakraStack ref={ref} {...props} />;
+});
+
+Stack.displayName = "Stack";

package/src/components/table/index.ts

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

package/src/components/table/table.mdx

@@ -0,0 +1,23 @@
+---
+id: Table
+title: Table
+description: displays a table
+documentState: InitialDraft
+order: 999
+menu:
+  - Components
+  - Data Display
+  - Table
+tags:
+  - table
+  - tabular data
+---
+
+# Table
+
+## Props
+
+Render the PropTable with a `<PropTable id="TableRoot"/>` tag or - if multiple
+components - `<PropTables id="TableRoot, TableHeader"/>`.
+
+<PropTables ids="TableRoot, TableHeader, TableColumnHeader, TableRow, TableBody, TableCell, TableFooter" />