epam · AndreiMazol · Jan 21, 2022 · Jan 20, 2022 · Jan 20, 2022 · Jan 20, 2022
diff --git a/packages/miew-react/src/Viewer.test.tsx b/packages/miew-react/src/Viewer.test.tsx
@@ -1,8 +1,7 @@
 import { render } from '@testing-library/react'
 import 'jest-canvas-mock'
-import { Viewer } from 'src/Viewer'
+import { Viewer } from './Viewer'
 
-// TODO create mock folder, and move all mocks there
 jest.mock('use-resize-observer', () =>
   jest.fn().mockReturnValue({ ref: null, width: 100, height: 100 })
 )
@@ -11,8 +10,27 @@ jest.mock('miew', () => ({
   Miew: jest.fn(() => ({ init: jest.fn(() => true), run: jest.fn() }))
 }))
 
+const customTheme = {
+  palette: {
+    accent: {
+      main: '#f00'
+    },
+    primary: {
+      main: '#e2b6b6',
+      light: '#fcf8f8',
+      dark: '#8e4343'
+    }
+  },
+  typography: {
+    fontSize: 14
+  }
+}
+
 describe('Viewer component', () => {
   it('should be rendered', () => {
     expect(render(<Viewer />)).toMatchSnapshot()
   })
+  it('should apply custom theme when theme prop is provided', () => {
+    expect(render(<Viewer theme={customTheme} />)).toMatchSnapshot()
+  })
 })
diff --git a/packages/miew-react/src/Viewer.tsx b/packages/miew-react/src/Viewer.tsx
@@ -1,32 +1,45 @@
 import { useLayoutEffect, useRef } from 'react'
-import useResizeObserver from 'use-resize-observer'
+import { Provider } from 'react-redux'
 import { Miew, MiewOptions } from 'miew'
-import { Theme } from '@emotion/react'
+import useResizeObserver from 'use-resize-observer'
+import { Theme, ThemeProvider } from '@emotion/react'
+import { createTheme } from '@mui/material/styles'
+import { CssBaseline } from '@mui/material'
+import { merge } from 'lodash'
+import { store } from 'state'
+import { defaultTheme, MiewTheme } from './theming'
 
 const MEDIA_SIZES = {
   smallWidth: 800,
   smallHeight: 400
 }
 
+type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>
+}
+
 type ViewerProps = {
-  onInit?: (miew: object) => void
+  onInit?: (miew: Miew) => void
   options?: MiewOptions
+  theme?: DeepPartial<MiewTheme>
 }
 
-const Viewer = (props: ViewerProps) => {
-  const { onInit, options } = props
+const muiTheme = createTheme()
+
+const Viewer = ({ onInit, options, theme }: ViewerProps) => {
+  const viewerTheme = theme ? merge(defaultTheme, theme) : defaultTheme
+
   const ref = useRef<HTMLDivElement>(null)
   const { width, height } = useResizeObserver<HTMLDivElement>({ ref })
+
   const isSizeSmall =
     (height && height <= MEDIA_SIZES.smallHeight) ||
     (width && width <= MEDIA_SIZES.smallWidth)
 
   const viewerStyle = (theme: Theme) => {
-    const palette = theme?.customTheme?.palette
+    const palette = theme.miew.palette
     return {
-      backgroundColor: isSizeSmall
-        ? palette?.accent?.main
-        : palette?.primary?.main,
+      backgroundColor: isSizeSmall ? palette.accent.main : palette.primary.main,
       height: '100%',
       width: '100%',
       '& > .miew-canvas': {
@@ -45,7 +58,14 @@ const Viewer = (props: ViewerProps) => {
     if (typeof onInit === 'function') onInit(miew)
   }, [options, onInit])
 
-  return <div ref={ref} css={viewerStyle} />
+  return (
+    <Provider store={store}>
+      <ThemeProvider theme={merge(muiTheme, { miew: viewerTheme })}>
+        <CssBaseline />
+        <div ref={ref} css={viewerStyle} />
+      </ThemeProvider>
+    </Provider>
+  )
 }
 
 export { Viewer }
diff --git a/packages/miew-react/src/ViewerContainer.tsx b/packages/miew-react/src/ViewerContainer.tsx
diff --git a/packages/miew-react/src/__snapshots__/Viewer.test.tsx.snap b/packages/miew-react/src/__snapshots__/Viewer.test.tsx.snap
@@ -1,9 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Viewer component should apply custom theme when theme prop is provided 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": .emotion-0 {
+  background-color: #f00;
+  height: 100%;
+  width: 100%;
+}
+
+.emotion-0>.miew-canvas {
+  height: 100%;
+  width: 100%;
+}
+
+<body>
+    <div>
+      <div
+        class="emotion-0"
+      />
+    </div>
+  </body>,
+  "container": .emotion-0 {
+  background-color: #f00;
+  height: 100%;
+  width: 100%;
+}
+
+.emotion-0>.miew-canvas {
+  height: 100%;
+  width: 100%;
+}
+
+<div>
+    <div
+      class="emotion-0"
+    />
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`Viewer component should be rendered 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": .emotion-0 {
+  background-color: #2E6DA4;
   height: 100%;
   width: 100%;
 }
@@ -21,6 +113,7 @@ Object {
     </div>
   </body>,
   "container": .emotion-0 {
+  background-color: #2E6DA4;
   height: 100%;
   width: 100%;
 }

diff --git a/packages/miew-react/src/index.tsx b/packages/miew-react/src/index.tsx
@@ -1,3 +1,3 @@
-import { ViewerContainer } from './ViewerContainer'
+import { Viewer } from './Viewer'
 
-export default ViewerContainer
+export default Viewer
diff --git a/packages/miew-react/src/theming/defaultTheme.ts b/packages/miew-react/src/theming/defaultTheme.ts
@@ -0,0 +1,25 @@
+import { MiewTheme } from './theme.types'
+
+export const defaultTheme: MiewTheme = {
+  palette: {
+    accent: {
+      main: '#2E6DA4',
+      dark: '#204D74',
+      light: '#337AB7'
+    },
+    primary: {
+      main: '#DDD',
+      light: '#FFF',
+      dark: '#DDD'
+    },
+    secondary: {
+      main: '#333',
+      light: '#C0C0C0',
+      dark: '#383838'
+    }
+  },
+  typography: {
+    fontSize: 16,
+    fontFamily: 'sans-serif'
+  }
+}
diff --git a/packages/miew-react/src/theming/index.ts b/packages/miew-react/src/theming/index.ts
@@ -1 +1,2 @@
-export * from './mainTheme'
+export * from './defaultTheme'
+export * from './theme.types'
diff --git a/packages/miew-react/src/theming/mainTheme.ts b/packages/miew-react/src/theming/mainTheme.ts
diff --git a/packages/miew-react/src/theming/theme.types.ts b/packages/miew-react/src/theming/theme.types.ts
@@ -0,0 +1,17 @@
+type ColorSet = {
+  main: string
+  light: string
+  dark: string
+}
+
+export interface MiewTheme {
+  palette: {
+    accent: ColorSet
+    primary: ColorSet
+    secondary: ColorSet
+  }
+  typography: {
+    fontSize: number
+    fontFamily: string
+  }
+}
diff --git a/packages/miew-react/src/typings.d.ts b/packages/miew-react/src/typings.d.ts
@@ -1,4 +1,4 @@
-import { Theme as MuiTheme } from '@mui/material'
+import { MiewTheme } from 'theming'
 
 declare module '*.svg' {
   import * as React from 'react'
@@ -11,26 +11,8 @@ declare module '*.svg' {
   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 {}
+  export interface Theme {
+    miew: MiewTheme
+  }
 }
diff --git a/packages/miew-react/tsconfig.json b/packages/miew-react/tsconfig.json
@@ -34,7 +34,8 @@
     "paths": {
       "components/*": ["src/components/*"],
       "state/*": ["src/state/*"],
-      "state": ["src/state"]
+      "state": ["src/state"],
+      "theming": ["src/theming"]
     },
   },
   "include": [ "src" ],