Add padding, remove undefined and fix CI

packages/components/package.json

@@ -2,7 +2,6 @@
   "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",
@@ -16,6 +15,7 @@
     "cross-env": "^7.0.3",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
+    "react-ace": "^9.5.0",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "react-vega": "^7.4.4",
@@ -70,6 +70,7 @@
     "@storybook/node-logger": "^6.4.18",
     "@storybook/preset-create-react-app": "^4.0.0",
     "@storybook/react": "^6.4.18",
+    "@types/styled-components": "^5.1.24",
     "@types/webpack": "^5.28.0",
     "prettier": "^2.6.0",
     "react-codejar": "^1.1.2",

packages/components/src/CodeEditor.tsx

@@ -16,8 +16,8 @@ export let CodeEditor : FC<CodeEditorProps> = (props) =>
     <AceEditor
       value={props.value}
       mode="golang"
-      minLines={props.oneLine ? 1 : 10}
       theme="github"
+      height={props.oneLine ? "1em" : "500px"}
       showGutter={false}
       highlightActiveLine={false}
       showPrintMargin={false}

packages/components/src/SquiggleEditor.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { SquiggleChart } from "./SquiggleChart";
-import { ReactCodeJar } from "react-codejar";
+import { CodeEditor } from "./CodeEditor";
 import type { exportEnv } from "@quri/squiggle-lang";
 
 export interface SquiggleEditorProps {
@@ -46,25 +46,12 @@ export class SquiggleEditor extends React.Component<
     let props = this.props;
     return (
       <div>
-        <ReactCodeJar
+        <CodeEditor
-          code={expression}
+          value={expression}
-          onUpdate={(e) => {
+          onChange={(e) => {
             this.setState({ expression: e });
           }}
-          style={{
+          oneLine={true}
-            borderRadius: "6px",
-            width: "530px",
-            border: "1px solid grey",
-            fontFamily: "'Source Code Pro', monospace",
-            fontSize: "14px",
-            fontWeight: "400",
-            letterSpacing: "normal",
-            lineHeight: "20px",
-            padding: "10px",
-            tabSize: "4",
-          }}
-          highlight={highlight}
-          lineNumbers={false}
         />
         <SquiggleChart
           squiggleString={expression}

packages/components/src/SquigglePlayground.tsx

@@ -3,7 +3,6 @@ import { SquiggleChart } from "./SquiggleChart"
 import CodeEditor from "./CodeEditor"
 import { Form, Input, Card, Row, Col } from "antd"
 import 'antd/dist/antd.css';
-import { css } from '@emotion/react'
 
 interface FieldFloatProps {
   label : string,
@@ -29,64 +28,6 @@ function FieldFloat(Props: FieldFloatProps) {
   </Form.Item> 
 }
 
-let rows = css`
-  >.antCol:firstChild {
-    paddingLeft: 0.25em;
-    paddingRight: 0.125em;
-  }
-  >.antCol:lastChild {
-    paddingLeft: 0.125em;
-    paddingRight: 0.25em;
-  }
-  >.antCol:not(:lastChild):not(:lastChild) {
-    paddingLeft: 0.125em;
-    paddingRight: 0.125em;
-  }
-  `
-
-let parent = css`
-  .antImportNumber {
-    width: 100%;
-  }
-
-  .anticon {
-    verticalAlign: "zero";
-  }
-  `
-var form = css`
-  backgroundColor: #eee;
-  padding: 1em;
-  `
-var dist = css`
-  padding: 1em;
-  `
-
-var spacer = css`
-  marginTop: 1em;
-  `
-
-var groupA = css`
-  .antInputNumberInputs {
-    backgroundColor: #fff7db;
-  }
-  `
-
-var groupB = css`
-  .antInputNumberInput {
-    backgroundColor: #eaf4ff;
-  }
-  `
-
-var Styles = {
-  rows: rows,
-  parent: parent,
-  form: form,
-  dist: dist,
-  spacer: spacer,
-  groupA: groupA,
-  groupB: groupB
-};
-
 interface Props {
   initialSquiggleString : string
 }
@@ -95,8 +36,7 @@ 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)
+  let [pointDistLength, setPointDistLength] = useState(1000)
-  let [kernelWidth, setKernelWidth] = useState(undefined)
   let [diagramStart, setDiagramStart] = useState(0)
   let [diagramStop, setDiagramStop] = useState(10)
   let [diagramCount, setDiagramCount] = useState(20)
@@ -116,11 +56,11 @@ let SquigglePlayground : FC<Props> = (props) => {
         <Card
           title="Distribution Form">
           <Form>
-            <Row css={Styles.rows} >
+            <Row gutter={16}>
               <Col span={24}> 
                 <CodeEditor value={squiggleString} onChange={setSquiggleString} oneLine={false}/> </Col>
             </Row>
-            <Row css={Styles.rows}>
+            <Row gutter={16}>
               <Col span={12}> 
                 <FieldFloat 
                   value={sampleCount} 
@@ -140,12 +80,6 @@ let SquigglePlayground : FC<Props> = (props) => {
                    label="Downsample To"
                    />
               </Col>
-              <Col span={12}> 
-                <FieldFloat 
-                  value={kernelWidth}
-                  onChange={setKernelWidth}
-                  label="Kernel Width" 
-                  /> </Col>
               <Col span={12}>
                 <FieldFloat 
                   value={diagramStart}

packages/components/tsconfig.json

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