goblin-magic 1.0.3

package/widgets/magic-box-old/styles.js

@@ -0,0 +1,111 @@
+/******************************************************************************/
+
+function getBackgroundMood(mood, customOpacity) {
+  let o = 0.5;
+  if (customOpacity !== undefined) {
+    o = customOpacity;
+  }
+  switch (mood) {
+    case 'unicorn':
+      return `linear-gradient(109.6deg, rgba(9, 9, 121, ${o}) 11.2%, rgba(144, 6, 161, ${o}) 53.7%, rgba(0, 212, 255, ${o}) 100.2%)`;
+    case 'sunset':
+      return `linear-gradient(111.1deg, rgba(0, 40, 70, ${o}) -4.8%, rgba(255, 115, 115, ${o}) 82.7%, rgba(255, 175, 123, ${o}) 97.2%)`;
+    case 'velvet':
+      return `radial-gradient(circle at 52.1% -29.6%, rgba(144, 17, 105, ${o}) 0%, rgba(51, 0, 131, ${o}) 100.2%)`;
+    default:
+      return `rgba(248, 241, 248, 0.1)`;
+  }
+}
+
+function assignProp(className, propName, properties, defaultValue) {
+  if (properties[propName]) {
+    className[propName] = properties[propName];
+  } else if (defaultValue) {
+    className[propName] = defaultValue;
+  }
+}
+
+export const propNames = [
+  'z',
+  'mood',
+  'top',
+  'left',
+  'right',
+  'bottom',
+  'height',
+  'width',
+  'opacity',
+];
+
+export default function styles(theme, props) {
+  let background = getBackgroundMood(props.mood, props.opacity);
+  const main = {
+    'overflowX': 'auto',
+    'overflowY': 'auto',
+    '::-webkit-scrollbar-track': {
+      width: '4px',
+      borderRadius: '2px',
+      backgroundColor: background,
+    },
+    '::-webkit-scrollbar': {
+      boxShadow: 'inset 0 0 6px rgba(0,0,0,0.3)',
+      borderRadius: '2px',
+      backgroundColor: background,
+    },
+    '::-webkit-scrollbar-thumb': {
+      borderRadius: ' 10px',
+      boxShadow: 'inset 0 0 6px rgba(0,0,0,.3)',
+      backgroundColor: 'rgba(255,255,255,0.1)',
+    },
+    'color': 'white',
+    background,
+    'borderRadius': '8px',
+    'boxShadow': '0 4px 30px rgba(0, 0, 0, 0.1)',
+    'backdropFilter': 'blur(10px) saturate(100%)',
+    'border': '1px solid rgba(209, 213, 219, 0.3)',
+  };
+
+  if (props.top || props.bottom) {
+    main.position = 'absolute';
+    main.height = props.height || '500px';
+    // assignProp(main, 'zIndex', props, 1);
+    assignProp(main, 'width', props, '450px');
+
+    if (props.top) {
+      assignProp(main, 'top', props, '10vh');
+    } else if (props.bottom) {
+      assignProp(main, 'bottom', props, '10vh');
+    } else {
+      assignProp(main, 'top', props, '10vh');
+    }
+
+    if (props.left) {
+      assignProp(main, 'left', props, '10vw');
+    } else if (props.right) {
+      assignProp(main, 'right', props, '10vw');
+    } else {
+      assignProp(main, 'left', props, '10vw');
+    }
+  }
+
+  // background = getBackgroundMood(props.mood);
+
+  const content = {
+    minHeight: '100%',
+    padding: '20px',
+  };
+
+  const close = {
+    position: 'absolute',
+    right: '10px',
+    top: '0px',
+  };
+
+  return {
+    main,
+    content,
+    close,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-box-old/widget.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import MagicAction from '../magic-action/widget.js';
+import * as styles from './styles.js';
+
+class MagicBoxOld extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    return (
+      <div className={this.styles.classNames.main}>
+        {this.props.closable ? (
+          <div className={this.styles.classNames.close}>
+            <MagicAction onClick={this.props.onClose} text="fermer" />
+          </div>
+        ) : null}
+        <div className={this.styles.classNames.content}>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+}
+
+/******************************************************************************/
+
+export default MagicBoxOld;

package/widgets/magic-button/styles.js

@@ -0,0 +1,156 @@
+/******************************************************************************/
+
+export default function styles() {
+  const button = {
+    'position': 'relative',
+    'minHeight': '32px',
+    'minWidth': '31px',
+    'cursor': 'pointer',
+    'backgroundColor':
+      'color-mix(in srgb, var(--button-background-color), transparent 80%)',
+    'border':
+      '1px solid color-mix(in srgb, var(--text-color), transparent 50%)',
+    'borderRadius': '5px',
+    'padding': '6px 8px',
+    'color': 'inherit',
+    'display': 'inline-flex',
+    'flexDirection': 'row',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'gap': '4px',
+
+    '&:hover': {
+      // backgroundColor: 'color-mix(in srgb, var(--text-color), transparent 70%)',
+      backgroundColor:
+        'color-mix(in srgb, var(--button-accent-color), transparent 70%)',
+      borderColor:
+        'color-mix(in srgb, var(--button-accent-color), transparent 10%)',
+    },
+
+    '&:enabled:active': {
+      '&::before': {
+        content: "''",
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        transform: 'scale(1.1)',
+        border: '2px solid transparent',
+        borderRadius: '5px',
+        // outline: '1px solid red',
+      },
+      'transform': 'scale(0.9)',
+      // paddingTop: '8px',
+      'opacity': '0.85',
+    },
+
+    '&:focus-visible': {
+      borderColor: 'var(--text-color)',
+      boxShadow: '0px 0px 3px var(--text-color)',
+      outline: 'none',
+    },
+
+    '&[data-enabled=true]': {
+      // 'backgroundColor': 'rgba(255,255,255,0.4)',
+      'backgroundColor': 'rgba(255,177,60,0.5)',
+      'border': '1px solid rgb(255,153,0)',
+      'boxShadow': '0px 0px 3px rgb(255,153,0)',
+      '&:hover': {
+        // backgroundColor: 'rgba(255,255,255,0.5)',
+        backgroundColor: 'rgba(255,177,60,0.6)',
+      },
+    },
+
+    '&[data-len1=true]': {
+      fontSize: '20px',
+      padding: 0,
+    },
+
+    '&[data-big=true]': {
+      fontSize: '24px',
+    },
+
+    '&[data-simple=true]': {
+      'backgroundColor': 'transparent',
+      'borderColor': 'transparent',
+      '&:not(:disabled):hover': {
+        opacity: 1,
+        backgroundColor:
+          'color-mix(in srgb, var(--button-accent-color), transparent 70%)',
+        borderColor:
+          'color-mix(in srgb, var(--button-accent-color), transparent 50%)',
+      },
+      '&:disabled:hover': {
+        backgroundColor: 'transparent',
+      },
+    },
+
+    '& > i': {
+      fontSize: '24px',
+      fontStyle: 'normal',
+    },
+
+    '& > svg': {
+      // These styles work because spans are added around text nodes in the render function
+
+      '&:only-child': {
+        // Reduce padding when there is only one icon
+        margin: '-1px',
+      },
+
+      // mdi icon case
+      '&[role=presentation]': {
+        margin: '-3px',
+      },
+
+      ':not(:last-child)': {
+        marginRight: '1px',
+      },
+
+      ':not(:first-child)': {
+        marginLeft: '1px',
+      },
+    },
+
+    '&:disabled': {
+      'opacity': '0.4',
+      '&:hover': {
+        backgroundColor:
+          'color-mix(in srgb, var(--button-accent-color), transparent 80%)',
+        cursor: 'unset',
+      },
+    },
+  };
+
+  const spinner = {
+    'display': 'block',
+    'width': '29px',
+    'height': '29px',
+    '&::after': {
+      content: "''",
+      display: 'inline-block',
+      borderWidth: '2px',
+      borderColor:
+        'var(--text-color) var(--text-color) var(--text-color) transparent',
+      borderStyle: 'solid',
+      borderRadius: '100%',
+      width: '17px',
+      height: '17px',
+      margin: '4px',
+      animationDuration: '1.5s',
+      animationDelay: '0s',
+      animationIterationCount: 'infinite',
+      animationTimingFunction: 'linear',
+      animationName: {
+        '0%': {transform: 'rotate(0deg)'},
+        '100%': {transform: 'rotate(360deg)'},
+      },
+    },
+  };
+
+  return {
+    button,
+    spinner,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-button/widget.js

@@ -0,0 +1,89 @@
+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 {TranslatableButton} from 'goblin-nabu/widgets/helpers/element-helpers.js';
+
+class MagicButtonNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    this.handlePointerDown = this.handlePointerDown.bind(this);
+  }
+
+  /**
+   * @param {PointerEvent} event
+   */
+  handlePointerDown(event) {
+    const button = event.currentTarget;
+    const disabled = [
+      ...button.parentElement.querySelectorAll(':disabled'),
+    ].includes(button);
+    if (disabled) {
+      return;
+    }
+    this.props.onPointerDown(event);
+  }
+
+  renderChildren(spinner, len1) {
+    const children = React.Children.map(this.props.children, (child) => {
+      if (typeof child === 'string') {
+        return <span>{child}</span>;
+      }
+      return child;
+    });
+    return (
+      <>
+        {!(Boolean(spinner) && len1) && children}
+        {spinner && <span className={this.styles.classNames.spinner} />}
+      </>
+    );
+  }
+
+  render() {
+    const {
+      enabled,
+      big,
+      simple,
+      spinner,
+      onPointerDown,
+      className = '',
+      title,
+      ...props
+    } = this.props;
+    const len1 =
+      typeof this.props.children === 'string' &&
+      this.props.children.length === 1;
+
+    return title ? (
+      <TranslatableButton
+        {...props}
+        className={this.styles.classNames.button + ' button ' + className}
+        data-enabled={this.props.enabled}
+        data-big={big}
+        data-simple={simple}
+        data-len1={len1}
+        onPointerDown={onPointerDown && this.handlePointerDown}
+        title={title}
+      >
+        {this.renderChildren(spinner, len1)}
+      </TranslatableButton>
+    ) : (
+      <button
+        {...props}
+        className={this.styles.classNames.button + ' button ' + className}
+        data-enabled={this.props.enabled}
+        data-big={big}
+        data-simple={simple}
+        data-len1={len1}
+        onPointerDown={onPointerDown && this.handlePointerDown}
+      >
+        {this.renderChildren(spinner, len1)}
+      </button>
+    );
+  }
+}
+const MagicButton = withC(MagicButtonNC);
+MagicButton.displayName = 'MagicButton';
+
+export default MagicButton;

package/widgets/magic-checkbox/styles.js

@@ -0,0 +1,116 @@
+/******************************************************************************/
+
+export default function styles() {
+  const input = {
+    'display': 'block',
+    'width': '24px',
+    'height': '24px',
+    'verticalAlign': 'middle',
+    'position': 'relative',
+    'bottom': '1px',
+    'cursor': 'pointer',
+
+    'appearance': 'none',
+    'backgroundColor':
+      'color-mix(in srgb, var(--button-background-color), transparent 80%)',
+    'border':
+      '1px solid color-mix(in srgb, var(--text-color), transparent 50%)',
+    'borderRadius': '4px',
+
+    '&[data-small=true]': {
+      'borderColor': 'color-mix(in srgb, var(--text-color), transparent 70%)',
+      'backgroundColor': 'rgba(0,0,0,0.2)',
+      'width': '21px',
+      'height': '21px',
+      '&::after': {
+        width: '4px',
+        height: '8px',
+        left: '7px',
+        top: '4px',
+      },
+    },
+
+    '&::after': {
+      content: "''",
+      display: 'block',
+      position: 'absolute',
+      width: '5px',
+      height: '9px',
+      border:
+        '2px solid color-mix(in srgb, var(--text-color), transparent 10%)',
+      borderTop: 'none',
+      borderLeft: 'none',
+      left: '8px',
+      top: '4px',
+      transform: 'rotate(43deg)',
+      opacity: 0,
+    },
+
+    '&:checked::after': {
+      opacity: 1,
+    },
+
+    '&:focus-visible': {
+      borderColor: 'var(--text-color)',
+      boxShadow: '0px 0px 3px var(--text-color)',
+      outline: 'none',
+    },
+
+    '&:focus': {
+      outline: 'none',
+    },
+
+    '&:active': {
+      transform: 'scale(0.9)',
+    },
+
+    '&:disabled': {
+      'borderColor': 'transparent',
+      'backgroundColor':
+        'color-mix(in srgb, var(--text-color), transparent 90%)',
+      '&:hover': {
+        cursor: 'unset',
+      },
+    },
+  };
+
+  const checkboxLabel = {
+    'display': 'flex',
+    'alignItems': 'center',
+    // 'width': '100%',
+    // 'textTransform': 'uppercase',
+
+    '&:hover input[type=checkbox]': {
+      'backgroundColor':
+        'color-mix(in srgb, var(--button-accent-color), transparent 60%)',
+      'borderColor': 'var(--button-accent-color)',
+
+      '&[data-small=true]': {
+        backgroundColor:
+          'color-mix(in srgb, var(--button-accent-color), transparent 80%)',
+      },
+
+      '&:disabled': {
+        backgroundColor:
+          'color-mix(in srgb, var(--text-color), transparent 90%)',
+        borderColor: 'transparent',
+      },
+    },
+  };
+
+  const text = {
+    'display': 'flex',
+    'marginLeft': '8px',
+    '&:empty': {
+      marginLeft: 0,
+    },
+  };
+
+  return {
+    checkboxLabel,
+    input,
+    text,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-checkbox/widget.js

@@ -0,0 +1,68 @@
+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';
+
+class InputCheckbox extends Widget {
+  constructor() {
+    super(...arguments);
+    this.onChange = this.onChange.bind(this);
+    this.styles = styles;
+  }
+
+  onChange(e) {
+    this.props.onChange(e.target.checked);
+  }
+
+  render() {
+    const {value, ...props} = this.props;
+    return (
+      <input
+        {...props}
+        type="checkbox"
+        className={this.styles.classNames.input}
+        onChange={this.onChange}
+        checked={value}
+      />
+    );
+  }
+}
+
+class MagicCheckboxNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {
+      value,
+      onChange,
+      text,
+      title,
+      disabled,
+      small,
+      children,
+      className = '',
+      ...props
+    } = this.props;
+    return (
+      <label
+        className={this.styles.classNames.checkboxLabel + ' ' + className}
+        title={title}
+      >
+        <InputCheckbox
+          {...props}
+          data-small={small}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+        />
+        <span className={this.styles.classNames.text}>{text || children}</span>
+      </label>
+    );
+  }
+}
+const MagicCheckbox = withC(MagicCheckboxNC, {value: 'onChange'});
+MagicCheckbox.displayName = 'MagicCheckbox';
+export default MagicCheckbox;

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

@@ -0,0 +1,22 @@
+export default function styles() {
+  const colorField = {
+    // width: '120px',
+  };
+
+  const colorPreview = {
+    'width': '21px',
+    'height': '21px',
+    'margin': '-4px',
+
+    '& > input': {
+      width: 0,
+      height: 0,
+      opacity: 0,
+    },
+  };
+
+  return {
+    colorField,
+    colorPreview,
+  };
+}

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

@@ -0,0 +1,68 @@
+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 InputGroup from '../input-group/widget.js';
+import MagicButton from '../magic-button/widget.js';
+import Icon from '@mdi/react';
+import {mdiPalette} from '@mdi/js';
+
+class MagicColorFieldButtonNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {value, onChange, className = '', ...props} = this.props;
+
+    return (
+      <MagicButton disabled>
+        <label
+          {...props}
+          className={this.styles.classNames.colorPreview + ' ' + className}
+          style={{
+            backgroundColor: value,
+          }}
+        >
+          {!value && <Icon path={mdiPalette} size={0.8} />}
+          <input
+            type="color"
+            value={value || ''}
+            onChange={(event) => onChange?.(event.target.value)}
+          />
+        </label>
+      </MagicButton>
+    );
+  }
+}
+
+export const MagicColorFieldButton = withC(MagicColorFieldButtonNC, {
+  value: 'onChange',
+});
+MagicColorFieldButton.displayName = 'MagicColorFieldButton';
+
+class MagicColorFieldNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {className = '', ...props} = this.props;
+    return (
+      <InputGroup>
+        <MagicTextField
+          {...props}
+          className={this.styles.classNames.colorField + ' ' + className}
+        />
+        <MagicColorFieldButton value={props.value} onChange={props.onChange} />
+      </InputGroup>
+    );
+  }
+}
+const MagicColorField = withC(MagicColorFieldNC, {value: 'onChange'});
+MagicColorField.displayName = 'MagicColorField';
+
+export default MagicColorField;

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

@@ -0,0 +1,9 @@
+export default function styles() {
+  const dateField = {
+    width: '120px',
+  };
+
+  return {
+    dateField,
+  };
+}