update to storybook styled

.storybook/contexts.js

@@ -3,11 +3,11 @@
 // FIXME: not yet tested, as we wait for Storybook v6.0.0 official release
 import darkTheme from "~/lib/style/darkTheme";
 import defaultTheme from "~/lib/style/defaultTheme";
-import { SCThemeProvider } from "~/src/components/providers/SCThemeProvider";
+import { MuiThemeProvider } from "~/src/components/providers/MuiThemeProvider";
 export const contexts = [
   {
     title: "Theme",
-    components: [SCThemeProvider],
+    components: [MuiThemeProvider],
     params: [
       {
         name: "Default theme",

cypress/integration/integration/mui-styled-components.spec.ts

@@ -2,8 +2,8 @@
 const orange = "rgb(255, 166, 22)"; // hex color will be translated to RGB during render so directly testing the HEX value won't work
 describe("material-ui", () => {
   describe("ssr", () => {
-    it("does render a button with styled components applied", () => {
-      cy.visit("/vns/debug/sc-mui");
+    it("does render a button with emotion styles applied", () => {
+      cy.visit("/vns/debug/emotion-mui");
       cy.get("button", { timeout: 0 }).should(
         "have.css",
         "background-color",

package.json

@@ -95,8 +95,6 @@
     "react-hook-form": "4.9.8",
     "react-i18next": "^11.5.0",
     "react-spring": "^8.0.27",
-    "styled-components": "5.1.1",
-    "styled-components-modifiers": "^1.2.5",
     "styled-jsx-plugin-postcss": "^3.0.2",
     "swr": "^0.4.0"
   },
@@ -108,7 +106,6 @@
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
     "@types/shelljs": "^0.8.8",
-    "@types/styled-components": "^5.1.0",
     "@typescript-eslint/eslint-plugin": "^2.21.0",
     "@typescript-eslint/parser": "^2.21.0",
     "babel-eslint": "^10.1.0",

src/components/providers/MuiThemeProvider.tsx

@@ -1,5 +1,5 @@
 import { ThemeProvider } from "@material-ui/core/styles";
-import defaultTheme from "~/lib/material-ui/defaultTheme";
+import defaultTheme from "~/lib/style/defaultTheme";
 import React, { createContext, useContext, useState } from "react";
 
 type UseMuiThemeOutput = [Object, (newTheme: Object) => void];
@@ -8,15 +8,18 @@ const useMuiTheme = (): UseMuiThemeOutput => {
   return [muiTheme, setMuiTheme];
 };
 
-const MuiThemeContext = createContext<UseMuiThemeOutput | undefined>(undefined);
+const MuiThemeContext = createContext<UseMuiThemeOutput>([
+  defaultTheme,
+  () => {},
+]);
 
 /**
  * Can be called anywhere, will provide current theme
  * + a setter to change the theme
  *
  * Internally use "useState" to remember the current theme.
  */
-export const useMuiThemeContext = (): UseMuiThemeOutput | undefined => {
+export const useMuiThemeContext = (): UseMuiThemeOutput => {
   return useContext(MuiThemeContext);
 };
 

src/components/providers/index.ts

@@ -1,2 +1 @@
 export * from "./MuiThemeProvider";
-export * from "./SCThemeProvider";

src/components/providers/stories/SCTheme.stories.tsx → src/components/providers/stories/MuiThemeProvider.stories.tsx

@@ -2,36 +2,36 @@
  * Demo of a theme switch button
  */
 import React, { useState } from "react";
-import { useSCThemeContext } from "../SCThemeProvider";
-import styled from "styled-components";
+import { useMuiThemeContext } from "../MuiThemeProvider";
 import darkTheme from "~/lib/style/darkTheme";
 import defaultTheme from "~/lib/style/defaultTheme";
+import { styled } from "@material-ui/core/styles";
 
 export default {
   title: "VN/ThemeSwitch",
   //component: useSCThemeContext //  decoractors: [(storyFn) => <div>{storyFn()}</div>
 };
 
-const ThemedDiv = styled.div`
-  color: ${(props) => props.theme.color};
-  background-color: ${(props) => props.theme.backgroundColor};
+const ThemedDiv = styled("div")`
+  color: ${(props) => props.theme.palette.text.primary};
+  background-color: ${(props) => props.theme.palette.background.default};
 `;
 
 const ThemeSwitchDemo = () => {
-  const [currentSCTheme, setSCTheme] = useSCThemeContext();
+  const [currentMuiTheme, setMuiTheme] = useMuiThemeContext();
   const [isDark, setIsDark] = useState(false); // default is light
-  const toggleSCTheme = () => {
+  const toggleMuiTheme = () => {
     const nextTheme = isDark ? defaultTheme : darkTheme;
-    setSCTheme(nextTheme);
+    setMuiTheme(nextTheme);
     setIsDark(!isDark);
   };
   return (
     <ThemedDiv>
       <div>
-        <button onClick={toggleSCTheme}>Switch Styled Components theme</button>
+        <button onClick={toggleMuiTheme}>Switch Material UI theme</button>
       </div>
       <div>Current theme:</div>
-      <div>{JSON.stringify(currentSCTheme, null, 2)}</div>
+      <div>{JSON.stringify(currentMuiTheme, null, 2)}</div>
     </ThemedDiv>
   );
 };

src/components/ui/StyledComponentsButton.tsx → src/components/ui/EmotionButton.tsx

@@ -1,6 +1,6 @@
 /**
  * Demo of a button with some custom style,
- * combining styled-components and material-ui
+ * combining emotion/styled and material-ui
  *
  */
 // NOTE: you don't need to import React, it will be added at build time by Babel/Next
@@ -10,7 +10,7 @@ import {
   ButtonProps as MuiButtonProps,
 } from "@material-ui/core";
 import colors from "~/lib/style/colors";
-import styled from "styled-components";
+import { styled } from "@material-ui/core/styles";
 import { lighten } from "polished";
 
 const technologyToColor = {