@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

package/src/components/dialog/dialog.tsx

@@ -1,61 +0,0 @@
-import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react";
-import { forwardRef } from "react";
-import { Button } from "../button";
-
-interface DialogContentProps extends ChakraDialog.ContentProps {
-  portalled?: boolean;
-  portalRef?: React.RefObject<HTMLElement>;
-  backdrop?: boolean;
-}
-
-export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
-  function DialogContent(props, ref) {
-    const {
-      children,
-      portalled = true,
-      portalRef,
-      backdrop = true,
-      ...rest
-    } = props;
-
-    return (
-      <Portal disabled={!portalled} container={portalRef}>
-        {backdrop && <ChakraDialog.Backdrop />}
-        <ChakraDialog.Positioner>
-          <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
-            {children}
-          </ChakraDialog.Content>
-        </ChakraDialog.Positioner>
-      </Portal>
-    );
-  }
-);
-
-export const DialogCloseTrigger = forwardRef<
-  HTMLButtonElement,
-  ChakraDialog.CloseTriggerProps
->(function DialogCloseTrigger(props, ref) {
-  return (
-    <ChakraDialog.CloseTrigger
-      position="absolute"
-      top="2"
-      insetEnd="2"
-      {...props}
-      asChild
-    >
-      <Button size="xs" ref={ref}>
-        {props.children}
-      </Button>
-    </ChakraDialog.CloseTrigger>
-  );
-});
-
-export const DialogRoot = ChakraDialog.Root;
-export const DialogFooter = ChakraDialog.Footer;
-export const DialogHeader = ChakraDialog.Header;
-export const DialogBody = ChakraDialog.Body;
-export const DialogBackdrop = ChakraDialog.Backdrop;
-export const DialogTitle = ChakraDialog.Title;
-export const DialogDescription = ChakraDialog.Description;
-export const DialogTrigger = ChakraDialog.Trigger;
-export const DialogActionTrigger = ChakraDialog.ActionTrigger;

package/src/components/dialog/index.ts

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

package/src/components/em/em.mdx

@@ -1,17 +0,0 @@
----
-id: Em
-title: Em
-description: renders em tags
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Typography
-  - Em
-tags:
-  - em
----
-
-# Em
-
-Add description later.

package/src/components/em/em.tsx

@@ -1 +0,0 @@
-export { Em } from "@chakra-ui/react";

package/src/components/em/index.ts

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

package/src/components/flex/flex.mdx

@@ -1,41 +0,0 @@
----
-id: Flex
-title: Flex
-description:
-  the Flex component is used to create layouts based on css display flex
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Layout
-  - Flex
-tags:
-  - flex
-  - flexbox
-  - layout
-  - container
-  - div
-  - low level
----
-
-# Flex
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec
-nunc tincidunt tincidunt. Nullam nec pur
-
-## Usage
-
-```jsx
-import { Flex } from "@commercetools/nimbus";
-
-const Component = () => (
-  <Flex>
-    <p>Content</p>
-  </Flex>
-);
-```
-
-## Second Subheading
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec
-nunc tincidunt tincidunt. Nullam nec pur

package/src/components/flex/flex.tsx

@@ -1 +0,0 @@
-export { Flex } from "@chakra-ui/react";

package/src/components/flex/index.ts

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

package/src/components/grid/grid.mdx

@@ -1,156 +0,0 @@
----
-id: Components-Grid
-title: Grid
-description:
-  An easily customizable Grid component, re-exported from Chakra UI, that
-  provides a consistent layout structure across different products.
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Layout
-  - Grid
-tags:
-  - component
----
-
-# Grid
-
-The Grid Layout Component provides a flexible and responsive way to structure
-content using a two-dimensional grid system. It allows elements to be arranged
-in rows and columns, enabling dynamic and efficient layouts for different screen
-sizes.
-
-The component accepts all the chakra supported properties and `Grid.Item` as
-children elements
-
-## Basic Usage
-
-Use Grid → When you need fine control over layout, spanning, and custom grid
-behaviors.
-
-```jsx
-import { Grid } from "@commercetools/nimbus";
-```
-
-To use the Grid layout, ensure to wrap the individual grid items inside of the
-`<Grid.Item>` component
-
-```jsx-live
-const App = () => (
-  <Grid gap="100">
-    <Grid.Item>
-      <Box key="1" p="400" bg="neutral.7">
-        Item 1
-      </Box>
-    </Grid.Item>
-    <Grid.Item>
-      <Box key="1" p="400" bg="neutral.7">
-        Item 2
-      </Box>
-    </Grid.Item>
-  </Grid>
-)
-```
-
-### With Columns
-
-```jsx-live
-const App = () => (
-  <Grid gap="100" templateColumns="repeat(2, 1fr)">
-    <Grid.Item>
-      <Box key="1" p="400" bg="neutral.7">
-        Item 1
-      </Box>
-    </Grid.Item>
-    <Grid.Item>
-      <Box key="1" p="400" bg="neutral.7">
-        Item 2
-      </Box>
-    </Grid.Item>
-  </Grid>
-)
-```
-
-### With Varrying Layout
-
-Showcases how elements can span multiple rows and columns within a structured
-grid. This layout is useful for dashboards, content cards, or complex UI
-components where elements need different sizes while maintaining alignment.
-
-```jsx-live
-const App = () => (
-  <Grid
-    h="200px"
-    templateRows="repeat(2, 1fr)"
-    templateColumns="repeat(5, 1fr)"
-    gap={4}
-  >
-    <Grid.Item rowSpan={2} colSpan={1}>
-      <Box p="400" bg="neutral.7">
-        colSpan=1
-      </Box>
-    </Grid.Item>
-    <Grid.Item colSpan={2}>
-      <Box p="400" bg="neutral.7">
-        colSpan=2
-      </Box>
-    </Grid.Item>
-    <Grid.Item colSpan={2}>
-      <Box p="400" bg="neutral.7">
-        colSpan=2
-      </Box>
-    </Grid.Item>
-    <Grid.Item colSpan={4}>
-      <Box p="400" bg="neutral.7">
-        colSpan=4
-      </Box>
-    </Grid.Item>
-  </Grid>
-)
-```
-
-### With TemplateAreas properties
-
-Demonstrate layout with template areas - shows how to create a common page
-layout pattern
-
-```jsx-live
-const App = () => (
- <Grid
-    h="400px"
-    templateAreas={`
-      "header header"
-      "nav main"
-      "footer footer"
-    `}
-    templateColumns="200px 1fr"
-    gap="400"
-  >
-    <Grid.Item gridArea="header">
-      <Box p="400" bg="neutral.7" h="full">
-        Header
-      </Box>
-    </Grid.Item>
-    <Grid.Item gridArea="nav">
-      <Box p="400" bg="neutral.7" h="full">
-        Navigation
-      </Box>
-    </Grid.Item>
-    <Grid.Item gridArea="main">
-      <Box p="400" bg="neutral.7" h="full">
-        Main Content
-      </Box>
-    </Grid.Item>
-    <Grid.Item gridArea="footer">
-      <Box p="400" bg="neutral.7" h="full">
-        Footer
-      </Box>
-    </Grid.Item>
-  </Grid>
-)
-```
-
-## Props
-
-<PropTable id="Grid" />

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

@@ -1,151 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Box } from "../box";
-import { Grid } from "./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 Grid> = {
-  title: "components/Grid",
-  component: Grid,
-};
-
-export default meta;
-
-/**
- * Story type for TypeScript support
- * StoryObj provides type checking for our story configurations
- */
-type Story = StoryObj<typeof Grid>;
-
-/**
- * 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");
-    });
-  },
-};
-
-/**
- * Showcase with simple column layout
- */
-export const WithColumns: Story = {
-  args: {
-    gap: "100",
-    templateColumns: "repeat(2, 1fr)",
-    children: [
-      <Box key="1" p="400" bg="neutral.7">
-        Item 1
-      </Box>,
-      <Box key="2" p="400" bg="neutral.7">
-        Item 2
-      </Box>,
-    ],
-  },
-};
-
-/**
- * Showcase Varrying rows or columns
- */
-export const WithVarryingLayout: Story = {
-  render: () => {
-    return (
-      <Grid
-        h="200px"
-        templateRows="repeat(2, 1fr)"
-        templateColumns="repeat(5, 1fr)"
-        gap={4}
-      >
-        <Grid.Item rowSpan={2} colSpan={1}>
-          <Box p="400" bg="neutral.7">
-            colSpan=1
-          </Box>
-        </Grid.Item>
-        <Grid.Item colSpan={2}>
-          <Box p="400" bg="neutral.7">
-            colSpan=2
-          </Box>
-        </Grid.Item>
-        <Grid.Item colSpan={2}>
-          <Box p="400" bg="neutral.7">
-            colSpan=2
-          </Box>
-        </Grid.Item>
-        <Grid.Item colSpan={4}>
-          <Box p="400" bg="neutral.7">
-            colSpan=4
-          </Box>
-        </Grid.Item>
-      </Grid>
-    );
-  },
-};
-
-/**
- * Demonstrate layout with template areas
- * Shows how to create a common page layout pattern
- */
-export const WithTemplateAreas: Story = {
-  render: () => {
-    return (
-      <Grid
-        h="400px"
-        templateAreas={`
-          "header header"
-          "nav main"
-          "footer footer"
-        `}
-        templateColumns="200px 1fr"
-        gap="400"
-      >
-        <Grid.Item gridArea="header">
-          <Box p="400" bg="neutral.7" h="full">
-            Header
-          </Box>
-        </Grid.Item>
-        <Grid.Item gridArea="nav">
-          <Box p="400" bg="neutral.7" h="full">
-            Navigation
-          </Box>
-        </Grid.Item>
-        <Grid.Item gridArea="main">
-          <Box p="400" bg="neutral.7" h="full">
-            Main Content
-          </Box>
-        </Grid.Item>
-        <Grid.Item gridArea="footer">
-          <Box p="400" bg="neutral.7" h="full">
-            Footer
-          </Box>
-        </Grid.Item>
-      </Grid>
-    );
-  },
-};

package/src/components/grid/grid.tsx

@@ -1,29 +0,0 @@
-import { forwardRef } from "react";
-import {
-  Grid as ChakraGrid,
-  GridItem,
-  type GridProps as ChakraGridProps,
-} from "@chakra-ui/react";
-
-/**
- * Grid
- * ============================================================
- * The Grid Layout Component provides a flexible and responsive way to structure content using a two-dimensional grid system. It allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes.
- *
- * Features:
- *
- * - allows forwarding refs to the underlying DOM element
- */
-export interface GridProps extends ChakraGridProps {
-  children?: React.ReactNode;
-}
-
-const GridComponent = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
-  return <ChakraGrid ref={ref} {...props} />;
-});
-
-GridComponent.displayName = "Grid";
-
-export const Grid = Object.assign(GridComponent, {
-  Item: GridItem,
-});

package/src/components/grid/index.ts

@@ -1 +0,0 @@
-export { Grid, type GridProps } from "./grid";

package/src/components/heading/heading.mdx

@@ -1,23 +0,0 @@
----
-id: Heading
-title: Heading
-description: renders a heading
-documentState: InitialDraft
-order: 2
-menu:
-  - Components
-  - Typography
-  - Heading
-tags:
-  - heading
----
-
-# Heading
-
-Like Text, but with predefined styles for a heading/title look and semantic
-meaning, which makes source code easier to scan by clearly highlighting the
-content's hierarchy and purpose.
-
-> [!NOTE]  
-> Checkout the [Text component](/components/typography/text) for configuration
-> options.

package/src/components/heading/heading.recipe.ts

@@ -1,49 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-export const headingRecipe = defineRecipe({
-  className: "nimbus-heading",
-  base: {
-    fontFamily: "heading",
-    fontWeight: "600",
-  },
-  variants: {
-    size: {
-      xs: {
-        textStyle: "xs",
-      },
-      sm: {
-        textStyle: "sm",
-      },
-      md: {
-        textStyle: "md",
-      },
-      lg: {
-        textStyle: "lg",
-      },
-      xl: {
-        textStyle: "xl",
-      },
-      "2xl": {
-        textStyle: "2xl",
-      },
-      "3xl": {
-        textStyle: "3xl",
-      },
-      "4xl": {
-        textStyle: "4xl",
-      },
-      "5xl": {
-        textStyle: "5xl",
-      },
-      "6xl": {
-        textStyle: "6xl",
-      },
-      "7xl": {
-        textStyle: "7xl",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "xl",
-  },
-});

package/src/components/heading/heading.tsx

@@ -1 +0,0 @@
-export { Heading } from "@chakra-ui/react";

package/src/components/heading/index.ts

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

package/src/components/highlight/highlight.mdx

@@ -1,18 +0,0 @@
----
-id: Highlight
-title: Highlight
-description: highlights a substring in a string
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Typography
-  - Highlight
-tags:
-  - highlight
-  - mark
----
-
-# Highlight
-
-Add description later.rr

package/src/components/highlight/highlight.tsx

@@ -1 +0,0 @@
-export { Highlight } from "@chakra-ui/react";

package/src/components/highlight/index.ts

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

package/src/components/icon-button/icon-button.mdx

@@ -1,98 +0,0 @@
----
-id: Components-IconButton
-title: IconButton
-description: displays a button with an icon only as child
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Inputs
-  - IconButton
-tags:
-  - component
-figmaLink: >-
-  https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/New-Design-System?node-id=58-132&m=dev
----
-
-# IconButton
-
-displays a button with an icon only as child.
-
-## Basic Usage
-
-If unconfigured `IconButton` will default to a neutral state. It is important to
-configure `IconButton` properly to ensure it displays as intended.
-
-```jsx-live
-const App = () => <IconButton><Icons.ArrowForward/></IconButton>
-```
-
-### Sizes
-
-Available sizes.
-
-```jsx-live
-const App = () => {
-  const sizes = ['md', 'xs', '2xs'];
-
-  return (
-    <Stack direction="horizontal" alignItems="center">
-      {sizes.map(size => (
-        <IconButton tone="primary" variant="solid" key={size} size={size}>
-          <Icons.AutoFixHigh/>
-        </IconButton>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Variants
-
-Available variants.
-
-```jsx-live
-const App = () => {
-
-  const variants = ['solid', 'outline', 'ghost', 'link'];
-
-  return (
-    <Stack direction="horizontal">
-      {variants.map(variant => (
-        <IconButton tone="primary" key={variant} variant={variant}>
-          <Icons.AutoFixHigh/>
-        </IconButton>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Tones
-
-Available tones.
-
-```jsx-live
-const App = () => {
-  const variants = ["solid", "outline", "ghost", "link"];
-  const colors = ["primary", "error"];
-
-  return (
-    <Stack>
-      {colors.map((color) => (
-        <Stack key={color} direction="horizontal">
-          {variants.map((variant) => (
-            <IconButton colorPalette={color} key={variant} variant={variant}>
-              <Icons.AutoFixHigh/>
-            </IconButton>
-          ))}
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-```
-
-## Props
-
-<PropTable id="IconButton" />