feat: Flex component

CHANGELOG.md

@@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add single search flavor for `Dropdown` component @Bugaa92 ([#839](https://github.com/stardust-ui/react/pull/839))
 - Add multiple selection flavor for `Dropdown` component @Bugaa92 ([#845](https://github.com/stardust-ui/react/pull/845))
 - Add `black` and `white` options for the `color` prop of the `Label` component @mnajdova ([#855](https://github.com/stardust-ui/react/pull/855))
+- Add `Flex` component @kuzhelov ([#802](https://github.com/stardust-ui/react/pull/802))
 
 <!--------------------------------[ v0.20.0 ]------------------------------- -->
 ## [v0.20.0](https://github.com/stardust-ui/react/tree/v0.20.0) (2019-02-06)

docs/src/examples/components/Flex/Types/FlexExampleColumns.shorthand.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { Flex, Segment } from '@stardust-ui/react'
+
+const FlexExampleColumns = () => (
+  <>
+    <Flex gap="gap.small" padding="padding.medium">
+      <Flex.Item size="size.half">
+        <Segment content="1/2" />
+      </Flex.Item>
+
+      <Flex.Item size="size.half">
+        <Segment content="1/2" />
+      </Flex.Item>
+    </Flex>
+
+    <Flex gap="gap.small" padding="padding.medium">
+      <Flex.Item size="size.quarter">
+        <Segment content="1/4" />
+      </Flex.Item>
+
+      <Flex.Item size="size.half">
+        <Segment content="1/2" />
+      </Flex.Item>
+
+      <Flex.Item size="size.quarter">
+        <Segment content="1/4" />
+      </Flex.Item>
+    </Flex>
+
+    <Flex gap="gap.small" padding="padding.medium" style={{ minHeight: 200 }}>
+      <Flex.Item size="size.half">
+        <Segment content="Full-height, even when my content doesn't fill the space." />
+      </Flex.Item>
+
+      <Flex.Item size="size.half">
+        <Segment content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque." />
+      </Flex.Item>
+    </Flex>
+  </>
+)
+
+export default FlexExampleColumns

docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { Flex, Input, Button, Label } from '@stardust-ui/react'
+
+const FlexExampleInput = () => (
+  <Flex gap="gap.medium" debug>
+    <Flex.Item grow>
+      <Flex>
+        <Label
+          icon="plane"
+          styles={{ background: 'darkgrey', height: 'auto', padding: '0 15px' }}
+        />
+
+        <Flex.Item grow>
+          <Input placeholder="Enter your flight #" fluid />
+        </Flex.Item>
+      </Flex>
+    </Flex.Item>
+
+    <Button content="Load" />
+  </Flex>
+)
+
+export default FlexExampleInput

docs/src/examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { Flex, Segment } from '@stardust-ui/react'
+
+const FlexExampleItemsAlignment = () => (
+  <Flex column gap="gap.large" hAlign="center" vAlign="center" debug>
+    {[
+      [
+        { hAlign: 'start', vAlign: 'start' },
+        { hAlign: 'start', vAlign: 'center' },
+        { hAlign: 'start', vAlign: 'end' },
+      ],
+      [
+        { hAlign: 'center', vAlign: 'start' },
+        { hAlign: 'center', vAlign: 'center' },
+        { hAlign: 'center', vAlign: 'end' },
+      ],
+      [
+        { hAlign: 'end', vAlign: 'start' },
+        { hAlign: 'end', vAlign: 'center' },
+        { hAlign: 'end', vAlign: 'end' },
+      ],
+    ].map(rowOfAlignmentProps => (
+      <Flex gap="gap.large">
+        {rowOfAlignmentProps.map((alignmentProps: any) => (
+          <Flex inline {...alignmentProps} style={{ width: '100px', height: '100px' }} debug>
+            <Segment styles={{ width: '30px', height: '30px' }} />
+          </Flex>
+        ))}
+      </Flex>
+    ))}
+  </Flex>
+)
+
+export default FlexExampleItemsAlignment

docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Flex, Image, Text, Header } from '@stardust-ui/react'
+
+const FlexExampleMediaCard = () => (
+  <Flex gap="gap.medium" padding="padding.medium" debug>
+    <Flex.Item size="size.medium">
+      <div style={{ position: 'relative' }}>
+        <Image fluid src="public/images/avatar/large/ade.jpg" />
+      </div>
+    </Flex.Item>
+
+    <Flex.Item grow>
+      <Flex column gap="gap.small" vAlign="stretch">
+        <Flex space="between">
+          <Header as="h3" content="LOREM IPSUM" />
+          <Text as="pre" content="Oct 24th, 00:01" />
+        </Flex>
+
+        <Text content="Man braid iPhone locavore hashtag pop-up, roof party forage heirloom chillwave brooklyn yr 8-bit gochujang blog." />
+
+        <Flex.Item push>
+          <Text as="pre" content="COPYRIGHT: Stardust-UI Inc." />
+        </Flex.Item>
+      </Flex>
+    </Flex.Item>
+  </Flex>
+)
+
+export default FlexExampleMediaCard

docs/src/examples/components/Flex/Types/FlexExampleMixedAlignment.shorthand.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { Flex, Segment } from '@stardust-ui/react'
+
+const FlexExampleMixedAlignment = () => (
+  <Flex gap="gap.small" hAlign="center" vAlign="center" debug>
+    <Flex.Item align="start" size="size.small">
+      <Segment content="This cell should be top aligned." />
+    </Flex.Item>
+
+    <Flex.Item align="stretch" size="size.small">
+      <Segment content="Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus." />
+    </Flex.Item>
+
+    <Flex.Item align="center" size="size.small">
+      <Segment content="This cell should be center-aligned." />
+    </Flex.Item>
+
+    <Flex.Item align="end" size="size.small">
+      <Segment content="This cell should be bottom-aligned." />
+    </Flex.Item>
+  </Flex>
+)
+
+export default FlexExampleMixedAlignment

docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { Flex, Button } from '@stardust-ui/react'
+
+const FlexExampleNavMenu = () => (
+  <Flex gap="gap.small" debug>
+    <Button content="Logo" icon="chess rook" />
+
+    <Flex.Item push>
+      <Button content="Page 1" />
+    </Flex.Item>
+
+    <Button content="Page 2" />
+    <Button content="Page 3" />
+  </Flex>
+)
+
+export default FlexExampleNavMenu

docs/src/examples/components/Flex/Types/index.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Media Card"
+      description="Flex items alignment options."
+      examplePath="components/Flex/Types/FlexExampleMediaCard"
+    />
+    <ComponentExample
+      title="Input"
+      description="Flex items alignment options."
+      examplePath="components/Flex/Types/FlexExampleInput"
+    />
+    <ComponentExample
+      title="Nav Menu"
+      description="Flex items alignment options."
+      examplePath="components/Flex/Types/FlexExampleNavMenu"
+    />
+    <ComponentExample
+      title="Items Alignment"
+      description="Flex items alignment options."
+      examplePath="components/Flex/Types/FlexExampleItemsAlignment"
+    />
+    <ComponentExample
+      title="Mixed Alignment"
+      description="Flex mixed alignment feature."
+      examplePath="components/Flex/Types/FlexExampleMixedAlignment"
+    />
+    <ComponentExample
+      title="Columns (item size)"
+      description="Flex columns example."
+      examplePath="components/Flex/Types/FlexExampleColumns"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Flex/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import Types from './Types'
+
+const FlexExamples = () => (
+  <>
+    <Types />
+  </>
+)
+
+export default FlexExamples

packages/react/src/components/Flex/Flex.tsx

@@ -0,0 +1,112 @@
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+import * as _ from 'lodash'
+import cx from 'classnames'
+
+import { UIComponent, commonPropTypes } from '../../lib'
+import { ReactProps } from '../../types'
+import FlexItem from './FlexItem'
+import FlexGap from './FlexGap'
+
+export interface FlexProps {
+  /** Defines if container should be inline element. */
+  inline?: boolean
+
+  /** Sets vertical flow direction. */
+  column?: boolean
+
+  /** Allows overflow items to wrap on the next container's line. */
+  wrap?: boolean
+
+  /** Controls items alignment in horizontal direction. */
+  hAlign?: 'start' | 'center' | 'end' | 'stretch'
+
+  /** Controls items alignment in vertical direction. */
+  vAlign?: 'start' | 'center' | 'end' | 'stretch'
+
+  /** Defines strategy for distributing remaining space between items. */
+  space?: 'around' | 'between' | 'evenly'
+
+  /** Defines gap between each two adjacent child items. */
+  gap?: 'gap.small' | 'gap.medium' | 'gap.large'
+
+  /** Defines container's padding. */
+  padding?: 'padding.medium'
+
+  /** Enables debug mode. */
+  debug?: boolean
+
+  /** Orders container to fill all parent's space available. */
+  fill?: boolean
+}
+
+/**
+ * Arrange group of items aligned towards common direction.
+ */
+class Flex extends UIComponent<ReactProps<FlexProps>> {
+  static Item = FlexItem
+
+  static Gap = FlexGap
+
+  static displayName = 'Flex'
+  static className = 'ui-flex'
+
+  static defaultProps = {
+    as: 'div',
+  }
+
+  public static propTypes = {
+    ...commonPropTypes.createCommon({
+      content: false,
+    }),
+
+    inline: PropTypes.bool,
+
+    column: PropTypes.bool,
+
+    wrap: PropTypes.bool,
+
+    hAlign: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
+    vAlign: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
+
+    space: PropTypes.oneOf(['around', 'between', 'evenly']),
+
+    gap: PropTypes.oneOf(['gap.small', 'gap.medium', 'gap.large']),
+
+    padding: PropTypes.oneOf(['padding.medium']),
+    fill: PropTypes.bool,
+
+    debug: PropTypes.bool,
+  }
+
+  renderComponent({ ElementType, classes, unhandledProps }): React.ReactNode {
+    return (
+      <ElementType className={classes.root} {...unhandledProps}>
+        {this.renderChildren(classes.gap)}
+      </ElementType>
+    )
+  }
+
+  renderChildren = (gapClasses: string) => {
+    const { column, gap, children } = this.props
+
+    return React.Children.map(children, (child: React.ReactElement<any>, index) => {
+      const childElement =
+        child.type && ((child.type as any) as typeof FlexItem).__isFlexItem
+          ? React.cloneElement(child, {
+              flexDirection: column ? 'column' : 'row',
+            })
+          : child
+
+      const renderGap = index !== 0
+      return (
+        <>
+          {renderGap && gap && <Flex.Gap className={cx(`${Flex.className}__gap`, gapClasses)} />}
+          {childElement}
+        </>
+      )
+    })
+  }
+}
+
+export default Flex

packages/react/src/components/Flex/FlexGap.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+
+const FlexGap: React.FC<any> = ({ className }) => <div className={className} />
+FlexGap.displayName = 'FlexGap'
+
+export default FlexGap