From 540a750611ef65c9e93eb0c94e9667babfb73369 Mon Sep 17 00:00:00 2001 From: Jakob Langdal Date: Fri, 18 Nov 2022 12:21:42 +0000 Subject: [PATCH 1/8] chore: migrate to tss-react mui/styles have depreceated JSS support --- package.json | 2 +- .../data-points/data-points.style.ts | 4 +- src/components/data-points/data-points.tsx | 2 +- .../editable-table-cell.style.ts | 4 +- .../editable-table/editable-table-cell.tsx | 2 +- .../editable-table-collapsed-row.style.ts | 4 +- .../editable-table-collapsed-row.tsx | 2 +- .../editable-table-expanded-row.style.ts | 4 +- .../editable-table-expanded-row.tsx | 2 +- .../editable-table/editable-table.style.ts | 4 +- .../editable-table/editable-table.tsx | 2 +- src/components/experiment/experiment.style.ts | 4 +- src/components/experiment/experiment.tsx | 2 +- .../experiment/loading-experiment.style.ts | 4 +- .../experiment/loading-experiment.tsx | 2 +- .../experiment/tabbed-experiment.tsx | 2 +- src/components/home/home.style.ts | 4 +- src/components/home/home.tsx | 2 +- .../input-model/categorical-variable.style.ts | 4 +- .../input-model/categorical-variable.tsx | 2 +- .../input-model/optimizer-model.style.ts | 4 +- .../input-model/optimizer-model.tsx | 2 +- .../input-model/value-variable.style.ts | 4 +- src/components/input-model/value-variable.tsx | 2 +- .../input-model/variable-editor.style.ts | 4 +- .../input-model/variable-editor.tsx | 2 +- .../json-editor/json-editor.style.ts | 4 +- src/components/json-editor/json-editor.tsx | 2 +- src/components/layout/layout.style.ts | 4 +- src/components/layout/layout.tsx | 2 +- .../loading-button/loading-button.style.ts | 4 +- .../loading-button/loading-button.tsx | 2 +- src/components/plots/plot-item.style.ts | 4 +- src/components/plots/plot-item.tsx | 2 +- src/components/plots/plot-list.style.ts | 4 +- src/components/plots/plot-list.tsx | 2 +- src/components/plots/plots.style.ts | 4 +- src/components/plots/plots.tsx | 2 +- .../experimentation-guide.style.ts | 4 +- .../result-data/experimentation-guide.tsx | 2 +- .../result-data/single-data-point.style.ts | 4 +- .../result-data/single-data-point.tsx | 2 +- .../result-data/suggestions.style.ts | 4 +- src/components/result-data/suggestions.tsx | 2 +- .../summary-configuration.style.ts | 4 +- .../summary-configuration.tsx | 2 +- .../theme-selector/theme-selector.style.ts | 4 +- .../theme-selector/theme-selector.tsx | 2 +- src/components/title-card/title-card.style.ts | 4 +- src/components/title-card/title-card.tsx | 2 +- yarn.lock | 186 +++++++----------- 51 files changed, 142 insertions(+), 192 deletions(-) diff --git a/package.json b/package.json index 462c57aa..0e18bc58 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "@mui/icons-material": "^5.8.4", "@mui/lab": "^5.0.0-alpha.87", "@mui/material": "^5.8.6", - "@mui/styles": "^5.8.6", "@types/recharts": "^1.8.23", "compare-versions": "^4.1.3", "eslint-config-prettier": "8.5.0", @@ -39,6 +38,7 @@ "react-hook-form": "^7.33.0", "recharts": "^2.1.12", "swr": "^1.3.0", + "tss-react": "^4.4.4", "uuid": "^8.3.2" }, "devDependencies": { diff --git a/src/components/data-points/data-points.style.ts b/src/components/data-points/data-points.style.ts index acfa8367..ef35b190 100644 --- a/src/components/data-points/data-points.style.ts +++ b/src/components/data-points/data-points.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ tableContainer: { overflowX: 'auto', }, diff --git a/src/components/data-points/data-points.tsx b/src/components/data-points/data-points.tsx index 6b069893..6d9bb0bb 100644 --- a/src/components/data-points/data-points.tsx +++ b/src/components/data-points/data-points.tsx @@ -33,7 +33,7 @@ export default function DataPoints(props: DataPointProps) { dataPoints, onUpdateDataPoints, } = props - const classes = useStyles() + const { classes } = useStyles() const [state, dispatch] = useReducer(dataPointsReducer, { meta: [], rows: [], diff --git a/src/components/editable-table/editable-table-cell.style.ts b/src/components/editable-table/editable-table-cell.style.ts index 268523ad..f244feaa 100644 --- a/src/components/editable-table/editable-table-cell.style.ts +++ b/src/components/editable-table/editable-table-cell.style.ts @@ -1,7 +1,7 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' import { tableBorder } from '@/theme/theme' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ editCell: { minWidth: 48, }, diff --git a/src/components/editable-table/editable-table-cell.tsx b/src/components/editable-table/editable-table-cell.tsx index 0704f89e..a7f4f651 100644 --- a/src/components/editable-table/editable-table-cell.tsx +++ b/src/components/editable-table/editable-table-cell.tsx @@ -27,7 +27,7 @@ export function EditableTableCell({ tooltip, style, }: EditableTableCellProps) { - const classes = useStyles() + const { classes } = useStyles() const textField = ( ({ +export const useStyles = makeStyles()(() => ({ buttonContainer: { whiteSpace: 'nowrap', float: 'right', diff --git a/src/components/editable-table/editable-table-collapsed-row.tsx b/src/components/editable-table/editable-table-collapsed-row.tsx index 2aef202a..9e9e6087 100644 --- a/src/components/editable-table/editable-table-collapsed-row.tsx +++ b/src/components/editable-table/editable-table-collapsed-row.tsx @@ -21,7 +21,7 @@ export const EditableTableCollapsedRow = ({ setExpanded, onDelete, }: EditableTableCollapsedRowProps) => { - const classes = useStyles() + const { classes } = useStyles() return ( diff --git a/src/components/editable-table/editable-table-expanded-row.style.ts b/src/components/editable-table/editable-table-expanded-row.style.ts index 7c956977..9eb2ee6e 100644 --- a/src/components/editable-table/editable-table-expanded-row.style.ts +++ b/src/components/editable-table/editable-table-expanded-row.style.ts @@ -1,7 +1,7 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' import { colors } from '@/theme/theme' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ row: { '& + tr': { '& td': { diff --git a/src/components/editable-table/editable-table-expanded-row.tsx b/src/components/editable-table/editable-table-expanded-row.tsx index 23477016..d5581e06 100644 --- a/src/components/editable-table/editable-table-expanded-row.tsx +++ b/src/components/editable-table/editable-table-expanded-row.tsx @@ -30,7 +30,7 @@ export const EditableTableExpandedRow = ({ onAdd, onSave, }: EditableTableExpandedRowProps) => { - const classes = useStyles() + const { classes } = useStyles() const [editedRow, setEditedRow] = useState({ ...tableRow }) return ( diff --git a/src/components/editable-table/editable-table.style.ts b/src/components/editable-table/editable-table.style.ts index 9593e08f..e34bae1a 100644 --- a/src/components/editable-table/editable-table.style.ts +++ b/src/components/editable-table/editable-table.style.ts @@ -1,7 +1,7 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' import { tableBorder } from '@/theme/theme' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ emptyCell: { border: 'none', width: 16, diff --git a/src/components/editable-table/editable-table.tsx b/src/components/editable-table/editable-table.tsx index 05732c4e..94bec4ec 100644 --- a/src/components/editable-table/editable-table.tsx +++ b/src/components/editable-table/editable-table.tsx @@ -26,7 +26,7 @@ export const EditableTable = ({ onRowDeleted, onRowEdited, }: EditableTableProps) => { - const classes = useStyles() + const { classes } = useStyles() return ( <> diff --git a/src/components/experiment/experiment.style.ts b/src/components/experiment/experiment.style.ts index f3410852..9c9f4e2f 100644 --- a/src/components/experiment/experiment.style.ts +++ b/src/components/experiment/experiment.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(theme => ({ +export const useStyles = makeStyles()(theme => ({ highlight: { opacity: 0.75, }, diff --git a/src/components/experiment/experiment.tsx b/src/components/experiment/experiment.tsx index 2c17967e..cf37b34e 100644 --- a/src/components/experiment/experiment.tsx +++ b/src/components/experiment/experiment.tsx @@ -46,7 +46,7 @@ type SnackbarMessage = { } const LegacyExperiment = () => { - const classes = useStyles() + const { classes } = useStyles() const { state: { experiment }, dispatch, diff --git a/src/components/experiment/loading-experiment.style.ts b/src/components/experiment/loading-experiment.style.ts index c8453b32..4ea1670f 100644 --- a/src/components/experiment/loading-experiment.style.ts +++ b/src/components/experiment/loading-experiment.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(theme => ({ +export const useStyles = makeStyles()(theme => ({ loadingContainer: { marginTop: theme.spacing(4), minWidth: theme.sizes.mainWidthMin, diff --git a/src/components/experiment/loading-experiment.tsx b/src/components/experiment/loading-experiment.tsx index feaef801..10dae423 100644 --- a/src/components/experiment/loading-experiment.tsx +++ b/src/components/experiment/loading-experiment.tsx @@ -9,7 +9,7 @@ import useStyles from './loading-experiment.style' import Layout from '@/components/layout/layout' export default function LoadingExperiment() { - const classes = useStyles() + const { classes } = useStyles() return ( diff --git a/src/components/experiment/tabbed-experiment.tsx b/src/components/experiment/tabbed-experiment.tsx index a7dfac4b..12a9c007 100644 --- a/src/components/experiment/tabbed-experiment.tsx +++ b/src/components/experiment/tabbed-experiment.tsx @@ -31,7 +31,7 @@ type SnackbarMessage = { } const TabbedExperiment = () => { - const classes = useStyles() + const { classes } = useStyles() const { state: { experiment }, dispatch, diff --git a/src/components/home/home.style.ts b/src/components/home/home.style.ts index 19c2f2b3..70bdc3e5 100644 --- a/src/components/home/home.style.ts +++ b/src/components/home/home.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(theme => ({ +export const useStyles = makeStyles()(theme => ({ mainContainer: { maxWidth: 500, background: theme.palette.custom.background.main, diff --git a/src/components/home/home.tsx b/src/components/home/home.tsx index c1a53905..67d43241 100644 --- a/src/components/home/home.tsx +++ b/src/components/home/home.tsx @@ -32,7 +32,7 @@ type UploadMessage = { } export default function Home() { - const classes = useStyles() + const { classes } = useStyles() const router: NextRouter = useRouter() const { state, dispatch } = useGlobal() const [isSnackbarOpen, setSnackbarOpen] = useState(false) diff --git a/src/components/input-model/categorical-variable.style.ts b/src/components/input-model/categorical-variable.style.ts index aa94e445..0e38d352 100644 --- a/src/components/input-model/categorical-variable.style.ts +++ b/src/components/input-model/categorical-variable.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ option: { display: 'flex', alignItems: 'center', diff --git a/src/components/input-model/categorical-variable.tsx b/src/components/input-model/categorical-variable.tsx index ad866fa9..460163c6 100644 --- a/src/components/input-model/categorical-variable.tsx +++ b/src/components/input-model/categorical-variable.tsx @@ -13,7 +13,7 @@ type CategoricalVariableProps = { } export default function CategoricalVariable(props: CategoricalVariableProps) { - const classes = useStyles() + const { classes } = useStyles() const { isDisabled, onAdded } = props const [options, setOptions] = useState([]) const { register, handleSubmit, reset, formState, setError, clearErrors } = diff --git a/src/components/input-model/optimizer-model.style.ts b/src/components/input-model/optimizer-model.style.ts index 86c91406..40e6f93e 100644 --- a/src/components/input-model/optimizer-model.style.ts +++ b/src/components/input-model/optimizer-model.style.ts @@ -1,7 +1,7 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' import { grey } from '@mui/material/colors' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ editBox: { background: grey[200], }, diff --git a/src/components/input-model/optimizer-model.tsx b/src/components/input-model/optimizer-model.tsx index 3460a12f..9a9cb606 100644 --- a/src/components/input-model/optimizer-model.tsx +++ b/src/components/input-model/optimizer-model.tsx @@ -39,7 +39,7 @@ export default function OptimizerModel(props: OptimizerModelProps) { addValueVariable, addCategoricalVariable, } = props - const classes = useStyles() + const { classes } = useStyles() return ( diff --git a/src/components/input-model/value-variable.style.ts b/src/components/input-model/value-variable.style.ts index fcc00beb..95354d6d 100644 --- a/src/components/input-model/value-variable.style.ts +++ b/src/components/input-model/value-variable.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ narrowInput: { float: 'left', width: '50%', diff --git a/src/components/input-model/value-variable.tsx b/src/components/input-model/value-variable.tsx index 16deb9d5..a723f0bc 100644 --- a/src/components/input-model/value-variable.tsx +++ b/src/components/input-model/value-variable.tsx @@ -14,7 +14,7 @@ type ValueVariableProps = { export default function ValueVariable(props: ValueVariableProps) { const { isDisabled, onAdded } = props - const classes = useStyles() + const { classes } = useStyles() const defaultValues: ValueVariableInputType = useMemo(() => { return { name: '', min: '', max: '', description: '', type: 'continuous' } }, []) diff --git a/src/components/input-model/variable-editor.style.ts b/src/components/input-model/variable-editor.style.ts index 04f470ff..64ce12be 100644 --- a/src/components/input-model/variable-editor.style.ts +++ b/src/components/input-model/variable-editor.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(theme => ({ +export const useStyles = makeStyles()(theme => ({ customTab: { minWidth: 'auto', fontSize: theme.typography.pxToRem(12), diff --git a/src/components/input-model/variable-editor.tsx b/src/components/input-model/variable-editor.tsx index c5e7e919..a1b65aba 100644 --- a/src/components/input-model/variable-editor.tsx +++ b/src/components/input-model/variable-editor.tsx @@ -16,7 +16,7 @@ export default function VariableEditor(props: VariableEditorProps) { props const [tabIndex, setTabIndex] = useState(0) - const classes = useStyles() + const { classes } = useStyles() const handleTabChange = (_event: ChangeEvent<{}>, newValue: number) => { setTabIndex(newValue) diff --git a/src/components/json-editor/json-editor.style.ts b/src/components/json-editor/json-editor.style.ts index 02a047f6..09ddb4bc 100644 --- a/src/components/json-editor/json-editor.style.ts +++ b/src/components/json-editor/json-editor.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ textArea: { width: '100%', }, diff --git a/src/components/json-editor/json-editor.tsx b/src/components/json-editor/json-editor.tsx index c33895a4..0d974a25 100644 --- a/src/components/json-editor/json-editor.tsx +++ b/src/components/json-editor/json-editor.tsx @@ -23,7 +23,7 @@ type DisplayedResults = { } const JsonEditor = () => { - const classes = useStyles() + const { classes } = useStyles() const [errorMsg, setErrorMsg] = useState('') const [displayedExperiment, setDisplayedExperiment] = useState('') const { diff --git a/src/components/layout/layout.style.ts b/src/components/layout/layout.style.ts index 88b5eb66..34c348ab 100644 --- a/src/components/layout/layout.style.ts +++ b/src/components/layout/layout.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(theme => ({ +export const useStyles = makeStyles()(theme => ({ links: { marginLeft: theme.spacing(5), flexGrow: 1, diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index 17195994..d83354bd 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -19,7 +19,7 @@ interface Props { export default function Layout({ children }: Props) { const [showDebug, setShowDebug] = useState(false) - const classes = useStyles() + const { classes } = useStyles() const { state, dispatch } = useGlobal() const handleSwitch = diff --git a/src/components/loading-button/loading-button.style.ts b/src/components/loading-button/loading-button.style.ts index d3edb4b9..b66746fe 100644 --- a/src/components/loading-button/loading-button.style.ts +++ b/src/components/loading-button/loading-button.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(theme => ({ +export const useStyles = makeStyles()(theme => ({ spinner: { color: 'white', position: 'absolute', diff --git a/src/components/loading-button/loading-button.tsx b/src/components/loading-button/loading-button.tsx index 7aac7491..05263b97 100644 --- a/src/components/loading-button/loading-button.tsx +++ b/src/components/loading-button/loading-button.tsx @@ -12,7 +12,7 @@ type LoadingButtonProps = { } export default function LoadingButton(props: LoadingButtonProps) { - const classes = useStyles() + const { classes } = useStyles() const { isLoading, label, diff --git a/src/components/plots/plot-item.style.ts b/src/components/plots/plot-item.style.ts index ccd6b13b..e4eb8984 100644 --- a/src/components/plots/plot-item.style.ts +++ b/src/components/plots/plot-item.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ listItem: { listStyle: 'none', }, diff --git a/src/components/plots/plot-item.tsx b/src/components/plots/plot-item.tsx index d41a17dc..1c2d1365 100644 --- a/src/components/plots/plot-item.tsx +++ b/src/components/plots/plot-item.tsx @@ -23,7 +23,7 @@ export const PlotItem = ({ const { state: { experiment }, } = useExperiment() - const classes = useStyles() + const { classes } = useStyles() return ( <> diff --git a/src/components/plots/plot-list.style.ts b/src/components/plots/plot-list.style.ts index 8cf90f22..7697ed02 100644 --- a/src/components/plots/plot-list.style.ts +++ b/src/components/plots/plot-list.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ list: { padding: 0, }, diff --git a/src/components/plots/plot-list.tsx b/src/components/plots/plot-list.tsx index e6adbd9e..fe8e3bb6 100644 --- a/src/components/plots/plot-list.tsx +++ b/src/components/plots/plot-list.tsx @@ -6,7 +6,7 @@ interface PlotListProps { } export const PlotList = ({ children }: PlotListProps) => { - const classes = useStyles() + const { classes } = useStyles() return
    {children}
} diff --git a/src/components/plots/plots.style.ts b/src/components/plots/plots.style.ts index 2b1ce995..b5d31090 100644 --- a/src/components/plots/plots.style.ts +++ b/src/components/plots/plots.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ titleButton: { float: 'right', }, diff --git a/src/components/plots/plots.tsx b/src/components/plots/plots.tsx index 574bf64f..0d70d54f 100644 --- a/src/components/plots/plots.tsx +++ b/src/components/plots/plots.tsx @@ -20,7 +20,7 @@ export const Plots = () => { state: { uiSizes }, dispatch, } = useGlobal() - const classes = useStyles() + const { classes } = useStyles() return ( <> diff --git a/src/components/result-data/experimentation-guide.style.ts b/src/components/result-data/experimentation-guide.style.ts index d5a33b1d..6a213bf1 100644 --- a/src/components/result-data/experimentation-guide.style.ts +++ b/src/components/result-data/experimentation-guide.style.ts @@ -1,7 +1,7 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' import { grey } from '@mui/material/colors' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ titleButton: { float: 'right', }, diff --git a/src/components/result-data/experimentation-guide.tsx b/src/components/result-data/experimentation-guide.tsx index f923a310..5468352a 100644 --- a/src/components/result-data/experimentation-guide.tsx +++ b/src/components/result-data/experimentation-guide.tsx @@ -27,7 +27,7 @@ export const ExperimentationGuide = (props: ResultDataProps) => { onMouseEnterExpand, onMouseLeaveExpand, } = props - const classes = useStyles() + const { classes } = useStyles() const { state: { uiSizes }, dispatch, diff --git a/src/components/result-data/single-data-point.style.ts b/src/components/result-data/single-data-point.style.ts index 1e8a88b1..46f6d591 100644 --- a/src/components/result-data/single-data-point.style.ts +++ b/src/components/result-data/single-data-point.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ tableContainer: { overflowX: 'auto', }, diff --git a/src/components/result-data/single-data-point.tsx b/src/components/result-data/single-data-point.tsx index 6b21282f..1b8a0998 100644 --- a/src/components/result-data/single-data-point.tsx +++ b/src/components/result-data/single-data-point.tsx @@ -20,7 +20,7 @@ export const SingleDataPoint = ({ headers, dataPoint, }: SingleDataPointProps) => { - const classes = useStyles() + const { classes } = useStyles() return ( diff --git a/src/components/result-data/suggestions.style.ts b/src/components/result-data/suggestions.style.ts index 2f29050e..a2244fe1 100644 --- a/src/components/result-data/suggestions.style.ts +++ b/src/components/result-data/suggestions.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ tableContainer: { overflowX: 'auto', }, diff --git a/src/components/result-data/suggestions.tsx b/src/components/result-data/suggestions.tsx index 288af125..9474c0d7 100644 --- a/src/components/result-data/suggestions.tsx +++ b/src/components/result-data/suggestions.tsx @@ -13,7 +13,7 @@ interface SuggestionsProps { } export const Suggestions = ({ values, headers }: SuggestionsProps) => { - const classes = useStyles() + const { classes } = useStyles() return ( <> diff --git a/src/components/summary-configuration/summary-configuration.style.ts b/src/components/summary-configuration/summary-configuration.style.ts index 6aa1f67c..7e0e24f7 100644 --- a/src/components/summary-configuration/summary-configuration.style.ts +++ b/src/components/summary-configuration/summary-configuration.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ iconDiscrete: { fontSize: 10, }, diff --git a/src/components/summary-configuration/summary-configuration.tsx b/src/components/summary-configuration/summary-configuration.tsx index 7496d027..6129d49f 100644 --- a/src/components/summary-configuration/summary-configuration.tsx +++ b/src/components/summary-configuration/summary-configuration.tsx @@ -25,7 +25,7 @@ export const SummaryConfiguration = () => { state: { experiment }, } = useExperiment() const { dispatch } = useGlobal() - const classes = useStyles() + const { classes } = useStyles() return ( diff --git a/src/components/theme-selector/theme-selector.style.ts b/src/components/theme-selector/theme-selector.style.ts index 135ea29f..15c5cd7e 100644 --- a/src/components/theme-selector/theme-selector.style.ts +++ b/src/components/theme-selector/theme-selector.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(() => ({ +export const useStyles = makeStyles()(() => ({ themeContainer: { display: 'flex', justifyContent: 'space-around', diff --git a/src/components/theme-selector/theme-selector.tsx b/src/components/theme-selector/theme-selector.tsx index 5af8ae3b..a10fd61d 100644 --- a/src/components/theme-selector/theme-selector.tsx +++ b/src/components/theme-selector/theme-selector.tsx @@ -4,7 +4,7 @@ import useStyles from './theme-selector.style' import { themes } from '@/theme/theme' export default function ThemeSelector() { - const classes = useStyles() + const { classes } = useStyles() const { dispatch } = useGlobal() return ( diff --git a/src/components/title-card/title-card.style.ts b/src/components/title-card/title-card.style.ts index 3540ebb5..6a7fdf0b 100644 --- a/src/components/title-card/title-card.style.ts +++ b/src/components/title-card/title-card.style.ts @@ -1,6 +1,6 @@ -import { makeStyles } from '@mui/styles' +import { makeStyles } from 'tss-react/mui' -export const useStyles = makeStyles(theme => ({ +export const useStyles = makeStyles()(theme => ({ title: { background: theme.palette.primary.main, color: 'white', diff --git a/src/components/title-card/title-card.tsx b/src/components/title-card/title-card.tsx index 5e831906..1e5d56c2 100644 --- a/src/components/title-card/title-card.tsx +++ b/src/components/title-card/title-card.tsx @@ -10,7 +10,7 @@ type TitleCardProps = { export const TitleCard = (props: TitleCardProps) => { const { title, padding, children } = props - const classes = useStyles() + const { classes } = useStyles() return ( diff --git a/yarn.lock b/yarn.lock index d0d05e64..5a4ca203 100644 --- a/yarn.lock +++ b/yarn.lock @@ -361,7 +361,7 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.17.8" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz" integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA== @@ -545,6 +545,17 @@ source-map "^0.5.7" stylis "4.0.13" +"@emotion/cache@*": + version "11.10.5" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12" + integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA== + dependencies: + "@emotion/memoize" "^0.8.0" + "@emotion/sheet" "^1.2.1" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + stylis "4.1.3" + "@emotion/cache@^11.7.1", "@emotion/cache@^11.9.3": version "11.9.3" resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.9.3.tgz" @@ -561,6 +572,11 @@ resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== +"@emotion/hash@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" + integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== + "@emotion/is-prop-valid@^1.1.2", "@emotion/is-prop-valid@^1.1.3": version "1.1.3" resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz" @@ -573,6 +589,11 @@ resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz" integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== +"@emotion/memoize@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== + "@emotion/react@^11.9.3": version "11.9.3" resolved "https://registry.npmjs.org/@emotion/react/-/react-11.9.3.tgz" @@ -586,6 +607,17 @@ "@emotion/weak-memoize" "^0.2.5" hoist-non-react-statics "^3.3.1" +"@emotion/serialize@*": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0" + integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA== + dependencies: + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/unitless" "^0.8.0" + "@emotion/utils" "^1.2.0" + csstype "^3.0.2" + "@emotion/serialize@^1.0.2", "@emotion/serialize@^1.0.4": version "1.0.4" resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.4.tgz" @@ -612,6 +644,11 @@ resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.1.tgz" integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA== +"@emotion/sheet@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c" + integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA== + "@emotion/styled@^11.9.3": version "11.9.3" resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.9.3.tgz" @@ -628,6 +665,16 @@ resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== +"@emotion/unitless@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" + integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== + +"@emotion/utils@*", "@emotion/utils@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" + integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== + "@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0": version "1.1.0" resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz" @@ -638,6 +685,11 @@ resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== +"@emotion/weak-memoize@^0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" + integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== + "@eslint/eslintrc@^1.3.0": version "1.3.0" resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz" @@ -1029,29 +1081,6 @@ "@emotion/cache" "^11.7.1" prop-types "^15.8.1" -"@mui/styles@^5.8.6": - version "5.8.6" - resolved "https://registry.npmjs.org/@mui/styles/-/styles-5.8.6.tgz" - integrity sha512-0IvwctufjczoS5qERihquoeVwsz3/buHRpVIt6hNb9Jab2dKH38fhxvIHJTTmmJMQazchaAeVh7T3duOV2Vl2g== - dependencies: - "@babel/runtime" "^7.17.2" - "@emotion/hash" "^0.8.0" - "@mui/private-theming" "^5.8.6" - "@mui/types" "^7.1.4" - "@mui/utils" "^5.8.6" - clsx "^1.1.1" - csstype "^3.1.0" - hoist-non-react-statics "^3.3.2" - jss "^10.8.2" - jss-plugin-camel-case "^10.8.2" - jss-plugin-default-unit "^10.8.2" - jss-plugin-global "^10.8.2" - jss-plugin-nested "^10.8.2" - jss-plugin-props-sort "^10.8.2" - jss-plugin-rule-value-function "^10.8.2" - jss-plugin-vendor-prefixer "^10.8.2" - prop-types "^15.8.1" - "@mui/system@^5.8.5": version "5.8.5" resolved "https://registry.npmjs.org/@mui/system/-/system-5.8.5.tgz" @@ -2492,14 +2521,6 @@ css-unit-converter@^1.1.1: resolved "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz" integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA== -css-vendor@^2.0.8: - version "2.0.8" - resolved "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz" - integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ== - dependencies: - "@babel/runtime" "^7.8.3" - is-in-browser "^1.0.2" - css.escape@^1.5.1: version "1.5.1" resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz" @@ -3866,7 +3887,7 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" -hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.1: version "3.3.2" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -3933,11 +3954,6 @@ husky@^8.0.1: resolved "https://registry.npmjs.org/husky/-/husky-8.0.1.tgz" integrity sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw== -hyphenate-style-name@^1.0.3: - version "1.0.4" - resolved "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz" - integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== - iconv-lite@0.6.3: version "0.6.3" resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz" @@ -4147,11 +4163,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3: dependencies: is-extglob "^2.1.1" -is-in-browser@^1.0.2, is-in-browser@^1.1.3: - version "1.1.3" - resolved "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz" - integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU= - is-installed-globally@^0.1.0: version "0.1.0" resolved "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz" @@ -4862,76 +4873,6 @@ jsonfile@^6.0.1: optionalDependencies: graceful-fs "^4.1.6" -jss-plugin-camel-case@^10.8.2: - version "10.9.0" - resolved "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz" - integrity sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww== - dependencies: - "@babel/runtime" "^7.3.1" - hyphenate-style-name "^1.0.3" - jss "10.9.0" - -jss-plugin-default-unit@^10.8.2: - version "10.9.0" - resolved "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz" - integrity sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.9.0" - -jss-plugin-global@^10.8.2: - version "10.9.0" - resolved "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz" - integrity sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.9.0" - -jss-plugin-nested@^10.8.2: - version "10.9.0" - resolved "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz" - integrity sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.9.0" - tiny-warning "^1.0.2" - -jss-plugin-props-sort@^10.8.2: - version "10.9.0" - resolved "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz" - integrity sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.9.0" - -jss-plugin-rule-value-function@^10.8.2: - version "10.9.0" - resolved "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz" - integrity sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.9.0" - tiny-warning "^1.0.2" - -jss-plugin-vendor-prefixer@^10.8.2: - version "10.9.0" - resolved "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz" - integrity sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA== - dependencies: - "@babel/runtime" "^7.3.1" - css-vendor "^2.0.8" - jss "10.9.0" - -jss@10.9.0, jss@^10.8.2: - version "10.9.0" - resolved "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz" - integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw== - dependencies: - "@babel/runtime" "^7.3.1" - csstype "^3.0.2" - is-in-browser "^1.1.3" - tiny-warning "^1.0.2" - "jsx-ast-utils@^2.4.1 || ^3.0.0": version "3.2.1" resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz" @@ -6645,6 +6586,11 @@ stylis@4.0.13: resolved "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz" integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag== +stylis@4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7" + integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA== + sumchecker@^3.0.1: version "3.0.1" resolved "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz" @@ -6753,11 +6699,6 @@ timezone@^1.0.23: resolved "https://registry.yarnpkg.com/timezone/-/timezone-1.0.23.tgz#87865e2c9d6aff6a52a598247e8f5102a92c881b" integrity sha512-yhQgk6qmSLB+TF8HGmApZAVI5bfzR1CoKUGr+WMZWmx75ED1uDewAZA8QMGCQ70TEv4GmM8pDB9jrHuxdaQ1PA== -tiny-warning@^1.0.2: - version "1.0.3" - resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz" - integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== - tmp@^0.0.33: version "0.0.33" resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz" @@ -6843,6 +6784,15 @@ tslib@^2.3.1, tslib@^2.4.0: resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz" integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== +tss-react@^4.4.4: + version "4.4.4" + resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.4.4.tgz#12207842dfc58676a9f4d0f532741257428a78e7" + integrity sha512-Bzyg99bIQq3Lk4Rwc5XMOps58c1biw1rghCkApIX5XkAB+/VjGCIFSl63PePhmiRNvKRxJRpawGPPxHytiw1TA== + dependencies: + "@emotion/cache" "*" + "@emotion/serialize" "*" + "@emotion/utils" "*" + tsutils@^3.21.0: version "3.21.0" resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz" From 7a9197b4b55e95550607e4ddd01934ba07134825 Mon Sep 17 00:00:00 2001 From: Jakob Langdal Date: Fri, 18 Nov 2022 13:06:47 +0000 Subject: [PATCH 2/8] chore: migrate to vite and vitest --- .env.development | 2 +- .env.production | 2 +- .eslintrc.json | 2 +- .gitignore | 1 + .prettierignore | 1 + Dockerfile.nextjs | 32 - index.html | 14 + jest.config.js | 14 - next-env.d.ts | 5 - next.config.js | 23 - package.json | 19 +- pages/_app.tsx | 39 - pages/_document.tsx | 84 - pages/index.tsx | 8 - src/app.tsx | 22 + src/components/home/home.tsx | 19 +- src/components/layout/layout.tsx | 7 +- src/components/plots/bokeh-plot/index.ts | 7 +- .../experiment/experiment-context.test.tsx | 2 +- src/context/experiment/experiment-context.tsx | 2 +- src/context/global/global-context.test.tsx | 2 +- src/context/global/global-context.tsx | 4 - src/env.d.ts | 9 + .../experiment-container.tsx | 11 +- global-fetch.d.ts => src/global-fetch.d.ts | 0 src/jquery-shim.ts | 4 + src/main.tsx | 9 + jest.setup.ts => src/testing/setupTests.ts | 1 - .../__snapshots__/converters.test.ts.snap | 6 +- src/utility/save-to-local-file.test.ts | 12 +- tsconfig.json | 11 +- vite.config.ts | 34 + yarn.lock | 5366 +++++++---------- 33 files changed, 2263 insertions(+), 3511 deletions(-) delete mode 100644 Dockerfile.nextjs create mode 100644 index.html delete mode 100644 jest.config.js delete mode 100644 next-env.d.ts delete mode 100644 next.config.js delete mode 100644 pages/_app.tsx delete mode 100644 pages/_document.tsx delete mode 100644 pages/index.tsx create mode 100644 src/app.tsx create mode 100644 src/env.d.ts rename pages/experiment/[experimentid].tsx => src/experiment-container.tsx (76%) rename global-fetch.d.ts => src/global-fetch.d.ts (100%) create mode 100644 src/jquery-shim.ts create mode 100644 src/main.tsx rename jest.setup.ts => src/testing/setupTests.ts (53%) create mode 100644 vite.config.ts diff --git a/.env.development b/.env.development index f3faced6..e9318ac6 100644 --- a/.env.development +++ b/.env.development @@ -1 +1 @@ -NEXT_PUBLIC_API_SERVER=http://localhost:9090/v1.0 +VITE_PUBLIC_API_SERVER=http://localhost:9090/v1.0 diff --git a/.env.production b/.env.production index f3faced6..e9318ac6 100644 --- a/.env.production +++ b/.env.production @@ -1 +1 @@ -NEXT_PUBLIC_API_SERVER=http://localhost:9090/v1.0 +VITE_PUBLIC_API_SERVER=http://localhost:9090/v1.0 diff --git a/.eslintrc.json b/.eslintrc.json index 2cd929a8..9921fb24 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,4 +1,4 @@ { "plugins": ["react", "prettier"], - "extends": ["next/core-web-vitals", "prettier"] + "extends": ["prettier"] } diff --git a/.gitignore b/.gitignore index 598ed0ae..dcf4b4da 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,4 @@ db /specification.yml .vscode tsconfig.tsbuildinfo +dist diff --git a/.prettierignore b/.prettierignore index 18bbfe4b..745da351 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,6 +3,7 @@ .github node_modules out +dist public tmp openapi diff --git a/Dockerfile.nextjs b/Dockerfile.nextjs deleted file mode 100644 index 9b32bb13..00000000 --- a/Dockerfile.nextjs +++ /dev/null @@ -1,32 +0,0 @@ -FROM node:16-bullseye AS deps -WORKDIR /app -COPY package.json yarn.lock ./ -RUN yarn install --frozen-lockfile --network-timeout 100000 - -FROM node:16-bullseye AS builder -WORKDIR /app -COPY --from=deps /app/node_modules ./node_modules -COPY . . - -RUN yarn build - -FROM node:16-bullseye -RUN mkdir /app - -WORKDIR /app - -COPY --from=builder /app/node_modules/ node_modules -COPY --from=builder /app/.next/ .next -COPY package.json . -COPY ./docker-entrypoint.sh / - -RUN addgroup --system user && adduser --system --group user -RUN chown -R user:user /app/.next - -USER user -EXPOSE 3000 -ENV API_URL=http://localhost:9090/v1.0 - -ENTRYPOINT ["/docker-entrypoint.sh"] - -CMD [ "yarn", "start" ] diff --git a/index.html b/index.html new file mode 100644 index 00000000..ca3ab5f2 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + + Process Optimizer Frontend + + + + +
+ + diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 19a73174..00000000 --- a/jest.config.js +++ /dev/null @@ -1,14 +0,0 @@ -module.exports = { - setupFilesAfterEnv: ['/jest.setup.ts'], - testPathIgnorePatterns: ['/.next/', '/node_modules/'], - watchPathIgnorePatterns: ['/boost-tests-', '/tmp/'], - moduleNameMapper: { - '\\.(scss|sass|css)$': 'identity-obj-proxy', - '^@/(.*)': ['/src/$1'], - '^@openapi': ['/openapi'], - }, - testEnvironment: 'jsdom', - transform: { - '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }], - }, -} diff --git a/next-env.d.ts b/next-env.d.ts deleted file mode 100644 index 4f11a03d..00000000 --- a/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js deleted file mode 100644 index 5fc16178..00000000 --- a/next.config.js +++ /dev/null @@ -1,23 +0,0 @@ -/** @type {import('next').NextConfig} */ - -const { GitRevisionPlugin } = require('git-revision-webpack-plugin') - -module.exports = { - swcMinify: true, - reactStrictMode: true, - future: {}, - webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { - const gitRevisionPlugin = new GitRevisionPlugin({ - versionCommand: 'describe --tags --always --first-parent', - }) - config.plugins.push(gitRevisionPlugin) - config.plugins.push( - new webpack.DefinePlugin({ - VERSION: JSON.stringify(gitRevisionPlugin.version()), - COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()), - BRANCH: JSON.stringify(gitRevisionPlugin.branch()), - }) - ) - return config - }, -} diff --git a/package.json b/package.json index 0e18bc58..d3aeafde 100644 --- a/package.json +++ b/package.json @@ -3,13 +3,14 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", - "build": "next build", - "build-static": "next build && next export", - "start": "next start", + "dev": "vite", + "build": "tsc && vite build", + "build-static": "tsc && vite build --outDir out", + "start": "vite preview", "lint": "eslint .", "formatAll": "prettier --write .", - "test": "jest", + "prettier": "prettier --check .", + "test": "vitest", "prepare": "husky install", "openapi": "openapi-generator-cli generate -i https://raw.githubusercontent.com/BoostV/process-optimizer-api/v2.1.0/optimizerapi/openapi/specification.yml -g typescript-fetch -o ./openapi --additional-properties=nullSafeAdditionalProps && prettier --write ./openapi" }, @@ -30,7 +31,6 @@ "eslint-config-prettier": "8.5.0", "eslint-plugin-prettier": "4.1.0", "immer": "^9.0.15", - "next": "^12.1.6", "prettier": "2.7.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -43,7 +43,6 @@ }, "devDependencies": { "@openapitools/openapi-generator-cli": "2.5.1", - "@swc/jest": "^0.2.21", "@testing-library/dom": "^8.13.0", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", @@ -57,13 +56,15 @@ "git-revision-webpack-plugin": "^5.0.0", "husky": "^8.0.1", "identity-obj-proxy": "^3.0.0", - "jest": "^28.1.1", "jest-dom": "^4.0.0", "jest-environment-jsdom": "^28.1.1", "lint-staged": "^13.0.3", "node-mocks-http": "^1.10.1", "react-devtools": "^4.24.7", "rimraf": "^3.0.2", - "typescript": "^4.7.4" + "typescript": "^4.7.4", + "vite": "^3.2.4", + "@vitejs/plugin-react": "^2.2.0", + "vitest": "^0.25.2" } } diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index ef5ff927..00000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react' -import Head from 'next/head' -import { AppProps } from 'next/app' -import CssBaseline from '@mui/material/CssBaseline' -import { CacheProvider, EmotionCache } from '@emotion/react' -import createEmotionCache from '@/createEmotionCache' -import { GlobalStateProvider } from '@/context/global' -import { useRouter } from 'next/router' - -// Client-side cache, shared for the whole session of the user in the browser. -const clientSideEmotionCache = createEmotionCache() - -interface MyAppProps extends AppProps { - emotionCache?: EmotionCache -} - -export default function MyApp(props: MyAppProps) { - const router = useRouter() - const [firstLoad, setFirstLoad] = React.useState(true) - React.useEffect(() => { - if (window.location.pathname !== '/' && firstLoad) { - setFirstLoad(false) - router.push(window.location.pathname + window.location.search) - } - }, [firstLoad, router]) - const { Component, emotionCache = clientSideEmotionCache, pageProps } = props - return ( - - - - - - {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - - - - - ) -} diff --git a/pages/_document.tsx b/pages/_document.tsx deleted file mode 100644 index 14a35609..00000000 --- a/pages/_document.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import * as React from 'react' -import Document, { Html, Head, Main, NextScript } from 'next/document' -import createEmotionServer from '@emotion/server/create-instance' -import { theme } from '../src/theme/theme' -import createEmotionCache from '../src/createEmotionCache' - -export default class MyDocument extends Document { - render() { - return ( - - - {/* PWA primary color */} - - - {/* Inject MUI styles first to match with the prepend: true configuration. */} - {(this.props as any).emotionStyleTags} - - -
- - - - ) - } -} - -// `getInitialProps` belongs to `_document` (instead of `_app`), -// it's compatible with static-site generation (SSG). -MyDocument.getInitialProps = async ctx => { - // Resolution order - // - // On the server: - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. document.getInitialProps - // 4. app.render - // 5. page.render - // 6. document.render - // - // On the server with error: - // 1. document.getInitialProps - // 2. app.render - // 3. page.render - // 4. document.render - // - // On the client - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. app.render - // 4. page.render - - const originalRenderPage = ctx.renderPage - - // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance. - // However, be aware that it can have global side effects. - const cache = createEmotionCache() - const { extractCriticalToChunks } = createEmotionServer(cache) - - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App: any) => - function EnhanceApp(props) { - return - }, - }) - - const initialProps = await Document.getInitialProps(ctx) - // This is important. It prevents Emotion to render invalid HTML. - // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 - const emotionStyles = extractCriticalToChunks(initialProps.html) - const emotionStyleTags = emotionStyles.styles.map(style => ( -