Merge pull request #22 from agneym/15-react-tab-css

15 react tab css

README.md

@@ -33,6 +33,8 @@ yarn add @agney/playground
 
 ```jsx
 import Playground from "@agney/playground";
+/* Why is there a tabs import? https://github.com/agneym/playground#why-is-there-a-reacttabs-import*/
+import "@reach/tabs/styles.css";
 
 const App = () => {
   const snippet = {
@@ -97,6 +99,12 @@ https://blog.agney.dev/introducing-playground/
 }
 ```
 
+### Why is there a @react/tabs import?
+
+Playground uses [`@reach/tabs`](https://reach.tech/tabs/) as a dependency. We could bundle the stylesheet or inject it inline on runtime. But both those options add unnecessary code if you are already using it.
+
+_This might cause breaking changes if you have a different version of `@reach/tabs` but then I'm just expecting it to be stable along the road._
+
 ### How does module imports work?
 
 If an NPM package exposes an endpoint for "module", then you can direcly import this package by it's name.

example/src/index.js

@@ -1,6 +1,7 @@
-import React, { Fragment } from "react";
+import React from "react";
 import { render } from "react-dom";
 import "babel-polyfill";
+import "@reach/tabs/styles.css";
 import Playground from "@agney/playground";
 
 const App = () => {

playground/package.json

@@ -24,15 +24,24 @@
     "playground"
   ],
   "files": [
-    "src",
-    "dist"
+    "dist",
+    "README.md"
   ],
   "author": "Agney Menon <agney@outlook.in> (@agneymenon)",
   "license": "MIT",
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
   },
+  "dependencies": {
+    "@agney/react-inspector": "^4.0.0",
+    "@reach/auto-id": "^0.13.2",
+    "@reach/tabs": "^0.13.2",
+    "goober": "^2.0.33",
+    "lodash.merge": "^4.6.2",
+    "prism-react-renderer": "^1.2.0",
+    "react-simple-code-editor": "^0.11.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.13.10",
     "@babel/preset-env": "^7.13.10",
@@ -52,15 +61,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "dependencies": {
-    "@agney/react-inspector": "^4.0.0",
-    "@reach/auto-id": "^0.13.2",
-    "@reach/tabs": "^0.13.2",
-    "goober": "^2.0.33",
-    "lodash.merge": "^4.6.2",
-    "prism-react-renderer": "^1.2.0",
-    "react-simple-code-editor": "^0.11.0"
-  },
   "jest": {
     "rootDir": "src"
   },

playground/src/Playground.tsx

@@ -2,8 +2,6 @@ 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";