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 <[email protected]> (@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";