refactor from styled components to goober

agneym · Mar 13, 2021 · 6739d20 · 6739d20
1 parent 4b8eb89
commit 6739d20
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 79 deletions.
diff --git a/playground/src/Draggable/index.tsx b/playground/src/Draggable/index.tsx
@@ -1,14 +1,15 @@
-import React, { FC, ReactNode, useRef, useContext } from "react";
-import styled, { ThemeContext } from "styled-components";
+import React, { FC, ReactNode, useRef } from "react";
+import { styled } from "goober";
 
 import useDrag from "./useDrag";
+import { useTheme } from "../utils/ThemeProvider";
 
-const Container = styled.div`
+const Container = styled('div')`
   display: flex;
   align-items: stretch;
 `;
 
-const Divider = styled.div`
+const Divider = styled('div')`
   width: ${props => props.theme.divider.width}px;
   cursor: col-resize;
   background-color: ${props => props.theme.divider.background};
@@ -23,7 +24,7 @@ interface IProps {
 const Draggable: FC<IProps> = ({ className = "", leftChild, rightChild }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const dividerRef = useRef<HTMLDivElement>(null);
-  const themeContext = useContext(ThemeContext);
+  const themeContext = useTheme();
 
   const { leftWidth, rightWidth } = useDrag({
     containerRef,

diff --git a/playground/src/Editor/EditorSetup.tsx b/playground/src/Editor/EditorSetup.tsx
@@ -2,15 +2,16 @@ import React, { FC, Fragment } from "react";
 import SimpleEditor from "react-simple-code-editor";
 import Highlight, { defaultProps } from "prism-react-renderer";
 import theme from "prism-react-renderer/themes/nightOwl";
-import styled from "styled-components";
+import { styled } from "goober";
 
 import { IEditorTabs } from "../types";
 
-const StyledSimpleEditor = styled(SimpleEditor)`
-  background-color: ${props => props.theme.editor.backgroundColor};
-  color: ${props => props.theme.editor.color};
+const EditorWrapper = styled("div")`
+  display: inline-block;
+  background-color: ${(props) => props.theme.editor.backgroundColor};
+  color: ${(props) => props.theme.editor.color};
   overflow-y: auto !important;
-  font-family: ${props => props.theme.editor.fontFamily};
+  font-family: ${(props) => props.theme.editor.fontFamily};
   font-feature-settings: normal;
 `;
 
@@ -22,32 +23,34 @@ interface IProps {
 
 const EditorSetup: FC<IProps> = ({ code, language, onChange }) => {
   return (
-    <StyledSimpleEditor
-      value={code}
-      onValueChange={(value: string) => onChange(value, language)}
-      style={{ height: "100%" }}
-      highlight={code => (
-        <Highlight
-          {...defaultProps}
-          theme={theme}
-          code={code}
-          language={language}
-        >
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <Fragment>
-              {tokens.map((line, i) => (
-                <div {...getLineProps({ line, key: i })}>
-                  {line.map((token, key) => (
-                    <span {...getTokenProps({ token, key })} />
-                  ))}
-                </div>
-              ))}
-            </Fragment>
-          )}
-        </Highlight>
-      )}
-      padding={10}
-    />
+    <EditorWrapper>
+      <SimpleEditor
+        value={code}
+        onValueChange={(value: string) => onChange(value, language)}
+        style={{ height: "100%" }}
+        highlight={(code) => (
+          <Highlight
+            {...defaultProps}
+            theme={theme}
+            code={code}
+            language={language}
+          >
+            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+              <Fragment>
+                {tokens.map((line, i) => (
+                  <div {...getLineProps({ line, key: i })}>
+                    {line.map((token, key) => (
+                      <span {...getTokenProps({ token, key })} />
+                    ))}
+                  </div>
+                ))}
+              </Fragment>
+            )}
+          </Highlight>
+        )}
+        padding={10}
+      />
+    </EditorWrapper>
   );
 };
 

diff --git a/playground/src/Editor/index.tsx b/playground/src/Editor/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from "react";
-import styled from "styled-components";
+import {styled} from "goober";
 import { IEditorTabs, ISnippet } from "../types";
 import EditorSetup from "./EditorSetup";
 import { ITabConfig } from "../types";

diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx
@@ -19,9 +19,9 @@ const StyledDraggable = styled(Draggable)`
   display: flex;
   min-height: ${(props) => props.theme.container.minHeight};
 
-  ${media.phone`
+  ${media.phone} {
     flex-direction: column;
-  `}
+  }
 `;
 
 interface IProps {

diff --git a/playground/src/Result/Console.tsx b/playground/src/Result/Console.tsx
@@ -1,8 +1,8 @@
 import React, { FC } from "react";
-import styled from "styled-components";
+import { styled } from "goober";
 import Inspector from "@agney/react-inspector";
 
-const Container = styled.div`
+const Container = styled('div')`
   background-color: ${props => props.theme.console.background};
   height: 100%;
 

diff --git a/playground/src/Result/ErrorDisplay.tsx b/playground/src/Result/ErrorDisplay.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from "react";
-import styled from "styled-components";
+import { styled } from "goober";
 
-const Container = styled.div`
+const Container = styled('div')`
   background-color: ${props => props.theme.error.background};
   color: ${props => props.theme.error.color};
   padding: 0.2em 0.5em;

diff --git a/playground/src/Result/Frame.tsx b/playground/src/Result/Frame.tsx
@@ -1,11 +1,11 @@
 import React, { FC, useMemo, useState, memo, useEffect } from "react";
-import styled from "styled-components";
+import {styled} from "goober";
 
 import { ISnippet } from "../types";
 import constructSnippet from "../utils/constructSnippet";
 import ErrorDisplay from "./ErrorDisplay";
 
-const Container = styled.div`
+const Container = styled('div')`
   position: relative;
   height: 100%;
 

diff --git a/playground/src/TabStyles.tsx b/playground/src/TabStyles.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "goober";
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs";
 
 import media from "./utils/media";
@@ -9,9 +9,9 @@ export const StyledTabs = styled(Tabs)`
   width: 50%;
   min-width: ${props => props.theme.container.minWidth};
 
-  ${media.phone`
+  ${media.phone} {
     width: 100%;
-  `}
+  }
 `;
 
 export const StyledTabList = styled(TabList)`
@@ -36,9 +36,9 @@ export const StyledTab = styled(Tab)`
 export const StyledTabPanels = styled(TabPanels)`
   flex: 1;
 
-  ${media.phone`
+  ${media.phone} {
     height: ${props => props.theme.tabs.tabPanel.phoneHeight};
-  `}
+  }
 `;
 
 export const StyledTabPanel = styled(TabPanel)`

diff --git a/playground/src/__tests__/Editor.test.tsx b/playground/src/__tests__/Editor.test.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import { render } from "@testing-library/react";
+
 import Editor from "../Editor";
-import { ThemeProvider } from "styled-components";
 import getTheme from "../utils/theme";
+import { ThemeProvider } from "../utils/ThemeProvider";
 
 const initialSnippet = {
   markup: ``,
@@ -14,7 +15,7 @@ describe("Editor", () => {
   it("should render the default tab as per prop", () => {
     const defaultTab = "css";
     const { getByText } = render(
-      <ThemeProvider theme={getTheme()}>
+      <ThemeProvider userTheme={getTheme()} mode='light'>
         <Editor
           width={40}
           code={initialSnippet}

diff --git a/playground/src/__tests__/Frame.test.tsx b/playground/src/__tests__/Frame.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import { ThemeProvider } from "styled-components";
+import { ThemeProvider } from "../utils/ThemeProvider";
 import getTheme from "../utils/theme";
 
 import Frame from "../Result/Frame";
@@ -20,7 +20,7 @@ const initialSnippet = {
 describe("Frame", () => {
   it("should render error", () => {
     const { getByText } = render(
-      <ThemeProvider theme={getTheme()}>
+      <ThemeProvider userTheme={getTheme()} mode='light'>
         <Frame
           id="thing"
           snippet={initialSnippet}

diff --git a/playground/src/utils/media.ts b/playground/src/utils/media.ts
@@ -1,27 +1,11 @@
-import { ThemedCssFunction, css, DefaultTheme } from "styled-components";
+const customMediaQuery = (maxWidth: number) =>
+  `@media (max-width: ${maxWidth}px)`;
 
-interface ISize {
-  [K: string]: number;
-}
+const media = Object.freeze({
+  custom: customMediaQuery,
+  desktop: customMediaQuery(922),
+  tablet: customMediaQuery(768),
+  phone: customMediaQuery(576),
+});
 
-const sizes: Readonly<ISize> = {
-  desktop: 992,
-  tablet: 768,
-  phone: 576,
-};
-
-// Iterate through the sizes and create a media template
-const media = (Object.keys(sizes) as (keyof typeof sizes)[]).reduce(
-  (acc, label) => {
-    acc[label] = (first: any, ...interpolations: any[]) => css`
-      @media (max-width: ${sizes[label]}px) {
-        ${css(first, ...interpolations)}
-      }
-    `;
-
-    return acc;
-  },
-  {} as { [key in keyof typeof sizes]: ThemedCssFunction<DefaultTheme> }
-);
-
-export default media;
+export default media;