Improve props

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

packages/canon/src/components/Box/Box.stories.tsx

@@ -23,6 +23,8 @@ import {
   argTypesColor,
 } from '../../../docs/utils/argTypes';
 import { boxProperties } from './sprinkles.css';
+import { Stack } from '../Stack';
+import { Inline } from '../Inline';
 
 const argTypesBox = Object.keys(boxProperties.styles).reduce<
   Record<string, any>
@@ -52,53 +54,154 @@ const meta = {
       control: false,
     },
   },
-  args: {
-    as: 'div',
-    background: 'elevation1',
-    borderRadius: 'small',
-    children: 'Basic Box',
-    display: 'block',
-    padding: 'sm',
-  },
 } satisfies Meta<typeof Box>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
-  args: {},
+  args: {
+    style: {
+      background: '#1f47ff',
+      color: 'white',
+      padding: '4px 8px',
+      borderRadius: '4px',
+    },
+    children: 'Basic Box',
+  },
 };
 
-export const Responsive: Story = {
-  render: () => (
-    <Box
-      display={{ xs: 'block', sm: 'flex' }}
-      padding={{ xs: 'xs', sm: 'md', lg: 'lg' }}
-      background="background"
-    >
-      Responsive Box
-    </Box>
+export const Display: Story = {
+  args: {
+    style: {
+      ...Basic.args?.style,
+    },
+  },
+  render: args => (
+    <Stack align="center">
+      <Inline>
+        <Box display="block" {...args}>
+          Block
+        </Box>
+        <Box display="flex" {...args}>
+          Flex
+        </Box>
+        <Box display="inline" {...args}>
+          Inline
+        </Box>
+        <Box display="none" {...args}>
+          None
+        </Box>
+      </Inline>
+      <Box display={{ xs: 'block', sm: 'flex', md: 'inline' }} {...args}>
+        Responsive
+      </Box>
+    </Stack>
   ),
 };
 
-export const FlexContainer: Story = {
-  render: () => (
-    <Box
-      display="flex"
-      flexDirection="column"
-      padding="lg"
-      background="background"
-    >
-      <Box padding="md" background="background" color="primary">
-        Item 1
+export const FlexDirection: Story = {
+  args: {
+    style: {
+      ...Basic.args?.style,
+    },
+    display: 'flex',
+    gap: 'xs',
+  },
+  render: args => (
+    <Stack align="center">
+      <Box flexDirection="row" {...args}>
+        <span>Row</span>
+        <span>Row</span>
       </Box>
-      <Box padding="md" background="background" color="primary">
-        Item 2
+      <Box flexDirection="column" {...args}>
+        <span>Column</span>
+        <span>Column</span>
       </Box>
-      <Box padding="md" background="background" color="primary">
-        Item 3
+      <Box flexDirection={{ xs: 'column', sm: 'row' }} {...args}>
+        <span>Responsive</span>
+        <span>Flex Direction</span>
       </Box>
-    </Box>
+    </Stack>
+  ),
+};
+
+export const JustifyContent: Story = {
+  args: {
+    style: {
+      ...Basic.args?.style,
+      width: '200px',
+    },
+    display: 'flex',
+    gap: 'xs',
+  },
+  render: args => (
+    <Stack>
+      <Box justifyContent="start" {...args}>
+        <span>Flex Start</span>
+      </Box>
+      <Box justifyContent="center" {...args}>
+        <span>Center</span>
+      </Box>
+      <Box justifyContent="end" {...args}>
+        <span>Flex End</span>
+      </Box>
+      <Box justifyContent="around" {...args}>
+        <span>Space</span>
+        <span>Around</span>
+      </Box>
+      <Box justifyContent="between" {...args}>
+        <span>Space</span>
+        <span>Between</span>
+      </Box>
+      <Box
+        justifyContent={{
+          xs: 'between',
+          sm: 'around',
+          md: 'start',
+        }}
+        {...args}
+      >
+        <span>Responsive</span>
+        <span>Spacing</span>
+      </Box>
+    </Stack>
+  ),
+};
+
+export const AlignItems: Story = {
+  args: {
+    style: {
+      ...Basic.args?.style,
+      width: '200px',
+      height: '100px',
+    },
+    display: 'flex',
+    gap: 'xs',
+  },
+  render: args => (
+    <Stack>
+      <Box alignItems="start" {...args}>
+        <span>Flex Start</span>
+      </Box>
+      <Box alignItems="center" {...args}>
+        <span>Center</span>
+      </Box>
+      <Box alignItems="end" {...args}>
+        <span>Flex End</span>
+      </Box>
+      <Box
+        alignItems={{
+          xs: 'start',
+          sm: 'center',
+          md: 'end',
+        }}
+        {...args}
+      >
+        <span>Responsive</span>
+        <span>Spacing</span>
+      </Box>
+    </Stack>
   ),
 };
 

packages/canon/src/components/Box/sprinkles.css.ts

@@ -23,15 +23,15 @@ export const boxProperties = defineProperties({
   defaultCondition: 'xs',
   responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
   properties: {
-    flexDirection: ['row', 'column'],
-    justifyContent: [
-      'stretch',
-      'flex-start',
-      'center',
-      'flex-end',
-      'space-around',
-      'space-between',
-    ],
+    // flexDirection: ['row', 'column'],
+    // justifyContent: [
+    //   'stretch',
+    //   'flex-start',
+    //   'center',
+    //   'flex-end',
+    //   'space-around',
+    //   'space-between',
+    // ],
     alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
     borderRadius: {
       none: 0,

packages/canon/src/components/Box/types.ts

@@ -39,32 +39,25 @@ export type FlexWrapProps =
 /** @public */
 export type JustifyContentProps =
   | 'stretch'
-  | 'flex-start'
+  | 'start'
   | 'center'
-  | 'flex-end'
-  | 'space-around'
-  | 'space-between'
+  | 'end'
+  | 'around'
+  | 'between'
   | Partial<
       Record<
         Breakpoint,
-        | 'stretch'
-        | 'flex-start'
-        | 'center'
-        | 'flex-end'
-        | 'space-around'
-        | 'space-between'
+        'stretch' | 'start' | 'center' | 'end' | 'around' | 'between'
       >
     >;
 
 /** @public */
 export type AlignItemsProps =
   | 'stretch'
-  | 'flex-start'
+  | 'start'
   | 'center'
-  | 'flex-end'
-  | Partial<
-      Record<Breakpoint, 'stretch' | 'flex-start' | 'center' | 'flex-end'>
-    >;
+  | 'end'
+  | Partial<Record<Breakpoint, 'stretch' | 'start' | 'center' | 'end'>>;
 
 /** @public */
 export type BorderRadiusProps =

packages/canon/src/css/utilities/2xl.css

@@ -48,6 +48,46 @@
       flex-direction: column;
     }
 
+    .cu-2xl-justify-stretch {
+      justify-content: stretch;
+    }
+
+    .cu-2xl-justify-start {
+      justify-content: flex-start;
+    }
+
+    .cu-2xl-justify-center {
+      justify-content: center;
+    }
+
+    .cu-2xl-justify-end {
+      justify-content: flex-end;
+    }
+
+    .cu-2xl-justify-around {
+      justify-content: space-around;
+    }
+
+    .cu-2xl-justify-between {
+      justify-content: space-between;
+    }
+
+    .cu-2xl-items-stretch {
+      align-items: stretch;
+    }
+
+    .cu-2xl-items-center {
+      align-items: center;
+    }
+
+    .cu-2xl-items-start {
+      align-items: flex-start;
+    }
+
+    .cu-2xl-items-end {
+      align-items: flex-end;
+    }
+
     .cu-2xl-p-none {
       padding: 0;
     }
@@ -399,5 +439,37 @@
     .cu-2xl-mr-2xl {
       margin-right: var(--canon-spacing-2xl);
     }
+
+    .cu-2xl-gap-none {
+      gap: 0;
+    }
+
+    .cu-2xl-gap-2xs {
+      gap: var(--canon-spacing-2xs);
+    }
+
+    .cu-2xl-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
   }
 }

packages/canon/src/css/utilities/lg.css

@@ -48,6 +48,46 @@
       flex-direction: column;
     }
 
+    .cu-lg-justify-stretch {
+      justify-content: stretch;
+    }
+
+    .cu-lg-justify-start {
+      justify-content: flex-start;
+    }
+
+    .cu-lg-justify-center {
+      justify-content: center;
+    }
+
+    .cu-lg-justify-end {
+      justify-content: flex-end;
+    }
+
+    .cu-lg-justify-around {
+      justify-content: space-around;
+    }
+
+    .cu-lg-justify-between {
+      justify-content: space-between;
+    }
+
+    .cu-lg-items-stretch {
+      align-items: stretch;
+    }
+
+    .cu-lg-items-center {
+      align-items: center;
+    }
+
+    .cu-lg-items-start {
+      align-items: flex-start;
+    }
+
+    .cu-lg-items-end {
+      align-items: flex-end;
+    }
+
     .cu-lg-p-none {
       padding: 0;
     }
@@ -399,5 +439,37 @@
     .cu-lg-mr-2xl {
       margin-right: var(--canon-spacing-2xl);
     }
+
+    .cu-lg-gap-none {
+      gap: 0;
+    }
+
+    .cu-lg-gap-2xs {
+      gap: var(--canon-spacing-2xs);
+    }
+
+    .cu-lg-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-lg-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
   }
 }

packages/canon/src/css/utilities/md.css

@@ -48,6 +48,46 @@
       flex-direction: column;
     }
 
+    .cu-md-justify-stretch {
+      justify-content: stretch;
+    }
+
+    .cu-md-justify-start {
+      justify-content: flex-start;
+    }
+
+    .cu-md-justify-center {
+      justify-content: center;
+    }
+
+    .cu-md-justify-end {
+      justify-content: flex-end;
+    }
+
+    .cu-md-justify-around {
+      justify-content: space-around;
+    }
+
+    .cu-md-justify-between {
+      justify-content: space-between;
+    }
+
+    .cu-md-items-stretch {
+      align-items: stretch;
+    }
+
+    .cu-md-items-center {
+      align-items: center;
+    }
+
+    .cu-md-items-start {
+      align-items: flex-start;
+    }
+
+    .cu-md-items-end {
+      align-items: flex-end;
+    }
+
     .cu-md-p-none {
       padding: 0;
     }
@@ -399,5 +439,37 @@
     .cu-md-mr-2xl {
       margin-right: var(--canon-spacing-2xl);
     }
+
+    .cu-md-gap-none {
+      gap: 0;
+    }
+
+    .cu-md-gap-2xs {
+      gap: var(--canon-spacing-2xs);
+    }
+
+    .cu-md-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-md-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-md-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-md-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-md-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-md-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
   }
 }

packages/canon/src/css/utilities/sm.css

@@ -48,6 +48,46 @@
       flex-direction: column;
     }
 
+    .cu-sm-justify-stretch {
+      justify-content: stretch;
+    }
+
+    .cu-sm-justify-start {
+      justify-content: flex-start;
+    }
+
+    .cu-sm-justify-center {
+      justify-content: center;
+    }
+
+    .cu-sm-justify-end {
+      justify-content: flex-end;
+    }
+
+    .cu-sm-justify-around {
+      justify-content: space-around;
+    }
+
+    .cu-sm-justify-between {
+      justify-content: space-between;
+    }
+
+    .cu-sm-items-stretch {
+      align-items: stretch;
+    }
+
+    .cu-sm-items-center {
+      align-items: center;
+    }
+
+    .cu-sm-items-start {
+      align-items: flex-start;
+    }
+
+    .cu-sm-items-end {
+      align-items: flex-end;
+    }
+
     .cu-sm-p-none {
       padding: 0;
     }
@@ -399,5 +439,37 @@
     .cu-sm-mr-2xl {
       margin-right: var(--canon-spacing-2xl);
     }
+
+    .cu-sm-gap-none {
+      gap: 0;
+    }
+
+    .cu-sm-gap-2xs {
+      gap: var(--canon-spacing-2xs);
+    }
+
+    .cu-sm-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-sm-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
   }
 }

packages/canon/src/css/utilities/xl.css

@@ -48,6 +48,46 @@
       flex-direction: column;
     }
 
+    .cu-xl-justify-stretch {
+      justify-content: stretch;
+    }
+
+    .cu-xl-justify-start {
+      justify-content: flex-start;
+    }
+
+    .cu-xl-justify-center {
+      justify-content: center;
+    }
+
+    .cu-xl-justify-end {
+      justify-content: flex-end;
+    }
+
+    .cu-xl-justify-around {
+      justify-content: space-around;
+    }
+
+    .cu-xl-justify-between {
+      justify-content: space-between;
+    }
+
+    .cu-xl-items-stretch {
+      align-items: stretch;
+    }
+
+    .cu-xl-items-center {
+      align-items: center;
+    }
+
+    .cu-xl-items-start {
+      align-items: flex-start;
+    }
+
+    .cu-xl-items-end {
+      align-items: flex-end;
+    }
+
     .cu-xl-p-none {
       padding: 0;
     }
@@ -399,5 +439,37 @@
     .cu-xl-mr-2xl {
       margin-right: var(--canon-spacing-2xl);
     }
+
+    .cu-xl-gap-none {
+      gap: 0;
+    }
+
+    .cu-xl-gap-2xs {
+      gap: var(--canon-spacing-2xs);
+    }
+
+    .cu-xl-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-xl-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
   }
 }

packages/canon/src/css/utilities/xs.css

@@ -47,6 +47,46 @@
     flex-direction: column;
   }
 
+  .cu-justify-stretch {
+    justify-content: stretch;
+  }
+
+  .cu-justify-start {
+    justify-content: flex-start;
+  }
+
+  .cu-justify-center {
+    justify-content: center;
+  }
+
+  .cu-justify-end {
+    justify-content: flex-end;
+  }
+
+  .cu-justify-around {
+    justify-content: space-around;
+  }
+
+  .cu-justify-between {
+    justify-content: space-between;
+  }
+
+  .cu-items-stretch {
+    align-items: stretch;
+  }
+
+  .cu-items-center {
+    align-items: center;
+  }
+
+  .cu-items-start {
+    align-items: flex-start;
+  }
+
+  .cu-items-end {
+    align-items: flex-end;
+  }
+
   .cu-p-none {
     padding: 0;
   }
@@ -398,4 +438,36 @@
   .cu-mr-2xl {
     margin-right: var(--canon-spacing-2xl);
   }
+
+  .cu-gap-none {
+    gap: 0;
+  }
+
+  .cu-gap-2xs {
+    gap: var(--canon-spacing-2xs);
+  }
+
+  .cu-gap-xs {
+    gap: var(--canon-spacing-xs);
+  }
+
+  .cu-gap-sm {
+    gap: var(--canon-spacing-sm);
+  }
+
+  .cu-gap-md {
+    gap: var(--canon-spacing-md);
+  }
+
+  .cu-gap-lg {
+    gap: var(--canon-spacing-lg);
+  }
+
+  .cu-gap-xl {
+    gap: var(--canon-spacing-xl);
+  }
+
+  .cu-gap-2xl {
+    gap: var(--canon-spacing-2xl);
+  }
 }

packages/canon/src/utils/getClassNames.ts

@@ -29,13 +29,13 @@ const spaceMap = (type: string) => ({
 const valueMap: Record<string, Record<string, string>> = {
   display: {
     none: 'hidden',
-    flex: 'block',
+    flex: 'flex',
     block: 'block',
     inline: 'inline',
   },
   flexDirection: {
-    row: 'row',
-    column: 'column',
+    row: 'flex-row',
+    column: 'flex-col',
   },
   flexWrap: {
     wrap: 'flex-wrap',
@@ -43,17 +43,17 @@ const valueMap: Record<string, Record<string, string>> = {
   },
   justifyContent: {
     stretch: 'justify-stretch',
-    'flex-start': 'justify-start',
+    start: 'justify-start',
     center: 'justify-center',
-    'flex-end': 'justify-end',
-    'space-around': 'justify-around',
-    'space-between': 'justify-between',
+    end: 'justify-end',
+    around: 'justify-around',
+    between: 'justify-between',
   },
   alignItems: {
     stretch: 'items-stretch',
-    'flex-start': 'items-start',
+    start: 'items-start',
     center: 'items-center',
-    'flex-end': 'items-end',
+    end: 'items-end',
   },
   borderRadius: {
     none: 'rounded-none',