Feature/hadas/flex

src/components/Flex/Flex.jsx

@@ -0,0 +1,111 @@
+import React, { useRef, forwardRef } from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+import useMergeRefs from "../../hooks/useMergeRefs";
+import { FLEX_POSITIONS, FLEX_SPACING_SIZES } from "./FlexConstants";
+import classes from "./Flex.module.scss";
+import { BASE_POSITIONS } from "../../constants/positions";
+
+const Flex = forwardRef(
+  (
+    {
+      className,
+      id,
+      vertical,
+      wrap,
+      children,
+      horizontalPosition,
+      verticalPosition,
+      horizontalSpacingSize,
+      verticalSpacingSize,
+      style
+    },
+    ref
+  ) => {
+    const componentRef = useRef(null);
+    const mergedRef = useMergeRefs({ refs: [ref, componentRef] });
+
+    return (
+      <div
+        id={id}
+        ref={mergedRef}
+        className={cx(
+          classes["flex-container"],
+          classes[`horizontal-position-${horizontalPosition}`],
+          classes[`horizontal-spacing-size-${horizontalSpacingSize}`],
+          classes[`vertical-position-${verticalPosition}`],
+          classes[`vertical-spacing-size-${verticalSpacingSize}`],
+          className,
+          {
+            [classes["vertical-flex-container"]]: vertical,
+            [classes["wrap"]]: wrap
+          }
+        )}
+        style={style}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Flex.horizontalPositions = FLEX_POSITIONS;
+Flex.verticalPositions = BASE_POSITIONS;
+Flex.verticalSpacingSizes = FLEX_SPACING_SIZES;
+Flex.horizontalSpacingSizes = FLEX_SPACING_SIZES;
+
+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,
+  vertical: PropTypes.bool,
+  wrap: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  horizontalPosition: PropTypes.oneOf([
+    Flex.horizontalPositions.START,
+    Flex.horizontalPositions.CENTER,
+    Flex.horizontalPositions.END,
+    Flex.horizontalPositions.SPACE_BETWEEN,
+    Flex.horizontalPositions.SPACE_AROUND
+  ]),
+  verticalPosition: PropTypes.oneOf([
+    Flex.verticalPositions.START,
+    Flex.verticalPositions.CENTER,
+    Flex.verticalPositions.END,
+    Flex.verticalPositions.SPACE_BETWEEN,
+    Flex.verticalPositions.SPACE_AROUND
+  ]),
+  horizontalSpacingSize: PropTypes.oneOf([
+    Flex.horizontalSpacingSizes.NONE,
+    Flex.horizontalSpacingSizes.SMALL,
+    Flex.horizontalSpacingSizes.MEDIUM,
+    Flex.horizontalSpacingSizes.LARGE
+  ]),
+  verticalSpacingSize: PropTypes.oneOf([
+    Flex.verticalSpacingSizes.NONE,
+    Flex.verticalSpacingSizes.SMALL,
+    Flex.verticalSpacingSizes.MEDIUM,
+    Flex.verticalSpacingSizes.LARGE
+  ])
+};
+
+Flex.defaultProps = {
+  className: "",
+  id: undefined,
+  vertical: false,
+  style: undefined,
+  wrap: false,
+  children: undefined,
+  horizontalPosition: Flex.horizontalPositions.START,
+  horizontalSpacingSize: Flex.horizontalSpacingSizes.SMALL,
+  verticalPosition: Flex.verticalPositions.CENTER,
+  verticalSpacingSize: Flex.verticalSpacingSizes.NONE
+};
+
+export default Flex;

src/components/Flex/Flex.module.scss

@@ -0,0 +1,99 @@
+@import "../../styles/themes.scss";
+
+@mixin main-position-classes {
+  &-start {
+    justify-content: flex-start;
+  }
+
+  &-end {
+    justify-content: flex-end;
+  }
+
+  &-center {
+    justify-content: center;
+  }
+
+  &-space-between {
+    justify-content: space-between;
+  }
+
+  &-space-around {
+    justify-content: space-around;
+  }
+}
+@mixin secondary-position-classes {
+  &-start {
+    align-items: flex-start;
+  }
+
+  &-end {
+    align-items: flex-end;
+  }
+
+  &-center {
+    align-items: center;
+  }
+}
+
+.flex-container {
+  display: flex;
+  flex-direction: row;
+  &.horizontal {
+    &-position {
+      @include main-position-classes;
+    }
+    &-spacing-size {
+      &-small {
+        & > * {
+          margin-inline-end: var(--spacing-small);
+        }
+      }
+      &-medium {
+        & > * {
+          margin-inline-end: var(--spacing-medium);
+        }
+      }
+      &-large {
+        & > * {
+          margin-inline-end: var(--spacing-large);
+        }
+      }
+    }
+  }
+  &.vertical {
+    &-flex-container {
+      flex-direction: column;
+
+      & .vertical-position {
+        @include main-position-classes;
+      }
+
+      & .horizontal-position {
+        @include secondary-position-classes;
+      }
+    }
+    &-position {
+      @include secondary-position-classes;
+    }
+    &-spacing-size {
+      &-small {
+        & > * {
+          margin-block-end: var(--spacing-small);
+        }
+      }
+      &-medium {
+        & > * {
+          margin-block-end: var(--spacing-medium);
+        }
+      }
+      &-large {
+        & > * {
+          margin-block-end: var(--spacing-large);
+        }
+      }
+    }
+  }
+  &.wrap {
+    flex-wrap: wrap;
+  }
+}

src/components/Flex/FlexConstants.js

@@ -0,0 +1,13 @@
+import { BASE_POSITIONS } from "../../constants/positions";
+import { BASE_SIZES } from "../../constants/sizes";
+
+export const FLEX_POSITIONS = Object.freeze({
+  ...BASE_POSITIONS,
+  SPACE_AROUND: "space-around",
+  SPACE_BETWEEN: "space-between"
+});
+
+export const FLEX_SPACING_SIZES = Object.freeze({
+  ...BASE_SIZES,
+  NONE: "none"
+});