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) => { ) } export default SquigglePlayground; +export function renderSquigglePlayground(props : Props){ + let parent = document.createElement("div"); + ReactDOM.render( + , + 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==