├── .DS_Store ├── .editorconfig ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.txt ├── README.md ├── build ├── assets.js ├── package.json ├── public │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── crossdomain.xml │ ├── css │ │ ├── bootstrap-social.css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.css.map │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap-theme.min.css.map │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ ├── bootstrap.min.css.map │ │ ├── font-awesome.css │ │ ├── font-awesome.css.map │ │ ├── font-awesome.min.css │ │ └── sb-admin.css │ ├── favicon.ico │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ ├── fontawesome-webfont.woff2 │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2 │ ├── humans.txt │ ├── logo.png │ ├── robots.txt │ ├── tile-wide.png │ └── tile.png ├── server.js └── server.js.map ├── docs ├── README.md ├── data-fetching.md ├── getting-started.md ├── how-to-configure-text-editors.md ├── react-style-guide.md ├── recipes │ ├── how-to-implement-routing.md │ ├── how-to-integrate-disqus.md │ ├── how-to-integrate-react-intl.md │ ├── how-to-integrate-redux.md │ └── using-npm-and-webpack-as-a-build-tool.md └── testing-your-application.md ├── package.json ├── src ├── .DS_Store ├── client.js ├── components │ ├── .DS_Store │ ├── App │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ └── package.json │ ├── Donut │ │ └── index.js │ ├── Header │ │ ├── Header.css │ │ ├── Header.js │ │ ├── logo-small.png │ │ ├── logo-small@2x.png │ │ ├── logo.png │ │ └── package.json │ ├── Html.js │ ├── Link │ │ ├── Link.js │ │ └── package.json │ ├── Sidebar │ │ └── index.js │ ├── Widget │ │ └── index.js │ ├── common │ │ └── styles │ │ │ └── sb-admin.css │ ├── variables.css │ └── withViewport.js ├── config.js ├── content │ ├── about.md │ ├── index.md │ └── privacy.md ├── core │ ├── DOMUtils.js │ ├── fetch │ │ ├── fetch.client.js │ │ ├── fetch.server.js │ │ └── package.json │ ├── history.js │ └── passport.js ├── data │ ├── models │ │ ├── .eslintrc │ │ ├── User.js │ │ ├── UserClaim.js │ │ ├── UserLogin.js │ │ ├── UserProfile.js │ │ └── index.js │ ├── queries │ │ ├── content.js │ │ ├── me.js │ │ └── news.js │ ├── schema.js │ ├── sequelize.js │ └── types │ │ ├── ContentType.js │ │ ├── NewsItemType.js │ │ └── UserType.js ├── public │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── crossdomain.xml │ ├── favicon.ico │ ├── humans.txt │ ├── logo.png │ ├── robots.txt │ ├── tile-wide.png │ └── tile.png ├── routes │ ├── dashboardPages │ │ └── blank │ │ │ ├── blank.js │ │ │ └── index.js │ ├── error │ │ ├── ErrorPage.css │ │ ├── ErrorPage.js │ │ └── index.js │ ├── home │ │ ├── Home.css │ │ ├── Home.js │ │ └── index.js │ ├── index.js │ └── login │ │ ├── Login.css │ │ ├── Login.js │ │ └── index.js ├── server.js └── vendor │ └── recharts │ ├── CHANGELOG.md │ ├── CONTRIBUTING.md │ ├── LICENSE │ ├── README.md │ ├── demo │ ├── .babelrc │ ├── component │ │ ├── AreaChart.js │ │ ├── BarChart.js │ │ ├── BrushDemo.js │ │ ├── CartesianAxis.js │ │ ├── CartesianGrid.js │ │ ├── ComposedChart.js │ │ ├── Curve.js │ │ ├── CustomLineDot.js │ │ ├── DemoRadarItem.js │ │ ├── DemoSankeyLink.js │ │ ├── DemoSankeyNode.js │ │ ├── DemoTreemapItem.js │ │ ├── Legend.js │ │ ├── LineChart.js │ │ ├── Pie.js │ │ ├── PieChart.js │ │ ├── PolarAngleAxis.js │ │ ├── PolarGrid.js │ │ ├── PolarRadiusAxis.js │ │ ├── RadarChart.js │ │ ├── RadialBarChart.js │ │ ├── Rectangle.js │ │ ├── Sankey.js │ │ ├── ScatterChart.js │ │ ├── Sector.js │ │ ├── TextDemo.js │ │ ├── Treemap.js │ │ ├── index.js │ │ └── utils.js │ ├── container │ │ └── App.js │ ├── index.html │ ├── index.js │ └── webpack.config.js │ ├── es6 │ ├── cartesian │ │ ├── Area.js │ │ ├── Bar.js │ │ ├── Brush.js │ │ ├── CartesianAxis.js │ │ ├── CartesianGrid.js │ │ ├── Line.js │ │ ├── ReferenceArea.js │ │ ├── ReferenceDot.js │ │ ├── ReferenceLine.js │ │ ├── Scatter.js │ │ ├── XAxis.js │ │ ├── YAxis.js │ │ └── ZAxis.js │ ├── chart │ │ ├── AreaChart.js │ │ ├── BarChart.js │ │ ├── ComposedChart.js │ │ ├── LineChart.js │ │ ├── PieChart.js │ │ ├── RadarChart.js │ │ ├── RadialBarChart.js │ │ ├── Sankey.js │ │ ├── ScatterChart.js │ │ ├── Treemap.js │ │ └── generateCategoricalChart.js │ ├── component │ │ ├── Background.js │ │ ├── Cell.js │ │ ├── DefaultLegendContent.js │ │ ├── DefaultTooltipContent.js │ │ ├── Legend.js │ │ ├── ResponsiveContainer.js │ │ ├── Text.js │ │ └── Tooltip.js │ ├── container │ │ ├── Layer.js │ │ └── Surface.js │ ├── index.js │ ├── polar │ │ ├── Pie.js │ │ ├── PolarAngleAxis.js │ │ ├── PolarGrid.js │ │ ├── PolarRadiusAxis.js │ │ ├── Radar.js │ │ └── RadialBar.js │ ├── polyfill.js │ ├── shape │ │ ├── Cross.js │ │ ├── Curve.js │ │ ├── Dot.js │ │ ├── Polygon.js │ │ ├── Rectangle.js │ │ ├── Sector.js │ │ └── Symbols.js │ └── util │ │ ├── AnimationDecorator.js │ │ ├── CartesianUtils.js │ │ ├── CssPrefixUtils.js │ │ ├── DOMUtils.js │ │ ├── DataUtils.js │ │ ├── Events.js │ │ ├── LogUtils.js │ │ ├── PolarUtils.js │ │ ├── PureRender.js │ │ └── ReactUtils.js │ ├── lib │ ├── cartesian │ │ ├── Area.js │ │ ├── Bar.js │ │ ├── Brush.js │ │ ├── CartesianAxis.js │ │ ├── CartesianGrid.js │ │ ├── Line.js │ │ ├── ReferenceArea.js │ │ ├── ReferenceDot.js │ │ ├── ReferenceLine.js │ │ ├── Scatter.js │ │ ├── XAxis.js │ │ ├── YAxis.js │ │ └── ZAxis.js │ ├── chart │ │ ├── AreaChart.js │ │ ├── BarChart.js │ │ ├── ComposedChart.js │ │ ├── LineChart.js │ │ ├── PieChart.js │ │ ├── RadarChart.js │ │ ├── RadialBarChart.js │ │ ├── Sankey.js │ │ ├── ScatterChart.js │ │ ├── Treemap.js │ │ └── generateCategoricalChart.js │ ├── component │ │ ├── Background.js │ │ ├── Cell.js │ │ ├── DefaultLegendContent.js │ │ ├── DefaultTooltipContent.js │ │ ├── Legend.js │ │ ├── ResponsiveContainer.js │ │ ├── Text.js │ │ └── Tooltip.js │ ├── container │ │ ├── Layer.js │ │ └── Surface.js │ ├── index.js │ ├── polar │ │ ├── Pie.js │ │ ├── PolarAngleAxis.js │ │ ├── PolarGrid.js │ │ ├── PolarRadiusAxis.js │ │ ├── Radar.js │ │ └── RadialBar.js │ ├── polyfill.js │ ├── shape │ │ ├── Cross.js │ │ ├── Curve.js │ │ ├── Dot.js │ │ ├── Polygon.js │ │ ├── Rectangle.js │ │ ├── Sector.js │ │ └── Symbols.js │ └── util │ │ ├── AnimationDecorator.js │ │ ├── CartesianUtils.js │ │ ├── CssPrefixUtils.js │ │ ├── DOMUtils.js │ │ ├── DataUtils.js │ │ ├── Events.js │ │ ├── LogUtils.js │ │ ├── PolarUtils.js │ │ ├── PureRender.js │ │ └── ReactUtils.js │ ├── package.json │ ├── src │ ├── cartesian │ │ ├── Area.js │ │ ├── Bar.js │ │ ├── Brush.js │ │ ├── CartesianAxis.js │ │ ├── CartesianGrid.js │ │ ├── Line.js │ │ ├── ReferenceArea.js │ │ ├── ReferenceDot.js │ │ ├── ReferenceLine.js │ │ ├── Scatter.js │ │ ├── XAxis.js │ │ ├── YAxis.js │ │ └── ZAxis.js │ ├── chart │ │ ├── AreaChart.js │ │ ├── BarChart.js │ │ ├── ComposedChart.js │ │ ├── LineChart.js │ │ ├── PieChart.js │ │ ├── RadarChart.js │ │ ├── RadialBarChart.js │ │ ├── Sankey.js │ │ ├── ScatterChart.js │ │ ├── Treemap.js │ │ └── generateCategoricalChart.js │ ├── component │ │ ├── Background.js │ │ ├── Cell.js │ │ ├── DefaultLegendContent.js │ │ ├── DefaultTooltipContent.js │ │ ├── Legend.js │ │ ├── ResponsiveContainer.js │ │ ├── Text.js │ │ └── Tooltip.js │ ├── container │ │ ├── Layer.js │ │ └── Surface.js │ ├── index.js │ ├── polar │ │ ├── Pie.js │ │ ├── PolarAngleAxis.js │ │ ├── PolarGrid.js │ │ ├── PolarRadiusAxis.js │ │ ├── Radar.js │ │ └── RadialBar.js │ ├── polyfill.js │ ├── shape │ │ ├── Cross.js │ │ ├── Curve.js │ │ ├── Dot.js │ │ ├── Polygon.js │ │ ├── Rectangle.js │ │ ├── Sector.js │ │ └── Symbols.js │ └── util │ │ ├── AnimationDecorator.js │ │ ├── CartesianUtils.js │ │ ├── CssPrefixUtils.js │ │ ├── DOMUtils.js │ │ ├── DataUtils.js │ │ ├── Events.js │ │ ├── LogUtils.js │ │ ├── PolarUtils.js │ │ ├── PureRender.js │ │ └── ReactUtils.js │ └── umd │ ├── Recharts.js │ └── Recharts.min.js ├── test ├── .eslintrc └── setup.js └── tools ├── .eslintrc ├── README.md ├── build.js ├── bundle.js ├── clean.js ├── copy.js ├── deploy.js ├── lib ├── fetch.js └── fs.js ├── render.js ├── run.js ├── runServer.js ├── start.js └── webpack.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/.DS_Store -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/build 3 | .*/config 4 | .*/node_modules 5 | .*/gulpfile.js 6 | 7 | [include] 8 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Automatically normalize line endings for all text-based files 2 | # http://git-scm.com/docs/gitattributes#_end_of_line_conversion 3 | * text=auto 4 | 5 | # For the following file types, normalize line endings to LF on 6 | # checkin and prevent conversion to CRLF when they are checked out 7 | # (this is required in order to prevent newline related issues like, 8 | # for example, after the build script is run) 9 | .* text eol=lf 10 | *.css text eol=lf 11 | *.html text eol=lf 12 | *.jade text eol=lf 13 | *.js text eol=lf 14 | *.json text eol=lf 15 | *.less text eol=lf 16 | *.scss text eol=lf 17 | *.md text eol=lf 18 | *.sh text eol=lf 19 | *.txt text eol=lf 20 | *.xml text eol=lf 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Include your project-specific ignores in this file 2 | # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files 3 | 4 | database.sqlite 5 | node_modules 6 | ncp-debug.log 7 | npm-debug.log 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '6' 4 | - '5' 5 | env: 6 | - CXX=g++-4.8 7 | addons: 8 | apt: 9 | sources: 10 | - ubuntu-toolchain-r-test 11 | packages: 12 | - g++-4.8 13 | script: 14 | - npm run lint 15 | - npm run test 16 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2017 GeekyAnts 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## SB Admin v2.0 rewritten in React.js 2 | 3 | [![Join the chat at https://gitter.im/start-react/sb-admin-react](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/start-react/sb-admin-react?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | This project is a port of the famous Free Admin Bootstrap Theme [SB Admin v2.0](http://startbootstrap.com/template-overviews/sb-admin-2/) to React.js Theme based on [React Starter Kit](https://github.com/kriasoft/react-starter-kit) using ES6 & Webpack. 6 | 7 | Find out more [Free React.js and React Native Themes at StartReact.com](http://www.startreact.com/). 8 | 9 | ## [Demo](http://sb-admin-react-seed.geekydev.com:3010/) 10 | 11 | ## Installation 12 | ####1. Clone this project or Download that ZIP file 13 | 14 | ```sh 15 | $ git clone https://github.com/start-react/sb-admin-seed-react.git 16 | ``` 17 | 18 | ####2. Make sure you have [npm](https://www.npmjs.org/) installed globally 19 | 20 | More details here 21 | https://nodejs.org/en/download/ 22 | 23 | ####3. On the command prompt run the following commands 24 | 25 | ```sh 26 | $ cd `project-directory` 27 | ``` 28 | ```sh 29 | $ npm install 30 | ``` 31 | ```sh 32 | $ npm start 33 | ``` 34 | 35 | ####4. To build 36 | ```sh 37 | $ npm run build 38 | ``` 39 | 40 | ####5. To clean up old build products 41 | ```sh 42 | $ npm run clean 43 | ``` 44 | 45 | ## Roadmap 46 | 47 | - Add sample AJAX calls (using Flux / Reflux) and make the components more modular 48 | - Lazy loading of Pages 49 | - MobX integration 50 | 51 | 52 | ### Automation tools used 53 | - [Webpack](https://webpack.github.io/) 54 | -------------------------------------------------------------------------------- /build/assets.js: -------------------------------------------------------------------------------- 1 | module.exports = {"main":{"js":"/assets/main.1f7d099d2fde825ba6ec.js"}}; -------------------------------------------------------------------------------- /build/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "engines": { 4 | "node": ">=5.0 <7", 5 | "npm": ">=3.3 <4" 6 | }, 7 | "dependencies": { 8 | "babel-polyfill": "6.13.0", 9 | "babel-runtime": "6.11.6", 10 | "bluebird": "3.4.5", 11 | "body-parser": "1.15.2", 12 | "bootstrap": "^3.3.7", 13 | "bootstrap-social": "^5.0.0", 14 | "chart.js": "^1.1.1", 15 | "classnames": "2.2.5", 16 | "cookie-parser": "1.4.3", 17 | "core-js": "2.4.1", 18 | "eventemitter3": "1.2.0", 19 | "express": "4.14.0", 20 | "express-graphql": "0.5.4", 21 | "express-jwt": "3.4.0", 22 | "fastclick": "1.0.6", 23 | "fbjs": "0.8.4", 24 | "font-awesome": "^4.6.3", 25 | "front-matter": "2.1.0", 26 | "graphiql": "0.7.8", 27 | "graphql": "0.7.0", 28 | "history": "3.0.0", 29 | "isomorphic-style-loader": "1.0.0", 30 | "jquery": "^3.1.1", 31 | "jsonwebtoken": "7.1.9", 32 | "markdown-it": "7.0.1", 33 | "node-fetch": "1.6.0", 34 | "normalize.css": "4.2.0", 35 | "passport": "0.3.2", 36 | "passport-facebook": "2.1.1", 37 | "pretty-error": "2.0.0", 38 | "react": "15.3.1", 39 | "react-bootstrap": "^0.30.3", 40 | "react-chartjs": "^0.8.0", 41 | "react-dom": "15.3.1", 42 | "recharts": "^0.15.1", 43 | "sequelize": "3.24.1", 44 | "source-map-support": "0.4.2", 45 | "sqlite3": "3.1.4", 46 | "universal-router": "1.2.2", 47 | "whatwg-fetch": "1.0.0" 48 | }, 49 | "scripts": { 50 | "start": "node server.js" 51 | } 52 | } -------------------------------------------------------------------------------- /build/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/apple-touch-icon.png -------------------------------------------------------------------------------- /build/public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /build/public/crossdomain.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /build/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/favicon.ico -------------------------------------------------------------------------------- /build/public/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /build/public/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /build/public/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /build/public/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /build/public/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /build/public/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /build/public/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /build/public/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /build/public/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /build/public/humans.txt: -------------------------------------------------------------------------------- 1 | # humanstxt.org/ 2 | # The humans responsible & technology colophon 3 | 4 | # TEAM 5 | 6 | -- -- 7 | 8 | # THANKS 9 | 10 | 11 | 12 | # TECHNOLOGY COLOPHON 13 | 14 | CSS3, HTML5, JavaScript 15 | React, Flux, SuperAgent 16 | -------------------------------------------------------------------------------- /build/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/logo.png -------------------------------------------------------------------------------- /build/public/robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | 3 | # Allow crawling of all content 4 | User-agent: * 5 | Disallow: 6 | -------------------------------------------------------------------------------- /build/public/tile-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/tile-wide.png -------------------------------------------------------------------------------- /build/public/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/build/public/tile.png -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ## Documentation 2 | 3 | ### General 4 | 5 | * [Getting Started](./getting-started.md) 6 | * [React Style Guide](./react-style-guide.md) 7 | * [How to configure text editors and IDEs](./how-to-configure-text-editors.md) 8 | * [Data fetching with WHATWG Fetch](./data-fetching.md) 9 | * [Testing your application](./testing-your-application.md) 10 | 11 | ### Questions 12 | 13 | * [Which module bundler should I use?](https://github.com/kriasoft/react-starter-kit/issues/3) 14 | * [Which Flux implementation should I use?](https://github.com/kriasoft/react-starter-kit/issues/22) 15 | 16 | ### Recipes 17 | 18 | * [How to Implement Routing and Navigation](./recipes/how-to-implement-routing.md) 19 | * [How to Integrate Redux](./recipes/how-to-integrate-redux.md) 20 | * [How to Integrate React Intl](./recipes/how-to-integrate-react-intl.md) 21 | * [How to Integrate Disqus](./recipes/how-to-integrate-disqus.md) 22 | -------------------------------------------------------------------------------- /docs/data-fetching.md: -------------------------------------------------------------------------------- 1 | ## Data Fetching with WHATWG Fetch 2 | 3 | There is isomorphic `core/fetch` module that can be used the same way in both 4 | client-side and server-side code as follows: 5 | 6 | ```jsx 7 | import fetch from '../core/fetch'; 8 | 9 | export const path = '/products'; 10 | export const action = async () => { 11 | const response = await fetch('/graphql?query={products{id,name}}'); 12 | const data = await response.json(); 13 | return ; 14 | }; 15 | ``` 16 | 17 | When this code executes on the client, the Ajax request will be sent via 18 | GitHub's [fetch](https://github.com/github/fetch) library (`whatwg-fetch`), 19 | that itself uses XHMLHttpRequest behind the scene unless `fetch` is supported 20 | natively by the user's browser. 21 | 22 | Whenever the same code executes on the server, it uses 23 | [node-fetch](https://github.com/bitinn/node-fetch) module behind the scene that 24 | itself sends an HTTP request via Node.js `http` module. It also converts 25 | relative URLs to absolute (see `./core/fetch/fetch.server.js`). 26 | 27 | Both `whatwg-fetch` and `node-fetch` modules have almost identical API. If 28 | you're new to this API, the following article may give you a good introduction: 29 | 30 | https://jakearchibald.com/2015/thats-so-fetch/ 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/recipes/how-to-integrate-disqus.md: -------------------------------------------------------------------------------- 1 | ## How to Integrate [Disqus](https://disqus.com) 2 | 3 | https://disqus.com/admin/create/ 4 | 5 | #### `DisqusThread.js` 6 | 7 | ```js 8 | import React, { PropTypes } from 'react'; 9 | 10 | const SHORTNAME = 'example'; 11 | const WEBSITE_URL = 'http://www.example.com'; 12 | 13 | function renderDisqus() { 14 | if (window.DISQUS === undefined) { 15 | var script = document.createElement('script'); 16 | script.async = true; 17 | script.src = 'https://' + SHORTNAME + '.disqus.com/embed.js'; 18 | document.getElementsByTagName('head')[0].appendChild(script); 19 | } else { 20 | window.DISQUS.reset({reload: true}); 21 | } 22 | } 23 | 24 | class DisqusThread { 25 | 26 | static propTypes = { 27 | id: PropTypes.string.isRequired, 28 | title: PropTypes.string.isRequired, 29 | path: PropTypes.string.isRequired 30 | }; 31 | 32 | shouldComponentUpdate(nextProps) { 33 | return this.props.id !== nextProps.id || 34 | this.props.title !== nextProps.title || 35 | this.props.path !== nextProps.path; 36 | } 37 | 38 | componentDidMount() { 39 | renderDisqus(); 40 | } 41 | 42 | componentDidUpdate() { 43 | renderDisqus(); 44 | } 45 | 46 | render() { 47 | let { id, title, path, ...other} = this.props; 48 | 49 | if (process.env.BROWSER) { 50 | /* eslint-disable camelcase */ 51 | window.disqus_shortname = SHORTNAME; 52 | window.disqus_identifier = id; 53 | window.disqus_title = title; 54 | window.disqus_url = WEBSITE_URL + path; 55 | /* eslint-enable camelcase */ 56 | } 57 | 58 | return
; 59 | } 60 | 61 | } 62 | 63 | export default DisqusThread; 64 | ``` 65 | 66 | #### `MyComponent.js` 67 | 68 | ```js 69 | import React from 'react'; 70 | import DisqusThread from './DisqusThread.js'; 71 | 72 | class MyComponent { 73 | 74 | render() { 75 | return ( 76 |
77 | 80 |
81 | ); 82 | } 83 | 84 | } 85 | 86 | export default MyComponent; 87 | ``` 88 | -------------------------------------------------------------------------------- /docs/recipes/how-to-integrate-redux.md: -------------------------------------------------------------------------------- 1 | ## How to Integrate [Redux](http://redux.js.org/index.html) 2 | 3 | Merge `feature/redux` branch with Git. If you are interested in `feature/react-intl`, merge that 4 | branch instead as it also includes Redux. 5 | 6 | **If you don't know Redux well, you should [read about it first](http://redux.js.org/docs/basics/index.html).** 7 | 8 | 9 | ### Creating Actions 10 | 11 | 1. Go to `src/constants/index.js` and define action name there. 12 | 13 | 2. Go to `src/actions/` and create file with appropriate name. You can copy 14 | `src/actions/runtime.js` as a template. 15 | 16 | 3. If you need async actions, use [`redux-thunk`](https://github.com/gaearon/redux-thunk#readme). 17 | For inspiration on how to create async actions you can look at 18 | [`setLocale`](https://github.com/kriasoft/react-starter-kit/blob/feature/react-intl/src/actions/intl.js) 19 | action from `feature/react-intl`. 20 | See [Async Flow](http://redux.js.org/docs/advanced/AsyncFlow.html) for more information on this 21 | topic. 22 | 23 | 24 | ### Creating Reducer (aka Store) 25 | 26 | 1. Go to [`src/reducers/`](https://github.com/kriasoft/react-starter-kit/tree/feature/redux/src/reducers) and create new file there. 27 | 28 | You can copy [`src/reducers/runtime.js`](https://github.com/kriasoft/react-starter-kit/tree/feature/redux/src/reducers/runtime.js) as a template. 29 | 30 | - Do not forget to always return `state`. 31 | - Never mutate provided `state`. 32 | If you mutate state, rendering of connected component will not be triggered because of `===` equality. 33 | Always return new value if you perform state update. 34 | You can use this construct: `{ ...state, updatedKey: action.payload.value, }` 35 | - Keep in mind that store state *must* be repeatable by replaying actions on it. 36 | For example, when you store timestamp, pass it into *action payload*. 37 | If you call REST API, do it in action. *Never do this in reducer!* 38 | 39 | 2. Edit [`src/reducers/index.js`](https://github.com/kriasoft/react-starter-kit/tree/feature/redux/src/reducers/index.js), import your reducer and add it to root reducer created by 40 | [`combineReducers`](http://redux.js.org/docs/api/combineReducers.html) 41 | 42 | 43 | ### Connecting Components 44 | 45 | You can use [`connect()`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) High-Order Component from [`react-redux`](https://github.com/reactjs/react-redux#readme) package. 46 | 47 | See [Usage With React](http://redux.js.org/docs/basics/UsageWithReact.html) on redux.js.org. 48 | 49 | For an example you can look at 50 | [``](https://github.com/kriasoft/react-starter-kit/blob/feature/react-intl/src/components/LanguageSwitcher/LanguageSwitcher.js) 51 | component from `feature/react-intl` branch. It demonstrates both subscribing to store and dispatching actions. 52 | 53 | 54 | ### Dispatching Actions On Server 55 | 56 | See source of `src/server.js` 57 | -------------------------------------------------------------------------------- /docs/recipes/using-npm-and-webpack-as-a-build-tool.md: -------------------------------------------------------------------------------- 1 | ## Using NPM and Webpack as a Build Tool 2 | 3 | The [npm](https://docs.npmjs.com/) command line utility that comes with Node.js 4 | allows you to run arbitrary scripts and [Node.js modules](https://www.npmjs.com/) 5 | without them being globally installed. This is very convenient, because other 6 | developers in your team don't need to worry about having some set of tools 7 | installed globally before they can execute build automation scripts in your 8 | project. 9 | 10 | For example, if you need to lint your JavaScript code with [ESLint](http://eslint.org/) 11 | and [JSCS](http://jscs.info/), you just install them as project's dependencies: 12 | 13 | ```shell 14 | $ npm install eslint jscs --save-dev 15 | ``` 16 | 17 | Add a new command line to `package.json/scripts`: 18 | 19 | ```json 20 | { 21 | "devDependencies": { 22 | "eslint": "^1.10.0", 23 | "jscs": "^2.7.0" 24 | }, 25 | "scripts": { 26 | "lint": "eslint src && jscs src" 27 | } 28 | } 29 | ``` 30 | 31 | And execute it by running: 32 | 33 | ```shell 34 | $ npm run lint # npm run 35 | ``` 36 | 37 | Which will be the same as running `./node_modules/bin/eslint src && ./node_modules/bin/jscs src`, 38 | except that the former has a shorter syntax and works the the same way on all 39 | platforms (Mac OS X, Windows, Linux). 40 | 41 | The same way you can run [Webpack](http://webpack.github.io/) module bundler 42 | to compile the source code of your app into a distributable format. Since 43 | Webpack has numerous [configuration options](http://webpack.github.io/docs/configuration), 44 | it's a good idea to have all of them in a separate configuration file, as 45 | opposed to feeding them to Webpack's CLI as command line arguments. As a rule 46 | of thumb, you want to keep the "scripts" section in your `package.json` file 47 | short enough and easy to read. 48 | 49 | For example, you may have `src/client.js` and `src/server.js` files that used 50 | as entry points to the client-side and server-side code of your app. The 51 | following Webpack configuration file (`webpack.config.js`) can be used 52 | to bundle them into client-side and server-side application bundles - 53 | `build/public/client.js` and `build/server.js` respectively: 54 | 55 | ```js 56 | module.exports = [{ 57 | context: __dirname + '/src' 58 | entry: './client.js', 59 | output: { 60 | path: __dirname + '/build/public', 61 | filename: 'client.js' 62 | } 63 | }, { 64 | context: __dirname + '/src', 65 | entry: './server.js', 66 | output: { 67 | path: __dirname + '/build', 68 | filename: 'server.js', 69 | libraryTarget: 'commonjs2' 70 | }, 71 | target: 'node', 72 | externals: /node_modules/, 73 | }]; 74 | ``` 75 | 76 | The `npm` script for it may look like this: 77 | 78 | ```json 79 | { 80 | "devDependencies": { 81 | "webpack": "^1.12.0" 82 | }, 83 | "scripts": { 84 | "build": "webpack --config webpack.config.js" 85 | } 86 | } 87 | ``` 88 | 89 | You can run it as follows: 90 | 91 | ```shell 92 | $ npm run build 93 | ``` 94 | -------------------------------------------------------------------------------- /docs/testing-your-application.md: -------------------------------------------------------------------------------- 1 | ## Testing your application 2 | 3 | ### Used libraries 4 | 5 | RSK comes with the following libraries for testing purposes: 6 | 7 | - [Mocha](https://mochajs.org/) - Node.js and browser test runner 8 | - [Chai](http://chaijs.com/) - Assertion library 9 | - [Enzyme](https://github.com/airbnb/enzyme) - Testing utilities for React 10 | 11 | You may also want to take a look at the following related packages: 12 | 13 | - [jsdom](https://github.com/tmpvar/jsdom) 14 | - [react-addons-test-utils](https://www.npmjs.com/package/react-addons-test-utils) 15 | 16 | ### Running tests 17 | 18 | To test your application simply run the 19 | [`npm test`](https://github.com/kriasoft/react-starter-kit/blob/b22b1810461cec9c53eedffe632a3ce70a6b29a3/package.json#L154) 20 | command which will: 21 | - recursively find all files ending with `.test.js` in your `src/` directory 22 | - mocha execute found files 23 | 24 | ```bash 25 | npm test 26 | ``` 27 | 28 | ### Conventions 29 | 30 | - test filenames MUST end with `test.js` or `npm test` will not be able to detect them 31 | - test filenames SHOULD be named after the related component (e.g. create `Login.test.js` for 32 | `Login.js` component) 33 | 34 | ### Basic example 35 | 36 | To help you on your way RSK comes with the following 37 | [basic test case](https://github.com/kriasoft/react-starter-kit/blob/master/src/components/App/App.test.js) 38 | you can use as a starting point: 39 | 40 | ```js 41 | import React from 'react'; 42 | import { expect } from 'chai'; 43 | import { shallow } from 'enzyme'; 44 | import App from './App'; 45 | 46 | describe('App', () => { 47 | 48 | it('renders children correctly', () => { 49 | const wrapper = shallow( 50 | {} }}> 51 |
52 | 53 | ); 54 | 55 | expect(wrapper.contains(
)).to.be.true; 56 | }); 57 | 58 | }); 59 | ``` 60 | 61 | ### React-intl example 62 | 63 | React-intl users MUST render/wrap components inside an IntlProvider like the example below: 64 | 65 | The example below example is a drop-in test for the RSK `Header` component: 66 | 67 | ```js 68 | import React from 'react'; 69 | import Header from './Header'; 70 | import IntlProvider from 'react-intl'; 71 | import Navigation from '../../components/Navigation'; 72 | 73 | describe('A test suite for
', () => { 74 | 75 | it('should contain a component', () => { 76 | it('rendering', () => { 77 | const wrapper = renderIntoDocument(
); 78 | expect(wrapper.find(Navigation)).to.have.length(1); 79 | }); 80 | }); 81 | 82 | }); 83 | ``` 84 | 85 | Please note that NOT using IntlProvider will produce the following error: 86 | 87 | > Invariant Violation: [React Intl] Could not find required `intl` object. 88 | > needs to exist in the component ancestry. 89 | 90 | ### Linting 91 | 92 | Running RSK eslint will also scan your test files: 93 | 94 | ```bash 95 | npm run eslint 96 | ``` 97 | 98 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/src/.DS_Store -------------------------------------------------------------------------------- /src/components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/src/components/.DS_Store -------------------------------------------------------------------------------- /src/components/App/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * React Starter Kit (https://www.reactstarterkit.com/) 3 | * 4 | * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved. 5 | * 6 | * This source code is licensed under the MIT license found in the 7 | * LICENSE.txt file in the root directory of this source tree. 8 | */ 9 | 10 | import React, { Component, PropTypes } from 'react'; 11 | import emptyFunction from 'fbjs/lib/emptyFunction'; 12 | import s from './App.css'; 13 | import Header from '../Header'; 14 | // import Feedback from '../Feedback'; 15 | // import Footer from '../Footer'; 16 | 17 | class App extends Component { 18 | 19 | static propTypes = { 20 | context: PropTypes.shape({ 21 | insertCss: PropTypes.func, 22 | setTitle: PropTypes.func, 23 | setMeta: PropTypes.func, 24 | }), 25 | children: PropTypes.element.isRequired, 26 | error: PropTypes.object, 27 | }; 28 | 29 | static childContextTypes = { 30 | insertCss: PropTypes.func.isRequired, 31 | setTitle: PropTypes.func.isRequired, 32 | setMeta: PropTypes.func.isRequired, 33 | }; 34 | 35 | getChildContext() { 36 | const context = this.props.context; 37 | return { 38 | insertCss: context.insertCss || emptyFunction, 39 | setTitle: context.setTitle || emptyFunction, 40 | setMeta: context.setMeta || emptyFunction, 41 | }; 42 | } 43 | 44 | componentWillMount() { 45 | const { insertCss } = this.props.context; 46 | this.removeCss = insertCss(s); 47 | } 48 | 49 | componentWillUnmount() { 50 | 51 | this.removeCss(); 52 | } 53 | 54 | render() { 55 | // console.log('\n********\n', this.props, '\n********12334\n'); 56 | return this.props.children; 57 | } 58 | 59 | } 60 | 61 | export default App; 62 | -------------------------------------------------------------------------------- /src/components/App/App.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * React Starter Kit (https://www.reactstarterkit.com/) 3 | * 4 | * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved. 5 | * 6 | * This source code is licensed under the MIT license found in the 7 | * LICENSE.txt file in the root directory of this source tree. 8 | */ 9 | 10 | /* eslint-env mocha */ 11 | /* eslint-disable padded-blocks, no-unused-expressions */ 12 | 13 | import React from 'react'; 14 | import { expect } from 'chai'; 15 | import { shallow } from 'enzyme'; 16 | import App from './App'; 17 | 18 | describe('App', () => { 19 | 20 | it('renders children correctly', () => { 21 | const wrapper = shallow( 22 | {} }}> 23 |
24 | 25 | ); 26 | 27 | expect(wrapper.contains(
)).to.be.true; 28 | }); 29 | 30 | }); 31 | -------------------------------------------------------------------------------- /src/components/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./App.js" 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Header/logo-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/src/components/Header/logo-small.png -------------------------------------------------------------------------------- /src/components/Header/logo-small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/src/components/Header/logo-small@2x.png -------------------------------------------------------------------------------- /src/components/Header/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-react/sb-admin-seed-react/97f7eca5f1ea8b0b025f40d820361736958fdb08/src/components/Header/logo.png -------------------------------------------------------------------------------- /src/components/Header/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Header", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./Header.js" 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Html.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import { analytics } from '../config'; 3 | 4 | function Html({ title, description, style, script, children }) { 5 | return ( 6 | 7 | 8 | 9 | 10 | {title} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |