goblin-magic 1.0.3

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*.{js,jsx,json}]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 80

package/.zou-flow

@@ -0,0 +1,2 @@
+[update-version]
+	package-json = package.json

package/eslint.config.js

@@ -0,0 +1,65 @@
+const js = require('@eslint/js');
+const globals = require('globals');
+const react = require('eslint-plugin-react');
+const jsdoc = require('eslint-plugin-jsdoc');
+const babel = require('@babel/eslint-plugin');
+const prettier = require('eslint-config-prettier');
+const babelParser = require('@babel/eslint-parser');
+
+module.exports = [
+  js.configs.recommended,
+  react.configs.flat.recommended,
+  jsdoc.configs['flat/recommended'],
+  prettier,
+  {
+    languageOptions: {
+      parser: babelParser,
+      parserOptions: {
+        requireConfigFile: false, // Évite de devoir spécifier un fichier de configuration Babel
+        babelOptions: {
+          presets: ['@babel/preset-react'],
+        },
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2022,
+        ...globals.mocha,
+      },
+    },
+    plugins: {
+      'react': react,
+      'jsdoc': jsdoc,
+      '@babel': babel,
+    },
+    rules: {
+      'eqeqeq': 'error',
+      'no-console': 'off',
+      'react/display-name': 'off',
+      '@babel/no-unused-expressions': 'error', // Utilisation de règles spécifiques à Babel
+      'no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          args: 'none',
+          ignoreRestSiblings: true,
+          destructuredArrayIgnorePattern: '^_',
+        },
+      ],
+      'jsdoc/require-jsdoc': 'off',
+      'jsdoc/require-param-description': 'off',
+      'jsdoc/require-returns-description': 'off',
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+      jsdoc: {
+        mode: 'typescript',
+      },
+    },
+  },
+];

package/magicNavigation.js

@@ -0,0 +1,7 @@
+const {Elf} = require('xcraft-core-goblin');
+const {
+  MagicNavigation,
+  MagicNavigationLogic,
+} = require('./widgets/magic-navigation/service.js');
+
+exports.xcraftCommands = Elf.birth(MagicNavigation, MagicNavigationLogic);

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "goblin-magic",
+  "version": "1.0.3",
+  "description": "goblin-magic",
+  "author": "",
+  "license": "MIT",
+  "config": {
+    "xcraft": {
+      "commands": true
+    }
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "xcraft-core-goblin": "^5.34.1",
+    "xcraft-core-shredder": "^5.3.2",
+    "xcraft-core-stones": "^0.4.13"
+  },
+  "devDependencies": {
+    "emoji-mart": "^5.6.0",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
+    "goblin-laboratory": "^4.5.0",
+    "goblin-nabu": "^2.4.18",
+    "mousetrap": "^1.6.5",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-splitter-layout": "^4.0.0",
+    "xcraft-core-converters": "^4.5.0",
+    "xcraft-core-utils": "^4.14.2",
+    "xcraft-dev-fontawesome": "^0.1.2",
+    "xcraft-dev-prettier": "^2.0.0",
+    "xcraft-dev-rules": "^4.4.2"
+  },
+  "overrides": {
+    "react-splitter-layout": {
+      "react": "^17.0.1"
+    }
+  },
+  "prettier": "xcraft-dev-prettier"
+}

package/widgets/dialog/widget.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import {createPortal} from 'react-dom';
+
+export default class Dialog extends Widget {
+  constructor() {
+    super(...arguments);
+
+    /** @type {React.RefObject<HTMLDialogElement>} */
+    this.dialog = React.createRef();
+  }
+
+  componentDidMount() {
+    this.update();
+  }
+
+  componentDidUpdate() {
+    this.update();
+  }
+
+  close = () => {
+    this.dialog.current?.close();
+  };
+
+  handleClose = (event) => {
+    this.props.onClose?.(event);
+    event.stopPropagation();
+  };
+
+  handlePointerDown = (event) => {
+    this.props.onPointerDown?.(event);
+    if (event.target === this.dialog.current) {
+      this.closeEnabled = true;
+    } else {
+      this.closeEnabled = false;
+    }
+  };
+
+  handlePointerUp = (event) => {
+    this.props.onPointerUp?.(event);
+    if (this.closeEnabled && event.target === this.dialog.current) {
+      this.dialog.current.close();
+    }
+    this.closeEnabled = false;
+  };
+
+  update() {
+    if (this.props.open) {
+      if (!this.dialog.current?.open) {
+        if (this.props.modal) {
+          this.dialog.current?.showModal();
+        } else {
+          this.dialog.current?.show();
+        }
+      }
+    } else {
+      this.dialog.current?.close();
+    }
+  }
+
+  render() {
+    const {open, modal, portal = false, ...props} = this.props;
+    const dialog = (
+      <dialog
+        {...props}
+        ref={this.dialog}
+        onClose={this.handleClose}
+        onPointerDown={this.handlePointerDown}
+        onPointerUp={this.handlePointerUp}
+      />
+    );
+
+    if (portal) {
+      return createPortal(dialog, document.getElementById('root'));
+    }
+    return dialog;
+  }
+}

package/widgets/element-helpers/element-has-direct-text.js

@@ -0,0 +1,9 @@
+/**
+ * @param {HTMLElement} element
+ * @returns {boolean}
+ */
+export default function elementHasDirectText(element) {
+  return [...element.childNodes].some(
+    (node) => node instanceof Text && node.textContent.trim() !== ''
+  );
+}

package/widgets/element-helpers/is-empty-area-element.js

@@ -0,0 +1,17 @@
+import elementHasDirectText from './element-has-direct-text.js';
+import isFlatElement from './is-flat-element.js';
+
+/**
+ * @param {HTMLElement} element
+ * @param {HTMLElement} [stopAtElement]
+ * @returns {boolean}
+ */
+export default function isEmptyAreaElement(element, stopAtElement) {
+  for (let e = element; e && e !== stopAtElement; e = e.parentElement) {
+    if (!isFlatElement(e) || elementHasDirectText(e)) {
+      // console.log(e);
+      return false;
+    }
+  }
+  return true;
+}

package/widgets/element-helpers/is-flat-element.js

@@ -0,0 +1,52 @@
+const nonInteractiveTags = [
+  'ARTICLE',
+  'ASIDE',
+  'BODY',
+  'DIV',
+  'FOOTER',
+  'HEADER',
+  'HGROUP',
+  'HTML',
+  'MAIN',
+  'NAV',
+  'SECTION',
+];
+
+const interactiveRoles = [
+  'button',
+  'checkbox',
+  'grid',
+  'input',
+  'menu',
+  'option',
+  'radio',
+  'slider',
+  'spinbutton',
+  'switch',
+  'table',
+  'tree',
+  'treegrid',
+  'widget',
+  // More roles could be added
+  // see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+];
+
+/**
+ * @param {HTMLElement} element
+ * @returns {boolean}
+ */
+export function hasInteractiveRole(element) {
+  return element.role
+    ?.split(' ')
+    .some((role) => interactiveRoles.includes(role));
+}
+
+/**
+ * @param {HTMLElement} element
+ * @returns {boolean}
+ */
+export default function isFlatElement(element) {
+  return (
+    nonInteractiveTags.includes(element.tagName) && !hasInteractiveRole(element)
+  );
+}

package/widgets/get-modifiers/get-modifiers.js

@@ -0,0 +1,34 @@
+export function getPlatform(ua) {
+  if (!ua) {
+    return null;
+  }
+  ua = ua.toLowerCase();
+  if (ua.includes('linux')) {
+    return 'linux';
+  }
+  if (ua.includes('windows')) {
+    return 'windows';
+  }
+  if (ua.includes('mac os')) {
+    return 'macos';
+  }
+  return null;
+}
+
+export default function getModifiers(event) {
+  const platform = getPlatform(navigator.userAgent);
+  if (platform === 'macos') {
+    return {
+      shiftKey: event.shiftKey,
+      ctrlKey: event.metaKey,
+      altKey: event.altKey,
+      metaKey: event.ctrlKey,
+    };
+  }
+  return {
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    altKey: event.altKey,
+    metaKey: event.metaKey,
+  };
+}

package/widgets/input-group/styles.js

@@ -0,0 +1,74 @@
+export default function styles() {
+  const inputGroup = {
+    'display': 'inline-flex',
+    'flexDirection': 'row',
+    'borderRadius': '5px',
+    'backgroundColor':
+      'color-mix(in srgb, var(--field-background-color), transparent 20%)',
+    'outline':
+      '1px solid color-mix(in srgb, var(--text-color), transparent 60%)',
+    'outlineOffset': '-1px',
+
+    '& > input': {
+      backgroundColor: 'transparent',
+      paddingRight: '2px',
+      border: 'none',
+    },
+
+    '& > :nth-last-child(n + 2 of :not(dialog))': {
+      'borderTopRightRadius': 0,
+      'borderBottomRightRadius': 0,
+      '&.button:not(:not(:disabled):hover)': {
+        borderRightColor:
+          'color-mix(in srgb, var(--text-color), transparent 70%)',
+      },
+    },
+
+    '& > :nth-child(n + 2 of :not(dialog))': {
+      'borderTopLeftRadius': 0,
+      'borderBottomLeftRadius': 0,
+      '&.button:not(:not(:disabled):hover)': {
+        borderLeftColor:
+          'color-mix(in srgb, var(--text-color), transparent 70%)',
+      },
+    },
+
+    '& > :hover': {
+      zIndex: 0, // Above other buttons in the group
+    },
+
+    '& > .button': {
+      '&:not(:hover)': {
+        borderColor: 'transparent',
+      },
+
+      '&:disabled': {
+        'opacity': 1,
+        '&:hover': {
+          backgroundColor:
+            'color-mix(in srgb, var(--button-background-color), transparent 80%)',
+          borderColor: 'transparent',
+        },
+      },
+
+      '&[data-simple=true]': {
+        'borderLeft': 'none',
+        'borderRight': 'none',
+        'color': 'color-mix(in srgb, var(--text-color), transparent 60%)',
+        '&:hover': {
+          color: 'inherit',
+          backgroundColor: 'transparent',
+          borderColor: 'transparent',
+        },
+      },
+    },
+
+    '&:focus-within': {
+      outlineColor: 'color-mix(in srgb, var(--text-color), transparent 40%)',
+    },
+  };
+
+  return {
+    inputGroup,
+  };
+}

package/widgets/input-group/widget.js

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

package/widgets/magic-action/styles.js

@@ -0,0 +1,45 @@
+/******************************************************************************/
+export const propNames = ['selected', 'disabled', 'size'];
+export default function styles(theme, props) {
+  let size = 16;
+  if (props.size) {
+    size = props.size;
+  }
+  let hoverSize = size + 2;
+  const action = {
+    display: 'inline-block',
+    fontSize: `${size}px`,
+    margin: `${size / 4}px`,
+    fontWeight: 'bold',
+    // textTransform: 'uppercase',
+    // color: '#fff',
+    textDecoration: 'none',
+    transition: 'font-size 0.1s ease-in-out',
+    cursor: 'default',
+  };
+
+  const text = {
+    ':hover': {
+      fontSize: `${hoverSize}px`,
+      lineHeight: '1em',
+    },
+  };
+
+  if (props.selected) {
+    action.textShadow = '0 0 20px var(--text-color)';
+    text[':hover'] = null;
+  }
+
+  if (props.disabled) {
+    action.color = 'color-mix(in srgb, var(--text-color), transparent 40%)';
+    action.userSelect = 'none';
+    text[':hover'] = null;
+  }
+
+  return {
+    action,
+    text,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-action/widget.js

@@ -0,0 +1,44 @@
+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.js';
+
+class MagicActionNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    this.doCmd = this.doCmd.bind(this);
+  }
+
+  doCmd() {
+    let [serviceId, action] = this.props.cmd.split('.');
+    this.doFor(serviceId, action, this.props.arguments || {});
+  }
+
+  togglePanel() {
+    this.setState({hidden: !this.state.hidden});
+  }
+
+  render() {
+    const {disabled} = this.props;
+
+    const baseProps = {};
+    if (!disabled) {
+      baseProps.onClick = this.props.onClick || this.doCmd;
+    }
+
+    return (
+      <div>
+        <span className={this.styles.classNames.action} {...baseProps}>
+          <span className={this.styles.classNames.text}>{this.props.text}</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+/******************************************************************************/
+
+const MagicAction = withC(MagicActionNC);
+
+export default MagicAction;

package/widgets/magic-background/styles.js

@@ -0,0 +1,81 @@
+import BG_MILK from './bg-milkyway.png';
+import BG_WHITE from './bg-white.png';
+
+/******************************************************************************/
+
+const images = {
+  milk: BG_MILK,
+  white: BG_WHITE,
+};
+
+window.CSS.registerProperty({
+  name: '--aurora-color',
+  syntax: '<color>',
+  inherits: false,
+  initialValue: `transparent`,
+});
+
+window.CSS.registerProperty({
+  name: '--space-dark',
+  inherits: false,
+  initialValue: `url(${BG_MILK})`,
+});
+
+window.CSS.registerProperty({
+  name: '--space-light',
+  inherits: false,
+  initialValue: `url(${BG_WHITE})`,
+});
+
+export const propNames = [
+  'useBackgroundColor',
+  'backgroundColor',
+  'plainColor',
+];
+export default function styles(theme, props) {
+  const {plainColor} = props;
+
+  const main = {
+    '--space-dark': plainColor ? '#0D1D3C' : `url(${images['milk']})`,
+    '--space-light': plainColor ? '#CDDFEC' : `url(${images['white']})`,
+    '--accent-color': `${props.backgroundColor || 'white'}`,
+    '--button-accent-color':
+      'color-mix(in srgb, var(--accent-color), #ccc 40%)',
+    '--aurora-color': `transparent`,
+    'height': '100vh',
+    'width': '100vw',
+    'display': 'flex',
+    'flexDirection': 'column',
+    'background': `linear-gradient(to bottom, transparent 40%, var(--aurora-color)), var(--space-dark)`,
+    'backgroundSize': 'cover',
+    'overflow': 'auto',
+    'transition': '--space-dark 3s, --aurora-color 3s',
+
+    '@media (prefers-color-scheme: light)': {
+      // backgroundImage: `linear-gradient(170deg, rgba(207,255,245,1) 0%, rgba(201,216,247,1) 100%)`,
+      // backgroundImage: `linear-gradient(to bottom, transparent 40%, var(--aurora-color)), linear-gradient(170deg, rgba(234,255,251,1) 0%, rgba(243,247,255,1) 100%)`,
+      background: `linear-gradient(to bottom, transparent 40%, var(--aurora-color)), var(--space-light)`,
+      transition: '--space-light 3s, --aurora-color 3s',
+    },
+  };
+
+  if (props.useBackgroundColor) {
+    main[':hover'] = {
+      '--aurora-color': `${props.backgroundColor}42`,
+    };
+  }
+
+  const proto = {
+    textShadow: 'rgb(179 150 177 / 70%) -2px 0px 40px',
+    color: 'rgb(0 0 0)',
+    fontSize: '6em',
+    textAlign: 'center',
+  };
+
+  return {
+    main,
+    proto,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-background/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 MagicBackground extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    return (
+      <div className={this.styles.classNames.main}>
+        {/* <div className={this.styles.classNames.proto}></div> */}
+        {this.props.children}
+      </div>
+    );
+  }
+}

package/widgets/magic-box/styles.js

@@ -0,0 +1,10 @@
+export default function styles() {
+  const magicBox = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  return {
+    magicBox,
+  };
+}

package/widgets/magic-box/widget.js

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