refactor: styled-components -> emotion migration

ssi02014 · ssi02014 · commit a7243f1942ec · 2023-07-08T01:27:09.000+09:00
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@
 <p align="center">
   <img src="https://img.shields.io/badge/typescript-blue">
   <img src="https://img.shields.io/badge/react-blue">
-  <img src="https://img.shields.io/badge/styled--components-green">
+  <img src="https://img.shields.io/badge/@emotion-green">
   <img src="https://img.shields.io/badge/react--color--palette-important">
   <img src="https://img.shields.io/badge/storybook-ff69b4">
 </p>
diff --git a/babel.config.js b/babel.config.js
@@ -4,5 +4,5 @@ module.exports = {
     '@babel/preset-typescript',
     '@babel/preset-react',
   ],
-  plugins: ['babel-plugin-styled-components'],
+  plugins: ['@emotion/babel-plugin'],
 };
diff --git a/package.json b/package.json
@@ -26,6 +26,9 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.0",
@@ -44,7 +47,6 @@
     "@types/node": "^20.2.5",
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.2.4",
-    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "core-js": "^3.29.1",
@@ -63,7 +65,6 @@
     "rollup": "^3.23.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^7.0.18",
-    "styled-components": "^5.3.6",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^5.1.3"
   },
diff --git a/src/components/Accordion/styled.tsx b/src/components/Accordion/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const AccordionWrapper = styled.div`
   margin: 0 auto;
diff --git a/src/components/Canvas/styled.tsx b/src/components/Canvas/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const CanvasWrapper = styled.div`
   display: flex;
diff --git a/src/components/ColorPicker/styled.tsx b/src/components/ColorPicker/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const ColorPickerWrapper = styled.div`
   position: relative;
diff --git a/src/components/Icon/styled.tsx b/src/components/Icon/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const IconButton = styled.button<{
   isOpenColorPicker?: boolean;
diff --git a/src/components/Inputs/FileInput/styled.tsx b/src/components/Inputs/FileInput/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const FileInputWrapper = styled.div`
   background: #fff;
diff --git a/src/components/Inputs/RangeInput/styled.tsx b/src/components/Inputs/RangeInput/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const RangeInputWrapper = styled.div`
   display: flex;
diff --git a/src/components/Inputs/TextInput/styled.tsx b/src/components/Inputs/TextInput/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 // TG Input
 export const TextInputWrapper = styled.div<{ width: number | string }>`
diff --git a/src/components/Layout/styled.tsx b/src/components/Layout/styled.tsx
@@ -1,5 +1,5 @@
 import { getModalPosition } from '@utils/style';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const HeaderWrapper = styled.div`
   display: flex;
diff --git a/src/components/Select/styled.tsx b/src/components/Select/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 // TG Select
 export const SelectWrapper = styled.div`
diff --git a/src/components/TG.styled.ts b/src/components/TG.styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { getIconPosition } from '@utils/style';
 
 export const TGOpenButton = styled.button<{
diff --git a/src/components/TG.tsx b/src/components/TG.tsx
@@ -159,8 +159,8 @@ const TG = ({
   const handleChangeRange = (e: ChangeEvent<HTMLInputElement>) => {
     const regex = /[^0-9]/g;
     const { name, value } = e.target;
-    const min = name === 'angle' ? -360 : defaultLineHeight * -5;
-    const max = name === 'angle' ? 360 : defaultLineHeight * 3;
+    const min = name === 'angle' ? -360 : defaultLineHeight * -12;
+    const max = name === 'angle' ? 360 : defaultLineHeight * 10;
     const replacedCallback = getReplaceCallback(name);
     const replacedValue = value.replace(regex, replacedCallback);
 
@@ -234,8 +234,8 @@ const TG = ({
               <InputRange
                 label={'Line Height'}
                 name="lineHeight"
-                min={defaultLineHeight * -5}
-                max={defaultLineHeight * 3}
+                min={defaultLineHeight * -12}
+                max={defaultLineHeight * 10}
                 value={canvasState.lineHeight}
                 onChange={handleChangeRange}
               />
diff --git a/src/lib/ThumbnailGenerator.tsx b/src/lib/ThumbnailGenerator.tsx
@@ -34,26 +34,24 @@ const ThumbnailGenerator = ({
   };
 
   return (
-    <>
-      <Portal>
-        {isOpen ? (
-          <TG
-            isFullWidth={isFullWidth}
-            modalPosition={modalPosition}
-            additionalFontFamily={additionalFontFamily}
-            onToggle={onToggleGenerator}
-          />
-        ) : (
-          <TGOpenButton iconPosition={iconPosition} onClick={onToggleGenerator}>
-            {buttonIcon ? (
-              buttonIcon
-            ) : (
-              <Icon src={toggleButton} width={tgIconSize} height={tgIconSize} />
-            )}
-          </TGOpenButton>
-        )}
-      </Portal>
-    </>
+    <Portal>
+      {isOpen ? (
+        <TG
+          isFullWidth={isFullWidth}
+          modalPosition={modalPosition}
+          additionalFontFamily={additionalFontFamily}
+          onToggle={onToggleGenerator}
+        />
+      ) : (
+        <TGOpenButton iconPosition={iconPosition} onClick={onToggleGenerator}>
+          {buttonIcon ? (
+            buttonIcon
+          ) : (
+            <Icon src={toggleButton} width={tgIconSize} height={tgIconSize} />
+          )}
+        </TGOpenButton>
+      )}
+    </Portal>
   );
 };
 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import styled from 'styled-components';`
	`1`	`+import styled from '@emotion/styled';`
`2`	`2`
`3`	`3`	export const AccordionWrapper = styled.div`
`4`	`4`	`margin: 0 auto;`