Update Grid component

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

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

@@ -61,6 +61,20 @@ export const Default: Story = {
   ),
 };
 
+export const Test: Story = {
+  args: {
+    columns: 12,
+    gap: 'md',
+  },
+  render: args => (
+    <Grid {...args}>
+      <FakeBox />
+      <FakeBox />
+      <FakeBox />
+    </Grid>
+  ),
+};
+
 export const LargeGap: Story = {
   args: {
     gap: 'lg',

packages/canon/src/components/Grid/Grid.tsx

@@ -16,62 +16,54 @@
 
 import { createElement, forwardRef } from 'react';
 import { GridItemProps, GridProps } from './types';
-import { gridItemSprinkles, gridSprinkles } from './sprinkles.css';
+import { getClassNames } from '../../utils/getClassNames';
 
 const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const {
     children,
-    columns,
     gap = 'xs',
+    columns = 'auto',
     className,
     style,
     ...restProps
   } = props;
 
-  const sprinklesClassName = gridSprinkles({
-    ...restProps,
-    gap,
-    gridTemplateColumns: columns ? columns : 'auto',
-  });
+  const utilityClassNames = getClassNames({ gap, columns, ...restProps });
 
-  const classNames = ['grid', sprinklesClassName, className]
+  const classNames = ['canon-grid', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
 
-  return createElement(
-    'div',
-    {
-      ref,
-      className: classNames,
-      style,
-    },
+  return createElement('div', {
+    ref,
+    className: classNames,
+    style,
     children,
-  );
+  });
 });
 
 const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
-  const { children, rowSpan, colSpan, start, end, className, style } = props;
+  const { children, className, style, ...restProps } = props;
 
-  const sprinklesClassName = gridItemSprinkles({
-    rowSpan,
-    colSpan,
-    start,
-    end,
-  });
+  const utilityClassNames = getClassNames(restProps);
 
-  const classNames = ['grid-item', sprinklesClassName, className]
+  // const sprinklesClassName = gridItemSprinkles({
+  //   rowSpan,
+  //   colSpan,
+  //   start,
+  //   end,
+  // });
+
+  const classNames = ['grid-item', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
 
-  return createElement(
-    'div',
-    {
-      ref,
-      className: classNames,
-      style,
-    },
+  return createElement('div', {
+    ref,
+    className: classNames,
+    style,
     children,
-  );
+  });
 });
 
 /** @public */

packages/canon/src/components/Grid/styles.css

@@ -1,3 +1,3 @@
-.grid {
+.canon-grid {
   display: grid;
 }

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

@@ -13,27 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ColorProps } from '../../layout/types';
-import { SpaceProps } from '../../layout/types';
-import type { Breakpoint } from '../../types';
-/** @public */
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+import type { UtilityProps, SpaceProps } from '../../types';
 
 /** @public */
-export interface GridProps extends SpaceProps, ColorProps {
+export interface GridProps extends SpaceProps {
   children?: React.ReactNode;
-  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
   className?: string;
+  columns?: UtilityProps['columns'];
+  gap?: UtilityProps['gap'];
   style?: React.CSSProperties;
 }
 
 /** @public */
 export interface GridItemProps {
   children: React.ReactNode;
-  rowSpan?: Columns | 'full';
-  colSpan?: Columns | 'full';
-  start?: Columns | 'auto';
-  end?: Columns | 'auto';
   className?: string;
+  colSpan?: UtilityProps['colSpan'];
+  colEnd?: UtilityProps['colEnd'];
+  colStart?: UtilityProps['colStart'];
+  rowSpan?: UtilityProps['rowSpan'];
   style?: React.CSSProperties;
 }

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

@@ -612,5 +612,57 @@
     .cu-2xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-2xl-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }

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

@@ -612,5 +612,57 @@
     .cu-lg-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-lg-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }

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

@@ -612,5 +612,57 @@
     .cu-md-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-md-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }

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

@@ -612,5 +612,57 @@
     .cu-sm-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-sm-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }

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

@@ -612,5 +612,57 @@
     .cu-xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-xl-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }

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

@@ -611,4 +611,56 @@
   .cu-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
+
+  .cu-grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
 }

packages/canon/src/types.ts

@@ -56,15 +56,10 @@ export type BorderRadius =
 export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
 
 /** @public */
-export interface UtilityProps {
-  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
-  border?: Border | Partial<Record<Breakpoint, Border>>;
-  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
-  display?: Display | Partial<Record<Breakpoint, Display>>;
-  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
-  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
-  gap?: Space | Partial<Record<Breakpoint, Space>>;
-  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
+
+/** @public */
+export interface SpaceProps {
   margin?: Space | Partial<Record<Breakpoint, Space>>;
   marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
   marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
@@ -80,3 +75,20 @@ export interface UtilityProps {
   paddingX?: Space | Partial<Record<Breakpoint, Space>>;
   paddingY?: Space | Partial<Record<Breakpoint, Space>>;
 }
+
+/** @public */
+export interface UtilityProps extends SpaceProps {
+  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
+  border?: Border | Partial<Record<Breakpoint, Border>>;
+  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
+  display?: Display | Partial<Record<Breakpoint, Display>>;
+  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
+  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
+  gap?: Space | Partial<Record<Breakpoint, Space>>;
+  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
+  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
+  rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+}

packages/canon/src/utils/getClassNames.ts

@@ -27,6 +27,89 @@ const spaceMap = (type: string) => ({
 });
 
 const valueMap: Record<string, Record<string, string>> = {
+  alignItems: {
+    stretch: 'items-stretch',
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+  },
+  border: {
+    none: 'border-none',
+    base: 'border-base',
+    error: 'border-error',
+    warning: 'border-warning',
+    selected: 'border-selected',
+  },
+  borderRadius: {
+    none: 'rounded-none',
+    '2xs': 'rounded-2xs',
+    xs: 'rounded-xs',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+  },
+  colEnd: {
+    1: 'col-end-1',
+    2: 'col-end-2',
+    3: 'col-end-3',
+    4: 'col-end-4',
+    5: 'col-end-5',
+    6: 'col-end-6',
+    7: 'col-end-7',
+    8: 'col-end-8',
+    9: 'col-end-9',
+    10: 'col-end-10',
+    11: 'col-end-11',
+    12: 'col-end-12',
+    auto: 'col-end-auto',
+  },
+  colSpan: {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+    5: 'col-span-5',
+    6: 'col-span-6',
+    7: 'col-span-7',
+    8: 'col-span-8',
+    9: 'col-span-9',
+    10: 'col-span-10',
+    11: 'col-span-11',
+    12: 'col-span-12',
+    auto: 'col-span-auto',
+  },
+  colStart: {
+    1: 'col-start-1',
+    2: 'col-start-2',
+    3: 'col-start-3',
+    4: 'col-start-4',
+    5: 'col-start-5',
+    6: 'col-start-6',
+    7: 'col-start-7',
+    8: 'col-start-8',
+    9: 'col-start-9',
+    10: 'col-start-10',
+    11: 'col-start-11',
+    12: 'col-start-12',
+    auto: 'col-start-auto',
+  },
+  columns: {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    5: 'grid-cols-5',
+    6: 'grid-cols-6',
+    7: 'grid-cols-7',
+    8: 'grid-cols-8',
+    9: 'grid-cols-9',
+    10: 'grid-cols-10',
+    11: 'grid-cols-11',
+    12: 'grid-cols-12',
+    auto: 'grid-cols-auto',
+  },
   display: {
     none: 'hidden',
     flex: 'flex',
@@ -42,6 +125,7 @@ const valueMap: Record<string, Record<string, string>> = {
     nowrap: 'flex-nowrap',
     'wrap-reverse': 'flex-wrap-reverse',
   },
+  gap: spaceMap('gap'),
   justifyContent: {
     stretch: 'justify-stretch',
     start: 'justify-start',
@@ -50,44 +134,35 @@ const valueMap: Record<string, Record<string, string>> = {
     around: 'justify-around',
     between: 'justify-between',
   },
-  alignItems: {
-    stretch: 'items-stretch',
-    start: 'items-start',
-    center: 'items-center',
-    end: 'items-end',
-  },
-  borderRadius: {
-    none: 'rounded-none',
-    '2xs': 'rounded-2xs',
-    xs: 'rounded-xs',
-    sm: 'rounded-sm',
-    md: 'rounded-md',
-    lg: 'rounded-lg',
-    xl: 'rounded-xl',
-    '2xl': 'rounded-2xl',
-  },
-  border: {
-    none: 'border-none',
-    base: 'border-base',
-    error: 'border-error',
-    warning: 'border-warning',
-    selected: 'border-selected',
-  },
-  padding: spaceMap('p'),
-  paddingX: spaceMap('px'),
-  paddingY: spaceMap('py'),
-  paddingLeft: spaceMap('pl'),
-  paddingRight: spaceMap('pr'),
-  paddingTop: spaceMap('pt'),
-  paddingBottom: spaceMap('pb'),
   margin: spaceMap('m'),
-  marginX: spaceMap('mx'),
-  marginY: spaceMap('my'),
+  marginBottom: spaceMap('mb'),
   marginLeft: spaceMap('ml'),
   marginRight: spaceMap('mr'),
   marginTop: spaceMap('mt'),
-  marginBottom: spaceMap('mb'),
-  gap: spaceMap('gap'),
+  marginX: spaceMap('mx'),
+  marginY: spaceMap('my'),
+  padding: spaceMap('p'),
+  paddingBottom: spaceMap('pb'),
+  paddingLeft: spaceMap('pl'),
+  paddingRight: spaceMap('pr'),
+  paddingTop: spaceMap('pt'),
+  paddingX: spaceMap('px'),
+  paddingY: spaceMap('py'),
+  rowSpan: {
+    1: 'row-span-1',
+    2: 'row-span-2',
+    3: 'row-span-3',
+    4: 'row-span-4',
+    5: 'row-span-5',
+    6: 'row-span-6',
+    7: 'row-span-7',
+    8: 'row-span-8',
+    9: 'row-span-9',
+    10: 'row-span-10',
+    11: 'row-span-11',
+    12: 'row-span-12',
+    full: 'row-span-full',
+  },
 };
 
 const generateClassNames = (propName: string, propValue: any) => {
@@ -98,7 +173,7 @@ const generateClassNames = (propName: string, propValue: any) => {
     return classNames;
   }
 
-  if (typeof propValue === 'string') {
+  if (typeof propValue === 'string' || typeof propValue === 'number') {
     // If the property value is a string, map it to the valueMap
     const value = valueMap[propName]?.[propValue] || propValue;
     classNames.push(`cu-${value}`);