#367 Set-up styled components for styling (#368)

* set-up emotion and mui

* switch to styled, add type for theme

* fix styling

* fix styles

Co-authored-by: Anastasiia Moskvina <anastasiia_moskvina@epam.com>

packages/miew-react/.babelrc

@@ -1,8 +1,8 @@
 {
     "presets": [
       "@babel/env",
-      ["@babel/react", { "runtime": "automatic" }],
+      ["@babel/react", { "runtime": "automatic", "importSource": "@emotion/react" }],
       "@babel/typescript"
     ],
-    "plugins": ["@babel/plugin-transform-runtime"]
+    "plugins": ["@emotion", "@babel/plugin-transform-runtime"]
   }

packages/miew-react/.eslintrc.json

@@ -3,12 +3,19 @@
   "env": {
     "browser": true
   },
+  "plugins": ["@emotion"],
   "extends": [
     "plugin:react/jsx-runtime",
     "plugin:jsx-a11y/recommended",
     "plugin:react-hooks/recommended",
     "plugin:jest/recommended"
   ],
+  "rules": {
+    "@emotion/no-vanilla": "error",
+    "@emotion/import-from-emotion": "error",
+    "@emotion/styled-import": "error",
+    "@emotion/syntax-preference": [2, "object"]
+  },
   "overrides": [
     {
       "files": [

packages/miew-react/jest.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  // testMatch: ['**/__tests__/**/?(*.)+(spec|test).[jt]s?(x)'],
   testPathIgnorePatterns: ['dist', 'node_modules'],
   transform: {
     '\\.js?$': 'babel-jest',
@@ -10,5 +9,8 @@ module.exports = {
     '^src(.*)$': '<rootDir>/src/$1',
     '^components(.*)$': '<rootDir>/src/components/$1',
     '^state(.*)$': '<rootDir>/src/state/$1'
-  }
+  },
+  snapshotSerializers: [
+    '@emotion/jest/serializer'
+  ]
 }

packages/miew-react/package.json

@@ -28,23 +28,25 @@
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c -m true",
     "start": "cross-env NODE_ENV=development rollup -c -m true -w",
-    "test": "run-s prettier stylelint test:lint test:unit",
+    "test": "run-s prettier test:lint test:unit",
     "test:lint": "eslint src --ext .ts,.tsx,.js,.jsx",
     "test:unit": "jest",
     "test:unit:update": "jest -u",
     "prettier": "prettier --check 'src/**/*.{js,jsx,json,ts,tsx}'",
-    "prettier:write": "prettier --write 'src/**/*.{js,jsx,json,ts,tsx}'",
-    "stylelint": "stylelint 'src/**/*.{css,less,scss}' --formatter verbose",
-    "stylelint:fix": "stylelint 'src/**/*.{css,less,scss}' --formatter verbose --fix"
+    "prettier:write": "prettier --write 'src/**/*.{js,jsx,json,ts,tsx}'"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/material": "^5.2.5",
     "@reduxjs/toolkit": "^1.7.1",
     "clsx": "^1.1.1",
+    "lodash": "^4.17.21",
     "miew": "workspace:*",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
@@ -57,6 +59,10 @@
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
     "@babel/preset-typescript": "^7.12.1",
+    "@emotion/babel-plugin": "^11.7.2",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/eslint-plugin": "^11.7.0",
+    "@emotion/jest": "^11.7.1",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-json": "^4.1.0",
@@ -66,11 +72,11 @@
     "@svgr/rollup": "^5.4.0",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.3",
+    "@types/lodash": "^4.14.178",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
-    "autoprefixer": "^10.2.5",
     "babel-jest": "^27.4.5",
     "cross-env": "^7.0.3",
     "eslint": "^8.4.1",
@@ -82,18 +88,13 @@
     "jest": "^27.4.5",
     "jest-canvas-mock": "^2.3.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.10",
-    "postcss-scss": "^4.0.2",
     "prettier": "^2.5.1",
     "rollup": "^2.60.2",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.31.1",
-    "sass": "^1.45.0",
-    "stylelint": "13.13.1",
     "ts-jest": "26.5.6",
     "typescript": "^4.5.2"
   },

packages/miew-react/rollup.config.js

@@ -1,4 +1,3 @@
-import autoprefixer from 'autoprefixer'
 import babel from '@rollup/plugin-babel'
 import cleanup from 'rollup-plugin-cleanup'
 import commonjs from '@rollup/plugin-commonjs'
@@ -7,7 +6,6 @@ import del from 'rollup-plugin-delete'
 import json from '@rollup/plugin-json'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import pkg from './package.json'
-import postcss from 'rollup-plugin-postcss'
 import replace from '@rollup/plugin-replace'
 import resolve from '@rollup/plugin-node-resolve'
 import strip from '@rollup/plugin-strip'
@@ -70,14 +68,6 @@ const config = {
       babelHelpers: 'runtime',
       include: ['src/**/*']
     }),
-    postcss({
-      plugins: [autoprefixer({ grid: 'autoplace' })],
-      // extract: path.resolve('dist/index.css'),
-      minimize: isProduction,
-      sourceMap: true,
-      modules: true,
-      use: ['sass']
-    }),
     svgr(),
     copy({
       targets: [{ src: 'src/style/*.svg', dest: 'dist' }]

packages/miew-react/src/Viewer.test.tsx

@@ -11,7 +11,7 @@ jest.mock('miew', () =>
   jest.fn().mockReturnValue({ init: jest.fn(() => true), run: jest.fn() })
 )
 
-describe('Miew component', () => {
+describe('Viewer component', () => {
   it('should be rendered', () => {
     expect(render(<Viewer />)).toMatchSnapshot()
   })

packages/miew-react/src/Viewer.tsx

@@ -1,8 +1,7 @@
 import { useLayoutEffect, useRef } from 'react'
 import useResizeObserver from 'use-resize-observer'
-import clsx from 'clsx'
 import Miew from 'miew'
-import classes from './Viewer.module.scss'
+import { Theme } from '@emotion/react'
 
 const MEDIA_SIZES = {
   smallWidth: 800,
@@ -15,9 +14,27 @@ type ViewerProps = {
 }
 
 const Viewer = (props: ViewerProps) => {
+  const { onInit, options } = props
   const ref = useRef<HTMLDivElement>(null)
   const { width, height } = useResizeObserver<HTMLDivElement>({ ref })
-  const { onInit, options } = props
+  const isSizeSmall =
+    (height && height <= MEDIA_SIZES.smallHeight) ||
+    (width && width <= MEDIA_SIZES.smallWidth)
+
+  const viewerStyle = (theme: Theme) => {
+    const palette = theme?.customTheme?.palette
+    return {
+      backgroundColor: isSizeSmall
+        ? palette?.accent?.main
+        : palette?.primary?.main,
+      height: '100%',
+      width: '100%',
+      '& > .miew-canvas': {
+        height: '100%',
+        width: '100%'
+      }
+    }
+  }
 
   useLayoutEffect(() => {
     const miew = new Miew({
@@ -26,19 +43,9 @@ const Viewer = (props: ViewerProps) => {
     })
     if (miew.init()) miew.run()
     if (typeof onInit === 'function') onInit(miew)
-  }, [onInit, options])
+  }, [options, onInit])
 
-  // TODO: switch to styled when emotion set-up is merged
-  return (
-    <div
-      className={clsx(classes.viewer, {
-        [classes.small]:
-          (height && height <= MEDIA_SIZES.smallHeight) ||
-          (width && width <= MEDIA_SIZES.smallWidth)
-      })}
-      ref={ref}
-    ></div>
-  )
+  return <div ref={ref} css={viewerStyle} />
 }
 
 export { Viewer }

packages/miew-react/src/ViewerContainer.tsx

@@ -1,11 +1,21 @@
 import { Provider } from 'react-redux'
 import { store } from 'state'
 import { Viewer } from './Viewer'
+import _ from 'lodash'
+import { Theme, ThemeProvider } from '@emotion/react'
+import { mainTheme } from 'src/theming'
+import { createTheme } from '@mui/material/styles'
+import { CssBaseline } from '@mui/material'
+
+const muiTheme = createTheme()
 
 export const ViewerContainer = (props) => {
   return (
     <Provider store={store}>
-      <Viewer {...props} />
+      <ThemeProvider theme={_.merge(muiTheme, mainTheme) as Theme}>
+        <CssBaseline />
+        <Viewer {...props} />
+      </ThemeProvider>
     </Provider>
   )
 }

packages/miew-react/src/__snapshots__/Viewer.test.tsx.snap

@@ -1,18 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Miew component should be rendered 1`] = `
+exports[`Viewer component should be rendered 1`] = `
 Object {
   "asFragment": [Function],
-  "baseElement": <body>
+  "baseElement": .emotion-0 {
+  height: 100%;
+  width: 100%;
+}
+
+.emotion-0>.miew-canvas {
+  height: 100%;
+  width: 100%;
+}
+
+<body>
     <div>
       <div
-        class="viewer small"
+        class="emotion-0"
       />
     </div>
   </body>,
-  "container": <div>
+  "container": .emotion-0 {
+  height: 100%;
+  width: 100%;
+}
+
+.emotion-0>.miew-canvas {
+  height: 100%;
+  width: 100%;
+}
+
+<div>
     <div
-      class="viewer small"
+      class="emotion-0"
     />
   </div>,
   "debug": [Function],

packages/miew-react/src/theming/index.ts

@@ -0,0 +1 @@
+export * from './mainTheme'

packages/miew-react/src/theming/mainTheme.ts

@@ -0,0 +1,18 @@
+export const mainTheme = {
+  customTheme: {
+    palette: {
+      accent: {
+        main: '#337ab7',
+        dark: '#286090'
+      },
+      primary: {
+        main: '#333',
+        light: '#eee',
+        dark: '#383838'
+      }
+    },
+    typography: {
+      htmlFontSize: 16
+    }
+  }
+}

packages/miew-react/src/typings.d.ts

@@ -1,7 +1,4 @@
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}
+import { Theme as MuiTheme } from '@mui/material'
 
 declare module '*.svg' {
   import * as React from 'react'
@@ -13,3 +10,27 @@ declare module '*.svg' {
   const src: string
   export default src
 }
+
+interface CustomTheme {
+  customTheme?: {
+    palette?: {
+      accent?: {
+        main?: string
+        dark?: string
+      }
+      primary?: {
+        main?: string
+        light?: string
+        dark?: string
+      }
+    }
+    typography?: {
+      htmlFontSize?: number
+    }
+  }
+}
+
+declare module '@emotion/react' {
+  /* eslint-disable @typescript-eslint/no-empty-interface */
+  export interface Theme extends MuiTheme, CustomTheme {}
+}

packages/miew-react/tsconfig.json

@@ -8,6 +8,7 @@
     ],
     "moduleResolution": "node",
     "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
     "sourceMap": true,
     "declaration": true,
     "esModuleInterop": true,