feat: stitches

ricardocasares · Mar 20, 2021 · edbb8a1 · edbb8a1
1 parent 5d6c9cc
commit edbb8a1
Show file tree

Hide file tree

Showing 39 changed files with 521 additions and 811 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Supercharged radio!
 
 - [React](https://reactjs.org/)
 - [Next.js](https://nextjs.org/)
-- [Emotion](http://emotion.sh/)
+- [Stitches](http://stitches.dev/)
 - [GenQL](https://genql.now.sh/)
 - [Testcafe](https://devexpress.github.io/testcafe/)
 

diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/logo.svg b/assets/logo.svg
diff --git a/package.json b/package.json
@@ -11,12 +11,11 @@
     "postinstall": "yarn generate"
   },
   "dependencies": {
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
     "@geist-ui/react-icons": "^1.0.0",
     "@genql/runtime": "2.5.0",
     "@next/plugin-google-analytics": "^10.0.6",
     "@next/plugin-sentry": "ricardocasares/next-plugin-sentry",
+    "@stitches/react": "0.1.0-canary.20",
     "@vercel/fetch": "^6.1.0",
     "apollo-server-micro": "^2.21.2",
     "debounce": "^1.2.1",

diff --git a/src/components/AutoGrid/index.ts b/src/components/AutoGrid/index.ts
@@ -1,13 +1,8 @@
-import styled from "@emotion/styled";
+import { styled } from "@/css";
 import { Box } from "@/components/Box";
 
-export type AutoGrid = Box & {
-  min?: string;
-  max?: string;
-};
-
-export const AutoGrid = styled(Box)<AutoGrid>`
-  display: grid;
-  grid-template-columns: ${({ min = "200px", max = "1fr" }) =>
-    `repeat(auto-fit, minmax(${min}, ${max}))`};
-`;
+export const AutoGrid = styled(Box, {
+  display: "grid",
+  gap: "10px",
+  gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+});
diff --git a/src/components/Box/index.ts b/src/components/Box/index.ts
@@ -1,24 +1,3 @@
-import {
-  grid,
-  GridProps,
-  margin,
-  MarginProps,
-  padding,
-  PaddingProps,
-  background,
-  BackgroundProps,
-  border,
-  BorderProps,
-  compose,
-} from "styled-system";
-import styled from "@emotion/styled";
+import { styled } from "@/css";
 
-export type Box = { as?: string } & GridProps &
-  MarginProps &
-  PaddingProps &
-  BackgroundProps &
-  BorderProps;
-
-export const Box = styled.div<Box>(
-  compose(grid, margin, padding, background, border)
-);
+export const Box = styled.div({});
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
@@ -1,14 +1,14 @@
-import styled from "@emotion/styled";
+import { styled } from "@/css";
 
-export const GhostButton = styled.button`
-  text-align: left;
-  border: none;
-  background: transparent;
-  color: var(--foreground);
-  padding: 0;
-  margin: 0;
-  line-height: 0;
-  display: block;
-  width: 100%;
-  font-size: var(--sz4);
-`;
+export const GhostButton = styled.button({
+  textAlign: "left",
+  border: "none",
+  background: "transparent",
+  color: "$foreground",
+  padding: "0",
+  margin: "0",
+  lineHeight: 0,
+  display: "block",
+  width: "100%",
+  fontSize: "16px",
+});
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -1,7 +1,9 @@
 import { FC, memo } from "react";
-import { PlayCircle } from "@geist-ui/react-icons";
+import PlayCircle from "@geist-ui/react-icons/playCircle";
+import { Box } from "@/components/Box";
 import { HeartToggle } from "@/components/Toggles";
-import { Container, Cover, Button, Title, Subtitle, Body } from "./style";
+import { Cover, Button, Title, Subtitle, Body } from "./style";
+import { truncate } from "@/css/utils";
 
 const DEFAULT_SUBTITLE = "Global";
 
@@ -17,16 +19,16 @@ export interface Card {
 
 export const Card: FC<Card> = memo(
   ({ hash, title, subtitle, onPlay, onFaved, onUnFaved, isFaved }) => (
-    <Container data-test-card={hash}>
+    <Box data-test-card={hash}>
       <Cover hash={hash}>
         <Button onClick={onPlay} aria-label={`Play ${title}`}>
           <PlayCircle size={64} />
         </Button>
       </Cover>
       <Body>
-        <div style={{ display: "grid" }}>
-          <Title>{title}</Title>
-          <Subtitle>{subtitle || DEFAULT_SUBTITLE}</Subtitle>
+        <div style={{ display: "grid", gridGap: '5px' }}>
+          <Title className={truncate.className}>{title}</Title>
+          <Subtitle className={truncate.className}>{subtitle || DEFAULT_SUBTITLE}</Subtitle>
         </div>
         <Button
           aria-label={`Add ${title} to favorites`}
@@ -36,6 +38,6 @@ export const Card: FC<Card> = memo(
           <HeartToggle active={isFaved} />
         </Button>
       </Body>
-    </Container>
+    </Box>
   )
 );
diff --git a/src/components/Card/style.ts b/src/components/Card/style.ts
@@ -1,54 +1,45 @@
-import styled from "@emotion/styled";
+import { styled } from "@/css";
 import { truncate } from "@/css/utils";
 import { Gradient } from "@/components/Gradient";
 
-export const Container = styled.div`
-  border-radius: var(--sz1);
-`;
+export const Cover = styled(Gradient, {
+  display: "grid",
+  placeItems: "center",
+  borderRadius: "$1 $1 0 0",
+});
 
-export interface Cover {
-  hash: string;
-}
+export const Title = styled.h2({
+  fontSize: "$2",
+  fontWeight: 500,
+  margin: "0",
+  marginBottom: "$1",
+  color: "fg",
+  ...truncate,
+});
 
-export const Cover = styled(Gradient)`
-  display: grid;
-  place-items: center;
-  border-radius: var(--sz2) var(--sz2) 0 0;
-`;
+export const Subtitle = styled.h3({
+  fontSize: "$1",
+  fontWeight: 400,
+  textTransform: "uppercase",
+  color: "$accents-4",
+  margin: "0",
+});
 
-export const Title = styled.h3`
-  font-size: var(--sz4);
-  font-weight: 500;
-  margin: 0;
-  margin-bottom: var(--sz1);
-  color: var(--accents-7);
-  ${truncate}
-`;
+export const Body = styled.div({
+  padding: "$3",
+  border: "1px solid $accents-2",
+  borderTop: "0",
+  borderRadius: "0 0 $1 $1",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: "10px",
+  alignItems: "center",
+});
 
-export const Subtitle = styled.h4`
-  font-size: var(--sz3);
-  font-weight: 300;
-  text-transform: uppercase;
-  color: var(--accents-4);
-  margin: 0;
-  ${truncate}
-`;
-
-export const Body = styled.div`
-  padding: var(--sz3);
-  border: 1px solid var(--accents-2);
-  border-top: 0;
-  border-radius: 0 0 var(--sz2) var(--sz2);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-gap: 10px;
-  align-items: center;
-`;
-
-export const Button = styled.button`
-  color: var(--background);
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-`;
+export const Button = styled.button({
+  color: "$background",
+  margin: "0",
+  padding: "0",
+  border: "none",
+  background: "transparent",
+});
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,6 +1,8 @@
 import Link from "next/link";
 import { Logo } from "@/components/Logo";
-import { HeartFill, Search, Sliders } from "@geist-ui/react-icons";
+import Search from "@geist-ui/react-icons/search";
+import Sliders from "@geist-ui/react-icons/sliders";
+import HeartFill from "@geist-ui/react-icons/heartFill";
 import { Container, Navigation, Hidden } from "./style";
 
 export const Header = () => (
@@ -21,7 +23,7 @@ export const Header = () => (
       </Link>
       <Link href="/favorites">
         <a>
-          <HeartFill color="var(--highlight-magenta)" aria-hidden="true" />
+          <HeartFill color="var(--colors-highlight-magenta)" aria-hidden="true" />
           <Hidden>Favorites</Hidden>
         </a>
       </Link>

diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts
@@ -1,26 +1,24 @@
-import styled from "@emotion/styled";
+import { styled } from "@/css";
 import { hidden } from "@/css/utils";
 
-export const Container = styled.header`
-  display: grid;
-  padding: var(--sz3) var(--sz4);
-  grid-gap: var(--sz4);
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  border-bottom: 1px solid var(--accents-2);
-`;
+export const Container = styled.header({
+  display: "grid",
+  padding: "$3 $4",
+  gridTemplateColumns: "auto 1fr",
+  alignItems: "center",
+  borderBottom: "1px solid $accents-2",
+});
 
-export const Navigation = styled.nav`
-  display: grid;
-  grid-gap: var(--sz3);
-  grid-auto-flow: column;
-  justify-content: right;
-  align-items: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-`;
+export const Navigation = styled.nav({
+  display: "grid",
+  gridGap: "$3",
+  gridAutoFlow: "column",
+  justifyContent: "right",
+  alignItems: "center",
+  listStyle: "none",
+  margin: "0",
+  padding: "0",
+});
 
-export const Hidden = styled.span`
-  ${hidden}
-`;
+//@ts-ignore
+export const Hidden = styled.span(hidden);
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -1,9 +1,9 @@
-import styled from "@emotion/styled";
+import { styled } from "@/css";
 
-export const Layout = styled.div`
-  width: 100%;
-  height: 100%;
-  display: grid;
-  position: fixed;
-  grid-template-rows: auto 1fr auto;
-`;
+export const Layout = styled.div({
+  width: "100%",
+  height: "100%",
+  display: "grid",
+  position: "fixed",
+  gridTemplateRows: "auto 1fr auto"
+});
diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx
@@ -22,7 +22,7 @@ export const Logo = () => {
         cy="12"
         r="2"
         style={{
-          stroke: "var(--accents-4)",
+          stroke: "var(--colors-accents-4)",
           transform: `scale(${opacity})`,
           transformOrigin: "center",
           willChange: "transform, stroke",
@@ -32,7 +32,7 @@ export const Logo = () => {
         d="M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14"
         style={{
           opacity,
-          stroke: "var(--success)",
+          stroke: "var(--colors-active)",
           willChange: "opacity",
         }}
       />

diff --git a/src/components/Placeholder/index.tsx b/src/components/Placeholder/index.tsx
@@ -5,7 +5,7 @@ import { CardSkeleton } from '@/components/Skeleton';
 export type Placeholder = { count?: number; };
 
 export const Placeholder: FC<Placeholder> = ({ count = 10 }) => (
-  <AutoGrid gridGap={[20]}>
-    {Array(count).fill(null).map((i) => <CardSkeleton key={`${i}-skeleton`} />)}
+  <AutoGrid>
+    {Array(count).fill(null).map((_, i) => <CardSkeleton key={`skeleton-${i}`} />)}
   </AutoGrid>
 );
diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx
@@ -1,4 +1,7 @@
-import { Play, Pause, Square, AlertCircle } from "@geist-ui/react-icons";
+import Play from "@geist-ui/react-icons/play";
+import Pause from "@geist-ui/react-icons/pause";
+import Square from "@geist-ui/react-icons/square";
+import AlertCircle from "@geist-ui/react-icons/alertCircle";
 import { LineSkeleton } from "@/components/Skeleton";
 import { Container, Controls, Title, ErrorNotification, Button } from "./style";
 import { usePlayer } from "@/lib/hooks/usePlayer";