Merge pull request #422 from quantified-uncertainty/no-more-antd

No `antd` (paired with Sam)

README.md

@@ -1,12 +1,22 @@
 # Squiggle
 
 [![Packages check](https://github.com/quantified-uncertainty/squiggle/actions/workflows/ci.yml/badge.svg)](https://github.com/quantified-uncertainty/squiggle/actions/workflows/ci.yml)
-[![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-lang.svg)](https://www.npmjs.com/package/@quri/squiggle-lang)
+[![npm version - lang](https://badge.fury.io/js/@quri%2Fsquiggle-lang.svg)](https://www.npmjs.com/package/@quri/squiggle-lang)
-[![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-components.svg)](https://www.npmjs.com/package/@quri/squiggle-components)
+[![npm version - components](https://badge.fury.io/js/@quri%2Fsquiggle-components.svg)](https://www.npmjs.com/package/@quri/squiggle-components)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/quantified-uncertainty/squiggle/blob/develop/LICENSE)
 [![codecov](https://codecov.io/gh/quantified-uncertainty/squiggle/branch/develop/graph/badge.svg?token=QRLBL5CQ7C)](https://codecov.io/gh/quantified-uncertainty/squiggle)
 
-This is an experimental DSL/language for making probabilistic estimates. The full story can be found [here](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3).
+_An estimation language_.
+
+## Get started
+
+- [Gallery](https://www.squiggle-language.com/docs/Discussions/Gallery)
+- [Squiggle playground](https://squiggle-language.com/playground)
+- [Language basics](https://www.squiggle-language.com/docs/Features/Language)
+- [Squiggle functions source of truth](https://www.squiggle-language.com/docs/Features/Functions)
+- [Known bugs](https://www.squiggle-language.com/docs/Discussions/Bugs)
+- [Original lesswrong sequence](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3)
+- [Author your squiggle models as Observable notebooks](https://observablehq.com/@hazelfire/squiggle)
 
 ## Our deployments
 
@@ -27,7 +37,7 @@ the packages can be found in `packages`.
 - `@quri/squiggle-components` in `packages/components` contains React components that
   can be passed squiggle strings as props, and return a presentation of the result
   of the calculation.
-- `@quri/squiggle-website` in `packages/website` The main descriptive website for squiggle,
+- `packages/website` is the main descriptive website for squiggle,
   it is hosted at `squiggle-language.com`.
 
 The playground depends on the components library which then depends on the language. This means that if you wish to work on the components library, you will need to build (no need to bundle) the language, and as of this writing playground doesn't really work.

packages/components/README.md

@@ -1,8 +1,26 @@
+[![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-components.svg)](https://www.npmjs.com/package/@quri/squiggle-components)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/quantified-uncertainty/squiggle/blob/develop/LICENSE)
+
 # Squiggle Components
 
 This package contains all the components for squiggle. These can be used either as a library or hosted as a [storybook](https://storybook.js.org/).
 
-# Build for development
+# Usage in a `react` project
+
+For example, in a fresh `create-react-app` project
+
+```sh
+yarn add @quri/squiggle-components
+```
+
+Add to `App.js`:
+
+```jsx
+import { SquiggleEditor } from "@quri/squiggle-components";
+<SquiggleEditor initialSquiggleString="x = beta(3, 10); x + 20" />;
+```
+
+# Build storybook for development
 
 We assume that you had run `yarn` at monorepo level, installing dependencies.
 
@@ -24,6 +42,5 @@ yarn start
 And build artefacts for production,
 
 ```sh
-yarn bundle  # builds components library
 yarn build  # builds storybook app
 ```

packages/components/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@quri/squiggle-components",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "license": "MIT",
   "dependencies": {
-    "antd": "^4.20.1",
     "react-ace": "10.1.0",
-    "@quri/squiggle-lang": "^0.2.6",
+    "@quri/squiggle-lang": "^0.2.7",
     "react-dom": "^18.1.0",
     "vega": "^5.22.1",
     "vega-embed": "^6.20.6",

packages/components/src/components/DistributionChart.tsx

@@ -6,6 +6,7 @@ import { distributionErrorToString } from "@quri/squiggle-lang";
 import { createClassFromSpec } from "react-vega";
 import * as chartSpecification from "../vega-specs/spec-distributions.json";
 import { ErrorBox } from "./ErrorBox";
+import styled from "styled-components";
 
 let SquiggleVegaChart = createClassFromSpec({
   spec: chartSpecification as Spec,
@@ -24,19 +25,21 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
 }: DistributionChartProps) => {
   let shape = distribution.pointSet();
   if (shape.tag === "Ok") {
-    return (
+    let widthProp = width ? width - 20 : undefined;
+    var result = (
       <SquiggleVegaChart
         data={{ con: shape.value.continuous, dis: shape.value.discrete }}
-        width={width - 20}
+        width={widthProp}
         height={height}
         actions={false}
       />
     );
   } else {
-    return (
+    var result = (
       <ErrorBox heading="Distribution Error">
         {distributionErrorToString(shape.value)}
       </ErrorBox>
     );
   }
+  return result;
 };

packages/components/src/components/SquiggleChart.tsx

@@ -150,6 +150,12 @@ export interface SquiggleChartProps {
   height?: number;
 }
 
+const ChartWrapper = styled.div`
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+`;
+
 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   squiggleString = "",
   sampleCount = 1000,
@@ -158,11 +164,6 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   height = 60,
   width = NaN,
 }: SquiggleChartProps) => {
-  const target = React.useRef(null);
-  const [componentWidth] = useSize(target);
-  // I would have wanted to just use componentWidth, but this created infinite loops with SquiggleChart.stories.
-  //So you can manually add a width, as an escape hatch.
-  let _width = width || componentWidth;
   let samplingInputs: samplingParams = {
     sampleCount: sampleCount,
     xyPointLength: outputXYPoints,
@@ -173,15 +174,14 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     let expression = expressionResult.value;
     onChange(expression);
     internal = (
-      <SquiggleItem expression={expression} width={_width} height={height} />
+      <SquiggleItem expression={expression} width={width} height={height} />
     );
   } else {
-    // At this point, we came across an error. What was our error?
     internal = (
       <ErrorBox heading={"Parse Error"}>
         {errorValueToString(expressionResult.value)}
       </ErrorBox>
     );
   }
-  return <div ref={target}>{internal}</div>;
+  return <ChartWrapper>{internal}</ChartWrapper>;
 };

packages/components/src/components/SquigglePlayground.tsx

@@ -1,11 +1,9 @@
 import _ from "lodash";
-import React, { FC, useState } from "react";
+import React, { FC, ReactElement, useState } from "react";
 import ReactDOM from "react-dom";
 import { SquiggleChart } from "./SquiggleChart";
 import CodeEditor from "./CodeEditor";
-import { Form, Input, Row, Col } from "antd";
 import styled from "styled-components";
-import "antd/dist/antd.css";
 
 interface FieldFloatProps {
   label: string;
@@ -14,10 +12,19 @@ interface FieldFloatProps {
   onChange: (value: number) => void;
 }
 
+const Input = styled.input``;
+
+const FormItem = (props: { label: string; children: ReactElement }) => (
+  <div>
+    <label>{props.label}</label>
+    {props.children}
+  </div>
+);
+
 function FieldFloat(Props: FieldFloatProps) {
   let [contents, setContents] = useState(Props.value + "");
   return (
-    <Form.Item label={Props.label}>
+    <FormItem label={Props.label}>
       <Input
         value={contents}
         className={Props.className ? Props.className : ""}
@@ -29,7 +36,7 @@ function FieldFloat(Props: FieldFloatProps) {
           }
         }}
       />
-    </Form.Item>
+    </FormItem>
   );
 }
 
@@ -65,6 +72,12 @@ const Display = styled.div<TitleProps>`
   max-height: ${(props) => props.maxHeight}px;
 `;
 
+const Row = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+`;
+const Col = styled.div``;
+
 let SquigglePlayground: FC<Props> = ({
   initialSquiggleString = "",
   height = 300,
@@ -79,7 +92,7 @@ let SquigglePlayground: FC<Props> = ({
   return (
     <ShowBox height={height}>
       <Row>
-        <Col span={12}>
+        <Col>
           <CodeEditor
             value={squiggleString}
             onChange={setSquiggleString}
@@ -88,7 +101,7 @@ let SquigglePlayground: FC<Props> = ({
             height={height - 3}
           />
         </Col>
-        <Col span={12}>
+        <Col>
           <Display maxHeight={height - 3}>
             <SquiggleChart
               squiggleString={squiggleString}

packages/components/src/vega-specs/spec-distributions.json

@@ -3,6 +3,7 @@
   "description": "A basic area chart example",
   "width": 500,
   "height": 100,
+  "autosize": "fit",
   "padding": 5,
   "data": [
     {

packages/squiggle-lang/README.md

@@ -1,3 +1,6 @@
+[![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-lang.svg)](https://www.npmjs.com/package/@quri/squiggle-lang)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/quantified-uncertainty/squiggle/blob/develop/LICENSE)
+
 # Squiggle language
 
 ## Build for development
@@ -15,13 +18,16 @@ Other:
 ```sh
 yarn start  # listens to files and recompiles at every mutation
 yarn test
-yarn test:watch  # keeps an active session and runs all tests at every mutation
 
 # where o := open in osx and o := xdg-open in linux,
-yarn coverage; o _coverage/index.html  # produces coverage report and opens it in browser
+yarn coverage:rescript; o _coverage/index.html  # produces coverage report and opens it in browser
 ```
 
-## Information
+## Distributing this package or using this package from other monorepo packages
+
+As it says in the other `packages/*/README.md`s, building this package is an essential step of building other packages.
+
+# Information
 
 Squiggle is a language for representing probability distributions, as well as functions that return probability distributions. Its original intended use is for improving epistemics around EA decisions.
 
@@ -34,11 +40,3 @@ This package is mainly written in [ReScript](https://rescript-lang.org/), but ha
 ReScript has an interesting philosophy of not providing much in the way of effective build tools. Every ReScript file is compiled into `.bs.js` and `.gen.ts` files with the same name and same location, and then you can use these files in other `.js` files to create your program. To generate these files to build the package, you run `yarn build`.
 
 `.gen.ts` files are created by the [`@genType`](https://rescript-lang.org/docs/gentype/latest/getting-started) decorator, which creates typescript typings for needed parts of the codebase so that they can be easily used in typescript. These .gen.ts files reference the .bs.js files generated by rescript.
-
-### Errors regarding the `rationale` package
-
-You may notice sometimes, that there are errors about the `rationale` package. If you ever get these errors, `yarn build` should fix this issue. These errors occur because `yarn build` also needs to create build files that are in `node_modules`. So if you replace `node_modules` you may need to rebuild to get those files back.
-
-## Distributing this package or using this package from other monorepo packages
-
-As it says in the other `packages/*/README.md`s, building this package is an essential step of building other packages.

yarn.lock

@@ -5005,7 +5005,7 @@ ansi-to-html@^0.6.11:
   dependencies:
     entities "^2.0.0"
 
-antd@^4.20.0, antd@^4.20.1:
+antd@^4.20.0:
   version "4.20.1"
   resolved "https://registry.yarnpkg.com/antd/-/antd-4.20.1.tgz#6cd5a406c7172d61a5d0693ea52ee908650cf674"
   integrity sha512-asKxOV0a6AijqonbcXkO08/q+XvqS/HmGfaRIS6ZH1ALR3FS2q+kTW52rJZO9rfoOb/ldPhEBVSWiNrbiB+uCQ==