├── .gitignore ├── .npmrc ├── .nvmrc ├── .storybook ├── config.js └── webpack.config.js ├── README.md ├── configs ├── aliases.config.js └── rules.config.js ├── lerna.json ├── package.json ├── src ├── Button │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENCE │ ├── README.md │ ├── package.json │ └── src │ │ ├── Button.js │ │ ├── Button.stories.js │ │ ├── button.scss │ │ └── index.js └── ButtonGroup │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENCE │ ├── README.md │ ├── package.json │ └── src │ ├── ButtonGroup.js │ ├── ButtonGroup.stories.js │ ├── buttongroup.scss │ └── index.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Code editors 2 | .idea 3 | 4 | # Depencendies 5 | node_modules 6 | 7 | # Builds 8 | dist 9 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 11.9.0 2 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | const req = require.context('../src', true, /.stories.js$/); 4 | 5 | const loadStories = () => { 6 | req.keys().forEach((filename) => req(filename)) 7 | }; 8 | 9 | configure(loadStories, module); 10 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const rules = require('../configs/rules.config'); 2 | const { aliases } = require('../configs/aliases.config'); 3 | 4 | module.exports = (baseConfig, env, defaultConfig) => { 5 | defaultConfig.module.rules = rules; 6 | defaultConfig.resolve.alias = aliases; 7 | 8 | return defaultConfig; 9 | }; 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Demo component library 2 | 3 | ## First time setup 4 | 1. Use only `npm` for running scripts, in order to avoid some unexpected conflicts with different `.lock` files; 5 | 2. Run `npm i` command to install project dependencies; 6 | 3. Run `npm run start` to start Storybook and review components. 7 | 8 | ## Publishing 9 | **Note:** before publishing packages, you must have npm account and setup organization in order to publish scoped packages. 10 | 11 | 1. Build components by running `npm run build:components` command; 12 | 2. Publish components by running `npm run publish:components` command. 13 | 14 | ## Development 15 | - Create new component under `src` directory; 16 | - Every component must have `src` directory with all of the source code. Include `index.js` file in order to avoid specific file path import declaration; 17 | - Each component must include `package.json` file, and should include `.npmignore`, `CHANGELOG.md`, `LICENCE`, `README.md` files; 18 | - When using imports from other components use their `package.json` name and include that name and specific path to aliases under /configs/aliases.config.js; 19 | - In order to check if published component works, add dependency to root `package.json` file, run `npm i` command and comment specific alias. Run storybook and test it. 20 | 21 | -------------------------------------------------------------------------------- /configs/aliases.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | // __dirname gives exact path where the file is, in this case: PROJECT/configs. It is needed to add ../ at the beginning of the aliases to solve correct path. 4 | 5 | const aliases = { 6 | '@audnavlib/button': path.resolve(__dirname, '../src/Button/src/index'), 7 | '@audnavlib/button-group': path.resolve(__dirname, '../src/ButtonGroup/src/index'), 8 | }; 9 | 10 | module.exports = { aliases }; 11 | -------------------------------------------------------------------------------- /configs/rules.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require('autoprefixer'); 2 | 3 | const rules = [ 4 | { 5 | exclude: /node_modules/, 6 | test: /\.(scss)$/, 7 | use: [ 8 | 'style-loader', 9 | 'css-loader', 10 | { 11 | loader: 'postcss-loader', 12 | options: { 13 | plugins: [ 14 | autoprefixer({ 15 | grid: "autoplace", 16 | }), 17 | ], 18 | }, 19 | }, 20 | 'sass-loader', 21 | ], 22 | }, 23 | { 24 | test: /\.(js|jsx)$/, 25 | exclude: /node_modules/, 26 | use: { 27 | loader: "babel-loader", 28 | options: { 29 | presets: ['@babel/preset-env', '@babel/react'] 30 | } 31 | } 32 | } 33 | ]; 34 | 35 | module.exports = rules; 36 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "3.13.0", 3 | "npmClient": "npm", 4 | "version": "independent", 5 | "packages": ["src/**/*"], 6 | "registry": "https://registry.npmjs.org/", 7 | "command": { 8 | "publish": { 9 | "ignoreChanges": ["*.md", "tests/*", "ignored-files"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "components-library-demo", 3 | "version": "1.0.0", 4 | "description": "A components library", 5 | "main": "index.js", 6 | "scripts": { 7 | "build:components": "lerna bootstrap && lerna exec npm run \"build\"", 8 | "clean:components": "lerna exec npm run \"clean\"", 9 | "publish:components": "lerna publish", 10 | "test": "echo \"Error: no test specified\" && exit 1", 11 | "start": "start-storybook -p 9001 -c .storybook" 12 | }, 13 | "author": "Audrius Navickas", 14 | "devDependencies": { 15 | "@babel/core": "7.2.2", 16 | "@babel/preset-env": "7.3.1", 17 | "@babel/preset-react": "7.0.0", 18 | "autoprefixer": "9.4.7", 19 | "babel-loader": "8.0.5", 20 | "cross-env": "5.2.0", 21 | "css-loader": "2.1.0", 22 | "lerna": "3.13.0", 23 | "node-sass": "4.11.0", 24 | "postcss-loader": "3.0.0", 25 | "sass-loader": "7.1.0", 26 | "style-loader": "0.23.1", 27 | "webpack": "4.29.3", 28 | "webpack-cli": "3.2.3" 29 | }, 30 | "dependencies": { 31 | "@storybook/cli": "4.1.13", 32 | "@storybook/react": "4.1.13", 33 | "react": "16.8.2", 34 | "react-dom": "16.8.2" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/Button/.npmignore: -------------------------------------------------------------------------------- 1 | # ignore all stories.js in src 2 | src/*.stories.js 3 | 4 | # ignore all .log files 5 | *.log 6 | -------------------------------------------------------------------------------- /src/Button/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this component will be documented in this file. 3 | 4 | ## [1.0.0] 5 | - Published main functionality 6 | -------------------------------------------------------------------------------- /src/Button/LICENCE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-present Audrius Navickas 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /src/Button/README.md: -------------------------------------------------------------------------------- 1 | # Button component 2 | 3 | ## Usage 4 | Import component with: `import Button from '@audnavlib/button';` 5 | -------------------------------------------------------------------------------- /src/Button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@audnavlib/button", 3 | "description": "Button component", 4 | "version": "1.0.0", 5 | "license": "MIT", 6 | "author": "Audrius Navickas", 7 | "main": "dist/index.js", 8 | "publishConfig": { 9 | "access": "public" 10 | }, 11 | "scripts": { 12 | "build": "cross-env webpack -p --config ../../webpack.config.js", 13 | "clean": "rimraf dist && rimraf node_modules && rimraf package-lock.json", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "peerDependencies": { 17 | "react": "^16.8.2", 18 | "react-dom": "^16.8.2" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/Button/src/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './button.scss'; 3 | 4 | const Button = props => ; 5 | 6 | export default Button; 7 | -------------------------------------------------------------------------------- /src/Button/src/Button.stories.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import Button from '@audnavlib/button'; 4 | 5 | storiesOf("Button", module).add("Default", () => ( 6 | 7 | )); 8 | -------------------------------------------------------------------------------- /src/Button/src/button.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | background-color: #404cfa; 3 | border: 0; 4 | border-radius: 25px; 5 | color: #fff; 6 | font-size: 14px; 7 | padding: 12px 24px; 8 | transition: background-color .2s ease-in-out; 9 | 10 | &:hover { 11 | background-color: #343ecc; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/Button/src/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Button'; 2 | -------------------------------------------------------------------------------- /src/ButtonGroup/.npmignore: -------------------------------------------------------------------------------- 1 | # ignore all stories.js in src 2 | src/*.stories.js 3 | 4 | # ignore all .log files 5 | *.log 6 | -------------------------------------------------------------------------------- /src/ButtonGroup/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this component will be documented in this file. 3 | 4 | ## [1.0.0] 5 | - Published main functionality 6 | -------------------------------------------------------------------------------- /src/ButtonGroup/LICENCE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-present Audrius Navickas 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /src/ButtonGroup/README.md: -------------------------------------------------------------------------------- 1 | # Button group component 2 | 3 | ## Usage 4 | Import component with: `import ButtonGroup from '@audnavlib/button-group';` 5 | -------------------------------------------------------------------------------- /src/ButtonGroup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@audnavlib/button-group", 3 | "description": "Button Group component", 4 | "version": "1.0.0", 5 | "license": "MIT", 6 | "author": "Audrius Navickas", 7 | "main": "dist/index.js", 8 | "publishConfig": { 9 | "access": "public" 10 | }, 11 | "scripts": { 12 | "build": "cross-env webpack -p --config ../../webpack.config.js", 13 | "clean": "rimraf dist && rimraf node_modules && rimraf package-lock.json", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "dependencies": { 17 | "@audnavlib/button": "^1.0.0" 18 | }, 19 | "peerDependencies": { 20 | "react": "^16.8.2", 21 | "react-dom": "^16.8.2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/ButtonGroup/src/ButtonGroup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './buttongroup.scss'; 3 | import Button from '@audnavlib/button'; 4 | 5 | const ButtonGroup = (props) => ( 6 |
7 | {props.items.map(item => { 8 | return 9 | })} 10 |
11 | ); 12 | 13 | export default ButtonGroup; 14 | -------------------------------------------------------------------------------- /src/ButtonGroup/src/ButtonGroup.stories.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import ButtonGroup from '@audnavlib/button-group'; 4 | 5 | const items = [ 6 | {id: 1, name: 'I am awesome', onClick: () => { alert('I am really really awesome!') }}, 7 | {id: 2, name: 'I am smart', onClick: () => { alert('I am really really smart!') }}, 8 | {id: 3, name: 'I am lazy', onClick: () => { alert('I am...') }} 9 | ]; 10 | 11 | storiesOf("ButtonGroup", module).add("Default", () => ( 12 | 13 | )); 14 | -------------------------------------------------------------------------------- /src/ButtonGroup/src/buttongroup.scss: -------------------------------------------------------------------------------- 1 | .button-group { 2 | .button { 3 | border-radius: 0; 4 | border-right: 1px solid #fff; 5 | 6 | &:last-child { 7 | border-right: 0; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/ButtonGroup/src/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './ButtonGroup'; 2 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package.json'); 2 | const rules = require('./configs/rules.config'); 3 | const { aliases } = require('./configs/aliases.config'); 4 | 5 | module.exports = { 6 | module: { 7 | rules: rules 8 | }, 9 | entry: './src/index.js', 10 | output: { 11 | filename: pkg.main, 12 | library: '', 13 | libraryTarget: 'commonjs' 14 | }, 15 | resolve: { 16 | alias: aliases, 17 | extensions: ['.js', '.jsx', '.json' ], 18 | modules: ['node_modules'] 19 | }, 20 | }; 21 | --------------------------------------------------------------------------------