@pareto-engineering/design-system 4.0.0-alpha.63 → 4.0.0-alpha.65

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

@@ -1,152 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useState, useInsertionEffect, memo } from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-// Local Definitions
-
-import { Rating } from './common'
-import { FormLabelV2 } from '../../../common'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'ratings-input'
-
-/**
- * This is the component description.
- */
-const RatingsInput = ({
-  id,
-  className:userClassName,
-  style,
-  name,
-  ratingCount,
-  showRatingValue,
-  color,
-  label,
-  labelColor,
-  labelMax,
-  labelMin,
-  displayRatingsLabel,
-  optional,
-  // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  const [hover, setHover] = useState(null)
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <FormLabelV2
-        name={name}
-        color={labelColor}
-        optional={optional}
-        // {...otherProps}
-      >
-        {label}
-      </FormLabelV2>
-      <div className="stars">
-        {displayRatingsLabel && <p className="label-text s-2 x-metadata c-x">{labelMin}</p>}
-        {[...Array(ratingCount)].map((_, index) => {
-          const ratingValue = index + 1
-          return (
-            <Rating
-              key={ratingValue}
-              ratingId={`${name}-${ratingValue}`}
-              value={ratingValue}
-              name={name}
-              hover={hover}
-              setHover={setHover}
-              showRatingValue={showRatingValue}
-              activeBackgroundColor={color}
-            />
-          )
-        })}
-        {displayRatingsLabel && <p className="label-text s-2 x-metadata c-x">{labelMax}</p>}
-      </div>
-    </div>
-  )
-}
-
-RatingsInput.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 number of ratings input stars to be displayed
-   */
-  ratingCount        :PropTypes.number.isRequired,
-  /**
-   * Name of the rating input
-   */
-  name               :PropTypes.string.isRequired,
-  /**
-   * Determines if the rating start value should be shown
-   */
-  showRatingValue    :PropTypes.bool,
-  /**
-   * The label of the ratings input
-   */
-  label              :PropTypes.string.isRequired,
-  /**
-   * description for the highest rating value
-   */
-  labelMax           :PropTypes.string,
-  /**
-   * description for the lowest rating value
-   */
-  labelMin           :PropTypes.string,
-  /**
-   * If the rating lables should be shown
-   */
-  displayRatingsLabel:PropTypes.bool,
-  /**
-   * Whether the input is optional or not
-   */
-  optional           :PropTypes.bool,
-
-  /**
- * The color of the stars
- */
-  color:PropTypes.string,
-
-  /**
- * String that will represent color for the label
- */
-  labelColor:PropTypes.string,
-}
-
-RatingsInput.defaultProps = {
-  labelMin:'not satisfied.',
-  labelMax:'very satisfied.',
-}
-
-export default memo(RatingsInput)

package/src/ui/f/fields/V2/RatingsInput/common/Rating/Rating.jsx

@@ -1,142 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import { useField } from 'formik'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'rating'
-
-/**
- * This is the component description.
- */
-const Rating = ({
-  id,
-  className:userClassName,
-  style,
-  value,
-  name,
-  ratingId,
-  hover,
-  setHover,
-  validate,
-  activeBackgroundColor,
-  inactiveBackgroundColor,
-  showRatingValue,
-  // ...otherProps
-}) => {
-  const [field] = useField({ name, validate })
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${activeBackgroundColor}`,
-        `y-${inactiveBackgroundColor}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <label
-        htmlFor={ratingId}
-        onMouseEnter={() => setHover(value)}
-        onMouseLeave={() => setHover(null)}
-      >
-        {showRatingValue && (
-        <span className="s-2 x-metadata c-x">
-          {value}
-        </span>
-        )}
-        <span
-          className={[
-            'icon',
-            value <= (hover || Number(field.value)) ? 'c-x' : 'c-hard-y',
-          ]
-            .filter((e) => e)
-            .join(' ')}
-        >
-          [
-        </span>
-      </label>
-
-      <input
-        {...field}
-        type="radio"
-        id={ratingId}
-        name={name}
-        value={value}
-      />
-    </div>
-  )
-}
-Rating.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 value of each an every rating star
-   */
-  value                  :PropTypes.number,
-  /**
-   * The current hover value
-   */
-  hover                  :PropTypes.number,
-  /**
-   * Function to update the hover value
-   */
-  setHover               :PropTypes.func,
-  /**
-   * Unique Id for each rating star
-   */
-  ratingId               :PropTypes.string,
-  /**
-   * Name of the rating input
-   */
-  name                   :PropTypes.string,
-  /**
-   * The start rating backgriund color when hovered or clicked
-   */
-  activeBackgroundColor  :PropTypes.string,
-  /**
-   * The start rating backgriund color when not hovered and not clicked
-   */
-  inactiveBackgroundColor:PropTypes.string,
-  /**
-   * Determines if the rating start value should be shown
-   */
-  showRatingValue        :PropTypes.bool,
-
-  /**
-   * The rating field validator function
-   */
-  validate:PropTypes.func,
-}
-
-Rating.defaultProps = {
-  activeBackgroundColor  :'interactive',
-  inactiveBackgroundColor:'background-inputs',
-  showRatingValue        :false,
-}
-
-export default Rating

package/src/ui/f/fields/V2/RatingsInput/common/Rating/index.js

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

package/src/ui/f/fields/V2/RatingsInput/common/index.js

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

package/src/ui/f/fields/V2/RatingsInput/index.js

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

package/src/ui/f/fields/V2/RatingsInput/styles.scss

@@ -1,48 +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 *;
-
-$default-rating-icon-margin: .5em;
-$default-padding: .2em;
-$default-transition: all .2s;
-
-.#{bem.$base}.ratings-input {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap);
-
-  >.stars {
-    display: flex;
-
-    >:not(:last-child) {
-      margin-right: $default-rating-icon-margin;
-    }
-
-    > .#{bem.$base}.rating {
-      display: flex;
-
-      > input {
-        opacity: 0;
-        position: absolute;
-        visibility: none;
-        z-index: -1;
-      }
-
-      > label {
-        align-items: center;
-        cursor: pointer;
-        display: flex;
-        flex-direction: column;
-        padding: $default-padding;
-        transition: $default-transition;
-      }
-    }
-
-    .label-text {
-      align-self: flex-end;
-      margin-bottom: 0;
-    }
-  }
-}

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

@@ -1,187 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useInsertionEffect, memo } from 'react'
-
-import { useField } from 'formik'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { LoadingCircle } from 'ui/a'
-
-import { FormLabelV2, FormDescriptionV2 } from '../../../common'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'select-input'
-
-/**
- * This is the component description.
- */
-const SelectInput = ({
-  id,
-  className:userClassName,
-  style,
-  name,
-  label,
-  labelColor,
-  color,
-  options,
-  validate,
-  optional,
-  description,
-  disabled,
-  isLoading,
-  autoComplete,
-  // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  const [field] = useField({ name, validate })
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <FormLabelV2
-        name={name}
-        color={labelColor}
-        optional={optional}
-      // {...otherProps}
-      >
-        {label}
-      </FormLabelV2>
-      <div className={`select-wrapper${disabled ? ' disabled' : ''}`}>
-        <select
-          className={`input y-${color}`}
-          {...field}
-          value={field.value || ''}
-          id={name}
-          disabled={disabled}
-          autoComplete={autoComplete}
-        >
-          {
-          options.map((option) => {
-            // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
-            const newOption = typeof option === 'string' ? { value: option, label: option } : option
-
-            return (
-              <option
-                key={newOption.value}
-                value={newOption.value}
-                disabled={newOption?.disabled || false}
-              >
-                {newOption.label}
-              </option>
-            )
-          })
-        }
-        </select>
-        {isLoading && (
-          <LoadingCircle className="x-main" />
-        )}
-      </div>
-      <FormDescriptionV2 className="s-1" description={description} name={name} />
-    </div>
-  )
-}
-
-SelectInput.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 name of the select input
-   */
-  name :PropTypes.string,
-
-  /**
-   * The label of the select input
-   */
-  label:PropTypes.string,
-
-  /**
-   * The input field validator function
-   */
-  validate:PropTypes.func,
-
-  /**
-   * The select input description
-   */
-  description:PropTypes.string,
-
-  /**
-   * The options of the select input
-   */
-  options:PropTypes.arrayOf(
-    PropTypes.oneOfType(
-      [
-        PropTypes.string,
-        PropTypes.shape({
-          value   :PropTypes.string,
-          label   :PropTypes.string,
-          disabled:PropTypes.bool,
-        })],
-    ),
-  ),
-  /**
-   * Whether the select input should be disabled
-   */
-  disabled:PropTypes.bool,
-
-  /**
-   * The color of the select input
-   */
-  color:PropTypes.string,
-
-  /**
-   * The color of the select input label
-   */
-  labelColor:PropTypes.string,
-
-  /*
-  * Whether the query that is fetching the select options is still in flight
-  */
-  isLoading   :PropTypes.bool,
-  /**
-   * The autoComplete value that the browser should watch for the input
-   */
-  autoComplete:PropTypes.string,
-
-  /**
-  * Whether the input is optional or not
-  */
-  optional:PropTypes.bool,
-}
-
-SelectInput.defaultProps = {
-  disabled:false,
-  color   :'paragraph',
-}
-
-export default memo(SelectInput)

package/src/ui/f/fields/V2/SelectInput/index.js

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

package/src/ui/f/fields/V2/SelectInput/styles.scss

@@ -1,87 +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 *;
-
-$default-spacing-size: 1em;
-$default-padding: .55em .75em;
-$default-bg-gradient: var(--background-far);
-$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}.select-input {
-  display: flex;
-  flex-direction: column;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
-
-  .select-wrapper {
-    background-color: $default-background;
-    border: $default-border;
-    border-radius: $default-input-border-radius;
-    display: flex;
-    flex-direction: column;
-    padding: $default-padding;
-    padding-right: 0;
-    position: relative;
-
-    &:not(.disabled) {
-      &:hover,
-      &:active {
-        border: $hover-border;
-      }
-
-      &:focus {
-        border: $focus-border;
-      }
-    }
-
-    &.disabled {
-      background: $disabled-background;
-    }
-
-    &::placeholder {
-      color: var(--metadata);
-    }
-
-    &::after {
-      border-radius: $default-input-border-radius;
-    }
-
-    >.#{bem.$base}.loading-circle {
-      position: absolute;
-      right: $default-spacing-size;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    select {
-      appearance: none;
-      background-color: $default-background;
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
-      background-position: calc(100% - $default-spacing-size);
-      background-repeat: no-repeat;
-      background-size: $default-spacing-size;
-      padding-right: $default-spacing-size;
-
-      &.input {
-        border: none;
-        color: var(--y);
-        outline: none;
-        width: 100%;
-
-        &:disabled {
-          opacity: 0%;
-        }
-      }
-    }
-  }
-}