IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: components: Init merging components and storybook

Browse Source
This commit is contained in:
Alexey Safronov 2019-09-05 16:25:33 +03:00
parent b130cca7f7
commit ab2aff67a4
35 changed files with 5303 additions and 1357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/ASC.Web.Components/.editorconfig Normal file
View File

@ -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

1
web/ASC.Web.Components/.eslintignore Normal file
View File

@ -0,0 +1 @@
dist/

13
web/ASC.Web.Components/.eslintrc.js Normal file
View File

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

7
web/ASC.Web.Components/.storybook/.babelrc Normal file
View File

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

9
web/ASC.Web.Components/.storybook/addons.js Normal file
View File

@ -0,0 +1,9 @@
import '@storybook/addons';
import 'storybook-readme/register';
import '@storybook/addon-knobs/register';
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-a11y/register';

47
web/ASC.Web.Components/.storybook/config.js Normal file
View File

@ -0,0 +1,47 @@
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 '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$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
addDecorator((storyFn, context) => withConsole()(storyFn)(context));
configure(loadStories, module);

12
web/ASC.Web.Components/.storybook/decorators/section/index.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
const sectionStyles = {
padding: 16,
};
const Section = props => <div style={sectionStyles}>{props.children}</div>;
Section.propTypes = { children: PropTypes.node.isRequired };
export default Section;

10
web/ASC.Web.Components/.storybook/index.css Normal file
View File

@ -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
*/
html {
padding: 2rem;
}

1
web/ASC.Web.Components/.storybook/manager-head.html Normal file
View File

@ -0,0 +1 @@
<script>document.title = "ASC Storybook";</script>

24
web/ASC.Web.Components/.storybook/preview-head.html Normal file
View File

@ -0,0 +1,24 @@
<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;
}
/*
Make main panel more readable when its showing a README.
Limit width to make text more readable.
*/
.storybook-readme-story {
max-width: 800px;
/* We need !important since the element has padding as inline styles too */
padding: 32px !important;
}
</style>

67
web/ASC.Web.Components/.storybook/webpack.config.js Normal file
View File

@ -0,0 +1,67 @@
const path = require("path");
const webpack = require('webpack'); //to access built-in plugins
/*
Code reference:
https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
*/
// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
// `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
/* ********* SASS *********
If you want to work with sass, enable the following module:
config.module.rules.push({
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: { plugins: () => [require('autoprefixer')()] }
},
'sass-loader'
],
include: path.resolve(__dirname, '../')
});
and don't forget to install as devDependencies:
- style-loader
- css-loader
- postcss-loader
- autoprefixer
*/
/* resolver to make story panel work */
config.resolve.alias = {
"styled-components": path.resolve(
__dirname,
"../node_modules",
"styled-components"
)
};
config.module.rules.push({
test: /\.stories.js?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
});
config.module.rules.push({
test: /\.react.svg$/,
loader: 'svg-inline-loader',
});
config.plugins.push(
new webpack.ProvidePlugin({
"React": "react",
}));
// Return the altered config
return config;
};

21
web/ASC.Web.Components/babel.config.js Normal file
View File

@ -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'],
},
},
};

4
web/ASC.Web.Components/config/setupTest.js Normal file
View File

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

19
web/ASC.Web.Components/jest.config.js Normal file
View File

@ -0,0 +1,19 @@
module.exports = {
setupFilesAfterEnv: [
/* Enables jest-enzyme assertions
https://github.com/FormidableLabs/enzyme-matchers/tree/master/packages/jest-enzyme#readme
*/
'<rootDir>/node_modules/jest-enzyme/lib/index.js',
'<rootDir>/config/setupTest.js',
],
transform: {
'^.+\\.js$': 'babel-jest',
},
/* 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: {
'^.+\\.(css|less|scss)$': 'babel-jest',
},
};

156
web/ASC.Web.Components/package.json
View File

@ -1,30 +1,93 @@
{
"name": "asc-web-components",
"version": "1.0.35",
"description": "Ascensio System SIA component library",
"version": "1.0.35",
"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",
"styled-components": "^4.3.2"
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0"
},
"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.10",
"@storybook/addon-actions": "^5.1.10",
"@storybook/addon-console": "^1.2.1",
"@storybook/addon-knobs": "^5.1.11",
"@storybook/addon-links": "^5.1.10",
"@storybook/addon-options": "^5.1.11",
"@storybook/addon-storysource": "^5.1.10",
"@storybook/addon-viewport": "^5.1.10",
"@storybook/addons": "^5.1.11",
"@storybook/react": "^5.1.10",
"@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-rename-import": "^2.3.0",
"cross-env": "^5.2.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^6.1.0",
"eslint-plugin-react": "^7.14.3",
"jest": "^24.8.0",
"jest-enzyme": "^7.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"require-context.macro": "^1.1.1",
"rollup": "^1.19.4",
"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.0.4",
"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.6",
"svg-inline-loader": "^0.8.0"
},
"dependencies": {
"@emotion/core": "10.0.16",
"@emotion/styled": "10.0.15",
"bootstrap": "^4.3.1",
"lodash": "4.17.15",
"lodash-es": "4.17.15",
@ -37,73 +100,10 @@
"react-datepicker": "^2.8.0",
"react-lifecycles-compat": "^3.0.4",
"react-toastify": "^5.3.2",
"react-values": "^0.3.3",
"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"
]
"reactstrap": "^8.0.1",
"styled-components": "^4.3.2"
}
}

BIN
web/ASC.Web.Components/public/empty_screen_filter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
web/ASC.Web.Components/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

38
web/ASC.Web.Components/public/index.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>ASC Storybook</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

34
web/ASC.Web.Components/public/light_small_general.svg Normal file
View File

@ -0,0 +1,34 @@
<svg width="142" height="23" viewBox="0 0 142 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M31 12.0026C31 9.62504 31.6829 7.83068 33.0943 6.66435C34.4602 5.45316 36.0993 4.87 37.966 4.87C39.8326 4.87 41.4262 5.45316 42.792 6.66435C44.1579 7.87554 44.8409 9.62504 44.8409 12.0474C44.8409 14.4249 44.1579 16.2193 42.792 17.3856C41.4262 18.5968 39.7871 19.18 37.966 19.18C36.0993 19.18 34.5057 18.5968 33.0943 17.3856C31.6829 16.1744 31 14.3801 31 12.0026ZM34.0049 12.0026C34.0049 13.6623 34.3236 14.8287 34.9155 15.5913C35.5529 16.3539 36.2358 16.8473 36.9643 17.0268C37.1464 17.0716 37.283 17.1165 37.4651 17.1165C37.6017 17.1165 37.7838 17.1613 37.9204 17.1613C38.1025 17.1613 38.2391 17.1613 38.4212 17.1165C38.6034 17.1165 38.74 17.0716 38.9221 17.0268C39.6505 16.8473 40.3335 16.3539 40.9253 15.5913C41.5172 14.8287 41.8359 13.6175 41.8359 12.0474C41.8359 10.4774 41.5172 9.26617 40.9253 8.50357C40.3335 7.74097 39.6505 7.24752 38.9221 7.06808C38.74 7.02322 38.5578 6.97836 38.4212 6.97836C38.2391 6.97836 38.1025 6.93351 37.9204 6.93351C37.7383 6.93351 37.6017 6.9335 37.4651 6.97836C37.3285 6.97836 37.1464 7.02322 36.9643 7.06808C36.2358 7.24752 35.5529 7.74097 34.9155 8.50357C34.3236 9.22131 34.0049 10.3876 34.0049 12.0026Z" fill="white"/>
<path d="M46.3433 5.00449H50.0767L54.9938 13.8417L55.7223 15.7258H55.7678L55.7223 13.2585V5.00449H58.5906V19.0005H54.8573L49.9401 9.84925L49.2116 8.27919H49.1661L49.2116 10.7464V19.0005H46.3433V5.00449Z" fill="white"/>
<path d="M61.0948 5.00449H63.9631V16.6229H69.6087V19.0005H61.0948V5.00449Z" fill="white"/>
<path d="M67.8331 5.00449H71.1567L74.0705 9.93897L74.5258 10.881H74.6169L75.0722 9.93897L78.0316 5.00449H81.082L75.9372 13.3034V19.0005H73.0689V13.3034L67.8331 5.00449Z" fill="white"/>
<path d="M81.1731 12.0026C81.1731 9.62504 81.856 7.83068 83.2674 6.66435C84.6333 5.45316 86.2723 4.87 88.139 4.87C90.0057 4.87 91.5993 5.45316 92.9651 6.66435C94.331 7.87554 95.0139 9.62504 95.0139 12.0474C95.0139 14.4249 94.331 16.2193 92.9651 17.3856C91.5993 18.5968 89.9602 19.18 88.139 19.18C86.2723 19.18 84.6788 18.5968 83.2674 17.3856C81.9016 16.1744 81.1731 14.3801 81.1731 12.0026ZM84.178 12.0026C84.178 13.6623 84.4967 14.8287 85.0886 15.5913C85.726 16.3539 86.3634 16.8473 87.1374 17.0268C87.3195 17.0716 87.5016 17.1165 87.6382 17.1165C87.7748 17.1165 87.9569 17.1613 88.0935 17.1613C88.2756 17.1613 88.4122 17.1613 88.5943 17.1165C88.7764 17.1165 88.913 17.0716 89.0952 17.0268C89.8236 16.8473 90.5066 16.3539 91.0984 15.5913C91.6903 14.8287 92.009 13.6175 92.009 12.0474C92.009 10.4774 91.6903 9.26617 91.0984 8.50357C90.5066 7.74097 89.8236 7.24752 89.0952 7.06808C88.913 7.02322 88.7309 6.97836 88.5943 6.97836C88.4122 6.97836 88.2756 6.93351 88.0935 6.93351C87.9114 6.93351 87.7748 6.9335 87.6382 6.97836C87.5016 6.97836 87.3195 7.02322 87.1374 7.06808C86.4089 7.24752 85.726 7.74097 85.0886 8.50357C84.4967 9.22131 84.178 10.3876 84.178 12.0026Z" fill="#D7E4EA"/>
<path d="M96.5619 5.00449H104.484V7.38201H99.4303V10.7464H104.256V13.1239H99.4303V19.0005H96.5619V5.00449Z" fill="#D7E4EA"/>
<path d="M106.169 5.00449H114.091V7.38201H109.037V10.7464H113.863V13.1239H109.037V19.0005H106.169V5.00449Z" fill="#D7E4EA"/>
<path d="M115.775 19.0005V5.00449H118.644V19.0005H115.775Z" fill="#D7E4EA"/>
<path d="M131.665 5.3185V7.74088C131.164 7.56144 130.663 7.42687 130.117 7.33715C129.571 7.24743 128.979 7.20257 128.341 7.20257C126.839 7.20257 125.701 7.65116 124.881 8.5932C124.062 9.49038 123.652 10.6567 123.652 12.0473C123.652 13.3931 124.016 14.5146 124.79 15.4118C125.564 16.3089 126.657 16.8024 128.068 16.8024C128.569 16.8024 129.07 16.7575 129.662 16.7127C130.253 16.6229 130.845 16.4884 131.483 16.2192L131.665 18.5967C131.574 18.6416 131.437 18.6865 131.301 18.7313C131.119 18.7762 130.936 18.821 130.709 18.8659C130.345 18.9556 129.889 19.0005 129.343 19.0902C128.797 19.135 128.25 19.1799 127.658 19.1799C127.567 19.1799 127.476 19.1799 127.431 19.1799C127.34 19.1799 127.249 19.1799 127.203 19.1799C125.564 19.0902 124.062 18.4622 122.696 17.3855C121.33 16.2641 120.647 14.5146 120.647 12.1819C120.647 9.89411 121.33 8.09975 122.65 6.8437C123.97 5.58765 125.792 4.95963 128.023 4.95963C128.614 4.95963 129.161 4.95963 129.616 5.00448C130.117 5.04934 130.572 5.13906 131.073 5.22878C131.164 5.27364 131.301 5.27364 131.392 5.3185C131.437 5.27364 131.528 5.3185 131.665 5.3185Z" fill="#D7E4EA"/>
<path d="M133.486 5.00449H142V7.20257H136.4V10.7016H141.454V12.8997H136.4V16.8024H142V19.0005H133.486V5.00449Z" fill="#D7E4EA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9389 22.718L0.657327 17.9809C-0.218514 17.5673 -0.218514 16.9282 0.657327 16.5522L4.23685 14.898L10.9009 17.9809C11.7767 18.3944 13.1857 18.3944 14.0234 17.9809L20.6874 14.898L24.267 16.5522C25.1428 16.9658 25.1428 17.6049 24.267 17.9809L13.9853 22.718C13.1857 23.094 11.7767 23.094 10.9389 22.718Z" fill="url(#paint0_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9389 16.8906L0.657327 12.1535C-0.218514 11.7399 -0.218514 11.1008 0.657327 10.7248L4.16069 9.10815L10.9389 12.2287C11.8148 12.6422 13.2237 12.6422 14.0615 12.2287L20.8398 9.10815L24.3431 10.7248C25.219 11.1384 25.219 11.7775 24.3431 12.1535L14.0615 16.8906C13.1857 17.3042 11.7767 17.3042 10.9389 16.8906Z" fill="url(#paint1_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9385 11.2131L0.656881 6.47597C-0.21896 6.06241 -0.21896 5.42327 0.656881 5.04731L10.9385 0.31017C11.8143 -0.10339 13.2233 -0.10339 14.0611 0.31017L24.3427 5.04731C25.2185 5.46087 25.2185 6.10001 24.3427 6.47597L14.0611 11.2131C13.1852 11.5891 11.7763 11.5891 10.9385 11.2131Z" fill="url(#paint2_linear)"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="12.4914" y1="27.2083" x2="12.4914" y2="9.91349" gradientUnits="userSpaceOnUse">
<stop stop-color="#FCC2B1"/>
<stop offset="0.8848" stop-color="#D9420B"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="12.4914" y1="19.7202" x2="12.4914" y2="8.34589" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEEDC9"/>
<stop offset="0.6606" stop-color="#8BBA25"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="12.4909" y1="15.114" x2="12.4909" y2="-0.363895" gradientUnits="userSpaceOnUse">
<stop stop-color="#C2EBFA"/>
<stop offset="1" stop-color="#26A8DE"/>
</linearGradient>
<clipPath id="clip0">
<rect width="142" height="23" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

15
web/ASC.Web.Components/public/manifest.json Normal file
View File

@ -0,0 +1,15 @@
{
"short_name": "ASC Web Components Storybook",
"name": "ASC Storybook",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

BIN
web/ASC.Web.Components/public/modules/community_logolarge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
web/ASC.Web.Components/public/modules/crm_logolarge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
web/ASC.Web.Components/public/modules/documents240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
web/ASC.Web.Components/public/modules/mail_logolarge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
web/ASC.Web.Components/public/modules/people_logolarge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
web/ASC.Web.Components/public/modules/projects_logolarge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

6
web/ASC.Web.Components/rollup.config.js
View File

@ -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(),

44
web/ASC.Web.Components/src/components/advanced-selector/README.md Normal file
View File

@ -0,0 +1,44 @@
# AdvancedSelector
## Usage
```js
import { AdvancedSelector } from 'asc-web-components';
```
#### Description
Required to select some advanced data.
#### Usage
```js
let options = [{key: "self", label: "Me"}];
options = [...options, ...[...Array(100).keys()].map(
index => {
return { key: `user${index}`, label: `User ${index+1} of ${optionsCount}` };
}
)];
<AdvancedSelector
placeholder="Search users"
onSearchChanged={(e) => console.log(e.target.value)}
options={options}
isMultiSelect={false}
buttonLabel="Add members"
onSelect={(selectedOptions) => console.log("onSelect", selectedOptions)}
/>
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | ----------------------------------------- | --------- | ----------------------------------------------------- |
| `placeholder` | `string` | - | | | |
| `options` | `array of objects` | - | | | |
| `isMultiSelect` | `bool` | - | - | | |
| `buttonLabel` | `string` | - | - | | |
| `onSearchChanged` | `func` | - | - | | |
| `onSelect` | `func` | - | - | | |

109
web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js Normal file
View File

@ -0,0 +1,109 @@
import React from "react";
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 "./";
import Section from "../../../.storybook/decorators/section";
import { boolean } from "@storybook/addon-knobs/dist/deprecated";
import { ArrayValue } from "react-values";
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
storiesOf("Components|AdvancedSelector", module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add("base", () => {
const optionsCount = number("Users count", 1000);
const groups = [
{
key: "group-all",
label: "All groups",
total: 0
},
{
key: "group-dev",
label: "Development",
total: 0
},
{
key: "group-management",
label: "Management",
total: 0
},
{
key: "group-marketing",
label: "Marketing",
total: 0
},
{
key: "group-mobile",
label: "Mobile",
total: 0
},
{
key: "group-support",
label: "Support",
total: 0
},
{
key: "group-web",
label: "Web",
total: 0
}
];
const options = Array.from({ length: optionsCount }, (v, index) => {
const additional_group = groups[getRandomInt(1, 6)];
groups[0].total++;
additional_group.total++;
return {
key: `user${index}`,
groups: ["group-all", additional_group.key],
label: `User${index + 1} (All groups, ${additional_group.label})`
};
});
return (
<Section>
<ArrayValue
defaultValue={options}
onChange={() => console.log("ArrayValue onChange")}
>
{({ value, set }) => (
<AdvancedSelector
placeholder={text("placeholder", "Search users")}
onSearchChanged={value => {
set(options.filter(option => {
return (
option.label.indexOf(value) > -1
);
}));
}}
options={value}
groups={groups}
selectedGroups={[groups[0]]}
isMultiSelect={boolean("isMultiSelect", true)}
buttonLabel={text("buttonLabel", "Add members")}
selectAllLabel={text("selectAllLabel", "Select all")}
onSelect={selectedOptions => {
console.log("onSelect", selectedOptions);
}}
onChangeGroup={group => {
set(options.filter(option => {
return (
option.groups &&
option.groups.length > 0 &&
option.groups.indexOf(group.key) > -1
);
}));
}}
/>
)}
</ArrayValue>
</Section>
);
});

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

@ -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";

36
web/ASC.Web.Components/src/components/module-tile/README.md Normal file
View File

@ -0,0 +1,36 @@
# ModuleTile
## Usage
```js
import { ModuleTile } from 'asc-web-components';
```
#### Description
Module tile is used for navigation to module page.
#### Usage
```js
<ModuleTile
title="Documents"
imageUrl="./modules/documents240.png"
link="/products/files/"
description="Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed."
isPrimary={true}
onClick={action("onClick")}
/>
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `title` | `string` | - | - | - | Title of tile |
| `imageUrl` | `string` | - | - | - | Image url/path |
| `link` | `string` | - | - | - | Link to return on onClick |
| `description` | `string` | - | - | - | Description of primary tile |
| `isPrimary` | `bool` | - | - | - | Tells when the tile should be primary |
| `onClick` | `func` | ✅ | - | - | What the tile will trigger when clicked |

75
web/ASC.Web.Components/src/components/module-tile/all.tiles.stories.js Normal file
View File

@ -0,0 +1,75 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Container, Row, Col } from 'reactstrap';
import ModuleTile from '../module-tile';
const rowStyle = { marginTop: 8 };
storiesOf('Components|ModuleTile', module)
// To set a default viewport for all the stories for this component
.addParameters({ viewport: { defaultViewport: 'responsive' } })
.addParameters({ options: { showAddonPanel: false }})
.add('all', () => (
<Container>
<Row style={rowStyle}>
<Col>
<ModuleTile
title="Documents"
imageUrl="./modules/documents240.png"
link="/products/files/"
description="Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed."
isPrimary={true}
onClick={action("onClick")}
/>
</Col>
</Row>
<Row style={rowStyle}>
<Col>
<ModuleTile
title="Projects"
imageUrl="./modules/projects_logolarge.png"
link="products/projects/"
isPrimary={false}
onClick={action("onClick")}
/>
</Col>
<Col>
<ModuleTile
title="Crm"
imageUrl="./modules/crm_logolarge.png"
link="/products/crm/"
isPrimary={false}
onClick={action("onClick")}
/>
</Col>
<Col>
<ModuleTile
title="Mail"
imageUrl="./modules/mail_logolarge.png"
link="/products/mail/"
isPrimary={false}
onClick={action("onClick")}
/>
</Col>
<Col>
<ModuleTile
title="People"
imageUrl="./modules/people_logolarge.png"
link="/products/people/"
isPrimary={false}
onClick={action("onClick")}
/>
</Col>
<Col>
<ModuleTile
title="Community"
imageUrl="./modules/community_logolarge.png"
link="products/community/"
isPrimary={false}
onClick={action("onClick")}
/>
</Col>
</Row>
</Container>
));

32
web/ASC.Web.Components/src/components/module-tile/tile.stories.js Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Container, Row, Col } from 'reactstrap';
import ModuleTile from '../module-tile';
import withReadme from 'storybook-readme/with-readme';
import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
import Readme from './README.md';
const rowStyle = { marginTop: 8 };
storiesOf('Components|ModuleTile', module)
// To set a default viewport for all the stories for this component
.addParameters({ viewport: { defaultViewport: 'responsive' } })
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => (
<Container>
<Row style={rowStyle}>
<Col>
<ModuleTile
title={text("title", "Documents")}
imageUrl="./modules/documents240.png"
link="/products/files/"
description={text("description", "Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed.")}
isPrimary={boolean("isPrimary", true)}
onClick={action("onClick")}
/>
</Col>
</Row>
</Container>
));

19
web/ASC.Web.Components/src/components/module-tile/tile.test.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import { mount } from 'enzyme';
import ModuleTile from './';
describe('<ModuleTile />', () => {
it('renders without error', () => {
const wrapper = mount(<ModuleTile
title="Documents"
imageUrl="./modules/documents240.png"
link="/products/files/"
description="Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed."
isPrimary={true}
/>
);
expect(wrapper).toExist();
});
});

5850
web/ASC.Web.Components/yarn.lock
View File

File diff suppressed because it is too large Load Diff