goblin-magic 1.0.3

package/widgets/magic-date-field/widget.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c';
+import MagicTextField from '../magic-text-field/widget.js';
+
+import {date as DateConverters} from 'xcraft-core-converters';
+import InputGroup from '../input-group/widget.js';
+import MagicButton from '../magic-button/widget.js';
+import Icon from '@mdi/react';
+import {mdiCalendarMonth} from '@mdi/js';
+
+class MagicDateFieldNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    this.inputRef = this.props.inputRef || React.createRef();
+  }
+
+  get input() {
+    return this.inputRef.current;
+  }
+
+  static parseEdited(value) {
+    if (!value) {
+      return null;
+    }
+    const edited = DateConverters.parseEdited(value);
+    // if (edited.error) {
+    //   return null;
+    // }
+    return edited.value;
+  }
+
+  parse = (value) => {
+    const newValue = MagicDateFieldNC.parseEdited(value);
+    if (this.props.required && !newValue) {
+      return DateConverters.getNowCanonical();
+    }
+    return newValue;
+  };
+
+  format = (value) => {
+    if (!value) {
+      return '';
+    }
+    return DateConverters.getDisplayed(value.split('T', 1)[0]);
+  };
+
+  getPositionKind(position) {
+    // Value: d d . m m . y y y y
+    // Pos:  0 1 2 3 4 5 6 7 8 9 10
+    // Kind:   0  |  1  |    2
+    if (position <= 2) {
+      return 0;
+    }
+    if (position <= 5) {
+      return 1;
+    }
+    return 2;
+  }
+
+  getSelection(positionKind, max) {
+    // Kind:   0  |  1  |    2
+    // Pos:  0 1 2 3 4 5 6 7 8 9 10
+    // Value: d d . m m . y y y y
+    if (positionKind === 0) {
+      return [0, 2];
+    }
+    if (positionKind === 1) {
+      return [3, 5];
+    }
+    return [6, max];
+  }
+
+  handleKeyDown = (event) => {
+    this.props.onKeyDown?.(event);
+
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      const {value, selectionStart, selectionEnd} = event.target;
+      const cursorPosition =
+        selectionStart < 2
+          ? selectionStart
+          : (selectionStart + selectionEnd) / 2;
+      const step = event.shiftKey && cursorPosition <= 2 ? 7 : 1;
+      const direction = event.key === 'ArrowUp' ? 1 : -1;
+      const result = DateConverters.incEdited(
+        value,
+        cursorPosition,
+        direction,
+        step
+      );
+      if (result.edited) {
+        this.input.changeAndSelect(
+          result.edited,
+          result.selectionStart,
+          result.selectionEnd
+        );
+      }
+      event.preventDefault();
+    }
+
+    if (event.ctrlKey && event.key === 'ArrowRight') {
+      const {value, selectionEnd} = event.target;
+      const positionKind = this.getPositionKind(selectionEnd);
+      const newKind = positionKind < 2 ? positionKind + 1 : 2;
+      this.input.htmlInput.setSelectionRange(
+        ...this.getSelection(newKind, value.length)
+      );
+      event.preventDefault();
+    }
+    if (event.ctrlKey && event.key === 'ArrowLeft') {
+      const {value, selectionStart} = event.target;
+      const positionKind = this.getPositionKind(selectionStart);
+      const newKind = positionKind > 0 ? positionKind - 1 : 0;
+      this.input.htmlInput.setSelectionRange(
+        ...this.getSelection(newKind, value.length)
+      );
+      event.preventDefault();
+    }
+  };
+
+  render() {
+    const {className = '', required, ...props} = this.props;
+    return (
+      <InputGroup>
+        <MagicTextField
+          inputRef={this.inputRef}
+          format={this.format}
+          parse={this.parse}
+          {...props}
+          onKeyDown={this.handleKeyDown}
+          className={this.styles.classNames.dateField + ' ' + className}
+        />
+        <MagicButton disabled>
+          <Icon path={mdiCalendarMonth} size={0.8} />
+        </MagicButton>
+      </InputGroup>
+    );
+  }
+}
+const MagicDateField = withC(MagicDateFieldNC, {value: 'onChange'});
+MagicDateField.displayName = 'MagicDateField';
+
+export default MagicDateField;

package/widgets/magic-datetime-field/styles.js

@@ -0,0 +1,11 @@
+export default function styles() {
+  const datetimeContainer = {
+    display: 'inline-flex',
+    flexDirection: 'row',
+    gap: '5px;',
+  };
+
+  return {
+    datetimeContainer,
+  };
+}

package/widgets/magic-datetime-field/widget.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c';
+import MagicDateField from '../magic-date-field/widget.js';
+import MagicTimeField from '../magic-time-field/widget.js';
+import {
+  nowZonedDateTimeISO,
+  parseZonedDateTime,
+  zonedDateTimeFromParts,
+} from 'xcraft-core-utils/lib/calendar.js';
+
+class MagicDatetimeFieldNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  changeDate = (date) => {
+    const {value} = this.props;
+    let newDate;
+    if (date && value && value.includes('T')) {
+      const afterDate = value.slice(value.indexOf('T') + 1);
+      newDate = `${date}T${afterDate}`;
+    } else {
+      newDate = date;
+    }
+    this.props.onChange?.(newDate);
+  };
+
+  changeTime = (time) => {
+    const {value, initialDate} = this.props;
+    let newDate;
+    if (value) {
+      const current = parseZonedDateTime(value);
+      if (time) {
+        const timezone = current.time
+          ? current.timezone
+          : Intl.DateTimeFormat().resolvedOptions().timeZone;
+        newDate = zonedDateTimeFromParts({...current, time, timezone});
+      } else {
+        newDate = current.date;
+      }
+    } else {
+      if (time) {
+        const initial = parseZonedDateTime(
+          initialDate || nowZonedDateTimeISO()
+        );
+        const timezone = initial.time
+          ? initial.timezone
+          : Intl.DateTimeFormat().resolvedOptions().timeZone;
+        newDate = zonedDateTimeFromParts({
+          ...initial,
+          time,
+          timezone,
+        });
+      } else {
+        newDate = null;
+      }
+    }
+    this.props.onChange?.(newDate);
+  };
+
+  render() {
+    const {
+      value,
+      onChange,
+      requiredDate,
+      requiredTime,
+      dispatch,
+      ...props
+    } = this.props;
+    const {date, time} = value ? parseZonedDateTime(value) : {};
+    return (
+      <div className={this.styles.classNames.datetimeContainer}>
+        <MagicDateField
+          {...props}
+          value={date}
+          onChange={this.changeDate}
+          required={requiredDate || requiredTime}
+        />
+        <MagicTimeField
+          {...props}
+          value={time}
+          onChange={this.changeTime}
+          required={requiredTime}
+        />
+      </div>
+    );
+  }
+}
+const MagicDatetimeField = withC(MagicDatetimeFieldNC, {value: 'onChange'});
+MagicDatetimeField.displayName = 'MagicDatetimeField';
+
+export default MagicDatetimeField;

package/widgets/magic-dialog/styles.js

@@ -0,0 +1,39 @@
+export default function styles() {
+  const dialog = {
+    'border': 'none',
+    'backgroundColor': 'transparent',
+    'padding': '0',
+    'maxHeight': '100%',
+    'position': 'fixed',
+    'top': '0',
+    'left': '0',
+    'right': '0',
+    'bottom': '0',
+    'margin': 'auto',
+    'overflow': 'visible',
+
+    '&::backdrop': {
+      backgroundColor: 'rgba(0,0,0,0.3)',
+    },
+
+    '&[data-modal=false]': {
+      boxShadow:
+        'rgba(0, 0, 0, 0.2) 0px 4px 120px, rgba(0, 0, 0, 0.1) 0px 4px 80px',
+      borderRadius: '8px',
+      // '&:not(:focus-within)': {
+      //   'boxShadow': 'rgba(0, 0, 0, 0.2) 0px 4px 120px',
+      //   '& :not(div)': {
+      //     opacity: 0.7,
+      //   },
+      // },
+    },
+
+    '& > *': {
+      maxHeight: '95vh',
+    },
+  };
+
+  return {
+    dialog,
+  };
+}

package/widgets/magic-dialog/widget.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import Dialog from '../dialog/widget.js';
+import Movable from '../movable/widget.js';
+import isEmptyAreaElement from '../element-helpers/is-empty-area-element.js';
+
+/**
+ * @param {PointerEvent} event1
+ * @param {PointerEvent} event2
+ * @returns {number}
+ */
+function eventDistance(event1, event2) {
+  return Math.sqrt(
+    Math.pow(event2.clientX - event1.clientX, 2) +
+      Math.pow(event2.clientY - event1.clientY, 2)
+  );
+}
+
+class MagicDialog extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    /** @type {React.RefObject<Dialog>} */
+    this.dialog = React.createRef();
+  }
+
+  componentDidMount() {
+    this.updateOutsideClickHandler();
+  }
+
+  componentDidUpdate() {
+    this.updateOutsideClickHandler();
+  }
+
+  componentWillUnmount() {
+    this.removeOutsideClickHandler();
+  }
+
+  updateOutsideClickHandler() {
+    if (!this.props.modal && this.props.onClose && this.props.open) {
+      this.addOutsideClickHandler();
+    } else {
+      this.removeOutsideClickHandler();
+    }
+  }
+
+  addOutsideClickHandler() {
+    window.addEventListener('pointerdown', this.handlePointerDown);
+    window.addEventListener('pointerup', this.handlePointerUp);
+  }
+
+  removeOutsideClickHandler() {
+    window.removeEventListener('pointerdown', this.handlePointerDown);
+    window.removeEventListener('pointerup', this.handlePointerUp);
+  }
+
+  handlePointerDown = (event) => {
+    const {target} = event;
+    const dialog = this.dialog.current?.dialog.current;
+    if (dialog && !dialog.contains(target)) {
+      if (isEmptyAreaElement(target)) {
+        this.downEvent = event;
+        return;
+      }
+    }
+  };
+
+  handlePointerUp = (event) => {
+    if (this.downEvent) {
+      const distance = eventDistance(event, this.downEvent);
+      this.downEvent = null;
+      if (distance < 8) {
+        this.dialog.current.close();
+      }
+    }
+  };
+
+  handleKeyDown = (event) => {
+    this.props.onKeyDown?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (event.key === 'Escape') {
+      this.dialog.current.close();
+      event.stopPropagation();
+    }
+  };
+
+  render() {
+    const {className = '', ...props} = this.props;
+    return (
+      <Movable>
+        {(moveableProps) => (
+          <Dialog
+            {...props}
+            {...moveableProps}
+            onKeyDown={
+              !this.props.modal && this.props.onClose
+                ? this.handleKeyDown
+                : undefined
+            }
+            ref={this.dialog}
+            className={this.styles.classNames.dialog + ' ' + className}
+            open={this.props.open}
+            modal={this.props.modal}
+            data-modal={this.props.modal || false}
+            onClose={this.props.onClose}
+          />
+        )}
+      </Movable>
+    );
+  }
+}
+
+export default MagicDialog;

package/widgets/magic-div/styles.js

@@ -0,0 +1,22 @@
+export default function styles() {
+  const div = {
+    '--border-radius': '8px',
+    // 'color': 'white',
+    'background': 'rgba(248, 241, 248, 0.1)',
+    'borderRadius': '8px',
+    'boxShadow': '0 4px 30px rgba(0, 0, 0, 0.1)',
+    'backdropFilter': 'blur(10px) saturate(100%)',
+    'border':
+      '1px solid color-mix(in srgb, var(--text-color), transparent 78%)',
+
+    '@media (prefers-color-scheme: light)': {
+      background: 'rgba(248, 241, 248, 0.85)',
+    },
+  };
+
+  return {
+    div,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-div/widget.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+
+export default class MagicDiv extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {className = '', ...props} = this.props;
+    return (
+      <div
+        className={this.styles.classNames.div + ' ' + className}
+        {...props}
+      />
+    );
+  }
+}

package/widgets/magic-emoji/styles.js

@@ -0,0 +1,14 @@
+export default function styles(theme) {
+  const button = {
+    '& > span': {
+      fontSize: '140%',
+      margin: '-4px',
+    },
+  };
+
+  const content = {
+    border: 'none',
+  };
+
+  return {button, content};
+}

package/widgets/magic-emoji/widget.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import Menu from '../menu/widget.js';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c.js';
+import MagicEmojiPickerNC from '../magic-emoji-picker/widget.js';
+
+class MagicEmojiNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {onChange, ...props} = this.props;
+    const onEmojiSelect = (emoji) => onChange(emoji?.native);
+
+    return (
+      <Menu>
+        <Menu.Button className={this.styles.classNames.button}>
+          {props.value}
+        </Menu.Button>
+        <Menu.Content className={this.styles.classNames.content}>
+          <MagicEmojiPickerNC onEmojiSelect={onEmojiSelect} {...props} />
+        </Menu.Content>
+      </Menu>
+    );
+  }
+}
+
+const MagicEmoji = withC(MagicEmojiNC, {value: 'onChange'});
+
+export default MagicEmoji;

package/widgets/magic-emoji-picker/styles.js

@@ -0,0 +1,21 @@
+export default function styles(theme) {
+  const picker = {
+    '& div > em-emoji-picker': {
+      '--font-family': theme.typo.font,
+      '--border-radius': '4px',
+
+      '--rgb-background': '25, 45, 70, 1',
+      '--rgb-accent': '255, 255, 255',
+      '--shadow': '0 0 1px 1px rgba(255, 255, 255, 0.4)',
+      '@media (prefers-color-scheme: light)': {
+        '--rgb-background': '237, 234, 242, 1',
+        '--rgb-accent': '0, 0, 0',
+        '--shadow': '0 0 1px 1px rgba(0, 0, 0, 0.4)',
+      },
+    },
+  };
+
+  return {
+    picker,
+  };
+}

package/widgets/magic-emoji-picker/widget.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import data from '@emoji-mart/data';
+import Picker from '@emoji-mart/react';
+
+class MagicEmojiPickerNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {className = '', ...props} = this.props;
+
+    let theme = 'light';
+    let emojiButtonColors = 'rgba(0, 0, 0, 0.1)';
+    if (
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      theme = 'dark';
+      emojiButtonColors = 'rgba(255, 255, 255, 0.2)';
+    }
+
+    return (
+      <div className={this.styles.classNames.picker + ' ' + className}>
+        <Picker
+          data={data}
+          locale="fr"
+          set="native"
+          theme={theme}
+          previewPosition="none"
+          autoFocus={true}
+          emojiButtonRadius="4px"
+          emojiButtonColors={[emojiButtonColors]}
+          {...props}
+        />
+      </div>
+    );
+  }
+}
+
+export default MagicEmojiPickerNC;

package/widgets/magic-inplace-input/styles.js

@@ -0,0 +1,55 @@
+/******************************************************************************/
+
+export default function styles() {
+  const disabledStyle = {
+    ':hover': {
+      outline: 'none',
+      backgroundColor: 'transparent',
+    },
+  };
+
+  const inplaceInput = {
+    'display': 'flex',
+    'width': '100%',
+    'minHeight': '1em', // For contenteditable
+    'backgroundColor': 'transparent',
+    'borderRadius': '5px',
+    'border': 'none',
+    'padding': '0',
+    'marginTop': '0',
+    'fontSize': 'inherit',
+    'color': 'inherit',
+    'resize': 'vertical',
+    '::placeholder': {
+      color: 'color-mix(in srgb, var(--text-color), transparent 75%)',
+      fontWeight: 'bold',
+    },
+    ':hover': {
+      outline:
+        '1px solid color-mix(in srgb, var(--text-color), transparent 70%)',
+      backgroundColor:
+        'color-mix(in srgb, var(--field-background-color), transparent 20%)',
+      marginLeft: '-0.3em',
+      paddingLeft: '0.3em',
+    },
+    ':focus': {
+      outline:
+        '1px solid color-mix(in srgb, var(--text-color), transparent 70%)',
+      backgroundColor:
+        'color-mix(in srgb, var(--field-background-color), transparent 20%)',
+      marginLeft: '-0.3em',
+      paddingLeft: '0.3em',
+    },
+    '&::selection': {
+      backgroundColor: 'rgba(0,170,255,0.55)',
+    },
+    '&[data-disabled=true]': disabledStyle,
+    '&:disabled': disabledStyle,
+  };
+
+  return {
+    inplaceInput,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-inplace-input/widget.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c';
+import MagicInput from '../magic-input/widget.js';
+
+class MagicInplaceInputNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {className = '', ...props} = this.props;
+    return (
+      <MagicInput
+        {...props}
+        className={this.styles.classNames.inplaceInput + ' ' + className}
+      />
+    );
+  }
+}
+
+const MagicInplaceInput = withC(MagicInplaceInputNC, {value: 'onChange'});
+MagicInplaceInput.displayName = 'MagicInplaceInput';
+export default MagicInplaceInput;