@pareto-engineering/design-system 4.0.0-alpha.73 → 4.0.0-alpha.75

package/src/ui/a/DatePicker/DatePicker.jsx

@@ -0,0 +1,201 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { DayPicker } from 'react-day-picker'
+
+import { format } from 'date-fns'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'date-picker'
+
+/**
+ * This is the component description.
+ */
+const DatePickerWrapper = ({
+  id,
+  className:userClassName,
+  style,
+  mode,
+  selected,
+  setSelection,
+  fromMonth,
+  toDate,
+  customFooter,
+  timeFrom,
+  setTimeFrom,
+  timeTo,
+  setTimeTo,
+  dateFormat,
+  showDebugger,
+  ...otherProps
+}) => {
+  const convertFooterText = (selection) => {
+    if (mode === 'single') {
+      return format(selection, dateFormat)
+    }
+    if (mode === 'multiple') {
+      return selection.map((date) => format(date, dateFormat)).join(', ')
+    }
+    if (mode === 'range') {
+      return selection.from && selection.to
+        ? `${format(selection.from, dateFormat)} - ${format(selection.to, dateFormat)}`
+        : 'Please pick an additional day.'
+    }
+    return null
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <DayPicker
+        mode={mode}
+        selected={selected}
+        onSelect={setSelection}
+        fromMonth={fromMonth}
+        toDate={toDate}
+        showOutsideDays
+        footer={customFooter || (
+          <div className="default-footer">
+            {
+              timeFrom && (
+                <>
+                  <p className="time-label s-1">
+                    <span className="icon">C</span>
+                    &nbsp;
+                    Time
+                  </p>
+                  <div className={`time-inputs${timeTo ? ' multiple' : ''}`}>
+                    <input className="s-1" type="time" value={timeFrom} onChange={(e) => setTimeFrom(e.target.value)} />
+                    {
+                      timeTo && (
+                        <>
+                          <span className="icon s-2">r</span>
+                          <input className="s-1" type="time" value={timeTo} onChange={(e) => setTimeTo(e.target.value)} />
+                        </>
+                      )
+                    }
+                  </div>
+                </>
+              )
+            }
+            <p className="s-1 footer-text">{selected && convertFooterText(selected)}</p>
+          </div>
+        )}
+        {...otherProps}
+      />
+      {
+        showDebugger && (
+          <div className="debugger">
+            <pre>
+              {JSON.stringify(selected, null, 2)}
+            </pre>
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+DatePickerWrapper.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 mode for this date picker.
+   */
+  mode:PropTypes.oneOf(['single', 'multiple', 'range']),
+
+  /**
+   * The current selection.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  selected:PropTypes.objectOf(PropTypes.any).isRequired,
+
+  /**
+   * The function to update the selection.
+   */
+  setSelection:PropTypes.func.isRequired,
+
+  /**
+   * The earliest month to display.
+   */
+  fromMonth:PropTypes.instanceOf(Date),
+
+  /**
+   * The latest month to display.
+   */
+  toDate:PropTypes.instanceOf(Date),
+
+  /**
+   * Custom footer component.
+   */
+  customFooter:PropTypes.node,
+
+  /**
+   * The start time.
+   */
+  timeFrom:PropTypes.string,
+
+  /**
+   * The function to update the start time.
+   */
+  setTimeFrom:PropTypes.func,
+
+  /**
+   * The end time.
+   */
+  timeTo:PropTypes.string,
+
+  /**
+   * The function to update the end time.
+   */
+  setTimeTo:PropTypes.func,
+
+  /**
+   * The date format.
+   */
+  dateFormat:PropTypes.string,
+
+  /**
+   * Show the debugger.
+   */
+  showDebugger:PropTypes.bool,
+}
+
+DatePickerWrapper.defaultProps = {
+  mode        :'single',
+  dateFormat  :'PPP',
+  showDebugger:false,
+}
+
+export default DatePickerWrapper

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

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

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

@@ -0,0 +1,380 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable max-nesting-depth -- needed here */
+/* stylelint-disable selector-class-pattern -- needed here */
+/* stylelint-disable selector-max-compound-selectors -- needed here */
+/* stylelint-disable declaration-no-important -- needed here */
+/* stylelint-disable font-weight-notation -- needed here */
+/* stylelint-disable declaration-block-no-duplicate-properties -- needed here */
+
+@use "@pareto-engineering/bem";
+
+$default-background: var(--background-far);
+$default-border: var(--theme-default-input-border);
+$default-input-border-radius: var(--theme-default-input-border-radius);
+$default-padding: .55em .75em;
+$default-spacing-size: calc(var(--gap) / 2);
+$rdp-cell-size: 40px;
+$rdp-caption-font-size: 1em;
+$rdp-accent-color: var(--hard-interactive);
+$rdp-outline: 2px solid var(--hard-interactive);
+$rdp-selected-color: var(--on-interactive);
+
+.#{bem.$base}.date-picker {
+  /* Hide elements for devices that are not screen readers */
+  .rdp-vhidden {
+    appearance: none;
+    appearance: none;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border: 0 !important;
+    box-sizing: border-box;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    height: 1px !important;
+    margin: 0;
+    overflow: hidden !important;
+    padding: 0;
+    padding: 0 !important;
+    position: absolute !important;
+    top: 0;
+    width: 1px !important;
+  }
+
+  /* Buttons */
+  .rdp-button_reset {
+    appearance: none;
+    appearance: none;
+    appearance: none;
+    background: none;
+    color: inherit;
+    cursor: default;
+    font: inherit;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+
+  .rdp-button_reset:focus-visible {
+    /* Make sure to reset outline only when :focus-visible is supported */
+    outline: none;
+  }
+
+  .rdp-button {
+    border: 2px solid transparent;
+  }
+
+  .rdp-button[disabled]:not(.rdp-day_selected) {
+    opacity: .25;
+  }
+
+  .rdp-button:not([disabled]) {
+    cursor: pointer;
+  }
+
+  .rdp-button:focus-visible:not([disabled]) {
+    background-color: $default-background;
+    border: $rdp-outline;
+    color: inherit;
+  }
+
+  .rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+    background-color: $default-background;
+  }
+
+  .rdp-months {
+    display: flex;
+  }
+
+  .rdp-month {
+    margin: 0 1em;
+  }
+
+  .rdp-month:first-child {
+    margin-left: 0;
+  }
+
+  .rdp-month:last-child {
+    margin-right: 0;
+  }
+
+  .rdp-table {
+    background-color: $default-background;
+    border-collapse: collapse;
+    margin: 0;
+    max-width: calc($rdp-cell-size * 7);
+  }
+
+  .rdp-with_weeknumber .rdp-table {
+    border-collapse: collapse;
+    max-width: calc($rdp-cell-size * 8);
+  }
+
+  .rdp-caption {
+    align-items: center;
+    background-color: $default-background;
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+    text-align: left;
+  }
+
+  .rdp-multiple_months .rdp-caption {
+    display: block;
+    position: relative;
+    text-align: center;
+  }
+
+  .rdp-caption_dropdowns {
+    display: inline-flex;
+    position: relative;
+  }
+
+  .rdp-caption_label {
+    align-items: center;
+    border: 0;
+    border: 2px solid transparent;
+    color: var(--heading);
+    display: inline-flex;
+    font-family: inherit;
+    font-size: $rdp-caption-font-size;
+    font-weight: bold;
+    margin: 0;
+    padding: 0 .25em;
+    position: relative;
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .rdp-nav {
+    white-space: nowrap;
+  }
+
+  .rdp-multiple_months .rdp-caption_start .rdp-nav {
+    left: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .rdp-multiple_months .rdp-caption_end .rdp-nav {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .rdp-nav_button {
+    align-items: center;
+    border-radius: 100%;
+    display: inline-flex;
+    height: $rdp-cell-size;
+    justify-content: center;
+    padding: .25em;
+    width: $rdp-cell-size;
+  }
+
+  /* ---------- */
+
+  /* Dropdowns  */
+
+  /* ---------- */
+
+  .rdp-dropdown_year,
+  .rdp-dropdown_month {
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .rdp-dropdown {
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    bottom: 0;
+    cursor: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    left: 0;
+    line-height: inherit;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+  }
+
+  .rdp-dropdown[disabled] {
+    color: unset;
+    opacity: unset;
+  }
+
+  .rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
+    background-color: $default-background;
+    border: $rdp-outline;
+    border-radius: 6px;
+  }
+
+  .rdp-dropdown_icon {
+    margin: 0 0 0 5px;
+  }
+
+  .rdp-head {
+    border: 0;
+  }
+
+  .rdp-head_row,
+  .rdp-row {
+    height: 100%;
+  }
+
+  .rdp-head_cell {
+    font-size: .75em;
+    font-weight: 700;
+    height: 100%;
+    height: $rdp-cell-size;
+    padding: 0;
+    text-align: center;
+    text-transform: uppercase;
+    vertical-align: middle;
+  }
+
+  .rdp-tbody {
+    border: 0;
+  }
+
+  .rdp-tfoot {
+    margin: .5em;
+
+    .default-footer {
+      display: flex;
+      flex-direction: column;
+
+      >.footer-text {
+        align-self: center;
+      }
+
+      >.time-label {
+        align-items: center;
+        align-self: first baseline;
+        color: var(--heading);
+        display: flex;
+        margin: 0;
+        padding: $default-spacing-size;
+      }
+
+      >.time-inputs {
+        :not(.multiple) {
+          margin-left: $default-spacing-size;
+        }
+
+        &.multiple {
+          align-items: center;
+          align-self: center;
+          display: flex;
+          gap: $default-spacing-size;
+        }
+
+        >input[type="time"] {
+          background-color: $default-background;
+          border: $default-border;
+          border-radius: $default-input-border-radius;
+          color: var(--paragraph);
+          outline: none;
+          padding: $default-padding;
+
+          &::-webkit-calendar-picker-indicator {
+            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
+            background-position: calc(100% - $default-spacing-size / 2);
+            background-repeat: no-repeat;
+            background-size: $default-spacing-size;
+          }
+        }
+      }
+    }
+  }
+
+  .rdp-cell {
+    height: 100%;
+    height: $rdp-cell-size;
+    padding: 0;
+    text-align: center;
+    width: $rdp-cell-size;
+  }
+
+  .rdp-weeknumber {
+    font-size: .75em;
+  }
+
+  .rdp-weeknumber,
+  .rdp-day {
+    align-items: center;
+    border: 2px solid transparent;
+    border-radius: 100%;
+    box-sizing: border-box;
+    display: flex;
+    height: $rdp-cell-size;
+    justify-content: center;
+    margin: 0;
+    max-width: $rdp-cell-size;
+    overflow: hidden;
+    width: $rdp-cell-size;
+  }
+
+  .rdp-day_today:not(.rdp-day_outside) {
+    font-weight: bold;
+  }
+
+  .rdp-day_selected,
+  .rdp-day_selected:focus-visible,
+  .rdp-day_selected:hover {
+    background-color: $rdp-accent-color;
+    color: $rdp-selected-color;
+    opacity: 1;
+  }
+
+  .rdp-day_outside {
+    opacity: .5;
+  }
+
+  .rdp-day_selected:focus-visible {
+    /* Since the background is the same use again the outline */
+    outline: $rdp-outline;
+    outline-offset: 2px;
+    z-index: 1;
+  }
+
+  .rdp:not([dir="rtl"]) .rdp-day_range_start:not(.rdp-day_range_end) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .rdp:not([dir="rtl"]) .rdp-day_range_end:not(.rdp-day_range_start) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  .rdp[dir="rtl"] .rdp-day_range_start:not(.rdp-day_range_end) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  .rdp[dir="rtl"] .rdp-day_range_end:not(.rdp-day_range_start) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .rdp-day_range_end.rdp-day_range_start {
+    border-radius: 100%;
+  }
+
+  .rdp-day_range_middle {
+    background-color: var(--interactive);
+    border-radius: 0;
+  }
+
+  .rdp-nav_icon {
+    color: var(--ui-icons);
+  }
+}

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

@@ -56,6 +56,7 @@ const XMLEditor = ({
   gutterWidth,
   config,
   onChange,
+  onBlur,
   stopPropagationKeys,
 }) => {
   const editorRef = useRef()
@@ -83,6 +84,11 @@ const XMLEditor = ({
           onChange(view)
           // view.state.doc.toString() to receive the current content in the editor.
         }),
+        EditorView.focusChangeEffect.of((state, focused) => {
+          if (!focused) {
+            onBlur?.(state)
+          }
+        }),
         EditorView.domEventHandlers({
           keydown(e) {
             if (stopPropagationKeys?.includes(e.key)) {

package/src/ui/a/index.js

@@ -27,3 +27,4 @@ export { Removable } from './Removable'
 export { ToggleSwitch } from './ToggleSwitch'
 export { XMLEditor } from './XMLEditor'
 export { LexicalPreview } from './LexicalPreview'
+export { DatePicker } from './DatePicker'

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

@@ -3,18 +3,14 @@ import * as React from 'react'
 
 import { 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 { FormLabel, FormDescription } from '../../common'
-
 import './styles.scss'
 
+import { Single, Multiple } from './common'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -39,9 +35,28 @@ const SelectInput = ({
   disabled,
   isLoading,
   autoComplete,
+  placeholder,
+  getTagColor,
+  multiple,
   // ...otherProps
 }) => {
-  const [field] = useField({ name, validate })
+  const inputProps = {
+    name,
+    label,
+    labelColor,
+    color,
+    options,
+    validate,
+    optional,
+    description,
+    disabled,
+    isLoading,
+    placeholder,
+    getTagColor,
+    autoComplete,
+  }
+
+  const Input = multiple ? Multiple : Single
 
   return (
     <div
@@ -55,45 +70,7 @@ const SelectInput = ({
         .join(' ')}
       style={style}
     >
-      <FormLabel
-        name={name}
-        color={labelColor}
-        optional={optional}
-      // {...otherProps}
-      >
-        {label}
-      </FormLabel>
-      <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>
-      <FormDescription className="s-1" description={description} name={name} />
+      <Input {...inputProps} />
     </div>
   )
 }
@@ -175,11 +152,21 @@ SelectInput.propTypes = {
   * Whether the input is optional or not
   */
   optional:PropTypes.bool,
+
+  /**
+   * Whether the select input should allow multiple selections
+   */
+  multiple:PropTypes.bool,
+
+  /**
+   * The placeholder of the select input
+   */
+  placeholder:PropTypes.string,
 }
 
 SelectInput.defaultProps = {
   disabled:false,
-  color   :'paragraph',
+  multiple:false,
 }
 
 export default memo(SelectInput)