@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

package/src/docs/rfcs-component-structure.mdx

@@ -1,74 +0,0 @@
----
-id: WIP-Component Structure
-title: Component Structure
-description: Working out the process from idea to published component
-documentState: InitialDraft
-documentAudiences:
-  - Maintainer
-order: 999
-menu:
-  - RFCs
-  - Component Structure
-tags:
-  - document
----
-
-# React Component Anatomy
-
-## Basic Structure
-
-```bash
-/components
-  /component-name
-    │ # Files
-    ├── component-name.types.ts      # typescript type exports
-    ├── component-name.recipe.ts     # a recipe file covering basic styles, sizes & variants
-    ├── component-name.slots.tsx     # optional, for multi-part components
-    ├── component-name.figma.tsx     # code to figma export instructions/definition
-    ├── component-name.tsx           # component implementation
-    ├── component-name.mdx           # component documentation
-    ├── index.ts                     # barrel file for exports
-    │ # Folders
-    ├── hooks                        # optional, folder for react hooks
-    ├── components                   # optional, folder for sub-components
-    ├── tests                        # unit tests
-    ├── stories                      # storybook stories (screenshot tests)
-```
-
-### component-name.types.ts
-
-Exports and/or contains the type definitions for the component.
-
-### component-name.recipe.ts
-
-Contains a single or multi-slot recipe. Covering default styles, sizes, variants
-and compound variants for a single or multiple _slots_.
-
-### component-name.slots.ts
-
-A component that has multiple parts, like a Modal (header, body, footer, etc.),
-will have a .slot.tsx file. This file will create components with styles
-attached to them, and will be used in the main component file.
-
-### component-name.tsx
-
-Free of any styling concerns, this file imports the slot-components and connects
-those with the headless ui-components.
-
-### component-name.mdx
-
-Contains the documentation for the component. Will provide examples, usage,
-props, etc.
-
-### index.ts
-
-Exports the component and any other files that need to be exported.
-
-### components
-
-Optional, can contain components that are only used by the parent component.
-Structure is the same basic folder structure.
-
-### tests
-
-### stories

package/src/docs/rfcs-hook-structure.mdx

@@ -1,59 +0,0 @@
----
-id: Organisation-Hook Structure
-title: Hook Structure
-description: Basic structure of a react hook
-documentState: InitialDraft
-documentAudiences:
-  - Maintainer
-order: 999
-menu:
-  - RFCs
-  - Hook Structure
-tags:
-  - document
----
-
-# React Hook Anatomy
-
-## Basic Structure
-
-```bash
-/hooks
-  /use-hook-name
-    │ # Files
-    ├── use-hook-name.types.ts        # typescript type exports
-    ├── use-hook-name.ts              # hook implementation
-    ├── use-hook-name.utils.ts        # optional, utility functions for the hook
-    ├── use-hook-name.test.ts         # unit tests for the hook
-    ├── use-hook-name.mdx             # documentation for the hook
-    ├── index.ts                      # barrel file for exports
-```
-
-### useHookName.types.ts
-
-Contains type definitions relevant to the hook, such as inputs, outputs, and
-custom types it uses.
-
-### useHookName.ts
-
-The core implementation of the hook. It defines and exports the hook's logic and
-any dependencies it might require.
-
-### useHookName.utils.ts
-
-Optional file containing reusable utility functions that support the hook's
-implementation.
-
-### useHookName.test.ts
-
-Contains unit tests for the hook to ensure its functionality and edge cases are
-covered.
-
-### useHookName.mdx
-
-Documentation file for the hook, detailing its purpose, usage, and examples.
-
-### index.ts
-
-Exports the hook and any other files (e.g., utilities or types) that should be
-publicly accessible.

package/src/docs/sizing.mdx

@@ -1,210 +0,0 @@
----
-id: Style Props-Sizing
-title: Sizing
-description: JSX style props for sizing an element
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Sizing
-tags:
-  - document
----
-
-# Sizing
-
-JSX style props for sizing an element
-
-## Width
-
-Use the `width` or `w` property to set the width of an element.
-
-```jsx
-// hardcoded values
-<Box width="64px" />
-<Box w="4rem" />
-
-// token values
-<Box width="5" />
-<Box w="5" />
-```
-
-### Fractional width
-
-Use can set fractional widths using the `width` or `w` property.
-
-Values can be within the following ranges:
-
-- Thirds: `1/3` to `2/3`
-- Fourths: `1/4` to `3/4`
-- Fifths: `1/5` to `4/5`
-- Sixths: `1/6` to `5/6`
-- Twelfths: `1/12` to `11/12`
-
-```jsx
-// half width
-<Flex>
-  <Box width="1/2" />
-  <Box width="1/2" />
-</Flex>
-
-// thirds
-<Flex>
-  <Box width="1/3" />
-  <Box width="2/3" />
-</Flex>
-
-// fourths
-<Flex>
-  <Box width="1/4" />
-  <Box width="3/4" />
-</Flex>
-
-// fifths
-<Flex>
-  <Box width="1/5" />
-  <Box width="4/5" />
-</Flex>
-
-// sixths
-<Flex>
-  <Box width="1/6" />
-  <Box width="5/6" />
-</Flex>
-
-// twelfths
-<Flex>
-  <Box width="3/12" />
-  <Box width="9/12" />
-</Flex>
-```
-
-### Viewport width
-
-Use the modern viewport width values `dvw`, `svw`, `lvw`.
-
-> [!NOTE]  
-> `dvw` maps to `100dvw`, `svw` maps to `100svw`, `lvw` maps to `100lvw`.
-
-```jsx
-<Box width="dvw" />
-<Box w="dvw" /> // shorthand
-```
-
-| Prop         | CSS Property | Token Category |
-| ------------ | ------------ | -------------- |
-| `w`, `width` | `width`      | `sizes`        |
-
-## Max width
-
-Use the `maxWidth` or `maxW` property to set the maximum width of an element.
-
-```jsx
-// hardcoded values
-<Box maxWidth="640px" />
-<Box maxW="4rem" /> // shorthand
-
-// token values
-<Box maxWidth="xl" />
-<Box maxW="2xl" /> // shorthand
-```
-
-| Prop               | CSS Property | Token Category |
-| ------------------ | ------------ | -------------- |
-| `maxW`, `maxWidth` | `max-width`  | `sizes`        |
-
-## Min width
-
-Use the `minWidth` or `minW` property to set the minimum width of an element.
-
-```jsx
-// hardcoded values
-<Box minWidth="64px" />
-<Box minW="4rem" /> // shorthand
-
-// token values
-<Box minWidth="8" />
-<Box minW="10" /> // shorthand
-```
-
-| Prop               | CSS Property | Token Category |
-| ------------------ | ------------ | -------------- |
-| `w`, `width`       | `width`      | `sizing`       |
-| `maxW`, `maxWidth` | `max-width`  | `sizing`       |
-| `minW`, `minWidth` | `min-width`  | `sizing`       |
-
-## Height
-
-Use the `height` or `h` property to set the height of an element.
-
-```jsx
-// hardcoded values
-<Box height="40px" />
-<Box h="0.4rem" /> // shorthand
-
-// token values
-<Box height="5" />
-<Box h="5" /> // shorthand
-```
-
-### Fractional height
-
-Use can set fractional heights using the `height` or `h` property.
-
-Values can be within the following ranges:
-
-- Thirds: `1/3` to `2/3`
-- Fourths: `1/4` to `3/4`
-- Fifths: `1/5` to `4/5`
-- Sixths: `1/6` to `5/6`
-
-```jsx
-<Box height="1/2" />
-<Box h="1/2" /> // shorthand
-```
-
-### Relative heights
-
-Use the modern relative height values `dvh`, `svh`, `lvh`.
-
-> [!NOTE]  
-> `dvh` maps to `100dvh`, `svh` maps to `100svh`, `lvh` maps to `100lvh`.
-
-```jsx
-<Box height="dvh" />
-<Box h="dvh" /> // shorthand
-```
-
-## Max height
-
-Use the `maxHeight` or `maxH` property to set the maximum height of an element.
-
-```jsx
-// hardcoded values
-<Box maxHeight="40px" />
-<Box maxH="0.4rem" /> // shorthand
-
-// token values
-<Box maxHeight="8" />
-<Box maxH="10" /> // shorthand
-```
-
-## Min height
-
-Use the `minHeight` or `minH` property to set the minimum height of an element.
-
-```jsx
-// hardcoded values
-<Box minHeight="40px" />
-<Box minH="0.4rem" /> // shorthand
-
-// token values
-<Box minHeight="8" />
-<Box minH="10" /> // shorthand
-```
-
-| Prop                | CSS Property | Token Category |
-| ------------------- | ------------ | -------------- |
-| `h`, `height`       | `height`     | `sizes`        |
-| `maxH`, `maxHeight` | `max-height` | `sizes`        |
-| `minH`, `minHeight` | `min-height` | `sizes`        |

package/src/docs/spacing.mdx

@@ -1,193 +0,0 @@
----
-id: Style Props-Spacing
-title: Spacing
-description:
-  JSX style props for controlling the padding and margin of an element.
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Spacing
-tags:
-  - document
----
-
-# Spacing
-
-JSX style props for controlling the padding and margin of an element.
-
-## Padding
-
-### All sides
-
-Use the `padding` prop to apply padding on all sides of an element
-
-```jsx
-// raw value
-<Box padding="40px" />
-<Box p="40px" /> // shorthand
-
-// token value
-<Box padding="4" />
-<Box p="4" /> // shorthand
-```
-
-| Prop          | CSS Property | Token Category |
-| ------------- | ------------ | -------------- |
-| `p`,`padding` | `padding`    | `spacing`      |
-
-### Specific side
-
-Use the `padding{Left,Right,Top,Bottom}` to apply padding on one side of an
-element
-
-```jsx
-<Box paddingLeft="3" />
-<Box pl="3" /> // shorthand
-
-<Box paddingTop="3" />
-<Box pt="3" /> // shorthand
-```
-
-Use the `padding{Start,End}` props to apply padding on the logical axis of an
-element based on the text direction.
-
-```jsx
-<div className={css({ paddingStart: '8' })} />
-<div className={css({ ps: '8' })} /> // shorthand
-
-<div className={css({ paddingEnd: '8' })} />
-<div className={css({ pe: '8' })} /> // shorthand
-```
-
-| Prop                  | CSS Property           | Token Category |
-| --------------------- | ---------------------- | -------------- |
-| `pl`, `paddingLeft`   | `padding-left`         | `spacing`      |
-| `pr`, `paddingRight`  | `padding-right`        | `spacing`      |
-| `pt`, `paddingTop`    | `padding-top`          | `spacing`      |
-| `pb`, `paddingBottom` | `padding-bottom`       | `spacing`      |
-| `ps`, `paddingStart`  | `padding-inline-start` | `spacing`      |
-| `pe`, `paddingEnd`    | `padding-inline-end`   | `spacing`      |
-
-### Horizontal and Vertical padding
-
-Use the `padding{X,Y}` props to apply padding on the horizontal and vertical
-axis of an element
-
-```jsx
-<Box paddingX="8" />
-<Box px="8" /> // shorthand
-
-<Box paddingY="8" />
-<Box py="8" /> // shorthand
-```
-
-| Prop                  | CSS Property           | Token Category |
-| --------------------- | ---------------------- | -------------- |
-| `p`,`padding`         | `padding`              | `spacing`      |
-| `pl`, `paddingLeft`   | `padding-left`         | `spacing`      |
-| `pr`, `paddingRight`  | `padding-right`        | `spacing`      |
-| `pt`, `paddingTop`    | `padding-top`          | `spacing`      |
-| `pb`, `paddingBottom` | `padding-bottom`       | `spacing`      |
-| `px`, `paddingX`      | `padding-inline`       | `spacing`      |
-| `py`, `paddingY`      | `padding-block`        | `spacing`      |
-| `ps`, `paddingStart`  | `padding-inline-start` | `spacing`      |
-| `pe`, `paddingEnd`    | `padding-inline-end`   | `spacing`      |
-
-## Margin
-
-### All sides
-
-Use the `margin` prop to apply margin on all sides of an element
-
-```jsx
-<Box margin="5" />
-<Box m="5" /> // shorthand
-```
-
-| Prop         | CSS Property | Token Category |
-| ------------ | ------------ | -------------- |
-| `m`,`margin` | `margin`     | `spacing`      |
-
-### Specific side
-
-Use the `margin{Left,Right,Top,Bottom}` to apply margin on one side of an
-element
-
-```jsx
-<Box marginLeft="3" />
-<Box ml="3" /> // shorthand
-
-<Box marginTop="3" />
-<Box mt="3" /> // shorthand
-```
-
-Use the `margin{Start,End}` properties to apply margin on the logical axis of an
-element based on the text direction.
-
-```jsx
-<Box marginStart="8" />
-<Box ms="8" /> // shorthand
-
-<Box marginEnd="8" />
-<Box me="8" /> // shorthand
-```
-
-| Prop                 | CSS Property          | Token Category |
-| -------------------- | --------------------- | -------------- |
-| `ml`, `marginLeft`   | `margin-left`         | `spacing`      |
-| `mr`, `marginRight`  | `margin-right`        | `spacing`      |
-| `mt`, `marginTop`    | `margin-top`          | `spacing`      |
-| `mb`, `marginBottom` | `margin-bottom`       | `spacing`      |
-| `ms`, `marginStart`  | `margin-inline-start` | `spacing`      |
-| `me`, `marginEnd`    | `margin-inline-end`   | `spacing`      |
-
-### Horizontal and Vertical margin
-
-Use the `margin{X,Y}` properties to apply margin on the horizontal and vertical
-axis of an element
-
-```jsx
-<Box marginX="8" />
-<Box mx="8" /> // shorthand
-
-<Box marginY="8" />
-<Box my="8" /> // shorthand
-```
-
-| Prop            | CSS Property  | Token Category |
-| --------------- | ------------- | -------------- |
-| `mx`, `marginX` | `margin-left` | `spacing`      |
-| `my`, `marginY` | `margin-top`  | `spacing`      |
-
-## Spacing Between
-
-Use the `space{X,Y}` props to apply spacing between elements. This approach uses
-the owl selector `> * + *` to apply the spacing between the elements using
-`margin*` properties.
-
-:::info
-
-It's recommended to use the `space` prop over the `gap` prop for spacing when
-you need negative spacing.
-
-:::
-
-```jsx
-<Box display="flex" spaceX="8">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-
-<Box display="flex" spaceY="8">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop     | CSS Property          | Token Category |
-| -------- | --------------------- | -------------- |
-| `spaceX` | `margin-inline-start` | `spacing`      |
-| `spaceY` | `margin-block-start`  | `spacing`      |