feat(ThemeProvider): add material theme

close #80

Author: ZxBing0066

.styleguide/components/ReactExample.jsx

@@ -7,7 +7,13 @@ import splitExampleCode from 'react-styleguidist/lib/utils/splitExampleCode';
 import ThemeProvider from 'src/components/ThemeProvider';
 import greenTheme from 'src/components/ThemeProvider/green';
 import oceanTheme from 'src/components/ThemeProvider/ocean';
-import materialTheme from 'src/components/ThemeProvider/material';
+import generateMaterialTheme from 'src/components/ThemeProvider/material';
+
+const materialTheme = generateMaterialTheme({
+    colorList: {
+        primary: '#3555f6'
+    }
+});
 
 /* eslint-disable no-invalid-this, react/no-multi-comp */
 
@@ -46,7 +52,7 @@ export const themeColor = {
     material: '#415bf5'
 };
 
-let currentThemeType = 'green';
+let currentThemeType = 'blue';
 export const changeTheme = themeType => {
     currentThemeType = themeType;
     _.each(themeListeners, listener => {
@@ -123,17 +129,21 @@ export default class ReactExample extends Component {
         if (!compiledCode) {
             return null;
         }
-
         const { head, example } = splitExampleCode(compiledCode);
         const initialState = this.getExampleInitialState(head);
         const exampleComponent = this.getExampleComponent(example);
-        const wrappedComponent = (
-            <ThemeProvider theme={themeList[this.state.theme]}>
+        const wrappedComponent =
+            this.state.theme === 'blue' ? (
                 <Wrapper onError={this.props.onError}>
                     <StateHolder component={exampleComponent} initialState={initialState} />
                 </Wrapper>
-            </ThemeProvider>
-        );
+            ) : (
+                <ThemeProvider theme={themeList[this.state.theme]}>
+                    <Wrapper onError={this.props.onError}>
+                        <StateHolder component={exampleComponent} initialState={initialState} />
+                    </Wrapper>
+                </ThemeProvider>
+            );
         return wrappedComponent;
     }
 }

.styleguide/components/StyleGuideRenderer.jsx

@@ -85,6 +85,7 @@ const styles = ({
     },
     themeButton: {
         display: 'inline-block',
+        cursor: 'pointer',
         width: '4em',
         height: '4em',
         borderRadius: '2em',

.styleguide/setup.js

@@ -11,3 +11,7 @@ global.PropTypes = require('prop-types');
 global.ReactDOM = require('react-dom');
 
 global.moment = require('moment');
+
+import generateMaterialTheme from 'src/components/ThemeProvider/material';
+
+global.generateMaterialTheme = generateMaterialTheme;

package.json

@@ -76,7 +76,7 @@
     "babel-jest": "^22.4.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-lodash": "^3.3.2",
-    "babel-plugin-styled-components": "^1.5.1",
+    "babel-plugin-styled-components": "^1.10.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-webpack-alias": "^2.1.2",
@@ -94,7 +94,7 @@
     "file-loader": "^1.1.11",
     "husky": "^0.14.3",
     "jest": "^22.4.3",
-    "jest-styled-components": "^5.0.1",
+    "jest-styled-components": "^6.3.1",
     "lint-staged": "^7.0.4",
     "mini-css-extract-plugin": "^0.4.0",
     "moment-timezone": "^0.5.21",
@@ -107,10 +107,10 @@
     "react-test-renderer": "^15",
     "standard-version": "^4.4.0",
     "style-loader": "^0.20.3",
-    "stylelint": "^9.4.0",
+    "stylelint": "^9.9.0",
     "stylelint-config-recommended": "^2.1.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.3.2",
+    "stylelint-processor-styled-components": "^1.5.1",
     "url-loader": "^1.0.1",
     "webpack": "^4.5.0",
     "webpack-cli": "^2.0.14"