Add style-loader and Playground to index

packages/components/.storybook/preview.js

@@ -6,4 +6,4 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+}

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",

packages/components/src/SquiggleEditor.tsx

@@ -27,8 +27,6 @@ export interface SquiggleEditorProps {
   width: number;
 }
 
-const highlight = (_: HTMLInputElement) => {};
-
 interface SquiggleEditorState {
   expression: string;
   env: exportEnv;

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;
+}

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 };

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: {

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==