Added actions and accessibility addons

2025-12-13 07:45:56 +00:00 · 2019-06-25 15:40:09 +02:00 · 2019-06-25 15:40:09 +02:00 · 2b80c12e91
commit 2b80c12e91
parent fb9a8605a9
9 changed files with 438 additions and 13 deletions
--- a/webapp/.storybook/addons.js
+++ b/webapp/.storybook/addons.js
@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-a11y/register'
+// import '@storybook/addon-links/register'
--- a/webapp/.storybook/config.js
+++ b/webapp/.storybook/config.js
@ -1,8 +1,24 @@
 import { configure } from '@storybook/vue'
 import Vue from 'vue'
 import Vuex from 'vuex'
+import { action } from '@storybook/addon-actions'

 Vue.use(Vuex)
+Vue.component('nuxt-link', {
+  props: ['to'],
+  methods: {
+    log() {
+      action('link clicked')(this.to)
+    },
+  },
+  template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>',
+})
+Vue.component('no-ssr', {
+  template: '<div><slot>No SSR</slot></div>',
+})
+Vue.component('v-popover', {
+  template: '<div style="display: none">Popover Content</div>',
+})

 // Automatically import all files ending in *.stories.js
 const req = require.context('../stories', true, /.story.js$/)
--- a/webapp/.storybook/webpack.config.js
+++ b/webapp/.storybook/webpack.config.js
@ -13,9 +13,9 @@ module.exports = async ({ config, mode }) => {
  config.module.rules.push({
    test: /\.scss$/,
    use: [
-      'style-loader',
-      'css-loader',
-      'sass-loader',
+      { loader: 'style-loader' },
+      { loader: 'css-loader', options: { sourceMap: true } },
+      { loader: 'sass-loader', options: { sourceMap: true } },
      {
        loader: 'style-resources-loader',
        options: {
@ -24,6 +24,7 @@ module.exports = async ({ config, mode }) => {
              __dirname,
              '../node_modules/@human-connection/styleguide/dist/shared.scss',
            ),
+            path.resolve(__dirname, '../assets/styles/main.scss'),
          ],
          injector: 'prepend',
        },
@ -34,7 +35,6 @@ module.exports = async ({ config, mode }) => {

  config.resolve.alias = {
    ...config.resolve.alias,
-    '@': path.dirname(path.resolve(__dirname)),
    '~~': path.resolve(__dirname, rootDir),
    '~': path.resolve(__dirname, srcDir),
  }
--- a/webapp/package.json
+++ b/webapp/package.json
@ -84,6 +84,8 @@
    "@babel/core": "~7.4.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "~7.4.5",
+    "@storybook/addon-a11y": "^5.1.9",
+    "@storybook/addon-actions": "^5.1.9",
    "@storybook/vue": "~5.1.9",
    "@vue/cli-shared-utils": "~3.8.0",
    "@vue/eslint-config-prettier": "~4.0.1",
@ -94,6 +96,7 @@
    "babel-jest": "~24.8.0",
    "babel-loader": "~8.0.6",
    "babel-preset-vue": "~2.0.2",
+    "css-loader": "~3.0.0",
    "eslint": "~5.16.0",
    "eslint-config-prettier": "~5.0.0",
    "eslint-config-standard": "~12.0.0",
@ -111,6 +114,7 @@
    "nodemon": "~1.19.1",
    "prettier": "~1.18.2",
    "sass-loader": "~7.1.0",
+    "style-loader": "~0.23.1",
    "style-resources-loader": "~1.2.1",
    "tippy.js": "^4.3.4",
    "vue-jest": "~3.0.4",
--- a/webapp/stories/editor.story.js
+++ b/webapp/stories/editor.story.js
@ -1,12 +1,111 @@
 import { storiesOf } from '@storybook/vue'
-import HcEditor from '~/components/Editor/index.vue'
+import { withA11y } from '@storybook/addon-a11y'
+import HcEditor from '~/components/Editor'
+import helpers from './helpers'
+
+helpers.init()
+
+const users = [{ id: 1, slug: 'peter' }, { id: 1, slug: 'sandra' }, { id: 1, slug: 'jane' }]

 storiesOf('Editor', module)
+  .addDecorator(withA11y)
+  .addDecorator(storyFn => {
+    const ctx = storyFn()
+    return {
+      components: { ctx },
+      template: `
+        <ds-card style="width: 50%; min-width: 500px; margin: 0 auto;">
+          <ctx />
+        </ds-card>
+      `,
+    }
+  })
+  .addDecorator(helpers.layout)
  .add('Empty', () => ({
    components: { HcEditor },
-    template: `<hc-editor value="" />`,
+    store: helpers.store,
+    data: () => ({
+      users,
+    }),
+    template: `<hc-editor :users="users" />`,
  }))
-  .add('Hello World', () => ({
+  .add('Basic formatting', () => ({
    components: { HcEditor },
-    template: `<hc-editor value="Empty" />`,
+    store: helpers.store,
+    data: () => ({
+      users,
+      content: `
+        <h3>Basic formatting</h3>
+        <p>
+          Here is some <em>italic</em>, <b>bold</b> and <u>underline</u> text.
+          <br/>
+          Also do we have some <a href="https://human-connection.org">inline links</a> here.
+        </p>
+        <h3>Heading 3</h3>
+        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+        <h4>Heading 4</h4>
+        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+        <h5>Heading 5</h5>
+        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+        
+        <h3>Unordered List</h3>
+        <ul>
+          <li><p>Also some list</p></li>
+          <li><p>with</p></li>
+          <li><p>several</p></li>
+          <li><p>points</p></li>
+        </ul>
+        
+        <h3>Ordered List</h3>
+        <ol>
+          <li><p>justo</p></li>
+          <li><p>dolores</p></li>
+          <li><p>et ea rebum</p></li>
+          <li><p>kasd gubergren</p></li>
+        </ol>
+      `,
+    }),
+    template: `<hc-editor :users="users" :value="content" />`,
+  }))
+  .add('@Mentions', () => ({
+    components: { HcEditor },
+    store: helpers.store,
+    data: () => ({
+      users,
+      content: `
+        <p>
+          Here you can mention people like 
+          <a class="mention" href="/profile/1" target="_blank" contenteditable="false">@sandra</a> and others.
+          Try it out!
+        </p>
+      `,
+    }),
+    template: `<hc-editor :users="users" :value="content" />`,
+  }))
+  .add('#Hashtags', () => ({
+    components: { HcEditor },
+    store: helpers.store,
+    data: () => ({
+      users,
+      content: `
+        <p>
+          This text contains <a href="#" class="hashtag">#hashtags</a> for projects like <a href="https://human-connection.org" class="hashtag">#human-connection</a>
+          Try to add more by typing #.
+        </p>
+      `,
+    }),
+    template: `<hc-editor :users="users" :value="content" />`,
+  }))
+  .add('Embeds', () => ({
+    components: { HcEditor },
+    store: helpers.store,
+    data: () => ({
+      users,
+      content: `
+        <p>The following link should be rendered with metainformation for its destination such as: Title, Description, Image, Pagename and Favicon.</p>
+        <a class="embed" href="https://human-connection.org">Human Connection</a>
+        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+      `,
+    }),
+    template: `<hc-editor :users="users" :value="content" />`,
  }))
--- a/webapp/stories/helpers.js
+++ b/webapp/stories/helpers.js
@ -0,0 +1,54 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'
+import Styleguide from '@human-connection/styleguide'
+import Filters from '~/plugins/vue-filters'
+import layout from './layout.vue'
+
+const helpers = {
+  init() {
+    Vue.use(Vuex)
+    Vue.use(Styleguide)
+    Vue.use(Filters)
+
+    Vue.use(vuexI18n.plugin, helpers.store)
+    Vue.i18n.add('en', require('~/locales/en.json'))
+    Vue.i18n.add('de', require('~/locales/de.json'))
+    Vue.i18n.set('en')
+    Vue.i18n.fallback('en')
+  },
+  store: new Vuex.Store({
+    modules: {
+      auth: {
+        namespaced: true,
+        getters: {
+          user(state) {
+            return { id: 1, name: 'admin' }
+          },
+        },
+      },
+      editor: {
+        namespaced: true,
+        getters: {
+          placeholder(state) {
+            return 'Leave your inspirational thoughts...'
+          },
+        },
+      },
+    },
+  }),
+  layout(storyFn) {
+    const ctx = storyFn()
+    return {
+      components: { ctx, layout },
+      template: `
+      <layout>
+        <ds-flex>
+          <ctx />
+        </ds-flex>
+      </layout>`,
+    }
+  },
+}
+
+export default helpers
--- a/webapp/stories/layout.vue
+++ b/webapp/stories/layout.vue
@ -0,0 +1,14 @@
+<template>
+  <ds-container class="container">
+    <slot />
+  </ds-container>
+</template>
+
+<style lang="scss">
+@import '../node_modules/@human-connection/styleguide/dist/system.css';
+@import '~/assets/styles/main.scss';
+
+.container {
+  padding: 5rem;
+}
+</style>
--- a/webapp/stories/post-card.story.js
+++ b/webapp/stories/post-card.story.js
@ -0,0 +1,61 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import HcPostCard from '~/components/PostCard'
+import helpers from './helpers'
+
+helpers.init()
+
+const post = {
+  id: 'd23a4265-f5f7-4e17-9f86-85f714b4b9f8',
+  title: 'Very nice Post Title',
+  contentExcerpt: '<p>My post content</p>',
+  createdAt: '2019-06-24T22:08:59.304Z',
+  disabled: false,
+  deleted: false,
+  slug: 'very-nice-post-title',
+  image: null,
+  author: {
+    id: 'u3',
+    avatar: '/uploads/1561386235196-Fleckenzwerg-Sabberlatzchen',
+    slug: 'jenny-rostock',
+    name: 'Rainer Unsinn',
+    disabled: false,
+    deleted: false,
+    contributionsCount: 25,
+    shoutedCount: 5,
+    commentsCount: 39,
+    followedByCount: 2,
+    followedByCurrentUser: true,
+    location: null,
+    badges: [
+      {
+        id: 'b4',
+        key: 'indiegogo_en_bear',
+        icon: '/img/badges/indiegogo_en_bear.svg',
+        __typename: 'Badge',
+      },
+    ],
+    __typename: 'User',
+  },
+  commentsCount: 12,
+  categories: [],
+  shoutedCount: 421,
+  __typename: 'Post',
+}
+
+storiesOf('Post Card', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('Simple', () => ({
+    components: { HcPostCard },
+    store: helpers.store,
+    data: () => ({
+      post,
+    }),
+    template: `
+      <hc-post-card
+        :post="post"
+        :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
+      />
+    `,
+  }))
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@ -1377,6 +1377,49 @@
    react-lifecycles-compat "^3.0.4"
    warning "^3.0.0"

+"@storybook/addon-a11y@^5.1.9":
+  version "5.1.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-5.1.9.tgz#3feea3f49680f6c311cefd1838b82721d59f397e"
+  integrity sha512-5u90lEpJtO1W8unwNy5fKTKQG7Sbe3IZJpiC6rf1MdGk0avSwoxDyblt0NImPDBHTh4LeUcuCn57D7AVNLUplg==
+  dependencies:
+    "@storybook/addons" "5.1.9"
+    "@storybook/api" "5.1.9"
+    "@storybook/client-logger" "5.1.9"
+    "@storybook/components" "5.1.9"
+    "@storybook/core-events" "5.1.9"
+    "@storybook/theming" "5.1.9"
+    axe-core "^3.2.2"
+    common-tags "^1.8.0"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    hoist-non-react-statics "^3.3.0"
+    memoizerific "^1.11.3"
+    react "^16.8.3"
+    react-redux "^7.0.2"
+    react-sizeme "^2.5.2"
+    redux "^4.0.1"
+    util-deprecate "^1.0.2"
+
+"@storybook/addon-actions@^5.1.9":
+  version "5.1.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-5.1.9.tgz#a515b62b109cb886ccd75ef2f5b12f8c27b43dd3"
+  integrity sha512-h/csHPotBESyEUYlML3yyF2jUlDChB+u3TUNC3Ztzh/x7HzLqy88SL0INSIdY0dCBGx4TK5Gh+rMI7z28Hfdyw==
+  dependencies:
+    "@storybook/addons" "5.1.9"
+    "@storybook/api" "5.1.9"
+    "@storybook/components" "5.1.9"
+    "@storybook/core-events" "5.1.9"
+    "@storybook/theming" "5.1.9"
+    core-js "^3.0.1"
+    fast-deep-equal "^2.0.1"
+    global "^4.3.2"
+    lodash "^4.17.11"
+    polished "^3.3.1"
+    prop-types "^15.7.2"
+    react "^16.8.3"
+    react-inspector "^3.0.2"
+    uuid "^3.3.2"
+
 "@storybook/addons@5.1.9":
  version "5.1.9"
  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.1.9.tgz#ecf218d08508b97ca5e6e0f1ed361081385bd3ff"
@ -2771,6 +2814,11 @@ aws4@^1.8.0:
  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==

+axe-core@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.2.2.tgz#b06d6e9ae4636d706068843272bfaeed3fe97362"
+  integrity sha512-gAy4kMSPpuRJV3mwictJqlg5LhE84Vw2CydKdC4tvrLhR6+G3KW51zbL/vYujcLA2jvWOq3HMHrVeNuw+mrLVA==
+
 axios-retry@^3.1.2:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.1.2.tgz#4f4dcbefb0b434e22b72bd5e28a027d77b8a3458"
@ -3230,6 +3278,11 @@ base@^0.11.1:
    mixin-deep "^1.2.0"
    pascalcase "^0.1.1"

+batch-processor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 bcrypt-pbkdf@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@ -4487,6 +4540,24 @@ css-loader@^2.1.1:
    postcss-value-parser "^3.3.0"
    schema-utils "^1.0.0"

+css-loader@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.0.0.tgz#bdd48a4921eefedf1f0a55266585944d4e5efc63"
+  integrity sha512-WR6KZuCkFbnMhRrGPlkwAA7SSCtwqPwpyXJAPhotYkYsc0mKU9n/fu5wufy4jl2WhBw9Ia8gUQMIp/1w98DuPw==
+  dependencies:
+    camelcase "^5.3.1"
+    cssesc "^3.0.0"
+    icss-utils "^4.1.1"
+    loader-utils "^1.2.3"
+    normalize-path "^3.0.0"
+    postcss "^7.0.17"
+    postcss-modules-extract-imports "^2.0.0"
+    postcss-modules-local-by-default "^3.0.2"
+    postcss-modules-scope "^2.1.0"
+    postcss-modules-values "^3.0.0"
+    postcss-value-parser "^4.0.0"
+    schema-utils "^1.0.0"
+
 css-prefers-color-scheme@^3.1.1:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
@ -5108,6 +5179,13 @@ electron-to-chromium@^1.3.133:
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.137.tgz#ba7c88024984c038a5c5c434529aabcea7b42944"
  integrity sha512-kGi32g42a8vS/WnYE7ELJyejRT7hbr3UeOOu0WeuYuQ29gCpg9Lrf6RdcTQVXSt/v0bjCfnlb/EWOOsiKpTmkw==

+element-resize-detector@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.15.tgz#48eba1a2eaa26969a4c998d972171128c971d8d2"
+  integrity sha512-16/5avDegXlUxytGgaumhjyQoM6hpp5j3+L79sYq5hlXfTNRy5WMMuTVWkZU3egp/CokCmTmvf18P3KeB57Iog==
+  dependencies:
+    batch-processor "^1.0.0"
+
 elliptic@^6.0.0:
  version "6.4.1"
  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
@ -6795,6 +6873,13 @@ icss-replace-symbols@^1.1.0:
  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=

+icss-utils@^4.0.0, icss-utils@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
+  integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
+  dependencies:
+    postcss "^7.0.14"
+
 icss-utils@^4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.0.tgz#339dbbffb9f8729a243b701e1c29d4cc58c52f0e"
@ -7180,6 +7265,14 @@ is-directory@^0.3.1:
  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=

+is-dom@^1.0.9:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-dom/-/is-dom-1.1.0.tgz#af1fced292742443bb59ca3f76ab5e80907b4e8a"
+  integrity sha512-u82f6mvhYxRPKpw8V1N0W8ce1xXwOrQtgGcxl6UCL5zBmZu3is/18K0rR7uFCnMDuAsS/3W54mGL4vsaFUQlEQ==
+  dependencies:
+    is-object "^1.0.1"
+    is-window "^1.0.2"
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@ -7280,6 +7373,11 @@ is-obj@^1.0.0:
  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=

+is-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
+  integrity sha1-iVJojF7C/9awPsyF52ngKQMINHA=
+
 is-path-inside@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
@ -7367,6 +7465,11 @@ is-utf8@^0.2.0:
  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=

+is-window@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-window/-/is-window-1.0.2.tgz#2c896ca53db97de45d3c33133a65d8c9f563480d"
+  integrity sha1-LIlspT25feRdPDMTOmXYyfVjSA0=
+
 is-windows@^1.0.0, is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@ -10102,6 +10205,16 @@ postcss-modules-local-by-default@^2.0.6:
    postcss-selector-parser "^6.0.0"
    postcss-value-parser "^3.3.1"

+postcss-modules-local-by-default@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz#e8a6561be914aaf3c052876377524ca90dbb7915"
+  integrity sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==
+  dependencies:
+    icss-utils "^4.1.1"
+    postcss "^7.0.16"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.0.0"
+
 postcss-modules-scope@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb"
@ -10118,6 +10231,14 @@ postcss-modules-values@^2.0.0:
    icss-replace-symbols "^1.1.0"
    postcss "^7.0.6"

+postcss-modules-values@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
+  integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
+  dependencies:
+    icss-utils "^4.0.0"
+    postcss "^7.0.6"
+
 postcss-nesting@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6"
@ -10349,7 +10470,7 @@ postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.3, postcss-sel
    indexes-of "^1.0.1"
    uniq "^1.0.1"

-postcss-selector-parser@^6.0.0:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
  version "6.0.2"
  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
@ -10393,6 +10514,11 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==

+postcss-value-parser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.0.tgz#99a983d365f7b2ad8d0f9b8c3094926eab4b936d"
+  integrity sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ==
+
 postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
@ -10411,6 +10537,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2
    source-map "^0.6.1"
    supports-color "^6.1.0"

+postcss@^7.0.17:
+  version "7.0.17"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
+  integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prelude-ls@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@ -10970,7 +11105,16 @@ react-hotkeys@2.0.0-pre4:
  dependencies:
    prop-types "^15.6.1"

-react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
+react-inspector@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-3.0.2.tgz#c530a06101f562475537e47df428e1d7aff16ed8"
+  integrity sha512-PSR8xDoGFN8R3LKmq1NT+hBBwhxjd9Qwz8yKY+5NXY/CHpxXHm01CVabxzI7zFwFav/M3JoC/Z0Ro2kSX6Ef2Q==
+  dependencies:
+    babel-runtime "^6.26.0"
+    is-dom "^1.0.9"
+    prop-types "^15.6.1"
+
+react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
  version "16.8.6"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
@ -11000,6 +11144,18 @@ react-popper@^1.3.3:
    typed-styles "^0.0.7"
    warning "^4.0.2"

+react-redux@^7.0.2:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.0.tgz#72af7cf490a74acdc516ea9c1dd80e25af9ea0b2"
+  integrity sha512-hyu/PoFK3vZgdLTg9ozbt7WF3GgX5+Yn3pZm5/96/o4UueXA+zj08aiSC9Mfj2WtD1bvpIb3C5yvskzZySzzaw==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.2.4"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.8.6"
+
 react-resize-detector@^4.0.5:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-4.2.0.tgz#b87aee6b37c9e8a52daca8736b3230cf6a2a8647"
@ -11011,6 +11167,16 @@ react-resize-detector@^4.0.5:
    raf-schd "^4.0.0"
    resize-observer-polyfill "^1.5.1"

+react-sizeme@^2.5.2:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.7.tgz#231339ce8821ac2c26424c791e0027f89dae3e90"
+  integrity sha512-xCjPoBP5jmeW58TxIkcviMZqabZis7tTvDFWf0/Wa5XCgVWQTIe74NQBes2N1Kmp64GRLkpm60BaP0kk+v8aCQ==
+  dependencies:
+    element-resize-detector "^1.1.15"
+    invariant "^2.2.4"
+    shallowequal "^1.1.0"
+    throttle-debounce "^2.1.0"
+
 react-syntax-highlighter@^8.0.1:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz#59103ff17a828a27ed7c8f035ae2558f09b6b78c"
@ -11177,6 +11343,14 @@ redent@^1.0.0:
    indent-string "^2.1.0"
    strip-indent "^1.0.1"

+redux@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5"
+  integrity sha512-R7bAtSkk7nY6O/OYMVR9RiBI+XghjF9rlbl5806HJbQph0LJVHZrU5oaO4q70eUKiqMRqm4y07KLTlMZ2BlVmg==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 refractor@^2.4.1:
  version "2.9.0"
  resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.9.0.tgz#0a381aadb51513e4e6ec1ed410b5104dd65e2489"
@ -11764,7 +11938,7 @@ shallow-equal@^1.1.0:
  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.0.tgz#fd828d2029ff4e19569db7e19e535e94e2d1f5cc"
  integrity sha512-Z21pVxR4cXsfwpMKMhCEIO1PCi5sp7KEp+CmOpBQ+E8GpHwKOw2sEzk7sgblM3d/j4z4gakoWEoPcjK0VJQogA==

-shallowequal@1.1.0:
+shallowequal@1.1.0, shallowequal@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@ -12284,7 +12458,7 @@ strip-json-comments@^2.0.0, strip-json-comments@^2.0.1, strip-json-comments@~2.0
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=

-style-loader@^0.23.1:
+style-loader@^0.23.1, style-loader@~0.23.1:
  version "0.23.1"
  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
  integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==
@ -12374,7 +12548,7 @@ svgo@^1.0.0, svgo@^1.1.1:
    unquote "~1.1.1"
    util.promisify "~1.0.0"

-symbol-observable@^1.0.2, symbol-observable@^1.0.4:
+symbol-observable@^1.0.2, symbol-observable@^1.0.4, symbol-observable@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==