feat(components): add stack

dist/components/Stack/Stack.d.ts

@@ -0,0 +1,16 @@
+import { ResponsiveValue, TLengthStyledSystem, GridProps } from 'styled-system';
+import { StyledComponent } from '@emotion/styled';
+export declare type StackProps = GridProps & {
+    /** Minimum width of a child, will create responsive CSS Grid layout like
+     * `grid-template-columns: repeat(auto-fit, minmax($minColumnWidth$)}, 1fr))`.
+     * (You can use either this prop or `numColumns` but not both.)
+     */
+    minColumnWidth?: ResponsiveValue<TLengthStyledSystem>;
+    /** Number of columns, will create a responsive CSS Grid layout like
+     * `grid-template-columns: repeat($numColumns$, 1fr))`.
+     * (You can use either this prop or `minColumnWidth` but not both.)
+     */
+    numColumns?: ResponsiveValue<number>;
+};
+export declare const Stack: StyledComponent<GridProps, any, any>;
+export default Stack;

dist/components/Stack/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stack';
+export { default } from './Stack';

dist/index.d.ts

@@ -1,30 +1,31 @@
-export * from './theme';
-export * from './components/Alert';
-export * from './components/Badge';
-export * from './components/Avatar';
-export * from './components/Button';
-export * from './components/Card';
-export * from './components/Checkbox';
-export * from './components/Close';
-export * from './components/Divider';
-export * from './components/Donut';
-export * from './components/Embed';
-export * from './components/Field';
-export * from './components/Heading';
-export * from './components/IconButton';
-export * from './components/Image';
-export * from './components/Input';
-export * from './components/Label';
-export * from './components/LandingPageSection';
-export * from './components/LandingPageSectionContent';
-export * from './components/Link';
-export * from './components/MenuButton';
-export * from './components/Message';
-export * from './components/NavLink';
-export * from './components/Progress';
-export * from './components/Radio';
-export * from './components/Select';
-export * from './components/Slider';
-export * from './components/Spinner';
-export * from './components/Text';
-export * from './components/Textarea';
+export * from './theme';
+export * from './components/Alert';
+export * from './components/Badge';
+export * from './components/Avatar';
+export * from './components/Button';
+export * from './components/Card';
+export * from './components/Checkbox';
+export * from './components/Close';
+export * from './components/Divider';
+export * from './components/Donut';
+export * from './components/Embed';
+export * from './components/Field';
+export * from './components/Heading';
+export * from './components/IconButton';
+export * from './components/Image';
+export * from './components/Input';
+export * from './components/Label';
+export * from './components/LandingPageSection';
+export * from './components/LandingPageSectionContent';
+export * from './components/Link';
+export * from './components/MenuButton';
+export * from './components/Message';
+export * from './components/NavLink';
+export * from './components/Progress';
+export * from './components/Radio';
+export * from './components/Select';
+export * from './components/Slider';
+export * from './components/Spinner';
+export * from './components/Stack';
+export * from './components/Text';
+export * from './components/Textarea';

src/components/Stack/Readme.md

@@ -0,0 +1,10 @@
+### Stack
+
+```js
+import { Box } from 'theme-ui';
+<Stack gridGap={2}>
+  <Box bg="#F99BE4" sx={{ height: 8 }} />
+  <Box bg="#F249CC" sx={{ height: 8 }} />
+  <Box bg="#CD009B" sx={{ height: 8 }} />
+</Stack>;
+```

src/components/Stack/Stack.tsx

@@ -0,0 +1,40 @@
+import { Box } from 'theme-ui';
+import { ResponsiveValue, TLengthStyledSystem, system, grid, GridProps } from 'styled-system';
+import styled, { StyledComponent } from '@emotion/styled';
+
+const px = (value: TLengthStyledSystem): string => (typeof value === 'number' ? `${value}px` : value);
+
+const getMinMaxValue = (value: TLengthStyledSystem, scale: TLengthStyledSystem[] = []) =>
+  px(scale[value as number] || value);
+
+export type StackProps = GridProps & {
+  /** Minimum width of a child, will create responsive CSS Grid layout like
+   * `grid-template-columns: repeat(auto-fit, minmax($minColumnWidth$)}, 1fr))`.
+   * (You can use either this prop or `numColumns` but not both.)
+   */
+  minColumnWidth?: ResponsiveValue<TLengthStyledSystem>;
+  /** Number of columns, will create a responsive CSS Grid layout like
+   * `grid-template-columns: repeat($numColumns$, 1fr))`.
+   * (You can use either this prop or `minColumnWidth` but not both.)
+   */
+  numColumns?: ResponsiveValue<number>;
+};
+
+export const Stack: StyledComponent<GridProps, any, any> = styled(Box)<StackProps>(
+  { display: 'grid' },
+  grid,
+  system({
+    minColumnWidth: {
+      property: 'gridTemplateColumns',
+      scale: 'space',
+      transform: (value, scale) =>
+        value ? `repeat(auto-fit, minmax(${getMinMaxValue(value, scale as TLengthStyledSystem[])}, 1fr))` : null,
+    },
+    numColumns: {
+      property: 'gridTemplateColumns',
+      transform: (value) => (value ? `repeat(${value}, 1fr)` : null),
+    },
+  })
+);
+
+export default Stack;

src/components/Stack/index.tsx

@@ -0,0 +1,2 @@
+export * from './Stack';
+export { default } from './Stack';

src/index.ts

@@ -26,5 +26,6 @@ export * from './components/Radio';
 export * from './components/Select';
 export * from './components/Slider';
 export * from './components/Spinner';
+export * from './components/Stack';
 export * from './components/Text';
 export * from './components/Textarea';