From 9e472d57e90a625bde11d0a21abde4464c30562b Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Sat, 2 Apr 2022 20:36:33 +1100
Subject: [PATCH] Add style-loader and Playground to index

---
 packages/components/.storybook/preview.js      |  2 +-
 packages/components/package.json               |  4 +++-
 packages/components/src/SquiggleEditor.tsx     |  2 --
 packages/components/src/SquigglePlayground.tsx | 13 ++++++++++++-
 packages/components/src/index.ts               |  2 ++
 packages/components/webpack.config.js          |  4 ++++
 yarn.lock                                      | 10 +++++-----
 7 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/components/.storybook/preview.js b/packages/components/.storybook/preview.js
index 48afd568..786b0e25 100644
--- a/packages/components/.storybook/preview.js
+++ b/packages/components/.storybook/preview.js
@@ -6,4 +6,4 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
\ No newline at end of file
+}
diff --git a/packages/components/package.json b/packages/components/package.json
index a3ab4c66..cd2ef7b6 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quri/squiggle-components",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "dependencies": {
     "@quri/squiggle-lang": "0.2.2",
     "@testing-library/jest-dom": "^5.16.3",
@@ -72,8 +72,10 @@
     "@storybook/react": "^6.4.18",
     "@types/styled-components": "^5.1.24",
     "@types/webpack": "^5.28.0",
+    "css-loader": "^6.7.1",
     "prettier": "^2.6.0",
     "react-codejar": "^1.1.2",
+    "style-loader": "^3.3.1",
     "ts-loader": "^9.2.8",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2",
diff --git a/packages/components/src/SquiggleEditor.tsx b/packages/components/src/SquiggleEditor.tsx
index 75b245c7..0d37a411 100644
--- a/packages/components/src/SquiggleEditor.tsx
+++ b/packages/components/src/SquiggleEditor.tsx
@@ -27,8 +27,6 @@ export interface SquiggleEditorProps {
   width: number;
 }
 
-const highlight = (_: HTMLInputElement) => {};
-
 interface SquiggleEditorState {
   expression: string;
   env: exportEnv;
diff --git a/packages/components/src/SquigglePlayground.tsx b/packages/components/src/SquigglePlayground.tsx
index a6575dc4..fd8eb488 100644
--- a/packages/components/src/SquigglePlayground.tsx
+++ b/packages/components/src/SquigglePlayground.tsx
@@ -1,8 +1,9 @@
 import React, { FC, useState } from "react"
+import ReactDOM from "react-dom"
 import { SquiggleChart } from "./SquiggleChart"
 import CodeEditor from "./CodeEditor"
 import { Form, Input, Card, Row, Col } from "antd"
-import 'antd/dist/antd.css';
+import 'antd/dist/antd.min.css';
 
 interface FieldFloatProps {
   label : string,
@@ -111,3 +112,13 @@ let SquigglePlayground : FC<Props> = (props) => {
   )
 }
 export default SquigglePlayground;
+export function renderSquigglePlayground(props : Props){
+  let parent = document.createElement("div");
+  ReactDOM.render(
+    <SquigglePlayground
+      {...props}
+    />,
+    parent
+  );
+  return parent;
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 49b505ef..d37e6104 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,2 +1,4 @@
 export { SquiggleChart } from "./SquiggleChart";
 export { SquiggleEditor, renderSquiggleEditor } from "./SquiggleEditor";
+import SquigglePlayground, { renderSquigglePlayground } from './SquigglePlayground';
+export { SquigglePlayground, renderSquigglePlayground };
diff --git a/packages/components/webpack.config.js b/packages/components/webpack.config.js
index 5c0cbb7b..467a2dfa 100644
--- a/packages/components/webpack.config.js
+++ b/packages/components/webpack.config.js
@@ -12,6 +12,10 @@ module.exports = {
         options: { projectReferences: true },
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
     ],
   },
   resolve: {
diff --git a/yarn.lock b/yarn.lock
index c32c0c43..03023e75 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4016,10 +4016,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.39", "@types/react@^16.9.19", "@types/react@^17.0.43":
-  version "17.0.39"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
-  integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
+"@types/react@*", "@types/react@17.0.43", "@types/react@^16.9.19", "@types/react@^17.0.43":
+  version "17.0.43"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
+  integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -6772,7 +6772,7 @@ css-loader@^5.0.1:
     schema-utils "^3.0.0"
     semver "^7.3.5"
 
-css-loader@^6.5.1, css-loader@^6.6.0:
+css-loader@^6.5.1, css-loader@^6.6.0, css-loader@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.1.tgz#e98106f154f6e1baf3fc3bc455cb9981c1d5fd2e"
   integrity sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==