├── .babelrc ├── .codeclimate.yml ├── .editorconfig ├── .eslintrc.yml ├── .github └── workflows │ └── npm-publish.yml ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── demo └── electron │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── index.html │ ├── index.js │ ├── package.json │ ├── page_index.js │ └── webpack.config.js ├── docs ├── README.md ├── advanced-usage │ ├── electron-js.md │ └── nw-js.md ├── faq.md ├── getting-started │ └── installation.md ├── mac-os │ ├── box.md │ ├── button.md │ ├── checkbox.md │ ├── dialog.md │ ├── label.md │ ├── link.md │ ├── list-view.md │ ├── pin.md │ ├── progress-circle.md │ ├── radio.md │ ├── search-field.md │ ├── segmented-control.md │ ├── text-input.md │ ├── text.md │ ├── title-bar.md │ ├── toolbar-nav.md │ ├── toolbar.md │ ├── view.md │ └── window.md ├── resources │ ├── demo.svg │ └── react-desktop.svg ├── screenshots │ ├── osx.png │ └── win.png ├── testing.md └── windows │ ├── button.md │ ├── checkbox.md │ ├── label.md │ ├── master-details-view.md │ ├── nav-pane.md │ ├── progress-circle.md │ ├── radio.md │ ├── text-input.md │ ├── text.md │ ├── title-bar.md │ ├── view.md │ └── window.md ├── examples ├── macOs │ ├── advanced │ │ └── pinDialog.js │ └── components │ │ ├── box.js │ │ ├── button.js │ │ ├── checkbox.js │ │ ├── dialog.js │ │ ├── label.js │ │ ├── link.js │ │ ├── listView.js │ │ ├── pin.js │ │ ├── progressCircle.js │ │ ├── radio.js │ │ ├── searchField.js │ │ ├── segmentedControl.js │ │ ├── text.js │ │ ├── textArea.js │ │ ├── textInput.js │ │ ├── titleBar.js │ │ ├── toolbar.js │ │ ├── toolbarNav.js │ │ ├── view.js │ │ └── window.js └── windows │ └── components │ ├── button.js │ ├── checkbox.js │ ├── label.js │ ├── masterDetailsView.js │ ├── navPane.js │ ├── progressCircle.js │ ├── radio.js │ ├── text.js │ ├── textArea.js │ ├── textInput.js │ ├── titleBar.js │ ├── view.js │ └── window.js ├── index.js ├── macOs.js ├── package.json ├── playground ├── assets │ ├── background.jpg │ ├── icons.js │ └── picture.jpg ├── examplesLoader.js ├── index.js ├── playground.js ├── ui │ ├── examples │ │ └── examples.js │ └── sidebar │ │ ├── logo.js │ │ └── sidebar.js └── webpack.config.js ├── src ├── Box │ └── macOs │ │ ├── index.js │ │ └── styles │ │ └── 10.11.js ├── Button │ ├── macOs │ │ ├── index.js │ │ └── styles │ │ │ └── 10.11.js │ └── windows │ │ ├── index.js │ │ └── styles │ │ └── windows10.js ├── Checkbox │ ├── macOs │ │ ├── Checkmark.js │ │ ├── index.js │ │ └── styles │ │ │ └── 10.11.js │ └── windows │ │ ├── index.js │ │ └── styles │ │ └── windows10.js ├── Dialog │ └── macOs │ │ ├── index.js │ │ └── style │ │ └── 10.11.js ├── Label │ ├── macOs │ │ └── index.js │ └── windows │ │ └── index.js ├── Link │ └── macOs │ │ └── index.js ├── ListView │ └── macOs │ │ ├── Footer │ │ ├── index.js │ │ └── style │ │ │ └── 10.11.js │ │ ├── Header │ │ ├── index.js │ │ └── style │ │ │ └── 10.11.js │ │ ├── Row │ │ ├── index.js │ │ └── style │ │ │ └── 10.11.js │ │ ├── Section │ │ ├── Header │ │ │ ├── index.js │ │ │ └── style │ │ │ │ └── 10.11.js │ │ ├── index.js │ │ └── style │ │ │ └── 10.11.js │ │ ├── Separator │ │ ├── index.js │ │ └── style │ │ │ └── 10.11.js │ │ ├── index.js │ │ └── style │ │ └── 10.11.js ├── MasterDetailsView │ └── windows │ │ ├── Details │ │ └── index.js │ │ ├── Item │ │ └── index.js │ │ ├── Master │ │ └── index.js │ │ ├── Pane.js │ │ └── index.js ├── NavPane │ └── windows │ │ ├── Item │ │ ├── Content │ │ │ └── index.js │ │ ├── Title │ │ │ └── index.js │ │ └── index.js │ │ ├── Pane │ │ ├── Button │ │ │ └── index.js │ │ ├── Item │ │ │ └── index.js │ │ ├── index.js │ │ └── style │ │ │ └── windows10.js │ │ ├── index.js │ │ └── style │ │ └── windows10.js ├── Pin │ └── macOs │ │ ├── index.js │ │ └── style │ │ └── 10.11.js ├── ProgressCircle │ ├── macOs │ │ ├── index.js │ │ ├── progressCircleAnimation.js │ │ └── styles │ │ │ └── 10.11.js │ └── windows │ │ ├── index.js │ │ ├── progressCircleAnimation.js │ │ └── styles │ │ └── windows10.js ├── Radio │ ├── macOs │ │ ├── Circle.js │ │ ├── index.js │ │ └── styles │ │ │ └── 10.11.js │ └── windows │ │ ├── index.js │ │ └── styles │ │ └── windows.js ├── SearchField │ └── macOs │ │ ├── cancelAnimation.js │ │ ├── icons.js │ │ ├── index.js │ │ └── styles │ │ └── 10.11.js ├── SegmentedControl │ └── macOs │ │ ├── Item │ │ └── index.js │ │ ├── Tabs │ │ ├── Tab.js │ │ └── index.js │ │ ├── index.js │ │ └── style │ │ └── 10.11.js ├── Text │ ├── macOs │ │ ├── index.js │ │ └── styles │ │ │ └── 10.11.js │ └── windows │ │ ├── index.js │ │ └── styles │ │ └── windows10.js ├── TextArea │ ├── macOs │ │ ├── centerPlaceholderAnimation.js │ │ ├── focusRingAnimation.js │ │ ├── index.js │ │ └── styles │ │ │ └── 10.11.js │ └── windows │ │ ├── index.js │ │ └── styles │ │ └── windows10.js ├── TextInput │ ├── macOs │ │ ├── centerPlaceholderAnimation.js │ │ ├── focusRingAnimation.js │ │ ├── index.js │ │ └── styles │ │ │ └── 10.11.js │ └── windows │ │ ├── index.js │ │ └── styles │ │ └── windows10.js ├── TitleBar │ ├── macOs │ │ ├── Controls │ │ │ ├── Close.js │ │ │ ├── Minimize.js │ │ │ ├── Resize.js │ │ │ ├── index.js │ │ │ └── styles │ │ │ │ └── 10.11.js │ │ ├── index.js │ │ └── styles │ │ │ └── 10.11.js │ └── windows │ │ ├── Controls │ │ ├── Close.js │ │ ├── Maximize.js │ │ ├── Minimize.js │ │ └── index.js │ │ ├── index.js │ │ └── styles │ │ └── windows10.js ├── Toolbar │ └── macOs │ │ ├── Nav │ │ ├── Item │ │ │ └── index.js │ │ └── index.js │ │ └── index.js ├── ValueRef.js ├── View │ ├── macOs │ │ └── index.js │ └── windows │ │ └── index.js ├── Window │ ├── macOs │ │ ├── index.js │ │ └── styles │ │ │ └── 10.11.js │ └── windows │ │ ├── index.js │ │ └── styles │ │ └── windows10.js ├── animation │ └── bezierEasing.js ├── color.js ├── monitor.js ├── os.js ├── placeholderStyle.js ├── style │ ├── alignment.js │ ├── background │ │ ├── macOs.js │ │ └── windows.js │ ├── color │ │ └── windows.js │ ├── dimension.js │ ├── fontSize.js │ ├── hidden.js │ ├── margin.js │ ├── padding.js │ ├── textAlign.js │ ├── theme │ │ └── windows.js │ └── width.js ├── styleHelper.js ├── utils │ └── mapStyles.js └── windowFocus.js ├── test ├── mocha.opts ├── setup.js └── tests │ ├── box.js │ ├── button.js │ ├── checkbox.js │ ├── color.js │ ├── dialog.js │ ├── index.js │ ├── label.js │ ├── link.js │ ├── listView.js │ ├── macOs.js │ ├── pin.js │ ├── progressCircle.js │ ├── searchField.js │ ├── text.js │ ├── textArea.js │ ├── textInput.js │ ├── toolbar.js │ ├── toolbarNav.js │ └── windows.js └── windows.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-0", 5 | "react" 6 | ], 7 | "plugins": [ 8 | "transform-decorators-legacy" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | languages: 2 | JavaScript: true 3 | exclude_paths: 4 | - "test/*" 5 | - "lib/*" 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # http://editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | # Change these settings to your own preference 10 | indent_style = space 11 | indent_size = 2 12 | 13 | # We recommend you to keep these unchanged 14 | end_of_line = lf 15 | charset = utf-8 16 | trim_trailing_whitespace = true 17 | insert_final_newline = true 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | parser: babel-eslint 2 | 3 | extends: 4 | - plugin:import/errors 5 | - plugin:import/warnings 6 | 7 | plugins: 8 | - react 9 | 10 | env: 11 | browser: true 12 | node: true 13 | es6: true 14 | mocha: true 15 | 16 | rules: 17 | # Strict mode 18 | strict: [2, never] 19 | 20 | # Code style 21 | indent: [2, 2] 22 | quotes: [2, single] 23 | no-unused-vars: 1 24 | no-undef: 1 25 | object-curly-spacing: [2, always] 26 | 27 | # JSX 28 | jsx-quotes: 1 29 | 30 | # React 31 | react/display-name: 0 32 | react/jsx-boolean-value: 1 33 | react/jsx-closing-bracket-location: 1 34 | react/jsx-curly-spacing: 1 35 | react/jsx-max-props-per-line: 0 36 | react/jsx-indent-props: 0 37 | react/jsx-no-duplicate-props: 1 38 | react/jsx-no-undef: 1 39 | react/jsx-sort-prop-types: 0 40 | react/jsx-sort-props: 0 41 | react/jsx-uses-react: 1 42 | react/jsx-uses-vars: 1 43 | react/no-danger: 0 44 | react/no-set-state: 0 45 | react/no-did-mount-set-state: 1 46 | react/no-did-update-set-state: 1 47 | react/no-multi-comp: 0 48 | react/no-unknown-property: 1 49 | react/self-closing-comp: 1 50 | react/jsx-wrap-multilines: 1 51 | -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages 3 | 4 | name: Node.js Package 5 | 6 | on: 7 | release: 8 | types: [created] 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v2 15 | - uses: actions/setup-node@v2 16 | with: 17 | node-version: 12 18 | - run: npm ci 19 | - run: npm test 20 | 21 | publish-npm: 22 | needs: build 23 | runs-on: ubuntu-latest 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v2 27 | with: 28 | node-version: 12 29 | registry-url: https://registry.npmjs.org/ 30 | - run: npm ci 31 | - run: npm publish 32 | env: 33 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 34 | 35 | publish-gpr: 36 | needs: build 37 | runs-on: ubuntu-latest 38 | permissions: 39 | contents: read 40 | packages: write 41 | steps: 42 | - uses: actions/checkout@v2 43 | - uses: actions/setup-node@v2 44 | with: 45 | node-version: 12 46 | registry-url: https://npm.pkg.github.com/ 47 | - run: npm ci 48 | - run: npm publish 49 | env: 50 | NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} 51 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS generated files 2 | .DS_Store 3 | .DS_Store? 4 | ._* 5 | .Spotlight-V100 6 | .Trashes 7 | /.idea 8 | ehthumbs.db 9 | Thumbs.db 10 | 11 | # Node 12 | /node_modules 13 | yarn.lock 14 | 15 | # react-desktop # 16 | ######## 17 | 18 | /lib 19 | /build 20 | 21 | # Logs 22 | logs 23 | *.log 24 | npm-debug.log* 25 | package-lock.json 26 | 27 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /build 2 | /docs 3 | /examples 4 | /lib 5 | /node_modules 6 | /playground 7 | /test 8 | /.idea 9 | /.babelrc 10 | /.codeclimate.yml 11 | /.editorconfig 12 | /.eslintrc 13 | /.npmignore 14 | /.travis.yml 15 | /CONTRIBUTING.md 16 | /npm-debug.log 17 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '8' 4 | - '7' 5 | - '6' 6 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | We are open to, and grateful for, any contributions made by the community. 4 | 5 | ## Reporting Issues and Asking Questions 6 | 7 | Before opening an issue, please search the [issue tracker](https://github.com/gabrielbull/react-desktop/issues) 8 | to make sure your issue hasn’t already been reported. 9 | 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © 2017 Gabriel Bull 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ![React Desktop](https://rawgit.com/gabrielbull/react-desktop/master/docs/resources/react-desktop.svg "React Desktop") 2 | 3 | [![Build Status](https://travis-ci.org/gabrielbull/react-desktop.svg?branch=master)](https://travis-ci.org/gabrielbull/react-desktop) 4 | [![Code Climate](https://codeclimate.com/github/gabrielbull/react-desktop/badges/gpa.svg)](https://codeclimate.com/github/gabrielbull/react-desktop) 5 | [![GitHub license](https://img.shields.io/github/license/gabrielbull/react-desktop?style=square)](https://github.com/gabrielbull/react-desktop/blob/master/LICENSE) 6 | [![GitHub stars](https://img.shields.io/github/stars/gabrielbull/react-desktop)](https://github.com/gabrielbull/react-desktop/stargazers) 7 | [![npm downloads](http://img.shields.io/npm/dt/react-desktop.svg)](https://www.npmjs.org/package/react-desktop) 8 | [![npm version](https://img.shields.io/npm/v/react-desktop.svg)](https://www.npmjs.org/package/react-desktop) 9 | [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/gabrielbull/react-desktop?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 10 | 11 | React UI Components for macOS High Sierra and Windows 10. 12 | 13 | ```npm 14 | npm install react-desktop --save 15 | ``` 16 | 17 | ![Demo](https://rawgit.com/gabrielbull/react-desktop/master/docs/resources/demo.svg "Demo") 18 | 19 | ## Help wanted! 20 | 21 | I am looking for developers to help me develop this project. Please submit some ideas in the issues section or some PRs to get this project going. If you are interested, you can become a collaborator on the project. Thanks. 22 | 23 | ## Contributing 24 | 25 | This library has been created to bring a native desktop experience to the web. It works extremely well with tools such as [node-webkit](http://nwjs.io) or [Electron.js](http://electron.atom.io)! 26 | 27 | Everyone is welcome to contribute and add more components/documentation whilst following the [contributing guidelines](/CONTRIBUTING.md). 28 | 29 | ## Documentation 30 | 31 | Guides on installation, components and advanced usage are found in the [documentation](http://reactdesktop.js.org). 32 | 33 | ## Contributors 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /demo/electron/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ -------------------------------------------------------------------------------- /demo/electron/README.md: -------------------------------------------------------------------------------- 1 | # React desktop Electron demo 2 | 3 | ![TIM201907300143533f238.png](https://miao.su/images/2019/07/30/TIM201907300143533f238.png) 4 | 5 | ## How to use 6 | 7 | First, enter the folder: 8 | 9 | ```cd demo/electron``` 10 | 11 | Install the libraries: 12 | 13 | ```npm i``` or ```yarn``` (if you have been installed it) 14 | 15 | Build once: 16 | 17 | ```npm run build``` 18 | 19 | Then start the server: 20 | 21 | ```npm run watch``` 22 | 23 | Open another console at the same folder, and run this command to start the Electron process: 24 | 25 | ```npm start``` 26 | 27 | That's it! 28 | -------------------------------------------------------------------------------- /demo/electron/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(false); 3 | 4 | const presets = [ 5 | [ 6 | '@babel/preset-env', 7 | { 8 | 'modules': 'commonjs', 9 | 'targets': { 10 | 'node': 'current' 11 | } 12 | } 13 | ], 14 | [ 15 | '@babel/preset-react' 16 | ] 17 | ]; 18 | const plugins = [ 19 | [ 20 | '@babel/plugin-proposal-decorators', 21 | { 22 | 'legacy': true 23 | } 24 | ], 25 | [ 26 | '@babel/plugin-proposal-class-properties', 27 | { 28 | 'loose': true 29 | } 30 | ] 31 | ]; 32 | 33 | return { 34 | presets, 35 | plugins 36 | }; 37 | } -------------------------------------------------------------------------------- /demo/electron/index.js: -------------------------------------------------------------------------------- 1 | const electron = require('electron'); 2 | const { app, BrowserWindow, Menu } = electron; 3 | let mainWnd = null; 4 | 5 | function createMainWnd() { 6 | mainWnd = new BrowserWindow({ 7 | width:800, 8 | height:600, 9 | minWidth:800, 10 | maxWidth: 800, 11 | minHeight: 600, 12 | maxHeight: 600, 13 | useContentSize: true, 14 | show: false, 15 | frame: false, 16 | titleBarStyle: 'hidden', 17 | webPreferences: { 18 | nodeIntegration: true 19 | } 20 | }); 21 | 22 | mainWnd.loadURL('http://127.0.0.1:16000/index.html'); 23 | 24 | mainWnd.on('ready-to-show', ()=>{ 25 | Menu.setApplicationMenu(null); 26 | mainWnd.show(); 27 | // mainWnd.webContents.openDevTools({ detach:true }); 28 | }); 29 | 30 | mainWnd.on('closed', () => { 31 | mainWnd = null; 32 | process.exit(); 33 | }); 34 | } 35 | 36 | app.on('ready', ()=>{ 37 | createMainWnd(); 38 | }); 39 | 40 | app.on('window-all-closed', () => { 41 | app.quit(); 42 | }); 43 | -------------------------------------------------------------------------------- /demo/electron/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-desktop-electron-demo", 3 | "version": "0.1.0", 4 | "description": "", 5 | "private": true, 6 | "scripts": { 7 | "start": "electron ./index.js", 8 | "watch": "webpack-dev-server --config ./webpack.config.js --colors --inline --port 16000", 9 | "build": "webpack --config ./webpack.config.js", 10 | "package": "electron-packager ./ ReactDesktop --all --overwrite --out=./packaged/", 11 | "package:windows": "electron-packager ./ ReactDesktop --platform=win32 --overwrite --out=./packaged/", 12 | "package:mac": "electron-builder build --mac --config electron-builder.json --publish never", 13 | "test": "jest --watch" 14 | }, 15 | "author": "langyo", 16 | "license": "MIT", 17 | "dependencies": { 18 | "@babel/cli": "^7.5.5", 19 | "@babel/core": "^7.5.5", 20 | "@babel/plugin-proposal-class-properties": "^7.5.5", 21 | "@babel/plugin-proposal-decorators": "^7.4.4", 22 | "@babel/plugin-transform-flow-strip-types": "^7.4.4", 23 | "@babel/preset-env": "^7.5.5", 24 | "@babel/preset-react": "^7.0.0", 25 | "@material-ui/core": "^4.3.0", 26 | "babel-jest": "^24.8.0", 27 | "babel-loader": "^8.0.6", 28 | "classnames": "^2.2.6", 29 | "prop-types": "^15.7.2", 30 | "react": "^16.8.6", 31 | "react-desktop": "^0.3.9", 32 | "react-dom": "^16.8.6" 33 | }, 34 | "keywords": [], 35 | "devDependencies": { 36 | "electron": "^9.1.0", 37 | "electron-builder": "^21.1.5", 38 | "electron-packager": "^14.0.3", 39 | "jest": "^24.8.0", 40 | "webpack": "^4.38.0", 41 | "webpack-cli": "^3.3.6", 42 | "webpack-dev-server": "^3.7.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo/electron/page_index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import { Window, TitleBar } from 'react-desktop/windows'; 5 | import Button from '@material-ui/core/Button'; 6 | 7 | ReactDOM.render( 12 | process.exit()}/> 13 |
14 | 17 |
18 | , document.querySelector('#content')); 19 | -------------------------------------------------------------------------------- /demo/electron/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'development', 5 | 6 | entry: './page_index.js', 7 | 8 | output: { 9 | filename: 'bundle.js' 10 | }, 11 | 12 | devtool: 'source-map', 13 | 14 | // resolve: { 15 | // alias: { 16 | // 'react-desktop': path.join(__dirname, '..', '..') 17 | // } 18 | // }, 19 | 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.(js)$/, 24 | exclude: /node_modules/, 25 | use: 'babel-loader' 26 | } 27 | ] 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Documentation 2 | 3 | **react-desktop** is a JavaScript library built on top of [Facebook's React](https://facebook.github.io/react/) library, 4 | which aims to bring a native desktop experience to the web, featuring many macOS High Sierra and Windows 10 components. 5 | **react-desktop** works perfectly with [NW.js](http://nwjs.io) and [Electron.js](http://electron.atom.io), but 6 | can be used in any JavaScript powered project! 7 | 8 | ## Table of Contents 9 | 10 | 1. Getting Started 11 | * [Installation](/docs/getting-started/installation.md) 12 | 2. macOS 13 | * [Box](/docs/mac-os/box.md) 14 | * [Button](/docs/mac-os/button.md) 15 | * [Checkbox](/docs/mac-os/checkbox.md) 16 | * [Dialog](/docs/mac-os/dialog.md) 17 | * [Label](/docs/mac-os/label.md) 18 | * [Link](/docs/mac-os/link.md) 19 | * [List View](/docs/mac-os/list-view.md) 20 | * [Pin](/docs/mac-os/pin.md) 21 | * [Progress Circle](/docs/mac-os/progress-circle.md) 22 | * [Radio](/docs/mac-os/radio.md) 23 | * [Search Field](/docs/mac-os/search-field.md) 24 | * [Segmented Control](/docs/mac-os/segmented-control.md) 25 | * [Text](/docs/mac-os/text.md) 26 | * [Text Input](/docs/mac-os/text-input.md) 27 | * [Title Bar](/docs/mac-os/title-bar.md) 28 | * [Toolbar](/docs/mac-os/toolbar.md) 29 | * [Toolbar Nav](/docs/mac-os/toolbar-nav.md) 30 | * [View](/docs/mac-os/view.md) 31 | * [Window](/docs/mac-os/window.md) 32 | 3. Windows 10 33 | * [Button](/docs/windows/button.md) 34 | * [Checkbox](/docs/windows/checkbox.md) 35 | * [Label](/docs/windows/label.md) 36 | * [Master/Details View](/docs/windows/master-details-view.md) 37 | * [Nav Pane](/docs/windows/nav-pane.md) 38 | * [Progress Circle](/docs/windows/progress-circle.md) 39 | * [Radio](/docs/windows/radio.md) 40 | * [Text](/docs/windows/text.md) 41 | * [Text Input](/docs/windows/text-input.md) 42 | * [Title Bar](/docs/windows/title-bar.md) 43 | * [View](/docs/windows/view.md) 44 | * [Window](/docs/windows/window.md) 45 | 4. [Contributing](/CONTRIBUTING.md) 46 | 5. [Change Log](/CHANGELOG.md) 47 | 48 | 55 | -------------------------------------------------------------------------------- /docs/advanced-usage/electron-js.md: -------------------------------------------------------------------------------- 1 | # Electron.js 2 | 3 | Documentation is coming soon. 4 | -------------------------------------------------------------------------------- /docs/advanced-usage/nw-js.md: -------------------------------------------------------------------------------- 1 | # NW.js 2 | 3 | Documentation is coming soon. 4 | -------------------------------------------------------------------------------- /docs/faq.md: -------------------------------------------------------------------------------- 1 | # Frequently Asked Questions 2 | 3 | Documentation is coming soon. 4 | -------------------------------------------------------------------------------- /docs/getting-started/installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | **To install the stable version:** 4 | 5 | ## [NPM](https://www.npmjs.com/) 6 | `npm install react-desktop --save` 7 | 8 | ## [Yarn](https://yarnpkg.com) 9 | `yarn add react-desktop` 10 | -------------------------------------------------------------------------------- /docs/mac-os/box.md: -------------------------------------------------------------------------------- 1 | # Box 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-------------:| :---------- 7 | background | string | Sets the background color of a component. 8 | height | number | Sets the height of a component. 9 | hidden | bool | Sets the visibility of a component. 10 | horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ 11 | label | string | Adds a label to the box. 12 | margin | string, number | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ 13 | marginBottom | string, number | Sets the outer margin bottom of a component. 14 | marginLeft | string, number | Sets the outer margin left of a component. 15 | marginRight | string, number | Sets the outer margin right of a component. 16 | marginTop | string, number | Sets the outer margin top of a component. 17 | padding | string, number | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ 18 | paddingBottom | string, number | Sets the padding bottom inside a component. 19 | paddingLeft | string, number | Sets the padding left inside a component. 20 | paddingRight | string, number | Sets the padding right inside a component. 21 | paddingTop | string, number | Sets the padding top inside a component. 22 | verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ 23 | width | number | Sets the width of a component. 24 | 25 | ### Examples 26 | 27 | ```jsx 28 | import React, { Component } from 'react'; 29 | import { Box, Text } from 'react-desktop/macOs'; 30 | 31 | export default class extends Component { 32 | render() { 33 | return ( 34 | 35 | Some text... 36 | 37 | ); 38 | } 39 | } 40 | ``` 41 | -------------------------------------------------------------------------------- /docs/mac-os/button.md: -------------------------------------------------------------------------------- 1 | # Button 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-------------:| :---------- 7 | color | string | Sets the color of the button
__Property value__ _null_ _"blue"_. 8 | hidden | bool | Sets the visibility of a component. 9 | margin | string, number | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ 10 | marginBottom | string, number | Sets the outer margin bottom of a component. 11 | marginLeft | string, number | Sets the outer margin left of a component. 12 | marginRight | string, number | Sets the outer margin right of a component. 13 | marginTop | string, number | Sets the outer margin top of a component. 14 | onClick | function | Callback function when the button is pressed. 15 | onEnter | function | Callback function when the the enter key is pressed. 16 | padding | string, number | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ 17 | paddingBottom | string, number | Sets the padding bottom inside a component. 18 | paddingLeft | string, number | Sets the padding left inside a component. 19 | paddingRight | string, number | Sets the padding right inside a component. 20 | paddingTop | string, number | Sets the padding top inside a component. 21 | size | string, number | Sets the font size of a component. 22 | type | string | Sets the type of the button
__Property value__ _"button"_ _"submit"_. Default value _"button"_. 23 | 24 | ### Examples 25 | 26 | ```jsx 27 | import React, { Component } from 'react'; 28 | import { Button } from 'react-desktop/macOs'; 29 | 30 | export default class extends Component { 31 | render() { 32 | return ( 33 | 36 | ); 37 | } 38 | } 39 | ``` 40 | -------------------------------------------------------------------------------- /docs/mac-os/checkbox.md: -------------------------------------------------------------------------------- 1 | # Checkbox 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | defaultValue | string | Sets the default value of the input. 8 | defaultChecked | string | If true, the checkbox is checked by default. 9 | hidden | bool | Sets the visibility of a component. 10 | label | string | Adds a label to the checkbox. 11 | onChange | function | Callback function when the checkbox has changed. 12 | 13 | ### Examples 14 | 15 | ```jsx 16 | import React, { Component } from 'react'; 17 | import { Checkbox } from 'react-desktop/macOs'; 18 | 19 | export default class extends Component { 20 | render() { 21 | return ( 22 | console.log(e.target.value)} 25 | defaultValue="I got checked!" 26 | defaultChecked 27 | /> 28 | ); 29 | } 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /docs/mac-os/label.md: -------------------------------------------------------------------------------- 1 | # Label 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-------------:| :---------- 7 | color | string | Sets the color of the text. 8 | height | number | Sets the height of a component. 9 | hidden | bool | Sets the visibility of a component. 10 | horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ 11 | margin | string, number | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ 12 | marginBottom | string, number | Sets the outer margin bottom of a component. 13 | marginLeft | string, number | Sets the outer margin left of a component. 14 | marginRight | string, number | Sets the outer margin right of a component. 15 | marginTop | string, number | Sets the outer margin top of a component. 16 | padding | string, number | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ 17 | paddingBottom | string, number | Sets the padding bottom inside a component. 18 | paddingLeft | string, number | Sets the padding left inside a component. 19 | paddingRight | string, number | Sets the padding right inside a component. 20 | paddingTop | string, number | Sets the padding top inside a component. 21 | verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ 22 | width | number | Sets the width of a component. 23 | 24 | ### Examples 25 | 26 | ```jsx 27 | import React, { Component } from 'react'; 28 | import { Label } from 'react-desktop/macOs'; 29 | 30 | export default class extends Component { 31 | render() { 32 | return ( 33 | 34 | ); 35 | } 36 | } 37 | ``` 38 | -------------------------------------------------------------------------------- /docs/mac-os/link.md: -------------------------------------------------------------------------------- 1 | # Link 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-------------:| :---------- 7 | color | string | Sets the color of the text. 8 | height | string, number | Sets the height of a component. 9 | hidden | bool | Sets the visibility of a component. 10 | margin | string, number | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ 11 | marginBottom | string, number | Sets the outer margin bottom of a component. 12 | marginLeft | string, number | Sets the outer margin left of a component. 13 | marginRight | string, number | Sets the outer margin right of a component. 14 | marginTop | string, number | Sets the outer margin top of a component. 15 | padding | string, number | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ 16 | paddingBottom | string, number | Sets the padding bottom inside a component. 17 | paddingLeft | string, number | Sets the padding left inside a component. 18 | paddingRight | string, number | Sets the padding right inside a component. 19 | paddingTop | string, number | Sets the padding top inside a component. 20 | size | string, number | Sets the font size of a component. 21 | textAlign | string | Sets the text alignment of the component's content.
__Property value__ _"left"_, _"center"_, _"right"_ 22 | width | string, number | Sets the width of a component. 23 | 24 | ### Examples 25 | 26 | ```jsx 27 | import React, { Component } from 'react'; 28 | import { View, Link } from 'react-desktop/macOs'; 29 | 30 | export default class extends Component { 31 | render() { 32 | return ( 33 | 34 | 35 | This is a link 36 | 37 | 38 | This is another link 39 | 40 | 41 | ); 42 | } 43 | } 44 | ``` 45 | -------------------------------------------------------------------------------- /docs/mac-os/pin.md: -------------------------------------------------------------------------------- 1 | # Pin 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-------------:| :---------- 7 | hidden | bool | Sets the visibility of a component. 8 | length | number | Sets the length of the pin. 9 | margin | string, number | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ 10 | marginBottom | string, number | Sets the outer margin bottom of a component. 11 | marginLeft | string, number | Sets the outer margin left of a component. 12 | marginRight | string, number | Sets the outer margin right of a component. 13 | marginTop | string, number | Sets the outer margin top of a component. 14 | onChange | function | Callback function when the input changes. 15 | reveal | bool | Reveals the characters in the pin. 16 | 17 | ### Examples 18 | 19 | ```jsx 20 | import React, { Component } from 'react'; 21 | import { Pin, View } from 'react-desktop/macOs'; 22 | 23 | export default class extends Component { 24 | render() { 25 | return ( 26 | 27 | console.log(value)} 29 | length={4} 30 | reveal 31 | /> 32 | 33 | ); 34 | } 35 | } 36 | ``` 37 | -------------------------------------------------------------------------------- /docs/mac-os/progress-circle.md: -------------------------------------------------------------------------------- 1 | # Progress Circle 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | color | string | Sets the color of the progress circle. 8 | hidden | bool | Sets the visibility of a component. 9 | size | number | Sets the size of the progress circle. 10 | 11 | ### Examples 12 | 13 | ```jsx 14 | import React, { Component } from 'react'; 15 | import { ProgressCircle } from 'react-desktop/macOs'; 16 | 17 | export default class extends Component { 18 | render() { 19 | return ( 20 | 21 | ); 22 | } 23 | } 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/mac-os/radio.md: -------------------------------------------------------------------------------- 1 | # Radio 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | defaultValue | string | Sets the default value of the input. 8 | defaultChecked | string | If true, the radio is checked by default. 9 | hidden | bool | Sets the visibility of a component. 10 | label | string | Adds a label to the checkbox. 11 | name | string | Name of the input. 12 | onChange | function | Callback function when the checkbox has changed. 13 | 14 | ### Examples 15 | 16 | ```jsx 17 | import React, { Component } from 'react'; 18 | import { View, Radio } from 'react-desktop/macOs'; 19 | 20 | export default class extends Component { 21 | render() { 22 | return ( 23 | 24 | console.log(e.target.value)} 28 | defaultValue="I got checked!" 29 | defaultChecked 30 | /> 31 | console.log(e.target.value)} 35 | defaultValue="I got checked!" 36 | /> 37 | 38 | ); 39 | } 40 | } 41 | ``` 42 | -------------------------------------------------------------------------------- /docs/mac-os/title-bar.md: -------------------------------------------------------------------------------- 1 | # TitleBar 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | controls | bool | Sets the visibility of the controls of the title bar. 8 | inset | bool | Sets the controls of the title bar state to be inset. 9 | isFullscreen | bool | Sets the title bar state to fullscreen. 10 | onCloseClick | function | Callback function of the close button. 11 | onMaximizeClick | function | Callback function of the maximize button 12 | onMinimizeClick | function | Callback function of the minimize button 13 | onResizeClick | function | Callback function of the resize button 14 | title | string | Sets the title of the title bar. 15 | transparent | bool | Make the title bar background transparent. 16 | disableClose | bool | Disable the close button. 17 | disableMinimize | bool | Disable the minimize button. 18 | disableResize | bool | Disable the resize button. 19 | disableFullscreen | bool | Disable fullscreen, will show the '+' maximize icon instead. 20 | 21 | ### Examples 22 | 23 | ```jsx 24 | import React, { Component } from 'react'; 25 | import { View, TitleBar } from 'react-desktop/macOs'; 26 | 27 | export default class extends Component { 28 | constructor() { 29 | super(); 30 | this.state = { isFullscreen: false }; 31 | } 32 | 33 | render() { 34 | return ( 35 | console.log('Close window')} 40 | onMinimizeClick={() => console.log('Minimize window')} 41 | onMaximizeClick={() => console.log('Mazimize window')} 42 | onResizeClick={() => this.setState({ isFullscreen: !this.state.isFullscreen })} 43 | /> 44 | ); 45 | } 46 | } 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/mac-os/toolbar.md: -------------------------------------------------------------------------------- 1 | # Toolbar 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | height | number | Sets the height of a component. 8 | horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ 9 | verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ 10 | width | number | Sets the width of a component. 11 | 12 | ### Examples 13 | 14 | ```jsx 15 | import React, { Component } from 'react'; 16 | import { TitleBar, Toolbar, Text } from 'react-desktop/macOs'; 17 | 18 | export default class extends Component { 19 | render() { 20 | return ( 21 | 22 | 23 | 24 | ); 25 | } 26 | } 27 | ``` 28 | -------------------------------------------------------------------------------- /docs/mac-os/view.md: -------------------------------------------------------------------------------- 1 | # View 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-------------:| :---------- 7 | background | string | Sets the background color of a component. 8 | height | number | Sets the height of a component. 9 | hidden | bool | Sets the visibility of a component. 10 | horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ 11 | layout | string | Sets the direction of the content.
__Property value__ _"horizontal"_, _"vertical"_ 12 | margin | string, number | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ 13 | marginBottom | string, number | Sets the outer margin bottom of a component. 14 | marginLeft | string, number | Sets the outer margin left of a component. 15 | marginRight | string, number | Sets the outer margin right of a component. 16 | marginTop | string, number | Sets the outer margin top of a component. 17 | padding | string, number | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ 18 | paddingBottom | string, number | Sets the padding bottom inside a component. 19 | paddingLeft | string, number | Sets the padding left inside a component. 20 | paddingRight | string, number | Sets the padding right inside a component. 21 | paddingTop | string, number | Sets the padding top inside a component. 22 | verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ 23 | width | number | Sets the width of a component. 24 | 25 | ### Examples 26 | 27 | ```jsx 28 | import React, { Component } from 'react'; 29 | import { View, Text } from 'react-desktop/macOs'; 30 | 31 | export default class extends Component { 32 | render() { 33 | return ( 34 | 42 | Hello World 43 | 44 | ); 45 | } 46 | } 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/mac-os/window.md: -------------------------------------------------------------------------------- 1 | # Window 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-------------:| :---------- 7 | background | string | Sets the background color of a component. 8 | chrome | bool | Sets the chrome of the window. 9 | height | number | Sets the height of a component. 10 | hidden | bool | Sets the visibility of a component. 11 | horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ 12 | padding | string, number | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ 13 | paddingBottom | string, number | Sets the padding bottom inside a component. 14 | paddingLeft | string, number | Sets the padding left inside a component. 15 | paddingRight | string, number | Sets the padding right inside a component. 16 | paddingTop | string, number | Sets the padding top inside a component. 17 | verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ 18 | width | number | Sets the width of a component. 19 | 20 | ### Examples 21 | 22 | ```jsx 23 | import React, { Component } from 'react'; 24 | import { Window, TitleBar, Text } from 'react-desktop/macOs'; 25 | 26 | export default class extends Component { 27 | render() { 28 | return ( 29 | 34 | 35 | Hello World 36 | 37 | ); 38 | } 39 | } 40 | ``` 41 | -------------------------------------------------------------------------------- /docs/resources/demo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | Demo 14 | 15 | -------------------------------------------------------------------------------- /docs/screenshots/osx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabrielbull/react-desktop/bba61374849dec896a9eea321cf4e3f02b3fd4c6/docs/screenshots/osx.png -------------------------------------------------------------------------------- /docs/screenshots/win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabrielbull/react-desktop/bba61374849dec896a9eea321cf4e3f02b3fd4c6/docs/screenshots/win.png -------------------------------------------------------------------------------- /docs/testing.md: -------------------------------------------------------------------------------- 1 | # Testing 2 | 3 | Documentation is coming soon. 4 | -------------------------------------------------------------------------------- /docs/windows/button.md: -------------------------------------------------------------------------------- 1 | # Button 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | color | string, bool | Sets whether the button is colored (bool) or sets the color of the button (string). 8 | hidden | bool | Sets the visibility of a component. 9 | onClick | function | Callback function when the button is pressed. 10 | push | bool | Display push animation when pressing the button. 11 | theme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _"light"_, _"dark"_ 12 | type | string | Sets the type of the button
__Property value__ _"button"_ _"submit"_. Default value _"button"_. 13 | 14 | ### Examples 15 | 16 | ```jsx 17 | import React, { Component } from 'react'; 18 | import { Button } from 'react-desktop/windows'; 19 | 20 | export default class extends Component { 21 | static defaultProps = { 22 | color: '#cc7f29' 23 | }; 24 | 25 | render() { 26 | return ( 27 | 30 | ); 31 | } 32 | } 33 | ``` 34 | -------------------------------------------------------------------------------- /docs/windows/checkbox.md: -------------------------------------------------------------------------------- 1 | # Checkbox 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | color | string | Sets the color of the checkbox. 8 | defaultValue | string | Sets the default value of the input. 9 | defaultChecked | string | If true, the checkbox is checked by default. 10 | hidden | bool | Sets the visibility of a component. 11 | label | string | Adds a label to the checkbox. 12 | onChange | function | Callback function when the checkbox has changed. 13 | theme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _"light"_, _"dark"_ 14 | 15 | ### Examples 16 | 17 | ```jsx 18 | import React, { Component } from 'react'; 19 | import { Checkbox } from 'react-desktop/windows'; 20 | 21 | export default class extends Component { 22 | static defaultProps = { 23 | color: '#cc7f29', 24 | theme: 'light' 25 | }; 26 | 27 | render() { 28 | return ( 29 | console.log(e.target.value)} 34 | defaultValue="I got checked!" 35 | defaultChecked 36 | /> 37 | ); 38 | } 39 | } 40 | ``` 41 | -------------------------------------------------------------------------------- /docs/windows/label.md: -------------------------------------------------------------------------------- 1 | # Label 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | background | string, bool | Sets whether the background is colored (bool) or sets the color of the background (string). 8 | color | string, bool | Sets whether the text is colored (bool) or sets the color of the text (string). 9 | height | number | Sets the height of a component. 10 | hidden | bool | Sets the visibility of a component. 11 | horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ 12 | margin | string | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ 13 | padding | string | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ 14 | theme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _"light"_, _"dark"_ 15 | verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ 16 | width | number | Sets the width of a component. 17 | 18 | ### Examples 19 | 20 | ```jsx 21 | import React, { Component } from 'react'; 22 | import { Label } from 'react-desktop/windows'; 23 | 24 | export default class extends Component { 25 | render() { 26 | return ( 27 | 28 | ); 29 | } 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /docs/windows/progress-circle.md: -------------------------------------------------------------------------------- 1 | # Progress Circle 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | color | string | Sets the color of the progress circle. 8 | hidden | bool | Sets the visibility of a component. 9 | size | number | Sets the size of the progress circle. 10 | 11 | ### Examples 12 | 13 | ```jsx 14 | import React, { Component } from 'react'; 15 | import { ProgressCircle } from 'react-desktop/windows'; 16 | 17 | export default class extends Component { 18 | static defaultProps = { 19 | color: '#cc7f29' 20 | }; 21 | 22 | render() { 23 | return ( 24 | 28 | ); 29 | } 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /docs/windows/radio.md: -------------------------------------------------------------------------------- 1 | # Radio 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | color | string | Sets the color of the radio. 8 | defaultValue | string | Sets the default value of the input. 9 | defaultChecked | string | If true, the radio is checked by default. 10 | hidden | bool | Sets the visibility of a component. 11 | label | string | Adds a label to the checkbox. 12 | name | string | Name of the input. 13 | onChange | function | Callback function when the checkbox has changed. 14 | theme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _"light"_, _"dark"_ 15 | 16 | ### Examples 17 | 18 | ```jsx 19 | import React, { Component } from 'react'; 20 | import { View, Radio } from 'react-desktop/windows'; 21 | 22 | export default class extends Component { 23 | static defaultProps = { 24 | color: '#cc7f29', 25 | theme: 'light' 26 | }; 27 | 28 | render() { 29 | return ( 30 | 31 | console.log(e.target.value)} 36 | defaultValue="I got checked!" 37 | defaultChecked 38 | /> 39 | console.log(e.target.value)} 44 | defaultValue="I got checked!" 45 | /> 46 | 47 | ); 48 | } 49 | } 50 | ``` 51 | -------------------------------------------------------------------------------- /docs/windows/text-input.md: -------------------------------------------------------------------------------- 1 | # TextInput 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | background | string, bool | Sets the background color of a component, if bool, the color will be used as the background color. 8 | color | string | Sets the main color of a component and it's children. 9 | defaultValue | string | Sets the default value of the input. 10 | hidden | bool | Sets the visibility of a component. 11 | label | string | Adds a label to the input. 12 | labelColor | string, bool | Sets whether the label text is colored (bool) or sets the color of the label text (string). 13 | labelStyle | object | Custom styles for the label. 14 | margin | string | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ 15 | onChange | function | Callback function when the input changes. 16 | placeholder | function | Adds a placeholder to the input. 17 | theme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _"light"_, _"dark"_ 18 | value | string | Sets the value of the input. 19 | width | number | Sets the width of a component. 20 | password | bool | Sets the input type to password. 21 | 22 | ### Examples 23 | 24 | ```jsx 25 | import React, { Component } from 'react'; 26 | import { TextInput } from 'react-desktop/windows'; 27 | 28 | export default class extends Component { 29 | static defaultProps = { 30 | color: '#cc7f29', 31 | theme: 'light' 32 | }; 33 | 34 | handleChange = e => console.log(e.target.value); 35 | 36 | render() { 37 | return ( 38 | 47 | ); 48 | } 49 | } 50 | ``` 51 | 52 | -------------------------------------------------------------------------------- /docs/windows/title-bar.md: -------------------------------------------------------------------------------- 1 | # TitleBar 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | background | string, bool | Sets the background color of a component, if bool, the color will be used as the background color. 8 | controls | bool | Sets the visibility of the controls of the title bar. 9 | color | string | Sets the main color of a component and it's children. 10 | isMaximized | bool | Sets the title bar state to maximized. 11 | onCloseClick | function | Callback function of the close button. 12 | onMaximizeClick | function | Callback function of the maximize button 13 | onMinimizeClick | function | Callback function of the minimize button 14 | onRestoreDownClick | function | Callback function of the restore down button 15 | title | string | Sets the title of the title bar. 16 | theme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _"light"_, _"dark"_ 17 | 18 | ### Examples 19 | 20 | ```jsx 21 | import React, { Component } from 'react'; 22 | import { TitleBar } from 'react-desktop/windows'; 23 | 24 | export default class extends Component { 25 | static defaultProps = { 26 | color: '#cc7f29', 27 | theme: 'light' 28 | }; 29 | 30 | constructor(props) { 31 | super(props); 32 | this.state = { isMaximized: true }; 33 | } 34 | 35 | close = () => console.log('close'); 36 | minimize = () => console.log('minimize'); 37 | toggleMaximize = () => this.setState({ isMaximized: !this.state.isMaximized }); 38 | 39 | render() { 40 | return ( 41 | 52 | ); 53 | } 54 | } 55 | ``` 56 | -------------------------------------------------------------------------------- /docs/windows/view.md: -------------------------------------------------------------------------------- 1 | # View 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | background | string, bool | Sets the background color of a component, if bool, the color will be used as the background color. 8 | color | string | Sets the main color of a component and it's children. 9 | height | number | Sets the height of a component. 10 | hidden | bool | Sets the visibility of a component. 11 | horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ 12 | layout | string | Sets the direction of the content.
__Property value__ _"horizontal"_, _"vertical"_ 13 | margin | string | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ 14 | padding | string | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ 15 | theme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _"light"_, _"dark"_ 16 | verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ 17 | width | number | Sets the width of a component. 18 | 19 | ### Examples 20 | 21 | ```jsx 22 | import React, { Component } from 'react'; 23 | import { View, Text } from 'react-desktop/windows'; 24 | 25 | export default class extends Component { 26 | static defaultProps = { 27 | color: '#cc7f29', 28 | theme: 'light' 29 | }; 30 | 31 | render() { 32 | return ( 33 | 42 | Hello World 43 | 44 | ); 45 | } 46 | } 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/windows/window.md: -------------------------------------------------------------------------------- 1 | # Window 2 | 3 | ### Properties 4 | 5 | Property | Type | Description 6 | :------------------ | :-----------:| :---------- 7 | background | string, bool | Sets the background color of a component, if bool, the color will be used as the background color. 8 | chrome | bool | Sets the chrome of the window. 9 | color | string | Sets the main color of a component and it's children. 10 | height | number | Sets the height of a component. 11 | hidden | bool | Sets the visibility of a component. 12 | horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ 13 | padding | string | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ 14 | theme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _"light"_, _"dark"_ 15 | verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ 16 | width | number | Sets the width of a component. 17 | 18 | ### Examples 19 | 20 | ```jsx 21 | import React, { Component } from 'react'; 22 | import { Window, TitleBar, Text } from 'react-desktop/windows'; 23 | 24 | export default class extends Component { 25 | static defaultProps = { 26 | color: '#cc7f29', 27 | theme: 'light' 28 | }; 29 | 30 | render() { 31 | return ( 32 | 39 | 40 | Hello World 41 | 42 | ); 43 | } 44 | } 45 | ``` 46 | -------------------------------------------------------------------------------- /examples/macOs/components/box.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Box, Text } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | render() { 6 | return ( 7 | 8 | Some text... 9 | 10 | ); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/macOs/components/button.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Button } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | render() { 6 | return ( 7 | 10 | ); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/macOs/components/checkbox.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Checkbox } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | render() { 6 | return ( 7 | console.log(e.target.value)} 10 | defaultValue="I got checked!" 11 | defaultChecked 12 | /> 13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/macOs/components/label.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Label } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | render() { 6 | return ( 7 | 8 | ); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/macOs/components/link.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, Link } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | render() { 6 | return ( 7 | 8 | 9 | This is a link 10 | 11 | 12 | This is another link 13 | 14 | 15 | ); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/macOs/components/pin.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Pin, View } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | render() { 6 | return ( 7 | 8 | console.log(value)} 10 | length={4} 11 | reveal 12 | /> 13 | 14 | ); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/macOs/components/progressCircle.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { ProgressCircle } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | render() { 6 | return ( 7 | 8 | ); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/macOs/components/radio.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, Radio } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | render() { 6 | return ( 7 | 8 | console.log(e.target.value)} 12 | defaultValue="I got checked!" 13 | defaultChecked 14 | /> 15 | console.log(e.target.value)} 19 | defaultValue="I got checked!" 20 | /> 21 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/macOs/components/searchField.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { TitleBar, Toolbar, SearchField } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | handleChange = e => console.log(e.target.value); 6 | 7 | render() { 8 | return ( 9 | 10 | 11 | 16 | 17 | 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/macOs/components/segmentedControl.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { SegmentedControl, SegmentedControlItem, Text } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | constructor() { 6 | super(); 7 | this.state = { selected: 1 } 8 | } 9 | 10 | render() { 11 | return ( 12 | 13 | {this.renderItems()} 14 | 15 | ); 16 | } 17 | 18 | renderItems() { 19 | return [ 20 | this.renderItem(1, 'Tab 1', Content 1), 21 | this.renderItem(2, 'Tab 2', Content 2), 22 | this.renderItem(3, 'Tab 3', Content 3) 23 | ]; 24 | } 25 | 26 | renderItem(key, title, content) { 27 | return ( 28 | this.setState({ selected: key })} 33 | > 34 | {content} 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/macOs/components/text.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Text } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | render() { 6 | return ( 7 | 8 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan 9 | bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus 10 | eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi, 11 | vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit 12 | amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et 13 | elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi 14 | tristique senectus et netus et malesuada fames ac turpis egestas. 15 | 16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/macOs/components/textArea.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { TextArea } from 'react-desktop/macOs'; 3 | 4 | export default class extends Component { 5 | handleChange = e => console.log(e.target.value); 6 | 7 | render() { 8 | return ( 9 |