Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

all-clients.code-workspace

@@ -0,0 +1,17 @@
+{
+	"folders": [
+        {
+			"name": "ASC.Web.Components"
+			"path": ".\\web\\ASC.Web.Components"
+		},
+        {
+			"name": "ASC.Web.Client"
+			"path": ".\\web\\ASC.Web.Client"
+		},
+		{
+			"name": "ASC.People.Client"
+			"path": ".\\products\\ASC.People\\Client"
+		}
+	],
+	"settings": {}
+}

build/build.bat

@@ -10,10 +10,6 @@ echo "ASC.Web.Components"
 call yarn install --cwd web/ASC.Web.Components --frozen-lockfile > build\ASC.Web.Components.log
 call yarn link --cwd packages/asc-web-components
 
-echo "ASC.Web.Storybook"
-call yarn link "asc-web-components" --cwd web/ASC.Web.Storybook
-call yarn install --cwd web/ASC.Web.Storybook --frozen-lockfile  > build\ASC.Web.Storybook.log
-
 echo "ASC.Web.Client"
 call yarn link "asc-web-components" --cwd web/ASC.Web.Client
 call yarn install --cwd web/ASC.Web.Client --frozen-lockfile > build\ASC.Web.Client.log

build/rebuild.bat

@@ -12,10 +12,6 @@ call yarn install --cwd packages/asc-web-components >> build\ASC.Web.Components.
 
 call yarn link --cwd packages/asc-web-components
 
-echo "ASC.Web.Storybook"
-call yarn link "asc-web-components" --cwd web/ASC.Web.Storybook
-call yarn install --cwd web/ASC.Web.Storybook  > build\ASC.Web.Storybook.log
-
 echo "ASC.Web.Client"
 call yarn link "asc-web-components" --cwd web/ASC.Web.Client
 call yarn install --cwd web/ASC.Web.Client > build\ASC.Web.Client.log

products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/index.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
+import { withRouter } from 'react-router';
 import PropTypes from "prop-types";
 import {
   Button,
@@ -10,19 +11,30 @@ import {
 } from "asc-web-components";
 import { useTranslation } from 'react-i18next';
 import { department, headOfDepartment, typeUser } from '../../../../../helpers/customNames';
+import { connect } from 'react-redux';
+import { resetGroup } from '../../../../../store/group/actions';
 
 const SectionBodyContent = (props) => {
-  const { history, group } = props;
+  const { history, group, resetGroup } = props;
   const [value, setValue] = useState(group ? group.name : "");
   const [error, setError] = useState(null);
   const [inLoading, setInLoading] = useState(false);
   const { t } = useTranslation();
 
+  useEffect(() => {
+    setValue(group ? group.name : "");
+    setError(null);
+    setInLoading(false);
+  }, [group]);
+
   const groupMembers = group && group.members ? group.members : [];
 
   const onCancel = useCallback(() => {
+    resetGroup();
     history.goBack();
-  }, [history]);
+  }, [history, resetGroup]);
+
+  const onChange = useCallback((e) => setValue(e.target.value), [setValue]);
 
   console.log("Group render", props);
 
@@ -33,7 +45,7 @@ const SectionBodyContent = (props) => {
           <Text.Body as="span" isBold={true}>{t('CustomDepartmentName', { department })}:</Text.Body>
         </label>
         <div style={{width: "320px"}}>
-          <TextInput id="group-name" name="group-name" scale={true} value={value} onChange={(e) => setValue(e.target.value)} />
+          <TextInput id="group-name" name="group-name" scale={true} isAutoFocussed={true} tabIndex={1} value={value} onChange={onChange} />
         </div>
       </div>
       <div style={{ marginTop: "16px" }}>
@@ -49,6 +61,7 @@ const SectionBodyContent = (props) => {
           iconColor="#A3A9AE"
           scale={false}
           isReadOnly={true}
+          tabIndex={2}
         >
           <Icons.CatalogEmployeeIcon size="medium" />
         </InputBlock>
@@ -66,6 +79,7 @@ const SectionBodyContent = (props) => {
           iconColor="#A3A9AE"
           scale={false}
           isReadOnly={true}
+          tabIndex={3}
         >
           <Icons.CatalogGuestIcon size="medium" />
         </InputBlock>
@@ -73,8 +87,10 @@ const SectionBodyContent = (props) => {
       <div style={{ marginTop: "16px", display: "flex", flexWrap: "wrap", flexDirection: "row" }}>
         {groupMembers.map(member => 
           <SelectedItem
+            key={member.id}
             text={member.displayName}
-            onClick={(e) => console.log("onClose", e.target)}
+            onClick={(e) => console.log("onClick", e.target)}
+            onClose={(e) => console.log("onClose", e.target)}
             isInline={true}
             style={{ marginRight: "8px", marginBottom: "8px" }}
           />
@@ -82,13 +98,14 @@ const SectionBodyContent = (props) => {
       </div>
       <div>{error && <strong>{error}</strong>}</div>
       <div style={{ marginTop: "60px" }}>
-        <Button label={t('SaveButton')} primary type="submit" isDisabled={inLoading} size="big" />
+        <Button label={t('SaveButton')} primary type="submit" isDisabled={inLoading} size="big" tabIndex={4} />
         <Button
           label={t('CancelButton')}
           style={{ marginLeft: "8px" }}
           size="big"
           isDisabled={inLoading}
           onClick={onCancel}
+          tabIndex={5}
         />
       </div>
     </>
@@ -103,4 +120,11 @@ SectionBodyContent.defaultProps = {
   group: null
 }
 
-export default SectionBodyContent;
+function mapStateToProps(state) {
+  return {
+    settings: state.auth.settings,
+    group: state.group.targetGroup
+  };
+};
+
+export default connect(mapStateToProps, { resetGroup })(withRouter(SectionBodyContent));

products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js

@@ -20,7 +20,7 @@ const SectionHeaderContent = (props) => {
   const {group, history, settings} = props;
   const { t } = useTranslation();
 
-  const headerText = t('CustomNewDepartment', { department });
+  const headerText = group ? t('CustomEditDepartment', { department }) : t('CustomNewDepartment', { department });
 
   return (
     <div style={wrapperStyle}>
@@ -41,7 +41,8 @@ SectionHeaderContent.defaultProps = {
 
 function mapStateToProps(state) {
   return {
-    settings: state.auth.settings
+    settings: state.auth.settings,
+    group: state.group.targetGroup
   };
 };
 

products/ASC.People/Client/src/components/pages/GroupAction/index.js

@@ -5,7 +5,7 @@ import { ArticleHeaderContent, ArticleMainButtonContent, ArticleBodyContent } fr
 import { SectionHeaderContent, SectionBodyContent } from './Section';
 import i18n from "./i18n";
 import { I18nextProvider } from "react-i18next";
-import { fetchGroup } from "../../../store/group/actions";
+import { fetchGroup, resetGroup } from "../../../store/group/actions";
 
 class GroupAction extends React.Component {
 
@@ -19,12 +19,12 @@ class GroupAction extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { match, fetchGroup } = this.props;
+    const { match, fetchGroup, resetGroup } = this.props;
     const { groupId } = match.params;
     const prevUserId = prevProps.match.params.groupId;
 
-    if (groupId !== undefined && groupId !== prevUserId) {
-      fetchGroup(groupId);
+    if (groupId !== prevUserId) {
+      groupId ? fetchGroup(groupId) : resetGroup();
     }
   }
 
@@ -41,7 +41,7 @@ class GroupAction extends React.Component {
           articleMainButtonContent={<ArticleMainButtonContent />}
           articleBodyContent={<ArticleBodyContent />}
           sectionHeaderContent={<SectionHeaderContent />}
-          sectionBodyContent={<SectionBodyContent group={group} />}
+          sectionBodyContent={<SectionBodyContent />}
         />
         : <PageLayout
           articleHeaderContent={<ArticleHeaderContent />}
@@ -62,4 +62,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(mapStateToProps, { fetchGroup })(GroupAction);
+export default connect(mapStateToProps, { fetchGroup, resetGroup })(GroupAction);

products/ASC.People/Client/src/components/pages/GroupAction/locales/en/translation.json

@@ -7,5 +7,6 @@
   "CustomHeadOfDepartment": "{{headOfDepartment}}",
   "CustomAddEmployee": "Add {{typeUser, lowercase}}",
   "CustomNewDepartment": "New {{department, lowercase}}",
+  "CustomEditDepartment": "Edit {{department, lowercase}}",
   "CustomDepartmentName": "{{department}} name"
 }

products/ASC.People/Client/src/custom.scss

@@ -4,6 +4,7 @@ $font-family-base: 'Open Sans', sans-serif;
 // Import Bootstrap and its default variables
 @import '~bootstrap/scss/bootstrap.scss';
 @import '~react-toastify/dist/ReactToastify.min.css';
+@import "~react-datepicker/dist/react-datepicker.css";
 
 html, body {
     height: 100%;

web/ASC.Web.Client/all-clients.code-workspace

@@ -1,12 +0,0 @@
-{
-	"folders": [
-		{
-			"path": "."
-		},
-		{
-			"name": "ASC.People.Client"
-			"path": "..\\..\\products\\ASC.People\\Client"
-		}
-	],
-	"settings": {}
-}

web/ASC.Web.Components/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

web/ASC.Web.Components/.eslintignore

@@ -0,0 +1 @@
+dist/

web/ASC.Web.Components/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  parser: 'babel-eslint',
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+};

web/ASC.Web.Components/.storybook/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "react-app"
+  ],
+  "plugins": [["babel-plugin-styled-components", { "diplayName": true }]]
+}

web/ASC.Web.Components/.storybook/addons.js

@@ -5,4 +5,5 @@ import '@storybook/addon-storysource/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-options/register';
 import '@storybook/addon-links/register';
-import '@storybook/addon-viewport/register';
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-a11y/register';

web/ASC.Web.Components/.storybook/config.js

@@ -0,0 +1,52 @@
+import { configure, addDecorator, addParameters } from '@storybook/react';
+import { withA11y } from '@storybook/addon-a11y';
+import { addReadme } from 'storybook-readme';
+import { withConsole } from '@storybook/addon-console';
+
+import '!style-loader!css-loader!./styles.scss';
+
+//import 'bootstrap/dist/css/bootstrap.css';
+//import 'react-toastify/dist/ReactToastify.min.css';
+/*
+This is a package to make Story panel load and decode all files stories
+Also, because of some internal usage, we cannot use the default babel config (for the library)
+with this package.
+
+In order to solve that, it's necessary a custom/simple .babelrc inside .storybook/ folder
+*/
+//import requireContext from 'require-context.macro';
+
+/* Add A11y panel */
+addDecorator(withA11y);
+
+/* Enable README for all stories */
+addDecorator(addReadme);
+
+/* General options for storybook */
+addParameters({
+  options:
+  {
+    name: 'ASC Storybook',
+    sortStoriesByKind: true,
+    showAddonPanel: true,
+    addonPanelInRight: true
+  },
+  /* Options for storybook-readme plugin */
+  readme: {
+    codeTheme: 'github',
+    StoryPreview: ({ children }) => children,
+  },
+});
+
+/* automatically import all files ending in *.stories.js inside src folder */
+//const req = requireContext('../src', true, /\.stories\.js$/);
+//const req = require.context('../src', true, /\.stories\.js$/);
+const srcStories = require.context('../src', true, /\.stories\.js$/);
+function loadStories() {
+  //req.keys().forEach(filename => req(filename));
+  srcStories.keys().forEach(filename => srcStories(filename));
+}
+
+addDecorator((storyFn, context) => withConsole()(storyFn)(context));
+
+configure(loadStories, module);

web/ASC.Web.Components/.storybook/preview-head.html

@@ -0,0 +1,13 @@
+<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i' rel='stylesheet' type='text/css'></link>
+<style>
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    font-size: 13px;
+  }
+
+  body {
+    overflow: auto;
+  }
+</style>

web/ASC.Web.Components/.storybook/styles.scss

@@ -0,0 +1,10 @@
+/*
+Any global style for all stories
+It can also be an scss file, however,
+you have to go to `webpack.config.js` file
+and enable the options in there
+*/
+
+@import '../node_modules/bootstrap/dist/css/bootstrap.css';
+@import '../node_modules/react-toastify/dist/ReactToastify.min.css';
+@import "../node_modules/react-datepicker/dist/react-datepicker.css";

web/ASC.Web.Components/.storybook/webpack.config.js

@@ -0,0 +1,102 @@
+const path = require('path');
+
+const sourceFolders = [
+  path.resolve(__dirname),
+  path.resolve(__dirname, '../src'),
+];
+
+module.exports = ({ config }) => {
+
+  if (process.env.NODE_ENV === 'production') {
+    // remove progress plugin
+    // progress plugin outputs a lot of console logs, which makes
+    // netlify build realllllllllllllllly slow.
+    config.plugins = config.plugins.filter(
+      plugin => plugin.constructor.name !== 'ProgressPlugin'
+    );
+    config.devtool = 'none'; // TODO: should we use something differen?
+  } else {
+    config.devtool = 'cheap-module-source-map'; // TODO: should we use something differen?
+  }
+
+  config.devtool = 'cheap-module-source-map'; // TODO: should we use something differen?
+  config.module.rules = [
+    // Disable require.ensure as it's not a standard language feature.
+    { parser: { requireEnsure: false } },
+    // add story source
+    {
+      test: /\.stories\.js$/,
+      loaders: [require.resolve('@storybook/addon-storysource/loader')],
+      enforce: 'pre',
+    },
+    // Process JS with Babel.
+    {
+      test: /\.js$/,
+      include: sourceFolders,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            babelrc: false,
+            compact: false,
+            presets: [require.resolve('../scripts/get-babel-preset')],
+            // This is a feature of `babel-loader` for webpack (not Babel itself).
+            // It enables caching results in ./node_modules/.cache/babel-loader/
+            // directory for faster rebuilds.
+            cacheDirectory: true,
+            highlightCode: true,
+          },
+        },
+      ],
+    },
+    // For svg icons, we want to get them transformed into React components
+    // when we import them.
+    {
+      test: /\.react\.svg$/,
+      include: sourceFolders,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            babelrc: false,
+            presets: [require.resolve('../scripts/get-babel-preset')],
+            // This is a feature of `babel-loader` for webpack (not Babel itself).
+            // It enables caching results in ./node_modules/.cache/babel-loader/
+            // directory for faster rebuilds.
+            cacheDirectory: true,
+            highlightCode: true,
+          },
+        },
+        {
+          loader: require.resolve('@svgr/webpack'),
+          options: {
+            // NOTE: disable this and manually add `removeViewBox: false` in the SVGO plugins list
+            // See related PR: https://github.com/smooth-code/svgr/pull/137
+            icon: false,
+            svgoConfig: {
+              plugins: [
+                { removeViewBox: false },
+                // Keeps ID's of svgs so they can be targeted with CSS
+                { cleanupIDs: false },
+              ],
+            },
+          },
+        },
+      ],
+    },
+    {
+      test: /\.css$/,
+      use: ['style-loader','css-loader']
+    },
+    // Storybook uses a plugin to load and render markdown files.
+    {
+      test: /\.md$/,
+      use: [
+        { loader: require.resolve('html-loader') },
+        { loader: require.resolve('markdown-loader') },
+      ],
+    }
+  ];
+
+  return config;
+};

web/ASC.Web.Components/asc-web-components.code-workspace

@@ -1,18 +0,0 @@
-{
-	"folders": [
-		{
-			"path": "."
-		},
-		{
-			"path": "..\\ASC.Web.Storybook"
-		}
-	],
-	"settings": {
-		"cSpell.words": [
-			"Romb",
-			"Rombs",
-			"combobox",
-			"reactstrap"
-		]
-	}
-}

web/ASC.Web.Components/babel.config.js

@@ -0,0 +1,21 @@
+const presets = [
+  [
+    '@babel/preset-env',
+    {
+      modules: false,
+    },
+  ],
+  '@babel/preset-react',
+];
+
+const plugins = ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-export-namespace-from', 'babel-plugin-styled-components'];
+
+module.exports = {
+  presets,
+  plugins,
+  env: {
+    test: {
+      presets: ['@babel/preset-env', '@babel/preset-react'],
+    },
+  },
+};

web/ASC.Web.Components/config/setupTest.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });

web/ASC.Web.Components/jest.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  setupFiles: [
+    '<rootDir>/test/setup-tests.js'
+  ],
+  setupFilesAfterEnv: [
+    '<rootDir>/scripts/setup-test-framework.js'
+  ],
+  transform: {
+    '^.+\\.js$': '<rootDir>/test/transform-babel-jest.js',
+  },
+  /* It solves css/less/scss import issues.
+    You might have similar issues with different file extensions (e.g. md).
+    Just search for "<file type> jest loader"
+  */
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/test/transform-file.js'
+  },
+};

web/ASC.Web.Components/package.json

@@ -1,35 +1,103 @@
 {
   "name": "asc-web-components",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "description": "Ascensio System SIA component library",
   "license": "AGPL-3.0",
-  "main": "dist/asc-web-components.cjs.js",
+  "main": "dist/asc-web-components.js",
   "module": "dist/asc-web-components.esm.js",
+  "jsnext:main": "dist/asc-web-components.es.js",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "package.json"
+  ],
   "engines": {
     "node": ">=8",
     "npm": ">=5"
   },
   "scripts": {
-    "test": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
     "build": "rimraf dist && cross-env NODE_ENV=production rollup -c",
-    "start": "rimraf dist && cross-env NODE_ENV=development rollup -c -w",
-    "prepare": "npm run build",
+    "start": "cross-env NODE_ENV=development rollup -c -w",
+    "prepare": "yarn run build",
+    "lint": "eslint .",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "storybook": "start-storybook -p 6006 -s ./public",
+    "build:storybook": "build-storybook -c .storybook -o storybook-static -s public",
     "bump": "yarn version --no-git-tag-version --patch && git add ./package.json && git commit -m \"web: components: bump version\""
   },
   "peerDependencies": {
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-values": "^0.3.3",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-export-default-from": "^7.5.2",
+    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "@emotion/babel-preset-css-prop": "^10.0.17",
+    "@storybook/addon-a11y": "^5.1.11",
+    "@storybook/addon-actions": "^5.1.11",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-knobs": "^5.1.11",
+    "@storybook/addon-links": "^5.1.11",
+    "@storybook/addon-options": "^5.1.11",
+    "@storybook/addon-storysource": "^5.1.11",
+    "@storybook/addon-viewport": "^5.1.11",
+    "@storybook/addons": "^5.1.11",
+    "@storybook/react": "^5.1.11",
+    "@svgr/rollup": "^4.3.2",
+    "@svgr/webpack": "^4.3.2",
+    "@testing-library/react": "^8.0.8",
+    "@types/jest": "^24.0.17",
+    "babel-eslint": "^10.0.2",
+    "babel-jest": "^24.8.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-inline-react-svg": "^1.1.0",
+    "babel-plugin-transform-dynamic-import": "^2.1.0",
+    "babel-plugin-transform-rename-import": "^2.3.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^3.2.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "eslint": "^6.3.0",
+    "eslint-plugin-react": "^7.14.3",
+    "jest": "^24.8.0",
+    "jest-enzyme": "^7.1.0",
+    "postcss": "^7.0.17",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-values": "^0.3.3",
+    "rollup": "^1.21.1",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-cleanup": "^3.1.1",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-copy": "^3.1.0",
+    "rollup-plugin-generate-package-json": "^3.1.3",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-url": "^2.2.2",
+    "storybook-readme": "^5.0.8",
+    "svg-inline-loader": "^0.8.0",
     "styled-components": "^4.3.2"
   },
   "dependencies": {
-    "@emotion/core": "10.0.16",
-    "@emotion/styled": "10.0.15",
     "bootstrap": "^4.3.1",
     "lodash": "4.17.15",
     "lodash-es": "4.17.15",
     "moment": "^2.24.0",
-    "postcss": "^7.0.17",
     "prop-types": "^15.7.2",
     "rc-tree": "^2.1.2",
     "react-autosize-textarea": "^7.0.0",
@@ -42,70 +110,5 @@
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "reactstrap": "^8.0.1"
-  },
-  "devDependencies": {
-    "@babel/core": "7.5.5",
-    "@babel/plugin-proposal-class-properties": "7.5.5",
-    "@babel/plugin-proposal-export-default-from": "7.5.2",
-    "@babel/plugin-proposal-export-namespace-from": "7.5.2",
-    "@babel/plugin-proposal-object-rest-spread": "7.5.5",
-    "@babel/plugin-transform-destructuring": "7.5.0",
-    "@babel/plugin-transform-react-constant-elements": "7.5.0",
-    "@babel/plugin-transform-runtime": "7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "7.0.0",
-    "@emotion/babel-preset-css-prop": "10.0.14",
-    "@svgr/rollup": "4.3.2",
-    "@svgr/webpack": "4.3.2",
-    "@testing-library/dom": "^6.1.0",
-    "babel-eslint": "10.0.3",
-    "babel-jest": "24.9.0",
-    "babel-loader": "8.0.6",
-    "babel-plugin-macros": "^2.6.1",
-    "babel-plugin-module-rewrite": "0.2.0",
-    "babel-plugin-styled-components": "^1.10.6",
-    "babel-plugin-transform-dynamic-import": "2.1.0",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "babel-plugin-transform-rename-import": "2.3.0",
-    "babel-preset-jest": "24.9.0",
-    "browserslist": "4.6.6",
-    "clean-webpack-plugin": "3.0.0",
-    "core-js": "3.2.1",
-    "cross-env": "5.2.0",
-    "eslint": "6.2.2",
-    "eslint-config-airbnb-base": "14.0.0",
-    "eslint-config-prettier": "6.1.0",
-    "eslint-formatter-pretty": "2.1.1",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jest": "22.15.2",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prefer-object-spread": "1.2.1",
-    "eslint-plugin-prettier": "3.1.0",
-    "eslint-plugin-react": "7.14.3",
-    "prettier": "1.18.2",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "react-router-dom": "5.0.1",
-    "rimraf": "3.0.0",
-    "rollup": "1.20.2",
-    "rollup-plugin-babel": "4.3.3",
-    "rollup-plugin-cleanup": "3.1.1",
-    "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-copy": "^3.1.0",
-    "rollup-plugin-generate-package-json": "^3.1.3",
-    "rollup-plugin-json": "4.0.0",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-postcss": "^2.0.3",
-    "rollup-plugin-replace": "2.2.0",
-    "webpack": "4.39.3",
-    "webpack-cli": "3.3.7",
-    "webpack-dev-server": "3.8.0"
-  },
-  "files": [
-    "dist",
-    "CHANGELOG.md",
-    "README.md",
-    "LICENSE",
-    "package.json"
-  ]
+  }
 }

web/ASC.Web.Components/rollup.config.js

@@ -85,7 +85,8 @@ const config = [
     external: defaultExternal,
     output: {
       file: pkg.module,
-      format: "esm"
+      format: "esm",
+      sourcemap: true
     },
     plugins: configureRollupPlugins({
       babel: {
@@ -105,7 +106,8 @@ const config = [
     external: defaultExternal,
     output: {
       file: pkg.main,
-      format: "cjs"
+      format: "cjs",
+      sourcemap: true
     },
     plugins: [
       ...configureRollupPlugins(),

web/ASC.Web.Components/scripts/setup-test-framework.js

@@ -0,0 +1,6 @@
+// enzyme setup
+import 'jest-enzyme';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter(), disableLifecycleMethods: true });

web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js

@@ -3,8 +3,8 @@ import { storiesOf } from "@storybook/react";
 import { withKnobs, text, number } from "@storybook/addon-knobs/react";
 import withReadme from "storybook-readme/with-readme";
 import Readme from "./README.md";
-import { AdvancedSelector } from "asc-web-components";
-import Section from "../../.storybook/decorators/section";
+import AdvancedSelector from "./";
+import Section from "../../../.storybook/decorators/section";
 import { boolean } from "@storybook/addon-knobs/dist/deprecated";
 import { ArrayValue } from "react-values";
 

web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AdvancedSelector from '.';
+
+describe('<AdvancedSelector />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <AdvancedSelector 
+        placeholder="Search users"
+        onSearchChanged={(e) => console.log(e.target.value)}
+        options={[]}
+        isMultiSelect={false}
+        buttonLabel="Add members"
+        onSelect={(selectedOptions) => console.log("onSelect", selectedOptions)}
+        />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/advanced-selector/index.js

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import SearchInput from "../search-input";

web/ASC.Web.Components/src/components/avatar-editor/avatar-editor.stories.js

@@ -4,8 +4,9 @@ import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
-import { AvatarEditor, Avatar } from 'asc-web-components';
-import Section from '../../.storybook/decorators/section';
+import AvatarEditor from '.';
+import Avatar from '../avatar';
+import Section from '../../../.storybook/decorators/section';
 
 class AvatarEditorStory extends React.Component  {
   constructor(props) {
@@ -62,7 +63,7 @@ class AvatarEditorStory extends React.Component  {
 storiesOf('Components|AvatarEditor', module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))
-  .add('avatar editor', () => {
+  .add('base', () => {
    
     return (
       <Section>

web/ASC.Web.Components/src/components/avatar-editor/avatar-editor.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AvatarEditor from '.';
+
+describe('<AvatarEditor />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <AvatarEditor
+        visible={true}
+        onSave={(data) =>{console.log(data.croppedImage, data.defaultImage)}}
+      />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/avatar/avatar.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
-import { Avatar } from 'asc-web-components';
+import Avatar from '.';
 import Section from '../../../.storybook/decorators/section';
 
 const roleOptions = ['owner', 'admin','guest','user'];

web/ASC.Web.Components/src/components/avatar/avatar.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Avatar from '.';
+
+describe('<Avatar />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <Avatar size='max' role='admin' source='' userName='' editing={false} />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/backdrop/backdrop.stories.js

@@ -5,14 +5,15 @@ import { BooleanValue } from 'react-values'
 import withReadme from 'storybook-readme/with-readme';
 import { withKnobs, number } from '@storybook/addon-knobs/react';
 import Readme from './README.md';
-import Section from '../../.storybook/decorators/section';
-import { Backdrop, Button } from 'asc-web-components';
+import Section from '../../../.storybook/decorators/section';
+import Backdrop from '.';
+import Button from '../button';
 
 
 storiesOf('Components|Backdrop', module)
   .addDecorator(withReadme(Readme))
   .addDecorator(withKnobs)
-  .add('Backdrop', () => (
+  .add('base', () => (
     <Section>
       <BooleanValue>
         {({ value, toggle }) => (

web/ASC.Web.Components/src/components/backdrop/backdrop.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Backdrop from '.';
+
+describe('<Backdrop />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <Backdrop visible={false} />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/badge/badge.stories.js

@@ -4,13 +4,13 @@ import { action } from '@storybook/addon-actions';
 import withReadme from 'storybook-readme/with-readme';
 import { withKnobs, number, color, text } from '@storybook/addon-knobs/react';
 import Readme from './README.md';
-import Section from '../../.storybook/decorators/section';
-import {Badge} from 'asc-web-components';
+import Section from '../../../.storybook/decorators/section';
+import Badge from '.';
 
 storiesOf('Components|Badge', module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))
-  .add('badge', () => (
+  .add('base', () => (
     <Section>
       <Badge
         number={number('number', 10)}

web/ASC.Web.Components/src/components/badge/badge.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Badge from '.';
+
+describe('<Badge />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <Badge />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/button/all.buttons.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { Button } from 'asc-web-components';
+import Button from '.';
 import Section from '../../../.storybook/decorators/section';
 
 function onClick(e) {

web/ASC.Web.Components/src/components/button/button.stories.js

@@ -4,7 +4,8 @@ import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
-import { Button, Icons } from 'asc-web-components';
+import Button from '.';
+import { Icons } from '../icons';
 import Section from '../../../.storybook/decorators/section';
 import { orderBy } from 'lodash';
 

web/ASC.Web.Components/src/components/button/button.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Button from '.';
+
+describe('<Button />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <Button size='base' isDisabled={false} onClick={() => alert('Button clicked')} label="OK" />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/calendar-new/calendar.stories.js

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, color, select, date } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
-import { NewCalendar } from 'asc-web-components';
+import NewCalendar from '.';
 import moment from 'moment';
 import 'moment/min/locales'
 
@@ -20,7 +20,7 @@ const arraySize = ['base', 'big'];
 storiesOf('Components|Calendar', module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))
-  .add('calendar', () => (
+  .add('base', () => (
       <NewCalendar
         onChange={date => {
           action('Selected date')(date);

web/ASC.Web.Components/src/components/calendar-new/calendar.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import NewCalendar from '.';
+
+describe('<NewCalendar />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <NewCalendar
+          onChange={date => {
+          console.log('Selected date:', date);
+          }}
+          disabled={false}
+          themeColor='#ED7309'
+          selectedDate={new Date()}
+          openToDate={new Date()}
+          minDate={new Date("1970/01/01")}
+          maxDate={new Date("3000/01/01")}
+          locale='ru'
+          scaled={false}
+      />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/checkbox/checkbox.stories.js

@@ -5,7 +5,7 @@ import { BooleanValue } from 'react-values'
 import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
-import { Checkbox } from 'asc-web-components';
+import Checkbox from '.';
 import Section from '../../../.storybook/decorators/section';
 
 storiesOf('Components|Input', module)

web/ASC.Web.Components/src/components/checkbox/checkbox.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Checkbox from '.';
+
+describe('<Checkbox />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <Checkbox value="text" onChange={event => alert(event.target.value)}/>
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/combobox/README.md

@@ -43,7 +43,7 @@ const advancedOptions = (
 <ComboBox
   options={[]} // An empty array will enable advancedOptions
   advancedOptions={advancedOptions}
-  onSelect={option => action("Selected option")(option)}
+  onSelect={option => console.log("Selected option", option)}
   selectedOption={{
     key: 0,
     label: "Select"

web/ASC.Web.Components/src/components/combobox/combobox.stories.js

@@ -5,9 +5,12 @@ import { withKnobs, boolean, select, number } from '@storybook/addon-knobs/react
 import { optionsKnob as options } from '@storybook/addon-knobs';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
-import { ComboBox, Icons, Button, RadioButton, DropDownItem } from 'asc-web-components'
+import ComboBox from '.';
+import { Icons } from '../icons';
+import Button from '../button';
+import RadioButton from '../radio-button';
+import DropDownItem from '../drop-down-item'
 import Section from '../../../.storybook/decorators/section';
-import styled from 'styled-components'
 
 const iconNames = Object.keys(Icons);
 const sizeOptions = ['base', 'middle', 'big', 'huge', 'content'];

web/ASC.Web.Components/src/components/combobox/combobox.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ComboBox from '.';
+import DropDownItem from '../drop-down-item';
+
+describe('<ComboBox />', () => {
+  it('renders without error', () => {
+    const advancedOptions = (
+      <>
+        <DropDownItem>
+          <span>Some text</span>
+        </DropDownItem>
+      </>
+    );
+
+    const wrapper = mount(
+      <ComboBox
+        options={[]} // An empty array will enable advancedOptions
+        advancedOptions={advancedOptions}
+        onSelect={option => console.log("Selected option", option)}
+        selectedOption={{
+          key: 0,
+          label: "Select"
+        }}
+        isDisabled={false}
+        scaled={false}
+        size="content"
+        directionX="right"
+      />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/context-menu-button/context-menu-button.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ContextMenuButton from '.';
+
+describe('<ContextMenuButton />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <ContextMenuButton
+          title="Actions"
+          getData={() => [{key: 'key', label: 'label', onClick: () => alert('label')}]}
+      />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/context-menu-button/contxt-menu-button.stories.js

@@ -3,8 +3,9 @@ import { storiesOf } from '@storybook/react';
 import { withKnobs, text, select, number, color, boolean } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
-import Section from '../../.storybook/decorators/section';
-import { ContextMenuButton, Icons } from 'asc-web-components';
+import Section from '../../../.storybook/decorators/section';
+import ContextMenuButton from '.';
+import { Icons } from '../icons';
 
 const iconNames = Object.keys(Icons);
 

web/ASC.Web.Components/src/components/context-menu/README.md

@@ -1,26 +1,25 @@
-# Loaders: Rombs
+# ContextMenu
 
 ## Usage
 
 ```js
-import { Loader } from 'asc-web-components';
+import { ContextMenu } from 'asc-web-components';
 ```
 
 #### Description
 
-Loader component is used for displaying loading actions on a page.
+ContextMenu is used for a call context actions on a page.
 
 #### Usage
 
 ```js
-<Loader color="black" size={40} type="rombs" />
+<ContextMenu targetAreaId='rowContainer' options={[]} />
 ```
 
 #### Properties
 
 | Props              | Type     | Required | Values                      | Default   | Description                                                                                                                                      |
 | ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `type`             | `oneOf`  |    -     | `base`, `oval`, `dual-ring`, `rombs` | `base`     | -                                                                     |
-| `size`         | `number` or `string`   |    -     | -               | -         | Loader height and width value                                |
-
+| `options`             | `array`  |    -     | -             | -     | DropDownItems collection                     |
+| `targetAreaId`          | `string`   |    -     | -                           | -         | Id of container apply to                           |
 

web/ASC.Web.Components/src/components/context-menu/context-menu.stories.js

@@ -1,9 +1,13 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { ContextMenu, Row } from 'asc-web-components';
-import Section from '../../.storybook/decorators/section';
+import ContextMenu from '.';
+import Row from '../row';
+import Section from '../../../.storybook/decorators/section';
+import Readme from './README.md';
+import withReadme from 'storybook-readme/with-readme';
 
 storiesOf('Components|ContextMenu', module)
+  .addDecorator(withReadme(Readme))
   .add('base', () => {
     const array = Array.from(Array(10).keys());
 

web/ASC.Web.Components/src/components/context-menu/context-menu.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ContextMenu from '.';
+
+describe('<ContextMenu />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <ContextMenu targetAreaId='rowContainer' options={[]} />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/date-input/date-input.stories.js

@@ -5,7 +5,7 @@ import { DateValue } from 'react-values'
 import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
-import { DateInput } from 'asc-web-components';
+import DateInput from '.';
 import Section from '../../../.storybook/decorators/section';
 
 storiesOf('Components|Input', module)

web/ASC.Web.Components/src/components/date-input/date-input.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import DateInput from '.';
+
+describe('<DateInput />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <DateInput selected={new Date()} dateFormat="dd.MM.yyyy" onChange={date => {}}/>
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/date-input/index.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components';
 import DatePicker from "react-datepicker";
 import InputBlock from '../input-block';
-import "react-datepicker/dist/react-datepicker.css";
 
 const StyledDatePicker = styled.div`
   width: 108px;

web/ASC.Web.Components/src/components/date-picker/README.md

@@ -1,27 +1,22 @@
-# Calendar
+# DatePicker
 
 #### Description
 
-Custom calendar
+DatePicker
 
 #### Usage
 
 ```js
-import { NewCalendar } from 'asc-web-components';
+import { DatePicker } from 'asc-web-components';
 
-<NewCalendar
-    onChange={date => {
-        action('Selected date')(date);
-    }}
-    disabled={boolean('disabled', false)}
-    themeColor={color('themeColor', '#ED7309')}
-    selectedDate={myDateKnob('selectedDate', new Date())}
-    openToDate={myDateKnob('openToDate', new Date())}
-    minDate={myDateKnob('minDate', new Date("1970/01/01"))}
-    maxDate={myDateKnob('maxDate', new Date("3000/01/01"))}
-    locale={select('location', locales, 'en')}
-    scaled = {boolean('scaled', false)}
-/>
+<DatePicker
+        onChange={date => {
+          console.log('Selected date', date);
+        }}
+        selectedDate={new Date()}
+        minDate={new Date("1970/01/01")}
+        maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")}
+      />
 ```
 
 #### Properties

web/ASC.Web.Components/src/components/date-picker/date-picker.stories.js

@@ -4,8 +4,8 @@ import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, color, select, date } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
-import { DatePicker } from 'asc-web-components';
-import Section from '../../.storybook/decorators/section';
+import DatePicker from '.';
+import Section from '../../../.storybook/decorators/section';
 import moment from 'moment';
 import 'moment/min/locales'
 
@@ -16,10 +16,10 @@ function myDateKnob(name, defaultValue) {
 
 const locales = moment.locales();
 
-storiesOf('Components|Date-picker', module)
+storiesOf('Components|DatePicker', module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))
-  .add('date-picker', () => (
+  .add('base', () => (
     <Section>
       <DatePicker
         onChange={date => {

web/ASC.Web.Components/src/components/date-picker/date-picker.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import DatePicker from '.';
+
+describe('<DatePicker />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <DatePicker
+        onChange={date => {
+          console.log('Selected date', date);
+        }}
+        selectedDate={new Date()}
+        minDate={new Date("1970/01/01")}
+        maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")}
+      />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/drop-down-item/drop-down-item.stories.js

@@ -3,7 +3,8 @@ import { storiesOf } from '@storybook/react'
 import { withKnobs, boolean, select } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme'
 import Readme from './README.md'
-import { DropDown, DropDownItem } from 'asc-web-components'
+import DropDown from '../drop-down';
+import DropDownItem from '.';
 import Section from '../../../.storybook/decorators/section';
 
 storiesOf('Components | DropDown', module)

web/ASC.Web.Components/src/components/drop-down-item/drop-down-item.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import DropDownItem from '.';
+
+describe('<DropDownItem />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <DropDownItem 
+        isSeparator={false}
+        isHeader={false} 
+        label='Button 1' 
+        icon='NavLogoIcon' 
+        onClick={() => console.log('Button 1 clicked')} />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/drop-down-profile-item/drop-down-profile-item.stories.js

@@ -2,7 +2,9 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import withReadme from 'storybook-readme/with-readme'
 import Readme from './README.md'
-import { DropDown, DropDownItem, DropDownProfileItem } from 'asc-web-components'
+import DropDown from '../drop-down';
+import DropDownItem from '../drop-down-item';
+import DropDownProfileItem from '.';
 import Section from '../../../.storybook/decorators/section';
 
 storiesOf('Components | DropDown', module)

web/ASC.Web.Components/src/components/drop-down-profile-item/drop-down-profile-item.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import DropDownProfileItem from '.';
+
+describe('<DropDownProfileItem />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <DropDownProfileItem
+        avatarRole='admin'
+        avatarSource=''
+        displayName='Jane Doe'
+        email='janedoe@gmail.com' />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/drop-down/drop-down.stories.js

@@ -3,7 +3,9 @@ import { storiesOf } from '@storybook/react'
 import withReadme from 'storybook-readme/with-readme'
 import Readme from './README.md'
 import { Container, Row, Col } from 'reactstrap';
-import { GroupButton, DropDown, DropDownItem} from 'asc-web-components'
+import DropDown from '.';
+import DropDownItem from '../drop-down-item';
+import GroupButton from '../group-button';
 
 const rowStyle = { marginTop: 8 };
 

web/ASC.Web.Components/src/components/drop-down/drop-down.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import DropDown from '.';
+
+describe('<DropDown />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <DropDown opened={false}></DropDown>
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/empty-screen-container/README.md

@@ -14,27 +14,12 @@ Used to display empty screen page
 
 ```js
 <EmptyScreenContainer
-      imageSrc={text("imageSrc", "empty_screen_filter.png")}
-      imageAlt={text("imageAlt", "Empty Screen Filter image")}
-      headerText={text(
-        "headerText",
-        "No results matching your search could be found"
-      )}
-      descriptionText={text(
-        "descriptionText",
-        "No people matching your filter can be displayed in this section. Please select other filter options or clear filter to view all the people in this section."
-      )}
+      imageSrc="empty_screen_filter.png"
+      imageAlt="Empty Screen Filter image"
+      headerText="No results matching your search could be found"
+      descriptionText="No results matching your search could be found"
       buttons={
-        <>
-          <Icons.CrossIcon size="small" style={{marginRight: "4px"}} />
-          <Link
-            type="action"
-            isHovered={true}
-            onClick={(e) => action("Reset filter clicked")(e)}
-          >
-            Reset filter
-          </Link>
-        </>
+        <a href="/">Go to home</a>
       }
     />
 ```

web/ASC.Web.Components/src/components/empty-screen-container/empty-screen-container.stories.js

@@ -4,7 +4,9 @@ import withReadme from "storybook-readme/with-readme";
 import Readme from "./README.md";
 import { withKnobs, text } from "@storybook/addon-knobs/react";
 import { action } from "@storybook/addon-actions";
-import { EmptyScreenContainer, Link, Icons } from "asc-web-components";
+import EmptyScreenContainer from ".";
+import Link from "../link";
+import { Icons } from "../icons";
 
 storiesOf("Components| EmptyScreenContainer", module)
   .addDecorator(withKnobs)

web/ASC.Web.Components/src/components/empty-screen-container/empty-screen-container.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import EmptyScreenContainer from '.';
+
+describe('<EmptyScreenContainer />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <EmptyScreenContainer
+        imageSrc="empty_screen_filter.png"
+        imageAlt="Empty Screen Filter image"
+        headerText="No results matching your search could be found"
+        descriptionText="No results matching your search could be found"
+        buttons={
+          <a href="/">Go to home</a>
+        }
+      />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/error-container/error-container.stories.js

@@ -3,7 +3,8 @@ import { storiesOf } from '@storybook/react'
 import withReadme from 'storybook-readme/with-readme'
 import Readme from './README.md'
 import { withKnobs, text } from '@storybook/addon-knobs/react';
-import { Text, ErrorContainer } from 'asc-web-components';
+import { Text } from '../text';
+import ErrorContainer from '.';
 
 storiesOf('Components| ErrorContainer', module)
     .addDecorator(withKnobs)

web/ASC.Web.Components/src/components/error-container/error-container.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ErrorContainer from '.';
+
+describe('<ErrorContainer />', () => {
+  it('renders without error', () => {
+    const wrapper = mount(
+      <ErrorContainer>Some error has happened</ErrorContainer>
+    );
+
+    expect(wrapper).toExist();
+  });
+});

web/ASC.Web.Components/src/components/examples/login.stories.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { Collapse, Container, Row, Col } from 'reactstrap';
 import { storiesOf } from '@storybook/react';
-import { TextInput, Button } from 'asc-web-components';
+import TextInput from '../text-input';
+import Button from '../button';
 
 const LoginForm = props => {
     const { loginPlaceholder, passwordPlaceholder, buttonText, onSubmit, errorText } = props;

web/ASC.Web.Components/src/components/examples/people.group-buttons-menu.stories.js

@@ -3,7 +3,9 @@ import { storiesOf } from '@storybook/react'
 import { withKnobs, text } from '@storybook/addon-knobs/react';
 import { BooleanValue } from 'react-values'
 import styled from '@emotion/styled';
-import { GroupButtonsMenu, DropDownItem, Button } from 'asc-web-components'
+import GroupButtonsMenu from '../group-buttons-menu';
+import DropDownItem from '../drop-down-item';
+import Button from '../button';
 
 const GroupButtonsMenuContainer = styled.div`
   height: 2000px;

web/ASC.Web.Components/src/components/examples/people.row.stories.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { Row, RowContent, Avatar, Link, Icons } from 'asc-web-components';
+import Row from '../row';
+import Avatar from '../avatar';
+import Link from '../link';
+import RowContent from '../combobox';
+import { Icons } from '../icons';
 import Section from '../../../.storybook/decorators/section';
 
 const fakeUsers = [