goblin-magic 1.0.3

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

@@ -0,0 +1,58 @@
+/******************************************************************************/
+
+export default function styles() {
+  const disabledStyle = {
+    'backgroundColor': 'color-mix(in srgb, var(--text-color), transparent 95%)',
+    'color': 'color-mix(in srgb, var(--text-color), transparent 30%)',
+    '::placeholder': {
+      color: 'color-mix(in srgb, var(--text-color), transparent 80%)',
+    },
+  };
+
+  const colorPickerStyle = {
+    width: '32px',
+    height: '20px',
+    padding: '0px 2px',
+  };
+
+  const inputEdit = {
+    'display': 'block',
+    // 'height': '40px',
+    'width': '100%',
+    // 'minHeight': '1em', // For contenteditable
+    'backgroundColor':
+      'color-mix(in srgb, var(--field-background-color), transparent 20%)',
+    'borderRadius': '5px',
+    'border': '1px solid transparent',
+    'padding': '7px 10px',
+    // 'fontSize': '14px',
+    'fontSize': 'inherit',
+    'fontWeight': 300,
+    'color': 'var(--text-color)',
+    'resize': 'vertical',
+    '::placeholder': {
+      color: 'color-mix(in srgb, var(--text-color), transparent 80%)',
+      // textTransform: 'uppercase',
+      fontWeight: 600,
+    },
+    ':focus': {
+      outline: 'none',
+      borderColor: 'color-mix(in srgb, var(--text-color), transparent 60%)',
+      // backgroundColor: 'rgba(255,255,255,0.2)',
+      fontWeight: 300,
+    },
+    '&[data-disabled=true]': disabledStyle,
+    '&:disabled': disabledStyle,
+    '&[type="color"]': colorPickerStyle,
+    '&[contenteditable]': {
+      minHeight: '54px', // 2 lines
+      cursor: 'text',
+    },
+  };
+
+  return {
+    inputEdit,
+  };
+}
+
+/******************************************************************************/

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

@@ -0,0 +1,66 @@
+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';
+
+let inputCount = 0;
+
+class MagicTextFieldNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    this.listId = `input-data-${inputCount++}`;
+  }
+
+  renderDataList() {
+    if (!this.props.dataList) {
+      return;
+    }
+    return (
+      <datalist id={this.listId}>
+        {this.props.dataList.map((value) => (
+          <option key={value} value={value} />
+        ))}
+      </datalist>
+    );
+  }
+
+  render() {
+    const {className = ''} = this.props;
+    return (
+      <>
+        <MagicInput
+          ref={this.props.inputRef}
+          className={this.styles.classNames.inputEdit + ' ' + className}
+          value={this.props.value}
+          onBlur={this.disableEdit}
+          onEnterKey={this.props.onEnterKey}
+          onKeyDown={this.props.onKeyDown}
+          onKeyUp={this.props.onKeyUp}
+          placeholder={this.props.placeholder}
+          changeMode={this.props.changeMode || 'blur'}
+          parse={this.props.parse}
+          format={this.props.format}
+          onChange={this.props.onChange}
+          onValidate={this.props.onValidate}
+          type={this.props.type}
+          step={this.props.step}
+          min={this.props.min}
+          max={this.props.max}
+          autoFocus={this.props.autoFocus}
+          selectAllOnFocus={this.props.selectAllOnFocus}
+          rows={this.props.rows}
+          autoRows={this.props.autoRows}
+          disabled={this.props.disabled}
+          emojiPicker={this.props.emojiPicker}
+          list={this.props.dataList ? this.listId : undefined}
+        />
+        {this.renderDataList()}
+      </>
+    );
+  }
+}
+const MagicTextField = withC(MagicTextFieldNC, {value: 'onChange'});
+MagicTextField.displayName = 'MagicTextField';
+export default MagicTextField;

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

@@ -0,0 +1,8 @@
+export default function styles() {
+  const timeField = {
+    width: '79px',
+  };
+  return {
+    timeField,
+  };
+}

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

@@ -0,0 +1,142 @@
+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 {time as TimeConverters} from 'xcraft-core-converters';
+import InputGroup from '../input-group/widget.js';
+import MagicButton from '../magic-button/widget.js';
+import Icon from '@mdi/react';
+import {mdiClockOutline} from '@mdi/js';
+
+class MagicTimeFieldNC 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 = TimeConverters.parseEdited(value);
+    return edited.value;
+  }
+
+  parse = (value) => {
+    const newValue = MagicTimeFieldNC.parseEdited(value);
+    if (this.props.required && !newValue) {
+      return TimeConverters.getNowCanonical();
+    }
+    return newValue;
+  };
+
+  format = (value) => {
+    if (!value) {
+      return '';
+    }
+    return TimeConverters.getDisplayed(value.split(/[.\-+Z]/, 1)[0]);
+  };
+
+  getPositionKind(position) {
+    // Value: h h : m m : s s
+    // Pos:  0 1 2 3 4 5 6 7 8
+    // Kind:   0  |  1  |  2
+    if (position <= 2) {
+      return 0;
+    }
+    if (position <= 5) {
+      return 1;
+    }
+    return 2;
+  }
+
+  getSelection(positionKind) {
+    // Kind:   0  |  1  |  2
+    // Pos:  0 1 2 3 4 5 6 7 8
+    // Value: h h : m m : s s
+    if (positionKind === 0) {
+      return [0, 2];
+    }
+    if (positionKind === 1) {
+      return [3, 5];
+    }
+    return [6, 8];
+  }
+
+  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 ? 10 : 1;
+      const direction = event.key === 'ArrowUp' ? 1 : -1;
+      const result = TimeConverters.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 lastKind = 1;
+      const newKind = positionKind < lastKind ? positionKind + 1 : lastKind;
+      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 = '', ...props} = this.props;
+    return (
+      <InputGroup>
+        <MagicTextField
+          inputRef={this.inputRef}
+          format={this.format}
+          parse={this.parse}
+          {...props}
+          onKeyDown={this.handleKeyDown}
+          className={this.styles.classNames.timeField + ' ' + className}
+        />
+        <MagicButton disabled>
+          <Icon path={mdiClockOutline} size={0.8} />
+        </MagicButton>
+      </InputGroup>
+    );
+  }
+}
+const MagicTimeField = withC(MagicTimeFieldNC, {value: 'onChange'});
+MagicTimeField.displayName = 'MagicTimeField';
+
+export default MagicTimeField;

package/widgets/magic-timer/styles.js

@@ -0,0 +1,30 @@
+/******************************************************************************/
+
+export default function styles() {
+  const timer = {
+    'display': 'inline-flex',
+    'flexDirection': 'row',
+    'alignItems': 'center',
+
+    '& .button': {
+      'lineHeight': '10px',
+      'minHeight': '25px',
+      'minWidth': '24px',
+      'fontSize': '24px',
+      'overflow': 'hidden',
+      '& > svg': {
+        margin: '-6px',
+      },
+    },
+
+    '& .text': {
+      marginLeft: '7px',
+    },
+  };
+
+  return {
+    timer,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-timer/widget.js

@@ -0,0 +1,162 @@
+import * as styles from './styles.js';
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c';
+import {datetime as DateTimeConverters} from 'xcraft-core-converters';
+import MagicButton from '../magic-button/widget.js';
+import Icon from '@mdi/react';
+import {mdiPlay, mdiPause} from '@mdi/js';
+
+export class TimerUpdater extends Widget {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      timerValue: '',
+    };
+    this.updateTimer = this.updateTimer.bind(this);
+  }
+
+  static getDerivedStateFromProps(props) {
+    return {
+      timerValue: props.start ? TimerUpdater.getCurrentValue(props.start) : '',
+    };
+  }
+
+  componentDidMount() {
+    this.startStopTimer();
+  }
+
+  componentDidUpdate() {
+    this.startStopTimer();
+  }
+
+  componentWillUnmount() {
+    this.stopTimer();
+  }
+
+  static getCurrentValue(start) {
+    const now = new Date().toISOString();
+    const value = DateTimeConverters.getDisplayedBetweenToDatetimes(start, now);
+    return value;
+  }
+
+  updateTimer() {
+    this.setState({
+      timerValue: TimerUpdater.getCurrentValue(this.props.start),
+    });
+  }
+
+  stopTimer() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+
+  startTimer() {
+    if (!this.timer) {
+      this.timer = setInterval(this.updateTimer, 1000);
+    }
+  }
+
+  startStopTimer() {
+    if (this.props.start) {
+      this.startTimer();
+    } else {
+      this.stopTimer();
+    }
+  }
+
+  render() {
+    return this.props.children(this.state.timerValue);
+  }
+}
+
+class MagicTimerNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    if (this.props.start) {
+      this.stop();
+    } else {
+      this.start();
+    }
+  }
+
+  start() {
+    const now = new Date().toISOString();
+    this.props.onStart?.(now);
+  }
+
+  stop() {
+    const now = new Date().toISOString();
+    this.props.onStop?.(now);
+  }
+
+  render() {
+    const {start, onStart, onStop, className = '', ...props} = this.props;
+    return (
+      <div
+        {...props}
+        className={this.styles.classNames.timer + ' ' + className}
+      >
+        <MagicButton
+          className="button"
+          onClick={this.handleClick}
+          enabled={Boolean(start)}
+          big
+        >
+          {start ? (
+            <Icon path={mdiPause} size={0.8} />
+          ) : (
+            <Icon path={mdiPlay} size={0.8} />
+          )}
+        </MagicButton>
+        <TimerUpdater start={this.props.start}>
+          {(timerValue) =>
+            timerValue && <span className="text">+&nbsp;{timerValue}</span>
+          }
+        </TimerUpdater>
+      </div>
+    );
+  }
+}
+
+// export class MagicTimerTest extends Widget {
+//   constructor() {
+//     super(...arguments);
+//     this.state = {
+//       start: null,
+//       duration: 0,
+//     };
+//     this.handleChange = this.handleChange.bind(this);
+//   }
+
+//   handleChange(state) {
+//     this.setState(state);
+//   }
+
+//   componentDidUpdate() {
+//     console.log(this.state);
+//   }
+
+//   render() {
+//     return (
+//       <MagicTimerNC
+//         onChange={this.handleChange}
+//         {...this.state}
+//         {...this.props}
+//       />
+//     );
+//   }
+// }
+
+const MagicTimer = withC(MagicTimerNC);
+MagicTimer.displayName = 'MagicTimer';
+
+export default MagicTimer;

package/widgets/magic-zen/styles.js

@@ -0,0 +1,61 @@
+export default function styles() {
+  const zenDialog = {
+    width: '100%',
+    height: '100%',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    padding: 0,
+    border: 'none',
+  };
+
+  const zen = {
+    width: '100%',
+    height: '100%',
+    padding: '15px',
+    // '--border-radius': '8px',
+    // 'background': 'transparent',
+    // 'borderRadius': '8px',
+    // 'boxShadow': '0 4px 30px rgba(0, 0, 0, 0.1)',
+    // 'backdropFilter': 'blur(50px) saturate(100%)',
+    // 'border':
+    // '1px solid color-mix(in srgb, var(--text-color), transparent 78%)',
+  };
+
+  const key = {
+    border: '1px solid var(--text-color)',
+    padding: '2px',
+  };
+
+  const notice = {
+    'pointerEvents': 'none',
+    'opacity': 0,
+    'zIndex': 2,
+    'borderRadius': '10px',
+    'position': 'fixed',
+    'top': '20px',
+    'left': '50%',
+    'transform': 'translate(-50%, -10%)',
+    'fontSize': '24px',
+    'padding': '15px',
+    'textAlign': 'center',
+    'backgroundColor': 'rgba(0,0,0,0.5)',
+    '--text-color': 'white',
+    'color': 'var(--text-color)',
+    'animationDirection': 'forwards',
+    'animationDuration': '3s',
+    'animationName': {
+      '0%': {opacity: 1},
+      '50%': {opacity: 1},
+      '100%': {opacity: 0},
+    },
+  };
+
+  return {
+    zen,
+    zenDialog,
+    notice,
+    key,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-zen/widget.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import {createPortal} from 'react-dom';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import Dialog from '../dialog/widget.js';
+import MagicBackground from '../magic-background/widget.js';
+import MagicDiv from '../magic-div/widget.js';
+
+export default class MagicZen extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    if (!this.props.active) {
+      return this.props.children;
+    }
+
+    const {className = ''} = this.props;
+
+    return createPortal(
+      <Dialog
+        className={this.styles.classNames.zenDialog}
+        modal={true}
+        open
+        onClose={this.props.onClose}
+      >
+        <MagicBackground>
+          <div className={this.styles.classNames.notice}>
+            Appuyez sur <span className={this.styles.classNames.key}>ESC</span>{' '}
+            pour quitter le mode zen
+          </div>
+          <MagicDiv className={this.styles.classNames.zen + ' ' + className}>
+            {this.props.children}
+          </MagicDiv>
+        </MagicBackground>
+      </Dialog>,
+      document.getElementById('root')
+    );
+  }
+}

package/widgets/main-tabs/styles.js

@@ -0,0 +1,106 @@
+export default function styles() {
+  const mainTabs = {
+    // 'color': 'white',
+    'padding': '4px 7px',
+    'display': 'flex',
+    'flexDirection': 'row',
+    'flexWrap': 'wrap',
+    'gap': '4px',
+
+    '&:focus-visible': {
+      'outline': 'none',
+
+      '& > [data-active=true]': {
+        borderColor: 'var(--text-color)',
+        boxShadow: '0px 0px 3px var(--text-color)',
+      },
+    },
+
+    '& > *': {
+      'padding': '10px 8px 8px 12px',
+      'border':
+        '1px solid color-mix(in srgb, var(--text-color), transparent 75%)',
+      'borderRadius': '3px',
+      'backgroundColor':
+        'color-mix(in srgb, var(--text-color), transparent 87.5%)',
+      'backdropFilter': 'blur(10px)',
+
+      'display': 'inline-flex',
+      'flexDirection': 'row',
+      'alignItems': 'center',
+      'maxWidth': '300px',
+
+      '&[data-active=true]': {
+        'backgroundColor': 'rgba(255,255,255,0.25)',
+        'borderColor': 'color-mix(in srgb, var(--text-color), transparent 50%)',
+        ':hover': {
+          backgroundColor:
+            'color-mix(in srgb, rgba(255,255,255,0.25), var(--accent-color) 15%)',
+        },
+        '@media (prefers-color-scheme: light)': {
+          'backgroundColor': 'rgba(248, 241, 248, 0.85)',
+          'borderColor':
+            'color-mix(in srgb, var(--text-color), transparent 70%)',
+          ':hover': {
+            backgroundColor:
+              'color-mix(in srgb, rgba(248, 241, 248, 0.85), var(--accent-color) 15%)',
+          },
+        },
+      },
+
+      '&[data-highlighted=true]': {
+        'backgroundColor': 'rgba(255,177,60,0.45)',
+        'borderColor': 'rgba(255,153,0,0.7)',
+        'boxShadow': '0px 0px 5px rgba(255,153,0,0.7)',
+        ':hover': {
+          backgroundColor: 'rgb(255,185,82,0.6)',
+          borderColor: 'rgba(255,153,0,0.85)',
+        },
+      },
+
+      '&[data-highlighted=true][data-active=true]': {
+        'backgroundColor':
+          'color-mix(in srgb, rgba(255,255,255,0.25), rgba(255,177,60,0.45) 25%)',
+        'borderColor':
+          'color-mix(in srgb, color-mix(in srgb, var(--text-color), transparent 50%), rgba(255,153,0,0.7) 25%)',
+        ':hover': {
+          backgroundColor:
+            'color-mix(in srgb, color-mix(in srgb, rgba(255,255,255,0.25), rgba(255,177,60,0.45) 25%), var(--accent-color) 15%)',
+          borderColor:
+            'color-mix(in srgb, var(--button-accent-color), transparent 10%)',
+        },
+        '@media (prefers-color-scheme: light)': {
+          'backgroundColor':
+            'color-mix(in srgb, rgba(248, 241, 248, 0.85), rgba(255,177,60,0.45) 25%)',
+          'borderColor':
+            'color-mix(in srgb, color-mix(in srgb, var(--text-color), transparent 70%), rgba(255,153,0,0.7) 25%)',
+          ':hover': {
+            backgroundColor:
+              'color-mix(in srgb, color-mix(in srgb, rgba(248, 241, 248, 0.85), rgba(255,177,60,0.45) 25%), var(--accent-color) 15%)',
+          },
+        },
+      },
+
+      ':hover': {
+        backgroundColor:
+          'color-mix(in srgb, var(--button-accent-color), transparent 70%)',
+        borderColor:
+          'color-mix(in srgb, var(--button-accent-color), transparent 10%)',
+      },
+
+      ':active': {
+        opacity: 0.8,
+      },
+
+      '&:focus-visible': {
+        borderColor: 'var(--text-color)',
+        boxShadow: '0px 0px 3px var(--text-color)',
+        outline: 'none',
+      },
+    },
+  };
+
+  return {
+    mainTabs,
+  };
+}

package/widgets/main-tabs/widget.js

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