Fix linter errors

init-env.js

@@ -2,7 +2,7 @@ import dotenv from 'dotenv'
 import packageConfig from './package.json'
 import dotenvExpand from 'dotenv-expand'
 
-if(!Boolean(process.env.APP_NAME)) {
+if(!process.env.APP_NAME) {
   // set APP_NAME from package.json
   process.env.APP_NAME = packageConfig.name
 }

src/app/common/forms/BaseFieldLayout.js

@@ -40,16 +40,16 @@ export default function BaseFieldLayout({
   const formattedError = useMemo(() => Array.isArray(error) ? error[0] : error, [error])
 
   return (
-    <div className='form-group'>
+    <div className="form-group">
       {label && (
-        <label className='control-label'>
+        <label className="control-label">
           {label}
-          {required && <span className='control-asterisk'>*</span>}
+          {required && <span className="control-asterisk">*</span>}
         </label>
       )}
-      <div className='control-field'>
-        <div className='control-element'>
-          {prefix && <div className='control-prefix'>{prefix}</div>}
+      <div className="control-field">
+        <div className="control-element">
+          {prefix && <div className="control-prefix">{prefix}</div>}
           <InputComponent
             required={required}
             {...rest}

src/app/common/forms/FormPanel.js

@@ -18,8 +18,8 @@ export default function FormPanel(props) {
   return (
     <Panel defaultExpanded={isExpanded}>
       <Panel.Heading>
-        <Panel.Title componentClass='h3' toggle={isCollapsible}>{panelTitle}</Panel.Title>
-        { isCollapsible && (<Panel.Toggle componentClass='i' className='collapse-icon'></Panel.Toggle>) }
+        <Panel.Title componentClass="h3" toggle={isCollapsible}>{panelTitle}</Panel.Title>
+        { isCollapsible && (<Panel.Toggle componentClass="i" className="collapse-icon"></Panel.Toggle>) }
       </Panel.Heading>
       <Panel.Body collapsible={isCollapsible} {...restProps} />
     </Panel>

src/app/common/forms/inputs/CheckboxInput.js

@@ -34,12 +34,12 @@ export default function CheckboxInput({
 }) {
   const handleChange = useCallback((e) => onChange(e.target.checked), [onChange])
   return (
-    <div className='input-wrapper'>
+    <div className="input-wrapper">
       {
         <label className={inputClassName}>
           <input
             name={name}
-            type='checkbox'
+            type="checkbox"
             checked={value === true}
             value={value}
             onChange={handleChange}

src/app/common/forms/inputs/DateInput.js

@@ -37,7 +37,7 @@ export default function DateInput({
 }) {
   const handleChange = useCallback((value) => onChange(dateToValue(value, dateFormat)), [onChange])
   return (
-    <div className='datepicker'>
+    <div className="datepicker">
       <DatePicker
         selected={valueToDate(value, dateFormat)}
         onChange={handleChange}

src/app/common/forms/inputs/NumberInput.js

@@ -34,7 +34,7 @@ export default function NumberInput({
   return (
     <input
       {...props}
-      type='number'
+      type="number"
       className={inputClassName}
       onChange={handleChange}
     />

src/app/common/forms/inputs/RadiosInput.js

@@ -32,14 +32,14 @@ export default function RadiosInput({
 }) {
   const handleChange = useCallback((e) => onChange(e.target.value), [onChange])
   return (
-    <div className='radio-wrapper'>
+    <div className="radio-wrapper">
       {
         options.map((option) => (
           <label
             className={inputClassName}
             key={option[valueKey]}>
             <input
-              type='radio'
+              type="radio"
               onChange={handleChange}
               checked={value === option[valueKey]}
               value={option[valueKey]}

src/app/common/modals/ModalTrigger.js

@@ -37,7 +37,7 @@ export default class ModalTrigger extends Component {
       let child = cloneElement(Children.only(children), { onClick: this.open, key: 'modal-control' })
       return [
         child,
-        <ModalWrapper {...this.props} show={this.state.toggled} onHide={this.close} key='modal-dialog' />,
+        <ModalWrapper {...this.props} show={this.state.toggled} onHide={this.close} key="modal-dialog" />,
       ]
     }
 }

src/app/common/widgets/Loading.jsx

@@ -10,5 +10,5 @@ Loading.defaultProps = {
 }
 
 export default function Loading({ isLoading, children }) {
-  return isLoading ? <div className='loading-wrapper'>loading..</div> : children
+  return isLoading ? <div className="loading-wrapper">loading..</div> : children
 }

src/app/common/widgets/Wizard.js

@@ -14,16 +14,16 @@ export default function Wizard(props) {
   const { steps, activeStepIndex } = props
 
   return (
-    <nav className='steps-nav'>
+    <nav className="steps-nav">
       {
         steps.map((step, index) => (
           <a
             className={`item ${activeStepIndex === index ? 'active' : ''}`}
             href={step.url}
             key={index}>
-            <div className='step-item'>
-              <span className='number'>{ index + 1 }</span>
-              <span className='text'>{ step.title }</span>
+            <div className="step-item">
+              <span className="number">{ index + 1 }</span>
+              <span className="text">{ step.title }</span>
             </div>
           </a>
         ))

src/app/layouts/Header.jsx

@@ -7,7 +7,7 @@ export default class Header extends Component {
   render() {
     return (
       <header className={styles.header}>
-        <Link to="root"><img src={logo} alt='logo'/></Link>
+        <Link to="root"><img src={logo} alt="logo"/></Link>
       </header>
     )
   }

src/app/layouts/layout.scss

@@ -12,7 +12,7 @@
 
 .header {
   height: $header-height;
-  background-color: #fff;
+  background-color: $white;
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -22,5 +22,5 @@
   height: $footer-height;
   background-color: $primary;
   text-align: center;
-  color: #fff;
+  color: $white;
 }

src/styles/_variables.scss

@@ -11,7 +11,7 @@ $footer-height: 48px;
 
 // Color system
 
-$white:    #fff !default;
+$white:    #ffffff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
@@ -21,7 +21,7 @@ $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
-$black:    #000 !default;
+$black:    #000000 !default;
 
 $blue:    #007bff !default;
 $indigo:  #6610f2 !default;