@pareto-engineering/design-system 5.2.0 → 5.3.0

package/src/ui/a/ThroughPutIndicator/ThroughPutIndicator.jsx

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+// Local Definitions
+const baseClassName = styleNames.base
+const componentClassName = 'throughput-indicator'
+
+const ThroughPutIndicator = ({ data, keyName = 'reserved' }) => {
+  const renderNoChange = () => (
+    <div
+      className={[
+        baseClassName,
+        componentClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <span className="no-change-text">No change</span>
+    </div>
+  )
+
+  const renderChange = (direction, percentage, icon = direction === 'positive' ? 'S' : 'R') => (
+    <div
+      className={[
+        baseClassName,
+        componentClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <span className={`ai-icon ${direction}-throughput-indicator`}>{icon}</span>
+      <p>
+        {percentage}
+        %
+      </p>
+    </div>
+  )
+
+  // Handle invalid or insufficient data
+  if (!data || data.length < 2) {
+    return renderNoChange()
+  }
+
+  const first = data[0][keyName]
+  const last = data[data.length - 1][keyName]
+
+  // Handle no change scenarios
+  if (first === 0 && last === 0) {
+    return renderNoChange()
+  }
+
+  // Handle special case: starting from zero
+  if (first === 0 && last !== 0) {
+    return renderChange('positive', '100')
+  }
+
+  // Calculate percentage change
+  const percentChange = ((last - first) / Math.abs(first)) * 100
+  const rounded = Math.abs(percentChange).toFixed(1)
+
+  // No change
+  if (percentChange === 0) {
+    return renderNoChange()
+  }
+
+  // Positive or negative change
+  const direction = percentChange > 0 ? 'positive' : 'negative'
+  const icon = direction === 'positive' ? 'S' : 'R'
+
+  return renderChange(direction, rounded, icon)
+}
+
+ThroughPutIndicator.propTypes = {
+  /**
+   * The data to be displayed in the throughput indicator
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  data:PropTypes.arrayOf(PropTypes.object).isRequired,
+
+  /**
+   * The key name to be displayed in the throughput indicator
+   */
+  keyName:PropTypes.string,
+}
+
+export default ThroughPutIndicator

package/src/ui/a/ThroughPutIndicator/index.js

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

package/src/ui/a/ThroughPutIndicator/styles.scss

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-text-font-size: calc(var(--s-1) * 1rem);
+
+.#{bem.$base} {
+  .throughput-indicator {
+    align-items: center;
+    border: 1px solid var(--hard-grey);
+    border-radius: 2rem;
+    display: flex;
+    gap: .5rem;
+    height: 3rem;
+    padding: .5rem;
+
+    .positive-throughput-indicator {
+      color: var(--success);
+      font-size: 1rem;
+    }
+
+    .negative-throughput-indicator {
+      color: var(--error);
+      font-size: .75rem;
+    }
+
+    .no-change-text {
+      color: var(--paragraph);
+    }
+
+    p {
+      font-size: 1rem;
+    }
+  }
+}

package/src/ui/a/ToggleSwitch/ToggleSwitch.jsx

@@ -51,7 +51,7 @@ const ToggleSwitch = ({
       onChange={handleOnChange}
     />
     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-    <label htmlFor={inputId} />
+    <label htmlFor={inputId} className={checked ? 'checked' : ''} />
   </button>
 )
 

package/src/ui/a/ToggleSwitch/styles.scss

@@ -7,7 +7,7 @@ $default-size: var(--size, 1.2em);
 $default-slider-color: var(--slider-color, var(--background-far));
 $default-slider-border-color: var(--slider-border-color, var(--ui-lines));
 $default-background-color: var(--slider-background-color, var(--interactive));
-
+$default-background-disabled: var(--disabled, var(--background-far));
 .#{bem.$base}.toggle-switch {
   background: transparent;
   border: none;
@@ -21,7 +21,6 @@ $default-background-color: var(--slider-background-color, var(--interactive));
   }
 
   >label {
-    background: $default-background-color;
     border-radius: $default-border-radius;
     cursor: pointer;
     display: block;
@@ -29,6 +28,14 @@ $default-background-color: var(--slider-background-color, var(--interactive));
     position: relative;
     width: calc($default-size * 2);
 
+    &.checked {
+      background: $default-background-color;
+    }
+
+    &:not(.checked) {
+      background: $default-background-disabled;
+    }
+
     &::after {
       background: $default-slider-color;
       border: 1px solid $default-slider-border-color;

package/src/ui/a/Tooltip/Tooltip.jsx

@@ -1,5 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
+import { useEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -21,40 +22,63 @@ const Tooltip = ({
   className:userClassName,
   style,
   position,
+  isFloating,
   color,
   description,
   content,
   children,
   // ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-      `x-${color}`,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-
-  >
-    <div
-      className="tooltip-trigger-wrapper"
-      aria-describedby={description}
-    >
-      {children}
-    </div>
+}) => {
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      document.documentElement.style.setProperty('--mouse-x', `${e.clientX}px`)
+      document.documentElement.style.setProperty('--mouse-y', `${e.clientY}px`)
+    }
+
+    if (!isFloating) {
+      return () => window.removeEventListener('mousemove', handleMouseMove)
+    }
+
+    window.addEventListener('mousemove', handleMouseMove)
+
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [isFloating])
+
+  return (
     <div
-      className={`tooltip-content ${position}`}
-      role="tooltip"
-      id={description}
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
     >
-      {content}
+      <div
+        className="tooltip-trigger-wrapper"
+        aria-describedby={description}
+      >
+        {children}
+      </div>
+      <div
+        className={[
+          'tooltip-content',
+          position,
+          isFloating ? 'floating' : '',
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        role="tooltip"
+        id={description}
+      >
+        {content}
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 Tooltip.propTypes = {
   /**
@@ -92,6 +116,11 @@ Tooltip.propTypes = {
    */
   position:PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 
+  /**
+   * Whether or not the tooltip should be floating
+   */
+  isFloating:PropTypes.bool,
+
   /**
    * The base color of the tooltip
    */

package/src/ui/a/Tooltip/styles.scss

@@ -24,25 +24,53 @@ $default-width: var(--tooltip-width, 20rem);
     visibility: hidden;
     z-index: 10;
 
-    &.top {
+    &.floating.top {
+      left: var(--mouse-x);
+      position: fixed;
+      top: calc(var(--mouse-y) - $default-block-padding);
+      transform: translate(-50%, -100%);
+    }
+
+    &.floating.right {
+      left: calc(var(--mouse-x) + $default-inline-padding);
+      position: fixed;
+      top: var(--mouse-y);
+      transform: translateY(-50%);
+    }
+
+    &.floating.bottom {
+      left: var(--mouse-x);
+      position: fixed;
+      top: calc(var(--mouse-y) + $default-block-padding);
+      transform: translateX(-50%);
+    }
+
+    &.floating.left {
+      left: calc(var(--mouse-x) - $default-inline-padding);
+      position: fixed;
+      top: var(--mouse-y);
+      transform: translate(-100%, -50%);
+    }
+
+    &:not(.floating).top {
       --horizontal: -50%;
       bottom: calc(100% + $default-block-padding);
       left: 50%;
     }
 
-    &.right {
+    &:not(.floating).right {
       --vertical: 50%;
       bottom: 50%;
       left: calc(100% + $default-inline-padding);
     }
 
-    &.bottom {
+    &:not(.floating).bottom {
       --horizontal: -50%;
       left: 50%;
       top: calc(100% + $default-block-padding);
     }
 
-    &.left {
+    &:not(.floating).left {
       --vertical: 50%;
       bottom: 50%;
       right: calc(100% + $default-inline-padding);

package/src/ui/a/XMLEditor/XMLEditor.jsx

@@ -5,7 +5,7 @@ import { useEffect, useRef } from 'react'
 
 import PropTypes from 'prop-types'
 
-import { EditorState } from '@codemirror/state'
+import { EditorState, Prec } from '@codemirror/state'
 
 import {
   EditorView,
@@ -25,6 +25,7 @@ import {
   indentWithTab,
   history,
   historyKeymap,
+  insertNewlineAndIndent,
 } from '@codemirror/commands'
 
 import {
@@ -67,7 +68,19 @@ const XMLEditor = ({
     const startState = EditorState.create({
       doc       :config,
       extensions:[
-        keymap.of([defaultKeymap, indentWithTab, ...historyKeymap]),
+        Prec.highest(
+          keymap.of([
+            {
+              key:'Enter',
+              run:(view) => insertNewlineAndIndent(view),
+            },
+          ]),
+        ),
+        keymap.of([
+          defaultKeymap,
+          indentWithTab,
+          ...historyKeymap,
+        ]),
         indentOnInput(),
         lineNumbers(),
         bracketMatching(),

package/src/ui/a/index.js

@@ -31,3 +31,4 @@ export { XMLEditor } from './XMLEditor'
 export { DatePicker } from './DatePicker'
 export { Tooltip } from './Tooltip'
 export { AreaChart, BarChart, PieChart } from './Charts'
+export { ThroughPutIndicator } from './ThroughPutIndicator'

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

@@ -19,6 +19,7 @@ import {
   EditorInput,
   FileUpload,
   LatexPreviewInput,
+  ToggleInput,
 } from '../fields'
 
 import './styles.scss'
@@ -100,6 +101,15 @@ const FormInput = ({
       />
     )
   }
+  if (type === 'toggle') {
+    return (
+      <ToggleInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
 
   if (type === 'query-choices') {
     return (
@@ -218,6 +228,7 @@ FormInput.propTypes = {
     'url',
     'rating',
     'checkbox',
+    'toggle',
     // to be removed
     'extendedTypeInput',
   ]),

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

@@ -0,0 +1,140 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import { useField } from 'formik'
+import styleNames from '@pareto-engineering/bem/exports'
+import { ToggleSwitch } from 'ui/a'
+import { FormLabel, FormDescription } from '../../common'
+
+import './styles.scss'
+
+// Local Definitions
+const baseClassName = styleNames.base
+const componentClassName = 'toggle-input'
+
+/**
+ * Toggle input field component that wraps ToggleSwitch for use with Formik
+ */
+const ToggleInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  color,
+  labelColor,
+  validate,
+  description,
+  disabled,
+  optional,
+  size,
+  // ...otherProps
+}) => {
+  const [field, , helpers] = useField({ name, validate, type: 'checkbox' })
+
+  const handleChange = () => {
+    helpers.setValue(!field.value)
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `y-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <FormLabel
+        name={name}
+        color={labelColor}
+        optional={optional}
+      >
+        {label}
+      </FormLabel>
+      <div className="toggle-wrapper">
+        <ToggleSwitch
+          checked={Boolean(field.value)}
+          handleOnChange={handleChange}
+          inputId={name}
+          size={size}
+          disabled={disabled}
+        />
+      </div>
+      <FormDescription className="s-1" description={description} name={name} />
+    </div>
+  )
+}
+
+ToggleInput.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 label
+   */
+  label:PropTypes.string.isRequired,
+
+  /**
+   * The input label color
+   */
+  labelColor:PropTypes.string,
+
+  /**
+   * The input field validator function
+   */
+  validate:PropTypes.func,
+
+  /**
+   * Input description
+   */
+  description:PropTypes.string,
+
+  /**
+   * Whether the toggle input should be disabled
+   */
+  disabled:PropTypes.bool,
+
+  /**
+   * The text input color
+   */
+  color:PropTypes.string,
+
+  /**
+   * Whether the input is optional or not
+   */
+  optional:PropTypes.bool,
+
+  /**
+   * The size of the toggle switch
+   */
+  size:PropTypes.string,
+}
+
+ToggleInput.defaultProps = {
+  color   :'paragraph',
+  disabled:false,
+}
+
+export default ToggleInput

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

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+export { default as ToggleInput } from './ToggleInput'

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

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.toggle-input {
+  display: flex;
+  flex-direction: column;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+  > .toggle-wrapper {
+    align-items: center;
+    display: flex;
+    margin-bottom: calc(var(--gap) / 2);
+  }
+}
+
+

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

@@ -19,3 +19,4 @@ export {
   getFileType,
   getFileTypeFromUrl,
 } from './FileUpload'
+export { ToggleInput } from './ToggleInput'

package/src/ui/utils/formatting.js

@@ -1,11 +1,12 @@
 export const DATE_FORMATS = {
-  HUMAN_READABLE:'human_readable',
-  TIME          :'time',
-  DATETIME      :'datetime',
-  CHART_DATE    :'chart_date',
-  CHART_TIME    :'chart_time',
-  WEEKDAY_DATE  :'weekday_date',
-  DAY_VIEW      :'day_view',
+  HUMAN_READABLE          :'human_readable',
+  HUMAN_READABLE_WITH_TIME:'human_readable_with_time',
+  TIME                    :'time',
+  DATETIME                :'datetime',
+  CHART_DATE              :'chart_date',
+  CHART_TIME              :'chart_time',
+  WEEKDAY_DATE            :'weekday_date',
+  DAY_VIEW                :'day_view',
 }
 
 const isValidDate = (date) => date instanceof Date && !Number.isNaN(date)
@@ -52,28 +53,6 @@ export const formatTime = (seconds) => {
   return parts.join(' ')
 }
 
-const parseDate = (input) => {
-  if (input instanceof Date) return input
-  if (typeof input === 'number') return new Date(input)
-
-  if (typeof input === 'string') {
-    if (isTimeSliceFormat(input)) {
-      return createTimeFromSlice(input)
-    }
-
-    const parsed = new Date(input)
-    if (isValidDate(parsed)) return parsed
-
-    const timestamp = parseInt(input, 10)
-    if (!Number.isNaN(timestamp)) {
-      const date = new Date(timestamp * 1000)
-      if (isValidDate(date)) return date
-    }
-  }
-
-  return null
-}
-
 const formatStrategies = {
   [DATE_FORMATS.CHART_DATE]:(date) => {
     const monthDay = date.toLocaleDateString('en-US', {
@@ -95,9 +74,39 @@ const formatStrategies = {
     timeZone:'UTC',
   }),
 
+  [DATE_FORMATS.HUMAN_READABLE_WITH_TIME]:(date) => date.toLocaleString('en-US', {
+    year    :'numeric',
+    month   :'short',
+    day     :'numeric',
+    hour    :'2-digit',
+    timeZone:'UTC',
+  }),
+
   default:(date) => date.toISOString(),
 }
 
+export const parseDate = (input) => {
+  if (input instanceof Date) return input
+  if (typeof input === 'number') return new Date(input)
+
+  if (typeof input === 'string') {
+    if (isTimeSliceFormat(input)) {
+      return createTimeFromSlice(input)
+    }
+
+    const parsed = new Date(input)
+    if (isValidDate(parsed)) return parsed
+
+    const timestamp = parseInt(input, 10)
+    if (!Number.isNaN(timestamp)) {
+      const date = new Date(timestamp * 1000)
+      if (isValidDate(date)) return date
+    }
+  }
+
+  return null
+}
+
 export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
   try {
     if (typeof input === 'string' && isTimeSliceFormat(input)) {

package/src/ui/utils/index.js

@@ -1,5 +1,5 @@
 export { useWindowSize, useDynamicPosition, useOutsideClick } from './hooks'
 export {
-  formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase,
+  formatTime, formatDate, DATE_FORMATS, parseDate, snakeCaseToTitleCase,
 } from './formatting'
 export { applyCharacterLimit } from './applyCharacterLimit'