├── .ci └── Jenkinsfile ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── jest.config.js ├── package.json ├── sample ├── .babelrc ├── .eslintrc ├── app.js ├── components │ ├── alert.js │ ├── button.js │ ├── checkbox.js │ ├── image.js │ ├── link.js │ ├── loading-bar.js │ ├── modal.js │ ├── pulsator.js │ ├── radio-group.js │ ├── select-list.js │ ├── spinner.js │ ├── tabs.js │ ├── tag.js │ ├── text-area.js │ ├── text-field.js │ ├── text.js │ ├── toast.js │ └── tooltip.js ├── entry.js ├── index.html ├── lib.js ├── package.json └── webpack.config.js ├── src ├── bootstrap.js ├── components │ ├── alert.js │ ├── button.js │ ├── checkbox.js │ ├── image.js │ ├── label.js │ ├── link.js │ ├── loading-bar.js │ ├── modal.js │ ├── pulsator.js │ ├── radio-group │ │ ├── index.js │ │ └── radio-button.js │ ├── select-list │ │ ├── index.js │ │ ├── select-list-item.js │ │ └── select-list-placeholder.js │ ├── spacing.js │ ├── spinner.js │ ├── tabs │ │ ├── index.js │ │ ├── primary-tab-option.js │ │ └── secondary-tab-option.js │ ├── tag.js │ ├── text-area.js │ ├── text-field.js │ ├── text.js │ ├── toast.js │ └── tooltip.js ├── elemental.js ├── icons │ ├── check.js │ └── clear.js ├── index.js ├── styles │ ├── color.js │ ├── font.js │ ├── spacing.js │ └── transition.js └── util │ ├── constants.js │ ├── inject-css.js │ ├── noop.js │ ├── number.js │ └── omit.js └── test ├── bootstrap.test.js ├── components ├── alert.test.js ├── button.test.js ├── checkbox.test.js ├── image.test.js ├── label.test.js ├── link.test.js ├── loading-bar.test.js ├── modal.test.js ├── pulsator.test.js ├── radio-group │ ├── index.test.js │ └── radio-button.test.js ├── select-list │ ├── index.test.js │ ├── select-list-item.test.js │ └── select-list-placeholder.test.js ├── spacing.test.js ├── spinner.test.js ├── tabs │ ├── index.test.js │ ├── primary-tab-option.test.js │ └── secondary-tab-option.test.js ├── tag.test.js ├── text-area.test.js ├── text-field.test.js ├── text.test.js ├── toast.test.js └── tooltip.test.js ├── elemental.test.js ├── environment.js ├── icons ├── check.test.js └── clear.test.js ├── setup.js ├── styles ├── color.test.js ├── font.test.js ├── spacing.test.js └── transition.test.js └── util ├── inject-css.test.js ├── noop.test.js ├── number.test.js └── omit.test.js /.ci/Jenkinsfile: -------------------------------------------------------------------------------- 1 | pipeline { 2 | agent { 3 | docker { 4 | image 'docker.internal.kevinlin.info/infra/ci-base:0.3.5' 5 | label 'docker-executor' 6 | } 7 | } 8 | 9 | options { 10 | withAWS( 11 | endpointUrl: 'https://storage.kevinlin.info', 12 | credentials: 'storage-internal', 13 | ) 14 | } 15 | 16 | stages { 17 | stage('Install') { 18 | steps { 19 | sh 'npm-s3 install' 20 | } 21 | } 22 | stage('Test') { 23 | parallel { 24 | stage('Build') { 25 | steps { 26 | sh 'npm run build' 27 | } 28 | } 29 | stage('Lint') { 30 | steps { 31 | sh 'npm run lint' 32 | } 33 | } 34 | stage('Unit') { 35 | steps { 36 | sh 'npm run cover' 37 | } 38 | } 39 | } 40 | } 41 | stage('Build') { 42 | steps { 43 | sh 'npm run prepublish' 44 | sh 'cd lib/ && npm pack' 45 | } 46 | } 47 | stage('Release') { 48 | steps { 49 | sh 'mv -v lib/*.tgz release.tgz' 50 | sh 'tar -cvzf release.tar.gz release.tgz' 51 | s3Upload( 52 | bucket: 'internal', 53 | path: "deploy/${env.JOB_NAME}/${env.GIT_COMMIT}/", 54 | file: 'release.tar.gz', 55 | ) 56 | } 57 | } 58 | stage('Deploy') { 59 | steps { 60 | build( 61 | job: 'task--js-library', 62 | parameters: [ 63 | string(name: 'RELEASE_ARTIFACT', value: env.JOB_NAME), 64 | string(name: 'RELEASE_VERSION', value: env.GIT_COMMIT), 65 | string(name: 'PACKAGE_NAME', value: env.JOB_NAME), 66 | string(name: 'PACKAGE_VERSION', value: env.GIT_COMMIT), 67 | ], 68 | wait: true, 69 | ) 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | lib/ 2 | sample/node_modules/ 3 | dist/ 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@linkiwi/eslint-config" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | lib/ 3 | dist/ 4 | node_modules/ 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | sample/ 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Kevin Lin 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 | ![react-elemental](https://static.kevinlin.info/blog/react-elemental/banner.png) 2 | 3 | **React Elemental** is a modern, flat UI library built for React. It is built for maximum development velocity: there is no CSS to import and no additional parameters to add to your Webpack configuration. React Elemental has first-class support for ES6/JSX and works effortlessly with SSR. 4 | 5 | See the [official documentation site](https://react-elemental-docs.static.kevinlin.info) for demos, examples, and detailed documentation for each available UI component. 6 | 7 | ![React Elemental](https://static.kevinlin.info/blog/react-elemental/hero.png) 8 | 9 | ## Installation 10 | 11 | ```bash 12 | $ npm install --save https://lib.kevinlin.info/react-elemental//release.tgz 13 | ``` 14 | 15 | ## Usage 16 | 17 | React Elemental exports UI components that you can use directly in your `render` function. However, you must first bootstrap (initialize) the library in order to set configuration globals. You can do this either *declaratively* using the provided `Elemental` React component (recommended) or *imperatively* by invoking the exported `bootstrap` function. 18 | 19 | #### Using the `Elemental` component 20 | 21 | At the top level of your application, instantiate an `Elemental` component and pass the rest of your application as its children. Configuration parameters are specified as props (available options are defined below). 22 | 23 | ```javascript 24 | import React from 'react'; 25 | import { Elemental } from 'react-elemental'; 26 | 27 | const App = () => ( 28 | 29 | application children 30 | 31 | ); 32 | 33 | export default App; 34 | ``` 35 | 36 | #### Using `bootstrap` directly 37 | 38 | As early as possible in your client-side rendering path, invoke the bootstrapping function (available options are defined below). 39 | 40 | ```javascript 41 | import React from 'react'; 42 | import { bootstrap } from 'react-elemental'; 43 | 44 | bootstrap(...); 45 | 46 | const App = () => { 47 | ... 48 | }; 49 | 50 | export default App; 51 | ``` 52 | 53 | #### Using exported Elemental UI components 54 | 55 | ```javascript 56 | import React from 'react'; 57 | import { Button, Spacing, Text } from 'react-elemental'; 58 | 59 | const MyComponent = ({ onClick }) => ( 60 | 61 | 62 | Hello world! 63 | 64 | 113 | 114 | 115 | 116 | 117 | 118 | Disabled state 119 | 120 | 121 | 122 |