this.gui 0.0.0 → 0.0.2

package/src/components/Sidebar.tsx

@@ -1,320 +0,0 @@
-import * as React from 'react';
-import GlobalStyles from '@mui/joy/GlobalStyles';
-import Avatar from '@mui/joy/Avatar';
-import Box from '@mui/joy/Box';
-import Button from '@mui/joy/Button';
-import Card from '@mui/joy/Card';
-import Chip from '@mui/joy/Chip';
-import Divider from '@mui/joy/Divider';
-import IconButton from '@mui/joy/IconButton';
-import Input from '@mui/joy/Input';
-import LinearProgress from '@mui/joy/LinearProgress';
-import List from '@mui/joy/List';
-import ListItem from '@mui/joy/ListItem';
-import ListItemButton, { listItemButtonClasses } from '@mui/joy/ListItemButton';
-import ListItemContent from '@mui/joy/ListItemContent';
-import Typography from '@mui/joy/Typography';
-import Sheet from '@mui/joy/Sheet';
-import Stack from '@mui/joy/Stack';
-import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
-import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
-import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
-import CollectionsBookmarkRoundedIcon from '@mui/icons-material/CollectionsBookmarkRounded';
-import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded';
-import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded';
-import GroupRoundedIcon from '@mui/icons-material/GroupRounded';
-import SupportRoundedIcon from '@mui/icons-material/SupportRounded';
-import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
-import BadgeRoundedIcon from '@mui/icons-material/BadgeRounded';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-
-import ColorSchemeToggle from './ColorSchemeToggle';
-import { closeSidebar } from '../utils';
-
-function Toggler({
-  defaultExpanded = false,
-  renderToggle,
-  children,
-}: {
-  defaultExpanded?: boolean;
-  children: React.ReactNode;
-  renderToggle: (params: {
-    open: boolean;
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  }) => React.ReactNode;
-}) {
-  const [open, setOpen] = React.useState(defaultExpanded);
-  return (
-    <React.Fragment>
-      {renderToggle({ open, setOpen })}
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateRows: open ? '1fr' : '0fr',
-          transition: '0.2s ease',
-          '& > *': {
-            overflow: 'hidden',
-          },
-        }}
-      >
-        {children}
-      </Box>
-    </React.Fragment>
-  );
-}
-
-export default function Sidebar() {
-  return (
-    <Sheet
-      className="Sidebar"
-      sx={{
-        position: {
-          xs: 'fixed',
-          md: 'sticky',
-        },
-        transform: {
-          xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1)))',
-          md: 'none',
-        },
-        transition: 'transform 0.4s, width 0.4s',
-        zIndex: 10000,
-        height: '100dvh',
-        width: 'var(--Sidebar-width)',
-        top: 0,
-        p: 1.5,
-        py: 2,
-        flexShrink: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 2,
-        borderRight: '1px solid',
-        borderColor: 'divider',
-      }}
-    >
-      <GlobalStyles
-        styles={(theme) => ({
-          ':root': {
-            '--Sidebar-width': '220px',
-            [theme.breakpoints.up('lg')]: {
-              '--Sidebar-width': '240px',
-            },
-          },
-        })}
-      />
-      <Box
-        className="Sidebar-overlay"
-        sx={{
-          position: 'fixed',
-          zIndex: 9998,
-          top: 0,
-          left: 0,
-          width: '100vw',
-          height: '100vh',
-          opacity: 'var(--SideNavigation-slideIn)',
-          backgroundColor: 'var(--joy-palette-background-backdrop)',
-          transition: 'opacity 0.4s',
-          transform: {
-            xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1) + var(--SideNavigation-slideIn, 0) * var(--Sidebar-width, 0px)))',
-            lg: 'translateX(-100%)',
-          },
-        }}
-        onClick={() => closeSidebar()}
-      />
-      <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-        <IconButton variant="soft" color="primary" size="sm">
-          <BadgeRoundedIcon />
-        </IconButton>
-        <Typography level="title-lg">Profiles</Typography>
-        <ColorSchemeToggle sx={{ ml: 'auto' }} />
-      </Box>
-      <Input size="sm" startDecorator={<SearchRoundedIcon />} placeholder="Search" />
-      <Box
-        sx={{
-          minHeight: 0,
-          overflow: 'hidden auto',
-          flexGrow: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          [`& .${listItemButtonClasses.root}`]: {
-            gap: 1.5,
-          },
-        }}
-      >
-        <List
-          size="sm"
-          sx={{
-            gap: 1,
-            '--List-nestedInsetStart': '30px',
-            '--ListItem-radius': (theme) => theme.vars.radius.sm,
-          }}
-        >
-          <ListItem>
-            <ListItemButton>
-              <HomeRoundedIcon />
-              <ListItemContent>
-                <Typography level="title-sm">Home</Typography>
-              </ListItemContent>
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem>
-            <ListItemButton>
-              <DashboardRoundedIcon />
-              <ListItemContent>
-                <Typography level="title-sm">Dashboard</Typography>
-              </ListItemContent>
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem>
-            <ListItemButton>
-              <CollectionsBookmarkRoundedIcon />
-              <ListItemContent>
-                <Typography level="title-sm">Projects</Typography>
-              </ListItemContent>
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem nested>
-            <Toggler
-              renderToggle={({ open, setOpen }) => (
-                <ListItemButton onClick={() => setOpen(!open)}>
-                  <AssignmentRoundedIcon />
-                  <ListItemContent>
-                    <Typography level="title-sm">Tasks</Typography>
-                  </ListItemContent>
-                  <KeyboardArrowDownIcon
-                    sx={{ transform: open ? 'rotate(180deg)' : 'none' }}
-                  />
-                </ListItemButton>
-              )}
-            >
-              <List sx={{ gap: 0.5 }}>
-                <ListItem sx={{ mt: 0.5 }}>
-                  <ListItemButton>All tasks</ListItemButton>
-                </ListItem>
-                <ListItem>
-                  <ListItemButton>Backlog</ListItemButton>
-                </ListItem>
-                <ListItem>
-                  <ListItemButton>In progress</ListItemButton>
-                </ListItem>
-                <ListItem>
-                  <ListItemButton>Done</ListItemButton>
-                </ListItem>
-              </List>
-            </Toggler>
-          </ListItem>
-
-          <ListItem>
-            <ListItemButton selected>
-              <QuestionAnswerRoundedIcon />
-              <ListItemContent>
-                <Typography level="title-sm">Messages</Typography>
-              </ListItemContent>
-              <Chip size="sm" color="primary" variant="solid">
-                4
-              </Chip>
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem nested>
-            <Toggler
-              renderToggle={({ open, setOpen }) => (
-                <ListItemButton onClick={() => setOpen(!open)}>
-                  <GroupRoundedIcon />
-                  <ListItemContent>
-                    <Typography level="title-sm">Users</Typography>
-                  </ListItemContent>
-                  <KeyboardArrowDownIcon
-                    sx={{ transform: open ? 'rotate(180deg)' : 'none' }}
-                  />
-                </ListItemButton>
-              )}
-            >
-              <List sx={{ gap: 0.5 }}>
-                <ListItem sx={{ mt: 0.5 }}>
-                  <ListItemButton
-                    role="menuitem"
-                    component="a"
-                    href="/joy-ui/getting-started/templates/profile-dashboard/"
-                  >
-                    My profile
-                  </ListItemButton>
-                </ListItem>
-                <ListItem>
-                  <ListItemButton>Create a new user</ListItemButton>
-                </ListItem>
-                <ListItem>
-                  <ListItemButton>Roles & permission</ListItemButton>
-                </ListItem>
-              </List>
-            </Toggler>
-          </ListItem>
-        </List>
-
-        <List
-          size="sm"
-          sx={{
-            mt: 'auto',
-            flexGrow: 0,
-            '--ListItem-radius': (theme) => theme.vars.radius.sm,
-            '--List-gap': '8px',
-            mb: 2,
-          }}
-        >
-          <ListItem>
-            <ListItemButton>
-              <SupportRoundedIcon />
-              Support
-            </ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton>
-              <SettingsRoundedIcon />
-              Settings
-            </ListItemButton>
-          </ListItem>
-        </List>
-        <Card
-          invertedColors
-          variant="soft"
-          color="warning"
-          size="sm"
-          sx={{ boxShadow: 'none' }}
-        >
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Typography level="title-sm">Used space</Typography>
-            <IconButton size="sm">
-              <CloseRoundedIcon />
-            </IconButton>
-          </Stack>
-          <Typography level="body-xs">
-            Your team has used 80% of your available space. Need more?
-          </Typography>
-          <LinearProgress variant="outlined" value={80} determinate sx={{ my: 1 }} />
-          <Button size="sm" variant="solid">
-            Upgrade plan
-          </Button>
-        </Card>
-      </Box>
-      <Divider />
-      <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-        <Avatar
-          variant="outlined"
-          size="sm"
-          src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=286"
-        />
-        <Box sx={{ minWidth: 0, flex: 1 }}>
-          <Typography level="title-sm">Siriwat K.</Typography>
-          <Typography level="body-xs">siriwatk@test.com</Typography>
-        </Box>
-        <IconButton size="sm" variant="plain" color="neutral">
-          <LogoutRoundedIcon />
-        </IconButton>
-      </Box>
-    </Sheet>
-  );
-}

package/src/createServiceWorker.js

@@ -1,52 +0,0 @@
-// In production, we register a service worker to serve assets from local cache.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
-// cached resources are updated in the background.
-
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
-
-export default function register() {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-      navigator.serviceWorker
-        .register(swUrl)
-        .then(registration => {
-          // eslint-disable-next-line no-param-reassign
-          registration.onupdatefound = () => {
-            const installingWorker = registration.installing;
-            installingWorker.onstatechange = () => {
-              if (installingWorker.state === 'installed') {
-                if (navigator.serviceWorker.controller) {
-                  // At this point, the old content will have been purged and
-                  // the fresh content will have been added to the cache.
-                  // It's the perfect time to display a "New content is
-                  // available; please refresh." message in your web app.
-                  console.log('New content is available; please refresh.'); // eslint-disable-line no-console
-                } else {
-                  // At this point, everything has been precached.
-                  // It's the perfect time to display a
-                  // "Content is cached for offline use." message.
-                  console.log('Content is cached for offline use.'); // eslint-disable-line no-console
-                }
-              }
-            };
-          };
-        })
-        .catch(error => {
-          console.error('Error during service worker registration:', error);
-        });
-    });
-  }
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
-}

package/src/data.tsx

@@ -1,272 +0,0 @@
-import { ChatProps, UserProps } from './types';
-
-export const users: UserProps[] = [
-  {
-    name: 'Steve E.',
-    username: '@steveEberger',
-    avatar: '/static/images/avatar/2.jpg',
-    online: true,
-  },
-  {
-    name: 'Katherine Moss',
-    username: '@kathy',
-    avatar: '/static/images/avatar/3.jpg',
-    online: false,
-  },
-  {
-    name: 'Phoenix Baker',
-    username: '@phoenix',
-    avatar: '/static/images/avatar/1.jpg',
-    online: true,
-  },
-  {
-    name: 'Eleanor Pena',
-    username: '@eleanor',
-    avatar: '/static/images/avatar/4.jpg',
-    online: false,
-  },
-  {
-    name: 'Kenny Peterson',
-    username: '@kenny',
-    avatar: '/static/images/avatar/5.jpg',
-    online: true,
-  },
-  {
-    name: 'Al Sanders',
-    username: '@al',
-    avatar: '/static/images/avatar/6.jpg',
-    online: true,
-  },
-  {
-    name: 'Melissa Van Der Berg',
-    username: '@melissa',
-    avatar: '/static/images/avatar/7.jpg',
-    online: false,
-  },
-];
-
-export const chats: ChatProps[] = [
-  {
-    id: '1',
-    sender: users[0],
-    messages: [
-      {
-        id: '1',
-        content: 'Hi Olivia, I am currently working on the project.',
-        timestamp: 'Wednesday 9:00am',
-        sender: users[0],
-      },
-      {
-        id: '2',
-        content: 'That sounds great, Mabel! Keep up the good work.',
-        timestamp: 'Wednesday 9:10am',
-        sender: 'You',
-      },
-      {
-        id: '3',
-        timestamp: 'Wednesday 11:30am',
-        sender: users[0],
-        content: 'I will send the draft by end of the day.',
-      },
-      {
-        id: '4',
-        timestamp: 'Wednesday 2:00pm',
-        sender: 'You',
-        content: 'Sure, I will be waiting for it.',
-      },
-      {
-        id: '5',
-        timestamp: 'Wednesday 4:30pm',
-        sender: users[0],
-        content: 'Just a heads up, I am about to send the draft.',
-      },
-      {
-        id: '6',
-        content:
-          'Thanks Olivia! Almost there. I’ll work on making those changes you suggested and will shoot it over.',
-        timestamp: 'Thursday 10:16am',
-        sender: users[0],
-      },
-      {
-        id: '7',
-        content:
-          'Hey Olivia, I’ve finished with the requirements doc! I made some notes in the gdoc as well for Phoenix to look over.',
-        timestamp: 'Thursday 11:40am',
-        sender: users[0],
-      },
-      {
-        id: '3',
-        timestamp: 'Thursday 11:40am',
-        sender: users[0],
-        content: 'Tech requirements.pdf',
-        attachment: {
-          fileName: 'Tech requirements.pdf',
-          type: 'pdf',
-          size: '1.2 MB',
-        },
-      },
-      {
-        id: '8',
-        timestamp: 'Thursday 11:41am',
-        sender: 'You',
-        content: 'Awesome! Thanks. I’ll look at this today.',
-      },
-      {
-        id: '9',
-        timestamp: 'Thursday 11:44am',
-        sender: users[0],
-        content: 'No rush though — we still have to wait for Lana’s designs.',
-      },
-      {
-        id: '10',
-        timestamp: 'Today 2:20pm',
-        sender: users[0],
-        content: 'Hey Olivia, can you please review the latest design when you can?',
-      },
-      {
-        id: '11',
-        timestamp: 'Just now',
-        sender: 'You',
-        content: 'Sure thing, I’ll have a look today. They’re looking great!',
-      },
-    ],
-  },
-  {
-    id: '2',
-    sender: users[1],
-    messages: [
-      {
-        id: '1',
-        content: 'Hi Olivia, I am thinking about taking a vacation.',
-        timestamp: 'Wednesday 9:00am',
-        sender: users[1],
-      },
-      {
-        id: '2',
-        content:
-          'That sounds like a great idea, Katherine! Any idea where you want to go?',
-        timestamp: 'Wednesday 9:05am',
-        sender: 'You',
-      },
-      {
-        id: '3',
-        content: 'I am considering a trip to the beach.',
-        timestamp: 'Wednesday 9:30am',
-        sender: users[1],
-      },
-      {
-        id: '4',
-        content: 'The beach sounds perfect this time of year!',
-        timestamp: 'Wednesday 9:35am',
-        sender: 'You',
-      },
-      {
-        id: '5',
-        content: 'Yes, I agree. It will be a much-needed break.',
-        timestamp: 'Wednesday 10:00am',
-        sender: users[1],
-      },
-      {
-        id: '6',
-        content: 'Make sure to take lots of pictures!',
-        timestamp: 'Wednesday 10:05am',
-        sender: 'You',
-      },
-    ],
-  },
-  {
-    id: '3',
-    sender: users[2],
-    messages: [
-      {
-        id: '1',
-        content: 'Hey!',
-        timestamp: '5 mins ago',
-        sender: users[2],
-        unread: true,
-      },
-    ],
-  },
-  {
-    id: '4',
-    sender: users[3],
-    messages: [
-      {
-        id: '1',
-        content:
-          'Hey Olivia, I was thinking about doing some home improvement work.',
-        timestamp: 'Wednesday 9:00am',
-        sender: users[3],
-      },
-      {
-        id: '2',
-        content:
-          'That sounds interesting! What kind of improvements are you considering?',
-        timestamp: 'Wednesday 9:05am',
-        sender: 'You',
-      },
-      {
-        id: '3',
-        content: 'I am planning to repaint the walls and replace the old furniture.',
-        timestamp: 'Wednesday 9:15am',
-        sender: users[3],
-      },
-      {
-        id: '4',
-        content:
-          'That will definitely give your house a fresh look. Do you need help with anything?',
-        timestamp: 'Wednesday 9:20am',
-        sender: 'You',
-      },
-      {
-        id: '5',
-        content:
-          'I might need some help with picking the right paint colors. Can we discuss this over the weekend?',
-        timestamp: 'Wednesday 9:30am',
-        sender: users[3],
-      },
-    ],
-  },
-
-  {
-    id: '5',
-    sender: users[4],
-    messages: [
-      {
-        id: '1',
-        content: 'Sup',
-        timestamp: '5 mins ago',
-        sender: users[4],
-        unread: true,
-      },
-    ],
-  },
-  {
-    id: '6',
-    sender: users[5],
-    messages: [
-      {
-        id: '1',
-        content: 'Heyo',
-        timestamp: '5 mins ago',
-        sender: 'You',
-        unread: true,
-      },
-    ],
-  },
-
-  {
-    id: '7',
-    sender: users[6],
-    messages: [
-      {
-        id: '1',
-        content:
-          'Hey Olivia, I’ve finished with the requirements doc! I made some notes in the gdoc as well for Phoenix to look over.',
-        timestamp: '5 mins ago',
-        sender: users[6],
-        unread: true,
-      },
-    ],
-  },
-];

package/src/index.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
-import { StyledEngineProvider } from '@mui/joy/styles';
-import App from './App';
-
-ReactDOM.createRoot(document.querySelector("#root")!).render(
-  <React.StrictMode>
-    <StyledEngineProvider injectFirst>
-      <App />
-    </StyledEngineProvider>
-  </React.StrictMode>
-);

package/src/package.json

@@ -1,22 +0,0 @@
-{
-  "dependencies": {
-    "@emotion/react": "latest",
-    "@emotion/styled": "latest",
-    "@mui/icons-material": "latest",
-    "@mui/joy": "latest",
-    "@mui/material": "latest",
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
-    "react": "latest",
-    "react-dom": "latest",
-    "typescript": "latest"
-  },
-  "description": "https://github.com/mui/material-ui/blob/v5.14.10/docs/data/joy/templates/messages/App.tsx",
-  "devDependencies": {
-    "react-scripts": "latest"
-  },
-  "main": "index.tsx",
-  "scripts": {
-    "start": "react-scripts start"
-  }
-}

package/src/public/index.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Messages Template - Joy UI</title>
-    <meta name="viewport" content="initial-scale=1, width=device-width" />
-    <!-- Fonts to support Material Design -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
-    />
-    <!-- Icons to support Material Design -->
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>