@stoked-ui/github 0.0.0-a.0

package/modern/GithubEvents/EventTypes/ProjectsV2ItemEvent.js

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import Chip from '@mui/material/Chip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ProjectsV2ItemEvent({
+  event
+}) {
+  var _event$payload, _event$payload2, _item$content_type;
+  if (!(event != null && event.date)) {
+    return null;
+  }
+  const item = (_event$payload = event.payload) == null ? void 0 : _event$payload.projects_v2_item;
+  const action = (_event$payload2 = event.payload) == null ? void 0 : _event$payload2.action;
+  if (!item) {
+    return null;
+  }
+  const itemTitle = item.title || 'Untitled Item';
+  const itemUrl = item.html_url;
+  const itemType = ((_item$content_type = item.content_type) == null ? void 0 : _item$content_type.toLowerCase()) || 'item';
+  const projectNumber = item.project_number;
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: '16px'
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        mb: 2
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        color: "text.secondary",
+        children: event.date
+      }), /*#__PURE__*/_jsx(Chip, {
+        label: `Project #${projectNumber}`,
+        size: "small",
+        color: "default"
+      }), /*#__PURE__*/_jsx(Chip, {
+        label: itemType,
+        size: "small",
+        color: "info"
+      }), /*#__PURE__*/_jsx(Chip, {
+        label: action,
+        size: "small",
+        color: action === 'created' ? 'success' : action === 'deleted' ? 'error' : 'primary'
+      })]
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      component: "h3",
+      sx: {
+        mb: 1
+      },
+      children: itemUrl ? /*#__PURE__*/_jsx(Link, {
+        href: itemUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          textDecoration: 'none'
+        },
+        children: itemTitle
+      }) : itemTitle
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      },
+      children: /*#__PURE__*/_jsxs(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        children: [itemType, " ", action, " in project #", projectNumber]
+      })
+    })]
+  });
+}

package/modern/GithubEvents/EventTypes/PullRequest/CommitsList.js

@@ -0,0 +1,99 @@
+var _CopyIcon, _CheckoutIcon;
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Avatar from '@mui/material/Avatar';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import CopyIcon from '@mui/icons-material/ContentCopy';
+import CheckoutIcon from '@mui/icons-material/CallMade';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CommitItem = styled(Box)(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  padding: theme.spacing(2),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  '&:last-child': {
+    borderBottom: 'none'
+  },
+  '&:hover': {
+    backgroundColor: theme.palette.action.hover,
+    '.commit-actions': {
+      visibility: 'visible'
+    }
+  }
+}));
+const CommitActions = styled(Box)({
+  visibility: 'hidden',
+  display: 'flex',
+  gap: '8px'
+});
+export default function CommitsList({
+  commits,
+  onCheckout
+}) {
+  const handleCopyHash = hash => {
+    navigator.clipboard.writeText(hash);
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    children: commits.map(commit => /*#__PURE__*/_jsx(CommitItem, {
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          width: '100%'
+        },
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          src: commit.author.avatar,
+          alt: commit.author.name,
+          sx: {
+            width: 32,
+            height: 32,
+            mr: 2
+          }
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            sx: {
+              mb: 0.5,
+              wordBreak: 'break-word'
+            },
+            children: commit.message
+          }), /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between'
+            },
+            children: [/*#__PURE__*/_jsxs(Typography, {
+              variant: "body2",
+              color: "text.secondary",
+              children: [commit.author.name, " committed ", commit.date]
+            }), /*#__PURE__*/_jsxs(CommitActions, {
+              className: "commit-actions",
+              children: [/*#__PURE__*/_jsx(IconButton, {
+                size: "small",
+                onClick: () => handleCopyHash(commit.hash),
+                title: "Copy commit SHA",
+                children: _CopyIcon || (_CopyIcon = /*#__PURE__*/_jsx(CopyIcon, {
+                  fontSize: "small"
+                }))
+              }), /*#__PURE__*/_jsx(IconButton, {
+                size: "small",
+                onClick: () => onCheckout == null ? void 0 : onCheckout(commit.hash),
+                title: "Checkout commit",
+                children: _CheckoutIcon || (_CheckoutIcon = /*#__PURE__*/_jsx(CheckoutIcon, {
+                  fontSize: "small"
+                }))
+              })]
+            })]
+          })]
+        })]
+      })
+    }, commit.id))
+  });
+}

package/modern/GithubEvents/EventTypes/PullRequest/FileChanges.js

@@ -0,0 +1,182 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _Chip, _Chip2, _Chip3, _FileIcon;
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { styled } from '@mui/material/styles';
+// import FolderIcon from '@mui/icons-material/Folder';
+import FileIcon from '@mui/icons-material/InsertDriveFile';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Chip from '@mui/material/Chip';
+
+// const StyledTreeItem = styled(TreeItem)((props) => ({
+//   '& .MuiTreeItem-content': {
+//     padding: props.theme.spacing(1),
+//     borderRadius: props.theme.shape.borderRadius,
+//     '&:hover': {
+//       backgroundColor: props.theme.palette.action.hover,
+//     },
+//     '& .MuiTreeItem-label': {
+//       display: 'flex',
+//       alignItems: 'center',
+//       gap: props.theme.spacing(1),
+//     },
+//   },
+// }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DiffView = styled(Box)(({
+  theme
+}) => ({
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace',
+  fontSize: '12px',
+  lineHeight: 1.5,
+  overflow: 'auto'
+}));
+const DiffLine = styled(Box, {
+  shouldForwardProp: prop => prop !== 'type'
+})(({
+  theme,
+  type
+}) => _extends({
+  padding: '0 16px',
+  whiteSpace: 'pre'
+}, type === 'addition' && {
+  backgroundColor: 'rgba(46, 160, 67, 0.15)',
+  borderLeft: '4px solid #2ea043'
+}, type === 'deletion' && {
+  backgroundColor: 'rgba(248, 81, 73, 0.15)',
+  borderLeft: '4px solid #f85149'
+}, type === 'context' && {
+  backgroundColor: 'transparent',
+  borderLeft: '4px solid transparent'
+}));
+// interface TreeNode {
+//   id: string;
+//   name: string;
+//   type: FileChange['type'];
+//   additions: number;
+//   deletions: number;
+//   diff: FileChange['diff'];
+//   children?: TreeNode[];
+// }
+
+export default function FileChanges({
+  files
+}) {
+  const [expanded, setExpanded] = React.useState([]);
+  const [selected, setSelected] = React.useState([]);
+  const handleToggle = (_event, nodeIds) => {
+    setExpanded(nodeIds);
+  };
+  const handleSelect = (_event, nodeIds) => {
+    setSelected(nodeIds);
+  };
+  const getFileIcon = type => {
+    switch (type) {
+      case 'added':
+        return _Chip || (_Chip = /*#__PURE__*/_jsx(Chip, {
+          label: "A",
+          size: "small",
+          color: "success"
+        }));
+      case 'modified':
+        return _Chip2 || (_Chip2 = /*#__PURE__*/_jsx(Chip, {
+          label: "M",
+          size: "small",
+          color: "warning"
+        }));
+      case 'deleted':
+        return _Chip3 || (_Chip3 = /*#__PURE__*/_jsx(Chip, {
+          label: "D",
+          size: "small",
+          color: "error"
+        }));
+      default:
+        return _FileIcon || (_FileIcon = /*#__PURE__*/_jsx(FileIcon, {}));
+    }
+  };
+
+  // Transform files into tree nodes
+  // const items: TreeNode[] = files.map((file, index) => ({
+  //   id: `file-${index}-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`,
+  //   name: file.path,
+  //   type: file.type,
+  //   additions: file.additions,
+  //   deletions: file.deletions,
+  //   diff: file.diff
+  // }));
+
+  // const renderLabel = (node: TreeNode) => (
+  //   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+  //     {getFileIcon(node.type)}
+  //     <Typography variant="body2">{node.name}</Typography>
+  //     <Typography variant="caption" color="text.secondary">
+  //       +{node.additions} -{node.deletions}
+  //     </Typography>
+  //   </Box>
+  // );
+
+  // const renderContent = (node: TreeNode) => (
+  //   <Box sx={{ p: '16px' }}>
+  //     <DiffView>
+  //       {node.diff.map((line, index) => (
+  //         <DiffLine key={`${node.id}-line-${index}`} type={line.type}>
+  //           {line.content}
+  //         </DiffLine>
+  //       ))}
+  //     </DiffView>
+  //   </Box>
+  // );
+
+  return /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/_jsx(SimpleTreeView, {
+      slots: {
+        collapseIcon: ExpandMoreIcon,
+        expandIcon: ChevronRightIcon
+      },
+      expandedItems: expanded,
+      selectedItems: selected,
+      onExpandedItemsChange: handleToggle,
+      onSelectedItemsChange: handleSelect,
+      multiSelect: true,
+      children: files.map((file, index) => {
+        const itemId = `file-${index}-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`;
+        return /*#__PURE__*/_jsx(TreeItem, {
+          itemId: itemId,
+          label: /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1
+            },
+            children: [getFileIcon(file.type), /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              children: file.path
+            }), /*#__PURE__*/_jsxs(Typography, {
+              variant: "caption",
+              color: "text.secondary",
+              children: ["+", file.additions, " -", file.deletions]
+            })]
+          }),
+          children: /*#__PURE__*/_jsx(Box, {
+            sx: {
+              p: '16px'
+            },
+            children: /*#__PURE__*/_jsx(DiffView, {
+              children: file.diff.map((line, index) => /*#__PURE__*/_jsx(DiffLine, {
+                type: line.type,
+                children: line.content
+              }, `${itemId}-line-${index}`))
+            })
+          })
+        }, itemId);
+      })
+    })
+  });
+}