switch to stitches from plain css (#341)

Author: Dhaiwat10

packages/components/package.json

@@ -38,12 +38,13 @@
     "@chakra-ui/react": "^1.7.2",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@stitches/react": "^1.2.8",
     "framer-motion": "^4"
   },
   "peerDependencies": {
+    "ethers": "^5.5.2",
     "react": ">= 16.8.0 | >= 17.0.0",
-    "react-dom": ">= 16.8.0 | >= 17.0.0",
-    "ethers": "^5.5.2"
+    "react-dom": ">= 16.8.0 | >= 17.0.0"
   },
   "devDependencies": {
     "@web3-ui/hooks": "^0.12.0",

packages/components/src/components/Address/Address.css

@@ -1,7 +1,7 @@
 import { CopyIcon, CheckIcon } from '@chakra-ui/icons';
 import React, { useState, useEffect } from 'react';
 import { ethers } from 'ethers';
-import './Address.css';
+import { styled } from '@stitches/react';
 
 export interface AddressProps {
   /**
@@ -30,6 +30,17 @@ export interface AddressProps {
   className?: string;
 }
 
+const Container = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+});
+
+const ErrorMessage = styled('p', {
+  color: 'red',
+  marginTop: '4px',
+});
+
 /**
  * A component to display an address
  */
@@ -98,7 +109,7 @@ export const Address: React.FC<AddressProps> = ({
 
   return (
     <>
-      <div
+      <Container
         data-testid="address-container"
         className={`Web3UI_Address__Container ${className}`}
         style={{ cursor: copiable ? 'pointer' : 'initial' }}
@@ -110,8 +121,8 @@ export const Address: React.FC<AddressProps> = ({
         ) : (
           <CopyIcon marginLeft="auto" color="gray.300" />
         )}
-      </div>
-      <p className="Web3UI_Address__Error">{error}</p>
+      </Container>
+      <ErrorMessage className="Web3UI_Address__Error">{error}</ErrorMessage>
     </>
   );
 };

packages/components/src/components/Address/Address.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { ethers } from 'ethers';
 import { useDebounce } from './useDebounce';
 import { JsonRpcSigner } from '@ethersproject/providers';
-import './AddressInput.css';
+import { styled } from '@stitches/react';
 
 export interface AddressInputProps {
   /**
@@ -31,6 +31,25 @@ export interface AddressInputProps {
   inputClassName?: string;
 }
 
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const Label = styled('label', {});
+
+const Input = styled('input', {
+  marginTop: '4px',
+  padding: '8px',
+  borderRadius: '7px',
+  border: '1px solid #ccc',
+});
+
+const ErrorMessage = styled('p', {
+  color: 'red',
+  marginTop: '4px',
+});
+
 /**
  * A text input component that is used to get ETH addresses. ENS support included. You can also pass all the styling props of the Chakra UI Input component.
  */
@@ -90,15 +109,20 @@ export const AddressInput: React.FC<
   }, [inputValue]);
 
   return (
-    <div className={`Web3UI_AddressInput__Container ${className}`}>
-      {label && <label className="Web3UI_AddressInput__Label">{label}</label>}
-      <input
+    <Container className={`Web3UI_AddressInput__Container ${className}`}>
+      {label && <Label className="Web3UI_AddressInput__Label">{label}</Label>}
+      {/* @ts-expect-error TODO: Fix this type error */}
+      <Input
         className={`Web3UI_AddressInput__Input ${inputClassName}`}
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
         {...props}
       />
-      {error && <p className="Web3UI_AddressInput__ErrorMessage">{error}</p>}
-    </div>
+      {error && (
+        <ErrorMessage className="Web3UI_AddressInput__ErrorMessage">
+          {error}
+        </ErrorMessage>
+      )}
+    </Container>
   );
 };

packages/components/src/components/AddressInput/AddressInput.css

@@ -3810,6 +3810,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@stitches/react@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.8.tgz#954f8008be8d9c65c4e58efa0937f32388ce3a38"
+  integrity sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==
+
 "@storybook/addon-actions@6.4.0", "@storybook/addon-actions@^6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.4.0.tgz#118dafe927bc480c1b07b3d1ed8643015190117c"