@pareto-engineering/design-system 4.0.0-alpha.74 → 4.0.0-alpha.76

package/dist/es/a/DatePicker/DatePicker.js

@@ -0,0 +1,154 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* @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 /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(DayPicker, _extends({
+    mode: mode,
+    selected: selected,
+    onSelect: setSelection,
+    fromMonth: fromMonth,
+    toDate: toDate,
+    showOutsideDays: true,
+    footer: customFooter || /*#__PURE__*/React.createElement("div", {
+      className: "default-footer"
+    }, setTimeFrom && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+      className: "time-label s-1"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "icon"
+    }, "C"), "\xA0 Time"), /*#__PURE__*/React.createElement("div", {
+      className: `time-inputs${timeTo ? ' multiple' : ''}`
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "s-1",
+      type: "time",
+      value: timeFrom,
+      onChange: e => setTimeFrom(e.target.value)
+    }), setTimeTo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "icon s-2"
+    }, "r"), /*#__PURE__*/React.createElement("input", {
+      className: "s-1",
+      type: "time",
+      value: timeTo,
+      onChange: e => setTimeTo(e.target.value)
+    })))), /*#__PURE__*/React.createElement("p", {
+      className: "s-1 footer-text"
+    }, selected && convertFooterText(selected)))
+  }, otherProps)), showDebugger && /*#__PURE__*/React.createElement("div", {
+    className: "debugger"
+  }, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(selected, null, 2))));
+};
+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/dist/es/a/DatePicker/index.js

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

package/dist/es/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/dist/es/a/XMLEditor/XMLEditor.js

@@ -27,6 +27,7 @@ const XMLEditor = ({
   gutterWidth,
   config,
   onChange,
+  onBlur,
   stopPropagationKeys
 }) => {
   const editorRef = useRef();
@@ -36,6 +37,10 @@ const XMLEditor = ({
       extensions: [keymap.of(defaultKeymap), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
         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/dist/es/a/index.js

@@ -24,4 +24,5 @@ export { TextSteps } from "./TextSteps";
 export { Removable } from "./Removable";
 export { ToggleSwitch } from "./ToggleSwitch";
 export { XMLEditor } from "./XMLEditor";
-export { LexicalPreview } from "./LexicalPreview";
+export { LexicalPreview } from "./LexicalPreview";
+export { DatePicker } from "./DatePicker";

package/dist/es/f/fields/SelectInput/common/Multiple/Multiple.js

@@ -138,9 +138,7 @@ const Multiple = ({
     }
   });
   useEffect(() => {
-    if (selectedItems?.length > 0) {
-      setValue(selectedItems);
-    }
+    setValue(selectedItems);
   }, [selectedItems]);
   useEffect(() => {
     if (value?.length > 0 && (testIfArraysAreUnique(value, selectedItems) || testIfArraysAreUnique(selectedItems, value))) {

package/dist/es/f/fields/SelectInput/common/Single/Single.js

@@ -5,7 +5,7 @@ import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { LoadingCircle } from "../../../../../a";
-import { FormLabel, FormDescription } from "../../../../../../../dist/cjs";
+import { FormLabel, FormDescription } from "../../../..";
 
 // Local Definitions
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.74",
+  "version": "4.0.0-alpha.76",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -66,6 +66,7 @@
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-relay": "^15.0.0",
@@ -73,5 +74,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "81827866347e056b8fb3ba1cb7c6e6f22c5eddbb"
+  "gitHead": "b2057b76a09837c3812774840044a057ca1c25f3"
 }

package/src/stories/a/DatePicker.stories.jsx

@@ -0,0 +1,96 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import { DatePicker } from 'ui'
+
+export default {
+  title     :'a/DatePicker',
+  component :DatePicker,
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    mode:{
+      control:{
+        type   :'select',
+        options:['single', 'multiple', 'range'],
+      },
+    },
+    dateFormat:{
+      control:{
+        type:'text',
+      },
+    },
+    showDebugger:{
+      control:{
+        type:'boolean',
+      },
+    },
+  },
+}
+
+const today = new Date('2024-03-01T12:00:00Z')
+
+const Template = (args) => {
+  const [value, setValue] = useState()
+
+  return (
+    <DatePicker
+      selected={value}
+      setSelection={setValue}
+      {...args}
+      today={today}
+    />
+  )
+}
+
+const TimeTemplate = ({ timeMode, ...args }) => {
+  const [value, setValue] = useState()
+  const [timeFrom, setTimeFrom] = useState('00:00')
+  const [timeTo, setTimeTo] = useState('23:59')
+
+  return (
+    <DatePicker
+      selected={value}
+      setSelection={setValue}
+      timeFrom={timeFrom}
+      setTimeFrom={setTimeFrom}
+      timeTo={timeMode === 'multiple' ? timeTo : undefined}
+      setTimeTo={timeMode === 'multiple' ? setTimeTo : undefined}
+      today={today}
+      {...args}
+    />
+  )
+}
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const MultipleSelection = Template.bind({})
+MultipleSelection.args = {
+  mode:'multiple',
+}
+
+export const RangeSelection = Template.bind({})
+RangeSelection.args = {
+  mode:'range',
+}
+
+export const TimeSelection = TimeTemplate.bind({})
+TimeSelection.args = {
+  mode    :'single',
+  timeMode:'single',
+}
+
+export const TimeRangeSelection = TimeTemplate.bind({})
+TimeRangeSelection.args = {
+  mode    :'range',
+  timeMode:'multiple',
+}
+
+export const WithCustomFooter = Template.bind({})
+WithCustomFooter.args = {
+  customFooter:<div>Custom footer</div>,
+}

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

@@ -7,6 +7,7 @@
   --gradient-color-2: var(--soft-background-mesh);
   --gradient-color-3: var(--background-mesh);
   --gradient-color-4: var(--soft-background-mesh);
+  background-color: var(--background-mesh);
   height: 100%;
   left: 0;
   top: 0;