Out 24 Setup MUI Theme Config (#3)

* removed tailwindcss

* add: installed mui and emotion engine

* add: mui config and theme registry

* add: page setup

* changed position of theme registry

* Out 25 Layout (#4)

* added layout

* add: search bar component

* add: custom field access section

* Out 26 Setup Context API (#5)

* add: context api setup

* fix minor bug

* Out 27 Setup toggle functionality and responsiveness (#6)

* add: toggle and responsiveness

* fix minor bug

* fix minor bug

* fix minor bug

* fix: header layout text heading wrapping

* add: base setup for table with brand styles

* add: base setup for table with brand styles

* add: extended table component

* add: extended table component

* fix: table width fits the screen

* add: comparator function for complex object sorting

* add: history cell renderer components

* add: history cell renderer components

* add: search and sort capabalities on the table

* add: search and sort capabalities on the table

* add: autocomplete

* add: empty state fallback page

* add: empty state fallback page

* Changed Next.js version to latest

Next.js version has been changed to 'latest'. Using the prior
version was throwing a bug in the production. To replicate the
bug, simply downgrade to the previous version and try building the
app.

* resolved merge conflicts

* resolved merge conflicts

* yarn.lock file merge conflict resolved

* changed nextjs version to 14.1.0

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,4 +6,3 @@
 
 - [x] ...
 - [ ] ...
-

README.md

@@ -1,2 +1 @@
 ## Copilot profile manager
-

next.config.js

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  },
+};
 
 module.exports = nextConfig;

package.json

@@ -18,18 +18,25 @@
     "postinstall": "prisma generate"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.5",
+    "@mui/material": "^5.15.4",
     "@prisma/client": "^5.7.1",
     "@vercel/postgres": "^0.5.1",
     "copilot-node-sdk": "^0.0.45",
-    "next": "14.0.4",
+    "ag-grid-react": "^31.0.2",
+    "next": "14.1.0",
     "prisma": "^5.7.1",
     "react": "^18",
     "react-dom": "^18",
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-custom-scrollbars": "^4.0.13",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
@@ -38,7 +45,6 @@
     "lint-staged": "^15.2.0",
     "postcss": "^8",
     "prettier": "^3.1.1",
-    "tailwindcss": "^3.3.0",
     "typescript": "^5"
   },
   "lint-staged": {

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
 };

src/app/ThemeRegistry.tsx

@@ -0,0 +1,61 @@
+'use client';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider } from '@emotion/react';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { theme } from '@/theme/theme';
+import React from 'react';
+
+export default function ThemeRegistry(props: any) {
+  const { options, children } = props;
+
+  const [{ cache, flush }] = React.useState(() => {
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = '';
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(' ')}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return (
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
+  );
+}

src/app/globals.css

@@ -1,22 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }

src/app/layout.tsx

@@ -1,18 +1,27 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
+import ThemeRegistry from './ThemeRegistry';
+import { AppContextProvider } from '@/context';
+import { ToggleDecider } from '@/hoc/ToggleDecider';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Profile Manager App',
+  description: 'Copilot Profile Manager App',
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <AppContextProvider>
+        <body className={inter.className}>
+          <ThemeRegistry options={{ key: 'mui' }}>
+            <ToggleDecider>{children}</ToggleDecider>
+          </ThemeRegistry>
+        </body>
+      </AppContextProvider>
     </html>
   );
 }

src/app/manage/page.tsx

@@ -0,0 +1,29 @@
+import { Box, Stack, Typography } from '@mui/material';
+import { ManagePageContainer } from './views/ManagePageContainer';
+import { SimpleButton } from '@/components/styled/SimpleButton';
+
+export default function ManagePage() {
+  return (
+    <Box
+      sx={{
+        padding: { xs: '32px 16px', md: '124px 236px' },
+      }}
+    >
+      <Typography variant="xl">Manage your profile</Typography>
+
+      <ManagePageContainer />
+
+      <Stack direction="column" mt={16} rowGap={4}>
+        <Typography variant="xl">Other settings</Typography>
+        <Stack direction="row" columnGap={4}>
+          <SimpleButton>
+            <Typography variant="md">Set a payment method</Typography>
+          </SimpleButton>
+          <SimpleButton>
+            <Typography variant="md">Go to account settings</Typography>
+          </SimpleButton>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}

src/app/manage/views/EmptyStateFallback.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { BookmarkIcon } from '@/icons';
+import { Stack, Typography } from '@mui/material';
+
+export const EmptyStateFallback = () => {
+  return (
+    <Stack
+      direction="column"
+      rowGap={3}
+      sx={{
+        position: 'absolute',
+        top: '45%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        maxWidth: '444px',
+      }}
+    >
+      <Stack
+        direction="row"
+        justifyContent="center"
+        sx={{
+          borderRadius: (theme) => theme.shape.radius100,
+          background: '#F1F3F8',
+          padding: 2,
+          width: '40px',
+          height: '40px',
+        }}
+      >
+        <BookmarkIcon />
+      </Stack>
+
+      <Typography variant="2xl">Advanced Profile Settings</Typography>
+      <Typography variant="bodyMd" fontSize="15px" sx={{ color: (theme) => theme.color.gray[500] }}>
+        Advanced settings for your profile will show here if you are given access to them.
+      </Typography>
+    </Stack>
+  );
+};

src/app/manage/views/ManagePageContainer.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { MultiSelect } from '@/components/multiSelect/MultiSelect';
+import { StyledTextInput } from '@/components/styled/StyledTextInput';
+import { Stack, Typography, styled } from '@mui/material';
+
+export const ManagePageContainer = () => {
+  return (
+    <Stack
+      direction="column"
+      sx={{
+        padding: { xs: 4, sm: 6 },
+        rowGap: 6,
+        border: (theme) => `1px solid ${theme.color.borders.border}`,
+        borderRadius: (theme) => theme.shape.radius100,
+        mt: 4,
+      }}
+    >
+      <InputContainer>
+        <Typography variant="md">Phone number</Typography>
+        <StyledTextInput variant="outlined" padding="8px 12px" />
+      </InputContainer>
+      <InputContainer>
+        <Typography variant="md">Website</Typography>
+        <StyledTextInput variant="outlined" padding="8px 12px" />
+      </InputContainer>
+      <InputContainer>
+        <Typography variant="md">Website</Typography>
+        <StyledTextInput variant="outlined" padding="8px 12px" />
+      </InputContainer>
+      <InputContainer>
+        <MultiSelect<{ name: string }> data={data} chipColor="rgb(0, 0, 255)" nameField={(item) => item.name} />
+      </InputContainer>
+    </Stack>
+  );
+};
+
+const InputContainer = styled(Stack)({
+  flexDirection: 'column',
+  rowGap: 1.33,
+});
+
+const data: { name: string }[] = [
+  { name: 'Option 1' },
+  { name: 'Option 2' },
+  { name: 'Option 3' },
+  { name: 'Option 4' },
+  { name: 'Option 5' },
+];