this.gui 0.0.0 → 0.0.2

package/README.md

@@ -0,0 +1,15 @@
+Consistent Theming: By wrapping MUI or any other UI framework inside your GUI package, you can set a consistent theme, typography, and other styles that will be common across all the apps where you use this package. This ensures brand consistency.
+
+Custom Components: You can build upon MUI components to create higher-level components tailored for your needs. For instance, you might have a custom UserAvatar component that integrates with your user system or a DataGrid tailored for your backend's data format.
+
+Integrated Logic: The GUI package can contain not just visual components but also logic. For instance, a LoginForm component can have integrated authentication logic that talks to your backend directly. This simplifies the usage in actual apps.
+
+Utilities & Helpers: Apart from components, you can also have utility functions and hooks. For instance, a useUser() hook that fetches and manages the user's state.
+
+Extendability: You can set up your GUI package in a way that while it provides a default theme and behavior, individual projects can customize or extend them as needed.
+
+Version Control: Changes in the UI/UX can be versioned. If you update a component's look or behavior in the GUI package and bump the version, you can choose when to adopt these changes in your various projects by updating the package version.
+
+Documentation: You can maintain a single documentation site/source for your custom GUI package, making it easier for your team (and potentially third-party developers) to understand and use your components.
+
+Dependency Management: With a single GUI package, you can manage the versions of MUI or other dependencies in one place. This can make updates and maintenance easier, especially if breaking changes are introduced in the UI libraries you depend on.

package/babel.config.json

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+  }

package/jsdoc.json

@@ -0,0 +1,53 @@
+{
+  "source": {
+    "include": ["./src", "./src/index.ts"],
+    "includePattern": "\\.(js|jsx|ts|tsx)$",
+    "excludePattern": "(node_modules/|docs)"
+  },
+  "opts": {
+    "destination": "./docs",
+    "template": "../../../../../Sandbox/dev_tools/assets/better-docs",
+    "readme": "./README.md"
+  },
+  "templates": {
+    "cleverLinks": false,
+    "monospaceLinks": false,
+    "search": true,
+    "default": {
+        "staticFiles": {
+          "include": [
+              "./README.md"
+          ]
+        }
+    },
+    "better-docs": {
+        "name": "This.GUI",
+        "title": "Docs for this.GUI", 
+        "css": "style.css",
+        "trackingCode": "-",
+  "hideGenerator": false,
+  "navLinks": [
+    {
+      "label": "All.This",
+      "href": "https://suign.github.io/all.this/"
+  },
+  {
+    "label": "@Source",
+    "href": "https://suign.github.io/"
+},
+      {
+          "label": "Github",
+          "href": "https://github.com/suiGn/cleaker"
+      },
+      {
+          "label": "Cleaker.me",
+          "href": "https://cleaker.me"
+      },
+      {
+        "label": "What is all.this?",
+          "href": "https://www.neurons.me/this"
+      }
+  ]
+}
+}
+}

package/package.json

@@ -1,27 +1,48 @@
 {
-  "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"
+  "name": "this.gui",
+  "version": "0.0.2",
+  "description": "This Graphic User Interface.",
+  "main": "index.js",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/suiGn/GUI.git"
   },
-  "main": "index.tsx",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "build": "tsc",
+    "test": "jest"
   },
-  "name": "this.gui",
-  "version": "0.0.0"
-}
+  "homepage": "https://www.npmjs.com/package/this.gui",
+  "docs": "https://suiGn.github.io/GUI",
+  "author": "suiGn",
+  "license": "MIT",
+  "repoType": "NPM Package",
+  "devDependencies": {
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "@types/testing-library__react": "^10.2.0",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^23.0.1",
+    "ts-jest": "^29.1.1",
+    "typedoc": "^0.25.4",
+    "typedoc-material-theme": "^1.0.1",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/inter": "^5.0.16",
+    "@mui/joy": "^5.0.0-beta.20",
+    "@mui/material": "^5.15.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5", // Specify ECMAScript target version
+    "module": "commonjs", // Specify module code generation
+    "lib": ["es6", "dom"], // Specify library files to be included in the compilation
+    "sourceMap": true, // Generates corresponding '.map' file
+    "outDir": "./dist", // Redirect output structure to the directory
+    "rootDir": "./src", // Specify the root directory of input files
+    "strict": true, // Enable all strict type-checking options
+    "noImplicitAny": true, // Raise error on expressions and declarations with an implied 'any' type
+    "moduleResolution": "node", // Select module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
+    "esModuleInterop": true, // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports
+    "skipLibCheck": true, // Skip type checking of declaration files
+    "forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file
+    "jsx": "react" // Support JSX in '.tsx' files: 'preserve', 'react-native', or 'react'
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "tests", "dist"]
+}

package/typedoc.json

@@ -0,0 +1,13 @@
+  {
+    "theme": "default",
+    "entryPoints": ["src/index.ts"],
+    "out": "./docs",
+    "exclude": ["**/node_modules/**"],
+    "readme": "README.md",
+    "includeVersion": true, // Include TypeScript version in the generated documentation
+    "excludeExternals": true, // Exclude external dependencies from documentation
+    "excludePrivate": true, // Exclude private members from documentation
+    "excludeProtected": true, // Exclude protected members from documentation
+    "tsconfig": "tsconfig.json" // Path to your TypeScript configuration file
+  }
+  

package/public/index.html

@@ -1,38 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="theme-color" content="#000000">
-  <!--
-    manifest.json provides metadata used when your web app is added to the
-    homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-  -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-  <!--
-    Notice the use of %PUBLIC_URL% in the tags above.
-    It will be replaced with the URL of the `public` folder during the build.
-    Only files inside the `public` folder can be referenced from the HTML.
-
-    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-    work correctly both with client-side routing and a non-root public URL.
-    Learn how to configure a non-root public URL by running `npm run build`.
-  -->
-  <title>React App</title>
-  
-</head>
-<body>
-  <div id="root"></div>
-  <!--
-    This HTML file is a template.
-    If you open it directly in the browser, you will see an empty page.
-
-    You can add webfonts, meta tags, or analytics to this file.
-    The build step will place the bundled scripts into the <body> tag.
-
-    To begin the development, run `npm start` or `yarn start`.
-    To create a production bundle, use `npm run build` or `yarn build`.
-  -->
-</body>
-</html>

package/public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "192x192",
-      "type": "image/png"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/src/App.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { CssVarsProvider } from '@mui/joy/styles';
-import CssBaseline from '@mui/joy/CssBaseline';
-import Box from '@mui/joy/Box';
-import Sidebar from './components/Sidebar';
-import Header from './components/Header';
-import MyMessages from './components/MyMessages';
-
-export default function JoyMessagesTemplate() {
-  return (
-    <CssVarsProvider disableTransitionOnChange>
-      <CssBaseline />
-      <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
-        <Sidebar />
-        <Header />
-        <Box component="main" className="MainContent" sx={{ flex: 1 }}>
-          <MyMessages />
-        </Box>
-      </Box>
-    </CssVarsProvider>
-  );
-}

package/src/components/AvatarWithStatus.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import Badge from '@mui/joy/Badge';
-import Avatar, { AvatarProps } from '@mui/joy/Avatar';
-
-type AvatarWithStatusProps = AvatarProps & {
-  online?: boolean;
-};
-
-export default function AvatarWithStatus({
-  online = false,
-  ...rest
-}: AvatarWithStatusProps) {
-  return (
-    <div>
-      <Badge
-        color={online ? 'success' : 'neutral'}
-        variant={online ? 'solid' : 'soft'}
-        size="sm"
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        badgeInset="4px 4px"
-      >
-        <Avatar size="sm" {...rest} />
-      </Badge>
-    </div>
-  );
-}

package/src/components/ChatBubble.tsx

@@ -1,135 +0,0 @@
-import * as React from 'react';
-import Avatar from '@mui/joy/Avatar';
-import Box from '@mui/joy/Box';
-import IconButton from '@mui/joy/IconButton';
-import Stack from '@mui/joy/Stack';
-import Sheet from '@mui/joy/Sheet';
-import Typography from '@mui/joy/Typography';
-import CelebrationOutlinedIcon from '@mui/icons-material/CelebrationOutlined';
-import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
-import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRounded';
-import { MessageProps } from '../types';
-
-type ChatBubbleProps = MessageProps & {
-  variant: 'sent' | 'received';
-};
-
-export default function ChatBubble({
-  content,
-  variant,
-  timestamp,
-  attachment = undefined,
-  sender,
-}: ChatBubbleProps) {
-  const isSent = variant === 'sent';
-  const [isHovered, setIsHovered] = React.useState<boolean>(false);
-  const [isLiked, setIsLiked] = React.useState<boolean>(false);
-  const [isCelebrated, setIsCelebrated] = React.useState<boolean>(false);
-  return (
-    <Box sx={{ maxWidth: '60%', minWidth: 'auto' }}>
-      <Stack
-        direction="row"
-        justifyContent="space-between"
-        spacing={2}
-        sx={{ mb: 0.25 }}
-      >
-        <Typography level="body-xs">
-          {sender === 'You' ? sender : sender.name}
-        </Typography>
-        <Typography level="body-xs">{timestamp}</Typography>
-      </Stack>
-      {attachment ? (
-        <Sheet
-          variant="outlined"
-          sx={{
-            px: 1.75,
-            py: 1.25,
-            borderRadius: 'lg',
-            borderTopRightRadius: isSent ? 0 : 'lg',
-            borderTopLeftRadius: isSent ? 'lg' : 0,
-          }}
-        >
-          <Stack direction="row" spacing={1.5} alignItems="center">
-            <Avatar color="primary" size="lg">
-              <InsertDriveFileRoundedIcon />
-            </Avatar>
-            <div>
-              <Typography fontSize="sm">{attachment.fileName}</Typography>
-              <Typography level="body-sm">{attachment.size}</Typography>
-            </div>
-          </Stack>
-        </Sheet>
-      ) : (
-        <Box
-          sx={{ position: 'relative' }}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
-          <Sheet
-            color={isSent ? 'primary' : 'neutral'}
-            variant={isSent ? 'solid' : 'soft'}
-            sx={{
-              p: 1.25,
-              borderRadius: 'lg',
-              borderTopRightRadius: isSent ? 0 : 'lg',
-              borderTopLeftRadius: isSent ? 'lg' : 0,
-              backgroundColor: isSent
-                ? 'var(--joy-palette-primary-solidBg)'
-                : 'background.body',
-            }}
-          >
-            <Typography
-              level="body-sm"
-              sx={{
-                color: isSent
-                  ? 'var(--joy-palette-common-white)'
-                  : 'var(--joy-palette-text-primary)',
-              }}
-            >
-              {content}
-            </Typography>
-          </Sheet>
-          {(isHovered || isLiked || isCelebrated) && (
-            <Stack
-              direction="row"
-              justifyContent={isSent ? 'flex-end' : 'flex-start'}
-              spacing={0.5}
-              sx={{
-                position: 'absolute',
-                top: '50%',
-                p: 1.5,
-                ...(isSent
-                  ? {
-                      left: 0,
-                      transform: 'translate(-100%, -50%)',
-                    }
-                  : {
-                      right: 0,
-                      transform: 'translate(100%, -50%)',
-                    }),
-              }}
-            >
-              <IconButton
-                variant={isLiked ? 'soft' : 'plain'}
-                color={isLiked ? 'danger' : 'neutral'}
-                size="sm"
-                onClick={() => setIsLiked((prevState) => !prevState)}
-              >
-                {isLiked ? '❤️' : <FavoriteBorderIcon />}
-              </IconButton>
-
-              <IconButton
-                variant={isCelebrated ? 'soft' : 'plain'}
-                color={isCelebrated ? 'warning' : 'neutral'}
-                size="sm"
-                onClick={() => setIsCelebrated((prevState) => !prevState)}
-              >
-                {isCelebrated ? '🎉' : <CelebrationOutlinedIcon />}
-              </IconButton>
-            </Stack>
-          )}
-        </Box>
-      )}
-    </Box>
-  );
-}

package/src/components/ChatListItem.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/joy/Box';
-import ListDivider from '@mui/joy/ListDivider';
-import ListItem from '@mui/joy/ListItem';
-import ListItemButton, { ListItemButtonProps } from '@mui/joy/ListItemButton';
-import Stack from '@mui/joy/Stack';
-import Typography from '@mui/joy/Typography';
-import CircleIcon from '@mui/icons-material/Circle';
-import AvatarWithStatus from './AvatarWithStatus';
-import { ChatProps, MessageProps, UserProps } from '../types';
-import { toggleMessagesPane } from '../utils';
-
-type ChatListItemProps = ListItemButtonProps & {
-  id: string;
-  unread?: boolean;
-  sender: UserProps;
-  messages: MessageProps[];
-  selectedChatId?: string;
-  setSelectedChat: (chat: ChatProps) => void;
-};
-
-export default function ChatListItem({
-  id,
-  sender,
-  messages,
-  selectedChatId,
-  setSelectedChat,
-}: ChatListItemProps) {
-  const selected = selectedChatId === id;
-  return (
-    <React.Fragment>
-      <ListItem>
-        <ListItemButton
-          onClick={() => {
-            toggleMessagesPane();
-            setSelectedChat({ id, sender, messages });
-          }}
-          selected={selected}
-          color="neutral"
-          sx={{
-            flexDirection: 'column',
-            alignItems: 'initial',
-            gap: 1,
-          }}
-        >
-          <Stack direction="row" spacing={1.5}>
-            <AvatarWithStatus online={sender.online} src={sender.avatar} />
-            <Box sx={{ flex: 1 }}>
-              <Typography level="title-sm">{sender.name}</Typography>
-              <Typography level="body-sm">{sender.username}</Typography>
-            </Box>
-            <Box
-              sx={{
-                lineHeight: 1.5,
-                textAlign: 'right',
-              }}
-            >
-              {messages[0].unread && (
-                <CircleIcon sx={{ fontSize: 12 }} color="primary" />
-              )}
-              <Typography
-                level="body-xs"
-                display={{ xs: 'none', md: 'block' }}
-                noWrap
-              >
-                5 mins ago
-              </Typography>
-            </Box>
-          </Stack>
-          <Typography
-            level="body-sm"
-            sx={{
-              display: '-webkit-box',
-              WebkitLineClamp: '2',
-              WebkitBoxOrient: 'vertical',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            }}
-          >
-            {messages[0].content}
-          </Typography>
-        </ListItemButton>
-      </ListItem>
-      <ListDivider sx={{ margin: 0 }} />
-    </React.Fragment>
-  );
-}

package/src/components/ChatsPane.tsx

@@ -1,110 +0,0 @@
-import * as React from 'react';
-import Stack from '@mui/joy/Stack';
-import Sheet from '@mui/joy/Sheet';
-import Typography from '@mui/joy/Typography';
-import { Box, Chip, IconButton, Input } from '@mui/joy';
-import List from '@mui/joy/List';
-import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';
-import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import ChatListItem from './ChatListItem';
-import { ChatProps } from '../types';
-import { toggleMessagesPane } from '../utils';
-
-type ChatsPaneProps = {
-  chats: ChatProps[];
-  setSelectedChat: (chat: ChatProps) => void;
-  selectedChatId: string;
-};
-
-export default function ChatsPane({
-  chats,
-  setSelectedChat,
-  selectedChatId,
-}: ChatsPaneProps) {
-  return (
-    <Sheet
-      sx={{
-        borderRight: '1px solid',
-        borderColor: 'divider',
-        height: 'calc(100dvh - var(--Header-height))',
-        overflowY: 'auto',
-      }}
-    >
-      <Stack
-        direction="row"
-        spacing={1}
-        alignItems="center"
-        justifyContent="space-between"
-        p={2}
-        pb={1.5}
-      >
-        <Typography
-          fontSize={{ xs: 'md', md: 'lg' }}
-          component="h1"
-          fontWeight="lg"
-          endDecorator={
-            <Chip
-              variant="soft"
-              color="primary"
-              size="md"
-              slotProps={{ root: { component: 'span' } }}
-            >
-              4
-            </Chip>
-          }
-          sx={{ mr: 'auto' }}
-        >
-          Messages
-        </Typography>
-
-        <IconButton
-          variant="plain"
-          aria-label="edit"
-          color="neutral"
-          size="sm"
-          sx={{ display: { xs: 'none', sm: 'unset' } }}
-        >
-          <EditNoteRoundedIcon />
-        </IconButton>
-
-        <IconButton
-          variant="plain"
-          aria-label="edit"
-          color="neutral"
-          size="sm"
-          onClick={() => {
-            toggleMessagesPane();
-          }}
-          sx={{ display: { sm: 'none' } }}
-        >
-          <CloseRoundedIcon />
-        </IconButton>
-      </Stack>
-      <Box sx={{ px: 2, pb: 1.5 }}>
-        <Input
-          size="sm"
-          startDecorator={<SearchRoundedIcon />}
-          placeholder="Search"
-          aria-label="Search"
-        />
-      </Box>
-      <List
-        sx={{
-          py: 0,
-          '--ListItem-paddingY': '0.75rem',
-          '--ListItem-paddingX': '1rem',
-        }}
-      >
-        {chats.map((chat) => (
-          <ChatListItem
-            key={chat.id}
-            {...chat}
-            setSelectedChat={setSelectedChat}
-            selectedChatId={selectedChatId}
-          />
-        ))}
-      </List>
-    </Sheet>
-  );
-}