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/
|
||||
*-lock.json
|
||||
*.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 @@
|
||||
|
||||
# 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*
|
||||
node_modules/
|
||||
|
@ -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
|
||||
|
||||
```bash
|
||||
npm install --save asc.web.components
|
||||
npm install --save asc-web-components
|
||||
```
|
||||
|
||||
## Usage
|
||||
@ -15,7 +15,7 @@ npm install --save asc.web.components
|
||||
```jsx
|
||||
import React, { Component } from 'react'
|
||||
|
||||
import MyComponent from 'asc.web.components'
|
||||
import MyComponent from 'asc-web-components'
|
||||
|
||||
class Example extends Component {
|
||||
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';
|
||||
|
||||
// automatically import all files ending in *.stories.js
|
||||
const req = require.context('../stories', true, /\.stories\.js$/);
|
||||
function loadStories() {
|
||||
require('../stories/index.js');
|
||||
// You can require as many stories as you need.
|
||||
req.keys().forEach(filename => req(filename));
|
||||
}
|
||||
|
||||
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",
|
||||
"homepage": "https://AlexeySafronov.github.io/asc.web.components",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"name": "asc-web-components-example",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-scripts": "^1.1.4",
|
||||
"asc.web.components": "file:.."
|
||||
"asc-web-components": "file:..",
|
||||
"bootstrap": "^4.3.1",
|
||||
"node-sass": "^4.12.0",
|
||||
"react": "^16.8.6",
|
||||
"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": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject",
|
||||
"storybook": "start-storybook"
|
||||
"start": "start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook",
|
||||
"storybook:start": "start-storybook -p 9002 -s docs/assets",
|
||||
"storybook:build": "NODE_ENV=production build-storybook -o .public -s docs/assets"
|
||||
},
|
||||
"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": {
|
||||
"@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",
|
||||
"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",
|
||||
"description": "",
|
||||
"description": "Ascensio System SIA component library",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.es.js",
|
||||
"jsnext:main": "dist/index.es.js",
|
||||
"main": "dist/asc-web-components.cjs.js",
|
||||
"module": "dist/asc-web-components.esm.js",
|
||||
"engines": {
|
||||
"node": ">=8",
|
||||
"npm": ">=5"
|
||||
@ -13,53 +12,88 @@
|
||||
"scripts": {
|
||||
"test": "cross-env CI=1 react-scripts test --env=jsdom",
|
||||
"test:watch": "react-scripts test --env=jsdom",
|
||||
"build": "rollup -c",
|
||||
"start": "rollup -c -w",
|
||||
"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",
|
||||
"predeploy": "cd example && npm install && npm run build",
|
||||
"deploy": "gh-pages -d example/build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.5.4",
|
||||
"react": "^15.0.0 || ^16.0.0",
|
||||
"react-dom": "^15.0.0 || ^16.0.0",
|
||||
"react-router-dom": "^5.0.0"
|
||||
"react": "16.x",
|
||||
"react-dom": "16.x",
|
||||
"react-intl": "2.x"
|
||||
},
|
||||
"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": {
|
||||
"@svgr/rollup": "^2.4.1",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^8.2.5",
|
||||
"babel-plugin-external-helpers": "^6.22.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"cross-env": "^5.1.4",
|
||||
"eslint": "^5.0.1",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-config-standard-react": "^6.0.0",
|
||||
"eslint-plugin-import": "^2.13.0",
|
||||
"eslint-plugin-node": "^7.0.1",
|
||||
"eslint-plugin-promise": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.10.0",
|
||||
"eslint-plugin-standard": "^3.1.0",
|
||||
"gh-pages": "^1.2.0",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-scripts": "^1.1.4",
|
||||
"rollup": "^0.64.1",
|
||||
"rollup-plugin-babel": "^3.0.7",
|
||||
"rollup-plugin-commonjs": "^9.1.3",
|
||||
"rollup-plugin-node-resolve": "^3.3.0",
|
||||
"rollup-plugin-peer-deps-external": "^2.2.0",
|
||||
"rollup-plugin-postcss": "^1.6.2",
|
||||
"rollup-plugin-url": "^1.4.0"
|
||||
"@babel/core": "7.4.4",
|
||||
"@babel/plugin-proposal-class-properties": "7.4.4",
|
||||
"@babel/plugin-proposal-export-default-from": "7.2.0",
|
||||
"@babel/plugin-proposal-export-namespace-from": "7.2.0",
|
||||
"@babel/plugin-proposal-object-rest-spread": "7.4.4",
|
||||
"@babel/plugin-transform-destructuring": "7.4.4",
|
||||
"@babel/plugin-transform-react-constant-elements": "7.2.0",
|
||||
"@babel/plugin-transform-runtime": "7.4.4",
|
||||
"@babel/preset-env": "^7.4.4",
|
||||
"@babel/preset-react": "7.0.0",
|
||||
"@emotion/babel-preset-css-prop": "10.0.9",
|
||||
"@svgr/rollup": "4.2.0",
|
||||
"@svgr/webpack": "4.2.0",
|
||||
"babel-eslint": "10.0.1",
|
||||
"babel-jest": "24.8.0",
|
||||
"babel-loader": "8.0.6",
|
||||
"babel-plugin-macros": "^2.5.1",
|
||||
"babel-plugin-module-rewrite": "0.2.0",
|
||||
"babel-plugin-react-intl": "3.0.1",
|
||||
"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.6.0",
|
||||
"browserslist": "4.6.0",
|
||||
"clean-webpack-plugin": "2.0.2",
|
||||
"core-js": "3.0.1",
|
||||
"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": [
|
||||
"dist"
|
||||
],
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.3.1",
|
||||
"node-sass": "^4.12.0",
|
||||
"reactstrap": "^8.0.0"
|
||||
}
|
||||
"dist",
|
||||
"CHANGELOG.md",
|
||||
"README.md",
|
||||
"LICENSE",
|
||||
"package.json"
|
||||
]
|
||||
}
|
||||
|
@ -1,39 +1,96 @@
|
||||
import babel from 'rollup-plugin-babel'
|
||||
import commonjs from 'rollup-plugin-commonjs'
|
||||
import external from 'rollup-plugin-peer-deps-external'
|
||||
import postcss from 'rollup-plugin-postcss'
|
||||
import resolve from 'rollup-plugin-node-resolve'
|
||||
import url from 'rollup-plugin-url'
|
||||
import svgr from '@svgr/rollup'
|
||||
import resolve from "rollup-plugin-node-resolve";
|
||||
import commonjs from "rollup-plugin-commonjs";
|
||||
import json from "rollup-plugin-json";
|
||||
import babel from "rollup-plugin-babel";
|
||||
import cleanup from "rollup-plugin-cleanup";
|
||||
import replace from "rollup-plugin-replace";
|
||||
import svgrPlugin from "@svgr/rollup";
|
||||
import pkg from "./package.json";
|
||||
|
||||
import pkg from './package.json'
|
||||
const getBabelPreset = require("./scripts/get-babel-preset");
|
||||
|
||||
export default {
|
||||
input: 'src/index.js',
|
||||
output: [
|
||||
{
|
||||
file: pkg.main,
|
||||
format: 'cjs',
|
||||
sourcemap: true
|
||||
},
|
||||
{
|
||||
file: pkg.module,
|
||||
format: 'es',
|
||||
sourcemap: true
|
||||
const babelOptions = getBabelPreset();
|
||||
|
||||
// This list includes common plugins shared between each output format.
|
||||
// NOTE: the order of the plugins is important!
|
||||
const configureRollupPlugins = (options = {}) => [
|
||||
replace({
|
||||
"process.env.NODE_ENV": JSON.stringify("production")
|
||||
}),
|
||||
// To use the nodejs `resolve` algorithm
|
||||
resolve(),
|
||||
// See also https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953
|
||||
// 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: [
|
||||
external(),
|
||||
postcss({
|
||||
modules: true
|
||||
}),
|
||||
url(),
|
||||
svgr(),
|
||||
babel({
|
||||
exclude: 'node_modules/**',
|
||||
plugins: [ 'external-helpers' ]
|
||||
}),
|
||||
resolve(),
|
||||
commonjs()
|
||||
]
|
||||
}
|
||||
}),
|
||||
// To remove comments, trim trailing spaces, compact empty lines,
|
||||
// and normalize line endings
|
||||
cleanup()
|
||||
];
|
||||
|
||||
const deps = Object.keys(pkg.dependencies || {});
|
||||
const peerDeps = Object.keys(pkg.peerDependencies || {});
|
||||
const defaultExternal = deps.concat(peerDeps);
|
||||
|
||||
// We need to define 2 separate configs (`esm` and `cjs`) so that each can be
|
||||
// further customized.
|
||||
const config = [
|
||||
{
|
||||
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