Resolve conflict in home page

strudel-science · May 3, 2024 · 2e237a2 · 2e237a2
2 parents 6550500 + 9c3bad5
commit 2e237a2
Show file tree

Hide file tree

Showing 56 changed files with 505 additions and 201 deletions.
diff --git a/strudel-cli/src/strudel/main.py b/strudel-cli/src/strudel/main.py
@@ -121,7 +121,8 @@ def create_app(
             "strudel-cookiecutter/base",
             "--output-dir",
             output_dir,
-            f"name={name}"
+            f"name={name}",
+            "--no-input"
         ]
         if config:
             # Convert the user's json config into a yaml config
@@ -267,6 +268,7 @@ def add_taskflow(
             "--output-dir",
             output_dir,
             f"name={name}",
+            "--no-input"
         ]
         config_output_dir = False
         if config:

diff --git a/strudel-cookiecutter/base/cookiecutter.json b/strudel-cookiecutter/base/cookiecutter.json
@@ -1,6 +1,5 @@
 {
   "name": "my-strudel-app",
-  "appTitle": "My Science App",
   "_jinja2_env_vars": {
     "variable_start_string": "{@", 
     "variable_end_string": "@}"

diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/index.html b/strudel-cookiecutter/base/{@cookiecutter.name@}/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon-32x32.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>STRUDEL + React + MUI</title>
   </head>

diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/public/favicon-32x32.png b/strudel-cookiecutter/base/{@cookiecutter.name@}/public/favicon-32x32.png
diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/public/strudel-logo-header.png b/strudel-cookiecutter/base/{@cookiecutter.name@}/public/strudel-logo-header.png
diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/public/strudel-logo-icon.png b/strudel-cookiecutter/base/{@cookiecutter.name@}/public/strudel-logo-icon.png
diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/src/App.tsx b/strudel-cookiecutter/base/{@cookiecutter.name@}/src/App.tsx
@@ -14,8 +14,7 @@ const App: React.FC = () => {
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        {/* strudel-kit-variable-next-line */}
-        <AppProvider appTitle="Demo App">
+        <AppProvider>
           <RouterProvider router={createBrowserRouter(routes)} />
           <ApiModal />
         </AppProvider>

diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/ApiModal.tsx b/strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/ApiModal.tsx
@@ -54,6 +54,7 @@ export const ApiModal: React.FC = () => {
             <TextField 
               value={value} 
               label="Value"
+              type="password"
               onChange={(event) => {
                 setValue(event.target.value);
               }}

diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/Footer.tsx b/strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/Footer.tsx
@@ -0,0 +1,51 @@
+import { Box, Container, Grid, Stack, Typography } from '@mui/material';
+import React from 'react';
+import { config } from '../../strudel.config';
+import { AppLink } from './AppLink';
+import { ImageWrapper } from './ImageWrapper';
+
+/**
+ * Bottom footer component
+ */
+export const Footer: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: 'white',
+        padding: 4
+      }}
+    >
+      <Container>
+        <Grid container>
+          <Grid item md={6}>
+            <Stack 
+              direction="row"
+              useFlexGap
+              sx={{
+                flexWrap: 'wrap',
+              }}
+            >
+              {config.footer.links.map((link, i) => (
+                <AppLink key={`${link.path}-${i}`} to={link.path}>
+                  {link.label}
+                </AppLink>
+              ))}
+            </Stack>
+          </Grid>
+          <Grid item md={6}>
+            <Stack alignItems="center">
+              <Typography>{config.footer.info}</Typography>
+              {config.footer.image && (
+                <AppLink to="/">
+                  <ImageWrapper height={60}>
+                    <img src={config.footer.image} />
+                  </ImageWrapper>
+                </AppLink>
+              )}
+            </Stack>
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  )
+}
diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/ImageWrapper.tsx b/strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/ImageWrapper.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
 import { Box, BoxProps } from '@mui/material';
+import React from 'react';
 import './ImageWrapper.css';
 
 interface ImageWrapperProps extends BoxProps {

diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/Layout.tsx b/strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/Layout.tsx
@@ -0,0 +1,27 @@
+import { Box, Stack } from '@mui/material';
+import React, { PropsWithChildren } from 'react';
+import { Footer } from './Footer';
+import { TopBar } from './TopBar';
+
+/**
+ * Basic layout with navbar and footer
+ */
+export const Layout: React.FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <Stack
+      sx={{
+        height: '100%'
+      }}
+    >
+      <TopBar />
+      <Box
+        sx={{
+          flex: 1,
+        }}
+      >
+        {children}
+      </Box>
+      <Footer />
+    </Stack>
+  )
+}
diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/TopBar.tsx b/strudel-cookiecutter/base/{@cookiecutter.name@}/src/components/TopBar.tsx
@@ -2,16 +2,14 @@ import { AppBar, IconButton, Toolbar, Typography, Stack } from '@mui/material';
 import HomeIcon from '@mui/icons-material/Home';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import React from 'react';
-import { useAppState } from '../context/ContextProvider';
 import { AppLink } from './AppLink';
-import { routes } from '@generouted/react-router';
+import { config } from '../../strudel.config';
+import { ImageWrapper } from './ImageWrapper';
 
 /**
  * Top navigation bar component
  */
 export const TopBar: React.FC = () => {
-  const app = useAppState();
-  console.log(routes);
   return (
     <AppBar color="default" position="static">
       <Toolbar>
@@ -23,20 +21,32 @@ export const TopBar: React.FC = () => {
           }}
         >
           <AppLink to="/">
-            <IconButton
-              size="large"
-              edge="start"
-              color="inherit"
-              aria-label="menu"
-            >
-              <HomeIcon />
-            </IconButton>
+            {!config.navbar.logo && (
+              <IconButton
+                size="large"
+                edge="start"
+                color="inherit"
+                aria-label="menu"
+              >
+                <HomeIcon />
+              </IconButton>
+            )}
+            {config.navbar.logo && (
+              <ImageWrapper height={30}>
+                <img src={config.navbar.logo} />
+              </ImageWrapper>
+            )}
           </AppLink>
           <AppLink to="/">
             <Typography variant="h6" component="div">
-              {app.state.appTitle}
+              {config.navbar.title}
             </Typography>
           </AppLink>
+          {config.navbar.items.map((item, i) => (
+            <AppLink key={`${item.path}-${i}`} to={item.path}>
+              {item.label}
+            </AppLink>
+          ))}
         </Stack>
         <IconButton
           size="large"

diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/src/context/ContextProvider.tsx b/strudel-cookiecutter/base/{@cookiecutter.name@}/src/context/ContextProvider.tsx
@@ -65,8 +65,7 @@ export const AppProvider: React.FC<AppProviderProps> = (props) => {
 export const useAppState = () => {
   const context = useContext(AppContext)
   if (context === undefined) {
-    console.log('useAppState must be used within an AppProvider')
-    return { state: { appTitle: 'Test' } };
+    throw new Error('useAppState must be used within an AppProvider')
   }
   return context
 }
diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/src/index.css b/strudel-cookiecutter/base/{@cookiecutter.name@}/src/index.css
@@ -1,4 +1,9 @@
+html {
+  height: 100%;
+}
+
 body {
+  height: 100%;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -7,6 +12,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+#root {
+  height: 100%;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/src/main.tsx b/strudel-cookiecutter/base/{@cookiecutter.name@}/src/main.tsx
@@ -3,9 +3,6 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './App'
 
-// TODO: might need to move this into the useDataFromSource hook
-export const basename = document.querySelector('base')?.getAttribute('href') ?? '';
-
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />

diff --git a/strudel-cookiecutter/base/{@cookiecutter.name@}/src/pages/index.tsx b/strudel-cookiecutter/base/{@cookiecutter.name@}/src/pages/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Box, Container, Paper, Stack, Typography } from '@mui/material';
-import { TopBar } from '../components/TopBar';
 import { routes } from '@generouted/react-router';
+import { Box, Chip, Container, Grid, Paper, Stack, Table, TableBody, TableCell, TableRow, Typography } from '@mui/material';
+import React from 'react';
 import { AppLink } from '../components/AppLink';
+import { Layout } from '../components/Layout';
 
 /**
  * TODO:
@@ -17,7 +17,7 @@ const HomePage: React.FC = () => {
     const pathA = a.path || '';
     const pathB = b.path || '';
 
-    if (pathA === 'playground' || pathA < pathB) {
+    if ((pathA === 'playground' && pathB !== '/') || pathA < pathB) {
       return -1;
     } else if (pathA > pathB) {
       return 1;
@@ -27,44 +27,93 @@ const HomePage: React.FC = () => {
   });
 
   return (
-    <Box>
-      <TopBar />
+    <Layout>
       <Container
-        maxWidth="md"
+        maxWidth="lg"
         sx={{
           marginTop: 3,
           marginBottom: 3,
         }}
       >
-        <Stack>
-          <Paper
-            sx={{
-              padding: 2
-            }}
-          >
-            <Typography variant="h5" component="h1" fontWeight="bold">Welcome to your app built with STRUDEL!</Typography>
-          </Paper>
-          <Paper
+        <Box>
+          <Stack
             sx={{
-              padding: 2
+              marginBottom: 4
             }}
           >
-            <Stack>
-              <Typography variant="h6">Registered Pages</Typography>
-              {routes[0].children?.map((route) => {
-                if (route.path !== '/' && route.path !== '*') {
-                  return (
-                    <Box key={route.path}>
-                      <AppLink to={route.path || ''}>{route.path}</AppLink>
-                    </Box>
-                  )
-                }
-              })}
-            </Stack>
-          </Paper>
-        </Stack>
+            <Typography variant="h6" component="h1" fontWeight="bold">You just built an app with STRUDEL!</Typography>
+            <Typography>
+              Get started by going to <code><AppLink to="playground">/playground</AppLink></code> and editing <Chip size="small" label={<code>src/pages/playground/index.tsx</code>} />
+            </Typography>
+          </Stack>
+          <Grid container columnSpacing={4} rowSpacing={4}>
+            <Grid item md={12}>
+              <Stack>
+                <Typography variant="h5" component="h2">Registered Pages</Typography>
+                <Typography>
+                  Below are all of the pages that are registered in your app. As you add new top-level pages and Task Flows to your app, they will show up here.
+                </Typography>
+                <Stack
+                  spacing={0}
+                  sx={{
+                    border: '1px solid',
+                    borderColor: 'grey.50',
+                    padding: 2
+                  }}
+                >
+                  <Table size="small">
+                    <TableBody>
+                      {routes[0].children?.map((route) => {
+                        if (route.path === '/') {
+                          return (
+                            <TableRow key={route.path}>
+                              <TableCell>
+                                <code>
+                                  <AppLink to={route.path || ''}>/</AppLink>
+                                </code>
+                              </TableCell>
+                              <TableCell>
+                                <code>
+                                  <Chip size="small" label={<code>src/pages/index.tsx</code>} />
+                                </code>
+                              </TableCell>
+                            </TableRow>
+                          )
+                        } else if (route.path !== '*') {
+                          return (
+                            <TableRow key={route.path}>
+                              <TableCell>
+                                <code>
+                                  <AppLink to={route.path || ''}>/{route.path}</AppLink>
+                                </code>
+                              </TableCell>
+                              <TableCell>
+                                <code>
+                                  <Chip size="small" label={<code>src/pages/{route.path}/index.tsx</code>} />
+                                </code>
+                              </TableCell>
+                            </TableRow>
+                          )
+                        }
+                      })}
+                    </TableBody>
+                  </Table>
+                </Stack>
+              </Stack>
+            </Grid>
+            <Grid item md={12}>
+              <Stack>
+                <Typography variant="h5" component="h2">What's Next?</Typography>
+                <Typography variant="h6" component="h3">Add Task Flows</Typography>
+                <Paper elevation={0} sx={{ padding: 2 }}>
+                  <code>strudel add-taskflow my-taskflow -t explore-data</code>
+                </Paper>
+              </Stack>
+            </Grid>
+          </Grid>
+        </Box>
       </Container>
-    </Box>
+    </Layout>
   )
 }