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: [

src/components/ColorBox/HSVGradient.jsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import { makeStyles } from '@material-ui/core/styles';
 import * as CommonTypes from '../../helpers/commonTypes';
 import useEventCallback from '../../helpers/useEventCallback';
 
@@ -32,60 +32,57 @@ const getRGB = _h => {
   return rgb;
 };
 
-const StyledRoot = styled.div`
-  position: absolute;
-  width: inherit;
-  height: inherit;
-  background: ${props => `${props.cssRgb} none repeat scroll 0% 0%`};
-  margin: 0;
-  & .muicc-hsvgradient-s {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0)) repeat scroll 0%
-      0%;
-  }
-  & .muicc-hsvgradient-v {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0) linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)) repeat scroll 0% 0%;
-  }
-  & .muicc-hsvgradient-v {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0) linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)) repeat scroll 0% 0%;
-  }
-  & .muicc-hsvgradient-cursor {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    border: 1px solid #f0f0f0;
-    box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
-    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    border-radius: 4px;
-    cursor: ${props => !props.pressed && 'pointer'};
-    zindex: 100;
-    transform: translate(-4px, -4px);
-  }
-  & .muicc-hsvgradient-cursor:hover {
-    box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
-  }
-  & .muicc-hsvgradient-cursor:focus {
-    outline: none !important;
-    box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
-  }
-  & .muicc-hsvgradient-cursor:focus > div {
-    // TODO
-  }
-  & .muicc-hsvgradient-cursor-c {
-    width: 8px;
-    height: 8px;
-    border-radius: 4px;
-    box-shadow: white 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
-  }
-`;
+const useStyles = makeStyles({
+  root: {
+    position: 'absolute',
+    width: 'inherit',
+    height: 'inherit',
+    background: props => `${props.cssRgb} none repeat scroll 0% 0%`,
+    margin: 0,
+  },
+  gradientPosition: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  hsvGradientS: {
+    background:
+      'rgba(0, 0, 0, 0) linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0)) repeat scroll 0% 0%',
+  },
+  hsvGradientV: {
+    background: 'rgba(0, 0, 0, 0) linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)) repeat scroll 0% 0%',
+  },
+  hsvGradientCursor: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    borderColor: '#f0f0f0',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    boxShadow: 'rgba(0, 0, 0, 0.37) 0px 1px 4px 0px',
+    transition: 'box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    borderRadius: 4,
+    cursor: props => !props.pressed && 'pointer',
+    zIndex: 100,
+    transform: 'translate(-4px, -4px)',
+    '&:hover': {
+      boxShadow: '0px 0px 0px 8px rgba(63, 81, 181, 0.16)',
+    },
+    '&:focus': {
+      outline: 'none !important',
+      boxShadow: '0px 0px 0px 8px rgba(63, 81, 181, 0.16)',
+    },
+    '&:focus > div': {
+      //  TODO
+    },
+  },
+  hsvGradientCursorC: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    boxShadow: 'white 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)',
+  },
+});
 
 const HSVGradient = ({ className, color, onChange, ...props }) => {
   const latestColor = React.useRef(color);
@@ -99,6 +96,7 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {
   let cursorPos = { x: 0, y: 0 };
   const rgb = getRGB(color.hsv[0]);
   const cssRgb = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
+  const classes = useStyles({ ...props, cssRgb });
 
   const setPosition = (pos, f) => {
     cursorPos = pos;
@@ -225,9 +223,9 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {
   });
   return (
     <div className={className}>
-      <StyledRoot {...props} ref={box} cssRgb={cssRgb} data-testid="hsvgradient-color">
-        <div className="muicc-hsvgradient-s">
-          <div className="muicc-hsvgradient-v">
+      <div className={classes.root} {...props} ref={box} data-testid="hsvgradient-color">
+        <div className={`muicc-hsvgradient-s ${classes.hsvGradientS} ${classes.gradientPosition}`}>
+          <div className={`muicc-hsvgradient-v ${classes.hsvGradientV} ${classes.gradientPosition}`}>
             <div
               ref={cursor}
               tabIndex="0"
@@ -237,16 +235,16 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {
               aria-valuenow={color.hsv[1]}
               pressed={`${pressed}`}
               data-testid="hsvgradient-cursor"
-              className="muicc-hsvgradient-cursor"
+              className={`muicc-hsvgradient-cursor ${classes.hsvGradientCursor}`}
               onKeyDown={handleKey}
               onFocus={handleFocus}
               onBlur={handleBlur}
             >
-              <div className="muicc-hsvgradient-cursor-c" />
+              <div className={`muicc-hsvgradient-cursor-c ${classes.hsvGradientCursorC}`} />
             </div>
           </div>
         </div>
-      </StyledRoot>
+      </div>
     </div>
   );
 };