Add new components

packages/ui-react/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.5",
+    "@radix-ui/react-separator": "1.0.1",
     "react-is": "^17.0.0"
   },
   "peerDependencies": {
@@ -37,7 +38,6 @@
   },
   "devDependencies": {
     "@babel/cli": "7.19.3",
-    "@babel/core": "7.20.2",
     "@babel/plugin-transform-runtime": "7.19.6",
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
@@ -58,6 +58,7 @@
     "classnames": "2.3.2",
     "css-loader": "3.6.0",
     "downshift": "7.0.4",
+    "eslint": "^8.33.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.3",
     "lodash": "4.17.21",

packages/ui-react/src/atoms/container/__snapshots__/container.stories.storyshot

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components/Atoms/Container centerContent & fluid (100% width) 1`] = `
+<div
+  class="ui-container root"
+  style="display: flex; justify-content: center; align-items: center; width: 100%;"
+>
+  <span>
+    🤖 Robo
+  </span>
+
+  <span>
+    🚀 Cosmo
+  </span>
+
+  <span>
+    🎨 Picasso
+  </span>
+</div>
+`;
+
+exports[`Storyshots Components/Atoms/Container color, bgColor, opacity 1`] = `
+<div
+  class="ui-container root"
+  style="color: purple; background-color: pink; opacity: 0.5;"
+>
+  <div>
+    🤖 Robo
+  </div>
+  <div>
+    🚀 Cosmo
+  </div>
+  <div>
+    🎨 Picasso
+  </div>
+  <div>
+    🐥 Chicken
+  </div>
+  <div>
+    👾 Invaders
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components/Atoms/Container default 1`] = `
+<div
+  class="ui-container root"
+>
+  <span>
+    🤖 Robo
+  </span>
+
+  <span>
+    🚀 Cosmo
+  </span>
+
+  <span>
+    🎨 Picasso
+  </span>
+</div>
+`;
+
+exports[`Storyshots Components/Atoms/Container fancy background with bg 1`] = `
+<div
+  class="ui-container root"
+  style="padding: 15px; color: white;"
+>
+  <div>
+    🤖 Robo
+  </div>
+  <div>
+    🚀 Cosmo
+  </div>
+  <div>
+    🎨 Picasso
+  </div>
+  <div>
+    🐥 Chicken
+  </div>
+  <div>
+    👾 Invaders
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components/Atoms/Container margins with mx, my 1`] = `
+<div
+  class="ui-container root"
+  style="margin: 45px 75px 45px 75px;"
+>
+  <div>
+    🤖 Robo
+  </div>
+  <div>
+    🚀 Cosmo
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components/Atoms/Container padding with pt, pr, pb, pl and width 1`] = `
+<div
+  class="ui-container root"
+  style="width: 150px; padding: 15px 40px 30px 25px;"
+>
+  <div>
+    🤖 Robo
+  </div>
+  <div>
+    🚀 Cosmo
+  </div>
+  <div>
+    🎨 Picasso
+  </div>
+  <div>
+    🐥 Chicken
+  </div>
+  <div>
+    👾 Invaders
+  </div>
+</div>
+`;

packages/ui-react/src/atoms/container/container.constants.js

@@ -0,0 +1 @@
+export const UI_NAME = 'ui-container';

packages/ui-react/src/atoms/container/container.jsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { UI_NAME } from './container.constants';
+
+const PropTypeStringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
+export const Container = (props) => {
+  const {
+    children,
+    className,
+    classNames,
+    maxWidth,
+    fluid,
+    centerContent,
+    width,
+    margin,
+    m,
+    mt,
+    mr,
+    mb,
+    ml,
+    mx,
+    my,
+    padding,
+    p,
+    pt,
+    pr,
+    pb,
+    pl,
+    px,
+    py,
+    color,
+    bg,
+    bgColor,
+    opacity,
+    ...restProps
+  } = props;
+
+  const rootClassName = cx(classNames.root, className);
+
+  const styles = {};
+
+  if (maxWidth) {
+    styles.maxWidth = maxWidth;
+  }
+
+  if (centerContent) {
+    styles.display = 'flex';
+    styles.justifyContent = 'center';
+    styles.alignItems = 'center';
+  }
+
+  if (width) {
+    styles.width = width;
+  }
+
+  if (fluid) {
+    styles.width = '100%';
+  }
+
+  if (margin) {
+    styles.margin = margin;
+  }
+
+  if (m) {
+    styles.margin = m;
+  }
+
+  if (mt) {
+    styles.marginTop = mt;
+  }
+
+  if (mr) {
+    styles.marginRight = mr;
+  }
+
+  if (mb) {
+    styles.marginBottom = mb;
+  }
+
+  if (ml) {
+    styles.marginLeft = ml;
+  }
+
+  if (mx) {
+    styles.marginLeft = mx;
+    styles.marginRight = mx;
+  }
+
+  if (my) {
+    styles.marginTop = my;
+    styles.marginBottom = my;
+  }
+
+  if (padding) {
+    styles.padding = padding;
+  }
+
+  if (p) {
+    styles.padding = p;
+  }
+
+  if (pt) {
+    styles.paddingTop = pt;
+  }
+
+  if (pr) {
+    styles.paddingRight = pr;
+  }
+
+  if (pb) {
+    styles.paddingBottom = pb;
+  }
+
+  if (pl) {
+    styles.paddingLeft = pl;
+  }
+
+  if (px) {
+    styles.paddingLeft = px;
+    styles.paddingRight = px;
+  }
+
+  if (py) {
+    styles.paddingTop = py;
+    styles.paddingBottom = py;
+  }
+
+  if (color) {
+    styles.color = color;
+  }
+
+  if (bgColor) {
+    styles.backgroundColor = bgColor;
+  }
+
+  if (bg) {
+    styles.background = bg;
+  }
+
+  if (opacity) {
+    styles.opacity = opacity;
+  }
+
+  return (
+    <div className={rootClassName} style={styles} {...restProps}>
+      {children}
+    </div>
+  );
+};
+
+Container.displayName = UI_NAME;
+
+Container.propTypes = {
+  /** Adopted child class name */
+  className: PropTypes.string,
+
+  /** CSS Modules class names mapping */
+  classNames: PropTypes.shape({
+    root: PropTypes.string
+  }),
+
+  children: PropTypes.node,
+
+  fluid: PropTypes.bool,
+  maxWidth: PropTypeStringOrNumber,
+  centerContent: PropTypes.bool,
+  width: PropTypeStringOrNumber,
+  margin: PropTypeStringOrNumber,
+  m: PropTypeStringOrNumber,
+  mt: PropTypeStringOrNumber,
+  mr: PropTypeStringOrNumber,
+  mb: PropTypeStringOrNumber,
+  ml: PropTypeStringOrNumber,
+  mx: PropTypeStringOrNumber,
+  my: PropTypeStringOrNumber,
+  padding: PropTypeStringOrNumber,
+  p: PropTypeStringOrNumber,
+  pt: PropTypeStringOrNumber,
+  pr: PropTypeStringOrNumber,
+  pb: PropTypeStringOrNumber,
+  pl: PropTypeStringOrNumber,
+  px: PropTypeStringOrNumber,
+  py: PropTypeStringOrNumber,
+  color: PropTypes.string,
+  bg: PropTypes.string,
+  bgColor: PropTypes.string,
+  opacity: PropTypes.number
+};
+
+Container.defaultProps = {
+  children: null,
+  className: '',
+  classNames: { root: UI_NAME },
+  fluid: false,
+  maxWidth: null,
+  centerContent: false,
+  width: null,
+  margin: null,
+  m: null,
+  mt: null,
+  mr: null,
+  mb: null,
+  ml: null,
+  mx: null,
+  my: null,
+  padding: null,
+  p: null,
+  pt: null,
+  pr: null,
+  pb: null,
+  pl: null,
+  px: null,
+  py: null,
+  color: null,
+  bg: null,
+  bgColor: null,
+  opacity: null
+};

packages/ui-react/src/atoms/container/container.modules.styl

@@ -0,0 +1,3 @@
+.root {
+  border: 1px solid skyblue;
+}