@pareto-engineering/design-system 0.0.1-alpha.67 → 0.0.1-alpha.70

package/src/ui/f/FormInput/FormInput.jsx

@@ -0,0 +1,121 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { memo } from 'react'
+
+import PropTypes from 'prop-types'
+
+import {
+  TextInput,
+  TextareaInput,
+  ChoicesInput,
+  SelectInput,
+} from '../fields'
+
+// Local Definitions
+
+// const baseClassName = styleNames.base
+
+const componentClassName = 'form-input'
+
+/**
+ * This is the component description.
+ */
+const FormInput = ({
+  className,
+  type,
+  extraTypes,
+  disabled,
+  ...otherProps
+}) => {
+  const newClassName = [
+    className,
+    componentClassName,
+  ].filter(Boolean).join(' ')
+
+  if (type === 'textarea') {
+    return (
+      <TextareaInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (type === 'choices') {
+    return (
+      <ChoicesInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (type === 'select') {
+    return (
+      <SelectInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (extraTypes?.[type]) {
+    const Component = extraTypes[type]
+    return (
+      <Component
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  return (
+    <TextInput
+      className={newClassName}
+      disabled={disabled}
+      {...otherProps}
+    />
+  )
+}
+
+FormInput.propTypes = {
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  type:PropTypes.oneOf([
+    'text',
+    'email',
+    'password',
+    'number',
+    'date',
+    'datetime',
+    'month',
+    'tel',
+    'hidden',
+    'select',
+    'choices',
+    'textarea',
+    // to be removed
+    'extendedTypeInput',
+  ]),
+  /**
+   * The object with external Input types that would make the form input extensible
+   */
+  extraTypes:PropTypes.objectOf(PropTypes.func),
+  /**
+   * Whether the Form input input should be disabled
+   */
+  disabled  :PropTypes.bool,
+}
+
+FormInput.defaultProps = {
+  disabled:false,
+}
+
+export default memo(FormInput)

package/src/ui/f/FormInput/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as FormInput } from './FormInput'

package/src/ui/f/common/Label/Label.jsx

@@ -22,6 +22,7 @@ const Label = ({
   style,
   children,
   name,
+  color,
   as:Wrapper,
   // ...otherProps
 }) => {
@@ -37,6 +38,7 @@ const Label = ({
         baseClassName,
         componentClassName,
         userClassName,
+        `x-${color}`,
       ]
         .filter((e) => e)
         .join(' ')}
@@ -77,12 +79,18 @@ Label.propTypes = {
   /**
    *  The html tag that acts as an input label
    */
-  as:PropTypes.node,
+  as   :PropTypes.node,
+  /**
+   *  The default color of the label
+   */
+  color:PropTypes.string,
+
 }
 
 Label.defaultProps = {
   // someProp:false
-  as:'label',
+  as   :'label',
+  color:'main1',
 }
 
 export default Label

package/src/ui/f/common/Label/styles.scss

@@ -4,8 +4,8 @@
 @use "../../../form.scss";
 
 
-// .#{bem.$base}.label {
-
-// }
+.#{bem.$base}.label {
+ color: var(--x);
+}
 
 

package/src/ui/f/fields/CheckboxInput/CheckboxInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, memo } from 'react'
 
 import { useField } from 'formik'
 
@@ -104,4 +104,4 @@ CheckboxInput.defaultProps = {
   // someProp:false
 }
 
-export default CheckboxInput
+export default memo(CheckboxInput)

package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx

@@ -1,15 +1,17 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem'
 
+// Local Definitions
+
 import { Choice } from './common'
 
-// Local Definitions
+import { FormLabel } from '../../common'
 
 const baseClassName = styleNames.base
 
@@ -24,12 +26,14 @@ const ChoicesInput = ({
   style,
   name,
   validate,
-  choices,
+  options,
   multiple,
   gridColumnsMobile,
   gridColumnsDesktop,
   color,
   colorChecked,
+  label,
+  disabled,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -58,16 +62,24 @@ const ChoicesInput = ({
       }}
       // {...otherProps}
     >
-      { choices.map((choice) => (
-        <Choice
-          key={choice.value}
-          name={name}
-          id={`${id}-${choice.value}`}
-          multiple={multiple}
-          validate={validate}
-          {...choice}
-        />
-      ))}
+      {label && (
+      <FormLabel as="p">
+        {label}
+      </FormLabel>
+      )}
+      <div className="choices">
+        { options.map((choice) => (
+          <Choice
+            key={choice.value}
+            name={name}
+            id={`${id}-${choice.value}`}
+            multiple={multiple}
+            validate={validate}
+            disabled={disabled}
+            {...choice}
+          />
+        ))}
+      </div>
     </div>
   )
 }
@@ -96,9 +108,9 @@ ChoicesInput.propTypes = {
    */
   validate:PropTypes.string,
   /**
-   * The choices
+   * The choices input options
    */
-  choices :PropTypes.arrayOf(PropTypes.shape({
+  options :PropTypes.arrayOf(PropTypes.shape({
     value:PropTypes.string,
     label:PropTypes.string,
   })),
@@ -122,7 +134,14 @@ ChoicesInput.propTypes = {
    * The selected choice color
    */
   colorChecked      :PropTypes.string,
-
+  /**
+   * The label of the choices input
+   */
+  label             :PropTypes.string,
+  /**
+   * Whether all the Choices inputs should be disabled
+   */
+  disabled          :PropTypes.bool,
 }
 
 ChoicesInput.defaultProps = {
@@ -130,6 +149,7 @@ ChoicesInput.defaultProps = {
   gridColumnsDesktop:3,
   color             :'background',
   colorChecked      :'main1',
+  disabled          :false,
 }
 
-export default ChoicesInput
+export default memo(ChoicesInput)

package/src/ui/f/fields/ChoicesInput/common/Choice/Choice.jsx

@@ -26,6 +26,7 @@ const Choice = ({
   value,
   multiple,
   validate,
+  disabled,
 }) => {
   const [field] = useField({ name, validate })
   return (
@@ -47,6 +48,7 @@ const Choice = ({
         name={name}
         {...field}
         value={value}
+        disabled={disabled}
       />
       <label htmlFor={id} className={labelClassName} style={labelStyle}>
         { label }
@@ -99,6 +101,10 @@ Choice.propTypes = {
    * The input field validator function
    */
   validate      :PropTypes.func,
+  /**
+   * Whether the radio or checkbox choice should be disabled
+   */
+  disabled      :PropTypes.bool,
 }
 
 export default Choice

package/src/ui/f/fields/ChoicesInput/styles.scss

@@ -9,39 +9,42 @@ $default-padding:var(--u, 1em);
 $default-transition:all .3s;
 
 .#{bem.$base}.choices-input {
-  display: grid;
-  gap: $default-grid-gap;
-  grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
 
-  @include mixins.media($from:$sm-md) {
-    grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
-  }
-
-  .choice {
-    display: flex;
-
-    input {
-      opacity: 0;
-      position: absolute;
-      visibility: none;
-      z-index: -1;
-    }
+  .choices {
+    display: grid;
+    gap: $default-grid-gap;
+    grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
 
-    label {
-      background: var(--x);
-      border-radius: var(--theme-border-radius);
-      color: var(--on-x);
-      display: block;
-      height: 100%;
-      padding: $default-padding;
-      transition: $default-transition;
-      width: 100%;
-      cursor: pointer;
+    @include mixins.media($from:$sm-md) {
+      grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
     }
 
-    input:checked + label {
-      background: var(--y);
-      color: var(--on-y);
+    .choice {
+      display: flex;
+
+      input {
+        opacity: 0;
+        position: absolute;
+        visibility: none;
+        z-index: -1;
+      }
+
+      label {
+        background: var(--x);
+        border-radius: var(--theme-border-radius);
+        color: var(--on-x);
+        display: block;
+        height: 100%;
+        padding: $default-padding;
+        transition: $default-transition;
+        width: 100%;
+        cursor: pointer;
+      }
+
+      input:checked + label {
+        background: var(--y);
+        color: var(--on-y);
+      }
     }
   }
 }

package/src/ui/f/fields/RadioInput/RadioInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, memo } from 'react'
 
 import { useField } from 'formik'
 
@@ -109,4 +109,4 @@ RadioInput.defaultProps = {
   // someProp:false
 }
 
-export default RadioInput
+export default memo(RadioInput)

package/src/ui/f/fields/RatingsInput/RatingsInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useState, useLayoutEffect } from 'react'
+import { useState, useLayoutEffect, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -116,4 +116,4 @@ RatingsInput.defaultProps = {
   labelMax:'very satisfied.',
 }
 
-export default RatingsInput
+export default memo(RatingsInput)

package/src/ui/f/fields/SelectInput/SelectInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, memo } from 'react'
 
 import { useField } from 'formik'
 
@@ -27,6 +27,7 @@ const SelectInput = ({
   name,
   label,
   options,
+  disabled,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -51,7 +52,7 @@ const SelectInput = ({
       // {...otherProps}
     >
       <FormLabel className="input-label" name={name}>{label}</FormLabel>
-      <select className="input v25 pv-v" {...field} id={name}>
+      <select className="input v25 pv-v" {...field} id={name} disabled={disabled}>
         {
         options.map((option) => {
           // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
@@ -100,10 +101,14 @@ SelectInput.propTypes = {
       [PropTypes.string, PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })],
     ),
   ),
+  /**
+   * Whether the select input should be disabled
+   */
+  disabled:PropTypes.bool,
 }
 
 SelectInput.defaultProps = {
-  // someProp:false
+  disabled:false,
 }
 
-export default SelectInput
+export default memo(SelectInput)

package/src/ui/f/fields/{TaskRecommendation/TaskRecommendation.jsx → TaskRecommendationInput/TaskRecommendationInput.jsx}

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -15,12 +15,12 @@ import { FormLabel } from '../../common'
 
 const baseClassName = styleNames.base
 
-const componentClassName = 'task-recommendation'
+const componentClassName = 'task-recommendation-input'
 
 /**
  * This is the component description.
  */
-const TaskRecommendation = ({
+const TaskRecommendationInput = ({
   id,
   className:userClassName,
   style,
@@ -80,7 +80,7 @@ const TaskRecommendation = ({
   )
 }
 
-TaskRecommendation.propTypes = {
+TaskRecommendationInput.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -123,8 +123,8 @@ TaskRecommendation.propTypes = {
   image   :PropTypes.string.isRequired,
 }
 
-TaskRecommendation.defaultProps = {
+TaskRecommendationInput.defaultProps = {
   color:'main2',
 }
 
-export default TaskRecommendation
+export default memo(TaskRecommendationInput)

package/src/ui/f/fields/TaskRecommendationInput/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as TaskRecommendationInput } from './TaskRecommendationInput'

package/src/ui/f/fields/TaskRecommendationInput/styles.scss

@@ -0,0 +1,37 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.task-recommendation-input {
+
+  .task-content {
+    border-radius: var(--theme-border-radius);
+    border: 1px solid var(--x);
+    height: 100%;
+
+    .task {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      height: 100%;
+
+      .input {
+        appearance: none;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom:0;
+        cursor: pointer;
+        width: 100%;
+      }
+
+      .image {
+        width: 7rem;
+      }
+    }
+  }
+}
+
+
+

package/src/ui/f/fields/TextInput/TextInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -30,6 +30,7 @@ const TextInput = ({
   validate,
   oneInputLabel,
   description,
+  disabled,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -64,6 +65,7 @@ const TextInput = ({
         id={name}
         className={`input ${meta.touched && meta.error ? 'input-border-error' : 'input-border'}`}
         type={type}
+        disabled={disabled}
         {...field}
       />
       {(description || (meta.touched && meta.error))
@@ -129,10 +131,15 @@ TextInput.propTypes = {
    * Input description
    */
   description  :PropTypes.string,
+  /**
+   * Whether the text input should be disabled
+   */
+  disabled     :PropTypes.bool,
 }
 
 TextInput.defaultProps = {
-  type:'text',
+  type    :'text',
+  disabled:false,
 }
 
-export default TextInput
+export default memo(TextInput)

package/src/ui/f/fields/{TextArea/TextArea.jsx → TextareaInput/TextareaInput.jsx}

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -15,12 +15,12 @@ import { FormLabel, FormDescription } from '../../common'
 
 const baseClassName = styleNames.base
 
-const componentClassName = 'text-area'
+const componentClassName = 'text-area-input'
 
 /**
  * This is the component description.
  */
-const TextArea = ({
+const TextareaInput = ({
   id,
   className:userClassName,
   style,
@@ -33,6 +33,7 @@ const TextArea = ({
   textAreaColor,
   labelColor,
   description,
+  disabled,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -72,6 +73,7 @@ const TextArea = ({
         className={`textarea v50 pv-v ${meta.touched && meta.error ? 'input-border-error' : 'input-border'}`}
         {...field}
         rows={rows}
+        disabled={disabled}
       >
         {/* It was a dark and stormy night... */}
       </textarea>
@@ -87,7 +89,7 @@ const TextArea = ({
   )
 }
 
-TextArea.propTypes = {
+TextareaInput.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -141,12 +143,17 @@ TextArea.propTypes = {
    * Text area description
    */
   description       :PropTypes.string,
+  /**
+   * Whether the text area should be disabled
+   */
+  disabled          :PropTypes.bool,
 }
 
-TextArea.defaultProps = {
+TextareaInput.defaultProps = {
   rows         :3,
   textAreaColor:'background',
   labelColor   :'main1',
+  disabled     :false,
 }
 
-export default TextArea
+export default memo(TextareaInput)

package/src/ui/f/fields/TextareaInput/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as TextareaInput } from './TextareaInput'

package/src/ui/f/fields/TextareaInput/styles.scss

@@ -0,0 +1,19 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.text-area-input{
+  display: flex;
+  flex-direction: column;
+
+  .textarea {
+    background: var(--light-x);
+    color: var(--on-x);
+
+    &:focus {
+      background: var(--dark-x);
+    }
+  }
+}
+
+
+