storybook-addon-i18next - npm Package Compare versions

Comparing version 0.1.2 to 1.0.0

manager.js

@@ -8,6 +8,7 @@ 'use strict';
 var React = _interopDefault(require('react'));
-var addons = _interopDefault(require('@storybook/addons'));
+var addons = require('@storybook/addons');
+var addons__default = _interopDefault(addons);
 var PropTypes = _interopDefault(require('prop-types'));
-var styled = _interopDefault(require('@emotion/styled'));
 var components = require('@storybook/components');
+var coreEvents = require('@storybook/core-events');
 
@@ -122,41 +123,38 @@ function _classCallCheck(instance, Constructor) {
 var ADDON_ID = 'i18next';
-var PANEL_ID = "".concat(ADDON_ID, "/addon-panel");
 var LANGUAGE_CHANGED_EVENT_ID = 'addon:i18next:languageChanged';
 var CONFIGURE_EVENT_ID = 'addon:i18next:configure';
 
-var Container = styled.div({
-  padding: 15,
-  width: '100%',
-  boxSizing: 'border-box',
-  height: '100%',
-  overflow: 'auto'
-});
-Container.displayName = 'Container';
-
-var Panel =
+var I18NextTool =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits(Panel, _React$Component);
+  _inherits(I18NextTool, _React$Component);
 
-  function Panel(props, context) {
+  function I18NextTool(props) {
     var _this;
 
-    _classCallCheck(this, Panel);
+    _classCallCheck(this, I18NextTool);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Panel).call(this, props, context));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(I18NextTool).call(this, props));
     _this.state = {
+      isTooltipExpanded: false,
       language: null,
       languages: null
     };
-    _this.configure = _this.configure.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    _this.emitLanguageChanged = _this.emitLanguageChanged.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    _this.handleLanguageSelect = _this.handleLanguageSelect.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.configure = _this.configure.bind(_assertThisInitialized(_this));
+    _this.emitLanguageChanged = _this.emitLanguageChanged.bind(_assertThisInitialized(_this));
+    _this.handleLanguageClick = _this.handleLanguageClick.bind(_assertThisInitialized(_this));
+
+    _this.listener = function () {
+      var api = _this.props.api;
+      api.on(CONFIGURE_EVENT_ID, _this.configure);
+    };
+
     return _this;
   }
 
-  _createClass(Panel, [{
+  _createClass(I18NextTool, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var channel = this.props.channel;
-      channel.on(CONFIGURE_EVENT_ID, this.configure);
+      var api = this.props.api;
+      api.on(coreEvents.SET_STORIES, this.listener);
     }
@@ -166,4 +164,4 @@ }, {
     value: function componentWillUnmount() {
-      var channel = this.props.channel;
-      channel.removeListener(CONFIGURE_EVENT_ID, this.configure);
+      var api = this.props.api;
+      api.off(coreEvents.SET_STORIES, this.listener);
     }
@@ -184,21 +182,20 @@ }, {
     value: function emitLanguageChanged() {
-      var channel = this.props.channel;
+      var api = this.props.api;
       var language = this.state.language;
-      channel.emit(LANGUAGE_CHANGED_EVENT_ID, language);
+      api.emit(LANGUAGE_CHANGED_EVENT_ID, language);
     }
   }, {
-    key: "handleLanguageSelect",
-    value: function handleLanguageSelect(event) {
+    key: "handleLanguageClick",
+    value: function handleLanguageClick(event) {
       var _this2 = this;
 
-      var language = event.target.value;
-      var prevLang = this.state.language;
-
-      if (prevLang !== language) {
-        this.setState({
-          language: language
-        }, function () {
-          _this2.emitLanguageChanged();
-        });
-      }
+      var _event$currentTarget$ = event.currentTarget.dataset;
+      _event$currentTarget$ = _event$currentTarget$ === void 0 ? {} : _event$currentTarget$;
+      var value = _event$currentTarget$.value;
+      this.setState({
+        isTooltipExpanded: false,
+        language: value
+      }, function () {
+        _this2.emitLanguageChanged();
+      });
     }
@@ -208,13 +205,8 @@ }, {
     value: function render() {
-      var active = this.props.active;
+      var _this3 = this;
+
       var _this$state = this.state,
-          language = _this$state.language,
+          isTooltipExpanded = _this$state.isTooltipExpanded,
           languages = _this$state.languages;
-      return active ? React.createElement(Container, null, React.createElement(components.Field, {
-        label: "Language"
-      }, React.createElement(components.Select, {
-        size: "flex",
-        value: language || '',
-        onChange: this.handleLanguageSelect
-      }, languages ? Object.entries(languages).map(function (_ref) {
+      var items = Object.entries(languages || {}).map(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
@@ -224,22 +216,38 @@ key = _ref2[0],
 
-        return React.createElement("option", {
-          key: key,
-          value: key
-        }, name);
-      }) : React.createElement("option", {
-        value: "",
-        disabled: true
-      }, "(No Languages)")))) : null;
+        return {
+          id: key,
+          title: name,
+          onClick: _this3.handleLanguageClick,
+          'data-value': key
+        };
+      });
+      return React.createElement(components.WithTooltip, {
+        placement: "top",
+        trigger: "click",
+        tooltipShown: isTooltipExpanded,
+        onVisibilityChange: function onVisibilityChange(t) {
+          return _this3.setState({
+            isTooltipExpanded: t
+          });
+        },
+        tooltip: React.createElement(components.TooltipLinkList, {
+          links: items
+        }),
+        closeOnClick: true
+      }, React.createElement(components.IconButton, {
+        key: "i18next",
+        title: "Change the language"
+      }, React.createElement(components.Icons, {
+        icon: "globe"
+      })));
     }
   }]);
 
-  return Panel;
+  return I18NextTool;
 }(React.Component);
 
-Panel.propTypes = {
-  active: PropTypes.bool.isRequired,
-  channel: PropTypes.shape({
+I18NextTool.propTypes = {
+  api: PropTypes.shape({
     on: PropTypes.func,
-    emit: PropTypes.func,
-    removeListener: PropTypes.func
+    off: PropTypes.func
   }).isRequired
@@ -250,23 +258,20 @@ };
 
-var addChannel = function addChannel(api) {
-  var channel = addons.getChannel();
-  addons.addPanel(PANEL_ID, {
-    title: 'i18next',
-    // eslint-disable-next-line react/prop-types
-    render: function render(_ref) {
-      var active = _ref.active;
-      return React.createElement(Panel, {
-        active: active,
-        channel: channel,
-        api: api
-      });
-    }
+var register = function register() {
+  addons__default.register(ADDON_ID, function (api) {
+    addons__default.add(ADDON_ID, {
+      title: 'i18next / languages',
+      type: addons.types.TOOL,
+      match: function match(_ref) {
+        var viewMode = _ref.viewMode;
+        return viewMode === 'story';
+      },
+      render: function render() {
+        return React.createElement(I18NextTool, {
+          api: api
+        });
+      }
+    });
   });
 };
 
-var init = function init() {
-  addons.register(ADDON_ID, addChannel);
-};
-
-exports.init = init;
-exports.addChannel = addChannel;
+exports.register = register;

package.json

 {
   "name": "storybook-addon-i18next",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "description": "React Storybook addon for i18next",
@@ -32,23 +32,28 @@ "keywords": [
   "dependencies": {
-    "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "^4.1.7",
-    "@storybook/components": "^4.1.7",
-    "prop-types": "^15.6.2",
-    "react-i18next": "^9.0.4"
+    "@emotion/styled": "^10.0.7",
+    "@storybook/addons": "^5.0.0",
+    "@storybook/components": "^5.0.0",
+    "@storybook/core-events": "^5.0.0",
+    "@storybook/theming": "^5.0.0",
+    "prop-types": "^15.7.2",
+    "react-i18next": "^9.0.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.3",
+    "@babel/core": "^7.3.4",
+    "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.12.1",
+    "eslint": "^5.15.1",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
-    "rollup": "^1.1.0",
-    "rollup-plugin-babel": "^4.3.1",
-    "rollup-plugin-commonjs": "^9.2.0",
+    "prettier": "^1.16.4",
+    "rollup": "^1.4.1",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.2.1",
     "rollup-plugin-eslint": "^5.0.0",
-    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-node-resolve": "^4.0.1",
     "shx": "^0.3.2"
@@ -55,0 +60,0 @@ },

preview.js

@@ -96,3 +96,3 @@ 'use strict';
     _this = _possibleConstructorReturn(this, _getPrototypeOf(Wrapper).call(this, props, context));
-    _this.changeLanguage = _this.changeLanguage.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.changeLanguage = _this.changeLanguage.bind(_assertThisInitialized(_this));
     return _this;
@@ -99,0 +99,0 @@ }

register.js

@@ -1,5 +0,1 @@
-// NOTE: loading addons using this file is deprecated!
-// please use manager.js and preview.js files instead
-const manager = require('./manager');
-
-manager.init();
+require('./manager').register();

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

20300

decreased by-0.02%

Dependency count

8

increased by33.33%

Dev dependency count

18

increased by20%

Lines of code

517

decreased by-4.08%

Dependency changes

• + Added@storybook/core-events@^5.0.0

• + Added@storybook/theming@^5.0.0

• + Added@babel/code-frame@7.24.2(transitive)

• + Added@babel/helper-module-imports@7.24.3(transitive)

• + Added@babel/helper-string-parser@7.24.1(transitive)

• + Added@babel/helper-validator-identifier@7.24.5(transitive)

• + Added@babel/highlight@7.24.5(transitive)

• + Added@babel/types@7.24.5(transitive)

• + Added@emotion/cache@10.0.29(transitive)

• + Added@emotion/core@10.3.1(transitive)

• + Added@emotion/css@10.0.27(transitive)

• + Added@emotion/hash@0.8.0(transitive)

• + Added@emotion/is-prop-valid@0.8.8(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/serialize@0.11.16(transitive)

• + Added@emotion/sheet@0.9.4(transitive)

• + Added@emotion/styled@10.3.0(transitive)

• + Added@emotion/styled-base@10.3.0(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@emotion/utils@0.11.3(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• + Added@hypnosphi/create-react-context@0.3.1(transitive)

• + Added@reach/router@1.3.4(transitive)

• + Added@storybook/addons@5.3.22(transitive)

• + Added@storybook/api@5.3.22(transitive)

• + Added@storybook/channels@5.3.22(transitive)

• + Added@storybook/client-logger@5.3.22(transitive)

• + Added@storybook/components@5.3.22(transitive)

• + Added@storybook/core-events@5.3.22(transitive)

• + Added@storybook/csf@0.0.1(transitive)

• + Added@storybook/router@5.3.22(transitive)

• + Added@storybook/theming@5.3.22(transitive)

• + Added@types/is-function@1.0.3(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Added@types/prop-types@15.7.12(transitive)

• + Added@types/reach__router@1.3.15(transitive)

• + Added@types/react@18.3.2(transitive)

• + Added@types/react-syntax-highlighter@11.0.4(transitive)

• + Added@types/react-textarea-autosize@4.3.6(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbabel-plugin-emotion@10.2.2(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcall-bind@1.0.7(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedcan-use-dom@0.1.0(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcharacter-entities@1.2.4(transitive)

• + Addedcharacter-entities-legacy@1.1.4(transitive)

• + Addedcharacter-reference-invalid@1.1.4(transitive)

• + Addedclipboard@2.0.11(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedcomma-separated-tokens@1.0.8(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcore-js@3.37.1(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-react-context@0.3.0(transitive)

• + Addedcsstype@2.6.213.1.3(transitive)

• + Addeddeep-equal@1.1.2(transitive)

• + Addeddeep-object-diff@1.1.9(transitive)

• + Addeddefine-data-property@1.1.4(transitive)

• + Addeddefine-properties@1.2.1(transitive)

• + Addeddelegate@3.2.0(transitive)

• + Addeddetect-node-es@1.1.0(transitive)

• + Addedemotion-theming@10.3.0(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedes-define-property@1.0.0(transitive)

• + Addedes-errors@1.3.0(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfast-deep-equal@2.0.1(transitive)

• + Addedfault@1.0.4(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfocus-lock@1.3.5(transitive)

• + Addedformat@0.2.2(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedfunctions-have-names@1.2.3(transitive)

• + Addedget-intrinsic@1.2.4(transitive)

• + Addedgood-listener@1.2.2(transitive)

• + Addedgopd@1.0.1(transitive)

• + Addedgud@1.0.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhas-property-descriptors@1.0.2(transitive)

• + Addedhas-proto@1.0.3(transitive)

• + Addedhas-symbols@1.0.3(transitive)

• + Addedhas-tostringtag@1.0.2(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedhast-util-parse-selector@2.2.5(transitive)

• + Addedhastscript@5.1.2(transitive)

• + Addedhighlight.js@9.13.19.18.5(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedinvariant@2.2.4(transitive)

• + Addedis-alphabetical@1.0.4(transitive)

• + Addedis-alphanumerical@1.0.4(transitive)

• + Addedis-arguments@1.1.1(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.13.1(transitive)

• + Addedis-date-object@1.0.5(transitive)

• + Addedis-decimal@1.0.4(transitive)

• + Addedis-function@1.0.2(transitive)

• + Addedis-hexadecimal@1.0.4(transitive)

• + Addedis-regex@1.1.4(transitive)

• + Addedis-symbol@1.0.4(transitive)

• + Addedisobject@4.0.0(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedlodash.debounce@4.0.8(transitive)

• + Addedlodash.memoize@4.1.2(transitive)

• + Addedlodash.throttle@4.1.1(transitive)

• + Addedlowlight@1.11.0(transitive)

• + Addedmap-or-similar@1.5.0(transitive)

• + Addedmarkdown-to-jsx@6.11.4(transitive)

• + Addedmemoizerific@1.11.3(transitive)

• + Addedobject-inspect@1.13.1(transitive)

• + Addedobject-is@1.1.6(transitive)

• + Addedobject-keys@1.1.1(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-entities@1.2.2(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.0.1(transitive)

• + Addedpolished@3.7.2(transitive)

• + Addedpopper.js@1.16.1(transitive)

• + Addedprismjs@1.17.11.29.0(transitive)

• + Addedproperty-information@5.6.0(transitive)

• + Addedqs@6.12.1(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-clientside-effect@1.2.6(transitive)

• + Addedreact-fast-compare@3.2.2(transitive)

• + Addedreact-focus-lock@2.12.1(transitive)

• + Addedreact-helmet-async@1.3.0(transitive)

• + Addedreact-popper@1.3.11(transitive)

• + Addedreact-popper-tooltip@2.11.1(transitive)

• + Addedreact-syntax-highlighter@11.0.3(transitive)

• + Addedrefractor@2.10.1(transitive)

• + Addedregexp.prototype.flags@1.5.2(transitive)

• + Addedresize-observer-polyfill@1.5.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.05.0.0(transitive)

• + Addedselect@1.1.2(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedset-function-length@1.2.2(transitive)

• + Addedset-function-name@2.0.2(transitive)

• + Addedshallow-equal@1.2.1(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedside-channel@1.0.6(transitive)

• + Addedsimplebar@4.2.3(transitive)

• + Addedsimplebar-react@1.2.3(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedspace-separated-tokens@1.1.5(transitive)

• + Addedstore2@2.14.3(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedtelejson@3.3.0(transitive)

• + Addedtiny-emitter@2.1.0(transitive)

• + Addedto-fast-properties@2.0.0(transitive)

• + Addedts-dedent@1.2.0(transitive)

• + Addedtslib@2.6.2(transitive)

• + Addedtyped-styles@0.0.7(transitive)

• + Addedunquote@1.1.1(transitive)

• + Addeduse-callback-ref@1.3.2(transitive)

• + Addeduse-sidecar@1.1.2(transitive)

• + Addedwarning@4.0.3(transitive)

• + Addedxtend@4.0.2(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removed@emotion/cache@0.8.8(transitive)

• - Removed@emotion/core@0.13.1(transitive)

• - Removed@emotion/css@0.9.8(transitive)

• - Removed@emotion/hash@0.6.6(transitive)

• - Removed@emotion/is-prop-valid@0.6.8(transitive)

• - Removed@emotion/memoize@0.6.6(transitive)

• - Removed@emotion/provider@0.11.2(transitive)

• - Removed@emotion/serialize@0.9.1(transitive)

• - Removed@emotion/sheet@0.8.1(transitive)

• - Removed@emotion/styled@0.10.6(transitive)

• - Removed@emotion/styled-base@0.10.6(transitive)

• - Removed@emotion/stylis@0.7.1(transitive)

• - Removed@emotion/unitless@0.6.7(transitive)

• - Removed@emotion/utils@0.8.2(transitive)

• - Removed@emotion/weak-memoize@0.1.3(transitive)

• - Removed@storybook/addons@4.1.18(transitive)

• - Removed@storybook/channels@4.1.18(transitive)

• - Removed@storybook/components@4.1.18(transitive)

• - Removedbabel-runtime@6.26.0(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removedis-dom@1.1.0(transitive)

• - Removedis-object@1.0.2(transitive)

• - Removedis-window@1.0.2(transitive)

• - Removedreact-inspector@2.3.1(transitive)

• - Removedreact-split-pane@0.1.92(transitive)

• - Removedreact-style-proptype@3.2.2(transitive)

• - Removedregenerator-runtime@0.11.1(transitive)

• - Removedrender-fragment@0.1.1(transitive)

• Updated@emotion/styled@^10.0.7

• Updated@storybook/addons@^5.0.0

• Updated@storybook/components@^5.0.0

• Updatedprop-types@^15.7.2

• Updatedreact-i18next@^9.0.10