From 7fc52f8a1c49a3c481371443cb1349653e736566 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Wed, 21 Jun 2023 17:43:40 +0100
Subject: [PATCH 1/4] feat: flex component documentation

---
 .../content/examples/flex/CompareFlex.vue     |  34 +++++
 .../content/examples/flex/SignUpFlex.vue      |  16 ++
 .../content/examples/flex/SimpleFlex.vue      |  17 +++
 .../content/examples/flex/SpacerFlex.vue      |  15 ++
 content/4.components/flex.md                  | 138 ++++++++++++++++++
 5 files changed, 220 insertions(+)
 create mode 100644 components/content/examples/flex/CompareFlex.vue
 create mode 100644 components/content/examples/flex/SignUpFlex.vue
 create mode 100644 components/content/examples/flex/SimpleFlex.vue
 create mode 100644 components/content/examples/flex/SpacerFlex.vue
 create mode 100644 content/4.components/flex.md

diff --git a/components/content/examples/flex/CompareFlex.vue b/components/content/examples/flex/CompareFlex.vue
new file mode 100644
index 0000000..20077e5
--- /dev/null
+++ b/components/content/examples/flex/CompareFlex.vue
@@ -0,0 +1,34 @@
+<template>
+  <c-box>
+    <c-text>Flex and Spacer: Full width, equal Spacing</c-text>
+    <c-flex>
+      <c-box w='70px' h='10' bg='red.500' />
+      <c-spacer />
+      <c-box w='170px' h='10' bg='red.500' />
+      <c-spacer />
+      <c-box w='180px' h='10' bg='red.500' />
+    </c-flex>
+
+    <c-text>
+      Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
+    </c-text>
+    <c-grid template-columns='repeat(3, 1fr)' gap={6}>
+      <c-box w='70px' h='10' bg='blue.500' />
+      <c-box w='170px' h='10' bg='blue.500' />
+      <c-box w='180px' h='10' bg='blue.500' />
+    </c-grid>
+
+    <c-text>
+      HStack: The children have equal spacing but don't span the whole container
+    </c-text>
+    <c-h-stack spacing='24px'>
+      <c-box w='70px' h='10' bg='teal.500' />
+      <c-box w='170px' h='10' bg='teal.500' />
+      <c-box w='180px' h='10' bg='teal.500' />
+    </c-h-stack>
+  </c-box>
+</template>
+
+<script setup>
+import { CFlex, CSpacer, CBox, CHStack, CText, CGrid } from '@chakra-ui/vue-next';
+</script>
diff --git a/components/content/examples/flex/SignUpFlex.vue b/components/content/examples/flex/SignUpFlex.vue
new file mode 100644
index 0000000..54729ba
--- /dev/null
+++ b/components/content/examples/flex/SignUpFlex.vue
@@ -0,0 +1,16 @@
+<template>
+  <c-flex min-width='max-content' align-items='center' gap='2'>
+    <c-box p='2'>
+      <c-heading size='md'>Chakra App</c-heading>
+    </c-box>
+    <c-spacer />
+    <c-button-group p='2'>
+      <c-button rounded="10px" color-scheme='teal'>Sign Up</c-button>
+      <c-button rounded="10px" color-scheme='teal'>Log in</c-button>
+    </c-button-group>
+  </c-flex>
+</template>
+
+<script setup>
+import { CFlex, CSpacer, CBox, CHeading, CButtonGroup, CButton } from '@chakra-ui/vue-next';
+</script>
diff --git a/components/content/examples/flex/SimpleFlex.vue b/components/content/examples/flex/SimpleFlex.vue
new file mode 100644
index 0000000..fe6b0b3
--- /dev/null
+++ b/components/content/examples/flex/SimpleFlex.vue
@@ -0,0 +1,17 @@
+<template>
+  <c-flex color='white'>
+    <c-center w='100px' bg='green.500'>
+      <c-text>Box 1</c-text>
+    </c-center>
+    <c-square bg='blue.500' size='150px'>
+      <c-text>Box 2</c-text>
+    </c-square>
+    <c-box flex='1' bg='tomato'>
+      <c-text>Box 3</c-text>
+    </c-box>
+  </c-flex>
+</template>
+
+<script setup>
+import { CFlex, CCenter, CText, CSquare, CBox } from '@chakra-ui/vue-next';
+</script>
diff --git a/components/content/examples/flex/SpacerFlex.vue b/components/content/examples/flex/SpacerFlex.vue
new file mode 100644
index 0000000..8e31e3a
--- /dev/null
+++ b/components/content/examples/flex/SpacerFlex.vue
@@ -0,0 +1,15 @@
+<template>
+  <c-flex>
+    <c-box p='4' bg='red.400'>
+      Box 1
+    </c-box>
+    <c-spacer />
+    <c-box p='4' bg='green.400'>
+      Box 2
+    </c-box>
+  </c-flex>
+</template>
+
+<script setup>
+import { CFlex, CSpacer, CBox } from '@chakra-ui/vue-next';
+</script>
diff --git a/content/4.components/flex.md b/content/4.components/flex.md
new file mode 100644
index 0000000..b5f1ab1
--- /dev/null
+++ b/content/4.components/flex.md
@@ -0,0 +1,138 @@
+---
+title: Flex
+description: Flex Component
+version: 2.0+
+---
+
+# Flex
+
+Flex is `Box` with `display: flex` and comes with helpful style shorthand. It renders a `div` element.
+
+## Import
+
+```js
+import { CFlex, CSpacer } from '@chakra-ui/vue-next';
+```
+
+- Flex: A `Box` with `display: flex`.
+- Spacer: Creates an adjustable, empty space that can be used to tune the spacing between child elements within Flex.
+
+## Usage
+
+When using the Flex component, you can use some of the following helpful shorthand props:
+
+- `direction` for `flexDirection`
+- `wrap` for `flexWrap`
+- `align` for `alignItems`
+- `justify` for `justifyContent`
+<!-- - `basis` for `flexBasis`
+- `shrink` for `flexShrink` -->
+While you can pass the verbose props, using the shorthand can save you some time.
+
+::showcase
+::simple-flex{width=full}
+::
+::
+
+```html
+<c-flex color='white'>
+    <c-center w='100px' bg='green.500'>
+      <c-text>Box 1</c-text>
+    </c-center>
+    <c-square bg='blue.500' size='150px'>
+      <c-text>Box 2</c-text>
+    </c-square>
+    <c-box flex='1' bg='tomato'>
+      <c-text>Box 3</c-text>
+    </c-box>
+</c-flex>
+```
+
+### Using the Spacer
+
+As an alternative to `CStack`, you can combine `CFlex` and `CSpacer` to create stackable and responsive layouts.
+
+::showcase
+::spacer-flex{width=full}
+::
+::
+
+```html
+<c-flex>
+    <c-box p='4' bg='red.400'>
+        Box 1
+    </c-box>
+    <c-spacer />
+    <c-box p='4' bg='green.400'>
+        Box 2
+    </c-box>
+</c-flex>
+```
+
+### Flex and Spacer vs Grid vs Stack
+
+The `CFlex` and `CSpacer` components, `CGrid` and `CHStack` treat children of different widths differently.
+
+- In `CHStack`, the children will have equal spacing between them but they won't span the entire width of the container.
+- In `CGrid`, the starting points of the children will be equally spaced but the gaps between them will not be equal.
+- With `CFlex` and `CSpacer`, the children will span the entire width of the container and also have equal spacing between them.
+
+::showcase
+::compare-flex{width=full}
+::
+::
+
+```html
+<c-box>
+    <c-text>Flex and Spacer: Full width, equal Spacing</c-text>
+    <c-flex>
+      <c-box w='70px' h='10' bg='red.500' />
+      <c-spacer />
+      <c-box w='170px' h='10' bg='red.500' />
+      <c-spacer />
+      <c-box w='180px' h='10' bg='red.500' />
+    </c-flex>
+
+    <c-text>
+      Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
+    </c-text>
+    <c-grid template-columns='repeat(3, 1fr)' gap={6}>
+      <c-box w='70px' h='10' bg='blue.500' />
+      <c-box w='170px' h='10' bg='blue.500' />
+      <c-box w='180px' h='10' bg='blue.500' />
+    </c-grid>
+
+    <c-text>
+      HStack: The children have equal spacing but don't span the whole container
+    </c-text>
+    <c-h-stack spacing='24px'>
+      <c-box w='70px' h='10' bg='teal.500' />
+      <c-box w='170px' h='10' bg='teal.500' />
+      <c-box w='180px' h='10' bg='teal.500' />
+    </c-h-stack>
+  </c-box>
+  ```
+
+  A good use case for `CSpacer` is to create a navbar with a signup/login button aligned to the right.
+
+Since `CSpacer` renders a `div`, any `gap` value provided to the parent is applied to both sides of this component, and therefore make the gap appear doubled when the spacer is completely collapsed.
+
+> The example below is not responsive on purpose as you might switch to a collapsed menu on mobile.
+
+::showcase
+::sign-up-flex{width=full}
+::
+::
+
+```html
+<c-flex min-width='max-content' align-items='center' gap='2'>
+    <c-box p='2'>
+      <c-heading size='md'>Chakra App</c-heading>
+    </c-box>
+    <c-spacer />
+    <c-button-group p='2'>
+      <c-button rounded="10px" color-scheme='teal'>Sign Up</c-button>
+      <c-button rounded="10px" color-scheme='teal'>Log in</c-button>
+    </c-button-group>
+</c-flex>
+```
\ No newline at end of file

From 6136474d9862f7e025eb1eca7f689c0963bdc13d Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 7 Jul 2023 08:54:31 +0100
Subject: [PATCH 2/4] refactor: change name casing FLEX

---
 content/4.components/flex.md | 108 +++++++++++++++++------------------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/content/4.components/flex.md b/content/4.components/flex.md
index b5f1ab1..4a1b5fa 100644
--- a/content/4.components/flex.md
+++ b/content/4.components/flex.md
@@ -35,17 +35,17 @@ While you can pass the verbose props, using the shorthand can save you some time
 ::
 
 ```html
-<c-flex color='white'>
-    <c-center w='100px' bg='green.500'>
-      <c-text>Box 1</c-text>
-    </c-center>
-    <c-square bg='blue.500' size='150px'>
-      <c-text>Box 2</c-text>
-    </c-square>
-    <c-box flex='1' bg='tomato'>
-      <c-text>Box 3</c-text>
-    </c-box>
-</c-flex>
+<CFlex color='white'>
+    <CCenter w='100px' bg='green.500'>
+      <CText>Box 1</CText>
+    </CCenter>
+    <CSquare bg='blue.500' size='150px'>
+      <CText>Box 2</CText>
+    </CSquare>
+    <CBox flex='1' bg='tomato'>
+      <CText>Box 3</CText>
+    </CBox>
+</CFlex>
 ```
 
 ### Using the Spacer
@@ -58,15 +58,15 @@ As an alternative to `CStack`, you can combine `CFlex` and `CSpacer` to create s
 ::
 
 ```html
-<c-flex>
-    <c-box p='4' bg='red.400'>
+<CFlex>
+    <CBox p='4' bg='red.400'>
         Box 1
-    </c-box>
-    <c-spacer />
-    <c-box p='4' bg='green.400'>
+    </CBox>
+    <CSpacer />
+    <CBox p='4' bg='green.400'>
         Box 2
-    </c-box>
-</c-flex>
+    </CBox>
+</CFlex>
 ```
 
 ### Flex and Spacer vs Grid vs Stack
@@ -83,34 +83,34 @@ The `CFlex` and `CSpacer` components, `CGrid` and `CHStack` treat children of di
 ::
 
 ```html
-<c-box>
-    <c-text>Flex and Spacer: Full width, equal Spacing</c-text>
-    <c-flex>
-      <c-box w='70px' h='10' bg='red.500' />
-      <c-spacer />
-      <c-box w='170px' h='10' bg='red.500' />
-      <c-spacer />
-      <c-box w='180px' h='10' bg='red.500' />
-    </c-flex>
-
-    <c-text>
+<CBox>
+    <CText>Flex and Spacer: Full width, equal Spacing</CText>
+    <CFlex>
+      <CBox w='70px' h='10' bg='red.500' />
+      <CSpacer />
+      <CBox w='170px' h='10' bg='red.500' />
+      <CSpacer />
+      <CBox w='180px' h='10' bg='red.500' />
+    </CFlex>
+
+    <CText>
       Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
-    </c-text>
-    <c-grid template-columns='repeat(3, 1fr)' gap={6}>
-      <c-box w='70px' h='10' bg='blue.500' />
-      <c-box w='170px' h='10' bg='blue.500' />
-      <c-box w='180px' h='10' bg='blue.500' />
-    </c-grid>
-
-    <c-text>
+    </CText>
+    <CGrid template-columns='repeat(3, 1fr)' gap={6}>
+      <CBox w='70px' h='10' bg='blue.500' />
+      <CBox w='170px' h='10' bg='blue.500' />
+      <CBox w='180px' h='10' bg='blue.500' />
+    </CGrid>
+
+    <CText>
       HStack: The children have equal spacing but don't span the whole container
-    </c-text>
-    <c-h-stack spacing='24px'>
-      <c-box w='70px' h='10' bg='teal.500' />
-      <c-box w='170px' h='10' bg='teal.500' />
-      <c-box w='180px' h='10' bg='teal.500' />
-    </c-h-stack>
-  </c-box>
+    </CText>
+    <CHStack spacing='24px'>
+      <CBox w='70px' h='10' bg='teal.500' />
+      <CBox w='170px' h='10' bg='teal.500' />
+      <CBox w='180px' h='10' bg='teal.500' />
+    </CHStack>
+  </CBox>
   ```
 
   A good use case for `CSpacer` is to create a navbar with a signup/login button aligned to the right.
@@ -125,14 +125,14 @@ Since `CSpacer` renders a `div`, any `gap` value provided to the parent is appli
 ::
 
 ```html
-<c-flex min-width='max-content' align-items='center' gap='2'>
-    <c-box p='2'>
-      <c-heading size='md'>Chakra App</c-heading>
-    </c-box>
-    <c-spacer />
-    <c-button-group p='2'>
-      <c-button rounded="10px" color-scheme='teal'>Sign Up</c-button>
-      <c-button rounded="10px" color-scheme='teal'>Log in</c-button>
-    </c-button-group>
-</c-flex>
+<CFlex min-width='max-content' align-items='center' gap='2'>
+    <CBox p='2'>
+      <CHeading size='md'>Chakra App</CHeading>
+    </CBox>
+    <CSpacer />
+    <CButtonGroup p='2'>
+      <CButton rounded="10px" color-scheme='teal'>Sign Up</CButton>
+      <CButton rounded="10px" color-scheme='teal'>Log in</CButton>
+    </CButtonGroup>
+</CFlex>
 ```
\ No newline at end of file

From 9646f73b140da5542275aa93cc78b4a6f805dc80 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 14 Jul 2023 14:40:28 +0100
Subject: [PATCH 3/4] refactor: change name casing flex

---
 .../content/examples/flex/CompareFlex.vue     | 54 +++++++++----------
 .../content/examples/flex/SignUpFlex.vue      | 26 ++++-----
 .../content/examples/flex/SimpleFlex.vue      | 28 +++++-----
 .../content/examples/flex/SpacerFlex.vue      | 20 +++----
 4 files changed, 56 insertions(+), 72 deletions(-)

diff --git a/components/content/examples/flex/CompareFlex.vue b/components/content/examples/flex/CompareFlex.vue
index 20077e5..3309f60 100644
--- a/components/content/examples/flex/CompareFlex.vue
+++ b/components/content/examples/flex/CompareFlex.vue
@@ -1,34 +1,30 @@
 <template>
-  <c-box>
-    <c-text>Flex and Spacer: Full width, equal Spacing</c-text>
-    <c-flex>
-      <c-box w='70px' h='10' bg='red.500' />
-      <c-spacer />
-      <c-box w='170px' h='10' bg='red.500' />
-      <c-spacer />
-      <c-box w='180px' h='10' bg='red.500' />
-    </c-flex>
+  <CBox>
+    <CText>Flex and Spacer: Full width, equal Spacing</CText>
+    <CFlex>
+      <CBox w='70px' h='10' bg='red.500' />
+      <CSpacer />
+      <CBox w='170px' h='10' bg='red.500' />
+      <CSpacer />
+      <CBox w='180px' h='10' bg='red.500' />
+    </CFlex>
 
-    <c-text>
+    <CText>
       Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
-    </c-text>
-    <c-grid template-columns='repeat(3, 1fr)' gap={6}>
-      <c-box w='70px' h='10' bg='blue.500' />
-      <c-box w='170px' h='10' bg='blue.500' />
-      <c-box w='180px' h='10' bg='blue.500' />
-    </c-grid>
+    </CText>
+    <CGrid template-columns='repeat(3, 1fr)' gap={6}>
+      <CBox w='70px' h='10' bg='blue.500' />
+      <CBox w='170px' h='10' bg='blue.500' />
+      <CBox w='180px' h='10' bg='blue.500' />
+    </CGrid>
 
-    <c-text>
+    <CText>
       HStack: The children have equal spacing but don't span the whole container
-    </c-text>
-    <c-h-stack spacing='24px'>
-      <c-box w='70px' h='10' bg='teal.500' />
-      <c-box w='170px' h='10' bg='teal.500' />
-      <c-box w='180px' h='10' bg='teal.500' />
-    </c-h-stack>
-  </c-box>
-</template>
-
-<script setup>
-import { CFlex, CSpacer, CBox, CHStack, CText, CGrid } from '@chakra-ui/vue-next';
-</script>
+    </CText>
+    <CHStack spacing='24px'>
+      <CBox w='70px' h='10' bg='teal.500' />
+      <CBox w='170px' h='10' bg='teal.500' />
+      <CBox w='180px' h='10' bg='teal.500' />
+    </CHStack>
+  </CBox>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/flex/SignUpFlex.vue b/components/content/examples/flex/SignUpFlex.vue
index 54729ba..51ffe89 100644
--- a/components/content/examples/flex/SignUpFlex.vue
+++ b/components/content/examples/flex/SignUpFlex.vue
@@ -1,16 +1,12 @@
 <template>
-  <c-flex min-width='max-content' align-items='center' gap='2'>
-    <c-box p='2'>
-      <c-heading size='md'>Chakra App</c-heading>
-    </c-box>
-    <c-spacer />
-    <c-button-group p='2'>
-      <c-button rounded="10px" color-scheme='teal'>Sign Up</c-button>
-      <c-button rounded="10px" color-scheme='teal'>Log in</c-button>
-    </c-button-group>
-  </c-flex>
-</template>
-
-<script setup>
-import { CFlex, CSpacer, CBox, CHeading, CButtonGroup, CButton } from '@chakra-ui/vue-next';
-</script>
+  <CFlex min-width='max-content' align-items='center' gap='2'>
+    <CBox p='2'>
+      <CHeading size='md'>Chakra App</CHeading>
+    </CBox>
+    <CSpacer />
+    <CButton-group p='2'>
+      <CButton rounded="10px" color-scheme='teal'>Sign Up</CButton>
+      <CButton rounded="10px" color-scheme='teal'>Log in</CButton>
+    </CButton-group>
+  </CFlex>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/flex/SimpleFlex.vue b/components/content/examples/flex/SimpleFlex.vue
index fe6b0b3..080ae22 100644
--- a/components/content/examples/flex/SimpleFlex.vue
+++ b/components/content/examples/flex/SimpleFlex.vue
@@ -1,17 +1,13 @@
 <template>
-  <c-flex color='white'>
-    <c-center w='100px' bg='green.500'>
-      <c-text>Box 1</c-text>
-    </c-center>
-    <c-square bg='blue.500' size='150px'>
-      <c-text>Box 2</c-text>
-    </c-square>
-    <c-box flex='1' bg='tomato'>
-      <c-text>Box 3</c-text>
-    </c-box>
-  </c-flex>
-</template>
-
-<script setup>
-import { CFlex, CCenter, CText, CSquare, CBox } from '@chakra-ui/vue-next';
-</script>
+  <CFlex color='white'>
+    <CCenter w='100px' bg='green.500'>
+      <CText>Box 1</CText>
+    </CCenter>
+    <CSquare bg='blue.500' size='150px'>
+      <CText>Box 2</CText>
+    </CSquare>
+    <CBox flex='1' bg='tomato'>
+      <CText>Box 3</CText>
+    </CBox>
+  </CFlex>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/flex/SpacerFlex.vue b/components/content/examples/flex/SpacerFlex.vue
index 8e31e3a..63ad0da 100644
--- a/components/content/examples/flex/SpacerFlex.vue
+++ b/components/content/examples/flex/SpacerFlex.vue
@@ -1,15 +1,11 @@
 <template>
-  <c-flex>
-    <c-box p='4' bg='red.400'>
+  <CFlex>
+    <CBox p='4' bg='red.400'>
       Box 1
-    </c-box>
-    <c-spacer />
-    <c-box p='4' bg='green.400'>
+    </CBox>
+    <CSpacer />
+    <CBox p='4' bg='green.400'>
       Box 2
-    </c-box>
-  </c-flex>
-</template>
-
-<script setup>
-import { CFlex, CSpacer, CBox } from '@chakra-ui/vue-next';
-</script>
+    </CBox>
+  </CFlex>
+</template>
\ No newline at end of file

From 149d4a7dd101f9d00f815973ec6a5746885c026c Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Thu, 20 Jul 2023 22:50:54 +0100
Subject: [PATCH 4/4] chore: flex documentation review

---
 components/content/examples/flex/SignUpFlex.vue | 4 ++--
 content/4.components/flex.md                    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/content/examples/flex/SignUpFlex.vue b/components/content/examples/flex/SignUpFlex.vue
index 51ffe89..41b6128 100644
--- a/components/content/examples/flex/SignUpFlex.vue
+++ b/components/content/examples/flex/SignUpFlex.vue
@@ -4,9 +4,9 @@
       <CHeading size='md'>Chakra App</CHeading>
     </CBox>
     <CSpacer />
-    <CButton-group p='2'>
+    <CButtonGroup p='2'>
       <CButton rounded="10px" color-scheme='teal'>Sign Up</CButton>
       <CButton rounded="10px" color-scheme='teal'>Log in</CButton>
-    </CButton-group>
+    </CButtonGroup>
   </CFlex>
 </template>
\ No newline at end of file
diff --git a/content/4.components/flex.md b/content/4.components/flex.md
index 4a1b5fa..5b08b3b 100644
--- a/content/4.components/flex.md
+++ b/content/4.components/flex.md
@@ -6,7 +6,7 @@ version: 2.0+
 
 # Flex
 
-Flex is `Box` with `display: flex` and comes with helpful style shorthand. It renders a `div` element.
+Flex is `CBox` with `display: flex` and comes with helpful style shorthand. It renders a `div` element.
 
 ## Import
 
@@ -14,7 +14,7 @@ Flex is `Box` with `display: flex` and comes with helpful style shorthand. It re
 import { CFlex, CSpacer } from '@chakra-ui/vue-next';
 ```
 
-- Flex: A `Box` with `display: flex`.
+- Flex: A `CBox` with `display: flex`.
 - Spacer: Creates an adjustable, empty space that can be used to tune the spacing between child elements within Flex.
 
 ## Usage