chore: migrate to goober

Author: devrnt

playground/app.tsx

@@ -1,8 +1,11 @@
+import { setup } from 'goober';
 import * as React from 'react';
 
 import { WizardModule } from './modules';
 import { Page, Style } from './modules/common';
 
+setup(React.createElement);
+
 const App = () => {
   return (
     <>

playground/components/asyncStep.tsx

@@ -1,5 +1,5 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { useWizard } from '../../dist';
 import { useMockMutation } from '../hooks';
@@ -31,7 +31,7 @@ const Container = styled('div')`
   align-items: center;
 `;
 
-const P = styled.p`
+const P = styled('p')`
   color: white;
 `;
 

playground/components/footer.tsx

@@ -1,18 +1,18 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { useWizard } from '../../dist';
 import { Button } from '../modules/common';
 
-const Actions = styled.div`
+const Actions = styled('div')`
   display: grid;
   justify-content: center;
   margin: 1rem 0;
   grid-template-columns: min-content min-content;
   gap: 1rem;
 `;
 
-const Info = styled.div`
+const Info = styled('div')`
   display: flex;
   justify-content: center;
   gap: 1rem;

playground/components/step.tsx

@@ -1,5 +1,5 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { useWizard } from '../../dist';
 
@@ -20,7 +20,7 @@ const Container = styled('div')`
   align-items: center;
 `;
 
-const P = styled.p`
+const P = styled('p')`
   color: white;
 `;
 

playground/components/tooltip.tsx

@@ -1,11 +1,11 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 type Props = {
   label: string;
 };
 
-const Container = styled.div<Props>`
+const Container = styled('div')<Props>`
   position: relative;
   height: 100%;
   width: 100%;

playground/index.tsx

@@ -1,4 +1,5 @@
 import 'react-app-polyfill/ie11';
+import './normalize.css';
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';

playground/modules/common/button.tsx

@@ -1,12 +1,12 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 type Props = {
   label: string;
   disabled: boolean;
 } & React.HTMLAttributes<HTMLButtonElement>;
 
-const Container = styled.button`
+const Container = styled('button')`
   width: fit-content;
   min-width: 8rem;
   border: 1px solid var(--purple);

playground/modules/common/page.tsx

@@ -1,5 +1,5 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import githubLogoPath from '../../assets/images/githubLogo.svg';
 import logoPath from '../../assets/images/logo.svg';
@@ -10,34 +10,34 @@ type Props = {
   children: React.ReactNode;
 };
 
-const Container = styled.main`
+const Container = styled('main')`
   display: flex;
   justify-content: center;
   background: var(--dark);
 `;
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
   width: 100%;
 `;
 
-const Body = styled.div`
+const Body = styled('div')`
   margin-top: 2rem;
 `;
 
-const Description = styled.div`
+const Description = styled('div')`
   font-size: 1.1rem;
   font-weight: 200;
 `;
 
-const Divider = styled.div`
+const Divider = styled('div')`
   height: 2px;
   width: 7%;
   background-image: linear-gradient(48.66deg, var(--purple), var(--blue));
   margin: 2.5rem 0;
   display: flex;
 `;
 
-const TopBar = styled.header`
+const TopBar = styled('header')`
   position: sticky;
   top: 0;
   left: 0;
@@ -52,12 +52,12 @@ const TopBar = styled.header`
   z-index: 1000;
 `;
 
-const Logo = styled.img`
+const Logo = styled('img')`
   height: 3rem;
   width: 3rem;
 `;
 
-const GithubLogo = styled.img`
+const GithubLogo = styled('img')`
   width: 2rem;
 `;
 

playground/modules/common/style.tsx

@@ -1,8 +1,8 @@
+// @ts-ignore
+import { createGlobalStyles } from 'goober/global';
 import * as React from 'react';
-import { createGlobalStyle } from 'styled-components';
-import { Normalize } from 'styled-normalize';
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyles`
   :root {
     --light: #0b002b;
     --nav: rgba(3, 0, 12, 0.5);
@@ -50,7 +50,6 @@ const GlobalStyle = createGlobalStyle`
 
 const Style = () => (
   <>
-    <Normalize />
     <GlobalStyle />
   </>
 );

playground/modules/wizard/wizard.tsx

@@ -1,10 +1,10 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { Wizard } from '../../../dist';
 import { AnimatedStep, AsyncStep, Footer, Step } from '../../components';
 
-const Grid = styled.div`
+const Grid = styled('section')`
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   width: 100%;
@@ -21,7 +21,7 @@ const Title = styled('h2')`
   }
 `;
 
-const Item = styled.div`
+const Item = styled('div')`
   display: grid;
   grid-template-rows: min-content;