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

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

@@ -0,0 +1,152 @@
+/* @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

@@ -0,0 +1,142 @@
+/* @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

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+/* @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

@@ -0,0 +1,187 @@
+/* @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

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

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

@@ -0,0 +1,87 @@
+/* @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%;
+        }
+      }
+    }
+  }
+}