diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 382dd55b..94e5c796 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -100,7 +100,7 @@ jobs: uses: creyD/prettier_action@v4.2 with: dry: true - prettier_options: --check packages/components + prettier_options: --check packages/components --ignore-path packages/components/.prettierignore components-bundle-build: name: Components bundle and build diff --git a/packages/components/.prettierignore b/packages/components/.prettierignore index 5e03c80e..6639ced4 100644 --- a/packages/components/.prettierignore +++ b/packages/components/.prettierignore @@ -1,2 +1,3 @@ dist/ storybook-static +src/styles/base.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 }) => (