this.gui 0.0.0

package/src/data.tsx

@@ -0,0 +1,272 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,22 @@
+{
+  "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

@@ -0,0 +1,22 @@
+<!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>

package/src/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}

package/src/types.tsx

@@ -0,0 +1,25 @@
+export type UserProps = {
+  name: string;
+  username: string;
+  avatar: string;
+  online: boolean;
+};
+
+export type MessageProps = {
+  id: string;
+  content: string;
+  timestamp: string;
+  unread?: boolean;
+  sender: UserProps | 'You';
+  attachment?: {
+    fileName: string;
+    type: string;
+    size: string;
+  };
+};
+
+export type ChatProps = {
+  id: string;
+  sender: UserProps;
+  messages: MessageProps[];
+};

package/src/useScript.ts

@@ -0,0 +1,101 @@
+import * as React from 'react';
+
+export type UseScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+// Cached script statuses
+const cachedScriptStatuses: Record<string, UseScriptStatus | undefined> = {};
+
+/**
+ * Simplified version of https://usehooks-ts.com/react-hook/use-script
+ */
+function getScriptNode(src: string) {
+  const node: HTMLScriptElement | null = document.querySelector(`script[src="${src}"]`);
+  const status = node?.getAttribute('data-status') as UseScriptStatus | undefined;
+
+  return {
+    node,
+    status,
+  };
+}
+
+function useScript(src: string): UseScriptStatus {
+  const [status, setStatus] = React.useState<UseScriptStatus>(() => {
+    if (typeof window === 'undefined') {
+      // SSR Handling - always return 'loading'
+      return 'loading';
+    }
+
+    return cachedScriptStatuses[src] ?? 'loading';
+  });
+
+  React.useEffect(() => {
+    const cachedScriptStatus = cachedScriptStatuses[src];
+    if (cachedScriptStatus === 'ready' || cachedScriptStatus === 'error') {
+      // If the script is already cached, set its status immediately
+      setStatus(cachedScriptStatus);
+      return;
+    }
+
+    // Fetch existing script element by src
+    // It may have been added by another instance of this hook
+    const script = getScriptNode(src);
+    let scriptNode = script.node;
+
+    if (!scriptNode) {
+      // Create script element and add it to document body
+      scriptNode = document.createElement('script');
+      scriptNode.src = src;
+      scriptNode.async = true;
+      scriptNode.setAttribute('data-status', 'loading');
+      document.body.appendChild(scriptNode);
+
+      // Store status in attribute on script
+      // This can be read by other instances of this hook
+      const setAttributeFromEvent = (event: Event) => {
+        const scriptStatus: UseScriptStatus = event.type === 'load' ? 'ready' : 'error';
+
+        scriptNode?.setAttribute('data-status', scriptStatus);
+      };
+
+      scriptNode.addEventListener('load', setAttributeFromEvent);
+      scriptNode.addEventListener('error', setAttributeFromEvent);
+    } else {
+      // Grab existing script status from attribute and set to state.
+      setStatus(script.status ?? cachedScriptStatus ?? 'loading');
+    }
+
+    // Script event handler to update status in state
+    // Note: Even if the script already exists we still need to add
+    // event handlers to update the state for *this* hook instance.
+    const setStateFromEvent = (event: Event) => {
+      const newStatus = event.type === 'load' ? 'ready' : 'error';
+      setStatus(newStatus);
+      cachedScriptStatuses[src] = newStatus;
+    };
+
+    // Add event listeners
+    scriptNode.addEventListener('load', setStateFromEvent);
+    scriptNode.addEventListener('error', setStateFromEvent);
+
+    // Remove event listeners on cleanup
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (scriptNode) {
+        scriptNode.removeEventListener('load', setStateFromEvent);
+        scriptNode.removeEventListener('error', setStateFromEvent);
+      }
+
+      if (scriptNode) {
+        try {
+          scriptNode.remove();
+        } catch (error) {
+          // ignore error
+        }
+      }
+    };
+  }, [src]);
+
+  return status;
+}
+
+export default useScript;

package/src/utils.ts

@@ -0,0 +1,53 @@
+export const openSidebar = () => {
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.setProperty('--SideNavigation-slideIn', '1');
+  }
+};
+
+export const closeSidebar = () => {
+  if (typeof document !== 'undefined') {
+    document.documentElement.style.removeProperty('--SideNavigation-slideIn');
+    document.body.style.removeProperty('overflow');
+  }
+};
+
+export const toggleSidebar = () => {
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    const slideIn = window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue('--SideNavigation-slideIn');
+    if (slideIn) {
+      closeSidebar();
+    } else {
+      openSidebar();
+    }
+  }
+};
+
+export const openMessagesPane = () => {
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.setProperty('--MessagesPane-slideIn', '1');
+  }
+};
+
+export const closeMessagesPane = () => {
+  if (typeof document !== 'undefined') {
+    document.documentElement.style.removeProperty('--MessagesPane-slideIn');
+    document.body.style.removeProperty('overflow');
+  }
+};
+
+export const toggleMessagesPane = () => {
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    const slideIn = window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue('--MessagesPane-slideIn');
+    if (slideIn) {
+      closeMessagesPane();
+    } else {
+      openMessagesPane();
+    }
+  }
+};