feat: support responsive grid

example/Example.stories.tsx

@@ -73,3 +73,40 @@ DifferentColor.parameters = {
 		color: 'rgba(0, 0, 255, 0.1)',
 	},
 };
+
+export const ResponsiveGrid: Story = () => (
+	<>
+		<style dangerouslySetInnerHTML={{__html:`
+		 body {
+		  --columns: 4;
+		  --gap: 8px;
+		  --gutter: 16px;
+          }
+
+		  @media (min-width: 768px) {
+		  body {
+		    --columns: 8;
+		    --gap: 12px;
+		    --gutter: 24px;
+		    }
+		  }
+
+		  @media (min-width: 1024px) {
+		  body {
+		    --columns: 12;
+		    --gap: 24px;
+		    --gutter: 48px;
+		    }
+		  }
+
+		`}}/>
+		<ComponentTest />
+	</>
+)
+ResponsiveGrid.parameters = {
+	grid: {
+		columns: 'var(--columns)',
+		gutter: 'var(--gutter)',
+		gap: 'var(--gap)',
+	},
+};

index.d.ts

@@ -5,7 +5,11 @@ export interface GridConfig {
 	/**
 	 * Number of columns, default: 12
 	 */
-	columns?: number | undefined;
+	columns?: number | string | undefined;
+	/**
+	 * Maximum number of columns, default: 24
+	 */
+	maxColumns?: number | undefined;
 	/**
 	 * Gap between columns
 	 */

readme.md

@@ -129,6 +129,30 @@ Example.parameters = {
 };
 ```
 
+## Responsive grid
+Storybook-addon-grid does not support responsive grid by itself, delegating this functionality to you.
+
+Why? Our intention is to match your application settings, not to replicate them.
+We hope you are using css media queries to control your grid system in the real application, and would like to _tap into_ them
+
+#### Addon configuration
+```tsx
+Example.parameters = {
+    grid: {
+        // instead of number - give us your custom variable names for
+        // number of columns
+        columns: 'var(--columns)',
+        // gutter
+        gutter: 'var(--gutter)',
+        // gap
+        gap: 'var(--gap)',
+    }
+}
+```
+Then - it's up to you to make those variables work. We would like to be in sync with your app and just work as a part of it.
+
+Example could be sound in our own storybook [ResponsiveGrid](./example/Example.stories.tsx).
+
 ## 📚 Further Readings
 
 - https://compassofdesign.com/articles/design-principle-1-guides-gutters-and-grids

src/components/Grids.tsx

@@ -8,7 +8,7 @@ import { ADDON_ID, PARAM_KEY } from '../constants';
 import { Grids } from './ui';
 
 const ManagerRenderedGrids = () => {
-	const { animation, columns, gap, color, gutter, maxWidth, disable } =
+	const { animation, columns, gap, color, gutter, maxWidth, disable, maxColumns } =
 		useParameter<AddonParameters>(PARAM_KEY, {});
 	const [state] = useAddonState<AddonState>(ADDON_ID);
 
@@ -21,6 +21,7 @@ const ManagerRenderedGrids = () => {
 			visible={disable != null ? !disable : state?.visible ?? false}
 			gutter={gutter}
 			maxWidth={maxWidth}
+			maxColumns={maxColumns}
 		/>
 	);
 };

src/components/ui.tsx

@@ -36,13 +36,12 @@ const Wrapper = styled.div<{ active: boolean; animation: boolean }>(
 	}),
 );
 
-const Grid = styled.div<Exclude<GridConfig, 'color' | 'animation'>>(
-	({ columns, gap, gutter, maxWidth }) => {
+const Grid = styled.div<Exclude<GridConfig, 'color' | 'animation'> & {grid: string}>(
+	({ gap, gutter, maxWidth, grid }) => {
 		let gutterRight = '0',
 			gutterLeft = '0';
 		if (Array.isArray(gutter)) {
-			gutterLeft = gutter[0];
-			gutterRight = gutter[0];
+			([gutterLeft, gutterRight] = gutter)
 		} else if (gutter != null) {
 			gutterLeft = gutterRight = gutter;
 		}
@@ -55,7 +54,8 @@ const Grid = styled.div<Exclude<GridConfig, 'color' | 'animation'>>(
 			right: '0',
 
 			display: 'grid',
-			gridTemplateColumns: `repeat(${columns}, 1fr)`,
+			gridTemplateColumns: grid,
+			gridTemplateRows: '100%',
 			gridColumnGap: gap,
 
 			width: '100%',
@@ -88,17 +88,21 @@ export const Grids: FunctionComponent<
 	color = 'rgba(255, 0, 0, 0.1)',
 	gutter = '50px',
 	maxWidth = '1024px',
+	maxColumns = 24
 }) => {
+	const numberOfColumns = typeof(columns) ==='number' ? columns : maxColumns;
+	const grid = typeof(columns) ==='number' ? `repeat(${columns}, 1fr)` : `repeat(var(${columns.match(/var\((.*)\)/)![1]}), 1fr)`
+
 	const columnDivs = useMemo(
 		() =>
-			Array.from({ length: columns }).map((_, index) => (
+			Array.from({ length: numberOfColumns }).map((_, index) => (
 				<Column key={index} color={color} />
 			)),
-		[columns, color],
+		[numberOfColumns, color],
 	);
 
 	const gridNodes = (
-		<Grid columns={columns} gap={gap} gutter={gutter} maxWidth={maxWidth}>
+		<Grid grid={grid} gap={gap} gutter={gutter} maxWidth={maxWidth} >
 			{columnDivs}
 		</Grid>
 	);