re-structure to monorepo.

packages/webapp/src/components/Grid/Col.tsx

@@ -0,0 +1,113 @@
+// @ts-nocheck
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import React from 'react';
+
+const DEVICE_SIZES = ['xl', 'lg', 'md', 'sm', 'xs'];
+const rowColWidth = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
+
+const rowColumns = PropTypes.oneOfType([
+  rowColWidth,
+  PropTypes.shape({
+    cols: rowColWidth,
+  }),
+]);
+
+const propTypes = {
+  /**
+   * @default 'row'
+   */
+  bsPrefix: PropTypes.string,
+
+  /** Removes the gutter spacing between `Col`s as well as any added negative margins. */
+  noGutters: PropTypes.bool.isRequired,
+  as: PropTypes.elementType,
+
+  /**
+   * The number of columns that will fit next to each other on extra small devices (<576px)
+   *
+   * @type {(number|{ cols: number })}
+   */
+  xs: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on small devices (≥576px)
+   *
+   * @type {(number|{ cols: number })}
+   */
+  sm: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on medium devices (≥768px)
+   *
+   * @type {(number|{ cols: number })}
+   */
+  md: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on large devices (≥992px)
+   *
+   * @type {(number|{ cols: number })}
+   */
+  lg: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on extra large devices (≥1200px)
+   *
+   * @type {(number|{ cols: number })}
+   */
+  xl: rowColumns,
+};
+
+const defaultProps = {
+  noGutters: false,
+};
+
+
+export function Col ({
+  bsPrefix,
+  className,
+  noGutters,
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  as: Component = 'div',
+  ...props
+}) {
+  const decoratedBsPrefix = '';
+  const sizePrefix = `col`;
+  const classes = [];
+
+  DEVICE_SIZES.forEach((brkPoint) => {
+    const propValue = props[brkPoint];
+    delete props[brkPoint];
+
+    let cols;
+    if (propValue != null && typeof propValue === 'object') {
+      ({ cols } = propValue);
+    } else {
+      cols = propValue;
+    }
+
+    const infix = `-${brkPoint}`;
+
+    if (cols != null) classes.push(`${sizePrefix}${infix}-${cols}`);
+  });
+
+  return (
+    <Component
+      {...props}
+      className={classNames(
+        'col',
+        className,
+        decoratedBsPrefix,
+        noGutters && 'no-gutters',
+        ...classes,
+      )}
+    />
+  );
+}
+
+Col.displayName = 'Col';
+Col.propTypes = propTypes;
+Col.defaultProps = defaultProps;
+

packages/webapp/src/components/Grid/Row.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import React from 'react';
+
+const DEVICE_SIZES = ['xl', 'lg', 'md', 'sm', 'xs'];
+const rowColWidth = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
+
+const rowColumns = PropTypes.oneOfType([
+  rowColWidth,
+  PropTypes.shape({
+    cols: rowColWidth,
+  }),
+]);
+
+const propTypes = {
+  /**
+   * @default 'row'
+   */
+  bsPrefix: PropTypes.string,
+
+  /** Removes the gutter spacing between `Col`s as well as any added negative margins. */
+  noGutters: PropTypes.bool.isRequired,
+  as: PropTypes.elementType,
+
+  /**
+   * The number of columns that will fit next to each other on extra small devices (<576px)
+   *
+   * @type {(number|{ cols: number })}
+   */
+  xs: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on small devices (≥576px)
+   *
+   * @type {(number|{ cols: number })}
+   */
+  sm: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on medium devices (≥768px)
+   *
+   * @type {(number|{ cols: number })}
+   */
+  md: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on large devices (≥992px)
+   *
+   * @type {(number|{ cols: number })}
+   */
+  lg: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on extra large devices (≥1200px)
+   *
+   * @type {(number|{ cols: number })}
+   */
+  xl: rowColumns,
+};
+
+const defaultProps = {
+  noGutters: false,
+};
+ 
+export function Row ({
+  bsPrefix,
+  className,
+  noGutters,
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  as: Component = 'div',
+  ...props
+}) {
+  const decoratedBsPrefix = 'row';
+  const sizePrefix = `${decoratedBsPrefix}-cols`;
+  const classes = [];
+
+  DEVICE_SIZES.forEach((brkPoint) => {
+    const propValue = props[brkPoint];
+    delete props[brkPoint];
+
+    let cols;
+    if (propValue != null && typeof propValue === 'object') {
+      ({ cols } = propValue);
+    } else {
+      cols = propValue;
+    }
+
+    const infix = brkPoint !== 'xs' ? `-${brkPoint}` : '';
+
+    if (cols != null) classes.push(`${sizePrefix}${infix}-${cols}`);
+  });
+
+  return (
+    <Component
+      {...props}
+      className={classNames(
+        className,
+        decoratedBsPrefix,
+        noGutters && 'no-gutters',
+        ...classes,
+      )}
+    />
+  );
+}
+
+Row.displayName = 'Row';
+Row.propTypes = propTypes;
+Row.defaultProps = defaultProps;

packages/webapp/src/components/Grid/index.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+export * from './Col'
+export * from './Row'