@pareto-engineering/design-system 5.2.1 → 5.4.0

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

@@ -1,94 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-// Local Definitions
-import './styles.scss'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'form-label'
-
-/**
- * This is the component description.
- */
-const Label = ({
-  id,
-  className:userClassName,
-  style,
-  children,
-  name,
-  color,
-  optional,
-  as:Wrapper,
-  // ...otherProps
-}) => (
-  <Wrapper
-    htmlFor={Wrapper === 'label' ? name : undefined}
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-      `x-${color}`,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-  >
-    {children}
-    {optional && ' (Optional)'}
-  </Wrapper>
-)
-
-Label.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   *  The children JSX
-   */
-  children:PropTypes.node,
-
-  /**
-   *  The name of the input label
-   */
-  name:PropTypes.string,
-
-  /**
-   *  The html tag that acts as an input label
-   */
-  as   :PropTypes.node,
-  /**
-   *  The default color of the label
-   */
-  color:PropTypes.string,
-
-  /**
-   * Whether the input should have an optional tag
-   */
-  optional:PropTypes.bool,
-}
-
-Label.defaultProps = {
-  as      :'label',
-  color   :'paragraph',
-  optional:false,
-}
-
-export default Label

package/src/ui/f/common/Label/index.js

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

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

@@ -1,9 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.form-label {
-  color: var(--x);
-}

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

@@ -1,4 +0,0 @@
-export { Label as FormLabel } from './Label'
-export { Description as FormDescription } from './Description'
-export { Debugger as FormDebugger } from './Debugger'
-export * from './utils'

package/src/ui/f/common/utils/index.js

@@ -1,2 +0,0 @@
-export { lookUpInputValueFromFetchedOptions } from './lookUpInputValueFromFetchedOptions'
-export { integerAndGreaterThanZero } from './validators'

package/src/ui/f/common/utils/lookUpInputValueFromFetchedOptions.js

@@ -1,23 +0,0 @@
-import Fuse from 'fuse.js'
-
-const fuseOptions = {
-  findAllMatches:true,
-  keys          :['label'],
-}
-
-export const lookUpInputValueFromFetchedOptions = ({
-  items, inputValue, setOptions, minLength,
-}) => {
-  const fuseSearch = new Fuse(items, fuseOptions)
-  const result = fuseSearch.search(inputValue)
-
-  if (result.length === 0 && inputValue.length > minLength) {
-    setOptions((prevItems) => [
-      ...prevItems,
-      {
-        label:`${inputValue} (Create new)`,
-        value:inputValue,
-      },
-    ])
-  }
-}

package/src/ui/f/common/utils/validators.js

@@ -1,10 +0,0 @@
-export const integerAndGreaterThanZero = (value) => {
-  let error = ''
-  if ((value && value <= 0) || value === 0) {
-    error = 'Value must be greator than zero.'
-  }
-  if (value && value % 1 !== 0) {
-    error = 'You must enter a whole number.'
-  }
-  return error
-}

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

@@ -1,141 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { useField } from 'formik'
-
-import { FormLabel, FormDescription } from '../../common'
-
-// Local Definitions
-import './styles.scss'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'checkbox'
-
-/**
- * This is the component description
- */
-const Checkbox = ({
-  id,
-  className:userClassName,
-  style,
-  name,
-  label,
-  description,
-  disabled,
-  optional,
-  labelColor,
-  // ...otherProps
-}) => {
-  const [field] = useField({ name, type: 'checkbox' })
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {label && (
-        <FormLabel
-          name={name}
-          color={labelColor}
-          optional={optional}
-        // {...otherProps}
-        >
-          {label}
-        </FormLabel>
-      )}
-      <input
-        id={name}
-        className="input"
-        type="checkbox"
-        disabled={disabled}
-        {...field}
-      />
-      <FormDescription className="s-1" description={description} name={name} />
-    </div>
-  )
-}
-
-Checkbox.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The input name (html - and Formik state)
-   */
-  name:PropTypes.string.isRequired,
-
-  /**
-   * The Input description to guide the user if it's not obvious
-   */
-  description:PropTypes.string,
-
-  /**
-   * Whether the input should be disabled
-   */
-  disabled:PropTypes.bool,
-
-  /**
-   * The color of the label
-   */
-  labelColor:PropTypes.string,
-
-  /**
-   * The input label
-   */
-  label:PropTypes.string,
-
-  /**
- * The number of columns the label should span
- */
-  labelSpan:PropTypes.number,
-
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan:PropTypes.number,
-
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan:PropTypes.number,
-
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan:PropTypes.number,
-
-  /**
-   * Whether the input should have an optional tag
-   */
-  optional:PropTypes.bool,
-}
-
-Checkbox.defaultProps = {
-  disabled:false,
-}
-
-export default Checkbox

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

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

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

@@ -1,16 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.checkbox {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
-}

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

@@ -1,178 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { memo } from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-// Local Definitions
-
-import { Choice } from './common'
-
-import { FormDescription, FormLabel } from '../../common'
-
-import './styles.scss'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'choices-input'
-
-/**
- * This is the component description
- */
-const ChoicesInput = ({
-  id,
-  className:userClassName,
-  style,
-  name,
-  validate,
-  options,
-  multiple,
-  color,
-  label,
-  labelColor,
-  optional,
-  disabled,
-  description,
-  spaceBetween,
-  ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-  >
-    {label && (
-    <FormLabel
-      name={name}
-      color={labelColor}
-      optional={optional}
-    >
-      {label}
-    </FormLabel>
-    )}
-    <div className={['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')}>
-      { options.map((choice) => (
-        <Choice
-          className={`x-${color}`}
-          key={choice.value}
-          name={name}
-          id={`${name}-${choice.value}`}
-          multiple={multiple}
-          validate={validate}
-          disabled={disabled}
-          {...otherProps}
-          {...choice}
-        />
-      ))}
-    </div>
-    <FormDescription className="s-1" description={description} name={name} />
-  </div>
-)
-
-ChoicesInput.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style   :PropTypes.objectOf(PropTypes.string),
-  /**
-   * The choices name
-   */
-  name    :PropTypes.string.isRequired,
-  /**
-   * The input field validator function
-   */
-  validate:PropTypes.string,
-  /**
-   * The choices input options
-   */
-  options :PropTypes.arrayOf(PropTypes.shape({
-    value:PropTypes.string,
-    label:PropTypes.string,
-  })),
-  /**
-   * If the input should be multiple - checkbox
-   */
-  multiple         :PropTypes.bool,
-  /**
-   * how many columns should be displayed on the mobile grid
-   */
-  gridColumnsMobile:PropTypes.number,
-
-  /**
-   * The choice color
-   */
-  color       :PropTypes.string,
-  /**
-   * 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,
-
-  /**
-  * Whether the input is optional or not
-  */
-  optional:PropTypes.bool,
-
-  /**
-   * The select input description
-   */
-  description:PropTypes.string,
-
-  /**
- * The number of columns the label should span
- */
-  labelSpan:PropTypes.number,
-
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan:PropTypes.number,
-
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan:PropTypes.number,
-
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan:PropTypes.number,
-
-  /**
-   * The color of the label
-   */
-  labelColor:PropTypes.string,
-}
-
-ChoicesInput.defaultProps = {
-  color   :'interactive',
-  disabled:false,
-}
-
-export default memo(ChoicesInput)

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

@@ -1,127 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-// Local Definitions
-import { useField } from 'formik'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'choice'
-
-/**
- * This is the component description.
- */
-const Choice = ({
-  id,
-  className:userClassName,
-  style,
-  name,
-  label,
-  labelClassName,
-  labelStyle,
-  value,
-  multiple,
-  validate,
-  disabled,
-  ...otherProps
-}) => {
-  const type = multiple ? 'checkbox' : 'radio'
-
-  const [field] = useField({
-    name,
-    validate,
-    type,
-    value,
-  })
-
-  return (
-    <div
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <input
-        type={type}
-        id={id}
-        name={name}
-        {...field}
-        {...otherProps}
-        value={value}
-        disabled={disabled}
-      />
-      <label
-        htmlFor={id}
-        className={[
-          labelClassName,
-          disabled && 'disabled',
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={labelStyle}
-      >
-        { label }
-      </label>
-    </div>
-  )
-}
-
-Choice.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The input name.
-   */
-  name          :PropTypes.string.isRequired,
-  /**
-   * The input label.
-   */
-  label         :PropTypes.string.isRequired,
-  /**
-   * The input label class name.
-   */
-  labelClassName:PropTypes.string,
-  /**
-   * The input label styles.
-   */
-  labelStyle    :PropTypes.objectOf(PropTypes.string),
-  /**
-   * The input value.
-   */
-  value         :PropTypes.string.isRequired,
-  /**
-   * If the input should be multiple - checkbox
-   */
-  multiple      :PropTypes.bool,
-  /**
-   * 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/common/Choice/index.js

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

package/src/ui/f/fields/ChoicesInput/common/index.js

@@ -1 +0,0 @@
-export { Choice } from './Choice'

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

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

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

@@ -1,79 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* stylelint-disable selector-max-compound-selectors -- exception */
-/* stylelint-disable max-nesting-depth -- exception */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-$default-flex-separator:calc(1em / 2) calc(.75em / 2);
-$default-transition:var(--theme-default-transition);
-$default-label-padding: .3em 1em calc(2em - .3em);
-$default-label-height: .5em;
-$default-input-border-radius: var(--theme-default-input-border-radius);
-$default-border: var(--theme-default-input-border);
-$hover-border: var(--theme-hover-input-border);
-$focus-border: var(--theme-focus-input-border);
-$default-background: var(--background-inputs);
-$disabled-background: var(--background-inputs-30);
-
-.#{bem.$base}.choices-input {
-  display: flex;
-  flex-direction: column;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
-
-  > .choices {
-    display: flex;
-    flex-wrap: wrap;
-    gap: $default-flex-separator;
-
-    &.space-between {
-      justify-content: space-between;
-    }
-
-    >.choice {
-      display: flex;
-
-      input {
-        opacity: 0;
-        position: fixed;
-        visibility: none;
-        z-index: -1;
-      }
-
-      input:disabled + label {
-        background-color: $disabled-background;
-      }
-
-      > label {
-        background-color: $default-background;
-        border: $default-border;
-        border-radius: $default-input-border-radius;
-        color: var(--paragraph);
-        cursor: pointer;
-        display: block;
-        height: $default-label-height;
-        max-width: 100%;
-        padding: $default-label-padding;
-        position: relative;
-        transition: $default-transition;
-        white-space: nowrap;
-
-        &:not(.disabled) {
-          &:hover {
-            border: $hover-border;
-          }
-        }
-      }
-
-      input:checked + label {
-        background: var(--x);
-        color: var(--on-x);
-      }
-    }
-  }
-}
-