feat: style bill form.

feat: add row and column of grid components.

client/src/components/EstimateListField.js

@@ -1,13 +1,12 @@
 import React, { useCallback, useMemo, useEffect, useState } from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import ListSelect from 'components/ListSelect';
-import { FormattedMessage as T } from 'react-intl';
 
 function EstimateListField({
   products,
   initialProductId,
   selectedProductId,
-  defautlSelectText = <T id={'select_product'} />,
+  defautlSelectText = 'Click to select an item.',
   onProductSelected,
 }) {
   const initialProduct = useMemo(

client/src/components/Grid/Col.js

@@ -0,0 +1,113 @@
+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,
+};
+
+
+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 = '';
+  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 !== 'xs' ? `-${brkPoint}` : '';
+
+    if (cols != null) classes.push(`${sizePrefix}${infix}-${cols}`);
+  });
+
+  return (
+    <Component
+      {...props}
+      className={classNames(
+        'col',
+        className,
+        decoratedBsPrefix,
+        noGutters && 'no-gutters',
+        ...classes,
+      )}
+    />
+  );
+}
+
+Row.displayName = 'Row';
+Row.propTypes = propTypes;
+Row.defaultProps = defaultProps;
+
+export default Row;

client/src/components/Grid/Row.js

@@ -0,0 +1,111 @@
+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,
+};
+ 
+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;
+
+export default Row;

client/src/components/index.js

@@ -26,6 +26,8 @@ import DialogContent from './Dialog/DialogContent';
 import DialogSuspense from './Dialog/DialogSuspense';
 import InputPrependButton from './Forms/InputPrependButton';
 import CategoriesSelectList from './CategoriesSelectList';
+import Row from './Grid/Row';
+import Col from './Grid/Col';
 
 const Hint = FieldHint;
 
@@ -58,5 +60,7 @@ export {
   DialogContent,
   DialogSuspense,
   InputPrependButton,
-  CategoriesSelectList
+  CategoriesSelectList,
+  Col,
+  Row,
 };