├── .babelrc ├── .browserlistrc ├── .editorconfig ├── .eslintignore ├── .gitignore ├── .prettierrc ├── .storybook ├── addons.js └── config.js ├── LICENSE ├── README.md ├── doczrc.js ├── package-lock.json ├── package.json ├── public ├── logo-full.png └── logo-icon.png ├── src ├── README.mdx ├── components │ ├── Button │ │ ├── Button.js │ │ ├── README.mdx │ │ ├── index.js │ │ └── stories.js │ └── index.js └── index.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /.browserlistrc: -------------------------------------------------------------------------------- 1 | { 2 | "browserslist": [ 3 | "last 1 version", 4 | "> 1%", 5 | "maintained node versions", 6 | "not dead" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = tab 9 | insert_final_newline = true 10 | max_line_length = 80 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | max_line_length = 0 15 | trim_trailing_whitespace = false 16 | 17 | [COMMIT_EDITMSG] 18 | max_line_length = 0 19 | 20 | [*.{css,scss,html}] 21 | indent_size = 4 22 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /docs/ 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | *.log 4 | temp 5 | .eslintcache 6 | dist 7 | .docz 8 | *.psd 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babylon", 3 | "printWidth": 80, 4 | "useTabs": true, 5 | "tabWidth": 2, 6 | "singleQuote": true, 7 | "semi": true, 8 | "trailingComma": "es5", 9 | "bracketSpacing": true, 10 | "jsxBracketSameLine": false, 11 | "arrowParens": "always", 12 | "overrides": [ 13 | { 14 | "files": "*.md", 15 | "options": { 16 | "parser": "markdown" 17 | } 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-actions/register'; 2 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | const req = require.context('../src/components', true, /[^/]+\/stories.js$/); 4 | 5 | function loadStories() { 6 | req.keys().forEach((filename) => req(filename)); 7 | } 8 | 9 | configure(loadStories, module); 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Connor Wilson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Rinse 3 |

4 | 5 | > Rinse, React, repeat. A boilerplate to build a React component library. 6 | 7 | #### To learn how this project was made from scratch, [read the blog post](https://medium.com/@cwlsn/how-to-write-your-own-reusable-react-component-library-a57dc7c9a210)! 8 | 9 | ## Get Started 10 | 11 | To start your own React component library, clone this repository and start your own Git journey! 12 | 13 | ```bash 14 | $ git clone https://github.com/cwlsn/rinse-react cool-name 15 | $ cd cool-name 16 | $ rm -rf .git 17 | $ git init 18 | ``` 19 | 20 | ## Development and Storybook 21 | 22 | You can easily develop and interact with your components by using Storybook. To run the local server, simply run: 23 | 24 | ```bash 25 | $ npm i 26 | $ npm run storybook 27 | ``` 28 | 29 | Navigate to [http://localhost:9001](http://localhost:9001) to view your stories. They should automatically update as you develop. 30 | 31 | Storybook will pick up any story from the `stories.js` file in a component folder. 32 | 33 | Rinse is currently using the latest technology available, so you may need to update your Node versions to latest to accomodate Babel 7 and Webpack 4. 34 | -------------------------------------------------------------------------------- /doczrc.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | htmlContext: { 3 | head: { 4 | links: [ 5 | { 6 | rel: 'stylesheet', 7 | href: 8 | 'https://fonts.googleapis.com/css?family=Kadwa:400,700|Montserrat:400,400i,700', 9 | }, 10 | { 11 | rel: 'stylesheet', 12 | href: 'https://codemirror.net/theme/material.css', 13 | }, 14 | ], 15 | }, 16 | }, 17 | themeConfig: { 18 | codemirrorTheme: 'material', 19 | logo: { 20 | src: 21 | 'https://user-images.githubusercontent.com/10063864/45445171-7d1a6980-b697-11e8-9052-22f7b3c36e94.png', 22 | width: 232, 23 | }, 24 | colors: { 25 | primary: '#1494d0', 26 | sidebarBg: '#f3f3f3', 27 | }, 28 | styles: { 29 | body: { 30 | fontFamily: "'Montserrat', Helvetica Neue, Arial, sans", 31 | fontSize: 16, 32 | }, 33 | h1: { 34 | fontFamily: "'Kadwa'", 35 | }, 36 | h2: { 37 | fontFamily: "'Kadwa'", 38 | }, 39 | h3: { 40 | fontFamily: "'Kadwa'", 41 | }, 42 | logo: { 43 | background: 'transparent', 44 | alignItems: 'center', 45 | }, 46 | }, 47 | }, 48 | }; 49 | 50 | export default config; 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rinse-react", 3 | "version": "4.0.0", 4 | "description": "Rinse, React, repeat. A React component library boilerplate.", 5 | "main": "dist/rinse.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack --mode production", 9 | "storybook": "start-storybook -p 9001", 10 | "docz:dev": "docz dev", 11 | "docz:build": "docz build" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/cwlsn/rinse-react.git" 16 | }, 17 | "keywords": [ 18 | "boilerplate", 19 | "react", 20 | "shared", 21 | "components", 22 | "components" 23 | ], 24 | "author": "Connor Wilson", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/cwlsn/rinse-react/issues" 28 | }, 29 | "homepage": "https://github.com/cwlsn/rinse-react#readme", 30 | "devDependencies": { 31 | "@babel/core": "^7.2.2", 32 | "@babel/preset-env": "^7.2.3", 33 | "@babel/preset-react": "^7.0.0", 34 | "@storybook/addon-actions": "^4.0.0-alpha.20", 35 | "@storybook/react": "^4.1.18", 36 | "@tulipjs/eslint-config": "^1.1.1", 37 | "babel-loader": "^8.0.1", 38 | "css-loader": "^1.0.0", 39 | "docz": "^1.2.0", 40 | "docz-theme-default": "^1.2.0", 41 | "node-sass": "^4.9.3", 42 | "sass-loader": "^7.1.0", 43 | "style-loader": "^0.23.1", 44 | "url-loader": "^1.1.2", 45 | "webpack": "^4.28.3", 46 | "webpack-cli": "^3.2.0" 47 | }, 48 | "dependencies": { 49 | "react": "^16.8.6", 50 | "react-dom": "^16.8.6", 51 | "styled-components": "^4.2.1" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /public/logo-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cwlsn/rinse-react/78ca747f3de744815c44ddd33a2659d527ade02f/public/logo-full.png -------------------------------------------------------------------------------- /public/logo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cwlsn/rinse-react/78ca747f3de744815c44ddd33a2659d527ade02f/public/logo-icon.png -------------------------------------------------------------------------------- /src/README.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Home 3 | route: / 4 | order: 1 5 | --- 6 | 7 |

8 | Rinse 9 |

10 | 11 | > Rinse, React, repeat. A boilerplate to build a React component library. 12 | 13 | #### To learn how this project was made from scratch, [read the blog post](https://medium.com/@cwlsn/how-to-write-your-own-reusable-react-component-library-a57dc7c9a210)! 14 | 15 | ## Get Started 16 | 17 | To start your own React component library, clone this repository and start your own Git journey! 18 | 19 | ```bash 20 | $ git clone https://github.com/cwlsn/rinse-react cool-name 21 | $ cd cool-name 22 | $ rm -rf .git 23 | $ git init 24 | ``` 25 | 26 | ## Development and Storybook 27 | 28 | You can easily develop and interact with your components by using Storybook. To run the local server, simply run: 29 | 30 | ```bash 31 | $ npm i 32 | $ npm run storybook 33 | ``` 34 | 35 | Navigate to [http://localhost:9001](http://localhost:9001) to view your stories. They should automatically update as you develop. 36 | 37 | Storybook will pick up any story from the `stories.js` file in a component folder. 38 | 39 | Rinse is currently using the latest technology available, so you may need to update your Node versions to latest to accomodate Babel 7 and Webpack 4. 40 | -------------------------------------------------------------------------------- /src/components/Button/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // Styled components 💅 is library that allows you create components easily and 3 | // style them, css-in-js style. It's totally optional, but I prefer to use it 4 | // to build things quickly and have them look great every step of the way. 5 | import styled from 'styled-components'; 6 | 7 | // Style components take CSS in a template string. Even Sass functions with work! 8 | // Each element is a property of styled, like h3, p, div, etc... 9 | const ButtonWrapper = styled.button` 10 | border-radius: 8px; 11 | color: #fff; 12 | background: mediumvioletred; 13 | padding: 8px 15px; 14 | border: none; 15 | outline: none; 16 | `; 17 | 18 | // Components are functions, and they must start with a capital letter 19 | function Button(props) { 20 | // {...props} uses the the ES6 spread operator to send any props you may pass 21 | // along without changing any of the contents. This is basically just creating 22 | // a copy to pass along 23 | return {props.children}; 24 | } 25 | 26 | // This export will be picked up in ./index.js 27 | export default Button; 28 | -------------------------------------------------------------------------------- /src/components/Button/README.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Button 3 | menu: Components 4 | route: /components/Button 5 | --- 6 | 7 | import Button from './'; 8 | import { Playground, Props } from 'docz'; 9 | 10 | # Button 11 | 12 | This component renders an HTML ` 20 | 21 | -------------------------------------------------------------------------------- /src/components/Button/index.js: -------------------------------------------------------------------------------- 1 | // Import the Button component from this folder and send it down to ./components/index.js 2 | import Button from './Button'; 3 | 4 | export default Button; 5 | -------------------------------------------------------------------------------- /src/components/Button/stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // Import the storybook libraries 3 | import { storiesOf } from '@storybook/react'; 4 | import { action } from '@storybook/addon-actions'; 5 | // Import our component from this folder 6 | import Button from './Button'; 7 | 8 | // Here we describe the stories we want to see of the Button. The component is 9 | // pretty simple so we will just make two, one with text and one with emojis 10 | // Simple call storiesOf and then chain .add() as many times as you wish 11 | // 12 | // .add() takes a name and then a function that should return what you want 13 | // rendered in the rendering area 14 | storiesOf('Button') 15 | .add('with text', () => ( 16 | 17 | )) 18 | .add('with emoji', () => ( 19 | 20 | )); 21 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | // In this file we explicity export everything. This is just to be thorough 2 | // and explicit. This thorough exporting method can seem like a lot, but it 3 | // allows for simpler scaling when your library grows in size, and even adds 4 | // different tech like TypeScript 5 | export { default as Button } from './Button'; 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // Export all the explicitly exported components, this file will contain our 2 | // components when built by webpack and sent off to the world. 3 | export * from './components'; 4 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | // Path is in Node for free and will make simple resolving of directories no 2 | // matter which part of your file system your library lives in 3 | const path = require('path'); 4 | 5 | // Webpack is just a bunch of keys on module.exports! 6 | module.exports = { 7 | // This is where our app starts. This is why we have done all this importing 8 | // and exporting, to get to here 9 | entry: './src/index.js', 10 | // module (I know it's a bit weird to have module.exports.module) is where we 11 | // define all the rules for how webpack will deal with thing. 12 | module: { 13 | // rules takes an array, each item containing the respective rules 14 | rules: [ 15 | { 16 | // First up, our JavaScript rules. 17 | // If you want to use the .jsx extension, you can change this line to 18 | // test: /\.jsx?$/, 19 | // The ? in the regex just means "optional" 20 | test: /\.js$/, 21 | // Don't bother spending time transpiling your installed packages 22 | // exclude: /node_modules/, 23 | // This is where we tell webpack to use babel to transpile our JS. 24 | // The configuration can go here, but in this case it's in ./babelrc.js 25 | use: { 26 | loader: 'babel-loader', 27 | }, 28 | }, 29 | { 30 | // I haven't used SCSS in the base example, but it's here for you if you 31 | // want! If you want to use CSS, you can change this next like's regex to 32 | // /\.(css|scss)$/ or even just /\.css$/ 33 | test: /\.scss$/, 34 | use: [ 35 | // These three libraries are commonly used together to turn Sass into 36 | // CSS, then be able to load the CSS directly with imports. From there 37 | // It gets put in the DOM for you. 38 | { loader: 'style-loader' }, 39 | { loader: 'css-loader' }, 40 | { loader: 'sass-loader' }, 41 | ], 42 | }, 43 | { 44 | // Some image formats so you can import images 45 | test: /\.(png|gif|jpg|svg)$/, 46 | use: { 47 | loader: 'url-loader', 48 | options: { 49 | limit: 50000, 50 | }, 51 | }, 52 | }, 53 | ], 54 | }, 55 | // Here we define explicitly the file types we intend to deal with 56 | resolve: { 57 | extensions: ['.scss', '.js', '.json', '.png', '.gif', '.jpg', '.svg'], 58 | }, 59 | // This is where we define how everything gets output. 60 | // dist is a common output folder, and it should be gitignored. The build can 61 | // be run after publishing so you don't wind up with it in source control 62 | output: { 63 | path: path.resolve(__dirname, 'dist/'), 64 | publicPath: '', 65 | // You can do fun things here like use the [hash] keyword to generate unique 66 | // filenames, but for this purpose rinse.js is fine. This file and path will 67 | // be what you put in package.json's "main" field 68 | filename: 'rinse.js', 69 | // This field determines how things are importable when installed from other 70 | // sources. UMD may not be correct now and there is an open issue to fix this, 71 | // but until then, more reading can be found here: 72 | // https://webpack.js.org/configuration/output/#output-librarytarget 73 | libraryTarget: 'umd', 74 | }, 75 | }; 76 | --------------------------------------------------------------------------------