diff --git a/README.md b/README.md index acf0032b..cf21345c 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,31 @@ This is an experiment DSL/language for making probabilistic estimates. -## DistPlus -We have a custom library called DistPlus to handle distributions with additional metadata. This helps handle mixed distributions (continuous + discrete), a cache for a cdf, possible unit types (specific times are supported), and limited domains. +This monorepo has several packages that can be used for various purposes. All +the packages can be found in `packages`. -## Running packages in the monorepo -This application uses `lerna` to manage dependencies between packages. To install -dependencies of all packages, run: +`@squiggle/lang` in `packages/squiggle-lang` contains the core language, particularly +an interface to parse squiggle expressions and return descriptions of distributions +or results. + +`@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. + +`@squiggle/playground` in `packages/playground` contains a website for a playground +for squiggle. This website is hosted at `playground.squiggle-language.com` + +`@squiggle/website` in `packages/website` 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 package the language, and for the playground to work, you will need to package +the components library and the playground. + +Scripts are available for you in the root directory to do important activities, +such as: + +`yarn build:lang`. Builds and packages the language +`yarn storybook:components`. Hosts the component storybook -``` -lerna bootstrap -``` diff --git a/package.json b/package.json index 5c28af6b..3d6df4b0 100644 --- a/package.json +++ b/package.json @@ -4,5 +4,10 @@ "lerna": "^4.0.0" }, "name": "squiggle", + "scripts": { + "build:lang": "cd packages/squiggle-lang && yarn && yarn build && yarn package", + "storybook:components": "cd packages/components && yarn && yarn storybook" + "build:components": "cd packages/components && yarn && yarn package" + }, "workspaces": ["packages/*"] } diff --git a/packages/components/.gitignore b/packages/components/.gitignore index 15209f23..b0a9c29b 100644 --- a/packages/components/.gitignore +++ b/packages/components/.gitignore @@ -22,3 +22,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* storybook-static +dist diff --git a/packages/components/README.md b/packages/components/README.md index 58beeacc..57c87588 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -1,70 +1,6 @@ -# Getting Started with Create React App +# Squiggle Components -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +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/). -## Available Scripts - -In the project directory, you can run: - -### `npm start` - -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. - -The page will reload when you make changes.\ -You may also see any lint errors in the console. - -### `npm test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `npm run build` - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can't go back!** - -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. - -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) - -### Analyzing the Bundle Size - -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) - -### Making a Progressive Web App - -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) - -### Advanced Configuration - -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) - -### Deployment - -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) - -### `npm run build` fails to minify - -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) +To run the storybook diff --git a/packages/components/package.json b/packages/components/package.json index d5382ffd..1f8cd58c 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -25,12 +25,9 @@ "webpack-cli": "^4.9.2" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject", "storybook": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public", - "build-storybook": "build-storybook -s public" + "build-storybook": "build-storybook -s public", + "package": "tsc" }, "eslintConfig": { "extends": [ diff --git a/packages/components/public/favicon.ico b/packages/components/public/favicon.ico index a11777cc..bf4a38a2 100644 Binary files a/packages/components/public/favicon.ico and b/packages/components/public/favicon.ico differ diff --git a/packages/components/public/index.html b/packages/components/public/index.html index aa069f27..7e688cd4 100644 --- a/packages/components/public/index.html +++ b/packages/components/public/index.html @@ -7,37 +7,13 @@ - - - - React App + Squiggle Components
- diff --git a/packages/components/public/logo16.png b/packages/components/public/logo16.png new file mode 100644 index 00000000..d35a4ae3 Binary files /dev/null and b/packages/components/public/logo16.png differ diff --git a/packages/components/public/logo192.png b/packages/components/public/logo192.png index fc44b0a3..3639a04e 100644 Binary files a/packages/components/public/logo192.png and b/packages/components/public/logo192.png differ diff --git a/packages/components/public/logo32.png b/packages/components/public/logo32.png new file mode 100644 index 00000000..91b90046 Binary files /dev/null and b/packages/components/public/logo32.png differ diff --git a/packages/components/public/logo42.png b/packages/components/public/logo42.png new file mode 100644 index 00000000..8af7be35 Binary files /dev/null and b/packages/components/public/logo42.png differ diff --git a/packages/components/public/logo512.png b/packages/components/public/logo512.png index a4e47a65..fc2160b4 100644 Binary files a/packages/components/public/logo512.png and b/packages/components/public/logo512.png differ diff --git a/packages/components/public/squiggle.svg b/packages/components/public/squiggle.svg new file mode 100644 index 00000000..77a1ee2e --- /dev/null +++ b/packages/components/public/squiggle.svg @@ -0,0 +1,676 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/src/App.css b/packages/components/src/App.css deleted file mode 100644 index 74b5e053..00000000 --- a/packages/components/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/packages/components/src/App.js b/packages/components/src/App.js deleted file mode 100644 index 37845757..00000000 --- a/packages/components/src/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} - -export default App; diff --git a/packages/components/src/App.test.js b/packages/components/src/App.test.js deleted file mode 100644 index 1f03afee..00000000 --- a/packages/components/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/packages/components/src/stories/SquiggleChart.js.map b/packages/components/src/SquiggleChart.js.map similarity index 100% rename from packages/components/src/stories/SquiggleChart.js.map rename to packages/components/src/SquiggleChart.js.map diff --git a/packages/components/src/stories/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx similarity index 100% rename from packages/components/src/stories/SquiggleChart.tsx rename to packages/components/src/SquiggleChart.tsx diff --git a/packages/components/src/index.css b/packages/components/src/index.css deleted file mode 100644 index ec2585e8..00000000 --- a/packages/components/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/packages/components/src/index.js b/packages/components/src/index.js deleted file mode 100644 index ef2edf8e..00000000 --- a/packages/components/src/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; - -ReactDOM.render( - - - , - document.getElementById('root') -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts new file mode 100644 index 00000000..5c7c48df --- /dev/null +++ b/packages/components/src/index.ts @@ -0,0 +1 @@ +export { SquiggleChart } from './SquiggleChart'; diff --git a/packages/components/src/lib.ts b/packages/components/src/lib.ts deleted file mode 100644 index 732d2691..00000000 --- a/packages/components/src/lib.ts +++ /dev/null @@ -1 +0,0 @@ -export { SquiggleChart } from './stories/SquiggleChart' diff --git a/packages/components/src/logo.svg b/packages/components/src/logo.svg deleted file mode 100644 index 9dfc1c05..00000000 --- a/packages/components/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/src/reportWebVitals.js b/packages/components/src/reportWebVitals.js deleted file mode 100644 index 5253d3ad..00000000 --- a/packages/components/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/packages/components/src/setupTests.js b/packages/components/src/setupTests.js deleted file mode 100644 index 8f2609b7..00000000 --- a/packages/components/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/packages/components/src/stories/spec-distributions.json b/packages/components/src/spec-distributions.json similarity index 100% rename from packages/components/src/stories/spec-distributions.json rename to packages/components/src/spec-distributions.json diff --git a/packages/components/src/stories/spec-pertentiles.json b/packages/components/src/spec-pertentiles.json similarity index 100% rename from packages/components/src/stories/spec-pertentiles.json rename to packages/components/src/spec-pertentiles.json diff --git a/packages/components/src/stories/Introduction.stories.mdx b/packages/components/src/stories/Introduction.stories.mdx index 97382041..b4bca349 100644 --- a/packages/components/src/stories/Introduction.stories.mdx +++ b/packages/components/src/stories/Introduction.stories.mdx @@ -1,13 +1,9 @@ import { Meta } from '@storybook/addon-docs'; -import Code from './assets/code-brackets.svg'; -import Colors from './assets/colors.svg'; -import Comments from './assets/comments.svg'; -import Direction from './assets/direction.svg'; -import Flow from './assets/flow.svg'; -import Plugin from './assets/plugin.svg'; -import Repo from './assets/repo.svg'; -import StackAlt from './assets/stackalt.svg'; -Hello +This is the component library for Squiggle. All of these components are react +components, and can be used in any application that you see fit. + +Currently, the only component that is provided is the SquiggleChart component. +This component allows you to render the result of a squiggle expression. diff --git a/packages/components/src/stories/SquiggleChart.stories.js b/packages/components/src/stories/SquiggleChart.stories.js deleted file mode 100644 index dc04a76c..00000000 --- a/packages/components/src/stories/SquiggleChart.stories.js +++ /dev/null @@ -1,18 +0,0 @@ -"use strict"; -exports.__esModule = true; -exports.Default = void 0; -var React = require("react"); -var SquiggleChart_1 = require("./SquiggleChart"); -exports["default"] = { - title: 'Example/SquiggleChart', - component: SquiggleChart_1.SquiggleChart -}; -var Template = function (_a) { - var squiggleString = _a.squiggleString; - return React.createElement(SquiggleChart_1.SquiggleChart, { squiggleString: squiggleString }); -}; -exports.Default = Template.bind({}); -exports.Default.args = { - squiggleString: "normal(5, 2)" -}; -//# sourceMappingURL=SquiggleChart.stories.js.map \ No newline at end of file diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx new file mode 100644 index 00000000..b2245b1d --- /dev/null +++ b/packages/components/src/stories/SquiggleChart.stories.mdx @@ -0,0 +1,81 @@ +import { SquiggleChart } from '../SquiggleChart' +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +export const Template = ({squiggleString}) => + +# Squiggle Chart + +Squiggle chart evaluates squiggle expressions, and then returns a graph representing +the result of a squiggle expression. + +A squiggle expression can have three different types of returns. A distribution, +a constant, and a function. + +A distribution means that the result forms a probability distribution. This +could be continuous, discrete or mixed. + +## Distributions + +An example of a normal distribution is: + + + {Template.bind({})} + + + + +An example of a Discrete distribution is: + + + {Template.bind({})} + + + +An example of a Mixed distribution is: + + + {Template.bind({})} + + + +## Constants +A constant is a simple number as a result. This has special formatting rules +to allow large and small numbers being printed cleanly. + + + {Template.bind({})} + + + +## Functions +Finally, a function can be returned, and this shows how the distribution changes +over the axis between x = 0 and 10. + + + + {Template.bind({})} + + + diff --git a/packages/components/src/stories/SquiggleChart.stories.tsx b/packages/components/src/stories/SquiggleChart.stories.tsx deleted file mode 100644 index 32ccdc49..00000000 --- a/packages/components/src/stories/SquiggleChart.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react' -import { SquiggleChart } from './SquiggleChart' - -// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -export default { - title: 'Example/SquiggleChart', - component: SquiggleChart -} - -const Template = ({squiggleString}) => - -export const Default = Template.bind({}) -Default.args = { - squiggleString: "normal(5, 2)" -}; diff --git a/packages/components/src/stories/assets/code-brackets.svg b/packages/components/src/stories/assets/code-brackets.svg deleted file mode 100644 index 73de9477..00000000 --- a/packages/components/src/stories/assets/code-brackets.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/code-brackets \ No newline at end of file diff --git a/packages/components/src/stories/assets/colors.svg b/packages/components/src/stories/assets/colors.svg deleted file mode 100644 index 17d58d51..00000000 --- a/packages/components/src/stories/assets/colors.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/colors \ No newline at end of file diff --git a/packages/components/src/stories/assets/comments.svg b/packages/components/src/stories/assets/comments.svg deleted file mode 100644 index 6493a139..00000000 --- a/packages/components/src/stories/assets/comments.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/comments \ No newline at end of file diff --git a/packages/components/src/stories/assets/direction.svg b/packages/components/src/stories/assets/direction.svg deleted file mode 100644 index 65676ac2..00000000 --- a/packages/components/src/stories/assets/direction.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/direction \ No newline at end of file diff --git a/packages/components/src/stories/assets/flow.svg b/packages/components/src/stories/assets/flow.svg deleted file mode 100644 index 8ac27db4..00000000 --- a/packages/components/src/stories/assets/flow.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/flow \ No newline at end of file diff --git a/packages/components/src/stories/assets/plugin.svg b/packages/components/src/stories/assets/plugin.svg deleted file mode 100644 index 29e5c690..00000000 --- a/packages/components/src/stories/assets/plugin.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/plugin \ No newline at end of file diff --git a/packages/components/src/stories/assets/repo.svg b/packages/components/src/stories/assets/repo.svg deleted file mode 100644 index f386ee90..00000000 --- a/packages/components/src/stories/assets/repo.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/repo \ No newline at end of file diff --git a/packages/components/src/stories/assets/stackalt.svg b/packages/components/src/stories/assets/stackalt.svg deleted file mode 100644 index 9b7ad274..00000000 --- a/packages/components/src/stories/assets/stackalt.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/stackalt \ No newline at end of file diff --git a/packages/components/src/stories/button.css b/packages/components/src/stories/button.css deleted file mode 100644 index dc91dc76..00000000 --- a/packages/components/src/stories/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 700; - border: 0; - border-radius: 3em; - cursor: pointer; - display: inline-block; - line-height: 1; -} -.storybook-button--primary { - color: white; - background-color: #1ea7fd; -} -.storybook-button--secondary { - color: #333; - background-color: transparent; - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; -} -.storybook-button--small { - font-size: 12px; - padding: 10px 16px; -} -.storybook-button--medium { - font-size: 14px; - padding: 11px 20px; -} -.storybook-button--large { - font-size: 16px; - padding: 12px 24px; -} diff --git a/packages/components/src/stories/header.css b/packages/components/src/stories/header.css deleted file mode 100644 index acadc9ec..00000000 --- a/packages/components/src/stories/header.css +++ /dev/null @@ -1,26 +0,0 @@ -.wrapper { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - display: flex; - align-items: center; - justify-content: space-between; -} - -svg { - display: inline-block; - vertical-align: top; -} - -h1 { - font-weight: 900; - font-size: 20px; - line-height: 1; - margin: 6px 0 6px 10px; - display: inline-block; - vertical-align: top; -} - -button + button { - margin-left: 10px; -} diff --git a/packages/components/src/stories/page.css b/packages/components/src/stories/page.css deleted file mode 100644 index fbc32aea..00000000 --- a/packages/components/src/stories/page.css +++ /dev/null @@ -1,69 +0,0 @@ -section { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 24px; - padding: 48px 20px; - margin: 0 auto; - max-width: 600px; - color: #333; -} - -section h2 { - font-weight: 900; - font-size: 32px; - line-height: 1; - margin: 0 0 4px; - display: inline-block; - vertical-align: top; -} - -section p { - margin: 1em 0; -} - -section a { - text-decoration: none; - color: #1ea7fd; -} - -section ul { - padding-left: 30px; - margin: 1em 0; -} - -section li { - margin-bottom: 8px; -} - -section .tip { - display: inline-block; - border-radius: 1em; - font-size: 11px; - line-height: 12px; - font-weight: 700; - background: #e7fdd8; - color: #66bf3c; - padding: 4px 12px; - margin-right: 10px; - vertical-align: top; -} - -section .tip-wrapper { - font-size: 13px; - line-height: 20px; - margin-top: 40px; - margin-bottom: 40px; -} - -section .tip-wrapper svg { - display: inline-block; - height: 12px; - width: 12px; - margin-right: 4px; - vertical-align: top; - margin-top: 3px; -} - -section .tip-wrapper svg path { - fill: #1ea7fd; -} diff --git a/shell.nix b/shell.nix new file mode 100644 index 00000000..a60b8a9b --- /dev/null +++ b/shell.nix @@ -0,0 +1,5 @@ +{ pkgs ? import {} }: +pkgs.mkShell { + name = "squiggle-root"; + buildInputs = with pkgs; [ nodePackages.yarn ]; +}