goblin-gadgets 3.2.2 → 3.2.3

package/widgets/widget-doc/widget.js

@@ -1,89 +1,89 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import Container from 'goblin-gadgets/widgets/container/widget';
-import Button from 'goblin-gadgets/widgets/button/widget';
-import WidgetDocMenu from '../widget-doc-menu/widget';
-import WidgetDocProperties from '../widget-doc-properties/widget';
-import WidgetDocPreview from '../widget-doc-preview/widget';
-import widgetList from '../widget-doc/widget-list';
-import * as styles from './styles';
-
-/******************************************************************************/
-
-class WidgetDoc extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-
-    const requiredProps = {};
-    const defaultProps = {};
-
-    for (const widget of widgetList) {
-      const widgetRequiredProps = {};
-      const widgetDefaultProps = {};
-
-      for (const propDef of widget.props) {
-        if (propDef.required) {
-          widgetRequiredProps[propDef.name] = propDef.type.defaultValue;
-          widgetDefaultProps[propDef.name] = propDef.type.defaultValue;
-        }
-      }
-      requiredProps[widget.name] = widgetRequiredProps;
-
-      if (widget.scenarios) {
-        const scenario = widget.scenarios[0];
-        if (scenario) {
-          for (const [propName, propValue] of Object.entries(scenario.props)) {
-            widgetDefaultProps[propName] = propValue;
-          }
-        }
-      }
-      defaultProps[widget.name] = widgetDefaultProps;
-    }
-
-    this.dispatch({type: 'INIT', requiredProps, defaultProps});
-  }
-
-  renderCloseButton() {
-    if (this.props.onClose) {
-      return (
-        <div className={this.styles.classNames.closeButton}>
-          <Button
-            width="50px"
-            height="50px"
-            border="none"
-            glyph="solid/times"
-            glyphSize="200%"
-            onClick={this.props.onClose}
-            tooltip="Close"
-          />
-        </div>
-      );
-    } else {
-      return null;
-    }
-  }
-
-  render() {
-    if (!this.props.ready) {
-      return null;
-    }
-
-    return (
-      <Container kind="views">
-        <WidgetDocMenu widgetId={this.props.widgetId} />
-        <WidgetDocProperties widgetId={this.props.widgetId} />
-        <WidgetDocPreview widgetId={this.props.widgetId} />
-        {this.renderCloseButton()}
-      </Container>
-    );
-  }
-}
-
-/******************************************************************************/
-
-export default Widget.connectWidget((state) => {
-  return {
-    ready: state !== undefined,
-  };
-})(WidgetDoc);
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import Container from 'goblin-gadgets/widgets/container/widget';
+import Button from 'goblin-gadgets/widgets/button/widget';
+import WidgetDocMenu from '../widget-doc-menu/widget';
+import WidgetDocProperties from '../widget-doc-properties/widget';
+import WidgetDocPreview from '../widget-doc-preview/widget';
+import widgetList from '../widget-doc/widget-list';
+import * as styles from './styles';
+
+/******************************************************************************/
+
+class WidgetDoc extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+
+    const requiredProps = {};
+    const defaultProps = {};
+
+    for (const widget of widgetList) {
+      const widgetRequiredProps = {};
+      const widgetDefaultProps = {};
+
+      for (const propDef of widget.props) {
+        if (propDef.required) {
+          widgetRequiredProps[propDef.name] = propDef.type.defaultValue;
+          widgetDefaultProps[propDef.name] = propDef.type.defaultValue;
+        }
+      }
+      requiredProps[widget.name] = widgetRequiredProps;
+
+      if (widget.scenarios) {
+        const scenario = widget.scenarios[0];
+        if (scenario) {
+          for (const [propName, propValue] of Object.entries(scenario.props)) {
+            widgetDefaultProps[propName] = propValue;
+          }
+        }
+      }
+      defaultProps[widget.name] = widgetDefaultProps;
+    }
+
+    this.dispatch({type: 'INIT', requiredProps, defaultProps});
+  }
+
+  renderCloseButton() {
+    if (this.props.onClose) {
+      return (
+        <div className={this.styles.classNames.closeButton}>
+          <Button
+            width="50px"
+            height="50px"
+            border="none"
+            glyph="solid/times"
+            glyphSize="200%"
+            onClick={this.props.onClose}
+            tooltip="Close"
+          />
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    if (!this.props.ready) {
+      return null;
+    }
+
+    return (
+      <Container kind="views">
+        <WidgetDocMenu widgetId={this.props.widgetId} />
+        <WidgetDocProperties widgetId={this.props.widgetId} />
+        <WidgetDocPreview widgetId={this.props.widgetId} />
+        {this.renderCloseButton()}
+      </Container>
+    );
+  }
+}
+
+/******************************************************************************/
+
+export default Widget.connectWidget((state) => {
+  return {
+    ready: state !== undefined,
+  };
+})(WidgetDoc);

package/widgets/widget-doc-menu/styles.js

@@ -1,12 +1,12 @@
-export default function styles() {
-  const container = {
-    display: 'flex',
-    flexDirection: 'column',
-  };
-
-  return {
-    container,
-  };
-}
-
-/******************************************************************************/
+export default function styles() {
+  const container = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  return {
+    container,
+  };
+}
+
+/******************************************************************************/

package/widgets/widget-doc-menu/widget.js

@@ -1,79 +1,79 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import widgetList from '../widget-doc/widget-list';
-import Container from 'goblin-gadgets/widgets/container/widget';
-import Label from 'goblin-gadgets/widgets/label/widget';
-import Button from 'goblin-gadgets/widgets/button/widget';
-import * as styles from './styles';
-
-/******************************************************************************/
-
-function compareStrings(s1, s2) {
-  if (s1 < s2) {
-    return -1;
-  }
-  if (s1 > s2) {
-    return 1;
-  }
-  return 0;
-}
-
-/******************************************************************************/
-
-const WidgetListItem = Widget.connectWidget((state, props) => {
-  return {
-    glyph:
-      props.text === state.get('selectedWidget')
-        ? 'solid/chevron-right'
-        : 'solid/none',
-  };
-})(Button);
-
-/******************************************************************************/
-
-export default class WidgetDocMenu extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-  }
-
-  setSelectedWidget(name) {
-    this.dispatch({type: 'SET_SELECTED_WIDGET', name});
-  }
-
-  renderWidgetListItem(widget) {
-    return (
-      <WidgetListItem
-        widgetId={this.props.widgetId}
-        key={widget.name}
-        text={widget.name}
-        kind="menu-item"
-        glyphPosition="right"
-        justify="between"
-        textTransform="none"
-        onClick={() => this.setSelectedWidget(widget.name)}
-      />
-    );
-  }
-
-  render() {
-    return (
-      <Container
-        kind="view"
-        horizontalSpacing="large"
-        backgroundColor={this.context.theme.palette.footerBackground}
-      >
-        <Container kind="pane-header">
-          <Label text="Widgets" kind="pane-header" />
-        </Container>
-        <Container kind="panes">
-          {widgetList
-            .sort((w1, w2) => compareStrings(w1.name, w2.name))
-            .map((widget) => this.renderWidgetListItem(widget))}
-        </Container>
-      </Container>
-    );
-  }
-}
-
-/******************************************************************************/
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import widgetList from '../widget-doc/widget-list';
+import Container from 'goblin-gadgets/widgets/container/widget';
+import Label from 'goblin-gadgets/widgets/label/widget';
+import Button from 'goblin-gadgets/widgets/button/widget';
+import * as styles from './styles';
+
+/******************************************************************************/
+
+function compareStrings(s1, s2) {
+  if (s1 < s2) {
+    return -1;
+  }
+  if (s1 > s2) {
+    return 1;
+  }
+  return 0;
+}
+
+/******************************************************************************/
+
+const WidgetListItem = Widget.connectWidget((state, props) => {
+  return {
+    glyph:
+      props.text === state.get('selectedWidget')
+        ? 'solid/chevron-right'
+        : 'solid/none',
+  };
+})(Button);
+
+/******************************************************************************/
+
+export default class WidgetDocMenu extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  setSelectedWidget(name) {
+    this.dispatch({type: 'SET_SELECTED_WIDGET', name});
+  }
+
+  renderWidgetListItem(widget) {
+    return (
+      <WidgetListItem
+        widgetId={this.props.widgetId}
+        key={widget.name}
+        text={widget.name}
+        kind="menu-item"
+        glyphPosition="right"
+        justify="between"
+        textTransform="none"
+        onClick={() => this.setSelectedWidget(widget.name)}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <Container
+        kind="view"
+        horizontalSpacing="large"
+        backgroundColor={this.context.theme.palette.footerBackground}
+      >
+        <Container kind="pane-header">
+          <Label text="Widgets" kind="pane-header" />
+        </Container>
+        <Container kind="panes">
+          {widgetList
+            .sort((w1, w2) => compareStrings(w1.name, w2.name))
+            .map((widget) => this.renderWidgetListItem(widget))}
+        </Container>
+      </Container>
+    );
+  }
+}
+
+/******************************************************************************/

package/widgets/widget-doc-preview/parse-code.js

@@ -1,20 +1,20 @@
-module.exports = function parseCode(code) {
-  // Match propName, opening brace for propValue and propValue
-  const regex = /\s+(\w+)=(?:("[^"]*")|{([^}]*)})/g;
-
-  let match;
-  const props = {};
-  while ((match = regex.exec(code)) !== null) {
-    const propName = match[1];
-    let propValue = match[2] || match[3];
-
-    try {
-      propValue = eval(propValue);
-    } catch (ex) {
-      propValue = '...';
-    }
-
-    props[propName] = propValue;
-  }
-  return props;
-};
+module.exports = function parseCode(code) {
+  // Match propName, opening brace for propValue and propValue
+  const regex = /\s+(\w+)=(?:("[^"]*")|{([^}]*)})/g;
+
+  let match;
+  const props = {};
+  while ((match = regex.exec(code)) !== null) {
+    const propName = match[1];
+    let propValue = match[2] || match[3];
+
+    try {
+      propValue = eval(propValue);
+    } catch (ex) {
+      propValue = '...';
+    }
+
+    props[propName] = propValue;
+  }
+  return props;
+};

package/widgets/widget-doc-preview/styles.js

@@ -1,77 +1,77 @@
-import {Unit} from 'goblin-theme';
-
-export default function styles(theme) {
-  const m = theme.shapes.containerMargin;
-  const d = Unit.multiply(m, 0.5);
-
-  const container = {
-    margin: '10px 0px',
-    display: 'flex',
-    flexDirection: 'column',
-  };
-
-  const code = {
-    margin: '5px 0px',
-    whiteSpace: 'normal',
-    userSelect: 'text',
-  };
-
-  const settings = {
-    margin: '10px 0px',
-  };
-
-  const panes = {
-    overflow: 'hidden',
-    padding: `0px ${m}`,
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-  };
-
-  const paneCode = {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    alignItems: 'stretch',
-    marginBottom: m,
-    padding: m,
-    backgroundColor: theme.palette.paneBackground,
-  };
-
-  const paneSettings = {
-    overflowY: 'auto',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    alignItems: 'stretch',
-    marginBottom: m,
-    padding: `${m} ${m} ${d} ${m}`,
-    backgroundColor: theme.palette.paneBackground,
-  };
-
-  const paneSamples = {
-    minHeight: '555px',
-    flexGrow: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    alignItems: 'stretch',
-    marginBottom: m,
-    padding: m,
-    backgroundColor: theme.palette.paneBackground,
-  };
-
-  /******************************************************************************/
-
-  return {
-    container,
-    code,
-    settings,
-    panes,
-    paneCode,
-    paneSettings,
-    paneSamples,
-  };
-}
-
-/******************************************************************************/
+import {Unit} from 'goblin-theme';
+
+export default function styles(theme) {
+  const m = theme.shapes.containerMargin;
+  const d = Unit.multiply(m, 0.5);
+
+  const container = {
+    margin: '10px 0px',
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  const code = {
+    margin: '5px 0px',
+    whiteSpace: 'normal',
+    userSelect: 'text',
+  };
+
+  const settings = {
+    margin: '10px 0px',
+  };
+
+  const panes = {
+    overflow: 'hidden',
+    padding: `0px ${m}`,
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+  };
+
+  const paneCode = {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'stretch',
+    marginBottom: m,
+    padding: m,
+    backgroundColor: theme.palette.paneBackground,
+  };
+
+  const paneSettings = {
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'stretch',
+    marginBottom: m,
+    padding: `${m} ${m} ${d} ${m}`,
+    backgroundColor: theme.palette.paneBackground,
+  };
+
+  const paneSamples = {
+    minHeight: '555px',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'stretch',
+    marginBottom: m,
+    padding: m,
+    backgroundColor: theme.palette.paneBackground,
+  };
+
+  /******************************************************************************/
+
+  return {
+    container,
+    code,
+    settings,
+    panes,
+    paneCode,
+    paneSettings,
+    paneSamples,
+  };
+}
+
+/******************************************************************************/