add goober and set it up with theme

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

Hide file tree

Showing 7 changed files with 50 additions and 15 deletions.
diff --git a/playground/.babelrc b/playground/.babelrc
@@ -3,5 +3,8 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "babel-plugin-transform-goober"
   ]
 }
diff --git a/playground/package.json b/playground/package.json
@@ -48,6 +48,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-inspector": "^4.0.0",
     "@types/styled-components": "^5.1.0",
+    "babel-plugin-transform-goober": "^1.2.0",
     "jest": "^26.0.1",
     "microbundle": "^0.11.0",
     "np": "^6.2.4",
@@ -60,6 +61,7 @@
     "@reach/auto-id": "^0.10.4",
     "@reach/tabs": "^0.10.4",
     "@types/lodash-es": "^4.17.3",
+    "goober": "^2.0.33",
     "lodash.merge": "^4.6.2",
     "prism-react-renderer": "^1.1.1",
     "react-simple-code-editor": "^0.11.0"

diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx
@@ -1,16 +1,19 @@
-import React, { FC, useState, useEffect } from "react";
-import styled, { ThemeProvider, DefaultTheme } from "styled-components";
+import React, { FC, useState, createElement } from "react";
 import { useId } from "@reach/auto-id";
+import { styled, setup, DefaultTheme } from "goober";
 
 import "@reach/tabs/styles.css";
 
 import Editor from "./Editor";
 import Result from "./Result";
 import { ISnippet, IEditorTabs, IResultTabs } from "./types";
-import getTheme, { ColorMode, theme as ourTheme } from "./utils/theme";
+import { ThemeProvider, useTheme } from './utils/ThemeProvider';
+import { ColorMode } from "./utils/theme";
 import media from "./utils/media";
 import Draggable from "./Draggable";
 
+setup(createElement, undefined, useTheme);
+
 const StyledDraggable = styled(Draggable)`
   border: 0.1em solid ${(props) => props.theme.container.borderColor};
   display: flex;
@@ -44,9 +47,6 @@ const Playground: FC<IProps> = ({
 }) => {
   const [snippet, setSnippet] = useState<ISnippet>(initialSnippet);
   const id = useId(userId) as string;
-  const [consolidatedTheme, setConsolidatedTheme] = useState<DefaultTheme>(
-    ourTheme
-  );
 
   const onSnippetChange = (changed: string, type: IEditorTabs) => {
     setSnippet((snippet) => ({
@@ -55,12 +55,8 @@ const Playground: FC<IProps> = ({
     }));
   };
 
-  useEffect(() => {
-    setConsolidatedTheme(getTheme(mode));
-  }, [mode]);
-
   return (
-    <ThemeProvider theme={theme || consolidatedTheme}>
+    <ThemeProvider userTheme={theme} mode={mode}>
       <div className="playground">
         <StyledDraggable
           leftChild={(width) => (

diff --git a/playground/src/utils/ThemeProvider.tsx b/playground/src/utils/ThemeProvider.tsx
@@ -0,0 +1,23 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import getTheme, { theme } from './theme';
+
+export type DefaultTheme = typeof theme;
+
+const ThemeContext = createContext(theme);
+export const useTheme = () => useContext(ThemeContext);
+
+export function ThemeProvider({ mode, userTheme, children }) {
+  const [consolidatedTheme, setConsolidatedTheme] = useState<DefaultTheme>(
+    theme
+  );
+
+  useEffect(() => {
+    setConsolidatedTheme(getTheme(mode));
+  }, [mode]);
+
+  return (
+    <ThemeContext.Provider value={userTheme ?? consolidatedTheme}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
@@ -8,6 +8,7 @@
     "strict": false,
     "module": "ESNext",
     "target": "ESNext",
+    "moduleResolution": "Node",
     "typeRoots": ["./node_modules/@types", "../node_modules/@types", "./types"]
   }
 }
diff --git a/playground/types/styled-components.d.ts b/playground/types/styled-components.d.ts
@@ -1,8 +1,8 @@
-import "styled-components";
+import "goober";
 
 import { theme } from "../src/utils/theme";
 
-declare module "styled-components" {
-  type Theme = typeof theme;
-  export interface DefaultTheme extends Theme {}
+declare module "goober" {
+  type OurTheme = typeof theme;
+  export interface DefaultTheme extends OurTheme {}
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2915,6 +2915,11 @@ babel-plugin-transform-async-to-promises@^0.8.3:
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-promises/-/babel-plugin-transform-async-to-promises-0.8.15.tgz#13b6d8ef13676b4e3c576d3600b85344bb1ba346"
   integrity sha512-fDXP68ZqcinZO2WCiimCL9zhGjGXOnn3D33zvbh+yheZ/qOrNVVDDIBtAaM3Faz8TRvQzHiRKsu3hfrBAhEncQ==
 
+babel-plugin-transform-goober@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-goober/-/babel-plugin-transform-goober-1.2.0.tgz#3ccb93a82242a353dca95f4ba1c9e575cf37395e"
+  integrity sha512-+Dgb2RBYWBwXTRSM1M6W/L9ObczThwCClrwKNZhO6/MsvrzSSbPSSI7OetJ65tuBGVfChHhz7eIFp2x8t/TU+w==
+
 babel-polyfill@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
@@ -5403,6 +5408,11 @@ globrex@^0.1.1:
   resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
   integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
 
+goober@^2.0.33:
+  version "2.0.33"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.0.33.tgz#f8480e11263cde506c7008058b8a98f317935f18"
+  integrity sha512-Wy9HYzmmqmB1PTMQCY3+hlREZ4Lk7kaac6PZeWlJxOM6lIO9lsrU2yBu33TiougO0AC6bBxxIVueDP+nEGNWJw==
+
 got@^9.6.0:
   version "9.6.0"
   resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"