From d5771ee2125a04ac4382acfb17da44ea559800bc Mon Sep 17 00:00:00 2001
From: Robin Weser <contact@weser.io>
Date: Fri, 5 Jul 2024 13:15:05 +0200
Subject: [PATCH] some docs

---
 packages/brandeur-primitives/README.md        | 127 +++++++++++++++++-
 .../src/components/createBox.js               |   6 +-
 2 files changed, 129 insertions(+), 4 deletions(-)

diff --git a/packages/brandeur-primitives/README.md b/packages/brandeur-primitives/README.md
index 516ec08..10030bd 100644
--- a/packages/brandeur-primitives/README.md
+++ b/packages/brandeur-primitives/README.md
@@ -51,12 +51,137 @@ const App = (
 
 ### createSystem
 
+#### Arguments
+
+Accepts an object including all of brandeur's [createHooks]() [configuration]().<br />
+Additionally, also accepts the following properties:
+
+| Argument     | Type     | Default | Description                  |
+| ------------ | -------- | ------- | ---------------------------- |
+| baselineGrid | _number_ | 1       | Multiplier for spacing props |
+
+#### Returns
+
+An object containing the [styleSheet]() from [createHooks]() and an generic [El](#el) component.
+
 #### El
 
-#### styleSheet
+##### Props
+
+| Props | Type                  | Default | Description                                                       |
+| ----- | --------------------- | ------- | ----------------------------------------------------------------- |
+| as    | [React.ElementType]() | `div`   |                                                                   |
+| style | [Style]()             |         | Brandeur styles that are automatically converted to inline styles |
+
+> **Note**: All other props are passed down to the rendered component.
+
+##### Example
+
+```tsx
+function Button(props) {
+  return <button {...props} />
+}
+
+const Example = (
+  <El style={{ padding: 10 }}>
+    <El as="h1" style={{ fontSize: 20 }}>
+      Title
+    </El>
+    <El
+      as={Button}
+      type="button"
+      style={{ backgroundColor: 'blue' }}
+      onClick={() => alert('CLICKED')}>
+      Click me
+    </El>
+  </El>
+)
+```
 
 ### createBox
 
+Takes the system object and returns Box component with first-class flexbox layouting props.<br />
+
+> **Important**: It uses different default values for some flexbox properties to align more closely with the React Native defaults.
+
+#### Props
+
+Box renders a [El](#el) component and thus also accepts the `as` and `style` props mentioned above.
+
+| Prop               | Shorthand |  CSS Property    |  Default  |
+| ------------------ | --------- | ---------------- | --------- |
+| backgroundColor    | bg        |                  |           |
+| gap                |           |                  |           |
+| display            |           |                  | `flex`    |
+| position           |           |                  |           |
+| overflow           |           |                  |           |
+| overflowX          |           |                  |           |
+| overflowY          |           |                  |           |
+| padding            |           |                  |           |
+| paddingLeft        |           |                  |           |
+| paddingRight       |           |                  |           |
+| paddingBottom      |           |                  |           |
+| paddingTop         |           |                  |           |
+| paddingX           |           |                  |           |
+| paddingInline      |           |                  |           |
+| paddingInlineStart |           |                  |           |
+| paddingInlineEnd   |           |                  |           |
+| paddingY           |           |                  |           |
+| paddingBlock       |           |                  |           |
+| paddingBlockStart  |           |                  |           |
+| paddingBlockEnd    |           |                  |           |
+| margin             |           |                  |           |
+| marginLeft         |           |                  |           |
+| marginRight        |           |                  |           |
+| marginBottom       |           |                  |           |
+| marginTop          |           |                  |           |
+| marginX            |           |                  |           |
+| marginInline       | marginX   |                  |           |
+| marginInlineStart  |           |                  |           |
+| marginInlineEnd    |           |                  |           |
+| marginY            |           |                  |           |
+| marginBlock        | marginY   |                  |           |
+| marginBlockStart   |           |                  |           |
+| marginBlockEnd     |           |                  |           |
+| height             |           |                  |           |
+| width              |           |                  |           |
+| minWidth           |           |                  |           |
+| maxWidth           |           |                  |           |
+| minHeight          |           |                  |           |
+| maxHeight          |           |                  |           |
+| order              |           |                  |           |
+| alignContent       |           |                  |           |
+| justifyContent     |           |                  |           |
+| alignItems         |           |                  | `stretch` |
+| alignSelf          |           |                  |           |
+| flex               |           |                  |           |
+| grow               |           | `flex-grow`      |           |
+| shrink             |           | `flex-shrink`    |           |
+| basis              |           | `flex-basis`     |           |
+| direction          |           | `flex-direction` | `column`  |
+| wrap               |           | `flex-wrap`      |           |
+
+#### Example
+
+```tsx
+import { createBox } from 'brandeur-primitives'
+
+const Box = createBox(system)
+
+const App = (
+  <Box padding={10} gap={4}>
+    <Box direction="row" gap={2}>
+      <Box bg="red" width={50} height={50} />
+      <Box bg="blue" width={50} height={50} />
+    </Box>
+    <Box direction="row" gap={2}>
+      <Box bg="green" width={50} height={50} />
+      <Box bg="yellow" width={50} height={50} />
+    </Box>
+  </Box>
+)
+```
+
 ### createText
 
 ### createClick
diff --git a/packages/brandeur-primitives/src/components/createBox.js b/packages/brandeur-primitives/src/components/createBox.js
index e222211..305beee 100644
--- a/packages/brandeur-primitives/src/components/createBox.js
+++ b/packages/brandeur-primitives/src/components/createBox.js
@@ -51,12 +51,12 @@ export default function createBox({ El, baselineGrid = 1 }) {
       alignItems = 'stretch',
       alignSelf,
       flex,
-      grow = 0,
-      shrink = 0,
+      grow,
+      shrink,
       basis = 'auto',
       direction = 'column',
       display = 'flex',
-      wrap = 'nowrap',
+      wrap,
       ...props
     },
     ref