refactor: change styled-components to emotion

.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}

components/ColorCard.tsx

@@ -1,12 +1,32 @@
-import styled from "styled-components";
 import { useState } from "react";
 import { calcComplementaryColor } from "@nmsn/color-utils";
 
-const Card = ({ className, children }) => {
+const Card = ({
+  children,
+  width,
+  height,
+  color,
+  borderColor,
+}: {
+  children: any;
+  width: number;
+  height: number;
+  color: string;
+  borderColor?: string;
+}) => {
   const [visible, setVisible] = useState(false);
   return (
     <div
-      className={className}
+      css={{
+        width: width ?? "100%",
+        height: height ?? "100%",
+        backgroundColor: color,
+        border: borderColor ? `1px solid ${borderColor}` : undefined,
+        borderRadius: 4,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
       onMouseEnter={() => setVisible(true)}
       onMouseLeave={() => setVisible(false)}
     >
@@ -15,21 +35,9 @@ const Card = ({ className, children }) => {
   );
 };
 
-const StyledCard = styled(Card)`
-  width: ${(props) => `${props?.width || 0}px` || "100%"};
-  height: ${(props) => `${props?.height || 0}px` || "100%"};
-  background-color: ${(props) => props.color};
-  border: ${(props) =>
-    `${props?.borderColor ? `1px solid ${props?.borderColor}` : ""}`};
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const StyledCardText = styled.div`
-  color: ${(props) => `${props?.color}`};
-`;
+const CardText = ({ children, color }: { children: any; color: string }) => (
+  <div css={{ color }}>{children}</div>
+);
 
 type ColorCardProps = {
   color: string;
@@ -42,9 +50,9 @@ const ColorCard = ({ color, width, height }: ColorCardProps) => {
   const complementaryColor = calcComplementaryColor(color, "rgb");
 
   return (
-    <StyledCard color={color} width={width} height={height}>
-      <StyledCardText color={complementaryColor}>{color}</StyledCardText>
-    </StyledCard>
+    <Card color={color} width={width} height={height}>
+      <CardText color={complementaryColor}>{color}</CardText>
+    </Card>
   );
 };
 

components/ColorPickerGroup.tsx

@@ -1,18 +1,11 @@
 import { useState } from "react";
-import styled from "styled-components";
 
-import ColorPicker, { DEFAULT_RGBA } from "./ColorPicker";
+import ColorPicker from "./ColorPicker";
 import Space from "./Space";
 
 type ColorPickerType = React.ComponentProps<typeof ColorPicker>;
 type ColorValue = Parameters<ColorPickerType["onChange"]>[0];
 
-const StyleColorPickerGroup = styled.div`
-  display: flex;
-  /* justify-content: space-between; */
-  width: 100%;
-`;
-
 const ColorPickerGroup = ({
   sum = 2,
   onChange,
@@ -32,7 +25,12 @@ const ColorPickerGroup = ({
   };
 
   return (
-    <StyleColorPickerGroup>
+    <div
+      css={{
+        display: "flex",
+        width: "100%",
+      }}
+    >
       <Space distance={20}>
         {Array(sum)
           .fill(undefined)
@@ -43,7 +41,7 @@ const ColorPickerGroup = ({
             />
           ))}
       </Space>
-    </StyleColorPickerGroup>
+    </div>
   );
 };
 

components/Layout.tsx

@@ -1,14 +1,16 @@
-import styled from "styled-components";
-
-const StyledLayout = styled.div`
-  width: 800px;
-  margin: auto;
-  display: flex;
-  padding-top: 150px;
-`;
-
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <StyledLayout>{children}</StyledLayout>;
+  return (
+    <div
+      css={{
+        width: 800,
+        margin: "auto",
+        display: "flex",
+        paddingTop: 150,
+      }}
+    >
+      {children}
+    </div>
+  );
 };
 
 export default Layout;

components/Space.tsx

@@ -1,20 +1,3 @@
-import styled from "styled-components";
-
-const StyleSpace = styled.div`
-  &:not(:last-of-type) {
-    margin-bottom: ${(props) =>
-      props.type === "vertical" ? `${props.distance}px` : 0};
-    margin-right: ${(props) =>
-      props.type === "horizontal" ? `${props.distance}px` : 0};
-  }
-`;
-
-const StyledSpaceContainer = styled.div`
-  display: flex;
-  flex-direction: ${(props) =>
-    props.type === "horizontal" ? "row" : "column"};
-`;
-
 const Space = ({
   children,
   type = "horizontal",
@@ -24,22 +7,16 @@ const Space = ({
   type?: "horizontal" | "vertical";
   distance?: number;
 }) => {
-  if (Array.isArray(children)) {
-    return (
-      <StyledSpaceContainer type={type} distance={distance}>
-        {children?.map((item, index) => (
-          <StyleSpace distance={distance} type={type} key={index}>
-            {item}
-          </StyleSpace>
-        ))}
-      </StyledSpaceContainer>
-    );
-  }
-
   return (
-    <StyledSpaceContainer type={type} distance={distance}>
+    <div
+      css={{
+        display: "flex",
+        flexDirection: type === "horizontal" ? "row" : "column",
+        gap: type === "horizontal" ? `0 ${distance}px` : `${distance}px 0`,
+      }}
+    >
       {children}
-    </StyledSpaceContainer>
+    </div>
   );
 };
 

components/Tabs.tsx

@@ -1,5 +1,4 @@
-import styled from "styled-components";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Space from "./Space";
 import { mix2Color } from "@nmsn/color-utils";
 import { themeColor, themeColor2 } from "../utils/theme";
@@ -10,42 +9,34 @@ type TabType = { label: string; value: TabValue };
 
 const hoverColor = mix2Color([themeColor2, "white"], "hex", [0.8, 0.2]);
 
-const StyledTab = styled.div`
-  padding: 8px 10px;
-  color: white;
-  background-color: ${(props) => (props.isActive ? themeColor : themeColor2)};
-  width: 150px;
-  border-radius: 4px;
-  text-align: right;
-
-  ${(props) =>
-    props.isActive
-      ? ``
-      : `:hover {
-    background-color: ${hoverColor};
-  }`}
-
-  cursor: pointer;
-`;
-
 const Tab = ({
+  children,
   isActive,
-  label,
   value,
   onChange,
 }: {
+  children: React.ReactNode;
   isActive: boolean;
-  label: string;
   value: TabValue;
   onChange: (val: TabValue) => void;
 }) => {
   return (
-    <StyledTab
-      isActive={isActive}
+    <div
+      css={{
+        padding: "8px 10px",
+        color: "white",
+        backgroundColor: isActive ? themeColor : themeColor2,
+        width: 150,
+        borderRadius: 4,
+        textAlign: "right",
+        ":hover": {
+          backgroundColor: isActive ? undefined : hoverColor,
+        },
+      }}
       onClick={!isActive ? () => onChange(value) : null}
     >
-      {label}
-    </StyledTab>
+      {children}
+    </div>
   );
 };
 
@@ -75,11 +66,12 @@ const Tabs = ({
       {tabs.map(({ label, value }) => (
         <Tab
           key={value}
-          label={label}
           value={value}
           isActive={value === curKey}
           onChange={onCurChange}
-        />
+        >
+          {label}
+        </Tab>
       ))}
     </Space>
   );

next.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   experimental: {
     // Enables the styled-components SWC transform
-    styledComponents: true,
+    // styledComponents: true,
   },
 };

package.json

@@ -20,12 +20,14 @@
   },
   "homepage": "https://github.com/nmsn/color-utils-site#readme",
   "dependencies": {
+    "@emotion/css": "^11.10.5",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@nmsn/color-utils": "0.1.0",
     "next": "^12.2.5",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
-    "react-dom": "^18.2.0",
-    "styled-components": "^5.3.5"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "^18.7.9",