Skip to content

Commit

Permalink
#367 Set-up styled components for styling (#368)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
AnaMoskvina and Anastasiia Moskvina authored Jan 17, 2022
1 parent 4f41441 commit f2d3f97
Show file tree
Hide file tree
Showing 15 changed files with 585 additions and 838 deletions.
4 changes: 2 additions & 2 deletions packages/miew-react/.babelrc
Original file line number Diff line number Diff line change
@@ -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"]
}
7 changes: 7 additions & 0 deletions packages/miew-react/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
6 changes: 4 additions & 2 deletions packages/miew-react/jest.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
module.exports = {
// testMatch: ['**/__tests__/**/?(*.)+(spec|test).[jt]s?(x)'],
testPathIgnorePatterns: ['dist', 'node_modules'],
transform: {
'\\.js?$': 'babel-jest',
Expand All @@ -10,5 +9,8 @@ module.exports = {
'^src(.*)$': '<rootDir>/src/$1',
'^components(.*)$': '<rootDir>/src/components/$1',
'^state(.*)$': '<rootDir>/src/state/$1'
}
},
snapshotSerializers: [
'@emotion/jest/serializer'
]
}
21 changes: 11 additions & 10 deletions packages/miew-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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"
},
Expand Down
10 changes: 0 additions & 10 deletions packages/miew-react/rollup.config.js
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -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' }]
Expand Down
10 changes: 0 additions & 10 deletions packages/miew-react/src/Viewer.module.scss

This file was deleted.

2 changes: 1 addition & 1 deletion packages/miew-react/src/Viewer.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
Expand Down
37 changes: 22 additions & 15 deletions packages/miew-react/src/Viewer.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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({
Expand All @@ -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 }
12 changes: 11 additions & 1 deletion packages/miew-react/src/ViewerContainer.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
30 changes: 25 additions & 5 deletions packages/miew-react/src/__snapshots__/Viewer.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -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],
Expand Down
1 change: 1 addition & 0 deletions packages/miew-react/src/theming/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './mainTheme'
18 changes: 18 additions & 0 deletions packages/miew-react/src/theming/mainTheme.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export const mainTheme = {
customTheme: {
palette: {
accent: {
main: '#337ab7',
dark: '#286090'
},
primary: {
main: '#333',
light: '#eee',
dark: '#383838'
}
},
typography: {
htmlFontSize: 16
}
}
}
29 changes: 25 additions & 4 deletions packages/miew-react/src/typings.d.ts
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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 {}
}
1 change: 1 addition & 0 deletions packages/miew-react/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
],
"moduleResolution": "node",
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
"sourceMap": true,
"declaration": true,
"esModuleInterop": true,
Expand Down
Loading

0 comments on commit f2d3f97

Please sign in to comment.