From f373c328ab4ed0e641a96275db633ca923bd2fdb Mon Sep 17 00:00:00 2001 From: Kyle Johnson Date: Sun, 12 Nov 2023 16:28:35 -0600 Subject: [PATCH 1/2] start MUI rebuild --- frontend-mui/.eslintrc.json | 3 + frontend-mui/.gitignore | 37 + frontend-mui/README.md | 34 + frontend-mui/app/favicon.ico | Bin 0 -> 9762 bytes frontend-mui/app/globals.css | 3 + frontend-mui/app/layout.tsx | 115 + frontend-mui/app/page.tsx | 49 + frontend-mui/app/starred/page.tsx | 23 + frontend-mui/app/tasks/page.tsx | 23 + frontend-mui/components/MediaCard.tsx | 37 + .../components/ThemeRegistry/EmotionCache.tsx | 94 + .../ThemeRegistry/ThemeRegistry.tsx | 18 + .../components/ThemeRegistry/theme.ts | 30 + frontend-mui/next-env.d.ts | 5 + frontend-mui/next.config.js | 4 + frontend-mui/package-lock.json | 4513 +++++++++++++++++ frontend-mui/package.json | 32 + frontend-mui/postcss.config.js | 6 + frontend-mui/public/slack.png | Bin 0 -> 17473 bytes frontend-mui/tailwind.config.ts | 20 + frontend-mui/tsconfig.json | 27 + 21 files changed, 5073 insertions(+) create mode 100644 frontend-mui/.eslintrc.json create mode 100644 frontend-mui/.gitignore create mode 100644 frontend-mui/README.md create mode 100644 frontend-mui/app/favicon.ico create mode 100644 frontend-mui/app/globals.css create mode 100644 frontend-mui/app/layout.tsx create mode 100644 frontend-mui/app/page.tsx create mode 100644 frontend-mui/app/starred/page.tsx create mode 100644 frontend-mui/app/tasks/page.tsx create mode 100644 frontend-mui/components/MediaCard.tsx create mode 100644 frontend-mui/components/ThemeRegistry/EmotionCache.tsx create mode 100644 frontend-mui/components/ThemeRegistry/ThemeRegistry.tsx create mode 100644 frontend-mui/components/ThemeRegistry/theme.ts create mode 100644 frontend-mui/next-env.d.ts create mode 100644 frontend-mui/next.config.js create mode 100644 frontend-mui/package-lock.json create mode 100644 frontend-mui/package.json create mode 100644 frontend-mui/postcss.config.js create mode 100644 frontend-mui/public/slack.png create mode 100644 frontend-mui/tailwind.config.ts create mode 100644 frontend-mui/tsconfig.json diff --git a/frontend-mui/.eslintrc.json b/frontend-mui/.eslintrc.json new file mode 100644 index 00000000..bffb357a --- /dev/null +++ b/frontend-mui/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/frontend-mui/.gitignore b/frontend-mui/.gitignore new file mode 100644 index 00000000..88b6f0d9 --- /dev/null +++ b/frontend-mui/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo diff --git a/frontend-mui/README.md b/frontend-mui/README.md new file mode 100644 index 00000000..f4da3c4c --- /dev/null +++ b/frontend-mui/README.md @@ -0,0 +1,34 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/frontend-mui/app/favicon.ico b/frontend-mui/app/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..d825cc0665e90a2c813ec59aa5ef568553c33571 GIT binary patch literal 9762 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 + + + + + + + hello there + + + + + + + {LINKS.map(({text, href, icon: Icon}) => ( + + + + + + + + + ))} + + + + {PLACEHOLDER_LINKS.map(({text, icon: Icon}) => ( + + + + + + + + + ))} + + + + {children} + + + + + + ); +} diff --git a/frontend-mui/app/page.tsx b/frontend-mui/app/page.tsx new file mode 100644 index 00000000..e5413731 --- /dev/null +++ b/frontend-mui/app/page.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Unstable_Grid2'; +import Drawer from '@mui/material/Drawer'; +import Typography from '@mui/material/Typography'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import Alert from '@mui/material/Alert'; +import AlertTitle from '@mui/material/AlertTitle'; +import MediaCard from '@/components/MediaCard'; + +export default function HomePage() { + return ( + +
+ + Hello 👋 + This app uses the Next.js App Router and Material UI v5. + + + + + + + + + + + + + + + +
+ + ); +} diff --git a/frontend-mui/app/starred/page.tsx b/frontend-mui/app/starred/page.tsx new file mode 100644 index 00000000..84fe92c4 --- /dev/null +++ b/frontend-mui/app/starred/page.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import Container from '@mui/material/Container'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; + +export default function StarredPage() { + return ( + + + + Starred Page + + + + ); +} diff --git a/frontend-mui/app/tasks/page.tsx b/frontend-mui/app/tasks/page.tsx new file mode 100644 index 00000000..c69bddae --- /dev/null +++ b/frontend-mui/app/tasks/page.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import Container from '@mui/material/Container'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; + +export default function TasksPage() { + return ( + + + + Tasks Page + + + + ); +} diff --git a/frontend-mui/components/MediaCard.tsx b/frontend-mui/components/MediaCard.tsx new file mode 100644 index 00000000..7ac16ddc --- /dev/null +++ b/frontend-mui/components/MediaCard.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import Image from 'next/image'; +import Card from '@mui/material/Card'; +import CardActions from '@mui/material/CardActions'; +import CardContent from '@mui/material/CardContent'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; + +export default function MediaCard({ heading, text }: { heading: string; text: string }) { + return ( + + Random image + + + {heading} + + + {text} + + + + + + + + ); +} diff --git a/frontend-mui/components/ThemeRegistry/EmotionCache.tsx b/frontend-mui/components/ThemeRegistry/EmotionCache.tsx new file mode 100644 index 00000000..aca70850 --- /dev/null +++ b/frontend-mui/components/ThemeRegistry/EmotionCache.tsx @@ -0,0 +1,94 @@ +'use client'; +import * as React from 'react'; +import createCache from '@emotion/cache'; +import { useServerInsertedHTML } from 'next/navigation'; +import { CacheProvider as DefaultCacheProvider } from '@emotion/react'; +import type { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache'; + +export type NextAppDirEmotionCacheProviderProps = { + /** This is the options passed to createCache() from 'import createCache from "@emotion/cache"' */ + options: Omit; + /** By default from 'import { CacheProvider } from "@emotion/react"' */ + CacheProvider?: (props: { + value: EmotionCache; + children: React.ReactNode; + }) => React.JSX.Element | null; + children: React.ReactNode; +}; + +// Adapted from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx +export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) { + const { options, CacheProvider = DefaultCacheProvider, children } = props; + + const [registry] = React.useState(() => { + const cache = createCache(options); + cache.compat = true; + const prevInsert = cache.insert; + let inserted: { name: string; isGlobal: boolean }[] = []; + cache.insert = (...args) => { + const [selector, serialized] = args; + if (cache.inserted[serialized.name] === undefined) { + inserted.push({ + name: serialized.name, + isGlobal: !selector, + }); + } + return prevInsert(...args); + }; + const flush = () => { + const prevInserted = inserted; + inserted = []; + return prevInserted; + }; + return { cache, flush }; + }); + + useServerInsertedHTML(() => { + const inserted = registry.flush(); + if (inserted.length === 0) { + return null; + } + let styles = ''; + let dataEmotionAttribute = registry.cache.key; + + const globals: { + name: string; + style: string; + }[] = []; + + inserted.forEach(({ name, isGlobal }) => { + const style = registry.cache.inserted[name]; + + if (typeof style !== 'boolean') { + if (isGlobal) { + globals.push({ name, style }); + } else { + styles += style; + dataEmotionAttribute += ` ${name}`; + } + } + }); + + return ( + + {globals.map(({ name, style }) => ( +