feat: use emotion

Author: shiftpsh

.babelrc

@@ -16,14 +16,6 @@
         "publicPath": "./",
         "outputPath": "./dist/assets"
       }
-    ],
-    [
-      "babel-plugin-styled-components",
-      {
-        "namespace": "solvedac-",
-        "displayName": false,
-        "fileName": false
-      }
     ]
   ]
 }

README.md

@@ -11,31 +11,22 @@ Do not use this package in production! Almost every commit will be a breaking ch
 ## Install
 
 ```bash
-yarn add @solved-ac/ui-react styled-components
+yarn add @solved-ac/ui-react @emotion/react @emotion/styled
 ```
 
 or, with npm:
 
 ```bash
-npm install --save @solved-ac/ui-react styled-components
+npm install --save @solved-ac/ui-react @emotion/react @emotion/styled
 ```
 
-### SSR
+## Usage
 
-Setup module alias. Please refer to: https://styled-components.com/docs/faqs#linking-in-an-ssr-scenario
-
-### Next.js
-
-Modify `tsconfig.json` to setup module alias.
-
-```json
-{
-  "compilerOptions": {
-    "paths": {
-      "styled-components": ["./node_modules/styled-components"]
-    }
-  }
-}
+```jsx
+<ThemeProvider theme={solvedThemes.light}>
+  <SolvedGlobalStyles />
+  <Component />
+</ThemeProvider>
 ```
 
 ## Contribute

example/.storybook/main.js

@@ -1,3 +1,7 @@
+const path = require('path')
+
+const toPath = (_path) => path.join(process.cwd(), _path)
+
 module.exports = {
   core: {
     builder: 'webpack5',
@@ -8,7 +12,18 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     // '@storybook/preset-create-react-app',
-    'storybook-addon-styled-component-theme/dist/preset',
   ],
+  webpackFinal: async (config) => ({
+    ...config,
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        '@emotion/core': toPath('node_modules/@emotion/react'),
+        '@emotion/styled': toPath('node_modules/@emotion/styled'),
+        'emotion-theming': toPath('node_modules/@emotion/react'),
+      },
+    },
+  }),
   framework: '@storybook/react',
 }

example/.storybook/preview.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import { addDecorator } from '@storybook/react'
-import { withThemesProvider } from 'storybook-addon-styled-component-theme'
-import { ThemeProvider } from 'styled-components'
-import { solvedThemes, SolvedGlobalStyles } from '@solved-ac/ui-react'
+import { SolvedGlobalStyles, solvedThemes } from '@solved-ac/ui-react'
+import { ThemeProvider } from '@emotion/react'
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -16,18 +15,9 @@ export const parameters = {
 
 addDecorator((Story) => {
   return (
-    <>
+    <ThemeProvider theme={solvedThemes.light}>
       <SolvedGlobalStyles />
       <Story />
-    </>
+    </ThemeProvider>
   )
 })
-
-addDecorator(
-  withThemesProvider([
-    solvedThemes.light,
-    solvedThemes.dark,
-    solvedThemes.black,
-  ]),
-  ThemeProvider
-)

example/package.json

@@ -20,11 +20,11 @@
     "@types/node": "link:../node_modules/@types/node",
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
-    "@types/styled-components": "link:../node_modules/@types/styled-components",
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
+    "@emotion/react": "link:../node_modules/@emotion/react",
+    "@emotion/styled": "link:../node_modules/@emotion/styled",
     "react-scripts": "link:../node_modules/react-scripts",
-    "styled-components": "link:../node_modules/styled-components",
     "typescript": "link:../node_modules/typescript"
   },
   "devDependencies": {