Move from styled-components to tailwind
This commit is contained in:
Sam Nolan
parent
9320e831ff
commit
ed6eb54165
|
|
@ -1,3 +1,4 @@
|
|||
import "../src/tailwind.css";
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
"react-hook-form": "^7.31.2",
|
||||
"react-use": "^17.4.0",
|
||||
"react-vega": "^7.5.1",
|
||||
"styled-components": "^5.3.5",
|
||||
"vega": "^5.22.1",
|
||||
"vega-embed": "^6.20.6",
|
||||
"vega-lite": "^5.2.0",
|
||||
|
|
@ -42,6 +41,7 @@
|
|||
"cross-env": "^7.0.3",
|
||||
"react-scripts": "^5.0.1",
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"ts-loader": "^9.3.0",
|
||||
"tsconfig-paths-webpack-plugin": "^3.5.2",
|
||||
"typescript": "^4.6.3",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ import {
|
|||
linearYScale,
|
||||
expYScale,
|
||||
} from "./DistributionVegaScales";
|
||||
import styled from "styled-components";
|
||||
import { NumberShower } from "./NumberShower";
|
||||
|
||||
type DistributionChartProps = {
|
||||
|
|
@ -66,7 +65,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
|||
}
|
||||
|
||||
var result = (
|
||||
<ChartContainer width={widthProp + "px"}>
|
||||
<div style={{ width: widthProp + "px" }}>
|
||||
<Vega
|
||||
spec={spec}
|
||||
data={{ con: shape.value.continuous, dis: shape.value.discrete }}
|
||||
|
|
@ -74,14 +73,16 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
|||
height={height}
|
||||
actions={false}
|
||||
/>
|
||||
<div className="flex justify-center">
|
||||
{showSummary && <SummaryTable distribution={distribution} />}
|
||||
</div>
|
||||
{showControls && (
|
||||
<div>
|
||||
{logCheckbox}
|
||||
<CheckBox label="Exp Y scale" value={isExpY} onChange={setExpY} />
|
||||
</div>
|
||||
)}
|
||||
</ChartContainer>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
var result = (
|
||||
|
|
@ -96,12 +97,6 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
|||
return sized;
|
||||
};
|
||||
|
||||
type ChartContainerProps = { width: string };
|
||||
|
||||
let ChartContainer = styled.div<ChartContainerProps>`
|
||||
width: ${(props) => props.width};
|
||||
`;
|
||||
|
||||
function buildVegaSpec(isLogX: boolean, isExpY: boolean): VisualizationSpec {
|
||||
return {
|
||||
...chartSpecification,
|
||||
|
|
@ -120,10 +115,6 @@ interface CheckBoxProps {
|
|||
tooltip?: string;
|
||||
}
|
||||
|
||||
const Label = styled.label<{ disabled: boolean }>`
|
||||
${(props) => props.disabled && "color: #999;"}
|
||||
`;
|
||||
|
||||
export const CheckBox = ({
|
||||
label,
|
||||
onChange,
|
||||
|
|
@ -139,7 +130,7 @@ export const CheckBox = ({
|
|||
onChange={() => onChange(!value)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<Label disabled={disabled}>{label}</Label>
|
||||
<label className={disabled ? "text-slate-400" : ""}> {label}</label>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
|
@ -148,34 +139,6 @@ type SummaryTableProps = {
|
|||
distribution: Distribution;
|
||||
};
|
||||
|
||||
const Table = styled.table`
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
border-style: hidden;
|
||||
`;
|
||||
|
||||
const TableHead = styled.thead`
|
||||
border-bottom: 1px solid rgb(141 149 167);
|
||||
`;
|
||||
|
||||
const TableHeadCell = styled.th`
|
||||
border-right: 1px solid rgb(141 149 167);
|
||||
border-left: 1px solid rgb(141 149 167);
|
||||
padding: 0.3em;
|
||||
`;
|
||||
|
||||
const TableBody = styled.tbody``;
|
||||
|
||||
const Row = styled.tr``;
|
||||
|
||||
const Cell = styled.td`
|
||||
padding: 0.3em;
|
||||
border-right: 1px solid rgb(141 149 167);
|
||||
border-left: 1px solid rgb(141 149 167);
|
||||
`;
|
||||
|
||||
const SummaryTable: React.FC<SummaryTableProps> = ({
|
||||
distribution,
|
||||
}: SummaryTableProps) => {
|
||||
|
|
@ -201,10 +164,17 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
|
|||
}
|
||||
};
|
||||
|
||||
let TableHeadCell: React.FC<{}> = ({ children }) => (
|
||||
<th className="border border-slate-400 bg-slate-50 p-4">{children}</th>
|
||||
);
|
||||
let Cell: React.FC<{}> = ({ children }) => (
|
||||
<td className="border border-slate-400 p-4">{children}</td>
|
||||
);
|
||||
|
||||
return (
|
||||
<Table>
|
||||
<TableHead>
|
||||
<Row>
|
||||
<table className="border border-collapse border-slate-400">
|
||||
<thead className="bg-slate-50">
|
||||
<tr>
|
||||
<TableHeadCell>{"Mean"}</TableHeadCell>
|
||||
<TableHeadCell>{"5%"}</TableHeadCell>
|
||||
<TableHeadCell>{"10%"}</TableHeadCell>
|
||||
|
|
@ -213,10 +183,10 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
|
|||
<TableHeadCell>{"75%"}</TableHeadCell>
|
||||
<TableHeadCell>{"90%"}</TableHeadCell>
|
||||
<TableHeadCell>{"95%"}</TableHeadCell>
|
||||
</Row>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<Row>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<Cell>{unwrapResult(mean)}</Cell>
|
||||
<Cell>{unwrapResult(p5)}</Cell>
|
||||
<Cell>{unwrapResult(p10)}</Cell>
|
||||
|
|
@ -225,8 +195,8 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
|
|||
<Cell>{unwrapResult(p75)}</Cell>
|
||||
<Cell>{unwrapResult(p90)}</Cell>
|
||||
<Cell>{unwrapResult(p95)}</Cell>
|
||||
</Row>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,20 +1,12 @@
|
|||
import * as React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
const ShowError = styled.div`
|
||||
border: 1px solid #792e2e;
|
||||
background: #eee2e2;
|
||||
padding: 0.4em 0.8em;
|
||||
`;
|
||||
|
||||
export const ErrorBox: React.FC<{
|
||||
heading: string;
|
||||
children: React.ReactNode;
|
||||
}> = ({ heading = "Error", children }) => {
|
||||
return (
|
||||
<ShowError>
|
||||
<div className="border border-red-200 bg-gray-50 p-4">
|
||||
<h3>{heading}</h3>
|
||||
{children}
|
||||
</ShowError>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import * as React from "react";
|
||||
import _ from "lodash";
|
||||
import styled from "styled-components";
|
||||
import {
|
||||
run,
|
||||
errorValueToString,
|
||||
|
|
@ -11,7 +10,6 @@ import {
|
|||
defaultImports,
|
||||
defaultBindings,
|
||||
defaultEnvironment,
|
||||
declarationArg,
|
||||
declaration,
|
||||
} from "@quri/squiggle-lang";
|
||||
import { NumberShower } from "./NumberShower";
|
||||
|
|
@ -41,24 +39,6 @@ function getChartSettings<a>(x: declaration<a>): FunctionChartSettings {
|
|||
};
|
||||
}
|
||||
|
||||
const variableBox = {
|
||||
Component: styled.div`
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 0.4em;
|
||||
`,
|
||||
Heading: styled.div`
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em;
|
||||
padding-top: 0.1em;
|
||||
`,
|
||||
Body: styled.div`
|
||||
padding: 0.4em 0.8em;
|
||||
`,
|
||||
};
|
||||
|
||||
interface VariableBoxProps {
|
||||
heading: string;
|
||||
children: React.ReactNode;
|
||||
|
|
@ -72,20 +52,18 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
|
|||
}: VariableBoxProps) => {
|
||||
if (showTypes) {
|
||||
return (
|
||||
<variableBox.Component>
|
||||
<variableBox.Heading>
|
||||
<div className="bg-white border border-grey-200 m-2">
|
||||
<div className="border-b border-grey-200 p-3">
|
||||
<h3>{heading}</h3>
|
||||
</variableBox.Heading>
|
||||
<variableBox.Body>{children}</variableBox.Body>
|
||||
</variableBox.Component>
|
||||
</div>
|
||||
<div className="p-3">{children}</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <div>{children}</div>;
|
||||
}
|
||||
};
|
||||
|
||||
let RecordKeyHeader = styled.h3``;
|
||||
|
||||
export interface SquiggleItemProps {
|
||||
/** The input string for squiggle */
|
||||
expression: squiggleExpression;
|
||||
|
|
@ -192,7 +170,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
<VariableBox heading="Record" showTypes={showTypes}>
|
||||
{Object.entries(expression.value).map(([key, r]) => (
|
||||
<div key={key}>
|
||||
<RecordKeyHeader>{key}</RecordKeyHeader>
|
||||
<h3>{key}</h3>
|
||||
<SquiggleItem
|
||||
expression={r}
|
||||
width={width !== undefined ? width - 20 : width}
|
||||
|
|
@ -287,12 +265,6 @@ export interface SquiggleChartProps {
|
|||
showControls?: boolean;
|
||||
}
|
||||
|
||||
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";
|
||||
`;
|
||||
|
||||
let defaultChartSettings = { start: 0, stop: 10, count: 20 };
|
||||
|
||||
export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||
|
|
@ -333,5 +305,5 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
</ErrorBox>
|
||||
);
|
||||
}
|
||||
return <ChartWrapper>{internal}</ChartWrapper>;
|
||||
return internal;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import * as React from "react";
|
|||
import * as ReactDOM from "react-dom";
|
||||
import { SquiggleChart } from "./SquiggleChart";
|
||||
import { CodeEditor } from "./CodeEditor";
|
||||
import styled from "styled-components";
|
||||
import type {
|
||||
squiggleExpression,
|
||||
environment,
|
||||
|
|
@ -44,12 +43,6 @@ export interface SquiggleEditorProps {
|
|||
showSummary?: boolean;
|
||||
}
|
||||
|
||||
const Input = styled.div`
|
||||
border: 1px solid #ddd;
|
||||
padding: 0.3em 0.3em;
|
||||
margin-bottom: 1em;
|
||||
`;
|
||||
|
||||
export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
||||
initialSquiggleString = "",
|
||||
width,
|
||||
|
|
@ -72,7 +65,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
|||
};
|
||||
return (
|
||||
<div>
|
||||
<Input>
|
||||
<div className="border border-grey-200 p-2 m-4">
|
||||
<CodeEditor
|
||||
value={expression}
|
||||
onChange={setExpression}
|
||||
|
|
@ -80,7 +73,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
|||
showGutter={false}
|
||||
height={20}
|
||||
/>
|
||||
</Input>
|
||||
</div>
|
||||
<SquiggleChart
|
||||
width={width}
|
||||
environment={environment}
|
||||
|
|
@ -179,7 +172,7 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
|
|||
|
||||
return (
|
||||
<div>
|
||||
<Input>
|
||||
<div className="border border-grey-200 p-2 m-4">
|
||||
<CodeEditor
|
||||
value={expression}
|
||||
onChange={setExpression}
|
||||
|
|
@ -187,7 +180,7 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
|
|||
showGutter={false}
|
||||
height={20}
|
||||
/>
|
||||
</Input>
|
||||
</div>
|
||||
{error !== null ? <ErrorBox heading="Error">{error}</ErrorBox> : <></>}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,80 +4,35 @@ import ReactDOM from "react-dom";
|
|||
import { SquiggleChart } from "./SquiggleChart";
|
||||
import CodeEditor from "./CodeEditor";
|
||||
import JsonEditor from "./JsonEditor";
|
||||
import styled from "styled-components";
|
||||
import { useForm, useWatch } from "react-hook-form";
|
||||
import * as yup from "yup";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { defaultBindings, environment } from "@quri/squiggle-lang";
|
||||
|
||||
interface FieldFloatProps {
|
||||
label: string;
|
||||
className?: string;
|
||||
value: number;
|
||||
onChange: (value: number) => void;
|
||||
interface ShowBoxProps {
|
||||
height: number;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const Input = styled.input``;
|
||||
|
||||
const FormItem = (props: { label: string; children: ReactElement }) => (
|
||||
<div>
|
||||
<label>{props.label}</label>
|
||||
{props.children}
|
||||
const ShowBox: React.FC<ShowBoxProps> = ({ height, children }) => (
|
||||
<div className="border border-grey-100" style={{ height: height + "px" }}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
function FieldFloat(Props: FieldFloatProps) {
|
||||
let [contents, setContents] = useState(Props.value + "");
|
||||
return (
|
||||
<FormItem label={Props.label}>
|
||||
<Input
|
||||
value={contents}
|
||||
className={Props.className ? Props.className : ""}
|
||||
onChange={(e) => {
|
||||
setContents(e.target.value);
|
||||
let result = parseFloat(contents);
|
||||
if (_.isFinite(result)) {
|
||||
Props.onChange(result);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FormItem>
|
||||
);
|
||||
}
|
||||
|
||||
interface ShowBoxProps {
|
||||
height: number;
|
||||
}
|
||||
|
||||
const ShowBox = styled.div<ShowBoxProps>`
|
||||
border: 1px solid #eee;
|
||||
border-radius: 2px;
|
||||
height: ${(props) => props.height};
|
||||
`;
|
||||
|
||||
interface TitleProps {
|
||||
readonly maxHeight: number;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const Display = styled.div<TitleProps>`
|
||||
background: #f6f6f6;
|
||||
border-left: 1px solid #eee;
|
||||
height: 100vh;
|
||||
padding: 3px;
|
||||
overflow-y: auto;
|
||||
max-height: ${(props) => props.maxHeight}px;
|
||||
`;
|
||||
|
||||
interface RowProps {
|
||||
readonly leftPercentage: number;
|
||||
}
|
||||
|
||||
const Row = styled.div<RowProps>`
|
||||
display: grid;
|
||||
grid-template-columns: ${(p) => p.leftPercentage}% ${(p) =>
|
||||
100 - p.leftPercentage}%;
|
||||
`;
|
||||
const Col = styled.div``;
|
||||
const Display: React.FC<TitleProps> = ({ maxHeight, children }) => (
|
||||
<div
|
||||
className="bg-gray-50 border-l border-grey-100 p-2"
|
||||
style={{ maxHeight: maxHeight + "px" }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
interface PlaygroundProps {
|
||||
/** The initial squiggle string to put in the playground */
|
||||
|
|
@ -158,11 +113,7 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
stop: diagramStop,
|
||||
count: diagramCount,
|
||||
};
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
control,
|
||||
} = useForm({
|
||||
const { register, control } = useForm({
|
||||
resolver: yupResolver(schema),
|
||||
defaultValues: {
|
||||
sampleCount: 1000,
|
||||
|
|
@ -194,8 +145,8 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
return (
|
||||
<ShowBox height={height}>
|
||||
<input type="checkbox" {...register("showSettingsPage")} />
|
||||
<Row leftPercentage={vars.leftSizePercent || 50}>
|
||||
<Col>
|
||||
<div className="columns-2">
|
||||
<div className="break-inside-avoid">
|
||||
{vars.showSettingsPage ? (
|
||||
<>
|
||||
<InputItem label="Sample Count">
|
||||
|
|
@ -247,8 +198,8 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
height={height - 3}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
<Col>
|
||||
</div>
|
||||
<div>
|
||||
<Display maxHeight={height - 3}>
|
||||
<SquiggleChart
|
||||
squiggleString={squiggleString}
|
||||
|
|
@ -262,8 +213,8 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
showSummary={vars.showSummary}
|
||||
/>
|
||||
</Display>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</ShowBox>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import SquigglePlayground from "../components/SquigglePlayground";
|
||||
import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
|
||||
import styled from "styled-components";
|
||||
|
||||
<Meta title="Squiggle/SquigglePlayground" component={SquigglePlayground} />
|
||||
|
||||
|
|
|
|||
3
packages/components/src/tailwind.css
Normal file
3
packages/components/src/tailwind.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
7
packages/components/tailwind.config.js
Normal file
7
packages/components/tailwind.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
content: ["./src/**/*.{html,tsx,ts,js,jsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
89
yarn.lock
89
yarn.lock
|
|
@ -220,7 +220,7 @@
|
|||
"@jridgewell/gen-mapping" "^0.1.0"
|
||||
jsesc "^2.5.1"
|
||||
|
||||
"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.16.7":
|
||||
"@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==
|
||||
|
|
@ -330,7 +330,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.0", "@babel/helper-module-imports@^7.16.7":
|
||||
"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
|
||||
integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
|
||||
|
|
@ -1261,7 +1261,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.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2":
|
||||
"@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.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9", "@babel/traverse@^7.7.2":
|
||||
version "7.17.10"
|
||||
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
|
||||
integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==
|
||||
|
|
@ -1784,28 +1784,6 @@
|
|||
url-loader "^4.1.1"
|
||||
webpack "^5.72.0"
|
||||
|
||||
"@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.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
|
||||
integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
|
||||
|
||||
"@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.4":
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
|
||||
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
|
||||
|
||||
"@eslint/eslintrc@^1.2.3":
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.3.tgz#fcaa2bcef39e13d6e9e7f6271f4cc7cae1174886"
|
||||
|
|
@ -5595,22 +5573,6 @@ 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.7"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
|
||||
integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
|
||||
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"
|
||||
integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
|
||||
|
||||
babel-plugin-transform-es2015-modules-commonjs@^6.26.2:
|
||||
version "6.26.2"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
|
||||
|
|
@ -6234,11 +6196,6 @@ camelcase@^6.2.0, camelcase@^6.2.1:
|
|||
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
|
||||
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"
|
||||
|
|
@ -7042,11 +6999,6 @@ 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"
|
||||
|
|
@ -7169,15 +7121,6 @@ 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"
|
||||
|
|
@ -9713,7 +9656,7 @@ hmac-drbg@^1.0.1:
|
|||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.1"
|
||||
|
||||
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.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==
|
||||
|
|
@ -11723,7 +11666,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.11, 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.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.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
|
@ -13829,7 +13772,7 @@ postcss-unique-selectors@^5.1.1:
|
|||
dependencies:
|
||||
postcss-selector-parser "^6.0.5"
|
||||
|
||||
postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
|
||||
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==
|
||||
|
|
@ -16176,22 +16119,6 @@ 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"
|
||||
|
|
@ -16210,7 +16137,7 @@ supports-color@^2.0.0:
|
|||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
|
||||
integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
|
||||
|
||||
supports-color@^5.3.0, supports-color@^5.5.0:
|
||||
supports-color@^5.3.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
|
||||
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
|
||||
|
|
@ -16301,7 +16228,7 @@ synchronous-promise@^2.0.15:
|
|||
resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
|
||||
integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
|
||||
|
||||
tailwindcss@^3.0.2:
|
||||
tailwindcss@^3.0.2, tailwindcss@^3.0.24:
|
||||
version "3.0.24"
|
||||
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.24.tgz#22e31e801a44a78a1d9a81ecc52e13b69d85704d"
|
||||
integrity sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user