Feature/hadas/flex

.storybook/preview.js

@@ -74,7 +74,11 @@ addParameters({
         "*",
         "Accessibility",
         "Hooks"
-      ]
+      ],
+      includeName: false,
+      // currently there is a bug that makes any componet stories to be order alphabetical even so
+      // it is not the default settings. This settings purpose is to sort all the stories of any component by their load time
+      storySort: (a, b) => 0
     }
   }
 });

src/components/Flex/Flex.jsx

@@ -0,0 +1,88 @@
+import React, { useRef, forwardRef, useMemo } from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+import useMergeRefs from "../../hooks/useMergeRefs";
+import { FLEX_POSITIONS, FLEX_GAPS, FLEX_DIRECTIONS } from "./FlexConstants";
+import { BASE_POSITIONS } from "../../constants/positions";
+import Clickable from "../Clickable/Clickable";
+import classes from "./Flex.module.scss";
+
+const Flex = forwardRef(
+  ({ className, id, elementType, direction, wrap, children, justify, align, gap, onClick, style }, ref) => {
+    const componentRef = useRef(null);
+    const mergedRef = useMergeRefs({ refs: [ref, componentRef] });
+    const overrideStyle = useMemo(() => ({ ...style, gap: `${gap}px` }), [style, gap]);
+    const Element = onClick ? Clickable : elementType;
+
+    return (
+      <Element
+        id={id}
+        // in case the element is clickable, we will pass the real element type in this prop
+        elementType={elementType}
+        ref={mergedRef}
+        className={cx(
+          classes.container,
+          classes[`direction${direction}`],
+          classes[`justify${justify}`],
+          classes[`align${align}`],
+          className,
+          {
+            [classes.wrap]: wrap
+          }
+        )}
+        onClick={onClick}
+        style={overrideStyle}
+      >
+        {children}
+      </Element>
+    );
+  }
+);
+
+Flex.justify = FLEX_POSITIONS;
+Flex.align = BASE_POSITIONS;
+Flex.gaps = FLEX_GAPS;
+Flex.directions = FLEX_DIRECTIONS;
+
+Flex.propTypes = {
+  /**
+   * class name to be add to the wrapper
+   */
+  className: PropTypes.string,
+  /**
+   * id to be add to the wrapper
+   */
+  id: PropTypes.string,
+  style: PropTypes.object,
+  direction: PropTypes.oneOf([Flex.directions.ROW, Flex.directions.COLUMN]),
+  elementType: PropTypes.string,
+  wrap: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  justify: PropTypes.oneOf([
+    Flex.justify.START,
+    Flex.justify.CENTER,
+    Flex.justify.END,
+    Flex.justify.SPACE_BETWEEN,
+    Flex.justify.SPACE_AROUND
+  ]),
+  align: PropTypes.oneOf([Flex.align.START, Flex.align.CENTER, Flex.align.END]),
+  gap: PropTypes.oneOfType([
+    PropTypes.oneOf([Flex.gaps.NONE, Flex.gaps.SMALL, Flex.gaps.MEDIUM, Flex.gaps.LARGE]),
+    PropTypes.number
+  ])
+};
+
+Flex.defaultProps = {
+  className: "",
+  id: undefined,
+  elementType: "div",
+  style: undefined,
+  wrap: false,
+  children: undefined,
+  direction: Flex.directions.ROW,
+  justify: Flex.justify.START,
+  align: Flex.align.CENTER,
+  gap: Flex.gaps.NONE
+};
+
+export default Flex;

src/components/Flex/Flex.module.scss

@@ -0,0 +1,48 @@
+@import "../../styles/themes.scss";
+
+.container {
+  display: flex;
+  flex-direction: row;
+  &.justify {
+    &Start {
+      justify-content: flex-start;
+    }
+
+    &End {
+      justify-content: flex-end;
+    }
+
+    &Center {
+      justify-content: center;
+    }
+
+    &SpaceBetween {
+      justify-content: space-between;
+    }
+
+    &SpaceAround {
+      justify-content: space-around;
+    }
+  }
+  &.align {
+    &Start {
+      align-items: flex-start;
+    }
+
+    &End {
+      align-items: flex-end;
+    }
+
+    &Center {
+      align-items: center;
+    }
+  }
+  &.direction {
+    &Column {
+      flex-direction: column;
+    }
+  }
+  &.wrap {
+    flex-wrap: wrap;
+  }
+}

src/components/Flex/FlexConstants.js

@@ -0,0 +1,20 @@
+import { BASE_POSITIONS } from "../../constants/positions";
+
+export const FLEX_POSITIONS = Object.freeze({
+  ...BASE_POSITIONS,
+  SPACE_AROUND: "SpaceAround",
+  SPACE_BETWEEN: "SpaceBetween"
+});
+
+export const FLEX_GAPS = Object.freeze({
+  XS: 4,
+  SMALL: 8,
+  MEDIUM: 16,
+  LARGE: 24,
+  NONE: 0
+});
+
+export const FLEX_DIRECTIONS = Object.freeze({
+  ROW: "Row",
+  COLUMN: "Column"
+});