Add Flex and Container component

packages/instant/src/components/ui/container.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+import { cssRuleIfExists } from '../../style/util';
+
+export interface ContainerProps {
+    display?: string;
+    position?: string;
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    maxWidth?: string;
+    margin: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    padding?: string;
+    className?: string;
+    backgroundColor?: ColorOption;
+}
+
+const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
+    <div className={className}>{children}</div>
+);
+
+export const Container = styled(PlainContainer)`
+    ${props => cssRuleIfExists(props, 'display')}
+    ${props => cssRuleIfExists(props, 'position')}
+    ${props => cssRuleIfExists(props, 'top')}
+    ${props => cssRuleIfExists(props, 'right')}
+    ${props => cssRuleIfExists(props, 'bottom')}
+    ${props => cssRuleIfExists(props, 'left')}
+    ${props => cssRuleIfExists(props, 'max-width')}
+    ${props => cssRuleIfExists(props, 'margin')}
+    ${props => cssRuleIfExists(props, 'margin-top')}
+    ${props => cssRuleIfExists(props, 'margin-right')}
+    ${props => cssRuleIfExists(props, 'margin-bottom')}
+    ${props => cssRuleIfExists(props, 'margin-left')}
+    ${props => cssRuleIfExists(props, 'padding')}
+    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+`;
+
+Container.defaultProps = {
+    display: 'inline-block',
+};

packages/instant/src/components/ui/flex.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+export interface FlexProps {
+    direction: 'row' | 'column';
+    flexWrap: 'wrap' | 'nowrap';
+    justify: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
+    align: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
+    backgroundColor?: ColorOption;
+    className?: string;
+}
+
+const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className }) => (
+    <div className={className}>{children}</div>
+);
+
+export const Flex = styled(PlainFlex)`
+    display: flex;
+    direction: ${props => props.direction};
+    flex-wrap: ${props => props.flexWrap};
+    justify-content: ${props => props.justify};
+    align-items: ${props => props.align};
+    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+`;
+
+Flex.defaultProps = {
+    direction: 'row',
+    flexWrap: 'nowrap',
+    justify: 'center',
+    align: 'center',
+};
+
+Flex.displayName = 'Flex';

packages/instant/src/style/util.ts

@@ -0,0 +1,10 @@
+import * as _ from 'lodash';
+
+export const cssRuleIfExists = (props: any, rule: string): string => {
+    const camelCaseRule = _.camelCase(rule);
+    const ruleValueIfExists = props[camelCaseRule];
+    if (!_.isUndefined(ruleValueIfExists)) {
+        return `${rule}: ${ruleValueIfExists};`;
+    }
+    return '';
+};