feat: add generated ui to demo app

pubkeyapp · Nov 29, 2023 · 18c3dea · 18c3dea
1 parent 869ea46
commit 18c3dea
Show file tree

Hide file tree

Showing 10 changed files with 569 additions and 25 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -6,3 +6,4 @@ tmp
 /.yarn
 /.nx/cache
 
+pnpm-lock.yaml
diff --git a/apps/web/postcss.config.cjs b/apps/web/postcss.config.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+}
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
@@ -1,14 +1,9 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import styles from './app.module.css'
-
-import NxWelcome from './nx-welcome'
+import { UiThemeProvider } from './ui/ui-theme-provider'
 
 export function App() {
   return (
-    <div>
-      <NxWelcome title="web" />
-    </div>
+    <UiThemeProvider>
+      <div>Welcome apps/web</div>
+    </UiThemeProvider>
   )
 }
-
-export default App
diff --git a/apps/web/src/app/ui/ui-theme-provider.tsx b/apps/web/src/app/ui/ui-theme-provider.tsx
@@ -0,0 +1,8 @@
+import { MantineProvider } from '@mantine/core'
+import { ReactNode } from 'react'
+
+import '@mantine/core/styles.css'
+
+export function UiThemeProvider({ children }: { children: ReactNode }) {
+  return <MantineProvider>{children}</MantineProvider>
+}
diff --git a/apps/web/src/favicon.ico b/apps/web/src/favicon.ico
diff --git a/apps/web/src/index.html b/apps/web/src/index.html
@@ -2,10 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Web</title>
+    <title>PubKey</title>
     <base href="/" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>

diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import * as ReactDOM from 'react-dom/client'
 
-import App from './app/app'
+import { App } from './app/app'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(

diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
@@ -1 +1,5 @@
-/* You can add global styles to this file, and also import other style files */
+html,
+body,
+#root {
+  height: 100%;
+}
diff --git a/package.json b/package.json
@@ -7,8 +7,17 @@
   },
   "private": true,
   "dependencies": {
+    "@mantine/core": "^7.2.2",
+    "@mantine/dates": "^7.2.2",
+    "@mantine/dropzone": "^7.2.2",
+    "@mantine/form": "^7.2.2",
+    "@mantine/hooks": "^7.2.2",
+    "@mantine/modals": "^7.2.2",
+    "@mantine/notifications": "^7.2.2",
+    "@mantine/spotlight": "^7.2.2",
     "@nx/devkit": "17.1.3",
     "@swc/helpers": "~0.5.2",
+    "dayjs": "^1.11.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tslib": "^2.3.0"
@@ -50,6 +59,9 @@
     "json-schema-to-typescript": "^13.1.1",
     "lint-staged": "^15.1.0",
     "nx": "17.1.3",
+    "postcss": "^8.4.31",
+    "postcss-preset-mantine": "^1.11.0",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "^2.6.2",
     "react-refresh": "^0.10.0",
     "ts-jest": "^29.1.0",