Merge pull request #220 from adamkendis/180_FRONT_genericComponents

#180 - Generic React components

package.json

@@ -6,6 +6,9 @@
     "axios": "^0.19.0",
     "babel-jest": "^24.9.0",
     "bulma": "^0.8.0",
+    "bulma-checkradio": "^1.1.1",
+    "bulma-switch": "^2.0.0",
+    "classnames": "^2.2.6",
     "dataframe-js": "^1.4.3",
     "dotenv-webpack": "^1.7.0",
     "gh-pages": "^2.1.1",

src/components/common/Button.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import classNames from 'classnames';
+
+const Button = ({
+  id,
+  label,
+  handleClick,
+  /*
+   *  Props below correspond with Bulma modifiers.
+   *  bulma.io/documentation/elements/button/
+  */
+  color,
+  light,
+  size,
+  fullWidth,
+  outlined,
+  inverted,
+  rounded,
+  hovered,
+  focused,
+  active,
+  loading,
+  isStatic,
+  disabled,
+}) => {
+  // Dynamically generates button className from props to comply with Bulma styling modifiers.
+  const buttonClassName = classNames('button', {
+    [`is-${color}`]: color,
+    'is-light': light,
+    [`is-${size}`]: size,
+    'is-fullwidth': fullWidth,
+    'is-outlined': outlined,
+    'is-inverted': inverted,
+    'is-rounded': rounded,
+    'is-hovered': hovered,
+    'is-focused': focused,
+    'is-active': active,
+    'is-loading': loading,
+    'is-static': isStatic,
+    'is-disabled': disabled,
+  });
+
+  const buttonId = `btn-${id}`;
+
+  return (
+    <button
+      id={buttonId}
+      type="button"
+      onClick={handleClick}
+      disabled={disabled}
+      className={buttonClassName}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default Button;
+
+Button.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  handleClick: PropTypes.func,
+  color: PropTypes.string,
+  light: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
+  fullWidth: PropTypes.bool,
+  outlined: PropTypes.bool,
+  inverted: PropTypes.bool,
+  rounded: PropTypes.bool,
+  hovered: PropTypes.bool,
+  focused: PropTypes.bool,
+  active: PropTypes.bool,
+  loading: PropTypes.bool,
+  isStatic: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+Button.defaultProps = {
+  label: null,
+  handleClick: () => null,
+  color: 'primary',
+  light: false,
+  size: 'normal',
+  fullWidth: false,
+  outlined: false,
+  inverted: false,
+  rounded: false,
+  hovered: false,
+  focused: false,
+  active: false,
+  loading: false,
+  isStatic: false,
+  disabled: false,
+};

src/components/common/Checkbox.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import classNames from 'classnames';
+
+const Checkbox = ({
+  id,
+  type,
+  handleClick,
+  label,
+  name,
+  value,
+  /*
+   *  Props below correspond with Bulma modifiers.
+   *  wikiki.github.io/form/checkradio/
+  */
+  rightToLeft,
+  color,
+  size,
+  circle,
+  block,
+  hasNoBorder,
+  hasBackgroundColor,
+  disabled,
+}) => {
+  // Dynamically generates checkbox className from props to comply with Bulma styling modifiers.
+  const checkboxClassName = classNames('is-checkradio', {
+    'is-rtl': rightToLeft,
+    [`is-${color}`]: color,
+    [`is-${size}`]: size,
+    'is-circle': circle,
+    'is-block': block,
+    'has-no-border': hasNoBorder,
+    'has-background-color': hasBackgroundColor,
+  });
+
+  const checkboxId = `checkbox-${id}`;
+
+  return (
+    <>
+      <input
+        id={checkboxId}
+        type={type}
+        onChange={handleClick}
+        name={name}
+        value={value}
+        className={checkboxClassName}
+        disabled={disabled}
+      />
+      <label htmlFor={checkboxId}>
+        {label}
+      </label>
+    </>
+  );
+};
+
+export default Checkbox;
+
+Checkbox.propTypes = {
+  id: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['checkbox', 'radio']),
+  handleClick: PropTypes.func,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  rightToLeft: PropTypes.bool,
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['small', '', 'medium', 'large']),
+  circle: PropTypes.bool,
+  block: PropTypes.bool,
+  hasNoBorder: PropTypes.bool,
+  hasBackgroundColor: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+Checkbox.defaultProps = {
+  type: 'checkbox',
+  handleClick: () => null,
+  label: null,
+  name: null,
+  value: undefined,
+  rightToLeft: false,
+  color: 'primary',
+  size: '',
+  circle: false,
+  block: false,
+  hasNoBorder: false,
+  hasBackgroundColor: false,
+  disabled: false,
+};

src/components/common/ToggleSwitch.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import classNames from 'classnames';
+
+const ToggleSwitch = ({
+  id,
+  handleClick,
+  label,
+  name,
+  /*
+   *  Props below correspond with Bulma modifiers.
+   *  wikiki.github.io/form/switch/
+  */
+  rightToLeft,
+  color,
+  size,
+  thin,
+  rounded,
+  outlined,
+  disabled,
+}) => {
+  const toggleswitchClassName = classNames('switch', {
+    'is-rtl': rightToLeft,
+    [`is-${color}`]: color,
+    [`is-${size}`]: size,
+    'is-thin': thin,
+    'is-rounded': rounded,
+    'is-outlined': outlined,
+  });
+
+  const toggleswitchId = `toggleswitch-${id}`;
+
+  return (
+    <>
+      <input
+        type="checkbox"
+        id={toggleswitchId}
+        onChange={handleClick}
+        name={name}
+        className={toggleswitchClassName}
+        disabled={disabled}
+      />
+      <label htmlFor={toggleswitchId}>
+        {label}
+      </label>
+    </>
+  );
+};
+
+export default ToggleSwitch;
+
+ToggleSwitch.propTypes = {
+  id: PropTypes.string.isRequired,
+  handleClick: PropTypes.func,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  rightToLeft: PropTypes.bool,
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['small', '', 'medium', 'large']),
+  thin: PropTypes.bool,
+  rounded: PropTypes.bool,
+  outlined: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+ToggleSwitch.defaultProps = {
+  handleClick: () => null,
+  label: null,
+  name: null,
+  rightToLeft: false,
+  color: 'primary',
+  size: '',
+  thin: false,
+  rounded: false,
+  outlined: false,
+  disabled: false,
+};

src/index.js

@@ -4,6 +4,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import 'bulma';
+import 'bulma-checkradio';
+import 'bulma-switch';
 
 import store from './redux/store';
 import App from './App';