goblin-gadgets 3.2.2 → 3.2.3

package/widgets/goblin-editor/widget.js

@@ -1,146 +1,146 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import prettier from 'prettier/standalone';
-import babelParser from 'prettier/parser-babel';
-
-class GoblinEditor extends Widget {
-  constructor() {
-    super(...arguments);
-    this.assign = this.assign.bind(this);
-    this.init = this.init.bind(this);
-    this.format = this.format.bind(this);
-    this.setSource = this.setSource.bind(this);
-    this.editorElement = undefined;
-    this.tempSrc = null;
-    this.initDone = false;
-    this.monaco = null;
-  }
-
-  format(source) {
-    let src = source || this.model.getValue();
-    try {
-      src = prettier.format(src, {parser: 'babel', plugins: [babelParser]});
-      this.model.setValue(src);
-    } catch (err) {
-      console.error(err.stack);
-      this.editor.deltaDecorations(
-        [],
-        [
-          {
-            range: new this.monaco.Range(3, 1, 3, 1),
-            options: {
-              isWholeLine: true,
-              className: 'prettierError',
-              glyphMarginClassName: 'prettierError',
-            },
-          },
-        ]
-      );
-    }
-  }
-
-  setSource(src) {
-    if (this.model) {
-      this.format(src);
-    } else {
-      this.tempSrc = src;
-      this.init();
-    }
-  }
-
-  assign(component) {
-    this.editorElement = component;
-  }
-
-  componentDidMount() {
-    import('monaco-editor/esm/vs/editor/editor.api').then((mod) => {
-      this.monaco = mod;
-      this.init();
-    });
-  }
-
-  componentWillUnmount() {
-    this.destroy();
-  }
-
-  componentDidUpdate() {
-    if (!this.init()) {
-      return;
-    }
-    if (!this.model.getValue().length) {
-      this.setSource(this.props.source);
-    }
-  }
-
-  destroy() {
-    this._subscription && this._subscription.dispose();
-    if (this.editor) {
-      const model = this.editor.getModel();
-      if (model) {
-        model.dispose();
-      }
-      this.editor.dispose();
-    }
-  }
-
-  init() {
-    if (this.initDone) {
-      return true;
-    }
-    if (!this.monaco) {
-      return false;
-    }
-
-    const templateSrc = this.props.source;
-
-    /* Init only when a non-empty source is provided (via setSource or via props) */
-    if (!templateSrc && !this.tempSrc) {
-      return false;
-    }
-
-    const model = this.monaco.editor.createModel(templateSrc, 'javascript');
-    this.model = model;
-    this._subscription = model.onDidChangeContent(() => {
-      if (this.props.onUpdate) {
-        const src = model.getValue();
-        this.props.onUpdate(src);
-      }
-    });
-
-    this.editor = this.monaco.editor.create(this.editorElement, {
-      language: 'javascript',
-      lineNumbers: 'on',
-      scrollbar: {
-        vertical: 'auto',
-        horizontal: 'auto',
-      },
-      theme: 'vs',
-      automaticLayout: true,
-    });
-
-    this.editor.setModel(model);
-    if (this.props.onUpdate) {
-      this.props.onUpdate(templateSrc);
-    }
-    this.monaco.editor.setTheme('vs');
-
-    if (this.tempSrc) {
-      this.setSource(this.tempSrc);
-    } else {
-      this.format();
-    }
-
-    this.initDone = true;
-  }
-
-  render() {
-    return (
-      <div
-        id="editor"
-        style={{width: '100%', height: '100%'}}
-        ref={this.assign}
-      />
-    );
-  }
-}
-export default GoblinEditor;
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import prettier from 'prettier/standalone';
+import babelParser from 'prettier/parser-babel';
+
+class GoblinEditor extends Widget {
+  constructor() {
+    super(...arguments);
+    this.assign = this.assign.bind(this);
+    this.init = this.init.bind(this);
+    this.format = this.format.bind(this);
+    this.setSource = this.setSource.bind(this);
+    this.editorElement = undefined;
+    this.tempSrc = null;
+    this.initDone = false;
+    this.monaco = null;
+  }
+
+  format(source) {
+    let src = source || this.model.getValue();
+    try {
+      src = prettier.format(src, {parser: 'babel', plugins: [babelParser]});
+      this.model.setValue(src);
+    } catch (err) {
+      console.error(err.stack);
+      this.editor.deltaDecorations(
+        [],
+        [
+          {
+            range: new this.monaco.Range(3, 1, 3, 1),
+            options: {
+              isWholeLine: true,
+              className: 'prettierError',
+              glyphMarginClassName: 'prettierError',
+            },
+          },
+        ]
+      );
+    }
+  }
+
+  setSource(src) {
+    if (this.model) {
+      this.format(src);
+    } else {
+      this.tempSrc = src;
+      this.init();
+    }
+  }
+
+  assign(component) {
+    this.editorElement = component;
+  }
+
+  componentDidMount() {
+    import('monaco-editor/esm/vs/editor/editor.api').then((mod) => {
+      this.monaco = mod;
+      this.init();
+    });
+  }
+
+  componentWillUnmount() {
+    this.destroy();
+  }
+
+  componentDidUpdate() {
+    if (!this.init()) {
+      return;
+    }
+    if (!this.model.getValue().length) {
+      this.setSource(this.props.source);
+    }
+  }
+
+  destroy() {
+    this._subscription && this._subscription.dispose();
+    if (this.editor) {
+      const model = this.editor.getModel();
+      if (model) {
+        model.dispose();
+      }
+      this.editor.dispose();
+    }
+  }
+
+  init() {
+    if (this.initDone) {
+      return true;
+    }
+    if (!this.monaco) {
+      return false;
+    }
+
+    const templateSrc = this.props.source;
+
+    /* Init only when a non-empty source is provided (via setSource or via props) */
+    if (!templateSrc && !this.tempSrc) {
+      return false;
+    }
+
+    const model = this.monaco.editor.createModel(templateSrc, 'javascript');
+    this.model = model;
+    this._subscription = model.onDidChangeContent(() => {
+      if (this.props.onUpdate) {
+        const src = model.getValue();
+        this.props.onUpdate(src);
+      }
+    });
+
+    this.editor = this.monaco.editor.create(this.editorElement, {
+      language: 'javascript',
+      lineNumbers: 'on',
+      scrollbar: {
+        vertical: 'auto',
+        horizontal: 'auto',
+      },
+      theme: 'vs',
+      automaticLayout: true,
+    });
+
+    this.editor.setModel(model);
+    if (this.props.onUpdate) {
+      this.props.onUpdate(templateSrc);
+    }
+    this.monaco.editor.setTheme('vs');
+
+    if (this.tempSrc) {
+      this.setSource(this.tempSrc);
+    } else {
+      this.format();
+    }
+
+    this.initDone = true;
+  }
+
+  render() {
+    return (
+      <div
+        id="editor"
+        style={{width: '100%', height: '100%'}}
+        ref={this.assign}
+      />
+    );
+  }
+}
+export default GoblinEditor;

package/widgets/guild-entry/props.js

@@ -1,53 +1,53 @@
-import {types} from 'goblin-gadgets/types/types.js';
-
-export default [
-  // Aspect.
-  {
-    name: 'appName',
-    group: 'aspect',
-    type: types.string,
-  },
-  {
-    name: 'guildMaster',
-    group: 'aspect',
-    type: types.string,
-  },
-  {
-    name: 'status',
-    group: 'aspect',
-    type: types.enum(['locked', 'ok']),
-  },
-
-  // Layout.
-  {
-    name: 'width',
-    group: 'layout',
-    type: types.pixel,
-    min: 0,
-    max: 1000,
-  },
-  {
-    name: 'height',
-    group: 'layout',
-    type: types.pixel,
-    min: 0,
-    max: 1000,
-  },
-  {
-    name: 'grow',
-    group: 'layout',
-    type: types.grow,
-  },
-
-  // Function.
-  {
-    name: 'onEditProfile',
-    group: 'function',
-    type: types.function,
-  },
-  {
-    name: 'onEnter',
-    group: 'function',
-    type: types.function,
-  },
-];
+import {types} from 'goblin-gadgets/types/types.js';
+
+export default [
+  // Aspect.
+  {
+    name: 'appName',
+    group: 'aspect',
+    type: types.string,
+  },
+  {
+    name: 'guildMaster',
+    group: 'aspect',
+    type: types.string,
+  },
+  {
+    name: 'status',
+    group: 'aspect',
+    type: types.enum(['locked', 'ok']),
+  },
+
+  // Layout.
+  {
+    name: 'width',
+    group: 'layout',
+    type: types.pixel,
+    min: 0,
+    max: 1000,
+  },
+  {
+    name: 'height',
+    group: 'layout',
+    type: types.pixel,
+    min: 0,
+    max: 1000,
+  },
+  {
+    name: 'grow',
+    group: 'layout',
+    type: types.grow,
+  },
+
+  // Function.
+  {
+    name: 'onEditProfile',
+    group: 'function',
+    type: types.function,
+  },
+  {
+    name: 'onEnter',
+    group: 'function',
+    type: types.function,
+  },
+];

package/widgets/guild-entry/scenarios.js

@@ -1,26 +1,26 @@
-export default [
-  {
-    name: 'locked',
-    props: {
-      width: '800px',
-      height: '600px',
-      status: 'locked',
-      appName: 'Crésus NG',
-      guildMaster: 'Jean-Pierre',
-    },
-  },
-  {
-    name: 'ok',
-    props: {
-      width: '800px',
-      height: '600px',
-      status: 'ok',
-      appName: 'Crésus NG',
-      guildMaster: 'Jean-Pierre',
-    },
-  },
-  {
-    name: 'empty',
-    props: {},
-  },
-];
+export default [
+  {
+    name: 'locked',
+    props: {
+      width: '800px',
+      height: '600px',
+      status: 'locked',
+      appName: 'Crésus NG',
+      guildMaster: 'Jean-Pierre',
+    },
+  },
+  {
+    name: 'ok',
+    props: {
+      width: '800px',
+      height: '600px',
+      status: 'ok',
+      appName: 'Crésus NG',
+      guildMaster: 'Jean-Pierre',
+    },
+  },
+  {
+    name: 'empty',
+    props: {},
+  },
+];

package/widgets/guild-entry/styles.js

@@ -1,98 +1,98 @@
-import {ColorManipulator} from 'goblin-theme';
-import {ColorHelpers} from 'goblin-theme';
-
-/******************************************************************************/
-
-export const propNames = ['width', 'height', 'grow', 'status'];
-
-export default function styles(theme, props) {
-  const {width, height, grow, status} = props;
-
-  const locked = status === 'locked';
-
-  const cornerColor = locked
-    ? ColorManipulator.darken(theme.palette.base, 0.8)
-    : ColorManipulator.lighten(theme.palette.base, 0.2);
-
-  const centerColor = locked
-    ? ColorManipulator.darken(theme.palette.base, 0.2)
-    : ColorManipulator.lighten(theme.palette.base, 0.4);
-
-  const guildEntry = {
-    width: width,
-    height: height,
-    flexGrow: grow,
-    justifyContent: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    background: `radial-gradient(at 50% 50%, ${centerColor}, ${cornerColor} 88%)`,
-    transition: 'all 2s ease-out',
-  };
-
-  const header = {
-    width: '100%',
-    height: '50px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    textAlign: 'center',
-    background: '#000',
-    color: '#ccc',
-  };
-
-  const content = {
-    flexGrow: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-  };
-
-  const title = {
-    margin: '0px 15% 20px 15%',
-    display: 'flex',
-    flexDirection: 'row',
-    color: '#fff',
-    textAlign: 'center',
-  };
-
-  const leds = {
-    margin: '50px 0px 0px 0px',
-    justifyContent: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    transform: 'scale(1.5)',
-  };
-
-  const footer = {
-    width: '100%',
-    height: '150px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-  };
-
-  const buttons = {
-    flexGrow: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    transform: 'scale(1.5)',
-  };
-
-  /******************************************************************************/
-
-  return {
-    guildEntry,
-    header,
-    content,
-    title,
-    leds,
-    footer,
-    buttons,
-  };
-}
-
-/******************************************************************************/
+import {ColorManipulator} from 'goblin-theme';
+import {ColorHelpers} from 'goblin-theme';
+
+/******************************************************************************/
+
+export const propNames = ['width', 'height', 'grow', 'status'];
+
+export default function styles(theme, props) {
+  const {width, height, grow, status} = props;
+
+  const locked = status === 'locked';
+
+  const cornerColor = locked
+    ? ColorManipulator.darken(theme.palette.base, 0.8)
+    : ColorManipulator.lighten(theme.palette.base, 0.2);
+
+  const centerColor = locked
+    ? ColorManipulator.darken(theme.palette.base, 0.2)
+    : ColorManipulator.lighten(theme.palette.base, 0.4);
+
+  const guildEntry = {
+    width: width,
+    height: height,
+    flexGrow: grow,
+    justifyContent: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    background: `radial-gradient(at 50% 50%, ${centerColor}, ${cornerColor} 88%)`,
+    transition: 'all 2s ease-out',
+  };
+
+  const header = {
+    width: '100%',
+    height: '50px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    textAlign: 'center',
+    background: '#000',
+    color: '#ccc',
+  };
+
+  const content = {
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  };
+
+  const title = {
+    margin: '0px 15% 20px 15%',
+    display: 'flex',
+    flexDirection: 'row',
+    color: '#fff',
+    textAlign: 'center',
+  };
+
+  const leds = {
+    margin: '50px 0px 0px 0px',
+    justifyContent: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    transform: 'scale(1.5)',
+  };
+
+  const footer = {
+    width: '100%',
+    height: '150px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+  };
+
+  const buttons = {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    transform: 'scale(1.5)',
+  };
+
+  /******************************************************************************/
+
+  return {
+    guildEntry,
+    header,
+    content,
+    title,
+    leds,
+    footer,
+    buttons,
+  };
+}
+
+/******************************************************************************/