[housekeeping] Update CI (#81)

* fix eslint issues

* ts fixes

* update emotion

* fix css prop types

* eslint fixes

* use new jsx runtime, remove unused react imports

* replace travis with github actions

* fix yaml

* fix commands

.babelrc.js

@@ -16,11 +16,13 @@ const config = {
 			}
 		],
 		"@babel/preset-typescript",
-		"@babel/preset-react",
-		"@emotion/babel-preset-css-prop"
+		["@babel/preset-react", {
+			"runtime": "automatic",
+			"importSource": "@emotion/react"
+		}],
 	],
 	"plugins": [
-		'@babel/plugin-transform-runtime',
+		"@emotion/babel-plugin"
 	]
 }
 

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
 		'react-hooks',
 		'@typescript-eslint',
 		'prettier',
+		'@emotion',
 	],
 	settings: {
 		'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
@@ -94,7 +95,6 @@ module.exports = {
 			{
 				arrowParens: 'avoid',
 				bracketSpacing: true,
-				jsxBracketSameLine: false,
 				printWidth: 90,
 				proseWrap: 'preserve',
 				requirePragma: false,
@@ -110,4 +110,4 @@ module.exports = {
 		],
 	},
 	ignorePatterns: ['z_*', 'z_*/'],
-}
+}

.github/workflows/ci.yml

@@ -0,0 +1,55 @@
+name: CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+
+jobs:
+  test:
+    name: run tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '12.22.8'
+      # TODO - add caching
+      - run: npm run install-all
+      - run: npm run tests
+
+  lint:
+    name: run eslint and ts compile
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '12.22.8'
+      - run: npm run install-all
+      - run: npm run eslint
+      - run: npm run ts:compile
+
+  build-gh-pages:
+    name: build github pages
+    needs: [test, lint]
+    if: ${{ github.ref_name == 'master' }}
+    runs-on: ubuntu-latest
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '12.22.8'
+      - run: npm run install-all
+      - run: npm run docs:build
+      - name: deploy gh pages
+        uses: peaceiris/actions-gh-pages@v3
+        if: ${{ github.ref == 'refs/heads/master' }}
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_branch: gh-pages
+          publish_dir: ./docs/build

docs/js/components/icons.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export const Book = () => (
 	<svg
 		version="1.1"
@@ -8,7 +6,7 @@ export const Book = () => (
 		height="20"
 		viewBox="0 0 20 20"
 	>
-		<path d="M10.595 5.196l0.446 1.371c0.369-0.316 0.835-0.599 1.441-0.795 0.59-0.192 1.111-0.3 1.582-0.362l-0.43-1.323c-0.476 0.069-1.001 0.18-1.58 0.368s-1.055 0.45-1.459 0.741zM11.522 8.051l0.446 1.371c0.369-0.316 0.835-0.599 1.441-0.795 0.59-0.192 1.111-0.3 1.582-0.362l-0.43-1.323c-0.476 0.069-1.001 0.18-1.58 0.368-0.578 0.187-1.054 0.449-1.459 0.741zM12.45 10.905l0.446 1.371c0.369-0.316 0.835-0.599 1.441-0.795 0.59-0.192 1.111-0.3 1.582-0.362l-0.43-1.323c-0.476 0.069-1.001 0.18-1.58 0.368-0.579 0.187-1.055 0.45-1.459 0.741zM5.388 13.077l0.43 1.323c0.417-0.226 0.902-0.445 1.492-0.636 0.606-0.197 1.149-0.242 1.633-0.203l-0.446-1.371c-0.499 0.002-1.038 0.070-1.615 0.257-0.579 0.188-1.069 0.406-1.494 0.63zM3.533 7.368l0.43 1.323c0.417-0.226 0.902-0.444 1.492-0.636 0.606-0.197 1.149-0.242 1.633-0.203l-0.445-1.372c-0.499 0.003-1.038 0.070-1.616 0.258-0.579 0.188-1.069 0.406-1.494 0.63zM4.46 10.223l0.43 1.323c0.417-0.226 0.902-0.445 1.492-0.636 0.606-0.197 1.149-0.242 1.633-0.203l-0.445-1.372c-0.499 0.002-1.038 0.070-1.615 0.257-0.579 0.188-1.070 0.407-1.495 0.631zM11.064 1.41c-1.723 0.56-2.623 1.752-3.053 2.559-0.822-0.4-2.25-0.835-3.973-0.275-2.523 0.82-3.969 2.627-3.969 2.627l4.095 12.587c0.126 0.387 0.646 0.477 0.878 0.143 0.499-0.719 1.46-1.658 3.257-2.242 1.718-0.558 2.969 0.054 3.655 0.578 0.272 0.208 0.662 0.060 0.762-0.268 0.252-0.827 0.907-2.040 2.61-2.593 1.799-0.585 3.129-0.389 3.956-0.1 0.385 0.134 0.75-0.242 0.625-0.629l-4.088-12.594c0 0-2.232-0.612-4.755 0.207zM10.951 15.256c-0.819-0.244-1.901-0.358-3.141 0.044-1.251 0.406-2.127 0.949-2.699 1.404l-3.245-9.982c0.358-0.358 1.187-1.042 2.662-1.521 1.389-0.451 2.528-0.065 3.279 0.378l3.144 9.677zM17.845 12.567c-0.731-0.032-1.759 0.044-3.010 0.451-1.24 0.403-2.048 1.132-2.567 1.81l-3.144-9.677c0.346-0.8 1.040-1.782 2.43-2.233 1.474-0.479 2.547-0.413 3.047-0.334l3.244 9.983z"></path>
+		<path d="M10.595 5.196l0.446 1.371c0.369-0.316 0.835-0.599 1.441-0.795 0.59-0.192 1.111-0.3 1.582-0.362l-0.43-1.323c-0.476 0.069-1.001 0.18-1.58 0.368s-1.055 0.45-1.459 0.741zM11.522 8.051l0.446 1.371c0.369-0.316 0.835-0.599 1.441-0.795 0.59-0.192 1.111-0.3 1.582-0.362l-0.43-1.323c-0.476 0.069-1.001 0.18-1.58 0.368-0.578 0.187-1.054 0.449-1.459 0.741zM12.45 10.905l0.446 1.371c0.369-0.316 0.835-0.599 1.441-0.795 0.59-0.192 1.111-0.3 1.582-0.362l-0.43-1.323c-0.476 0.069-1.001 0.18-1.58 0.368-0.579 0.187-1.055 0.45-1.459 0.741zM5.388 13.077l0.43 1.323c0.417-0.226 0.902-0.445 1.492-0.636 0.606-0.197 1.149-0.242 1.633-0.203l-0.446-1.371c-0.499 0.002-1.038 0.070-1.615 0.257-0.579 0.188-1.069 0.406-1.494 0.63zM3.533 7.368l0.43 1.323c0.417-0.226 0.902-0.444 1.492-0.636 0.606-0.197 1.149-0.242 1.633-0.203l-0.445-1.372c-0.499 0.003-1.038 0.070-1.616 0.258-0.579 0.188-1.069 0.406-1.494 0.63zM4.46 10.223l0.43 1.323c0.417-0.226 0.902-0.445 1.492-0.636 0.606-0.197 1.149-0.242 1.633-0.203l-0.445-1.372c-0.499 0.002-1.038 0.070-1.615 0.257-0.579 0.188-1.070 0.407-1.495 0.631zM11.064 1.41c-1.723 0.56-2.623 1.752-3.053 2.559-0.822-0.4-2.25-0.835-3.973-0.275-2.523 0.82-3.969 2.627-3.969 2.627l4.095 12.587c0.126 0.387 0.646 0.477 0.878 0.143 0.499-0.719 1.46-1.658 3.257-2.242 1.718-0.558 2.969 0.054 3.655 0.578 0.272 0.208 0.662 0.060 0.762-0.268 0.252-0.827 0.907-2.040 2.61-2.593 1.799-0.585 3.129-0.389 3.956-0.1 0.385 0.134 0.75-0.242 0.625-0.629l-4.088-12.594c0 0-2.232-0.612-4.755 0.207zM10.951 15.256c-0.819-0.244-1.901-0.358-3.141 0.044-1.251 0.406-2.127 0.949-2.699 1.404l-3.245-9.982c0.358-0.358 1.187-1.042 2.662-1.521 1.389-0.451 2.528-0.065 3.279 0.378l3.144 9.677zM17.845 12.567c-0.731-0.032-1.759 0.044-3.010 0.451-1.24 0.403-2.048 1.132-2.567 1.81l-3.144-9.677c0.346-0.8 1.040-1.782 2.43-2.233 1.474-0.479 2.547-0.413 3.047-0.334l3.244 9.983z" />
 	</svg>
 )
 
@@ -20,7 +18,7 @@ export const Plug = () => (
 		height="20"
 		viewBox="0 0 20 20"
 	>
-		<path d="M0 14v1.498c0 0.277 0.225 0.502 0.502 0.502h0.997c0.276 0 0.501-0.225 0.501-0.502v-1.498c0-0.959 0.801-2.273 2-2.779v-2.105c-2.316 0.536-4 2.854-4 4.884zM12.065 4.701l-2.53 1.898c-0.347 0.26-0.769 0.401-1.203 0.401h-2.327c-0.555 0-1.005 0.45-1.005 1.005v3.991c0 0.554 0.45 1.004 1.005 1.004h2.327c0.434 0 0.856 0.141 1.203 0.401l2.531 1.898c0.606 0.455 1.344 0.701 2.102 0.701h1.832v-12h-1.832c-0.758 0-1.496 0.246-2.103 0.701zM17 6v2h3v-2h-3zM17 14h3v-2h-3v2z"></path>
+		<path d="M0 14v1.498c0 0.277 0.225 0.502 0.502 0.502h0.997c0.276 0 0.501-0.225 0.501-0.502v-1.498c0-0.959 0.801-2.273 2-2.779v-2.105c-2.316 0.536-4 2.854-4 4.884zM12.065 4.701l-2.53 1.898c-0.347 0.26-0.769 0.401-1.203 0.401h-2.327c-0.555 0-1.005 0.45-1.005 1.005v3.991c0 0.554 0.45 1.004 1.005 1.004h2.327c0.434 0 0.856 0.141 1.203 0.401l2.531 1.898c0.606 0.455 1.344 0.701 2.102 0.701h1.832v-12h-1.832c-0.758 0-1.496 0.246-2.103 0.701zM17 6v2h3v-2h-3zM17 14h3v-2h-3v2z" />
 	</svg>
 )
 
@@ -32,6 +30,6 @@ export const Github = () => (
 		height="20"
 		viewBox="0 0 20 20"
 	>
-		<path d="M13.18 11.309c-0.718 0-1.3 0.807-1.3 1.799 0 0.994 0.582 1.801 1.3 1.801s1.3-0.807 1.3-1.801c-0.001-0.992-0.582-1.799-1.3-1.799zM17.706 6.626c0.149-0.365 0.155-2.439-0.635-4.426 0 0-1.811 0.199-4.551 2.080-0.575-0.16-1.548-0.238-2.519-0.238-0.973 0-1.945 0.078-2.52 0.238-2.741-1.881-4.552-2.080-4.552-2.080-0.789 1.987-0.781 4.061-0.634 4.426-0.928 1.008-1.495 2.219-1.495 3.871 0 7.186 5.963 7.301 7.467 7.301 0.342 0 1.018 0.002 1.734 0.002s1.392-0.002 1.732-0.002c1.506 0 7.467-0.115 7.467-7.301 0-1.652-0.566-2.863-1.494-3.871zM10.028 16.915h-0.056c-3.771 0-6.709-0.449-6.709-4.115 0-0.879 0.31-1.693 1.047-2.369 1.227-1.127 3.305-0.531 5.662-0.531 0.010 0 0.020 0 0.029 0s0.018 0 0.027 0c2.357 0 4.436-0.596 5.664 0.531 0.735 0.676 1.045 1.49 1.045 2.369 0 3.666-2.937 4.115-6.709 4.115zM6.821 11.309c-0.718 0-1.3 0.807-1.3 1.799 0 0.994 0.582 1.801 1.3 1.801s1.301-0.807 1.301-1.801c0-0.992-0.582-1.799-1.301-1.799z"></path>
+		<path d="M13.18 11.309c-0.718 0-1.3 0.807-1.3 1.799 0 0.994 0.582 1.801 1.3 1.801s1.3-0.807 1.3-1.801c-0.001-0.992-0.582-1.799-1.3-1.799zM17.706 6.626c0.149-0.365 0.155-2.439-0.635-4.426 0 0-1.811 0.199-4.551 2.080-0.575-0.16-1.548-0.238-2.519-0.238-0.973 0-1.945 0.078-2.52 0.238-2.741-1.881-4.552-2.080-4.552-2.080-0.789 1.987-0.781 4.061-0.634 4.426-0.928 1.008-1.495 2.219-1.495 3.871 0 7.186 5.963 7.301 7.467 7.301 0.342 0 1.018 0.002 1.734 0.002s1.392-0.002 1.732-0.002c1.506 0 7.467-0.115 7.467-7.301 0-1.652-0.566-2.863-1.494-3.871zM10.028 16.915h-0.056c-3.771 0-6.709-0.449-6.709-4.115 0-0.879 0.31-1.693 1.047-2.369 1.227-1.127 3.305-0.531 5.662-0.531 0.010 0 0.020 0 0.029 0s0.018 0 0.027 0c2.357 0 4.436-0.596 5.664 0.531 0.735 0.676 1.045 1.49 1.045 2.369 0 3.666-2.937 4.115-6.709 4.115zM6.821 11.309c-0.718 0-1.3 0.807-1.3 1.799 0 0.994 0.582 1.801 1.3 1.801s1.301-0.807 1.301-1.801c0-0.992-0.582-1.799-1.301-1.799z" />
 	</svg>
 )

docs/js/components/text.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 interface Props {
-	children: React.ReactNode;
+	children: React.ReactNode
 }
 
 export default function Text({ children }: Props) {

docs/js/content.tsx

@@ -1,7 +1,8 @@
-import React, { useLayoutEffect } from 'react'
+import { useLayoutEffect } from 'react'
 import { hot } from 'react-hot-loader'
 import '../css/style.scss'
 
+// @ts-ignore
 import highlight from 'highlight.js/lib'
 import 'highlight.js/lib/languages/javascript'
 import 'highlight.js/lib/languages/scss'

docs/js/sections/api.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Text from '../components/text'
 import Link from '../components/link'
 import Code, { SYNTAX } from '../components/code'

docs/js/sections/examples.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import TimeKeeper from '@tk'
 
 import Text from '../components/text'

docs/js/sections/installation.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Link from '../components/link'
 import Text from '../components/text'
 import Code, { SYNTAX } from '../components/code'
@@ -19,13 +17,15 @@ export default function Intro() {
 				<Link href="https://reactjs.org/blog/2019/02/06/react-v16.8.0.html">
 					react hooks (v16.8)
 				</Link>
-				. If you're using an older version of react, install timekeeper v1 via:
+				. If you&apos;re using an older version of react, install timekeeper v1
+				via:
 			</Text>
 			<Code>npm install --save react-timekeeper@^1.0.0</Code>
 
 			<Text>
-				Usage is simple: just import the library javascript and use it in the render
-				function. No external css imports are required since all styles are inlined using{' '}
+				Usage is simple: just import the library javascript and use it in the
+				render function. No external css imports are required since all styles are
+				inlined using{' '}
 				<Link href="https://github.com/emotion-js/emotion">emotion</Link>.
 			</Text>
 

docs/js/sections/intro.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import { useState, useCallback } from 'react'
 import Timekeeper from '@tk'
 
 import { Github, Plug } from '../components/icons'
@@ -17,7 +17,7 @@ export default function Intro() {
 		return dateString
 	})
 
-	const updateTime = useCallback((t) => {
+	const updateTime = useCallback(t => {
 		setTime(t.formatted12)
 	}, [])
 
@@ -55,7 +55,9 @@ export default function Intro() {
 				</div>
 				<span onClick={() => setVisibility(true)} className="selected-demo-time">
 					The time is currently <strong>{time}</strong>
-					{!isVisible && <span className="selected-demo-time__hint">Click to open</span>}
+					{!isVisible && (
+						<span className="selected-demo-time__hint">Click to open</span>
+					)}
 				</span>
 			</div>
 		</section>

docs/js/sections/other.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Text from '../components/text'
 import Link from '../components/link'
 import Code, { SYNTAX } from '../components/code'

package.json

@@ -22,12 +22,15 @@
   "author": "Catalin Covic <catalin.covic@gmail.com>",
   "license": "MIT",
   "scripts": {
+    "install-all": "yarn install && yarn add -P react react-dom",
     "docs:dev": "node ./bin/dev.js",
     "docs:build": "node ./bin/build.js",
     "_clean": "rimraf lib && mkdir lib",
-    "_build": "NODE_ENV=production babel src --extensions '.tsx' --extensions '.ts' -d lib",
-    "_types": "NODE_ENV=production tsc --emitDeclarationOnly -d --outDir lib --esModuleInterop --jsx react src/index.ts",
+    "_build": "NODE_ENV=production babel src --extensions '.tsx' --extensions '.ts' -d lib --ignore '**/__tests__/'",
+    "_types": "NODE_ENV=production tsc --emitDeclarationOnly -d --outDir lib --esModuleInterop --jsx react-jsx src/index.ts",
     "lib": " npm run _clean && npm run _build & npm run _types",
+    "eslint": "eslint src/ docs/",
+    "ts:compile": "tsc --noEmit -p tsconfig.json",
     "tests:watch": "NODE_ENV=test jest --watch",
     "tests": "NODE_ENV=test jest"
   },
@@ -38,7 +41,8 @@
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.16.5",
-    "@emotion/babel-preset-css-prop": "^10.0.14",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/eslint-plugin": "^11.7.0",
     "@hot-loader/react-dom": "^16.13.0",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^24.0.15",
@@ -79,7 +83,7 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
+    "@emotion/react": "^11.7.1",
     "lodash.debounce": "^4.0.8",
     "react-spring": "^9.3.3"
   },

src/components/Clock.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useTransition } from 'react-spring'
-import { jsx } from '@emotion/core'
 
 import ClockHand from './ClockHand'
 import { HourNumbers, MinuteNumbers } from './Numbers'

src/components/ClockHand.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { animated, useSpring } from 'react-spring'
 
 import { Time } from '../helpers/types'

src/components/ClockWrapper.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, useRef } from 'react'
-import { jsx } from '@emotion/core'
+import { useCallback, useRef } from 'react'
 
 import useConfig from '../hooks/useConfigContext'
 import Clock from './Clock'

src/components/DoneButton.tsx

@@ -1,6 +1,3 @@
-import React from 'react'
-import { jsx } from '@emotion/core'
-
 import useConfig from '../hooks/useConfigContext'
 import style from './styles/done-button'
 import useTimekeeperState from '../hooks/useStateContext'

src/components/Meridiems.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback } from 'react'
-import { jsx } from '@emotion/core'
+import { useCallback } from 'react'
 
 import { meridiemWrapper, meridiem } from './styles/meridiems'
 import useTimekeeperState from '../hooks/useStateContext'

src/components/Numbers.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import { animated, SpringValue } from 'react-spring'
 import DisabledTimeRange from '../helpers/disable-time'
 

src/components/TimeDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, MutableRefObject, useMemo } from 'react'
+import { useCallback, useEffect, useRef, MutableRefObject, useMemo } from 'react'
 
 import * as styles from './styles/time-dropdown'
 import useConfig from '../hooks/useConfigContext'

src/components/TimeKeeper.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { Global, css, jsx } from '@emotion/core'
+import { Global, css } from '@emotion/react'
 
 import globalStyle from './styles/global'
 import style from './styles/main'

src/components/TimeKeeperContainer.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import TimeKeeper from './TimeKeeper'
 import { ConfigProvider, ConfigProps } from '../hooks/useConfigContext'
 import { StateProvider } from '../hooks/useStateContext'

src/components/TopBar.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react'
-import { jsx } from '@emotion/core'
+import { useState } from 'react'
 
 import TimeDropdown from './TimeDropdown'
 import useTimekeeperState from '../hooks/useStateContext'

src/components/__tests__/ClockWrapper.test.tsx

@@ -1,4 +1,4 @@
-import { act, RenderResult } from '@testing-library/react'
+import { RenderResult } from '@testing-library/react'
 import { renderTK, mockAnimations, clickOnPoint } from './helpers/dom'
 import {
 	HOUR_12_INNER,

src/components/__tests__/Timekeeper.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { fireEvent } from '@testing-library/react'
 import { renderTK, mockAnimations, changeToMinutes } from './helpers/dom'
 

src/components/__tests__/helpers/dom.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, fireEvent, RenderResult, act } from '@testing-library/react'
 import TimeKeeper, { Props as TimekeeperProps } from '../../TimeKeeperContainer'
 import { Coords } from './coords'

src/components/styles/clock-hand.ts

@@ -1,4 +1,4 @@
-import { css, jsx } from '@emotion/core'
+import { css } from '@emotion/react'
 
 const CLOCK_HAND_ARM = '#bceaff'
 const CLOCK_HAND_CIRCLE_BACKGROUND = '#e6f7ff'

src/components/styles/clock-wrapper.ts

@@ -1,4 +1,4 @@
-import { css, jsx } from '@emotion/core'
+import { css } from '@emotion/react'
 import { CLOCK_WRAPPER_BACKGROUND } from './constants'
 
 const style = css`

src/components/styles/clock.ts

@@ -1,4 +1,4 @@
-import { css, jsx } from '@emotion/core'
+import { css } from '@emotion/react'
 import { CLOCK_SIZE } from '../../helpers/constants'
 
 const styles = css`

src/components/styles/done-button.ts

@@ -1,4 +1,4 @@
-import { css, jsx } from '@emotion/core'
+import { css } from '@emotion/react'
 import { CLOCK_WRAPPER_BACKGROUND } from './constants'
 
 export const DONE_BUTTON_COLOR = '#686868'

src/components/styles/main.ts

@@ -1,4 +1,4 @@
-import { css, jsx } from '@emotion/core'
+import { css } from '@emotion/react'
 import { CLOCK_RADIUS } from '../../helpers/constants'
 
 const CLOCK_WIDTH_PADDING = 20

src/components/styles/meridiems.ts

@@ -1,4 +1,4 @@
-import { css, jsx } from '@emotion/core'
+import { css } from '@emotion/react'
 
 const CLOCK_WRAPPER_MERIDIEM_COLOR = '#898989'
 const CLOCK_WRAPPER_MERIDIEM_BACKGROUND_COLOR_SELECTED = '#E1EFF6'