Remove styled-components (closes #56) (#113)

* Remove styled components (closes #56)

* Update storybook

* Fix and document tests

* Fix linting errors (#113)

* Update yarn lock

* ColorButton: set default values

Author: Gustl22

.storybook/ThemeProvider.js

@@ -1,30 +1,28 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import CssBaseline from "@material-ui/core/CssBaseline";
-import { MuiThemeProvider } from "@material-ui/core/styles";
-import { StylesProvider } from "@material-ui/styles";
-
-import { ThemeProvider as StyledThemeProvider } from "styled-components";
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider as StyledThemeProvider } from '@material-ui/core/styles';
+import { StylesProvider } from '@material-ui/styles';
+import { createMuiTheme } from '@material-ui/core';
 
 const ThemeProvider = ({ theme, children }) => {
-  const nextTheme = Object.assign({}, theme);
+  const { locale, ...options } = theme;
+  const nextTheme = createMuiTheme(options, locale);
 
   return (
     <StylesProvider injectFirst>
       <StyledThemeProvider theme={nextTheme}>
-        <MuiThemeProvider theme={nextTheme}>
-          <CssBaseline />
-          {children}
-        </MuiThemeProvider>
+        <CssBaseline />
+        {children}
       </StyledThemeProvider>
     </StylesProvider>
   );
 };
 
 ThemeProvider.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  theme: PropTypes.object.isRequired
+  theme: PropTypes.object.isRequired,
 };
 
 export default ThemeProvider;

.storybook/darkTheme.js

@@ -1,10 +1,8 @@
-import { createMuiTheme } from "@material-ui/core/styles";
-
-const darkTheme = createMuiTheme({
+const darkTheme = {
   name: 'Dark Theme',
   palette: {
     type: 'dark',
   },
-});
+};
 
 export default darkTheme;

.storybook/frenchTheme.js

@@ -1,11 +1,11 @@
-import { createMuiTheme } from "@material-ui/core/styles";
 import { frFR } from '@material-ui/core/locale';
 
-const frenchTheme = createMuiTheme({
+const frenchTheme = {
   name: 'Dark French Theme',
   palette: {
     type: 'dark',
   },
-}, frFR);
+  locale: frFR,
+};
 
 export default frenchTheme;

.storybook/lightTheme.js

@@ -1,10 +1,8 @@
-import { createMuiTheme } from "@material-ui/core/styles";
-
-const lightTheme = createMuiTheme({
+const lightTheme = {
   name: 'Light Theme',
   palette: {
     type: 'light',
   },
-});
+};
 
 export default lightTheme;

.storybook/main.js

@@ -1,4 +1,4 @@
 module.exports = {
   stories: ['../stories/**/*.stories.(js|mdx)'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links', 'storybook-addon-styled-component-theme', '@storybook/addon-docs'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs', '@react-theming/storybook-addon'],
 };

.storybook/manager.js

@@ -1,7 +1,7 @@
 import { addons } from '@storybook/addons';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
-import 'storybook-addon-styled-component-theme/dist/register';
+import '@react-theming/storybook-addon';
 import muiccTheme from './muiccTheme';
 
 addons.setConfig({

.storybook/preview.js

@@ -3,14 +3,14 @@ import { addParameters } from '@storybook/react';
 import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
 import { addDecorator } from '@storybook/react';
 import { withKnobs } from "@storybook/addon-knobs";
-import { withThemesProvider } from 'storybook-addon-styled-component-theme';
+import { withThemes } from '@react-theming/storybook-addon/dist/preview';
 import ThemeProvider from './ThemeProvider';
 import lightTheme from './lightTheme';
 import darkTheme from './darkTheme';
 import frenchTheme from './frenchTheme';
 
 const themes = [lightTheme, darkTheme, frenchTheme];
-addDecorator(withThemesProvider(themes, ThemeProvider));
+addDecorator(withThemes(ThemeProvider, themes));
 addDecorator(withKnobs);
 addDecorator(storyFn => <div style={{ padding: '48px' }}>{storyFn()}</div>);
 addParameters({

README.md

@@ -47,7 +47,6 @@
 ## Why another ColorPicker ?
 
 - Fully compatible with Material-UI : theming and low level components
-- Styled with `styled-components`
 - Highly customizable ColorPicker : gradient picker, palette, input format, deferred mode
 -  Small in size (<30kb) without any direct dependencies
 - Use modern React hook and coding conventions
@@ -67,7 +66,7 @@ https://mikbry.github.io/material-ui-color/
 
 ## Requirements
 - Works on modern browsers supporting ES6+ (Not compatible with IE)
-- React, Styled-Component and Material-UI frameworks
+- React and Material-UI frameworks
 
 ## Install
 
@@ -90,7 +89,6 @@ you need to have in your dependencies:
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "styled-components": "^5.2.1"
 ```
 
 `material-ui-color` bring 5 components.

package.json

@@ -41,17 +41,18 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@material-ui/core": "^4.11.2",
+    "@react-theming/storybook-addon": "^1.0.3",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",
     "@rollup/plugin-url": "^4.0.2",
-    "@storybook/addon-actions": "^5.2.6",
-    "@storybook/addon-docs": "^5.3.18",
-    "@storybook/addon-knobs": "^5.3.18",
-    "@storybook/addon-links": "^5.2.6",
-    "@storybook/addons": "^5.2.6",
-    "@storybook/react": "^5.2.6",
-    "@testing-library/jest-dom": "^5.3.0",
-    "@testing-library/react": "^10.0.1",
+    "@storybook/addon-actions": "^6.1.21",
+    "@storybook/addon-docs": "^6.1.21",
+    "@storybook/addon-knobs": "^6.1.21",
+    "@storybook/addon-links": "^6.1.21",
+    "@storybook/addons": "^6.1.21",
+    "@storybook/react": "^6.1.21",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
     "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.6",
     "cross-env": "^7.0.0",
@@ -65,9 +66,8 @@
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^2.3.0",
     "husky": "^5.1.3",
-    "jest": "^25.1.0",
+    "jest": "^26.6.3",
     "jest-css-modules": "^2.1.0",
-    "jest-styled-components": "^7.0.0",
     "material-ui-popup-state": "^1.7.1",
     "packito": "^0.5.0",
     "prettier": "^1.19.1",
@@ -82,9 +82,7 @@
     "rollup-plugin-hot-css": "^0.0.6",
     "rollup-plugin-react-refresh": "^0.0.1",
     "rollup-plugin-string": "^3.0.0",
-    "rollup-plugin-terser": "^5.2.0",
-    "storybook-addon-styled-component-theme": "^1.3.0",
-    "styled-components": "^5.2.1"
+    "rollup-plugin-terser": "^5.2.0"
   },
   "husky": {
     "hooks": {
@@ -102,8 +100,7 @@
     "material-ui-popup-state": "^1.5.3",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "styled-components": "^5.0.1"
+    "react-dom": "^16.12.0"
   },
   "dependencies": {},
   "jest": {

rollup.config.js

@@ -24,7 +24,6 @@ export default {
     'prop-types',
     'react-is',
     'hoist-non-react-statics',
-    'styled-components',
     'Element',
   ],
   output: [