✨ Adding Grid component (#28)

Adding Grid component

Author: stuarthendren

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commitd/components",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Committed Component Library",
   "author": "Committed",
   "license": "UNLICENSED",

src/components/box/Box.tsx

@@ -1,7 +1,28 @@
-import { FC, Ref } from 'react'
-import Box, { BoxProps } from '@material-ui/core/Box'
-export type BoxProps = BoxProps & { ref?: Ref<HTMLDivElement> }
-export { Box }
+import { FC, ComponentType, Ref } from 'react'
+import { styled } from '@material-ui/styles'
+import { compose } from '@material-ui/system'
+import {
+  gridcontainer,
+  griditem,
+  GridcontinerProps,
+  GriditemProps
+} from '../../internal'
+import MaterialBox, {
+  BoxProps as MaterialBoxProps
+} from '@material-ui/core/Box'
+
+export type BoxProps = MaterialBoxProps &
+  Omit<GridcontinerProps, 'justifyContent' | 'alignItems'> &
+  Omit<GriditemProps, 'justifySelf' | 'alignSelf'> & {
+    ref?: Ref<HTMLDivElement>
+  }
+
+export const Box: ComponentType<BoxProps> = styled(MaterialBox)(
+  compose(
+    gridcontainer,
+    griditem
+  )
+)
 
 // For documentation only
 import {

src/components/grid/Grid.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react'
+import { BoxProps, Box } from '../box/Box'
+
+export type GridProps = Omit<BoxProps, 'display'>
+
+export type GridRef = HTMLDivElement
+
+export const Grid = React.forwardRef<GridRef, GridProps>(
+  (props: GridProps, ref) => <Box ref={ref} {...props} display="grid" />
+)
+
+// For documentation only
+import {
+  BordersProps,
+  PaletteProps,
+  PositionsProps,
+  ShadowsProps,
+  TypographyProps
+} from '@material-ui/system'
+export type GridDocsProps = BordersProps &
+  PaletteProps &
+  PositionsProps &
+  ShadowsProps &
+  TypographyProps
+
+export const GridDocs: FC<GridDocsProps> = () => null