Merge pull request #119 from ctk-hq/feat/joy-to-mui

Migrate from Joy to MUI
2 years ago · ef0fffd959
parent 38bc70436d 18f2973276
commit ef0fffd959
32 changed files with 8230 additions and 8295 deletions
--- a/services/frontend/package.json
+++ b/services/frontend/package.json
@ -26,7 +26,7 @@
    "@jsplumb/connector-bezier": "^5.5.2",
    "@jsplumb/core": "^5.5.2",
    "@jsplumb/util": "^5.5.2",
-    "@mui/joy": "^5.0.0-alpha.36",
+    "@mui/material": "^5.10.4",
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/typography": "^0.5.1",
    "@testing-library/jest-dom": "^5.16.2",
--- a/services/frontend/src/App.tsx
+++ b/services/frontend/src/App.tsx
@ -3,7 +3,6 @@ import { Routes, Route, useNavigate } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
-import { CssVarsProvider } from "@mui/joy/styles";

 import { LOCAL_STORAGE } from "./constants";
 import { reducer, initialState } from "./reducers";
@ -26,6 +25,7 @@ import ProtectedRoute from "./partials/ProtectedRoute";
 import "./index.css";
 import { lightTheme } from "./utils/theme";
 import { SuperFormProvider } from "./components/SuperFormProvider";
+import { ThemeProvider } from "@mui/material";

 const queryClient = new QueryClient();

@ -99,7 +99,7 @@ export default function App() {
  }, []);

  return (
-    <CssVarsProvider theme={lightTheme}>
+    <ThemeProvider theme={lightTheme}>
      <QueryClientProvider client={queryClient}>
        <SuperFormProvider>
          <div>
@ -157,6 +157,6 @@ export default function App() {
        </SuperFormProvider>
        <ReactQueryDevtools initialIsOpen={true} />
      </QueryClientProvider>
-    </CssVarsProvider>
+    </ThemeProvider>
  );
 }
--- a/services/frontend/src/components/FormModal.tsx
+++ b/services/frontend/src/components/FormModal.tsx
@ -6,7 +6,7 @@ import {
  useState
 } from "react";
 import { Formik } from "formik";
-import { Button, styled } from "@mui/joy";
+import { Button, styled } from "@mui/material";

 import { reportErrorsAndSubmit } from "../utils/forms";
 import { ScrollView } from "./ScrollView";
@ -54,6 +54,10 @@ const Actions = styled("div")`
  border-style: solid;
 `;

+const SaveButton = styled(Button)`
+  text-transform: none;
+`;
+
 const FormModal = (props: IFormModalProps) => {
  const {
    title,
@ -110,7 +114,15 @@ const FormModal = (props: IFormModalProps) => {
            </StyledScrollView>

            <Actions>
-              <Button onClick={reportErrorsAndSubmit(formik)}>Save</Button>
+              <SaveButton
+                variant="contained"
+                disableElevation={true}
+                disableRipple={true}
+                size="small"
+                onClick={reportErrorsAndSubmit(formik)}
+              >
+                Save
+              </SaveButton>
            </Actions>
          </>
        )}
--- a/services/frontend/src/components/GridColumn.tsx
+++ b/services/frontend/src/components/GridColumn.tsx
@ -1,5 +1,5 @@
 import { FunctionComponent, ReactElement } from "react";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import { useSuperForm } from "../hooks";
 import { IFormField } from "../types";

--- a/services/frontend/src/components/GridRow.tsx
+++ b/services/frontend/src/components/GridRow.tsx
@ -1,5 +1,5 @@
 import { FunctionComponent, ReactElement, ReactNode } from "react";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import { useSuperForm } from "../hooks";
 import { IFormField } from "../types";

--- a/services/frontend/src/components/Modal.tsx
+++ b/services/frontend/src/components/Modal.tsx
@ -1,6 +1,6 @@
 import { FunctionComponent, ReactElement, ReactNode } from "react";
 import { XIcon } from "@heroicons/react/outline";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";

 export interface IModalProps {
  title: string;
--- a/services/frontend/src/components/Record.tsx
+++ b/services/frontend/src/components/Record.tsx
@ -5,8 +5,7 @@ import {
  useCallback,
  useMemo
 } from "react";
-import { styled } from "@mui/joy";
-import IconButton from "@mui/joy/IconButton";
+import { IconButton, styled } from "@mui/material";
 import { MinusSmIcon } from "@heroicons/react/solid";
 import TextField from "./global/FormElements/TextField";
 import Toggle from "./global/FormElements/Toggle";
@ -119,12 +118,7 @@ const Record: FunctionComponent<IRecordProps> = (
      )}
      {renderRemoveWrapper(
        <div className="flex justify-end content-end">
-          <RemoveButton
-            variant="soft"
-            size="sm"
-            color="danger"
-            onClick={handleRemove}
-          >
+          <RemoveButton size="small" color="warning" onClick={handleRemove}>
            <MinusSmIcon className="h-5 w-5" />
          </RemoveButton>
        </div>
--- a/services/frontend/src/components/Records.tsx
+++ b/services/frontend/src/components/Records.tsx
@ -1,5 +1,5 @@
 import { Fragment, FunctionComponent, ReactElement, useCallback } from "react";
-import { styled } from "@mui/joy";
+import { IconButton, styled } from "@mui/material";
 import {
  ChevronDownIcon,
  ChevronUpIcon,
@ -8,7 +8,6 @@ import {
 import Record, { IFieldType } from "./Record";
 import { useFormikContext } from "formik";
 import lodash from "lodash";
-import IconButton from "@mui/joy/IconButton";
 import { useAccordionState } from "../hooks";
 import { useParams } from "react-router-dom";

@ -142,7 +141,7 @@ const Records: FunctionComponent<IRecordsProps> = (
      <Top onClick={toggle}>
        {title && <GroupTitle>{title}</GroupTitle>}
        {collapsible && (
-          <ExpandButton size="sm" variant="plain">
+          <ExpandButton size="small">
            {open && <ChevronUpIcon className="h-5 w-5" />}
            {!open && <ChevronDownIcon className="h-5 w-5" />}
          </ExpandButton>
@ -171,7 +170,7 @@ const Records: FunctionComponent<IRecordsProps> = (
      )}

      {(!collapsible || open) && (
-        <AddButton size="sm" variant="soft" onClick={handleNew}>
+        <AddButton size="small" onClick={handleNew}>
          <PlusIcon className="h-4 w-4" />
        </AddButton>
      )}
--- a/services/frontend/src/components/ScrollView.tsx
+++ b/services/frontend/src/components/ScrollView.tsx
@ -1,5 +1,5 @@
 import { FunctionComponent, HTMLProps, ReactElement, ReactNode } from "react";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";

 export interface IScrollViewProps extends HTMLProps<HTMLDivElement> {
  children: ReactNode;
--- a/services/frontend/src/components/SuperForm.tsx
+++ b/services/frontend/src/components/SuperForm.tsx
@ -1,5 +1,5 @@
 import { FunctionComponent, ReactElement } from "react";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import { useSuperForm } from "../hooks";
 import { IFormField, TFinalFormField } from "../types";

--- a/services/frontend/src/components/Tab.tsx
+++ b/services/frontend/src/components/Tab.tsx
@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import { useTabContext } from "../hooks";

 export interface ITabProps {
--- a/services/frontend/src/components/Tabs.tsx
+++ b/services/frontend/src/components/Tabs.tsx
@ -1,5 +1,5 @@
 import { FunctionComponent, ReactElement, ReactNode } from "react";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import { TabContext } from "../contexts";

 export interface ITabsProps {
--- a/services/frontend/src/components/global/FormElements/TextField.tsx
+++ b/services/frontend/src/components/global/FormElements/TextField.tsx
@ -1,5 +1,5 @@
 import { FunctionComponent, ReactElement } from "react";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import lodash from "lodash";
 import { useFormikContext } from "formik";

--- a/services/frontend/src/components/global/FormElements/Toggle.tsx
+++ b/services/frontend/src/components/global/FormElements/Toggle.tsx
@ -1,7 +1,7 @@
 import lodash from "lodash";
 import { useFormikContext } from "formik";
 import { Fragment, FunctionComponent, ReactElement } from "react";
-import { Button, styled } from "@mui/joy";
+import { Button, styled } from "@mui/material";

 export interface IToggleProps {
  name: string;
@ -49,7 +49,8 @@ const ToggleButton = styled(Button)<IToggleButtonProps>(({ index, total }) => ({
      ${index === total - 1 ? "8px" : "0px"}
      ${index === 0 ? "8px" : "0px"}
    `,
-  fontSize: 11
+  fontSize: 11,
+  textTransform: "none"
 }));

 const ButtonBorder = styled("div")`
@ -74,12 +75,14 @@ const Toggle: FunctionComponent<IToggleProps> = (
        {options.map((option, index) => (
          <Fragment key={option.value}>
            <ToggleButton
-              variant={value === option.value ? "solid" : "soft"}
-              size="sm"
+              variant={value === option.value ? "contained" : "outlined"}
+              size="small"
              color="primary"
              index={index}
              total={options.length}
              onClick={handleChange(option.value)}
+              disableElevation={true}
+              disableRipple={true}
            >
              {option.text}
            </ToggleButton>
--- a/services/frontend/src/components/modals/docker-compose/network/CreateNetworkModal.tsx
+++ b/services/frontend/src/components/modals/docker-compose/network/CreateNetworkModal.tsx
@ -1,6 +1,6 @@
 import { FunctionComponent, ReactElement, useMemo, useState } from "react";
 import { Formik } from "formik";
-import { Button, styled } from "@mui/joy";
+import { Button, styled } from "@mui/material";
 import General from "./General";
 import IPAM from "./IPAM";
 import { CallbackFunction } from "../../../../types";
@ -22,6 +22,10 @@ const Actions = styled("div")`
  padding: ${({ theme }) => theme.spacing(1)};
 `;

+const CreateButton = styled(Button)`
+  text-transform: none;
+`;
+
 const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
  props: ICreateNetworkModalProps
 ): ReactElement => {
@ -50,13 +54,15 @@ const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
          </ScrollView>

          <Actions>
-            <Button
-              size="sm"
-              variant="solid"
+            <CreateButton
+              size="small"
+              variant="contained"
+              disableElevation={true}
+              disableRipple={true}
              onClick={reportErrorsAndSubmit(formik)}
            >
              Create
-            </Button>
+            </CreateButton>
          </Actions>
        </>
      )}
--- a/services/frontend/src/components/modals/docker-compose/network/EditNetworkModal.tsx
+++ b/services/frontend/src/components/modals/docker-compose/network/EditNetworkModal.tsx
@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { Formik } from "formik";
-import { Button, styled } from "@mui/joy";
+import { Button, styled } from "@mui/material";
 import General from "./General";
 import IPAM from "./IPAM";
 import { CallbackFunction } from "../../../../types";
@ -23,6 +23,10 @@ const Actions = styled("div")`
  padding: ${({ theme }) => theme.spacing(1)};
 `;

+const SaveButton = styled(Button)`
+  text-transform: none;
+`;
+
 const EditNetworkModal = (props: IEditNetworkModalProps) => {
  const { onUpdateNetwork, network } = props;
  const [openTab, setOpenTab] = useState("General");
@ -52,13 +56,15 @@ const EditNetworkModal = (props: IEditNetworkModalProps) => {
          </ScrollView>

          <Actions>
-            <Button
-              size="sm"
-              variant="solid"
+            <SaveButton
+              size="small"
+              variant="contained"
              onClick={reportErrorsAndSubmit(formik)}
+              disableElevation={true}
+              disableRipple={true}
            >
              Save
-            </Button>
+            </SaveButton>
          </Actions>
        </>
      )}
--- a/services/frontend/src/components/modals/docker-compose/network/EmptyNetworks.tsx
+++ b/services/frontend/src/components/modals/docker-compose/network/EmptyNetworks.tsx
@ -1,5 +1,5 @@
 import { FunctionComponent, ReactElement } from "react";
-import { Button, styled } from "@mui/joy";
+import { Button, styled } from "@mui/material";
 import { PlusIcon } from "@heroicons/react/outline";

 const Root = styled("div")`
@ -13,6 +13,7 @@ const Root = styled("div")`

 const AddButton = styled(Button)`
  margin-top: ${({ theme }) => theme.spacing(1)};
+  text-transform: none;
 `;

 const Description = styled("p")`
@ -34,7 +35,13 @@ const EmptyNetworks: FunctionComponent<IEmptyNetworksProps> = (
    <Root>
      <Description>No top-level networks available</Description>

-      <AddButton size="sm" variant="plain" onClick={onCreate}>
+      <AddButton
+        size="small"
+        variant="text"
+        onClick={onCreate}
+        disableElevation={true}
+        disableRipple={true}
+      >
        <PlusIcon className="h-4 w-4 mr-2" />
        New network
      </AddButton>
--- a/services/frontend/src/components/modals/docker-compose/network/General.tsx
+++ b/services/frontend/src/components/modals/docker-compose/network/General.tsx
@ -1,4 +1,4 @@
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import TextField from "../../../global/FormElements/TextField";
 import Records from "../../../Records";

--- a/services/frontend/src/components/modals/docker-compose/network/IPAM.tsx
+++ b/services/frontend/src/components/modals/docker-compose/network/IPAM.tsx
@ -1,5 +1,5 @@
 import { FunctionComponent, ReactElement } from "react";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import TextField from "../../../global/FormElements/TextField";
 import Records from "../../../Records";

--- a/services/frontend/src/components/modals/docker-compose/network/NetworkList.tsx
+++ b/services/frontend/src/components/modals/docker-compose/network/NetworkList.tsx
@ -1,6 +1,5 @@
 import { MinusSmIcon, PlusIcon } from "@heroicons/react/outline";
-import { Button, styled } from "@mui/joy";
-import IconButton from "@mui/joy/IconButton";
+import { IconButton, Button, styled } from "@mui/material";
 import { FunctionComponent, ReactElement } from "react";
 import { truncateStr } from "../../../../utils";

@ -58,6 +57,10 @@ const RemoveButton = styled(IconButton)`
  max-height: 16px;
 `;

+const NewButton = styled(Button)`
+  text-transform: none;
+`;
+
 const NetworkList: FunctionComponent<INetworkListProps> = (
  props: INetworkListProps
 ): ReactElement => {
@ -83,9 +86,8 @@ const NetworkList: FunctionComponent<INetworkListProps> = (
              {truncateStr(networks[networkUuid].canvasConfig.node_name, 10)}
            </ListItemText>
            <RemoveButton
-              variant="soft"
-              size="sm"
-              color="danger"
+              size="small"
+              color="warning"
              onClick={(e: any) => handleRemove(e, networkUuid)}
            >
              <MinusSmIcon className="h-4 w-4" />
@ -95,10 +97,16 @@ const NetworkList: FunctionComponent<INetworkListProps> = (
      </Top>

      <Bottom>
-        <Button variant="plain" size="sm" onClick={onNew}>
+        <NewButton
+          variant="text"
+          size="small"
+          onClick={onNew}
+          disableElevation={true}
+          disableRipple={true}
+        >
          <PlusIcon className="h-4 w-4 mr-2" />
          New network
-        </Button>
+        </NewButton>
      </Bottom>
    </Root>
  );
--- a/services/frontend/src/components/modals/docker-compose/network/index.tsx
+++ b/services/frontend/src/components/modals/docker-compose/network/index.tsx
@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import CreateNetworkModal from "./CreateNetworkModal";
 import { CallbackFunction, IEditNetworkForm } from "../../../../types";
 import EditNetworkModal from "./EditNetworkModal";
--- a/services/frontend/src/components/modals/docker-compose/service/Accordion.tsx
+++ b/services/frontend/src/components/modals/docker-compose/service/Accordion.tsx
@ -1,6 +1,5 @@
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/outline";
-import { styled } from "@mui/joy";
-import IconButton from "@mui/joy/IconButton";
+import { IconButton, styled } from "@mui/material";
 import { FunctionComponent, ReactElement, ReactNode } from "react";
 import { useAccordionState } from "../../../../hooks";

@ -57,7 +56,7 @@ const Accordion: FunctionComponent<IAccordionProps> = (
    <Root>
      <Top onClick={toggle}>
        <Title>{title}</Title>
-        <ExpandButton size="sm" variant="plain">
+        <ExpandButton size="small">
          {open && <ChevronUpIcon className="h-5 w-5" />}
          {!open && <ChevronDownIcon className="h-5 w-5" />}
        </ExpandButton>
--- a/services/frontend/src/components/modals/docker-compose/service/Build.tsx
+++ b/services/frontend/src/components/modals/docker-compose/service/Build.tsx
@ -1,4 +1,4 @@
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import TextField from "../../../global/FormElements/TextField";
 import Records from "../../../Records";

--- a/services/frontend/src/components/modals/docker-compose/service/Data.tsx
+++ b/services/frontend/src/components/modals/docker-compose/service/Data.tsx
@ -1,4 +1,4 @@
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import Records from "../../../Records";

 const Root = styled("div")`
--- a/services/frontend/src/components/modals/docker-compose/service/Deploy.tsx
+++ b/services/frontend/src/components/modals/docker-compose/service/Deploy.tsx
@ -1,4 +1,4 @@
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import { useParams } from "react-router-dom";
 import TextField from "../../../global/FormElements/TextField";
 import Toggle from "../../../global/FormElements/Toggle";
--- a/services/frontend/src/components/modals/docker-compose/service/Environment.tsx
+++ b/services/frontend/src/components/modals/docker-compose/service/Environment.tsx
@ -1,4 +1,4 @@
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import Records from "../../../Records";

 const Root = styled("div")`
--- a/services/frontend/src/components/modals/docker-compose/service/General.tsx
+++ b/services/frontend/src/components/modals/docker-compose/service/General.tsx
@ -1,4 +1,4 @@
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import { TFinalFormField } from "../../../../types";
 import { SuperForm } from "../../../SuperForm";

--- a/services/frontend/src/components/modals/docker-compose/volume/General.tsx
+++ b/services/frontend/src/components/modals/docker-compose/volume/General.tsx
@ -1,4 +1,4 @@
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import TextField from "../../../global/FormElements/TextField";
 import Records from "../../../Records";

--- a/services/frontend/src/components/modals/import/index.tsx
+++ b/services/frontend/src/components/modals/import/index.tsx
@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 import { Formik } from "formik";
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import { XIcon } from "@heroicons/react/outline";
 import { CallbackFunction } from "../../../types";
 import { IImportForm } from "./form-utils";
--- a/services/frontend/src/utils/forms.tsx
+++ b/services/frontend/src/utils/forms.tsx
@ -1,4 +1,4 @@
-import { styled } from "@mui/joy";
+import { styled } from "@mui/material";
 import lodash from "lodash";
 import { toaster } from ".";

--- a/services/frontend/src/utils/theme.tsx
+++ b/services/frontend/src/utils/theme.tsx
@ -1,13 +1,9 @@
-import { extendTheme } from "@mui/joy/styles";
+import { createTheme } from "@mui/material";

-export const lightTheme = extendTheme({
-  colorSchemes: {
-    light: {
-      palette: {
-        primary: {
-          mainChannel: "#4f46e5"
-        }
-      }
+export const lightTheme = createTheme({
+  palette: {
+    primary: {
+      main: "#4f46e5"
    }
  }
 });
--- a/services/frontend/yarn.lock
+++ b/services/frontend/yarn.lock