Merge pull request #113 from akd-io/feature/add-material-ui

Add Material UI

Author: akd-io

README.md

@@ -55,6 +55,7 @@ The table below provides an overview of the technologies currently supported by
 | [CSS Modules](https://github.com/css-modules/css-modules) | [Docs](https://github.com/css-modules/css-modules) - [Next.js-specific docs](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) |
 | [Sass](https://sass-lang.com/)                            | [Docs](https://sass-lang.com/documentation) - [Next.js-specific docs](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)                      |
 | [Chakra UI](https://chakra-ui.com/)                       | [Docs](https://chakra-ui.com/docs/getting-started) - [GitHub repo](https://github.com/chakra-ui/chakra-ui)                                                           |
+| [Material UI](https://material-ui.com/)                   | [Docs](https://material-ui.com/getting-started/installation/) - [GitHub repo](https://github.com/mui-org/material-ui)                                                |
 | [React Hook Form](https://react-hook-form.com/)           | [Docs](https://react-hook-form.com/get-started) - [GitHub repo](https://github.com/react-hook-form/react-hook-form)                                                  |
 | [Formik](https://formik.org/)                             | [Docs](https://formik.org/docs/overview) - [GitHub repo](https://github.com/formium/formik)                                                                          |
 | [Framer Motion](https://www.framer.com/motion/)           | [Docs](https://www.framer.com/docs/) - [GitHub repo](https://github.com/framer/motion)                                                                               |

src/main/index.ts

@@ -65,6 +65,10 @@ class CreateNextStack extends Command {
         "Adds Chakra UI. (Component library) (Requires Emotion and Framer Motion)",
     }),
 
+    "material-ui": flags.boolean({
+      description: "Adds Material UI. (Component library)",
+    }),
+
     // Form libraries:
     "react-hook-form": flags.boolean({
       description: "Adds React Hook Form. (Form library)",

src/main/questionnaire/flags-questionnaire.ts

@@ -89,6 +89,7 @@ export const performFlagsQuestionnaire =
         "formattingPreCommitHook"
       ),
       chakra: technologies.has("chakra"),
+      "material-ui": technologies.has("material-ui"),
     }
 
     return result

src/main/questionnaire/questions/categories/component-libraries.ts

@@ -2,7 +2,7 @@ import inquirer from "inquirer"
 import { arrayToKeyToKeyMap } from "../../../helpers/array-to-key-to-key-map"
 import { Technology } from "../../flags-questionnaire"
 
-const componentLibraryOptions = ["chakra"] as const
+const componentLibraryOptions = ["chakra", "material-ui"] as const
 export type ComponentLibraryValue = typeof componentLibraryOptions[number]
 const componentLibraryValues = arrayToKeyToKeyMap(componentLibraryOptions)
 
@@ -25,6 +25,11 @@ export const promptComponentLibraries = async (
         checked: technologies.has("emotion"),
         disabled: !technologies.has("emotion"),
       },
+      {
+        value: componentLibraryValues["material-ui"],
+        name: "Material UI",
+        checked: false,
+      },
     ],
   })
 

src/main/setup/packages.ts

@@ -125,4 +125,12 @@ export const packages = {
     name: "@chakra-ui/react",
     version: "^1.0.0",
   },
+  "@material-ui/core": {
+    name: "@material-ui/core",
+    version: "^4.0.0",
+  },
+  "@material-ui/icons": {
+    name: "@material-ui/icons",
+    version: "^4.0.0",
+  },
 } as const

src/main/setup/setup.ts

@@ -18,6 +18,7 @@ import { installFramerMotionStep } from "./steps/install-framer-motion"
 import { installReactHookFormStep } from "./steps/install-react-hook-form"
 import { removeOfficialCNAContentStep } from "./steps/remove-official-cna-content"
 import { setUpChakraUIStep } from "./steps/set-up-chakra-ui"
+import { setUpMaterialUIStep } from "./steps/set-up-material-ui"
 import { setUpCssModulesWithSassStep } from "./steps/set-up-css-modules-with-sass"
 import { setUpEmotionStep } from "./steps/set-up-emotion"
 import { setUpEslintStep } from "./steps/set-up-eslint"
@@ -50,6 +51,7 @@ export const performSetupSteps = async (
 
     // Component libraries
     setUpChakraUIStep,
+    setUpMaterialUIStep,
 
     // Formatting
     setUpPrettierStep,

src/main/setup/steps/add-content/add-content.ts

@@ -44,8 +44,11 @@ export const addContentStep: Step = {
       )
     }
 
-    if (styling === "emotion" && inputs.flags.chakra) {
-      promises.push(fs.writeFile("theme.ts", generateTheme()))
+    if (
+      (styling === "emotion" && inputs.flags.chakra) ||
+      inputs.flags["material-ui"]
+    ) {
+      promises.push(...generateTheme(inputs))
     }
 
     await Promise.all(promises)

src/main/setup/steps/add-content/generate-app.ts

@@ -10,7 +10,7 @@ type WrapperComponent = {
 const wrapperComponents: WrapperComponent[] = [
   {
     //Chakra Provider
-    openingTag: endent/* tsx */ `<ChakraProvider resetCSS theme={theme}>`,
+    openingTag: endent/* tsx */ `<ChakraProvider resetCSS theme={chakraTheme}>`,
     closingTag: endent/* tsx */ `</ChakraProvider>`,
     filter: ({ flags }) => Boolean(flags.chakra),
   },
@@ -19,14 +19,21 @@ const wrapperComponents: WrapperComponent[] = [
     openingTag: endent/* tsx */ `
       <ColorModeProvider
         options={{
-          initialColorMode: theme.config.initialColorMode,
-          useSystemColorMode: theme.config.useSystemColorMode,
+          initialColorMode: chakraTheme.config.initialColorMode,
+          useSystemColorMode: chakraTheme.config.useSystemColorMode,
         }}
       >
     `,
     closingTag: endent/* tsx */ `</ColorModeProvider>`,
     filter: ({ flags }) => Boolean(flags.chakra),
   },
+  {
+    //Material UI Theme Provider
+    openingTag: endent/* tsx */ `<ThemeProvider theme={materialTheme}>
+                                    <CssBaseline />`,
+    closingTag: endent/* tsx */ `</ThemeProvider>`,
+    filter: ({ flags }) => Boolean(flags["material-ui"]),
+  },
 ]
 
 export const generateApp = (inputs: ValidCNSInputs): string => {
@@ -40,6 +47,7 @@ export const generateApp = (inputs: ValidCNSInputs): string => {
   return endent/* tsx */ `
     import { AppProps } from "next/app";
     ${getChakraUIImports(inputs)}
+    ${getMaterialUIImports(inputs)}
     ${getGlobalStylesImport(inputs)}
 
     const CustomApp = ({ Component, pageProps }: AppProps) => {
@@ -71,7 +79,17 @@ const getChakraUIImports = ({ flags }: ValidCNSInputs) => {
           ChakraProvider,
           ColorModeProvider,
         } from "@chakra-ui/react";
-        import { theme } from "../theme";
+        import { chakraTheme } from "../chakra-theme";
       `
     : ""
 }
+
+const getMaterialUIImports = ({ flags }: ValidCNSInputs) => {
+  return flags["material-ui"]
+    ? endent/* tsx */ `
+        import { ThemeProvider } from "@material-ui/core/styles";
+        import CssBaseline from '@material-ui/core/CssBaseline';
+        import { materialTheme } from "../material-theme";
+    `
+    : ""
+}

src/main/setup/steps/add-content/generate-document.ts

@@ -1,25 +1,61 @@
 import endent from "endent"
-import { ValidCNSInputs } from "../../../create-next-stack-types"
+import type {
+  ValidCNSInputs,
+  ValidCreateNextStackFlags,
+} from "../../../create-next-stack-types"
+
+const getChakraImports = (flags: ValidCreateNextStackFlags) => {
+  if (flags.chakra) {
+    return endent/* tsx */ `
+      import { ColorModeScript } from "@chakra-ui/react";
+      import { chakraTheme } from "../chakra-theme";
+    `
+  } else {
+    return ""
+  }
+}
+
+const getMaterialImports = (flags: ValidCreateNextStackFlags) => {
+  if (flags["material-ui"]) {
+    return endent/* tsx */ `
+      import { materialTheme } from "../material-theme";
+    `
+  } else {
+    return ""
+  }
+}
+
+const getHeadElements = (flags: ValidCreateNextStackFlags) => {
+  if (flags["material-ui"]) {
+    return endent/* tsx */ `
+      <meta name="theme-color" content={materialTheme.palette.primary.main} />
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+      />
+    `
+  } else {
+    return ""
+  }
+}
 
 export const generateDocument = ({ flags }: ValidCNSInputs): string => {
   return endent/* tsx */ `
-    ${
-      flags.chakra
-        ? /* tsx */ `import { ColorModeScript } from "@chakra-ui/react";`
-        : ""
-    }
+    ${getChakraImports(flags)}
+    ${getMaterialImports(flags)}
     import NextDocument, { Html, Head, Main, NextScript } from "next/document";
-    ${flags.chakra ? /* tsx */ `import { theme } from "../theme";` : ""}
 
     export default class Document extends NextDocument {
       render() {
         return (
           <Html lang="en">
-            <Head />
+            <Head>
+              ${getHeadElements(flags)}
+            </Head>
             <body>
               ${
                 flags.chakra
-                  ? /* tsx */ `<ColorModeScript initialColorMode={theme.config.initialColorMode} />`
+                  ? /* tsx */ `<ColorModeScript initialColorMode={chakraTheme.config.initialColorMode} />`
                   : ""
               }
               <Main />

src/main/setup/steps/add-content/generate-theme.ts

@@ -1,7 +1,8 @@
 import endent from "endent"
+import { promises as fs } from "fs"
+import type { ValidCNSInputs } from "../../../create-next-stack-types"
 
-export const generateTheme = (): string => {
-  return endent/* tsx */ `
+const chakraUITheme = endent/* tsx */ `
     import { extendTheme, ThemeConfig } from "@chakra-ui/react";
 
     const colors = {
@@ -17,6 +18,41 @@ export const generateTheme = (): string => {
       useSystemColorMode: false,
     };
 
-    export const theme = extendTheme({ colors, config });
+    export const chakraTheme = extendTheme({ colors, config });
   `
+
+const materialUITheme = endent/* tsx */ `
+    import { createTheme } from '@material-ui/core/styles';
+    import { red } from '@material-ui/core/colors';
+
+    export const materialTheme = createTheme({
+      palette: {
+        primary: {
+          main: '#556cd6',
+        },
+        secondary: {
+          main: '#19857b',
+        },
+        error: {
+          main: red.A400,
+        },
+        background: {
+          default: '#fff',
+        },
+      },
+    });
+    `
+
+export const generateTheme = ({ flags }: ValidCNSInputs): Promise<void>[] => {
+  const promises: Promise<void>[] = []
+
+  if (flags.chakra) {
+    promises.push(fs.writeFile("chakra-theme.ts", chakraUITheme))
+  }
+
+  if (flags["material-ui"]) {
+    promises.push(fs.writeFile("material-theme.ts", materialUITheme))
+  }
+
+  return promises
 }