@commercetools/nimbus 0.0.2 → 0.0.3

package/src/components/select/select.tsx

@@ -1,18 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

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

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

@@ -1,133 +0,0 @@
----
-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

@@ -1,143 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

package/src/components/stack/stack.mdx

@@ -1,88 +0,0 @@
----
-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

@@ -1,82 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

package/src/components/table/table.mdx

@@ -1,23 +0,0 @@
----
-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" />