diff --git a/packages/components/package.json b/packages/components/package.json index 42468257..1e942cac 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -18,6 +18,7 @@ "react-dom": "^17.0.2", "react-scripts": "5.0.0", "react-vega": "^7.4.4", + "styled-components": "^5.3.5", "tsconfig-paths-webpack-plugin": "^3.5.2", "typescript": "^4.6.3", "vega": "^5.21.0", diff --git a/packages/components/src/CodeEditor.tsx b/packages/components/src/CodeEditor.tsx index 3cee774e..71b66a5c 100644 --- a/packages/components/src/CodeEditor.tsx +++ b/packages/components/src/CodeEditor.tsx @@ -16,7 +16,6 @@ export let CodeEditor: FC = ({ value, onChange, oneLine = false, - width = 500, }: CodeEditorProps) => { let lineCount = value.split("\n").length; let id = _.uniqueId(); @@ -25,7 +24,7 @@ export let CodeEditor: FC = ({ value={value} mode="golang" theme="github" - width={width + "px"} + width={"100%"} minLines={oneLine ? lineCount : 15} maxLines={oneLine ? lineCount : 15} showGutter={false} diff --git a/packages/components/src/NumberShower.tsx b/packages/components/src/NumberShower.tsx new file mode 100644 index 00000000..ca9dc943 --- /dev/null +++ b/packages/components/src/NumberShower.tsx @@ -0,0 +1,98 @@ +import * as React from "react"; +import _ from "lodash"; + +const orderOfMagnitudeNum = (n: number) => { + return Math.pow(10, n); +}; + +// 105 -> 3 +const orderOfMagnitude = (n: number) => { + return Math.floor(Math.log(n) / Math.LN10 + 0.000000001); +}; + +function withXSigFigs(number: number, sigFigs: number) { + const withPrecision = number.toPrecision(sigFigs); + const formatted = Number(withPrecision); + return `${formatted}`; +} + +class NumberShowerBuilder { + number: number; + precision: number; + + constructor(number: number, precision = 2) { + this.number = number; + this.precision = precision; + } + + convert() { + const number = Math.abs(this.number); + const response = this.evaluate(number); + if (this.number < 0) { + response.value = "-" + response.value; + } + return response; + } + + metricSystem(number: number, order: number) { + const newNumber = number / orderOfMagnitudeNum(order); + const precision = this.precision; + return `${withXSigFigs(newNumber, precision)}`; + } + + evaluate(number: number) { + if (number === 0) { + return { value: this.metricSystem(0, 0) }; + } + + const order = orderOfMagnitude(number); + if (order < -2) { + return { value: this.metricSystem(number, order), power: order }; + } else if (order < 4) { + return { value: this.metricSystem(number, 0) }; + } else if (order < 6) { + return { value: this.metricSystem(number, 3), symbol: "K" }; + } else if (order < 9) { + return { value: this.metricSystem(number, 6), symbol: "M" }; + } else if (order < 12) { + return { value: this.metricSystem(number, 9), symbol: "B" }; + } else if (order < 15) { + return { value: this.metricSystem(number, 12), symbol: "T" }; + } else { + return { value: this.metricSystem(number, order), power: order }; + } + } +} + +export function numberShow(number: number, precision = 2) { + const ns = new NumberShowerBuilder(number, precision); + return ns.convert(); +} + +export interface NumberShowerProps { + number: number; + precision?: number +} + +export let NumberShower: React.FC = ({ + number, + precision = 2 +}: NumberShowerProps) => { + let numberWithPresentation = numberShow(number, precision); + return ( + + {numberWithPresentation.value} + {numberWithPresentation.symbol} + {numberWithPresentation.power ? ( + + {"\u00b710"} + + {numberWithPresentation.power} + + + ) : ( + <> + )} + + ); +} diff --git a/packages/components/src/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx index 2e4234d9..e381127c 100644 --- a/packages/components/src/SquiggleChart.tsx +++ b/packages/components/src/SquiggleChart.tsx @@ -11,6 +11,8 @@ import type { import { createClassFromSpec } from "react-vega"; import * as chartSpecification from "./spec-distributions.json"; import * as percentilesSpec from "./spec-percentiles.json"; +import { NumberShower } from "./NumberShower"; +import styled from "styled-components"; let SquiggleVegaChart = createClassFromSpec({ spec: chartSpecification as Spec, @@ -42,8 +44,27 @@ export interface SquiggleChartProps { onEnvChange?(env: exportEnv): void; /** CSS width of the element */ width?: number; + height?: number; } +const Error = styled.div` + border: 1px solid #792e2e; + background: #eee2e2; + padding: 0.4em 0.8em; +`; + +const ShowError: React.FC<{ heading: string; children: React.ReactNode }> = ({ + heading = "Error", + children, +}) => { + return ( + +

{heading}

+ {children} + + ); +}; + export const SquiggleChart: React.FC = ({ squiggleString = "", sampleCount = 1000, @@ -56,6 +77,7 @@ export const SquiggleChart: React.FC = ({ environment = [], onEnvChange = () => {}, width = 500, + height = 60, }: SquiggleChartProps) => { let samplingInputs: SamplingInputs = { sampleCount: sampleCount, @@ -71,7 +93,7 @@ export const SquiggleChart: React.FC = ({ onEnvChange(environment); let chartResults = exports.map((chartResult: exportDistribution) => { if (chartResult["NAME"] === "Float") { - return ; + return ; } else if (chartResult["NAME"] === "DistPlus") { let shape = chartResult.VAL.pointSetDist; if (shape.tag === "Continuous") { @@ -91,6 +113,7 @@ export const SquiggleChart: React.FC = ({ return ( @@ -227,7 +250,11 @@ export const SquiggleChart: React.FC = ({ return <>{chartResults}; } else if (result.tag === "Error") { // At this point, we came across an error. What was our error? - return

{"Error parsing Squiggle: " + result.value}

; + return ( + + {result.value} + + ); } return

{"Invalid Response"}

; }; @@ -317,91 +344,3 @@ function getPercentiles(percentiles: number[], t: DistPlus) { return bounds; } } - -function MakeNumberShower(props: { number: number; precision: number }) { - let numberWithPresentation = numberShow(props.number, props.precision); - return ( - - {numberWithPresentation.value} - {numberWithPresentation.symbol} - {numberWithPresentation.power ? ( - - {"\u00b710"} - - {numberWithPresentation.power} - - - ) : ( - <> - )} - - ); -} - -const orderOfMagnitudeNum = (n: number) => { - return Math.pow(10, n); -}; - -// 105 -> 3 -const orderOfMagnitude = (n: number) => { - return Math.floor(Math.log(n) / Math.LN10 + 0.000000001); -}; - -function withXSigFigs(number: number, sigFigs: number) { - const withPrecision = number.toPrecision(sigFigs); - const formatted = Number(withPrecision); - return `${formatted}`; -} - -class NumberShower { - number: number; - precision: number; - - constructor(number: number, precision = 2) { - this.number = number; - this.precision = precision; - } - - convert() { - const number = Math.abs(this.number); - const response = this.evaluate(number); - if (this.number < 0) { - response.value = "-" + response.value; - } - return response; - } - - metricSystem(number: number, order: number) { - const newNumber = number / orderOfMagnitudeNum(order); - const precision = this.precision; - return `${withXSigFigs(newNumber, precision)}`; - } - - evaluate(number: number) { - if (number === 0) { - return { value: this.metricSystem(0, 0) }; - } - - const order = orderOfMagnitude(number); - if (order < -2) { - return { value: this.metricSystem(number, order), power: order }; - } else if (order < 4) { - return { value: this.metricSystem(number, 0) }; - } else if (order < 6) { - return { value: this.metricSystem(number, 3), symbol: "K" }; - } else if (order < 9) { - return { value: this.metricSystem(number, 6), symbol: "M" }; - } else if (order < 12) { - return { value: this.metricSystem(number, 9), symbol: "B" }; - } else if (order < 15) { - return { value: this.metricSystem(number, 12), symbol: "T" }; - } else { - return { value: this.metricSystem(number, order), power: order }; - } - } -} - -export function numberShow(number: number, precision = 2) { - const ns = new NumberShower(number, precision); - return ns.convert(); -} diff --git a/packages/components/src/SquiggleEditor.tsx b/packages/components/src/SquiggleEditor.tsx index 37b471da..e606937d 100644 --- a/packages/components/src/SquiggleEditor.tsx +++ b/packages/components/src/SquiggleEditor.tsx @@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom"; import { SquiggleChart } from "./SquiggleChart"; import { CodeEditor } from "./CodeEditor"; import type { exportEnv } from "@quri/squiggle-lang"; +import styled from 'styled-components' export interface SquiggleEditorProps { /** The input string for squiggle */ @@ -27,6 +28,12 @@ export interface SquiggleEditorProps { width: number; } +const Input = styled.div` + border: 1px solid #ddd; + padding: 0.3em 0.3em; + margin-bottom: 1em; +`; + export let SquiggleEditor: React.FC = ({ initialSquiggleString = "", width = 500, @@ -43,12 +50,13 @@ export let SquiggleEditor: React.FC = ({ let [expression, setExpression] = React.useState(initialSquiggleString); return (
- + + + = (props) => { diagramStop={diagramStop} diagramCount={diagramCount} pointDistLength={pointDistLength} + height={150} /> ); return ( diff --git a/packages/components/src/spec-distributions.json b/packages/components/src/spec-distributions.json index 8a5bbff9..40aebfe4 100644 --- a/packages/components/src/spec-distributions.json +++ b/packages/components/src/spec-distributions.json @@ -1,18 +1,18 @@ { "$schema": "https://vega.github.io/schema/vega/v5.json", - "description": "A basic area chart example.", + "description": "A basic area chart example", "width": 500, - "height": 200, + "height": 100, "padding": 5, - "data": [{ "name": "con" }, { "name": "dis" }], - - "signals": [ + "data": [ { - "name": "mousex", - "description": "x position of mouse", - "update": "0", - "on": [{ "events": "mousemove", "update": "1-x()/width" }] + "name": "con" }, + { + "name": "dis" + } + ], + "signals": [ { "name": "xscale", "description": "The transform of the x scale", @@ -32,87 +32,150 @@ } } ], - "scales": [ { "name": "xscale", "type": "pow", - "exponent": { "signal": "xscale ? 0.1 : 1" }, + "exponent": { + "signal": "xscale ? 0.1 : 1" + }, "range": "width", "zero": false, "nice": false, "domain": { "fields": [ - { "data": "con", "field": "x" }, - { "data": "dis", "field": "x" } + { + "data": "con", + "field": "x" + }, + { + "data": "dis", + "field": "x" + } ] } }, { "name": "yscale", "type": "pow", - "exponent": { "signal": "yscale ? 0.1 : 1" }, + "exponent": { + "signal": "yscale ? 0.1 : 1" + }, "range": "height", "nice": true, "zero": true, "domain": { "fields": [ - { "data": "con", "field": "y" }, - { "data": "dis", "field": "y" } + { + "data": "con", + "field": "y" + }, + { + "data": "dis", + "field": "y" + } ] } } ], - - "axes": [{ "orient": "bottom", "scale": "xscale", "tickCount": 20 }], - + "axes": [ + { + "orient": "bottom", + "scale": "xscale", + "labelColor": "#666", + "tickColor": "#ddd", + "format": "~s", + "tickCount": 20 + } + ], "marks": [ { "type": "area", - "from": { "data": "con" }, + "from": { + "data": "con" + }, "encode": { - "enter": { - "tooltip": { "signal": "datum.cdf" } - }, "update": { - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "y" }, - "y2": { "scale": "yscale", "value": 0 }, - "fill": { - "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#1b6fac'}, {offset: 1.0, color: '#1b6fac'} ] }", - "color": "#000" + "x": { + "scale": "xscale", + "field": "x" }, - "interpolate": { "value": "monotone" }, - "fillOpacity": { "value": 1 } + "y": { + "scale": "yscale", + "field": "y" + }, + "y2": { + "scale": "yscale", + "value": 0 + }, + "fill": { + "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#4C78A8'}] }" + }, + "interpolate": { + "value": "monotone" + }, + "fillOpacity": { + "value": 1 + } } } }, { "type": "rect", - "from": { "data": "dis" }, + "from": { + "data": "dis" + }, "encode": { "enter": { - "y2": { "scale": "yscale", "value": 0 }, - "width": { "value": 1 } + "y2": { + "scale": "yscale", + "value": 0 + }, + "width": { + "value": 1 + } }, "update": { - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "y" } + "x": { + "scale": "xscale", + "field": "x" + }, + "y": { + "scale": "yscale", + "field": "y" + } } } }, { "type": "symbol", - "from": { "data": "dis" }, + "from": { + "data": "dis" + }, "encode": { "enter": { - "shape": { "value": "circle" }, - "width": { "value": 5 }, - "tooltip": { "signal": "datum.y" } + "shape": { + "value": "circle" + }, + "width": { + "value": 5 + }, + "tooltip": { + "signal": "datum.y" + } }, "update": { - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "y" } + "x": { + "scale": "xscale", + "field": "x" + }, + "y": { + "scale": "yscale", + "field": "y" + }, + "fill": { + "value": "#1e4577" + } } } } diff --git a/packages/components/src/spec-percentiles.json b/packages/components/src/spec-percentiles.json index c3b0a21f..64b9035d 100644 --- a/packages/components/src/spec-percentiles.json +++ b/packages/components/src/spec-percentiles.json @@ -7,7 +7,12 @@ { "name": "facet", "values": [], - "format": { "type": "json", "parse": { "timestamp": "date" } } + "format": { + "type": "json", + "parse": { + "timestamp": "date" + } + } }, { "name": "table", @@ -70,7 +75,10 @@ "name": "xscale", "type": "linear", "nice": true, - "domain": { "data": "facet", "field": "x" }, + "domain": { + "data": "facet", + "field": "x" + }, "range": "width" }, { @@ -79,7 +87,10 @@ "range": "height", "nice": true, "zero": true, - "domain": { "data": "facet", "field": "p99" } + "domain": { + "data": "facet", + "field": "p99" + } } ], "axes": [ @@ -89,8 +100,20 @@ "grid": false, "tickSize": 2, "encode": { - "grid": { "enter": { "stroke": { "value": "#ccc" } } }, - "ticks": { "enter": { "stroke": { "value": "#ccc" } } } + "grid": { + "enter": { + "stroke": { + "value": "#ccc" + } + } + }, + "ticks": { + "enter": { + "stroke": { + "value": "#ccc" + } + } + } } }, { @@ -100,107 +123,249 @@ "domain": false, "tickSize": 2, "encode": { - "grid": { "enter": { "stroke": { "value": "#ccc" } } }, - "ticks": { "enter": { "stroke": { "value": "#ccc" } } } + "grid": { + "enter": { + "stroke": { + "value": "#ccc" + } + } + }, + "ticks": { + "enter": { + "stroke": { + "value": "#ccc" + } + } + } } } ], "marks": [ { "type": "area", - "from": { "data": "table" }, + "from": { + "data": "table" + }, "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, + "enter": { + "fill": { + "value": "#4C78A8" + } + }, "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p1" }, - "y2": { "scale": "yscale", "field": "p99" }, - "opacity": { "value": 0.05 } + "interpolate": { + "value": "monotone" + }, + "x": { + "scale": "xscale", + "field": "x" + }, + "y": { + "scale": "yscale", + "field": "p1" + }, + "y2": { + "scale": "yscale", + "field": "p99" + }, + "opacity": { + "value": 0.05 + } } } }, { "type": "area", - "from": { "data": "table" }, + "from": { + "data": "table" + }, "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, + "enter": { + "fill": { + "value": "#4C78A8" + } + }, "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p5" }, - "y2": { "scale": "yscale", "field": "p95" }, - "opacity": { "value": 0.1 } + "interpolate": { + "value": "monotone" + }, + "x": { + "scale": "xscale", + "field": "x" + }, + "y": { + "scale": "yscale", + "field": "p5" + }, + "y2": { + "scale": "yscale", + "field": "p95" + }, + "opacity": { + "value": 0.1 + } } } }, { "type": "area", - "from": { "data": "table" }, + "from": { + "data": "table" + }, "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, + "enter": { + "fill": { + "value": "#4C78A8" + } + }, "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p10" }, - "y2": { "scale": "yscale", "field": "p90" }, - "opacity": { "value": 0.15 } + "interpolate": { + "value": "monotone" + }, + "x": { + "scale": "xscale", + "field": "x" + }, + "y": { + "scale": "yscale", + "field": "p10" + }, + "y2": { + "scale": "yscale", + "field": "p90" + }, + "opacity": { + "value": 0.15 + } } } }, { "type": "area", - "from": { "data": "table" }, + "from": { + "data": "table" + }, "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, + "enter": { + "fill": { + "value": "#4C78A8" + } + }, "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p20" }, - "y2": { "scale": "yscale", "field": "p80" }, - "opacity": { "value": 0.2 } + "interpolate": { + "value": "monotone" + }, + "x": { + "scale": "xscale", + "field": "x" + }, + "y": { + "scale": "yscale", + "field": "p20" + }, + "y2": { + "scale": "yscale", + "field": "p80" + }, + "opacity": { + "value": 0.2 + } } } }, { "type": "area", - "from": { "data": "table" }, + "from": { + "data": "table" + }, "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, + "enter": { + "fill": { + "value": "#4C78A8" + } + }, "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p30" }, - "y2": { "scale": "yscale", "field": "p70" }, - "opacity": { "value": 0.2 } + "interpolate": { + "value": "monotone" + }, + "x": { + "scale": "xscale", + "field": "x" + }, + "y": { + "scale": "yscale", + "field": "p30" + }, + "y2": { + "scale": "yscale", + "field": "p70" + }, + "opacity": { + "value": 0.2 + } } } }, { "type": "area", - "from": { "data": "table" }, + "from": { + "data": "table" + }, "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, + "enter": { + "fill": { + "value": "#4C78A8" + } + }, "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p40" }, - "y2": { "scale": "yscale", "field": "p60" }, - "opacity": { "value": 0.2 } + "interpolate": { + "value": "monotone" + }, + "x": { + "scale": "xscale", + "field": "x" + }, + "y": { + "scale": "yscale", + "field": "p40" + }, + "y2": { + "scale": "yscale", + "field": "p60" + }, + "opacity": { + "value": 0.2 + } } } }, { "type": "line", - "from": { "data": "table" }, + "from": { + "data": "table" + }, "encode": { "update": { - "interpolate": { "value": "monotone" }, - "stroke": { "value": "#4C78A8" }, - "strokeWidth": { "value": 2 }, - "opacity": { "value": 0.8 }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p50" } + "interpolate": { + "value": "monotone" + }, + "stroke": { + "value": "#4C78A8" + }, + "strokeWidth": { + "value": 2 + }, + "opacity": { + "value": 0.8 + }, + "x": { + "scale": "xscale", + "field": "x" + }, + "y": { + "scale": "yscale", + "field": "p50" + } } } } diff --git a/packages/components/src/stories/Introduction.stories.mdx b/packages/components/src/stories/Introduction.stories.mdx index db08d6f5..525c12bb 100644 --- a/packages/components/src/stories/Introduction.stories.mdx +++ b/packages/components/src/stories/Introduction.stories.mdx @@ -2,8 +2,5 @@ import { Meta } from "@storybook/addon-docs"; -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. +This is the component library for Squiggle. These are React +components, and can be used in any application that you see fit. \ No newline at end of file diff --git a/packages/components/src/stories/NumberShower.stories.mdx b/packages/components/src/stories/NumberShower.stories.mdx new file mode 100644 index 00000000..5f040be5 --- /dev/null +++ b/packages/components/src/stories/NumberShower.stories.mdx @@ -0,0 +1,60 @@ +import { NumberShower } from "../NumberShower"; +import { Canvas, Meta, Story, Props } from "@storybook/addon-docs"; + + + +# Number Shower + +The number shower is a simple component to display a number. + +It uses the symbols "K", "M", "B", and "T", to represent thousands, millions, billions, and trillions. Outside of that range, it uses scientific notation. + + + + {args => } + + + + + + {args => } + + + + + + {args => } + + + + + + {args => } + + + + diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx index ad76b880..76c40228 100644 --- a/packages/components/src/stories/SquiggleChart.stories.mdx +++ b/packages/components/src/stories/SquiggleChart.stories.mdx @@ -18,7 +18,7 @@ could be continuous, discrete or mixed. ## Distributions -An example of a normal distribution is: +### Continuous Distributions -An example of a Discrete distribution is: +### Discrete Distributions {Template.bind({})} -An example of a Mixed distribution is: +## Mixed distributions {Template.bind({})} @@ -66,7 +66,7 @@ to allow large and small numbers being printed cleanly. {Template.bind({})} @@ -75,14 +75,28 @@ to allow large and small numbers being printed cleanly. ## Functions -Finally, a function can be returned, and this shows how the distribution changes -over the axis between x = 0 and 10. +Full functions can be returned. These plot out the results of distributions between a set of x-coordinates. + +The default is show 10 points between 0 and 10. + {Template.bind({})} + + + +## Errors + + + {Template.bind({})} diff --git a/yarn.lock b/yarn.lock index 6d0a7619..ce5accca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -283,7 +283,7 @@ jsesc "^2.5.1" source-map "^0.5.0" -"@babel/helper-annotate-as-pure@^7.16.7": +"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862" integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw== @@ -409,7 +409,7 @@ dependencies: "@babel/types" "^7.17.0" -"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7": +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7": version "7.16.7" resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz" integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg== @@ -1354,7 +1354,7 @@ "@babel/parser" "^7.16.7" "@babel/types" "^7.16.7" -"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.9": +"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.9", "@babel/traverse@^7.4.5": version "7.17.9" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d" integrity sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw== @@ -1914,11 +1914,23 @@ dependencies: "@emotion/memoize" "0.7.4" +"@emotion/is-prop-valid@^1.1.0": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95" + integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/memoize@0.7.4": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== +"@emotion/memoize@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" + integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== + "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16": version "0.11.16" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad" @@ -1953,12 +1965,12 @@ "@emotion/styled-base" "^10.3.0" babel-plugin-emotion "^10.0.27" -"@emotion/stylis@0.8.5": +"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== -"@emotion/unitless@0.7.5": +"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== @@ -5418,6 +5430,17 @@ babel-plugin-react-docgen@^4.1.0, babel-plugin-react-docgen@^4.2.1: lodash "^4.17.15" react-docgen "^5.0.0" +"babel-plugin-styled-components@>= 1.12.0": + version "2.0.6" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.6.tgz#6f76c7f7224b7af7edc24a4910351948c691fc90" + integrity sha512-Sk+7o/oa2HfHv3Eh8sxoz75/fFvEdHsXV4grdeHufX0nauCmymlnN0rGhIvfpMQSJMvGutJ85gvCGea4iqmDpg== + dependencies: + "@babel/helper-annotate-as-pure" "^7.16.0" + "@babel/helper-module-imports" "^7.16.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + picomatch "^2.3.0" + babel-plugin-syntax-jsx@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -6002,6 +6025,11 @@ camelcase@^6.2.0, camelcase@^6.2.1: resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz" integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== +camelize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" + integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= + caniuse-api@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0" @@ -6790,6 +6818,11 @@ css-blank-pseudo@^3.0.3: dependencies: postcss-selector-parser "^6.0.9" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= + css-declaration-sorter@^6.2.2: version "6.2.2" resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz#bfd2f6f50002d6a3ae779a87d3a0c5d5b10e0f02" @@ -6904,6 +6937,15 @@ css-select@~1.2.0: domutils "1.5.1" nth-check "~1.0.1" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-tree@1.0.0-alpha.37: version "1.0.0-alpha.37" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22" @@ -9395,7 +9437,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -11268,7 +11310,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@4.17.21, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0: +lodash@4.17.21, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0: version "4.17.21" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -13266,7 +13308,7 @@ postcss-unique-selectors@^5.1.1: dependencies: postcss-selector-parser "^6.0.5" -postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: +postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== @@ -15836,6 +15878,22 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +styled-components@^5.3.5: + version "5.3.5" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4" + integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^1.1.0" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1.12.0" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + stylehacks@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.0.tgz#a40066490ca0caca04e96c6b02153ddc39913520" @@ -15849,7 +15907,7 @@ supports-color@^2.0.0: resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^5.3.0: +supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==