feat: Flex components (#99)

* Add useStylingProvider hook

* Add Flex components

packages/fuselage/src/components/Flex/index.js

@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { useStylingProvider } from '../../styles';
+
+export function FlexContainer({ children, direction, wrap, justifyContent, alignItems, alignContent }) {
+  const Provider = useStylingProvider({
+    style: {
+      display: 'flex',
+      flexDirection: direction,
+      flexWrap: wrap,
+      justifyContent,
+      alignItems,
+      alignContent,
+    },
+    depth: 1,
+  });
+
+  return <Provider children={children} />;
+}
+
+FlexContainer.displayName = 'Flex.Container';
+
+FlexContainer.propTypes = {
+  direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
+  wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
+  justifyContent: PropTypes.oneOf([
+    'flex-start', 'flex-end', 'center',
+    'space-between', 'space-around', 'space-evenly',
+    'start', 'end', 'left', 'right',
+    'flex-start safe', 'flex-end safe', 'center safe',
+    'space-between safe', 'space-around safe', 'space-evenly safe',
+    'start safe', 'end safe', 'left safe', 'right safe',
+  ]),
+  alignItems: PropTypes.oneOf([
+    'stretch', 'flex-start', 'flex-end', 'center',
+    'baseline', 'first baseline', 'last baseline',
+    'start', 'end', 'self-start', 'self-end',
+    'stretch safe', 'flex-start safe', 'flex-end safe', 'center safe',
+    'baseline safe', 'first baseline safe', 'last baseline safe',
+    'start safe', 'end safe', 'self-start safe', 'self-end safe',
+  ]),
+  alignContent: PropTypes.oneOf([
+    'flex-start', 'flex-end', 'center',
+    'space-between', 'space-around', 'space-evenly', 'stretch',
+    'start', 'end', 'baseline', 'first baseline', 'last baseline',
+    'flex-start safe', 'flex-end safe', 'center safe',
+    'space-between safe', 'space-around safe', 'space-evenly safe', 'stretch safe',
+    'start safe', 'end safe', 'baseline safe', 'first baseline safe', 'last baseline safe',
+  ]),
+};
+
+export function FlexItem({ children, order, grow, shrink, basis, align }) {
+  const Provider = useStylingProvider({
+    style: {
+      order,
+      flexGrow: grow,
+      flexShrink: shrink,
+      flexBasis: basis,
+      alignSelf: align,
+    },
+    depth: 1,
+  });
+
+  return <Provider children={children} />;
+}
+
+FlexItem.displayName = 'Flex.Item';
+
+FlexItem.propTypes = {
+  order: PropTypes.number,
+  grow: PropTypes.number,
+  shrink: PropTypes.number,
+  basis: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf(['auto'])]),
+  align: PropTypes.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
+};
+
+export const Flex = {
+  Container: FlexContainer,
+  Item: FlexItem,
+};

packages/fuselage/src/components/Flex/spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Flex } from '../..';
+
+describe('Flex.Container', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Flex.Container />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});
+
+describe('Flex.Item', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Flex.Item />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});

packages/fuselage/src/components/Flex/stories.mdx

@@ -0,0 +1,210 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { Box, Flex, Tile } from '../..';
+
+<Meta title='Misc|Flex' parameters={{ jest: ['Flex/spec'] }} />
+
+# Flex
+
+<Preview>
+  <Story name='Default'>
+    <Flex.Container>
+      <Tile elevation={1}>
+        {Array.from({ length: 3 }).map((_, i) =>
+          <Flex.Item key={i}>
+            <Tile elevation={1}>#{i + 1}</Tile>
+          </Flex.Item>
+        )}
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>
+
+### Flex.Container
+
+<Props of={Flex.Container} />
+
+
+### Flex.Item
+
+<Props of={Flex.Item} />
+
+## Direction
+
+<Preview>
+  <Story name='Direction'>
+    <Flex.Container direction='row-reverse'>
+      <Tile elevation={1}>
+        {Array.from({ length: 3 }).map((_, i) =>
+          <Flex.Item key={i}>
+            <Tile elevation={1}>#{i + 1}</Tile>
+          </Flex.Item>
+        )}
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>
+
+## Wrap
+
+<Preview>
+  <Story name='Wrap'>
+    <Flex.Container wrap='wrap'>
+      <Tile elevation={1}>
+        {Array.from({ length: 12 }).map((_, i) =>
+          <Flex.Item key={i}>
+            <Tile elevation={1}>#{i + 1}</Tile>
+          </Flex.Item>
+        )}
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>
+
+## Justify content
+
+<Preview>
+  <Story name='Justify Content'>
+    <Flex.Container justifyContent='space-around'>
+      <Tile elevation={1}>
+        {Array.from({ length: 3 }).map((_, i) =>
+          <Flex.Item key={i}>
+            <Tile elevation={1}>#{i + 1}</Tile>
+          </Flex.Item>
+        )}
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>
+
+## Align items
+
+<Preview>
+  <Story name='Align Items'>
+    <Flex.Container alignItems='flex-end'>
+      <Tile elevation={1}>
+        {Array.from({ length: 3 }).map((_, i) =>
+          <Flex.Item key={i}>
+            <Tile elevation={1} style={{ height: i * 100 }}>#{i + 1}</Tile>
+          </Flex.Item>
+        )}
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>
+
+## Align content
+
+<Preview>
+  <Story name='Align Content'>
+    <Flex.Container wrap='wrap' alignContent='flex-end'>
+      <Tile elevation={1} style={{ minHeight: 400 }}>
+        {Array.from({ length: 12 }).map((_, i) =>
+          <Flex.Item key={i}>
+            <Tile elevation={1}>#{i + 1}</Tile>
+          </Flex.Item>
+        )}
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>
+
+## Order
+
+<Preview>
+  <Story name='Order'>
+    <Flex.Container>
+      <Tile elevation={1}>
+        <Flex.Item>
+          <Tile elevation={1}>#1</Tile>
+        </Flex.Item>
+        <Flex.Item order={1}>
+          <Tile elevation={1}>#2</Tile>
+        </Flex.Item>
+        <Flex.Item>
+          <Tile elevation={1}>#3</Tile>
+        </Flex.Item>
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>
+
+## Grow
+
+<Preview>
+  <Story name='Grow'>
+    <Flex.Container>
+      <Tile elevation={1}>
+        <Flex.Item>
+          <Tile elevation={1}>#1</Tile>
+        </Flex.Item>
+        <Flex.Item grow={1}>
+          <Tile elevation={1}>#2</Tile>
+        </Flex.Item>
+        <Flex.Item>
+          <Tile elevation={1}>#3</Tile>
+        </Flex.Item>
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>
+
+## Shrink
+
+<Preview>
+  <Story name='Shrink'>
+    <Flex.Container>
+      <Tile elevation={1}>
+        <Flex.Item>
+          <Tile elevation={1}>#1</Tile>
+        </Flex.Item>
+        <Flex.Item shrink={1}>
+          <Tile elevation={1} style={{ width: '100%' }}>#2</Tile>
+        </Flex.Item>
+        <Flex.Item>
+          <Tile elevation={1}>#3</Tile>
+        </Flex.Item>
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>
+
+## Basis
+
+<Preview>
+  <Story name='Basis'>
+    <Flex.Container>
+      <Tile elevation={1}>
+        <Flex.Item>
+          <Tile elevation={1}>#1</Tile>
+        </Flex.Item>
+        <Flex.Item basis='400px'>
+          <Tile elevation={1}>#2</Tile>
+        </Flex.Item>
+        <Flex.Item>
+          <Tile elevation={1}>#3</Tile>
+        </Flex.Item>
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>
+
+## Align
+
+<Preview>
+  <Story name='Align'>
+    <Flex.Container alignItems='center'>
+      <Tile elevation={1} style={{ minHeight: 400 }}>
+        <Flex.Item>
+          <Tile elevation={1}>#1</Tile>
+        </Flex.Item>
+        <Flex.Item align='flex-end'>
+          <Tile elevation={1}>#2</Tile>
+        </Flex.Item>
+        <Flex.Item>
+          <Tile elevation={1}>#3</Tile>
+        </Flex.Item>
+      </Tile>
+    </Flex.Container>
+  </Story>
+</Preview>

packages/fuselage/src/components/index.js

@@ -7,6 +7,7 @@ export * from './CheckBox';
 export * from './EmailInput';
 export * from './Field';
 export * from './FieldGroup';
+export * from './Flex';
 export * from './Headline';
 export * from './Icon';
 export * from './InputBox';

packages/fuselage/src/styles/index.js

@@ -4,6 +4,18 @@ import css from '../index.scss';
 
 const StylingContext = createContext([]);
 
+export const useStylingProvider = (props) => {
+  const ancestorStylingProps = useContext(StylingContext);
+
+  const stylingProps = [
+    ...ancestorStylingProps.filter(({ depth }) => depth === undefined),
+    ...ancestorStylingProps.filter(({ depth }) => depth > 0),
+    props,
+  ];
+
+  return ({ children }) => <StylingContext.Provider children={children} value={stylingProps} />;
+};
+
 export const createStylingComponent = (fn) => function StylingComponent(props) {
   const ancestorStylingProps = useContext(StylingContext);