Improving margin props

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

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

@@ -54,6 +54,13 @@ const Card = () => {
 };
 
 export const Default: Story = {
+  args: {
+    children: 'Hello World',
+    mb: '4',
+  },
+};
+
+export const Preview: Story = {
   args: {
     children: <Card />,
     display: 'inline',
@@ -195,6 +202,13 @@ export const Margin: Story = {
           </Box>
         </Box>
       </Flex>
+      <Flex align="center" gap="4">
+        <Box style={styleInsideBox}>
+          <Box p="40px" {...args}>
+            Custom Margin
+          </Box>
+        </Box>
+      </Flex>
     </Flex>
   ),
 };

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

@@ -27,7 +27,7 @@ import { displayPropDefs } from '../../props/display.props';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
-  const { as = 'div', children } = props;
+  const { children } = props;
 
   const propDefs = {
     ...spacingPropDefs,
@@ -39,7 +39,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   };
   const { className, style } = extractProps(props, propDefs);
 
-  return createElement(as, {
+  return createElement(props.as || 'div', {
     ref,
     className: clsx('canon-Box', className),
     style,

packages/canon/src/utils/extractProps.ts

@@ -24,36 +24,35 @@ export function extractProps(
   },
   propDefs: { [key: string]: any },
 ) {
-  let className: string = props.className || '';
+  let className: string[] = (props.className || '').split(' ');
   let style: React.CSSProperties = props.style || {};
+  const hasProp = (key: string) => props.hasOwnProperty(key);
 
   for (const key in propDefs) {
     // Check if the prop is present or has a default value
-    if (
-      !props.hasOwnProperty(key) &&
-      !propDefs[key].hasOwnProperty('default')
-    ) {
+    if (!hasProp(key) && !propDefs[key].hasOwnProperty('default')) {
       continue; // Skip processing if neither is present
     }
 
-    const value = props.hasOwnProperty(key)
-      ? props[key]
-      : propDefs[key].default;
+    const value = hasProp(key) ? props[key] : propDefs[key].default;
     const propDefsValues = propDefs[key].values;
     const propDefsCustomProperties = propDefs[key].customProperties;
     const propDefsClassName = propDefs[key].className;
     const isResponsive = propDefs[key].responsive;
 
-    const handleValue = (val: any, prefix: string = '') => {
+    const handleValue = (val: string, prefix: string = '') => {
+      // Skip adding class name if the key is "as"
+      if (key === 'as') return;
+
       if (propDefsValues.includes(val)) {
-        className += ` ${prefix}${propDefsClassName}-${val}`;
+        className.push(`${prefix}${propDefsClassName}-${val}`);
       } else {
         const customPropertyKey =
           isResponsive && prefix
             ? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
             : propDefsCustomProperties;
         (style as any)[customPropertyKey] = val;
-        className += ` ${prefix}${propDefsClassName}`;
+        className.push(`${prefix}${propDefsClassName}`);
       }
     };
 
@@ -76,5 +75,11 @@ export function extractProps(
     return acc;
   }, {} as { [key: string]: any });
 
-  return { ...cleanedProps, className, style };
+  console.log(className);
+
+  const newClassNames = className
+    .filter(name => name && name.trim() !== '')
+    .join(' ');
+
+  return { ...cleanedProps, className: newClassNames, style };
 }