feat(CodyPlay): App Settings

package.json

@@ -79,7 +79,7 @@
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.1",
-    "@monaco-editor/react": "^4.5.1",
+    "@monaco-editor/react": "^4.5.2",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.2",
     "@mui/x-data-grid": "^6.6.0",
@@ -98,6 +98,7 @@
     "jexl": "^2.3.0",
     "lodash": "^4.17.21",
     "mdi-material-ui": "^7.7.0",
+    "monaco-editor": "^0.43.0",
     "notistack": "^3.0.1",
     "pg": "^8.10.0",
     "pg-cursor": "^2.9.0",

packages/play/README.md

@@ -0,0 +1,21 @@
+# Cody Play
+
+Cody Play is meant to be used for rapid prototyping within a collaboration session on [prooph board](https://prooph-board.com). 
+Its goal is to remove as much friction as possible. No restarting servers, no slow system due to screen share ... fast feedback-loops on steroids
+
+## Deployment
+
+Cody Play is available on https://play.prooph-board.com
+
+The production build is hosted on Github Pages using the cody-play repo: 
+
+### Production Build
+
+`npx nx run play:build`
+
+### Push to Github Repo
+
+Copy production build into local cody-play repo, commit changes and push to remote.
+Github changes will deploy the new build.
+
+

packages/play/src/app/app.tsx

@@ -17,32 +17,34 @@ import MainLayout from "@cody-play/app/layout/MainLayout";
 import React, {useContext, useEffect, useRef, useState} from "react";
 import {SnackbarProvider} from "notistack";
 import ScrollToTop from "@frontend/app/components/core/ScrollToTop";
-import ToggleColorMode from "@frontend/app/providers/ToggleColorMode";
 import User from "@frontend/app/providers/User";
 import {addAfterDispatchListener, clearAfterDispatchListener, PlayConfigProvider, configStore} from "@cody-play/state/config-store";
 import {PlayPageRegistry} from "@cody-play/state/types";
 import CodyMessageServerInjection from "@cody-play/app/components/core/CodyMessageServer";
 import {getConfiguredPlayEventStore} from "@cody-play/infrastructure/multi-model-store/configured-event-store";
-import {makeStreamListener, PlayStreamListener} from "@cody-play/infrastructure/multi-model-store/make-stream-listener";
+import {PlayStreamListener} from "@cody-play/infrastructure/multi-model-store/make-stream-listener";
+import PlayToggleColorMode from "@cody-play/app/layout/PlayToggleColorMode";
 
 let currentRoutes: string[] = [];
 
 export function App() {
   const Layout = (props: React.PropsWithChildren) => {
     return <>
-      <ToggleColorMode>
+      <PlayToggleColorMode>
         <SnackbarProvider maxSnack={3} >
           <MainLayout>
             <ScrollToTop />
             <Outlet />
           </MainLayout>
         </SnackbarProvider>
-      </ToggleColorMode>
+      </PlayToggleColorMode>
     </>
   };
 
   const {config} = useContext(configStore);
 
+  document.title = config.appName;
+
   const publicListenerRef = useRef<PlayStreamListener | null>(null);
   const writeModelStreamListenerRef = useRef<PlayStreamListener | null>(null);
 
@@ -59,11 +61,15 @@ export function App() {
   }
 
   const makeRouter = (pages: PlayPageRegistry) => {
-    const routeObjects: RouteObject[] = Object.values(pages).map(p => ({
-      path: p.route,
-      handle: {page: p},
-      element: <PlayStandardPage page={p} key={p.route}/>
-    }));
+    const routeObjects: RouteObject[] = Object.keys(pages).map(pName => {
+      const p = pages[pName];
+
+      return {
+        path: p.route,
+        handle: {page: p},
+        element: <PlayStandardPage page={pName} key={p.route}/>
+      }
+    });
 
     currentRoutes = routeObjects.map(r => r.path!);
 

packages/play/src/app/components/core/PlayWelcome.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {Flash, Lightbulb} from "mdi-material-ui";
+import {Alert, Box, Link, Typography} from "@mui/material";
+import {Personas} from "@app/shared/extensions/personas";
+import PersonaCard from "@frontend/app/components/core/prototype/PersonaCard";
+import Grid2 from "@mui/material/Unstable_Grid2";
+import {useContext} from "react";
+import {configStore} from "@cody-play/state/config-store";
+
+interface OwnProps {
+
+}
+
+type PlayWelcomeProps = OwnProps;
+
+const PlayWelcome = (props: PlayWelcomeProps) => {
+  const {config} = useContext(configStore);
+  const personasCards = Personas.map(persona => <PersonaCard persona={persona} key={persona.userId} />)
+
+  return <>
+    <h1>Welcome to {config.appName}</h1>
+    <p><Flash sx={{color: '#f5e339'}} />This application is powered by <Link href="https://github.com/proophboard/cody-engine">Cody Engine</Link><Flash sx={{color: '#f5e339'}} /></p>
+    <Box sx={{marginTop: '30px', maxWidth: '1000px'}}>
+      <p>
+        Cody Play is a <strong>browser-only prototyping app</strong>. Design an event model on <Link href="https://free.prooph-board.com">prooph board</Link> and test the design here in Cody Play.
+        Data and configuration can be saved in the browser's local storage by using the button at the bottom right corner.
+      </p>
+      <p>
+        Cody Play is meant to be used for rapid prototyping within a design session on prooph board. Try out ideas and different designs. Validate data and user flow through the system.
+        Cody Play should help you answer questions like:
+      </p>
+      <ul>
+        <li>Is the task-based UI aligned with the domain model?</li>
+        <li>Does it serve user needs well?</li>
+      </ul>
+      <Alert variant="outlined" severity="info" icon={<Lightbulb sx={{color: '#f5e339'}} />}>
+        <i>It's possible to turn the prototype into a production-ready application by installing <Link href="https://github.com/proophboard/cody-engine">Cody Engine</Link> locally and connecting it to a real database (Postgres) and set up an authentication server like Keycloak.
+          Please contact the <Link href="https://prooph-software.de/#board">prooph board team</Link> for more information.</i>
+      </Alert>
+      <Typography variant="h3" display="block" width={'100%'} marginTop={'30px'}>Personas</Typography>
+      <p>Instead of real users, you can switch personas in prototype mode.</p>
+      <Grid2 container={true} rowSpacing={2} spacing={2} sx={{alignItems: 'stretch'}}>
+        {personasCards}
+      </Grid2>
+    </Box>
+  </>
+};
+
+export default PlayWelcome;