From d812084614722d65e324e3f04e5026c38a564b2b Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Thu, 9 Jun 2022 23:57:45 +0300 Subject: [PATCH 1/3] scoped tailwind preflight, top-level .squiggle wrapper --- packages/components/.storybook/preview.js | 13 +- packages/components/package.json | 4 +- packages/components/postcss.config.js | 2 + packages/components/src/components/Alert.tsx | 9 +- .../src/components/DistributionChart.tsx | 4 +- .../src/components/SquiggleContainer.tsx | 25 + .../src/components/SquiggleEditor.tsx | 71 +-- .../src/components/SquigglePlayground.tsx | 114 ++-- packages/components/src/index.ts | 1 + packages/components/src/styles/base.css | 510 ++++++++++++++++++ packages/components/src/styles/main.css | 8 + packages/components/src/tailwind.css | 4 - packages/components/tailwind.config.js | 1 + packages/components/webpack.config.js | 2 +- packages/website/package.json | 1 - yarn.lock | 325 ++++------- 16 files changed, 775 insertions(+), 319 deletions(-) create mode 100644 packages/components/src/components/SquiggleContainer.tsx create mode 100644 packages/components/src/styles/base.css create mode 100644 packages/components/src/styles/main.css delete mode 100644 packages/components/src/tailwind.css diff --git a/packages/components/.storybook/preview.js b/packages/components/.storybook/preview.js index afd31ccf..a128782c 100644 --- a/packages/components/.storybook/preview.js +++ b/packages/components/.storybook/preview.js @@ -1,4 +1,15 @@ -import "../src/tailwind.css"; +import "../src/styles/main.css"; +import "!style-loader!css-loader!postcss-loader!../src/styles/main.css"; +import { SquiggleContainer } from "../src/components/SquiggleContainer"; + +export const decorators = [ + (Story) => ( + + + + ), +]; + export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { diff --git a/packages/components/package.json b/packages/components/package.json index 62735a76..e5023e10 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -43,6 +43,8 @@ "@types/webpack": "^5.28.0", "cross-env": "^7.0.3", "mini-css-extract-plugin": "^2.6.0", + "postcss-cli": "^9.1.0", + "postcss-import": "^14.1.0", "postcss-loader": "^7.0.0", "react-scripts": "^5.0.1", "style-loader": "^3.3.1", @@ -57,7 +59,7 @@ }, "scripts": { "start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public", - "build": "tsc -b && tailwindcss -i ./src/tailwind.css -o ./dist/main.css && build-storybook -s public", + "build": "tsc -b && postcss ./src/styles/main.css -o ./dist/main.css && build-storybook -s public", "bundle": "webpack", "all": "yarn bundle && yarn build", "lint": "prettier --check .", diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js index 3691aac9..74eecfcd 100644 --- a/packages/components/postcss.config.js +++ b/packages/components/postcss.config.js @@ -1,5 +1,7 @@ module.exports = { plugins: { + "postcss-import": {}, + "tailwindcss/nesting": {}, tailwindcss: {}, autoprefixer: {}, cssnano: {}, diff --git a/packages/components/src/components/Alert.tsx b/packages/components/src/components/Alert.tsx index 590b1cca..bc2e2f92 100644 --- a/packages/components/src/components/Alert.tsx +++ b/packages/components/src/components/Alert.tsx @@ -4,6 +4,7 @@ import { InformationCircleIcon, CheckCircleIcon, } from "@heroicons/react/solid"; +import clsx from "clsx"; export const Alert: React.FC<{ heading: string; @@ -23,18 +24,18 @@ export const Alert: React.FC<{ children, }) => { return ( -
+
diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx index 276e73d5..4069165b 100644 --- a/packages/components/src/components/DistributionChart.tsx +++ b/packages/components/src/components/DistributionChart.tsx @@ -9,6 +9,8 @@ import { Vega, VisualizationSpec } from "react-vega"; import * as chartSpecification from "../vega-specs/spec-distributions.json"; import { ErrorAlert } from "./Alert"; import { useSize } from "react-use"; +import clsx from "clsx"; + import { linearXScale, logXScale, @@ -128,7 +130,7 @@ export const CheckBox: React.FC = ({ onChange={() => onChange(!value)} disabled={disabled} /> - + ); }; diff --git a/packages/components/src/components/SquiggleContainer.tsx b/packages/components/src/components/SquiggleContainer.tsx new file mode 100644 index 00000000..63dbb54a --- /dev/null +++ b/packages/components/src/components/SquiggleContainer.tsx @@ -0,0 +1,25 @@ +import React, { useContext } from "react"; + +type Props = { + children: React.ReactNode; +}; + +type SquiggleContextShape = { + containerized: boolean; +}; +const SquiggleContext = React.createContext({ + containerized: false, +}); + +export const SquiggleContainer: React.FC = ({ children }) => { + const context = useContext(SquiggleContext); + if (context.containerized) { + return <>{children}; + } else { + return ( + +
{children}
+ + ); + } +}; diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index e35de4f5..a8db78af 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -15,6 +15,7 @@ import { defaultBindings, } from "@quri/squiggle-lang"; import { ErrorAlert } from "./Alert"; +import { SquiggleContainer } from "./SquiggleContainer"; export interface SquiggleEditorProps { /** The input string for squiggle */ @@ -64,29 +65,31 @@ export let SquiggleEditor: React.FC = ({ count: diagramCount, }; return ( -
-
- +
+
+ +
+
- -
+ ); }; @@ -171,18 +174,22 @@ export let SquigglePartial: React.FC = ({ React.useEffect(runSquiggleAndUpdateBindings, [expression]); return ( -
-
- + +
+
+ +
+ {error !== null ? ( + {error} + ) : null}
- {error !== null ? {error} : null} -
+ ); }; diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index e0214af6..84939f62 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -10,6 +10,7 @@ import { CogIcon, CurrencyDollarIcon, } from "@heroicons/react/solid"; +import clsx from "clsx"; import { defaultBindings, environment } from "@quri/squiggle-lang"; @@ -17,6 +18,7 @@ import { SquiggleChart } from "./SquiggleChart"; import { CodeEditor } from "./CodeEditor"; import { JsonEditor } from "./JsonEditor"; import { ErrorAlert, SuccessAlert } from "./Alert"; +import { SquiggleContainer } from "./SquiggleContainer"; interface PlaygroundProps { /** The initial squiggle string to put in the playground */ @@ -87,10 +89,6 @@ const schema = yup }) .required(); -function classNames(...classes: string[]) { - return classes.filter(Boolean).join(" "); -} - type StyledTabProps = { name: string; icon: (props: React.ComponentProps<"svg">) => JSX.Element; @@ -102,15 +100,13 @@ const StyledTab: React.FC = ({ name, icon: Icon }) => { {({ selected }) => (