From 3465373b1d61a3bdc84b119d7ea7b3160c1315e2 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Thu, 29 Aug 2024 13:25:59 -0400 Subject: [PATCH 1/5] enable emotion better classnames during dev --- .gitignore | 1 + frontends/mit-learn/package.json | 1 + frontends/mit-learn/webpack.config.js | 11 ++++++++++- yarn.lock | 10 ++++++++++ 4 files changed, 22 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 828d116cc9..3ea33029f8 100644 --- a/.gitignore +++ b/.gitignore @@ -137,3 +137,4 @@ storybook-static/ !/e2e_testing/.env e2e_testing/.yarn/cache +.swc diff --git a/frontends/mit-learn/package.json b/frontends/mit-learn/package.json index a0891233a0..236f204e06 100644 --- a/frontends/mit-learn/package.json +++ b/frontends/mit-learn/package.json @@ -29,6 +29,7 @@ "@storybook/react-webpack5": "^8.0.9", "@storybook/test": "^8.0.9", "@swc/core": "^1.4.11", + "@swc/plugin-emotion": "^4.0.0", "@testing-library/react": "14.3.1", "@testing-library/user-event": "14.5.2", "@types/lodash": "^4.14.182", diff --git a/frontends/mit-learn/webpack.config.js b/frontends/mit-learn/webpack.config.js index 24ce4bb3cb..6d4f921b53 100644 --- a/frontends/mit-learn/webpack.config.js +++ b/frontends/mit-learn/webpack.config.js @@ -182,7 +182,16 @@ module.exports = (env, argv) => { }, { test: /\.tsx?$/, - use: "swc-loader", + use: { + loader: "swc-loader", + options: { + jsc: { + experimental: { + plugins: [["@swc/plugin-emotion", {}]], + }, + }, + }, + }, exclude: /node_modules/, }, { diff --git a/yarn.lock b/yarn.lock index 13500e370a..783342b21f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4648,6 +4648,15 @@ __metadata: languageName: node linkType: hard +"@swc/plugin-emotion@npm:^4.0.0": + version: 4.0.0 + resolution: "@swc/plugin-emotion@npm:4.0.0" + dependencies: + "@swc/counter": "npm:^0.1.3" + checksum: 10/31159f1a510732f48b9e3bdd9929f6f503bb866957d15ebcc8635f273b1aebad23f23b6798e6c0d426d5a015b15403b20fcd3102ac33c7908e614ab480bf92e3 + languageName: node + linkType: hard + "@swc/types@npm:^0.1.12": version: 0.1.12 resolution: "@swc/types@npm:0.1.12" @@ -14769,6 +14778,7 @@ __metadata: "@storybook/react-webpack5": "npm:^8.0.9" "@storybook/test": "npm:^8.0.9" "@swc/core": "npm:^1.4.11" + "@swc/plugin-emotion": "npm:^4.0.0" "@tanstack/react-query": "npm:^4.36.1" "@tanstack/react-query-devtools": "npm:^4.29.6" "@testing-library/react": "npm:14.3.1" From b1167b53631b9bc2150bc0e31ed97f79b22f710f Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Thu, 29 Aug 2024 13:31:09 -0400 Subject: [PATCH 2/5] rename some mui dialog exports --- frontends/ol-components/src/index.ts | 6 ++-- .../components/editing/ManageWidgetDialog.tsx | 32 +++++++++---------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/frontends/ol-components/src/index.ts b/frontends/ol-components/src/index.ts index 7ee530994a..fda60ca714 100644 --- a/frontends/ol-components/src/index.ts +++ b/frontends/ol-components/src/index.ts @@ -64,11 +64,11 @@ export type { ContainerProps } from "@mui/material/Container" export { default as MuiDialog } from "@mui/material/Dialog" export type { DialogProps as MuiDialogProps } from "@mui/material/Dialog" -export { default as DialogActions } from "@mui/material/DialogActions" +export { default as MuiDialogActions } from "@mui/material/DialogActions" export type { DialogActionsProps } from "@mui/material/DialogActions" -export { default as DialogContent } from "@mui/material/DialogContent" +export { default as MuiDialogContent } from "@mui/material/DialogContent" export type { DialogContentProps } from "@mui/material/DialogContent" -export { default as DialogTitle } from "@mui/material/DialogTitle" +export { default as MuiDialogTitle } from "@mui/material/DialogTitle" export type { DialogTitleProps } from "@mui/material/DialogTitle" export { default as Divider } from "@mui/material/Divider" diff --git a/frontends/ol-widgets/src/components/editing/ManageWidgetDialog.tsx b/frontends/ol-widgets/src/components/editing/ManageWidgetDialog.tsx index 2240a698e0..3e1c0d97a9 100644 --- a/frontends/ol-widgets/src/components/editing/ManageWidgetDialog.tsx +++ b/frontends/ol-widgets/src/components/editing/ManageWidgetDialog.tsx @@ -1,9 +1,9 @@ import React, { useId, useCallback, useEffect, useMemo, useState } from "react" import { - Dialog, - DialogActions, - DialogContent, - DialogTitle, + MuiDialog, + MuiDialogActions, + MuiDialogContent, + MuiDialogTitle, Button, RadioChoiceField, } from "ol-components" @@ -122,7 +122,7 @@ const DialogContentEditing: React.FC = ({ ) return ( <> - {title} + {title} >} validationSchema={validationSchema} @@ -135,7 +135,7 @@ const DialogContentEditing: React.FC = ({ const { htmlFor: labelFor, ...labelAttrs } = titleAttrs.label return (
- +
) })} - - + + - +
) }} @@ -275,11 +275,11 @@ const DialogContentAdding: React.FC = ({ ) return ( <> - New widget + New widget {({ handleSubmit, values }) => (
- + = ({ /> )} - - + + - +
)} @@ -345,7 +345,7 @@ const ManageWidgetDialog: React.FC = ({ [], ) return ( - = ({ classes={classes} /> )} - + ) } From bea4e4b7a3b424ceeb0c5b16124aaae858888c58 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Thu, 29 Aug 2024 13:31:26 -0400 Subject: [PATCH 3/5] no bottom margin on last formfield child --- .../ol-components/src/components/FormHelpers/FormHelpers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/ol-components/src/components/FormHelpers/FormHelpers.tsx b/frontends/ol-components/src/components/FormHelpers/FormHelpers.tsx index 65cc5f2c95..1e67cf3ccf 100644 --- a/frontends/ol-components/src/components/FormHelpers/FormHelpers.tsx +++ b/frontends/ol-components/src/components/FormHelpers/FormHelpers.tsx @@ -35,7 +35,7 @@ const Container = styled.div<{ fullWidth?: boolean }>(({ fullWidth }) => [ display: "inline-flex", flexDirection: "column", alignItems: "start", - "> *": { + "> *:not(:last-child)": { marginBottom: "4px", }, }, From d14b551b57eb1487a2413ba5836468ecfe32d4fa Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Thu, 29 Aug 2024 13:31:38 -0400 Subject: [PATCH 4/5] fix dialog spacing and reset --- .../Dialogs/AddToListDialog.tsx | 104 +++++++++--------- .../ManageListDialogs/ManageListDialogs.tsx | 26 ++--- .../src/components/Dialog/Dialog.tsx | 19 ++-- .../FormDialog/FormDialog.stories.tsx | 1 - .../src/components/FormDialog/FormDialog.tsx | 16 +-- 5 files changed, 74 insertions(+), 92 deletions(-) diff --git a/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.tsx b/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.tsx index a9642557a7..037a39031e 100644 --- a/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.tsx +++ b/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.tsx @@ -1,11 +1,12 @@ -import React, { useCallback, useId } from "react" +import React, { useCallback } from "react" import { - Dialog, LoadingSpinner, Typography, styled, CheckboxChoiceField, Button, + FormDialog, + DialogActions, } from "ol-components" import { RiAddLine } from "@remixicon/react" @@ -33,17 +34,9 @@ const ResourceTitle = styled.span({ fontStyle: "italic", }) -const CheckboxContainer = styled.div({ - padding: "28px 0", -}) - -const ButtonContainer = styled.div({ +const Actions = styled(DialogActions)({ display: "flex", - gap: "12px", - alignItems: "flex-start", - button: { - width: "50%", - }, + "> *": { flex: 1 }, }) type AddToListDialogInnerProps = { @@ -100,7 +93,6 @@ const AddToListDialogInner: React.FC = ({ : null, ) .filter((value) => value !== null) - const formId = useId() const formik = useFormik({ enableReinitialize: true, validateOnChange: false, @@ -130,59 +122,61 @@ const AddToListDialogInner: React.FC = ({ }) return ( - + + + + } > {isReady ? ( -
+ <> Adding {resource?.title} - - {listType === ListType.LearningPath ? ( - - ) : null} - {listType === ListType.UserList ? ( - - ) : null} - - - - - -
+ + {listType === ListType.LearningPath ? ( + + ) : null} + {listType === ListType.UserList ? ( + + ) : null} + ) : ( )} - + ) } diff --git a/frontends/mit-learn/src/page-components/ManageListDialogs/ManageListDialogs.tsx b/frontends/mit-learn/src/page-components/ManageListDialogs/ManageListDialogs.tsx index cb221be6f7..7607f6d67c 100644 --- a/frontends/mit-learn/src/page-components/ManageListDialogs/ManageListDialogs.tsx +++ b/frontends/mit-learn/src/page-components/ManageListDialogs/ManageListDialogs.tsx @@ -122,14 +122,6 @@ const UpsertLearningPathDialog = NiceModal.create( onSubmit={formik.handleSubmit} confirmText="Save" noValidate - footerContent={ - mutation.isError && - !formik.isSubmitting && ( - - There was a problem saving your list. Please try again later. - - ) - } > formik.setFieldValue(e.name, e.value)} /> + {mutation.isError && !formik.isSubmitting && ( + + There was a problem saving your list. Please try again later. + + )} ) }, @@ -242,14 +239,6 @@ const UpsertUserListDialog = NiceModal.create( onSubmit={formik.handleSubmit} confirmText={userList ? "Update" : "Create"} noValidate - footerContent={ - mutation.isError && - !formik.isSubmitting && ( - - There was a problem saving your list. Please try again later. - - ) - } > + {mutation.isError && !formik.isSubmitting && ( + + There was a problem saving your list. Please try again later. + + )} {userList && (
@@ -148,11 +149,11 @@ const Dialog: React.FC = ({ > {confirmText} - + )} ) } -export { Dialog } +export { Dialog, DialogActions } export type { DialogProps } diff --git a/frontends/ol-components/src/components/FormDialog/FormDialog.stories.tsx b/frontends/ol-components/src/components/FormDialog/FormDialog.stories.tsx index fbe2a9336b..1c0f3c5ad3 100644 --- a/frontends/ol-components/src/components/FormDialog/FormDialog.stories.tsx +++ b/frontends/ol-components/src/components/FormDialog/FormDialog.stories.tsx @@ -72,6 +72,5 @@ export const Simple: Story = { args: { title: "Form Title", fullWidth: true, - footerContent: "Footer content", }, } diff --git a/frontends/ol-components/src/components/FormDialog/FormDialog.tsx b/frontends/ol-components/src/components/FormDialog/FormDialog.tsx index 7b4ec1e616..7949954fee 100644 --- a/frontends/ol-components/src/components/FormDialog/FormDialog.tsx +++ b/frontends/ol-components/src/components/FormDialog/FormDialog.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react" import styled from "@emotion/styled" import { Dialog } from "../Dialog/Dialog" -import type { DialogProps } from "@mui/material/Dialog" +import type { DialogProps } from "../Dialog/Dialog" const FormContent = styled.div` display: flex; @@ -50,11 +50,7 @@ interface FormDialogProps { * The form content. These will be direct children of MUI's [DialogContent](https://mui.com/material-ui/api/dialog-content/) */ children?: React.ReactNode - /** - * Extra content below the cancel/submit buttons. This is useful, e.g., for - * displaying overall form error messages. - */ - footerContent?: React.ReactNode + actions?: DialogProps["actions"] /** * Class applied to the `
` element. */ @@ -93,7 +89,7 @@ const FormDialog: React.FC = ({ title, noValidate, children, - footerContent, + actions, confirmText = "Submit", cancelText = "Cancel", className, @@ -139,11 +135,9 @@ const FormDialog: React.FC = ({ isSubmitting={isSubmitting} className={className} PaperProps={paperProps} + actions={actions} > - - {children} - {footerContent} - + {children} ) } From 8be6cc52fb2d72a2b23611151230b3523e26a8c4 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Thu, 29 Aug 2024 13:46:58 -0400 Subject: [PATCH 5/5] fix a prop ts error --- .../ol-components/src/components/FormDialog/FormDialog.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontends/ol-components/src/components/FormDialog/FormDialog.tsx b/frontends/ol-components/src/components/FormDialog/FormDialog.tsx index 7949954fee..85d7cbb281 100644 --- a/frontends/ol-components/src/components/FormDialog/FormDialog.tsx +++ b/frontends/ol-components/src/components/FormDialog/FormDialog.tsx @@ -56,10 +56,6 @@ interface FormDialogProps { */ formClassName?: string - /** - * MUI Dialog's [TransitionProps](https://mui.com/material-ui/api/dialog/#props) - */ - TransitionProps?: DialogProps["TransitionProps"] /** * If `true`, the dialog stretches to its `maxWidth`. *