chore: remove styled-components

pmndrs · Jan 23, 2024 · 4a9f848 · 4a9f848
1 parent 93328aa
commit 4a9f848
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 282 deletions.
diff --git a/example/package.json b/example/package.json
@@ -16,7 +16,6 @@
     "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",
@@ -25,7 +24,6 @@
   },
   "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"

diff --git a/example/src/App.tsx b/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 { Global, Loading, Page, DemoPanel, Dot, Error } from './styles'
+import { Loading, Page, DemoPanel, Dot, Error } from './styles'
 
 import * as demos from './demos'
 
@@ -47,17 +47,14 @@ export default function App() {
   const dev = new URLSearchParams(location.search).get('dev')
 
   return (
-    <>
-      <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>
-    </>
+    <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>
   )
 }
diff --git a/example/src/styles.css b/example/src/styles.css
@@ -0,0 +1,139 @@
+* {
+  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%;
+}
+
+.Page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+
+  & > h1 {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 900;
+    font-size: 8em;
+    margin: 0;
+    color: white;
+    line-height: 0.59em;
+    letter-spacing: -2px;
+  }
+
+  & > h1 {
+    position: absolute;
+    top: 70px;
+    left: 60px;
+  }
+
+  & > span {
+    position: absolute;
+    bottom: 60px;
+    right: 60px;
+  }
+
+  @media only screen and (max-width: 1000px) {
+    & > h1 {
+      font-size: 5em;
+      letter-spacing: -1px;
+    }
+  }
+
+  & > a {
+    margin: 0;
+    color: white;
+    text-decoration: none;
+  }
+}
+
+.DemoPanel {
+  z-index: 1000;
+  position: absolute;
+  bottom: 50px;
+  left: 50px;
+  max-width: 250px;
+}
+
+.Dot {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin: 8px;
+}
+
+.LoadingContainer {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: #dedddf;
+  color: white;
+}
+
+.LoadingMessage {
+  font-family: 'Inter', Helvetica, sans-serif;
+}
+
+.StyledError {
+  position: absolute;
+  padding: 10px 20px;
+  bottom: unset;
+  right: unset;
+  top: 60px;
+  left: 60px;
+  max-width: 380px;
+  border: 2px solid #ff5050;
+  color: #ff5050;
+}
diff --git a/example/src/styles.tsx b/example/src/styles.tsx
@@ -1,160 +1,24 @@
 import * as React from 'react'
-import styled, { createGlobalStyle } from 'styled-components'
-import { Link } from 'wouter'
+import { Link, LinkProps } from 'wouter'
+// import '@pmndrs/branding/styles.css'
+import './styles.css'
 
-const Page = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100vh;
+type DivProps = Partial<React.PropsWithChildren<JSX.IntrinsicElements['div']>>
 
-  & > 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 Page = (props: DivProps) => <div {...props} className="Page" />
 
-  & > h1 {
-    position: absolute;
-    top: 70px;
-    left: 60px;
-  }
+export const DemoPanel = (props: DivProps) => <div {...props} className="DemoPanel" />
 
-  & > span {
-    position: absolute;
-    bottom: 60px;
-    right: 60px;
-  }
+export const Dot = (props: LinkProps) => <Link {...props} className="Dot" />
 
-  @media only screen and (max-width: 1000px) {
-    & > h1 {
-      font-size: 5em;
-      letter-spacing: -1px;
-    }
-  }
+const LoadingContainer = (props: DivProps) => <div {...props} className="LoadingContainer" />
 
-  & > a {
-    margin: 0;
-    color: white;
-    text-decoration: none;
-  }
-`
+const LoadingMessage = (props: DivProps) => <div {...props} className="LoadingMessage" />
 
-const Global = createGlobalStyle`
-  @import url('@pmndrs/branding/styles.css');
+export const Loading = () => (
+  <LoadingContainer>
+    <LoadingMessage>Loading.</LoadingMessage>
+  </LoadingContainer>
+)
 
-  * {
-    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 }
+export const Error = (props: DivProps) => <div {...props} className="StyledError" />