Improve layout components

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/app/(docs)/components/flex/page.mdx

@@ -10,6 +10,8 @@ import {
 } from '@/snippets/_snippets';
 import { Snippet } from '@/components/Snippet';
 import { FlexPreview } from '@/snippets/flex';
+import { flexPropDefs } from './props';
+import { spacingPropDefs } from '../../../../utils/propDefs';
 
 # Flex
 
@@ -44,30 +46,11 @@ columns. All values are responsive.
 
 ## API reference
 
-<PropsTable
-  data={{
-    align: {
-      type: ['start', 'center', 'end'],
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      required: false,
-    },
-    className: {
-      type: 'string',
-      required: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      required: false,
-    },
-  }}
-/>
+<PropsTable data={flexPropDefs} />
 
 The grid component also accepts all the spacing props from the Box component.
 
-<PropsTable data={spacePropsList} />
+<PropsTable data={spacingPropDefs} />
 
 ## Common questions
 

canon-docs/src/app/(docs)/components/flex/props.ts

@@ -0,0 +1,27 @@
+import {
+  PropDef,
+  childrenPropDefs,
+  classNamePropDefs,
+  stylePropDefs,
+} from '../../../../utils/propDefs';
+
+export const flexPropDefs: Record<string, PropDef> = {
+  align: {
+    type: 'enum',
+    values: ['start', 'center', 'end', 'baseline', 'stretch'],
+    responsive: true,
+  },
+  direction: {
+    type: 'enum',
+    values: ['row', 'column', 'row-reverse', 'column-reverse'],
+    responsive: true,
+  },
+  justify: {
+    type: 'enum',
+    values: ['start', 'center', 'end', 'between'],
+    responsive: true,
+  },
+  ...childrenPropDefs,
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};

canon-docs/src/app/(docs)/components/grid/page.mdx

@@ -6,7 +6,7 @@ import { grid } from '@/snippets/_snippets';
 import { Snippet } from '@/components/Snippet';
 import { GridPreview } from '@/snippets/grid';
 import { spacingPropDefs } from '../../../../utils/propDefs';
-import { gridPropDefs } from './props';
+import { gridPropDefs, gridItemPropDefs } from './props';
 
 # Grid
 
@@ -53,38 +53,7 @@ component. This will give you access to `rowSpan`, `colSpan`, `start` and
 `end`. All values are responsive. This component is optional, you can use any
 elements directly if you prefer.
 
-<PropsTable
-  data={{
-    colSpan: {
-      type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'],
-      responsive: true,
-    },
-    rowSpan: {
-      type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'],
-      responsive: true,
-    },
-    start: {
-      type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
-      responsive: true,
-    },
-    end: {
-      type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      required: false,
-    },
-    className: {
-      type: 'string',
-      required: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      required: false,
-    },
-  }}
-/>
+<PropsTable data={gridItemPropDefs} />
 
 ## Examples
 

canon-docs/src/app/(docs)/components/grid/props.ts

@@ -1,36 +1,59 @@
 import {
   PropDef,
+  childrenPropDefs,
   classNamePropDefs,
-  displayPropDefs,
   stylePropDefs,
 } from '../../../../utils/propDefs';
 
+const columnsValues = [
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  '11',
+  '12',
+];
+
 export const gridPropDefs: Record<string, PropDef> = {
   columns: {
     type: 'enum | string',
-    values: [
-      '1',
-      '2',
-      '3',
-      '4',
-      '5',
-      '6',
-      '7',
-      '8',
-      '9',
-      '10',
-      '11',
-      '12',
-      'auto',
-    ],
+    values: [...columnsValues, 'auto'],
     responsive: true,
     default: 'auto',
   },
-  children: {
-    type: 'enum',
-    values: ['ReactNode'],
-    required: true,
-  },
+  ...childrenPropDefs,
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
+
+export const gridItemPropDefs: Record<string, PropDef> = {
+  colSpan: {
+    type: 'enum | string',
+    values: [...columnsValues, 'full'],
+    responsive: true,
+  },
+  rowSpan: {
+    type: 'enum | string',
+    values: [...columnsValues, 'full'],
+    responsive: true,
+  },
+  start: {
+    type: 'enum | string',
+    values: [...columnsValues, 'auto'],
+    responsive: true,
+  },
+  end: {
+    type: 'enum | string',
+    values: [...columnsValues, 'auto'],
+    responsive: true,
+  },
+  ...childrenPropDefs,
   ...classNamePropDefs,
   ...stylePropDefs,
 };

canon-docs/src/utils/propDefs.ts

@@ -194,3 +194,12 @@ export const stylePropDefs: Record<string, PropDef> = {
     responsive: false,
   },
 };
+
+export const childrenPropDefs: Record<string, PropDef> = {
+  children: {
+    type: 'enum',
+    values: ['ReactNode'],
+    required: true,
+    responsive: false,
+  },
+};