feat(grid): create grid component

packages/paste-core/utilities/grid/package.json

@@ -2,6 +2,53 @@
   "name": "@twilio-paste/grid",
   "version": "0.0.2",
   "category": "layout",
-  "status": "backlog",
-  "private": true
+  "status": "beta",
+  "description": "A flex based horizontal grid system used to build layouts.",
+  "author": "Twilio Inc.",
+  "license": "MIT",
+  "main:dev": "src/index.tsx",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn clean && yarn compile",
+    "build:dev": "yarn clean && yarn compile:dev",
+    "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache",
+    "compile": "rollup -c --environment NODE_ENV:production",
+    "compile:dev": "rollup -c --environment NODE_ENV:development",
+    "prepublishOnly": "yarn build",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@twilio-paste/box": "^2.1.1",
+    "@twilio-paste/flex": "^0.1.1",
+    "@twilio-paste/style-props": "^0.1.1",
+    "@twilio-paste/theme": "^3.0.0",
+    "@twilio-paste/theme-tokens": "^3.0.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "styled-system": "^5.1.2"
+  },
+  "devDependencies": {
+    "@twilio-paste/box": "^2.1.1",
+    "@twilio-paste/flex": "^0.1.1",
+    "@twilio-paste/style-props": "^0.1.1",
+    "@twilio-paste/theme": "^3.0.0",
+    "@twilio-paste/theme-tokens": "^3.0.0",
+    "rollup": "^1.16.2",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.0.1",
+    "rollup-plugin-node-resolve": "^5.1.0",
+    "rollup-plugin-terser": "^5.0.0",
+    "rollup-plugin-typescript2": "^0.21.2",
+    "typescript": "^3.5.2"
+  }
 }

packages/paste-core/utilities/grid/rollup.config.js

@@ -0,0 +1,34 @@
+import typescript from 'rollup-plugin-typescript2';
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import {terser} from 'rollup-plugin-terser';
+import pkg from './package.json';
+
+export default {
+  input: pkg['main:dev'],
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+    },
+    {
+      file: pkg.module,
+      format: 'esm',
+    },
+  ],
+  external: [...Object.keys(pkg.peerDependencies || {})],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({
+      clean: true,
+      typescript: require('typescript'),
+      tsconfig: './tsconfig.build.json',
+    }),
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    process.env.NODE_ENV === 'production' ? terser() : null,
+  ],
+};

packages/paste-core/utilities/grid/src/Column.tsx

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import {compose, layout, space, flexbox, ResponsiveValue} from 'styled-system';
+import {FlexboxProps, LayoutProps, PaddingProps, Space} from '@twilio-paste/style-props';
+import {FlexProps, Vertical} from '@twilio-paste/flex';
+
+type ColumnMinWidth = ResponsiveValue<'100%' | '0'>;
+type ColumnWidthSpan = ResponsiveValue<string>;
+type ColumnOffsetOptions = number;
+export type ColumnOffset = ResponsiveValue<ColumnOffsetOptions>;
+type ColumnSpanOptions = number;
+export type ColumnSpan = ResponsiveValue<ColumnSpanOptions>;
+
+interface ColumnStyles extends Omit<LayoutProps, 'minWidth' | 'width'>, FlexboxProps, PaddingProps {
+  marginLeft?: ResponsiveValue<string>;
+  minWidth?: ColumnMinWidth;
+  width?: ColumnWidthSpan;
+}
+
+export interface ColumnProps extends Omit<FlexProps, 'display' | 'width' | 'minWidth' | 'marginLeft'>, ColumnStyles {
+  count?: number;
+  gutter?: Space;
+  offset?: ColumnOffset;
+  span?: ColumnSpan;
+  vertical?: Vertical;
+}
+
+const getVertical = (vertical: Vertical): ColumnMinWidth => {
+  if (Array.isArray(vertical)) {
+    return (vertical as Vertical[]).map((value: Vertical) => {
+      if (typeof value === 'boolean') {
+        return value === true ? '100%' : '0';
+      }
+      return null;
+    });
+  }
+
+  if (vertical) {
+    return '100%';
+  }
+
+  return '0';
+};
+
+const getSpan = ({count, span}: ColumnProps): ColumnWidthSpan => {
+  if (Array.isArray(span) && count) {
+    return (span as ColumnSpanOptions[]).map((value: ColumnSpanOptions) => {
+      return `${(value / 12) * 100}%`;
+    });
+  }
+
+  if (typeof span === 'number' && count && count <= 12) {
+    return `${(span / 12) * 100}%`;
+  }
+
+  if (count !== undefined) {
+    return `${(1 / count) * 100}%`;
+  }
+
+  return `${(1 / 12) * 100}%`;
+};
+
+const getOffset = (offset: ColumnOffset): ResponsiveValue<string> => {
+  if (Array.isArray(offset)) {
+    return (offset as ColumnOffsetOptions[]).map((value: ColumnOffsetOptions) => {
+      return `${(value / 12) * 100}%`;
+    });
+  }
+
+  return `${((offset as ColumnOffsetOptions) / 12) * 100}%`;
+};
+
+const getColumnStyles = (props: ColumnProps): ColumnStyles => {
+  const columnStyles: ColumnStyles = {
+    width: getSpan(props),
+  };
+
+  if (props.gutter) {
+    columnStyles.paddingLeft = props.gutter;
+    columnStyles.paddingRight = props.gutter;
+  }
+
+  if (!props.offset) {
+    columnStyles.flexGrow = 1;
+    columnStyles.flexShrink = 1;
+    columnStyles.flexBasis = 'auto';
+  }
+
+  if (props.offset) {
+    columnStyles.marginLeft = getOffset(props.offset);
+  }
+
+  if (props.vertical && !props.offset) {
+    columnStyles.minWidth = getVertical(props.vertical);
+    columnStyles.marginLeft = 'space0';
+  }
+
+  return columnStyles;
+};
+
+const StyledColumn = styled.div(
+  compose(
+    space,
+    layout,
+    flexbox
+  )
+) as React.FC<ColumnProps>;
+
+const Column: React.FC<ColumnProps> = ({children, count, gutter, offset, span, vertical}) => {
+  const ColumnStyles = React.useMemo(() => getColumnStyles({count, gutter, offset, span, vertical}), [
+    count,
+    gutter,
+    offset,
+    span,
+    vertical,
+  ]);
+  return (
+    <StyledColumn {...ColumnStyles} display="flex">
+      {children}
+    </StyledColumn>
+  );
+};
+
+Column.propTypes = {
+  offset: PropTypes.oneOfType([
+    PropTypes.oneOfType([PropTypes.number]),
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number])),
+  ] as any),
+  span: PropTypes.oneOfType([
+    PropTypes.oneOfType([PropTypes.number]),
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number])),
+  ] as any),
+};
+
+Column.displayName = 'Column';
+
+export {Column};

packages/paste-core/utilities/grid/src/Grid.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {useTheme} from '@twilio-paste/theme';
+import {ThemeShape} from '@twilio-paste/theme-tokens';
+import {Margin, MarginProps, Space, SpaceOptions, SpaceProps} from '@twilio-paste/style-props';
+import {safelySpreadBoxProps} from '@twilio-paste/box';
+import {Flex, Vertical} from '@twilio-paste/flex';
+
+export interface GridProps extends SpaceProps {
+  children: NonNullable<React.ReactNode>;
+  gutter?: Space;
+  vertical?: Vertical;
+}
+
+const getNegativeMargin = (theme: ThemeShape, gutter?: Space): Margin => {
+  if (Array.isArray(gutter)) {
+    return (gutter as SpaceOptions[]).map((value: SpaceOptions) => {
+      return `-${theme.space[value]}` as SpaceOptions;
+    });
+  }
+
+  if (gutter) {
+    return `-${theme.space[gutter as SpaceOptions]}` as SpaceOptions;
+  }
+
+  return 'auto';
+};
+
+const getGridStyles = (theme: ThemeShape, gutter?: Space): MarginProps => {
+  const marginStyles: MarginProps = {
+    marginLeft: getNegativeMargin(theme, gutter),
+    marginRight: getNegativeMargin(theme, gutter),
+  };
+
+  return marginStyles;
+};
+
+const Grid: React.FC<GridProps> = ({children, gutter, marginTop, marginBottom, vertical, ...props}) => {
+  const GridColumns = React.useMemo(
+    () =>
+      React.Children.map(children, child =>
+        React.isValidElement(child)
+          ? React.cloneElement(child, {count: React.Children.count(children), gutter, vertical})
+          : child
+      ),
+    [children]
+  );
+
+  const GridStyles = React.useMemo(() => getGridStyles(useTheme(), gutter), [gutter]);
+
+  return (
+    <Flex
+      {...GridStyles}
+      {...safelySpreadBoxProps(props)}
+      marginTop={marginTop}
+      marginBottom={marginBottom}
+      vertical={vertical}
+    >
+      {GridColumns}
+    </Flex>
+  );
+};
+
+Grid.propTypes = {
+  children: PropTypes.node.isRequired,
+  vertical: PropTypes.oneOfType([
+    PropTypes.oneOfType([PropTypes.bool]),
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.bool])),
+  ] as any),
+};
+
+Grid.defaultProps = {
+  vertical: false,
+};
+
+Grid.displayName = 'Grid';
+
+export {Grid};

packages/paste-core/utilities/grid/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './Column';