Revert "chore: remove styled-components"

This reverts commit 4a9f848.

example/package.json

@@ -16,6 +16,7 @@
     "react-dom": "^18.2.0",
     "react-merge-refs": "^2.1.1",
     "react-use-refs": "^1.0.1",
+    "styled-components": "^6.1.8",
     "three": "^0.160.0",
     "three-stdlib": "^2.29.1",
     "use-error-boundary": "^2.0.6",
@@ -24,6 +25,7 @@
   },
   "devDependencies": {
     "@types/react": "^18.2.47",
+    "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "typescript": "^5.3.3",
     "vite": "^5.0.11"

example/src/App.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useErrorBoundary } from 'use-error-boundary'
 import { Route, useRoute, Redirect } from 'wouter'
 
-import { Loading, Page, DemoPanel, Dot, Error } from './styles'
+import { Global, Loading, Page, DemoPanel, Dot, Error } from './styles'
 
 import * as demos from './demos'
 
@@ -47,14 +47,17 @@ export default function App() {
   const dev = new URLSearchParams(location.search).get('dev')
 
   return (
-    <Page>
-      <React.Suspense fallback={<Loading />}>
-        <Route path="/" children={<Redirect to={`/demo/${DEFAULT_COMPONENT_NAME}`} />} />
-        <Route path="/demo/:name">
-          <Demo />
-        </Route>
-      </React.Suspense>
-      {dev === null && <Dots />}
-    </Page>
+    <>
+      <Global />
+      <Page>
+        <React.Suspense fallback={<Loading />}>
+          <Route path="/" children={<Redirect to={`/demo/${DEFAULT_COMPONENT_NAME}`} />} />
+          <Route path="/demo/:name">
+            <Demo />
+          </Route>
+        </React.Suspense>
+        {dev === null && <Dots />}
+      </Page>
+    </>
   )
 }

example/src/styles.tsx

@@ -1,24 +1,160 @@
 import * as React from 'react'
-import { Link, LinkProps } from 'wouter'
-// import '@pmndrs/branding/styles.css'
-import './styles.css'
+import styled, { createGlobalStyle } from 'styled-components'
+import { Link } from 'wouter'
 
-type DivProps = Partial<React.PropsWithChildren<JSX.IntrinsicElements['div']>>
+const Page = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100vh;
 
-export const Page = (props: DivProps) => <div {...props} className="Page" />
+  & > h1 {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 900;
+    font-size: 8em;
+    margin: 0;
+    color: white;
+    line-height: 0.59em;
+    letter-spacing: -2px;
+  }
 
-export const DemoPanel = (props: DivProps) => <div {...props} className="DemoPanel" />
+  & > h1 {
+    position: absolute;
+    top: 70px;
+    left: 60px;
+  }
 
-export const Dot = (props: LinkProps) => <Link {...props} className="Dot" />
+  & > span {
+    position: absolute;
+    bottom: 60px;
+    right: 60px;
+  }
 
-const LoadingContainer = (props: DivProps) => <div {...props} className="LoadingContainer" />
+  @media only screen and (max-width: 1000px) {
+    & > h1 {
+      font-size: 5em;
+      letter-spacing: -1px;
+    }
+  }
 
-const LoadingMessage = (props: DivProps) => <div {...props} className="LoadingMessage" />
+  & > a {
+    margin: 0;
+    color: white;
+    text-decoration: none;
+  }
+`
 
-export const Loading = () => (
-  <LoadingContainer>
-    <LoadingMessage>Loading.</LoadingMessage>
-  </LoadingContainer>
-)
+const Global = createGlobalStyle`
+  @import url('@pmndrs/branding/styles.css');
 
-export const Error = (props: DivProps) => <div {...props} className="StyledError" />
+  * {
+    box-sizing: border-box;
+  }
+
+  html,
+  body,
+  #root {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    overflow: hidden;
+  }
+
+  #root {
+    overflow: auto;
+  }
+
+  body {
+    position: fixed;
+    overflow: hidden;
+    overscroll-behavior-y: none;
+    font-family: 'Inter var', sans-serif;
+    color: black;
+    background: #dedddf !important;
+  }
+
+  canvas {
+    touch-action: none;
+  }
+
+  .container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .text {
+    line-height: 1em;
+    text-align: left;
+    font-size: 8em;
+    word-break: break-word;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+`
+export const DemoPanel = styled.div`
+  z-index: 1000;
+  position: absolute;
+  bottom: 50px;
+  left: 50px;
+  max-width: 250px;
+`
+
+export const Dot = styled(Link)`
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin: 8px;
+`
+
+const LoadingContainer = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: #dedddf;
+  color: white;
+`
+
+const LoadingMessage = styled.div`
+  font-family: 'Inter', Helvetica, sans-serif;
+`
+
+export const Loading = () => {
+  return (
+    <LoadingContainer>
+      <LoadingMessage>Loading.</LoadingMessage>
+    </LoadingContainer>
+  )
+}
+
+const StyledError = styled.div`
+  position: absolute;
+  padding: 10px 20px;
+  bottom: unset;
+  right: unset;
+  top: 60px;
+  left: 60px;
+  max-width: 380px;
+  border: 2px solid #ff5050;
+  color: #ff5050;
+`
+
+export const Error = ({ children }: React.PropsWithChildren<{}>) => {
+  return <StyledError>{children}</StyledError>
+}
+
+export { Global, Page }