Setup react library environment + Added Button and Input component to asc-web-components
This commit is contained in:
parent
5c0943f2dd
commit
75344f69bb
1
.gitignore
vendored
1
.gitignore
vendored
@ -7,3 +7,4 @@
|
|||||||
.vscode/
|
.vscode/
|
||||||
*-lock.json
|
*-lock.json
|
||||||
*.lock
|
*.lock
|
||||||
|
**/node_modules/
|
||||||
|
@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"presets": [
|
|
||||||
["env", {
|
|
||||||
"modules": false
|
|
||||||
}],
|
|
||||||
"stage-0",
|
|
||||||
"react"
|
|
||||||
]
|
|
||||||
}
|
|
@ -1,9 +0,0 @@
|
|||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
charset = utf-8
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
end_of_line = lf
|
|
||||||
insert_final_newline = true
|
|
||||||
trim_trailing_whitespace = true
|
|
@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"parser": "babel-eslint",
|
|
||||||
"extends": [
|
|
||||||
"standard",
|
|
||||||
"standard-react"
|
|
||||||
],
|
|
||||||
"env": {
|
|
||||||
"es6": true
|
|
||||||
},
|
|
||||||
"plugins": [
|
|
||||||
"react"
|
|
||||||
],
|
|
||||||
"parserOptions": {
|
|
||||||
"sourceType": "module"
|
|
||||||
},
|
|
||||||
"rules": {
|
|
||||||
// don't force es6 functions to include space before paren
|
|
||||||
"space-before-function-paren": 0,
|
|
||||||
|
|
||||||
// allow specifying true explicitly for boolean props
|
|
||||||
"react/jsx-boolean-value": 0
|
|
||||||
}
|
|
||||||
}
|
|
23
web/ASC.Web.Components/.gitignore
vendored
23
web/ASC.Web.Components/.gitignore
vendored
@ -1,22 +1 @@
|
|||||||
|
node_modules/
|
||||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# dependencies
|
|
||||||
node_modules
|
|
||||||
|
|
||||||
# builds
|
|
||||||
build
|
|
||||||
dist
|
|
||||||
.rpt2_cache
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
|
||||||
.env
|
|
||||||
.env.local
|
|
||||||
.env.development.local
|
|
||||||
.env.test.local
|
|
||||||
.env.production.local
|
|
||||||
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
|
@ -1,4 +0,0 @@
|
|||||||
language: node_js
|
|
||||||
node_js:
|
|
||||||
- 9
|
|
||||||
- 8
|
|
@ -1,13 +1,13 @@
|
|||||||
# asc.web.components
|
# asc-web-components
|
||||||
|
|
||||||
>
|
>
|
||||||
|
|
||||||
[![NPM](https://img.shields.io/npm/v/asc.web.components.svg)](https://www.npmjs.com/package/asc.web.components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
|
[![NPM](https://img.shields.io/npm/v/asc-web-components.svg)](https://www.npmjs.com/package/asc-web-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install --save asc.web.components
|
npm install --save asc-web-components
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
@ -15,7 +15,7 @@ npm install --save asc.web.components
|
|||||||
```jsx
|
```jsx
|
||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
|
|
||||||
import MyComponent from 'asc.web.components'
|
import MyComponent from 'asc-web-components'
|
||||||
|
|
||||||
class Example extends Component {
|
class Example extends Component {
|
||||||
render () {
|
render () {
|
||||||
|
138
web/ASC.Web.Components/dist/asc-web-components.cjs.js
vendored
Normal file
138
web/ASC.Web.Components/dist/asc-web-components.cjs.js
vendored
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
||||||
|
|
||||||
|
var core = require('@emotion/core');
|
||||||
|
require('react');
|
||||||
|
var styled = require('styled-components');
|
||||||
|
var styled__default = _interopDefault(styled);
|
||||||
|
var PropTypes = _interopDefault(require('prop-types'));
|
||||||
|
|
||||||
|
function _extends() {
|
||||||
|
_extends = Object.assign || function (target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i];
|
||||||
|
|
||||||
|
for (var key in source) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||||
|
target[key] = source[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
};
|
||||||
|
|
||||||
|
return _extends.apply(this, arguments);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _taggedTemplateLiteral(strings, raw) {
|
||||||
|
if (!raw) {
|
||||||
|
raw = strings.slice(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Object.freeze(Object.defineProperties(strings, {
|
||||||
|
raw: {
|
||||||
|
value: Object.freeze(raw)
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
var _jsxFileName = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\Button\\index.js";
|
||||||
|
function _templateObject4() {
|
||||||
|
var data = _taggedTemplateLiteral(["\n border-width: 1px;\n border-style: solid;\n border-color: #dadada;\n "]);
|
||||||
|
_templateObject4 = function _templateObject4() {
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
function _templateObject3() {
|
||||||
|
var data = _taggedTemplateLiteral(["\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: #ffffff;\n\n ", "\n }\n\n \n\n "]);
|
||||||
|
_templateObject3 = function _templateObject3() {
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
function _templateObject2() {
|
||||||
|
var data = _taggedTemplateLiteral(["\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n "]);
|
||||||
|
_templateObject2 = function _templateObject2() {
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
function _templateObject() {
|
||||||
|
var data = _taggedTemplateLiteral(["\n /* Adapt the colors based on primary prop */\n background-color: ", ";\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n\n height: ", ";\n padding: ", ";\n\n border: none;\n cursor: ", ";\n display: inline-block;\n font-family: 'Open Sans', sans-serif;\n margin: 0;\n font-weight: normal;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n border-radius: 3px;\n -moz-border-radius: 3px;\n -webkit-border-radius: 3px;\n touch-callout: none;\n -o-touch-callout: none;\n -moz-touch-callout: none;\n -webkit-touch-callout: none;\n user-select: none;\n -o-user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n\n ", "\n\n ", "\n"]);
|
||||||
|
_templateObject = function _templateObject() {
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
var StyledButton = styled__default.button(_templateObject(), function (props) {
|
||||||
|
return !props.disabled ? props.primary ? '#2da7db' : '#ebebeb' : props.primary ? '#a6dcf2' : '#f7f7f7';
|
||||||
|
}, function (props) {
|
||||||
|
return props.primary ? '#ffffff' : !props.disabled ? '#666666' : '#999';
|
||||||
|
}, function (props) {
|
||||||
|
return props.size === 'huge' || props.size === 'big' ? '15px' : '12px';
|
||||||
|
}, function (props) {
|
||||||
|
return props.size === 'huge' ? '15px;' : props.size === 'big' ? '17px;' : '13px;';
|
||||||
|
}, function (props) {
|
||||||
|
return props.size === 'huge' ? '40px' : props.size === 'big' ? '32px' : props.size === 'middle' ? '24px' : '21px';
|
||||||
|
}, function (props) {
|
||||||
|
return props.size === 'huge' ? '12px 30px 13px;' : props.size === 'big' ? '7px 30px 8px;' : props.size === 'middle' ? '5px 24px 6px;' : '4px 13px;';
|
||||||
|
}, function (props) {
|
||||||
|
return !props.disabled ? 'pointer' : 'default';
|
||||||
|
}, function (props) {
|
||||||
|
return !props.primary && styled.css(_templateObject2(), function (props) {
|
||||||
|
return !props.disabled ? '#c4c4c4' : '#ebebeb';
|
||||||
|
});
|
||||||
|
}, function (props) {
|
||||||
|
return !props.disabled && styled.css(_templateObject3(), function (props) {
|
||||||
|
return props.primary ? '#3db8ec' : '#f5f5f5';
|
||||||
|
}, function (props) {
|
||||||
|
return props.primary ? '#ffffff' : '#666666';
|
||||||
|
}, function (props) {
|
||||||
|
return props.primary ? '#1f97ca' : '#e2e2e2';
|
||||||
|
}, function (props) {
|
||||||
|
return !props.primary && styled.css(_templateObject4());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
var Button = function Button(props) {
|
||||||
|
return core.jsx(StyledButton, _extends({}, props, {
|
||||||
|
__source: {
|
||||||
|
fileName: _jsxFileName,
|
||||||
|
lineNumber: 86
|
||||||
|
},
|
||||||
|
__self: this
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
Button.PropTypes = {
|
||||||
|
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
|
||||||
|
primary: PropTypes.bool,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
onClick: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
Button.defaultProps = {
|
||||||
|
primary: false,
|
||||||
|
disabled: false,
|
||||||
|
size: 'base'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _jsxFileName$1 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\Input\\index.js";
|
||||||
|
var Input = function Input(props) {
|
||||||
|
return core.jsx("input", {
|
||||||
|
value: props.value,
|
||||||
|
__source: {
|
||||||
|
fileName: _jsxFileName$1,
|
||||||
|
lineNumber: 7
|
||||||
|
},
|
||||||
|
__self: this
|
||||||
|
});
|
||||||
|
};
|
||||||
|
Input.PropTypes = {
|
||||||
|
value: PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
|
exports.Button = Button;
|
||||||
|
exports.Input = Input;
|
130
web/ASC.Web.Components/dist/asc-web-components.esm.js
vendored
Normal file
130
web/ASC.Web.Components/dist/asc-web-components.esm.js
vendored
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
import { jsx } from '@emotion/core';
|
||||||
|
import 'react';
|
||||||
|
import styled, { css } from 'styled-components';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
function _extends() {
|
||||||
|
_extends = Object.assign || function (target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i];
|
||||||
|
|
||||||
|
for (var key in source) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||||
|
target[key] = source[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
};
|
||||||
|
|
||||||
|
return _extends.apply(this, arguments);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _taggedTemplateLiteral(strings, raw) {
|
||||||
|
if (!raw) {
|
||||||
|
raw = strings.slice(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Object.freeze(Object.defineProperties(strings, {
|
||||||
|
raw: {
|
||||||
|
value: Object.freeze(raw)
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
var _jsxFileName = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\Button\\index.js";
|
||||||
|
function _templateObject4() {
|
||||||
|
var data = _taggedTemplateLiteral(["\n border-width: 1px;\n border-style: solid;\n border-color: #dadada;\n "]);
|
||||||
|
_templateObject4 = function _templateObject4() {
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
function _templateObject3() {
|
||||||
|
var data = _taggedTemplateLiteral(["\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: #ffffff;\n\n ", "\n }\n\n \n\n "]);
|
||||||
|
_templateObject3 = function _templateObject3() {
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
function _templateObject2() {
|
||||||
|
var data = _taggedTemplateLiteral(["\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n "]);
|
||||||
|
_templateObject2 = function _templateObject2() {
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
function _templateObject() {
|
||||||
|
var data = _taggedTemplateLiteral(["\n /* Adapt the colors based on primary prop */\n background-color: ", ";\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n\n height: ", ";\n padding: ", ";\n\n border: none;\n cursor: ", ";\n display: inline-block;\n font-family: 'Open Sans', sans-serif;\n margin: 0;\n font-weight: normal;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n border-radius: 3px;\n -moz-border-radius: 3px;\n -webkit-border-radius: 3px;\n touch-callout: none;\n -o-touch-callout: none;\n -moz-touch-callout: none;\n -webkit-touch-callout: none;\n user-select: none;\n -o-user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n\n ", "\n\n ", "\n"]);
|
||||||
|
_templateObject = function _templateObject() {
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
var StyledButton = styled.button(_templateObject(), function (props) {
|
||||||
|
return !props.disabled ? props.primary ? '#2da7db' : '#ebebeb' : props.primary ? '#a6dcf2' : '#f7f7f7';
|
||||||
|
}, function (props) {
|
||||||
|
return props.primary ? '#ffffff' : !props.disabled ? '#666666' : '#999';
|
||||||
|
}, function (props) {
|
||||||
|
return props.size === 'huge' || props.size === 'big' ? '15px' : '12px';
|
||||||
|
}, function (props) {
|
||||||
|
return props.size === 'huge' ? '15px;' : props.size === 'big' ? '17px;' : '13px;';
|
||||||
|
}, function (props) {
|
||||||
|
return props.size === 'huge' ? '40px' : props.size === 'big' ? '32px' : props.size === 'middle' ? '24px' : '21px';
|
||||||
|
}, function (props) {
|
||||||
|
return props.size === 'huge' ? '12px 30px 13px;' : props.size === 'big' ? '7px 30px 8px;' : props.size === 'middle' ? '5px 24px 6px;' : '4px 13px;';
|
||||||
|
}, function (props) {
|
||||||
|
return !props.disabled ? 'pointer' : 'default';
|
||||||
|
}, function (props) {
|
||||||
|
return !props.primary && css(_templateObject2(), function (props) {
|
||||||
|
return !props.disabled ? '#c4c4c4' : '#ebebeb';
|
||||||
|
});
|
||||||
|
}, function (props) {
|
||||||
|
return !props.disabled && css(_templateObject3(), function (props) {
|
||||||
|
return props.primary ? '#3db8ec' : '#f5f5f5';
|
||||||
|
}, function (props) {
|
||||||
|
return props.primary ? '#ffffff' : '#666666';
|
||||||
|
}, function (props) {
|
||||||
|
return props.primary ? '#1f97ca' : '#e2e2e2';
|
||||||
|
}, function (props) {
|
||||||
|
return !props.primary && css(_templateObject4());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
var Button = function Button(props) {
|
||||||
|
return jsx(StyledButton, _extends({}, props, {
|
||||||
|
__source: {
|
||||||
|
fileName: _jsxFileName,
|
||||||
|
lineNumber: 86
|
||||||
|
},
|
||||||
|
__self: this
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
Button.PropTypes = {
|
||||||
|
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
|
||||||
|
primary: PropTypes.bool,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
onClick: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
Button.defaultProps = {
|
||||||
|
primary: false,
|
||||||
|
disabled: false,
|
||||||
|
size: 'base'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _jsxFileName$1 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\Input\\index.js";
|
||||||
|
var Input = function Input(props) {
|
||||||
|
return jsx("input", {
|
||||||
|
value: props.value,
|
||||||
|
__source: {
|
||||||
|
fileName: _jsxFileName$1,
|
||||||
|
lineNumber: 7
|
||||||
|
},
|
||||||
|
__self: this
|
||||||
|
});
|
||||||
|
};
|
||||||
|
Input.PropTypes = {
|
||||||
|
value: PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Button, Input };
|
1
web/ASC.Web.Components/example/.gitignore
vendored
Normal file
1
web/ASC.Web.Components/example/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
node_modules/
|
7
web/ASC.Web.Components/example/.storybook/addons.js
Normal file
7
web/ASC.Web.Components/example/.storybook/addons.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
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';
|
@ -1,8 +1,9 @@
|
|||||||
import { configure } from '@storybook/react';
|
import { configure } from '@storybook/react';
|
||||||
|
|
||||||
|
// automatically import all files ending in *.stories.js
|
||||||
|
const req = require.context('../stories', true, /\.stories\.js$/);
|
||||||
function loadStories() {
|
function loadStories() {
|
||||||
require('../stories/index.js');
|
req.keys().forEach(filename => req(filename));
|
||||||
// You can require as many stories as you need.
|
|
||||||
}
|
}
|
||||||
|
|
||||||
configure(loadStories, module);
|
configure(loadStories, module);
|
@ -0,0 +1,9 @@
|
|||||||
|
module.exports = function({ config }) {
|
||||||
|
config.module.rules.push({
|
||||||
|
test: /\.stories\.js?$/,
|
||||||
|
loaders: [require.resolve('@storybook/addon-storysource/loader')],
|
||||||
|
enforce: 'pre',
|
||||||
|
});
|
||||||
|
|
||||||
|
return config;
|
||||||
|
};
|
File diff suppressed because it is too large
Load Diff
@ -1,26 +1,57 @@
|
|||||||
{
|
{
|
||||||
"name": "asc.web.components-example",
|
"name": "asc-web-components-example",
|
||||||
"homepage": "https://AlexeySafronov.github.io/asc.web.components",
|
"version": "0.1.0",
|
||||||
"version": "0.0.0",
|
|
||||||
"license": "MIT",
|
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"prop-types": "^15.6.2",
|
"asc-web-components": "file:..",
|
||||||
"react": "^16.4.1",
|
"bootstrap": "^4.3.1",
|
||||||
"react-dom": "^16.4.1",
|
"node-sass": "^4.12.0",
|
||||||
"react-scripts": "^1.1.4",
|
"react": "^16.8.6",
|
||||||
"asc.web.components": "file:.."
|
"react-dom": "^16.8.6",
|
||||||
|
"react-scripts": "3.0.1",
|
||||||
|
"reactstrap": "^8.0.0",
|
||||||
|
"styled-components": "^4.2.0",
|
||||||
|
"lodash": "4.17.11",
|
||||||
|
"lodash-es": "4.17.11"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "start-storybook -p 6006",
|
||||||
"build": "react-scripts build",
|
"build-storybook": "build-storybook",
|
||||||
"test": "react-scripts test --env=jsdom",
|
"storybook:start": "start-storybook -p 9002 -s docs/assets",
|
||||||
"eject": "react-scripts eject",
|
"storybook:build": "NODE_ENV=production build-storybook -o .public -s docs/assets"
|
||||||
"storybook": "start-storybook"
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": "react-app"
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.4.4",
|
"@babel/core": "^7.4.4",
|
||||||
|
"@storybook/addon-actions": "^5.0.11",
|
||||||
|
"@storybook/addon-knobs": "^5.0.11",
|
||||||
|
"@storybook/addon-links": "^5.0.11",
|
||||||
|
"@storybook/addon-options": "^5.0.11",
|
||||||
|
"@storybook/addon-storysource": "^5.0.11",
|
||||||
|
"@storybook/addons": "^5.0.11",
|
||||||
|
"@storybook/cli": "^5.0.11",
|
||||||
"@storybook/react": "^5.0.11",
|
"@storybook/react": "^5.0.11",
|
||||||
"babel-loader": "^8.0.6"
|
"babel-loader": "^8.0.6",
|
||||||
|
"install-peers": "^1.0.3",
|
||||||
|
"jquery": "^3.4.1",
|
||||||
|
"prettier": "^1.17.1",
|
||||||
|
"react-intl": "^2.9.0",
|
||||||
|
"storybook-readme": "^5.0.3",
|
||||||
|
"tsutils": "^3.10.0",
|
||||||
|
"typescript": "^3.4.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
BIN
web/ASC.Web.Components/example/public/favicon.ico
Normal file
BIN
web/ASC.Web.Components/example/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
38
web/ASC.Web.Components/example/public/index.html
Normal file
38
web/ASC.Web.Components/example/public/index.html
Normal 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>React App</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>
|
15
web/ASC.Web.Components/example/public/manifest.json
Normal file
15
web/ASC.Web.Components/example/public/manifest.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
38
web/ASC.Web.Components/example/stories/buttons/all/README.md
Normal file
38
web/ASC.Web.Components/example/stories/buttons/all/README.md
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
# Buttons: Button
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Button } from 'asc-web-components';
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Description
|
||||||
|
|
||||||
|
Buttons are used for a action on a page.
|
||||||
|
|
||||||
|
#### Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
<Button primary={true} size='big' disabled={true} onClick={() => alert('Button clicked')}>Save message</Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Props | Type | Required | Values | Default | Description |
|
||||||
|
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
|
||||||
|
| `disabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
|
||||||
|
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
|
||||||
|
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | - |
|
||||||
|
|
||||||
|
The component further forwards all `data-` and `aria-` attributes to the underlying `button` component.
|
||||||
|
|
||||||
|
Main Functions and use cases are:
|
||||||
|
|
||||||
|
- Primary action _example: Save changes_
|
||||||
|
|
||||||
|
- Not primary action _example: Cancel_
|
||||||
|
|
||||||
|
- Affirming affects _example: Submit a form_
|
||||||
|
|
||||||
|
- Attracting attention _example: Add a discount rule_
|
@ -0,0 +1,72 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { storiesOf } from '@storybook/react';
|
||||||
|
import { withKnobs } from '@storybook/addon-knobs/react';
|
||||||
|
import withReadme from 'storybook-readme/with-readme';
|
||||||
|
import Readme from './README.md';
|
||||||
|
import { Button } from 'asc-web-components';
|
||||||
|
|
||||||
|
const colStyle = { margin: '0 8px 0 8px' };
|
||||||
|
|
||||||
|
const rowStyle = { margin: '4px 0 4px 0' };
|
||||||
|
|
||||||
|
storiesOf('Components|Button', module)
|
||||||
|
.addDecorator(withKnobs)
|
||||||
|
.addDecorator(withReadme(Readme))
|
||||||
|
.add('all', () => (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Button style={colStyle}>Base button</Button>
|
||||||
|
<Button size="middle" style={colStyle}>
|
||||||
|
Middle button
|
||||||
|
</Button>
|
||||||
|
<Button size="big" style={colStyle}>
|
||||||
|
Big button
|
||||||
|
</Button>
|
||||||
|
<Button size="huge" style={colStyle}>
|
||||||
|
Huge button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div style={rowStyle}>
|
||||||
|
<Button disabled style={colStyle}>
|
||||||
|
Base button
|
||||||
|
</Button>
|
||||||
|
<Button disabled size="middle" style={colStyle}>
|
||||||
|
Middle button
|
||||||
|
</Button>
|
||||||
|
<Button disabled size="big" style={colStyle}>
|
||||||
|
Big button
|
||||||
|
</Button>
|
||||||
|
<Button disabled size="huge" style={colStyle}>
|
||||||
|
Huge button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div style={rowStyle}>
|
||||||
|
<Button primary style={colStyle}>
|
||||||
|
Base button
|
||||||
|
</Button>
|
||||||
|
<Button size="middle" primary style={colStyle}>
|
||||||
|
Middle button
|
||||||
|
</Button>
|
||||||
|
<Button size="big" primary style={colStyle}>
|
||||||
|
Big button
|
||||||
|
</Button>
|
||||||
|
<Button size="huge" primary style={colStyle}>
|
||||||
|
Huge button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div style={rowStyle}>
|
||||||
|
<Button disabled primary style={colStyle}>
|
||||||
|
Base button
|
||||||
|
</Button>
|
||||||
|
<Button disabled size="middle" primary style={colStyle}>
|
||||||
|
Middle button
|
||||||
|
</Button>
|
||||||
|
<Button disabled size="big" primary style={colStyle}>
|
||||||
|
Big button
|
||||||
|
</Button>
|
||||||
|
<Button disabled size="huge" primary style={colStyle}>
|
||||||
|
Huge button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
));
|
@ -0,0 +1,27 @@
|
|||||||
|
# Buttons: Button
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Button } from 'asc-web-components';
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Description
|
||||||
|
|
||||||
|
Base Button is used for a action on a page.
|
||||||
|
|
||||||
|
#### Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
<Button size='base' disabled={false} onClick={() => alert('Button clicked')}>OK</Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Props | Type | Required | Values | Default | Description |
|
||||||
|
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
|
||||||
|
| `disabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
|
||||||
|
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
|
||||||
|
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | - |
|
||||||
|
|
@ -0,0 +1,23 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { storiesOf } from '@storybook/react';
|
||||||
|
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 } from 'asc-web-components';
|
||||||
|
|
||||||
|
const sizeOptions = ['base', 'middle', 'big', 'huge'];
|
||||||
|
|
||||||
|
storiesOf('Components|Button', module)
|
||||||
|
.addDecorator(withKnobs)
|
||||||
|
.addDecorator(withReadme(Readme))
|
||||||
|
.add('base', () => (
|
||||||
|
<Button
|
||||||
|
size={select('size', sizeOptions, 'base')}
|
||||||
|
primary={boolean('primary', true)}
|
||||||
|
disabled={boolean('disable', false)}
|
||||||
|
onClick={action('clicked')}
|
||||||
|
>
|
||||||
|
{text('Label', 'Base button')}
|
||||||
|
</Button>
|
||||||
|
));
|
27
web/ASC.Web.Components/example/stories/buttons/big/README.md
Normal file
27
web/ASC.Web.Components/example/stories/buttons/big/README.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
# Buttons: Button
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Button } from 'asc-web-components';
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Description
|
||||||
|
|
||||||
|
Big Button is used for a action on a page.
|
||||||
|
|
||||||
|
#### Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
<Button size='big' disabled={false} onClick={() => alert('Button clicked')}>OK</Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Props | Type | Required | Values | Default | Description |
|
||||||
|
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
|
||||||
|
| `disabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
|
||||||
|
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
|
||||||
|
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | - |
|
||||||
|
|
@ -0,0 +1,23 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { storiesOf } from '@storybook/react';
|
||||||
|
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 } from 'asc-web-components';
|
||||||
|
|
||||||
|
const sizeOptions = ['base', 'middle', 'big', 'huge'];
|
||||||
|
|
||||||
|
storiesOf('Components|Button', module)
|
||||||
|
.addDecorator(withKnobs)
|
||||||
|
.addDecorator(withReadme(Readme))
|
||||||
|
.add('big', () => (
|
||||||
|
<Button
|
||||||
|
size={select('size', sizeOptions, 'big')}
|
||||||
|
primary={boolean('primary', true)}
|
||||||
|
disabled={boolean('disable', false)}
|
||||||
|
onClick={action('clicked')}
|
||||||
|
>
|
||||||
|
{text('Label', 'Big button')}
|
||||||
|
</Button>
|
||||||
|
));
|
@ -0,0 +1,27 @@
|
|||||||
|
# Buttons: Button
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Button } from 'asc-web-components';
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Description
|
||||||
|
|
||||||
|
Huge Button is used for a action on a page.
|
||||||
|
|
||||||
|
#### Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
<Button size='huge' disabled={false} onClick={() => alert('Button clicked')}>OK</Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Props | Type | Required | Values | Default | Description |
|
||||||
|
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
|
||||||
|
| `disabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
|
||||||
|
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
|
||||||
|
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | - |
|
||||||
|
|
@ -0,0 +1,23 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { storiesOf } from '@storybook/react';
|
||||||
|
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 } from 'asc-web-components';
|
||||||
|
|
||||||
|
const sizeOptions = ['base', 'middle', 'big', 'huge'];
|
||||||
|
|
||||||
|
storiesOf('Components|Button', module)
|
||||||
|
.addDecorator(withKnobs)
|
||||||
|
.addDecorator(withReadme(Readme))
|
||||||
|
.add('huge', () => (
|
||||||
|
<Button
|
||||||
|
size={select('size', sizeOptions, 'huge')}
|
||||||
|
primary={boolean('primary', true)}
|
||||||
|
disabled={boolean('disable', false)}
|
||||||
|
onClick={action('clicked')}
|
||||||
|
>
|
||||||
|
{text('Label', 'Huge button')}
|
||||||
|
</Button>
|
||||||
|
));
|
@ -0,0 +1,27 @@
|
|||||||
|
# Buttons: Button
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Button } from 'asc-web-components';
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Description
|
||||||
|
|
||||||
|
Middle Button is used for a action on a page.
|
||||||
|
|
||||||
|
#### Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
<Button size='middle' disabled={false} onClick={() => alert('Button clicked')}>OK</Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Props | Type | Required | Values | Default | Description |
|
||||||
|
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
|
||||||
|
| `disabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
|
||||||
|
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
|
||||||
|
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | - |
|
||||||
|
|
@ -0,0 +1,23 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { storiesOf } from '@storybook/react';
|
||||||
|
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 } from 'asc-web-components';
|
||||||
|
|
||||||
|
const sizeOptions = ['base', 'middle', 'big', 'huge'];
|
||||||
|
|
||||||
|
storiesOf('Components|Button', module)
|
||||||
|
.addDecorator(withKnobs)
|
||||||
|
.addDecorator(withReadme(Readme))
|
||||||
|
.add('middle', () => (
|
||||||
|
<Button
|
||||||
|
size={select('size', sizeOptions, 'middle')}
|
||||||
|
primary={boolean('primary', true)}
|
||||||
|
disabled={boolean('disable', false)}
|
||||||
|
onClick={action('clicked')}
|
||||||
|
>
|
||||||
|
{text('Label', 'Middle button')}
|
||||||
|
</Button>
|
||||||
|
));
|
8
web/ASC.Web.Components/example/stories/index.stories.js
Normal file
8
web/ASC.Web.Components/example/stories/index.stories.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { storiesOf } from '@storybook/react';
|
||||||
|
import { linkTo } from '@storybook/addon-links';
|
||||||
|
import { Welcome } from '@storybook/react/demo';
|
||||||
|
|
||||||
|
storiesOf('Components|Welcome', module).add('to Storybook', () => (
|
||||||
|
<Welcome showApp={linkTo('Button')} />
|
||||||
|
));
|
24
web/ASC.Web.Components/example/stories/input/README.md
Normal file
24
web/ASC.Web.Components/example/stories/input/README.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Buttons: Button
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Input } from 'asc-web-components';
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Description
|
||||||
|
|
||||||
|
Input description
|
||||||
|
|
||||||
|
#### Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
<Input value='TEXT' />
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Props | Type | Required | Values | Default | Description |
|
||||||
|
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| `value` | `string` | - | - | - | Input value |
|
||||||
|
|
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { storiesOf } from '@storybook/react';
|
||||||
|
// import { action } from '@storybook/addon-actions';
|
||||||
|
import { withKnobs, text } from '@storybook/addon-knobs/react';
|
||||||
|
import withReadme from 'storybook-readme/with-readme';
|
||||||
|
import Readme from './README.md';
|
||||||
|
import { Input } from 'asc-web-components';
|
||||||
|
|
||||||
|
storiesOf('Components|Input', module)
|
||||||
|
.addDecorator(withKnobs)
|
||||||
|
.addDecorator(withReadme(Readme))
|
||||||
|
.add('base', () => (
|
||||||
|
<Input value={text('value', 'TEXT')} />
|
||||||
|
));
|
@ -1,11 +1,10 @@
|
|||||||
{
|
{
|
||||||
"name": "asc.web.components",
|
"name": "asc-web-components",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "",
|
"description": "Ascensio System SIA component library",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "dist/index.js",
|
"main": "dist/asc-web-components.cjs.js",
|
||||||
"module": "dist/index.es.js",
|
"module": "dist/asc-web-components.esm.js",
|
||||||
"jsnext:main": "dist/index.es.js",
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=8",
|
"node": ">=8",
|
||||||
"npm": ">=5"
|
"npm": ">=5"
|
||||||
@ -13,53 +12,88 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "cross-env CI=1 react-scripts test --env=jsdom",
|
"test": "cross-env CI=1 react-scripts test --env=jsdom",
|
||||||
"test:watch": "react-scripts test --env=jsdom",
|
"test:watch": "react-scripts test --env=jsdom",
|
||||||
"build": "rollup -c",
|
"build": "rimraf dist && cross-env NODE_ENV=production rollup -c",
|
||||||
"start": "rollup -c -w",
|
"start": "rimraf dist && cross-env NODE_ENV=development rollup -c -w",
|
||||||
"prepare": "npm run build",
|
"prepare": "npm run build",
|
||||||
"predeploy": "cd example && npm install && npm run build",
|
"predeploy": "cd example && npm install && npm run build",
|
||||||
"deploy": "gh-pages -d example/build"
|
"deploy": "gh-pages -d example/build"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"prop-types": "^15.5.4",
|
"react": "16.x",
|
||||||
"react": "^15.0.0 || ^16.0.0",
|
"react-dom": "16.x",
|
||||||
"react-dom": "^15.0.0 || ^16.0.0",
|
"react-intl": "2.x"
|
||||||
"react-router-dom": "^5.0.0"
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@emotion/core": "10.0.10",
|
||||||
|
"@emotion/styled": "10.0.11",
|
||||||
|
"bootstrap": "^4.3.1",
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"reactstrap": "^8.0.0",
|
||||||
|
"styled-components": "^4.2.0",
|
||||||
|
"lodash": "4.17.11",
|
||||||
|
"lodash-es": "4.17.11"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@svgr/rollup": "^2.4.1",
|
"@babel/core": "7.4.4",
|
||||||
"babel-core": "^6.26.3",
|
"@babel/plugin-proposal-class-properties": "7.4.4",
|
||||||
"babel-eslint": "^8.2.5",
|
"@babel/plugin-proposal-export-default-from": "7.2.0",
|
||||||
"babel-plugin-external-helpers": "^6.22.0",
|
"@babel/plugin-proposal-export-namespace-from": "7.2.0",
|
||||||
"babel-preset-env": "^1.7.0",
|
"@babel/plugin-proposal-object-rest-spread": "7.4.4",
|
||||||
"babel-preset-react": "^6.24.1",
|
"@babel/plugin-transform-destructuring": "7.4.4",
|
||||||
"babel-preset-stage-0": "^6.24.1",
|
"@babel/plugin-transform-react-constant-elements": "7.2.0",
|
||||||
"cross-env": "^5.1.4",
|
"@babel/plugin-transform-runtime": "7.4.4",
|
||||||
"eslint": "^5.0.1",
|
"@babel/preset-env": "^7.4.4",
|
||||||
"eslint-config-standard": "^11.0.0",
|
"@babel/preset-react": "7.0.0",
|
||||||
"eslint-config-standard-react": "^6.0.0",
|
"@emotion/babel-preset-css-prop": "10.0.9",
|
||||||
"eslint-plugin-import": "^2.13.0",
|
"@svgr/rollup": "4.2.0",
|
||||||
"eslint-plugin-node": "^7.0.1",
|
"@svgr/webpack": "4.2.0",
|
||||||
"eslint-plugin-promise": "^4.0.0",
|
"babel-eslint": "10.0.1",
|
||||||
"eslint-plugin-react": "^7.10.0",
|
"babel-jest": "24.8.0",
|
||||||
"eslint-plugin-standard": "^3.1.0",
|
"babel-loader": "8.0.6",
|
||||||
"gh-pages": "^1.2.0",
|
"babel-plugin-macros": "^2.5.1",
|
||||||
"react": "^16.4.1",
|
"babel-plugin-module-rewrite": "0.2.0",
|
||||||
"react-dom": "^16.4.1",
|
"babel-plugin-react-intl": "3.0.1",
|
||||||
"react-scripts": "^1.1.4",
|
"babel-plugin-transform-dynamic-import": "2.1.0",
|
||||||
"rollup": "^0.64.1",
|
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
|
||||||
"rollup-plugin-babel": "^3.0.7",
|
"babel-plugin-transform-rename-import": "2.3.0",
|
||||||
"rollup-plugin-commonjs": "^9.1.3",
|
"babel-preset-jest": "24.6.0",
|
||||||
"rollup-plugin-node-resolve": "^3.3.0",
|
"browserslist": "4.6.0",
|
||||||
"rollup-plugin-peer-deps-external": "^2.2.0",
|
"clean-webpack-plugin": "2.0.2",
|
||||||
"rollup-plugin-postcss": "^1.6.2",
|
"core-js": "3.0.1",
|
||||||
"rollup-plugin-url": "^1.4.0"
|
"cross-env": "5.2.0",
|
||||||
|
"eslint": "5.16.0",
|
||||||
|
"eslint-config-airbnb-base": "13.1.0",
|
||||||
|
"eslint-config-prettier": "4.3.0",
|
||||||
|
"eslint-formatter-pretty": "2.1.1",
|
||||||
|
"eslint-plugin-import": "2.17.2",
|
||||||
|
"eslint-plugin-jest": "22.5.1",
|
||||||
|
"eslint-plugin-jsx-a11y": "6.2.1",
|
||||||
|
"eslint-plugin-prefer-object-spread": "1.2.1",
|
||||||
|
"eslint-plugin-prettier": "3.1.0",
|
||||||
|
"eslint-plugin-react": "7.13.0",
|
||||||
|
"react": "16.8.6",
|
||||||
|
"react-dom": "16.8.6",
|
||||||
|
"react-intl": "2.9.0",
|
||||||
|
"react-router-dom": "5.0.0",
|
||||||
|
"react-testing-library": "7.0.0",
|
||||||
|
"react-value": "0.2.0",
|
||||||
|
"rimraf": "2.6.3",
|
||||||
|
"rollup": "1.12.1",
|
||||||
|
"rollup-plugin-babel": "4.3.2",
|
||||||
|
"rollup-plugin-cleanup": "3.1.1",
|
||||||
|
"rollup-plugin-commonjs": "10.0.0",
|
||||||
|
"rollup-plugin-json": "4.0.0",
|
||||||
|
"rollup-plugin-node-resolve": "5.0.0",
|
||||||
|
"rollup-plugin-replace": "2.2.0",
|
||||||
|
"webpack": "4.31.0",
|
||||||
|
"webpack-cli": "3.3.2",
|
||||||
|
"webpack-dev-server": "3.3.1"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"dist"
|
"dist",
|
||||||
],
|
"CHANGELOG.md",
|
||||||
"dependencies": {
|
"README.md",
|
||||||
"bootstrap": "^4.3.1",
|
"LICENSE",
|
||||||
"node-sass": "^4.12.0",
|
"package.json"
|
||||||
"reactstrap": "^8.0.0"
|
]
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -1,39 +1,96 @@
|
|||||||
import babel from 'rollup-plugin-babel'
|
import resolve from "rollup-plugin-node-resolve";
|
||||||
import commonjs from 'rollup-plugin-commonjs'
|
import commonjs from "rollup-plugin-commonjs";
|
||||||
import external from 'rollup-plugin-peer-deps-external'
|
import json from "rollup-plugin-json";
|
||||||
import postcss from 'rollup-plugin-postcss'
|
import babel from "rollup-plugin-babel";
|
||||||
import resolve from 'rollup-plugin-node-resolve'
|
import cleanup from "rollup-plugin-cleanup";
|
||||||
import url from 'rollup-plugin-url'
|
import replace from "rollup-plugin-replace";
|
||||||
import svgr from '@svgr/rollup'
|
import svgrPlugin from "@svgr/rollup";
|
||||||
|
import pkg from "./package.json";
|
||||||
|
|
||||||
import pkg from './package.json'
|
const getBabelPreset = require("./scripts/get-babel-preset");
|
||||||
|
|
||||||
export default {
|
const babelOptions = getBabelPreset();
|
||||||
input: 'src/index.js',
|
|
||||||
output: [
|
// This list includes common plugins shared between each output format.
|
||||||
{
|
// NOTE: the order of the plugins is important!
|
||||||
file: pkg.main,
|
const configureRollupPlugins = (options = {}) => [
|
||||||
format: 'cjs',
|
replace({
|
||||||
sourcemap: true
|
"process.env.NODE_ENV": JSON.stringify("production")
|
||||||
},
|
}),
|
||||||
{
|
// To use the nodejs `resolve` algorithm
|
||||||
file: pkg.module,
|
resolve(),
|
||||||
format: 'es',
|
// See also https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953
|
||||||
sourcemap: true
|
// Transpile sources using our custom babel preset.
|
||||||
|
babel({
|
||||||
|
exclude: ["node_modules/**"],
|
||||||
|
runtimeHelpers: true,
|
||||||
|
...babelOptions,
|
||||||
|
plugins: [
|
||||||
|
...babelOptions.plugins,
|
||||||
|
...(options.babel && options.babel.plugins ? options.babel.plugins : [])
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
// To convert CJS modules to ES6
|
||||||
|
commonjs({
|
||||||
|
include: "node_modules/**"
|
||||||
|
}),
|
||||||
|
// To convert JSON files to ES6
|
||||||
|
json(),
|
||||||
|
// To convert SVG Icons to ES6
|
||||||
|
svgrPlugin({
|
||||||
|
// NOTE: only the files ending with `.react.svg` are supposed to be
|
||||||
|
// converted to React components
|
||||||
|
include: ["**/*.react.svg"],
|
||||||
|
icon: false,
|
||||||
|
svgoConfig: {
|
||||||
|
plugins: [
|
||||||
|
{ removeViewBox: false },
|
||||||
|
// Keeps ID's of svgs so they can be targeted with CSS
|
||||||
|
{ cleanupIDs: false }
|
||||||
|
]
|
||||||
}
|
}
|
||||||
],
|
}),
|
||||||
plugins: [
|
// To remove comments, trim trailing spaces, compact empty lines,
|
||||||
external(),
|
// and normalize line endings
|
||||||
postcss({
|
cleanup()
|
||||||
modules: true
|
];
|
||||||
}),
|
|
||||||
url(),
|
const deps = Object.keys(pkg.dependencies || {});
|
||||||
svgr(),
|
const peerDeps = Object.keys(pkg.peerDependencies || {});
|
||||||
babel({
|
const defaultExternal = deps.concat(peerDeps);
|
||||||
exclude: 'node_modules/**',
|
|
||||||
plugins: [ 'external-helpers' ]
|
// We need to define 2 separate configs (`esm` and `cjs`) so that each can be
|
||||||
}),
|
// further customized.
|
||||||
resolve(),
|
const config = [
|
||||||
commonjs()
|
{
|
||||||
]
|
input: "src/index.js",
|
||||||
}
|
external: defaultExternal,
|
||||||
|
output: {
|
||||||
|
file: pkg.main,
|
||||||
|
format: "cjs"
|
||||||
|
},
|
||||||
|
plugins: configureRollupPlugins()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: "src/index.js",
|
||||||
|
external: defaultExternal,
|
||||||
|
output: {
|
||||||
|
file: pkg.module,
|
||||||
|
format: "esm"
|
||||||
|
},
|
||||||
|
plugins: configureRollupPlugins({
|
||||||
|
babel: {
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
"transform-rename-import",
|
||||||
|
{
|
||||||
|
replacements: [{ original: "lodash", replacement: "lodash-es" }]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
133
web/ASC.Web.Components/scripts/get-babel-preset.js
Normal file
133
web/ASC.Web.Components/scripts/get-babel-preset.js
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
/* eslint-disable global-require */
|
||||||
|
module.exports = function getBabelPreset() {
|
||||||
|
// This is similar to how `env` works in Babel:
|
||||||
|
// https://babeljs.io/docs/usage/babelrc/#env-option
|
||||||
|
// We are not using `env` because it’s ignored in versions > babel-core@6.10.4:
|
||||||
|
// https://github.com/babel/babel/issues/4539
|
||||||
|
// https://github.com/facebook/create-react-app/issues/720
|
||||||
|
// It’s also nice that we can enforce `NODE_ENV` being specified.
|
||||||
|
const env = process.env.BABEL_ENV || process.env.NODE_ENV;
|
||||||
|
const isEnvDevelopment = env === "development";
|
||||||
|
const isEnvProduction = env === "production";
|
||||||
|
const isEnvTest = env === "test";
|
||||||
|
|
||||||
|
if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
|
||||||
|
throw new Error(
|
||||||
|
"The babel preset of requires that you specify `NODE_ENV` or " +
|
||||||
|
'`BABEL_ENV` environment variables. Valid values are "development", ' +
|
||||||
|
`"test", and "production". Instead, received: ${JSON.stringify(env)}.`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
presets: [
|
||||||
|
isEnvTest && [
|
||||||
|
// ES features necessary for user's Node version
|
||||||
|
require("@babel/preset-env").default,
|
||||||
|
{
|
||||||
|
targets: {
|
||||||
|
browsers: ["last 1 versions"],
|
||||||
|
node: "8"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
(isEnvProduction || isEnvDevelopment) && [
|
||||||
|
// Latest stable ECMAScript features
|
||||||
|
require("@babel/preset-env").default,
|
||||||
|
{
|
||||||
|
targets: {
|
||||||
|
browsers: ["last 1 versions"]
|
||||||
|
},
|
||||||
|
corejs: 2,
|
||||||
|
// `entry` transforms `@babel/polyfill` into individual requires for
|
||||||
|
// the targeted browsers. This is safer than `usage` which performs
|
||||||
|
// static code analysis to determine what's required.
|
||||||
|
// This is probably a fine default to help trim down bundles when
|
||||||
|
// end-users inevitably import '@babel/polyfill'.
|
||||||
|
useBuiltIns: "entry",
|
||||||
|
// Do not transform modules to CJS
|
||||||
|
modules: false,
|
||||||
|
include: ["transform-classes"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
require("@babel/preset-react").default,
|
||||||
|
{
|
||||||
|
// Adds component stack to warning messages
|
||||||
|
// Adds __self attribute to JSX which React will use for some warnings
|
||||||
|
development: isEnvDevelopment || isEnvTest,
|
||||||
|
// Will use the native built-in instead of trying to polyfill
|
||||||
|
// behavior for any plugins that require one.
|
||||||
|
useBuiltIns: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"@emotion/babel-preset-css-prop",
|
||||||
|
{
|
||||||
|
sourceMap: isEnvDevelopment,
|
||||||
|
autoLabel: !isEnvProduction
|
||||||
|
}
|
||||||
|
]
|
||||||
|
].filter(Boolean),
|
||||||
|
plugins: [
|
||||||
|
// Experimental macros support. Will be documented after it's had some time
|
||||||
|
// in the wild.
|
||||||
|
require("babel-plugin-macros").default,
|
||||||
|
// https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion
|
||||||
|
// export { default } from './foo'
|
||||||
|
require("@babel/plugin-proposal-export-default-from").default,
|
||||||
|
// export * from './foo'
|
||||||
|
require("@babel/plugin-proposal-export-namespace-from").default,
|
||||||
|
// Necessary to include regardless of the environment because
|
||||||
|
// in practice some other transforms (such as object-rest-spread)
|
||||||
|
// don't work without it: https://github.com/babel/babel/issues/7215
|
||||||
|
require("@babel/plugin-transform-destructuring").default,
|
||||||
|
// class { handleClick = () => { } }
|
||||||
|
// Enable loose mode to use assignment instead of defineProperty
|
||||||
|
// See discussion in https://github.com/facebook/create-react-app/issues/4263
|
||||||
|
[
|
||||||
|
require("@babel/plugin-proposal-class-properties").default,
|
||||||
|
{
|
||||||
|
loose: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// The following two plugins use Object.assign directly, instead of Babel's
|
||||||
|
// extends helper. Note that this assumes `Object.assign` is available.
|
||||||
|
// { ...todo, completed: true }
|
||||||
|
[
|
||||||
|
require("@babel/plugin-proposal-object-rest-spread").default,
|
||||||
|
{
|
||||||
|
useBuiltIns: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// Polyfills the runtime needed for async/await and generators
|
||||||
|
[
|
||||||
|
require("@babel/plugin-transform-runtime").default,
|
||||||
|
{
|
||||||
|
helpers: false,
|
||||||
|
regenerator: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
isEnvProduction && [
|
||||||
|
// Remove PropTypes from production build
|
||||||
|
require("babel-plugin-transform-react-remove-prop-types").default,
|
||||||
|
{
|
||||||
|
mode: "wrap"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// function* () { yield 42; yield 43; }
|
||||||
|
!isEnvTest && [
|
||||||
|
require("@babel/plugin-transform-regenerator").default,
|
||||||
|
{
|
||||||
|
// Async functions are converted to generators by @babel/preset-env
|
||||||
|
async: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// Adds syntax support for import()
|
||||||
|
require("@babel/plugin-syntax-dynamic-import").default,
|
||||||
|
isEnvTest &&
|
||||||
|
// Transform dynamic import to require
|
||||||
|
require("babel-plugin-transform-dynamic-import").default
|
||||||
|
].filter(Boolean)
|
||||||
|
};
|
||||||
|
};
|
5
web/ASC.Web.Components/src/.eslintrc
Normal file
5
web/ASC.Web.Components/src/.eslintrc
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"jest": true
|
||||||
|
}
|
||||||
|
}
|
102
web/ASC.Web.Components/src/components/Button/index.js
Normal file
102
web/ASC.Web.Components/src/components/Button/index.js
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styled, { css } from 'styled-components';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
const StyledButton = styled.button`
|
||||||
|
/* Adapt the colors based on primary prop */
|
||||||
|
background-color: ${props => (!props.disabled ? (props.primary ? '#2da7db' : '#ebebeb') : (props.primary ? '#a6dcf2' : '#f7f7f7')) };
|
||||||
|
color: ${props => (props.primary ? '#ffffff' : (!props.disabled ? '#666666' : '#999'))};
|
||||||
|
font-size: ${props =>
|
||||||
|
props.size === 'huge' || props.size === 'big' ? '15px' : '12px'};
|
||||||
|
line-height: ${props =>
|
||||||
|
props.size === 'huge' ? '15px;' : props.size === 'big' ? '17px;' : '13px;'};
|
||||||
|
|
||||||
|
height: ${props =>
|
||||||
|
props.size === 'huge'
|
||||||
|
? '40px'
|
||||||
|
: props.size === 'big'
|
||||||
|
? '32px'
|
||||||
|
: props.size === 'middle'
|
||||||
|
? '24px'
|
||||||
|
: '21px'};
|
||||||
|
padding: ${props =>
|
||||||
|
props.size === 'huge'
|
||||||
|
? '12px 30px 13px;'
|
||||||
|
: props.size === 'big'
|
||||||
|
? '7px 30px 8px;'
|
||||||
|
: props.size === 'middle'
|
||||||
|
? '5px 24px 6px;'
|
||||||
|
: '4px 13px;'};
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
cursor: ${props => (!props.disabled ? 'pointer' : 'default')};
|
||||||
|
display: inline-block;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
touch-callout: none;
|
||||||
|
-o-touch-callout: none;
|
||||||
|
-moz-touch-callout: none;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
user-select: none;
|
||||||
|
-o-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
|
||||||
|
${props =>
|
||||||
|
!props.primary &&
|
||||||
|
css`
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: ${props => !props.disabled ? '#c4c4c4' : '#ebebeb'};
|
||||||
|
`}
|
||||||
|
|
||||||
|
${props =>
|
||||||
|
!props.disabled &&
|
||||||
|
css`
|
||||||
|
&:hover {
|
||||||
|
background-color: ${props => (props.primary ? '#3db8ec' : '#f5f5f5')};
|
||||||
|
color: ${props => (props.primary ? '#ffffff' : '#666666')};
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: ${props => (props.primary ? '#1f97ca' : '#e2e2e2')};
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
${props =>
|
||||||
|
!props.primary &&
|
||||||
|
css`
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #dadada;
|
||||||
|
`}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Button = props => {
|
||||||
|
return <StyledButton {...props} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
Button.PropTypes = {
|
||||||
|
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
|
||||||
|
primary: PropTypes.bool,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
onClick: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
Button.defaultProps = {
|
||||||
|
primary: false,
|
||||||
|
disabled: false,
|
||||||
|
size: 'base'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Button;
|
16
web/ASC.Web.Components/src/components/Input/index.js
Normal file
16
web/ASC.Web.Components/src/components/Input/index.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import styled, { css } from 'styled-components';
|
||||||
|
|
||||||
|
const Input = props => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<input value={props.value} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Input.PropTypes = {
|
||||||
|
value: PropTypes.string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Input
|
2
web/ASC.Web.Components/src/index.js
Normal file
2
web/ASC.Web.Components/src/index.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export { default as Button } from './components/Button/'
|
||||||
|
export { default as Input } from './components/Input/'
|
8
web/ASC.Web.Components/src/styles.css
Normal file
8
web/ASC.Web.Components/src/styles.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
/* add css styles here (optional) */
|
||||||
|
|
||||||
|
.test {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 2em auto;
|
||||||
|
border: 2px solid #000;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
7
web/ASC.Web.Components/src/test.js
Normal file
7
web/ASC.Web.Components/src/test.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import ExampleComponent from './'
|
||||||
|
|
||||||
|
describe('ExampleComponent', () => {
|
||||||
|
it('is truthy', () => {
|
||||||
|
expect(ExampleComponent).toBeTruthy()
|
||||||
|
})
|
||||||
|
})
|
Loading…
Reference in New Issue
Block a user