Add the MUI config from blockprotocol website

hashintel · Mar 10, 2022 · dedb547 · dedb547
1 parent 4371bc8
commit dedb547
Show file tree

Hide file tree

Showing 34 changed files with 1,555 additions and 6 deletions.
diff --git a/apps/dev/package.json b/apps/dev/package.json
@@ -18,6 +18,10 @@
     "webpack": "^5"
   },
   "dependencies": {
+    "@emotion/react": "11.8.1",
+    "@emotion/server": "11.4.0",
+    "@emotion/styled": "11.8.1",
+    "@mui/material": "5.5.0",
     "next": "12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"

diff --git a/apps/dev/src/pages/_app.page.tsx b/apps/dev/src/pages/_app.page.tsx
@@ -1,9 +1,30 @@
-import { VFC } from "react";
+import { CacheProvider, EmotionCache, ThemeProvider } from "@emotion/react";
+import CssBaseline from "@mui/material/CssBaseline";
 import type { AppProps } from "next/app";
+import { VFC } from "react";
 import "../../styles/globals.css";
+import { theme } from "../theme";
+import { createEmotionCache } from "../util/createEmotionCache";
+
+const clientSideEmotionCache = createEmotionCache();
+
+type MyAppProps = {
+  emotionCache?: EmotionCache;
+} & AppProps;
 
-const MyApp: VFC<AppProps> = ({ Component, pageProps }) => {
-  return <Component {...pageProps} />;
+const MyApp: VFC<MyAppProps> = ({
+  Component,
+  pageProps,
+  emotionCache = clientSideEmotionCache,
+}) => {
+  return (
+    <CacheProvider value={emotionCache}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </CacheProvider>
+  );
 };
 
 export default MyApp;
diff --git a/apps/dev/src/pages/_document.page.tsx b/apps/dev/src/pages/_document.page.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from "next/document";
+import createEmotionServer from "@emotion/server/create-instance";
+import { createEmotionCache } from "../util/createEmotionCache";
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          {/** @todo meta */}
+
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+            rel="stylesheet"
+          />
+          {/** @todo add icons */}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+// `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) =>
+        // eslint-disable-next-line react/function-component-definition
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />;
+        },
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
+  // This is important. It prevents emotion to render invalid HTML.
+  // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153
+  const emotionStyles = extractCriticalToChunks(initialProps.html);
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(" ")}`}
+      key={style.key}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ));
+
+  return {
+    ...initialProps,
+    // Styles fragment is rendered after the app and page rendering finish.
+    styles: [
+      ...React.Children.toArray(initialProps.styles),
+      ...emotionStyleTags,
+    ],
+  };
+};
+
+export default MyDocument;
diff --git a/apps/dev/src/pages/index.page.tsx b/apps/dev/src/pages/index.page.tsx
@@ -1,3 +1,4 @@
+import Button from "@mui/material/Button";
 import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
@@ -10,6 +11,7 @@ const Home: NextPage = () => {
       </Head>
       <Image src="/logo.svg" width={176} height={18.38} />
       <h1>Hello World</h1>
+      <Button>Hello World</Button>
     </>
   );
 };

diff --git a/apps/dev/src/theme/components/dataDisplay/MuiIconButtonThemeOptions.ts b/apps/dev/src/theme/components/dataDisplay/MuiIconButtonThemeOptions.ts
@@ -0,0 +1,39 @@
+/**
+ * @todo update from blockprotocol
+ */
+import { Components, Theme } from "@mui/material";
+
+export const MuiIconButtonThemeOptions: Components<Theme>["MuiIconButton"] = {
+  defaultProps: {
+    disableFocusRipple: true,
+    disableRipple: true,
+    disableTouchRipple: true,
+  },
+  styleOverrides: {
+    root: ({ theme }) => ({
+      "&:hover": {
+        svg: {
+          color: theme.palette.purple[600],
+        },
+      },
+      "&:active": {
+        svg: {
+          color: theme.palette.purple[700],
+        },
+      },
+      "&:focus": {
+        border: "none !important",
+        borderRadius: 0,
+      },
+      "&:focus-visible": {
+        borderRadius: 0,
+        border: "none !important",
+        outline: `1px solid ${theme.palette.purple[600]}`,
+      },
+      svg: {
+        color: theme.palette.gray[70],
+        transition: theme.transitions.create("color"),
+      },
+    }),
+  },
+};
diff --git a/apps/dev/src/theme/components/dataDisplay/MuiIconThemeOptions.ts b/apps/dev/src/theme/components/dataDisplay/MuiIconThemeOptions.ts
@@ -0,0 +1,10 @@
+/**
+ * @todo update from blockprotocol
+ */
+import { Components } from "@mui/material";
+
+export const MuiIconThemeOptions: Components["MuiIcon"] = {
+  defaultProps: {
+    baseClassName: "fas",
+  },
+};
diff --git a/apps/dev/src/theme/components/dataDisplay/MuiListItemButtonThemeOptions.ts b/apps/dev/src/theme/components/dataDisplay/MuiListItemButtonThemeOptions.ts
@@ -0,0 +1,32 @@
+/**
+ * @todo update from blockprotocol
+ */
+import { Components, Theme } from "@mui/material";
+
+export const MuiListItemButtonThemeOptions: Components<Theme>["MuiListItemButton"] =
+  {
+    defaultProps: {
+      disableRipple: true,
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        paddingLeft: theme.spacing(5),
+        "&:hover": {
+          backgroundColor: theme.palette.gray[20],
+        },
+        "&.Mui-selected": {
+          backgroundColor: "transparent",
+          "&:hover": {
+            backgroundColor: theme.palette.gray[20],
+          },
+          "& .MuiListItemIcon-root": {
+            color: theme.palette.purple[700],
+          },
+          "& .MuiListItemText-primary": {
+            color: theme.palette.purple[700],
+            fontWeight: 600,
+          },
+        },
+      }),
+    },
+  };
diff --git a/apps/dev/src/theme/components/dataDisplay/MuiListItemIconThemeOptions.ts b/apps/dev/src/theme/components/dataDisplay/MuiListItemIconThemeOptions.ts
@@ -0,0 +1,14 @@
+/**
+ * @todo update from blockprotocol
+ */
+import { Components, Theme } from "@mui/material";
+
+export const MuiListItemIconThemeOptions: Components<Theme>["MuiListItemIcon"] =
+  {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        minWidth: theme.spacing(4),
+        color: theme.palette.gray[80],
+      }),
+    },
+  };
diff --git a/apps/dev/src/theme/components/dataDisplay/MuiListItemTextThemeOptions.ts b/apps/dev/src/theme/components/dataDisplay/MuiListItemTextThemeOptions.ts
@@ -0,0 +1,14 @@
+/**
+ * @todo update from blockprotocol
+ */
+import { Components, Theme } from "@mui/material";
+
+export const MuiListItemTextThemeOptions: Components<Theme>["MuiListItemText"] =
+  {
+    styleOverrides: {
+      primary: ({ theme }) => ({
+        fontWeight: 500,
+        color: theme.palette.gray[80],
+      }),
+    },
+  };
diff --git a/apps/dev/src/theme/components/dataDisplay/MuiTypographyThemeOptions.ts b/apps/dev/src/theme/components/dataDisplay/MuiTypographyThemeOptions.ts
@@ -0,0 +1,52 @@
+/**
+ * @todo update from blockprotocol
+ */
+import { Components, Theme } from "@mui/material";
+
+export const MuiTypographyThemeOptions: Components<Theme>["MuiTypography"] = {
+  defaultProps: {
+    variantMapping: {
+      bpTitle: "h1",
+      bpSubtitle: "p",
+      bpHeading1: "h1",
+      bpHeading2: "h2",
+      bpHeading3: "h3",
+      bpHeading4: "h4",
+      bpSmallCaps: "p",
+      bpLargeText: "p",
+      bpBodyCopy: "p",
+      bpSmallCopy: "span",
+      bpMicroCopy: "span",
+    },
+    variant: "bpBodyCopy",
+  },
+  styleOverrides: {
+    root: ({ ownerState, theme }) => ({
+      "& a": {
+        ...(ownerState.variant === "bpBodyCopy" && {
+          fontWeight: 600,
+          color: theme.palette.purple[700],
+          borderBottomWidth: 2,
+          borderBottomColor: theme.palette.purple[700],
+          borderBottomStyle: "solid",
+          transition: theme.transitions.create("color"),
+          ":hover": {
+            color: theme.palette.purple[500],
+            borderBottomColor: theme.palette.purple[500],
+          },
+        }),
+        ...(ownerState.variant === "bpSmallCopy" && {
+          color: "currentColor",
+          borderBottomWidth: 2,
+          borderBottomColor: "currentColor",
+          borderBottomStyle: "solid",
+          transition: theme.transitions.create("color"),
+          ":hover": {
+            color: theme.palette.purple[700],
+            borderBottomColor: theme.palette.purple[700],
+          },
+        }),
+      },
+    }),
+  },
+};
diff --git a/apps/dev/src/theme/components/feedback/MuiSkeletonThemeOptions.ts b/apps/dev/src/theme/components/feedback/MuiSkeletonThemeOptions.ts
@@ -0,0 +1,12 @@
+/**
+ * @todo update from blockprotocol
+ */
+import { Components, Theme } from "@mui/material";
+
+export const MuiSkeletonThemeOptions: Components<Theme>["MuiSkeleton"] = {
+  styleOverrides: {
+    root: ({ theme }) => ({
+      backgroundColor: theme.palette.gray["20"],
+    }),
+  },
+};