Move Playground to components

.gitignore

@@ -5,3 +5,4 @@ yarn-error.log
 .parcel-cache
 .DS_Store
 **/.sync.ffs_db
+.direnv

packages/components/package.json

@@ -2,6 +2,7 @@
   "name": "@quri/squiggle-components",
   "version": "0.1.6",
   "dependencies": {
+    "@emotion/react": "^11.8.2",
     "@quri/squiggle-lang": "0.2.2",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.2",
@@ -11,6 +12,7 @@
     "@types/node": "^17.0.16",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
+    "antd": "^4.19.3",
     "cross-env": "^7.0.3",
     "lodash": "^4.17.21",
     "react": "^17.0.2",

packages/components/src/CodeEditor.tsx

@@ -8,15 +8,15 @@ import "ace-builds/src-noconflict/keybinding-vim";
 
 interface CodeEditorProps {
    value : string,
-   onChange : (value: string) => void
+   onChange : (value: string) => void,
+   oneLine : boolean
 }
 
 export let CodeEditor : FC<CodeEditorProps> = (props) =>
     <AceEditor
       value={props.value}
       mode="golang"
-      height="400px"
+      minLines={props.oneLine ? 1 : 10}
-      width="100%"
       theme="github"
       showGutter={false}
       highlightActiveLine={false}
@@ -32,3 +32,4 @@ export let CodeEditor : FC<CodeEditorProps> = (props) =>
         enableSnippets: true,
       }}
     />
+export default CodeEditor

packages/components/src/SquigglePlayground.tsx

@@ -1,7 +1,8 @@
-import { FC, useState } from "react"
+import React, { FC, useState } from "react"
-import { SquiggleChart } from "@quri/squiggle-components"
+import { SquiggleChart } from "./SquiggleChart"
-import { CodeEditor } from "./CodeEditor"
+import CodeEditor from "./CodeEditor"
 import { Form, Input, Card, Row, Col } from "antd"
+import 'antd/dist/antd.css';
 import { css } from '@emotion/react'
 
 interface FieldFloatProps {
@@ -27,6 +28,7 @@ function FieldFloat(Props: FieldFloatProps) {
       />
   </Form.Item> 
 }
+
 let rows = css`
   >.antCol:firstChild {
     paddingLeft: 0.25em;
@@ -85,8 +87,12 @@ var Styles = {
   groupB: groupB
 };
 
-let DistBuilder : FC<{}> = (_: {}) => {
+interface Props {
-  let [squiggleString, setSquiggleString] = useState("mm(normal(5,2), normal(10,2))")
+  initialSquiggleString : string
+}
+
+let SquigglePlayground : FC<Props> = (props) => {
+  let [squiggleString, setSquiggleString] = useState(props.initialSquiggleString)
   let [sampleCount, setSampleCount] = useState(1000)
   let [outputXYPoints, setOutputXYPoints] = useState(1000)
   let [pointDistLength, setPointDistLength] = useState(undefined)
@@ -105,14 +111,14 @@ let DistBuilder : FC<{}> = (_: {}) => {
       pointDistLength={pointDistLength}
       />
   return (
-    <div className="grid grid-cols-2 gap-4">
+    <Row>
-      <div>
+      <Col span={12}>
         <Card
           title="Distribution Form">
           <Form>
             <Row css={Styles.rows} >
               <Col span={24}> 
-                <CodeEditor value={squiggleString} onChange={setSquiggleString} /> </Col>
+                <CodeEditor value={squiggleString} onChange={setSquiggleString} oneLine={false}/> </Col>
             </Row>
             <Row css={Styles.rows}>
               <Col span={12}> 
@@ -163,9 +169,11 @@ let DistBuilder : FC<{}> = (_: {}) => {
             </Row>
           </Form>
         </Card>
-      </div>
+      </Col>
+      <Col span={12} >
         {demoDist}
-    </div>
+      </Col>
+    </Row>
   )
 }
-export default DistBuilder
+export default SquigglePlayground;

packages/components/src/stories/SquigglePlayground.stories.mdx

@@ -0,0 +1,22 @@
+import SquigglePlayground from "../SquigglePlayground";
+import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
+
+<Meta title="Squiggle/SquigglePlayground" component={SquigglePlayground} />
+
+export const Template = (props) => <SquigglePlayground {...props} />;
+
+# Squiggle Playground
+
+A Squiggle playground is an environment where you can play around with all settings,
+including sampling settings, in squiggle.
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      initialSquiggleString: "normal(5,2)",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

packages/components/tsconfig.json

@@ -4,7 +4,8 @@
       "@quri/squiggle-lang": ["../squiggle-lang/src/js"]
     },
     "module": "commonjs",
-    "jsx": "react",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
     "resolveJsonModule": true,
     "noImplicitAny": false,
     "esModuleInterop": true,

packages/playground/.gitignore

@@ -1,16 +0,0 @@
-.DS_Store
-.merlin
-.bsb.lock
-npm-debug.log
-/node_modules/
-.cache
-.cache/*
-dist
-lib/*
-*.cache
-build
-yarn-error.log
-*.bs.js
-# Local Netlify folder
-.netlify
-.idea

packages/playground/README.md

@@ -1,21 +0,0 @@
-# TODO: REVIVE PLAYGROUND. 
-
-# Squiggle Playground
-
-This repository contains the squiggle playground, a small web interface
-for playing around with squiggle concepts.
-
-It depends on `@quri/squiggle-components` and `@quri/squiggle-lang` so both of them will
-need to be packaged for this to work. This can be done from the root directory
-with
-
-```
-yarn build:lang
-yarn build:components
-```
-
-Then, starting the playground can be done with:
-
-```
-yarn parcel
-```

packages/playground/netlify.toml

@@ -1,4 +0,0 @@
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200

packages/playground/package.json

@@ -1,54 +0,0 @@
-{
-  "name": "@quri/squiggle-playground",
-  "version": "0.1.0",
-  "homepage": "https://foretold-app.github.io/estiband/",
-  "scripts": {
-    "parcel": "parcel ./src/index.html",
-    "parcel-build": "parcel build ./src/index.html --no-source-maps --no-autoinstall --no-scope-hoist",
-    "deploy": "gh-pages -d dist",
-    "ci": "yarn parcel-build"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "dependencies": {
-    "@emotion/react": "^11.8.1",
-    "@quri/squiggle-lang": "^0.2.2",
-    "ace-builds": "^1.4.12",
-    "antd": "^4.18.5",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "binary-search-tree": "0.2.6",
-    "css-loader": "^6.7.1",
-    "gh-pages": "3.2.3",
-    "jstat": "1.9.5",
-    "lenses-ppx": "6.1.10",
-    "less": "4.1.2",
-    "lodash": "4.17.21",
-    "mathjs": "10.4.1",
-    "moduleserve": "0.9.1",
-    "moment": "2.29.1",
-    "pdfast": "^0.2.0",
-    "rationale": "0.2.0",
-    "react": "17.0.2",
-    "react-ace": "^9.2.0",
-    "react-dom": "^17.0.2",
-    "react-use": "^17.3.2",
-    "react-vega": "^7.4.4",
-    "vega": "*",
-    "vega-embed": "6.20.8",
-    "vega-lite": "*"
-  },
-  "devDependencies": {
-    "@emotion/babel-plugin": "^11.7.2",
-    "@parcel/core": "^2.4.0",
-    "@types/react": "^17.0.43",
-    "autoprefixer": "^10.4.2",
-    "docsify": "^4.12.2",
-    "jest": "^27.5.1",
-    "parcel": "^2.4.0",
-    "postcss": "^8.4.7",
-    "postcss-cli": "^9.1.0",
-    "tailwindcss": "^3.0.23",
-    "typescript": "^4.6.3"
-  }
-}

packages/playground/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

packages/playground/src/Index.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import { render } from "react-dom"
-import DistBuilder from "./components/DistBuilder"
-
-var root = document.querySelector("#app")
-
-if (!(root == null)) {
-  render(<DistBuilder />, root)
-}

packages/playground/src/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Squiggle Language</title>
-  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
-  <link href="./styles/antd.css" rel="stylesheet">
-  <link href="./styles/index.css" rel="stylesheet">
-  <script type="module" src="./Index.tsx" defer></script>
-</head>
-
-<body>
-  <div id="app" style="height: 100%"></div>
-</body>
-
-</html>

packages/playground/src/styles/index.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

packages/playground/tailwind.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  content: [
-    "./src/components/*.tsx"
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}

packages/playground/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react",
-    "noImplicitAny": false,
-    "removeComments": true,
-    "preserveConstEnums": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "declaration": true,
-    "sourceMap": true
-  },
-  "target": "ES6",
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.spec.ts"]
-}