project setup

Author: mnajdova

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

README.md

@@ -1,2 +1,44 @@
-# design-engineer-technical-challenge
-This challenge is part of the hiring process at MUI for the Design Engineer related positions.
+# ⚛️ Design Engineer @ MUI: Technical challenge
+
+This challenge is part of the hiring process at MUI for the Design Engineer position.
+The idea is to make as much progress as possible under a given time constraint (3-4 hours).
+
+## Why are we doing this?
+
+At MUI, you'll frequently flesh out product requirements, turning them into implementations that take into account great design & code standards.
+This challenge aims at simulating how a potential day-to-day situation plays out.
+We'll review how you make design decisions and the quality of the written code.
+
+## Context about MUI
+
+MUI's objective is to become the UI toolkit for React developers.
+We're unifying the fragmented ecosystem of dependencies into a single set of simple, beautiful, consistent, and accessible React components.
+
+Our mission is then, ultimately, to make building great React UIs and web apps a breeze ⎯ quicker, simpler, and accessible to more people.
+At the end of the day, it's about [_writing less code_](https://youtu.be/GnO7D5UaDig?t=2451).
+
+Head over to [our company Handbook](https://mui-org.notion.site/Why-MUI-d8b8c142a6a44e3aa963f26edf4e03db) to learn more!
+
+## Challenge summary
+
+Given that the Design Engineer position sits right at the intersection between engineering and design, this challenge was tailored to elevate your skills in both areas.
+You’ll develop a stacked **Snackbar** component, and here’s the reference design:
+
+![Snackbars example design](public/example.png)
+
+Feel free to add your own creative spin to this design, tweaking it however you want to add more spice and personal taste.
+However, we do have a few requirements:
+
+- **Stack:** use MUI Base’s [`UnstyledSnackbar`](https://mui.com/base/react-snackbar/) component or even other headless/unstyled component libraries as the foundation for it.
+- **Expand & collapse interaction:** the Snackbar sitting behind should be fully visible as you hover the stack. It then should collapse as you hover out of it.
+- **Dark mode:** make sure to support light and dark modes.
+
+## Submission instructions
+
+- **DO NOT** host your project on a public repository.
+- Please send us a .zip file containing this project using the upload link that we have provided by email (**with** the _.git_ folder).
+- To significantly reduce the size of the archive, you can remove the `/_node_modules_/` and `/docs/.next/` folders.
+- If you don't have the upload link, you can simply send it to [email protected].
+
+We're excited and looking forward to seeing what you'll create!
+Good luck 🚀

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {},
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "design-engineer-technical-challenge",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/server": "^11.10.0",
+    "@emotion/styled": "^11.10.6",
+    "@types/node": "18.15.3",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "eslint": "8.36.0",
+    "eslint-config-next": "13.2.4",
+    "next": "13.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "4.9.5"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { AppProps } from 'next/app';
+import { CacheProvider, EmotionCache } from '@emotion/react';
+import createEmotionCache from '../src/createEmotionCache';
+
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache();
+
+export interface MyAppProps extends AppProps {
+  emotionCache?: EmotionCache;
+}
+
+export default function MyApp(props: MyAppProps) {
+  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
+  return (
+    <CacheProvider value={emotionCache}>
+      <Head>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+        <Component {...pageProps} />
+    </CacheProvider>
+  );
+}

pages/_document.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentProps,
+  DocumentContext,
+} from 'next/document';
+import createEmotionServer from '@emotion/server/create-instance';
+import { AppType } from 'next/app';
+import createEmotionCache from '../src/createEmotionCache';
+import { MyAppProps } from './_app';
+
+interface MyDocumentProps extends DocumentProps {
+  emotionStyleTags: JSX.Element[];
+}
+
+export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
+  return (
+    <Html lang="en">
+      <Head>
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <meta name="emotion-insertion-point" content="" />
+        {emotionStyleTags}
+      </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: DocumentContext) => {
+  // 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: React.ComponentType<React.ComponentProps<AppType> & MyAppProps>) =>
+        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/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,
+    emotionStyleTags,
+  };
+};

pages/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Snackbar from '../src/components/Snackbar';
+
+// Update this page to show-case the demo of the Snackbar component
+export default function Page() {
+  return (
+    <>
+      <h1>Demo using the Snackbar component</h1>
+      <Snackbar />
+    </>
+  );
+}

public/example.png

@@ -0,0 +1,4 @@
+// Your code goes here
+export default function Snackbar() {
+  return null;
+}

public/next.svg

@@ -0,0 +1,19 @@
+import createCache from '@emotion/cache';
+
+const isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]',
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint });
+}

public/thirteen.svg

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}