@commercetools/nimbus 0.0.1 → 0.0.3

package/src/components/dialog/dialog.recipe.ts

@@ -1,254 +0,0 @@
-import { defineSlotRecipe } from "@chakra-ui/react";
-
-export const dialogSlotRecipe = defineSlotRecipe({
-  slots: [
-    "trigger",
-    "backdrop",
-    "positioner",
-    "content",
-    "title",
-    "description",
-    "closeTrigger",
-    "header",
-    "body",
-    "footer",
-    "backdrop",
-  ],
-  className: "nimbus-dialog",
-  base: {
-    backdrop: {
-      bg: {
-        _dark: "bg/50",
-        _light: "fg/50",
-      },
-      pos: "fixed",
-      left: 0,
-      top: 0,
-      w: "100vw",
-      h: "100dvh",
-      zIndex: "modal",
-      _open: {
-        animationName: "fade-in",
-        animationDuration: "slow",
-      },
-      _closed: {
-        animationName: "fade-out",
-        animationDuration: "moderate",
-      },
-    },
-    positioner: {
-      display: "flex",
-      width: "100vw",
-      height: "100dvh",
-      position: "fixed",
-      left: 0,
-      top: 0,
-      "--dialog-z-index": "zIndex.modal",
-      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
-      justifyContent: "center",
-      overscrollBehaviorY: "none",
-    },
-    content: {
-      display: "flex",
-      flexDirection: "column",
-      position: "relative",
-      width: "100%",
-      outline: 0,
-      borderRadius: "200",
-      textStyle: "sm",
-      my: "var(--dialog-margin, var(--dialog-base-margin))",
-      "--dialog-z-index": "zIndex.modal",
-      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
-      bg: "bg",
-      boxShadow: "lg",
-      _open: {
-        animationDuration: "moderate",
-      },
-      _closed: {
-        animationDuration: "faster",
-      },
-    },
-    header: {
-      flex: 0,
-      px: "600",
-      pt: "600",
-      pb: "400",
-    },
-    body: {
-      flex: "1",
-      px: "600",
-      pt: "200",
-      pb: "600",
-    },
-    footer: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      gap: "300",
-      px: "600",
-      pt: "200",
-      pb: "400",
-    },
-    title: {
-      textStyle: "lg",
-      fontWeight: "semibold",
-    },
-    description: {
-      color: "fg.muted",
-    },
-  },
-  variants: {
-    placement: {
-      center: {
-        positioner: {
-          alignItems: "center",
-        },
-        content: {
-          "--dialog-base-margin": "auto",
-          mx: "auto",
-        },
-      },
-      top: {
-        positioner: {
-          alignItems: "flex-start",
-        },
-        content: {
-          "--dialog-base-margin": "spacing.1600",
-          mx: "auto",
-        },
-      },
-      bottom: {
-        positioner: {
-          alignItems: "flex-end",
-        },
-        content: {
-          "--dialog-base-margin": "spacing.1600",
-          mx: "auto",
-        },
-      },
-    },
-    scrollBehavior: {
-      inside: {
-        positioner: {
-          overflow: "hidden",
-        },
-        content: {
-          maxH: "calc(100% - 7.5rem)",
-        },
-        body: {
-          overflow: "auto",
-        },
-      },
-      outside: {
-        positioner: {
-          overflow: "auto",
-          pointerEvents: "auto",
-        },
-      },
-    },
-    size: {
-      xs: {
-        content: {
-          maxW: "sm",
-        },
-      },
-      sm: {
-        content: {
-          maxW: "md",
-        },
-      },
-      md: {
-        content: {
-          maxW: "lg",
-        },
-      },
-      lg: {
-        content: {
-          maxW: "2xl",
-        },
-      },
-      xl: {
-        content: {
-          maxW: "4xl",
-        },
-      },
-      cover: {
-        positioner: {
-          padding: "1000",
-        },
-        content: {
-          width: "100%",
-          height: "100%",
-          "--dialog-margin": "0",
-        },
-      },
-      full: {
-        content: {
-          maxW: "100vw",
-          minH: "100vh",
-          "--dialog-margin": "0",
-          borderRadius: "0",
-        },
-      },
-    },
-    motionPreset: {
-      scale: {
-        content: {
-          _open: {
-            animationName: "scale-in, fade-in",
-          },
-          _closed: {
-            animationName: "scale-out, fade-out",
-          },
-        },
-      },
-      "slide-in-bottom": {
-        content: {
-          _open: {
-            animationName: "slide-from-bottom, fade-in",
-          },
-          _closed: {
-            animationName: "slide-to-bottom, fade-out",
-          },
-        },
-      },
-      "slide-in-top": {
-        content: {
-          _open: {
-            animationName: "slide-from-top, fade-in",
-          },
-          _closed: {
-            animationName: "slide-to-top, fade-out",
-          },
-        },
-      },
-      "slide-in-left": {
-        content: {
-          _open: {
-            animationName: "slide-from-left, fade-in",
-          },
-          _closed: {
-            animationName: "slide-to-left, fade-out",
-          },
-        },
-      },
-      "slide-in-right": {
-        content: {
-          _open: {
-            animationName: "slide-from-right, fade-in",
-          },
-          _closed: {
-            animationName: "slide-to-right, fade-out",
-          },
-        },
-      },
-      none: {},
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    scrollBehavior: "outside",
-    placement: "top",
-    motionPreset: "scale",
-  },
-});

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>
-    );
-  },
-};