Merge pull request #16 from agneym/switch-to-goober

Switch to goober
agneym · Mar 14, 2021 · a6a7404 · a6a7404
2 parents 8787ff6 + 8a3d9ac
commit a6a7404
Show file tree

Hide file tree

Showing 27 changed files with 2,907 additions and 3,298 deletions.
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pretty-quick --staged
diff --git a/README.md b/README.md
@@ -26,13 +26,11 @@
 Install from `npm` with:
 
 ```
-npm install styled-components @agney/playground
+npm install @agney/playground
 # OR
-yarn add styled-components @agney/playground
+yarn add @agney/playground
 ```
 
-Playground uses [styled-components](https://styled-components.com/) for styling.
-
 ```jsx
 import Playground from "@agney/playground";
 

diff --git a/example/package.json b/example/package.json
@@ -14,8 +14,8 @@
   "dependencies": {
     "@agney/playground": "*",
     "babel-polyfill": "^6.26.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
     "parcel-bundler": "^1.12.4"

diff --git a/package.json b/package.json
@@ -6,22 +6,18 @@
     "start": "yarn workspace @agney/playground start",
     "start-example": "yarn workspace example start",
     "build": "yarn workspace @agney/playground build",
-    "test": "yarn workspace @agney/playground test"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
+    "test": "yarn workspace @agney/playground test",
+    "prepare": "husky install"
   },
   "workspaces": [
     "playground",
     "example"
   ],
   "devDependencies": {
-    "husky": "^4.2.5",
-    "prettier": "^2.0.5",
-    "pretty-quick": "^2.0.1",
-    "typescript": "^3.9.5"
+    "husky": "^5.1.3",
+    "prettier": "^2.2.1",
+    "pretty-quick": "^3.1.0",
+    "typescript": "^4.2.3"
   },
   "repository": {
     "type": "git",

diff --git a/playground/package.json b/playground/package.json
@@ -4,8 +4,8 @@
   "description": "A simple playground for HTML, CSS and JavaScript supporting module imports.",
   "private": false,
   "scripts": {
-    "start": "microbundle watch",
-    "build": "microbundle --jsx React.createElement --tsconfig tsconfig.json",
+    "start": "microbundle watch --jsx React.createElement",
+    "build": "microbundle --jsx React.createElement",
     "test": "jest",
     "prepublishOnly": "yarn build",
     "release": "np"
@@ -14,10 +14,10 @@
     "access": "public"
   },
   "source": "src/Playground.tsx",
-  "main": "dist/editor.js",
-  "module": "dist/editor.module.js",
-  "umd:main": "dist/editor.umd.js",
-  "unpkg": "dist/editor.umd.js",
+  "main": "dist/playground.js",
+  "exports": "./dist/playground.modern.js",
+  "module": "dist/playground.module.js",
+  "unpkg": "dist/playground.umd.js",
   "keywords": [
     "react",
     "editor",
@@ -31,37 +31,35 @@
   "license": "MIT",
   "peerDependencies": {
     "react": ">=16",
-    "react-dom": ">=16",
-    "styled-components": ">=4"
+    "react-dom": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.3",
-    "@babel/preset-env": "^7.10.3",
-    "@babel/preset-react": "^7.10.1",
-    "@babel/preset-typescript": "^7.10.1",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^10.3.0",
-    "@types/jest": "^26.0.0",
-    "@types/lodash": "^4.14.155",
+    "@babel/core": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@types/jest": "^26.0.20",
+    "@types/lodash": "^4.14.168",
+    "@types/lodash-es": "^4.17.4",
     "@types/lodash.merge": "^4.6.6",
-    "@types/react": "^16.9.38",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-inspector": "^4.0.0",
-    "@types/styled-components": "^5.1.0",
-    "jest": "^26.0.1",
-    "microbundle": "^0.11.0",
-    "np": "^6.2.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "styled-components": "^5.1.1"
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.2",
+    "@types/react-inspector": "^4.0.1",
+    "jest": "^26.6.3",
+    "microbundle": "^0.13.0",
+    "np": "^7.4.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "dependencies": {
     "@agney/react-inspector": "^4.0.0",
-    "@reach/auto-id": "^0.10.4",
-    "@reach/tabs": "^0.10.4",
-    "@types/lodash-es": "^4.17.3",
+    "@reach/auto-id": "^0.13.2",
+    "@reach/tabs": "^0.13.2",
+    "goober": "^2.0.33",
     "lodash.merge": "^4.6.2",
-    "prism-react-renderer": "^1.1.1",
+    "prism-react-renderer": "^1.2.0",
     "react-simple-code-editor": "^0.11.0"
   },
   "jest": {

diff --git a/playground/scripts/test-utils.tsx b/playground/scripts/test-utils.tsx
@@ -0,0 +1,25 @@
+import React, { createElement, FC, ReactElement } from "react";
+import { render, RenderOptions } from "@testing-library/react";
+import { setup } from "goober";
+
+import { ThemeProvider, useTheme } from "../src/utils/ThemeProvider";
+import getTheme from "../src/utils/theme";
+
+setup(createElement, undefined, useTheme);
+
+const AllProviders: FC = ({ children }) => {
+  return (
+    <ThemeProvider mode="light" userTheme={getTheme()}>
+      {children}
+    </ThemeProvider>
+  );
+};
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, "queries">
+) => render(ui, { wrapper: AllProviders, ...options });
+
+export * from "@testing-library/react";
+
+export { customRender as render };
diff --git a/playground/src/Draggable/index.tsx b/playground/src/Draggable/index.tsx
@@ -1,17 +1,19 @@
-import React, { FC, ReactNode, useRef, useContext } from "react";
-import styled, { ThemeContext } from "styled-components";
+// @ts-nocheck
+import React, { FC, ReactNode, useRef, forwardRef } from "react";
+import { styled } from "goober";
 
 import useDrag from "./useDrag";
+import { useTheme } from "../utils/ThemeProvider";
 
-const Container = styled.div`
+const Container = styled("div", forwardRef)`
   display: flex;
   align-items: stretch;
 `;
 
-const Divider = styled.div`
-  width: ${props => props.theme.divider.width}px;
+const Divider = styled("div", forwardRef)`
+  width: ${(props) => props.theme.divider.width}px;
   cursor: col-resize;
-  background-color: ${props => props.theme.divider.background};
+  background-color: ${(props) => props.theme.divider.background};
 `;
 
 interface IProps {
@@ -23,7 +25,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
@@ -1,17 +1,19 @@
+// @ts-nocheck
 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")`
+  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;
+  height: 100%;
 `;
 
 interface IProps {
@@ -22,32 +24,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
@@ -1,24 +1,28 @@
-import React, { FC, useState, useEffect } from "react";
-import styled, { ThemeProvider, DefaultTheme } from "styled-components";
+// @ts-nocheck
+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;
   min-height: ${(props) => props.theme.container.minHeight};
 
-  ${media.phone`
+  ${media.phone} {
     flex-direction: column;
-  `}
+  }
 `;
 
 interface IProps {
@@ -44,9 +48,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 +56,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/Result/Console.tsx b/playground/src/Result/Console.tsx
@@ -1,9 +1,10 @@
+// @ts-nocheck
 import React, { FC } from "react";
-import styled from "styled-components";
+import { styled } from "goober";
 import Inspector from "@agney/react-inspector";
 
-const Container = styled.div`
-  background-color: ${props => props.theme.console.background};
+const Container = styled("div")`
+  background-color: ${(props) => props.theme.console.background};
   height: 100%;
 
   li {

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