@stoked-ui/github 0.0.0-a.0

package/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/GithubEvents/EventTypes/PullRequest/FileChanges.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface FileChange {
+    path: string;
+    type: 'added' | 'modified' | 'deleted';
+    additions: number;
+    deletions: number;
+    diff: Array<{
+        type: 'addition' | 'deletion' | 'context';
+        content: string;
+        lineNumber: number;
+    }>;
+}
+interface FileChangesProps {
+    files: FileChange[];
+}
+export default function FileChanges({ files }: FileChangesProps): React.JSX.Element;
+export {};

package/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);
+      })
+    })
+  });
+}

package/GithubEvents/EventTypes/PullRequest/PullRequestEvent.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { EventDetails } from '../../../types/github';
+interface PullRequestEventProps {
+    event: EventDetails;
+    apiUrl?: string;
+}
+export default function PullRequestEvent({ event, apiUrl }: PullRequestEventProps): React.JSX.Element | null;
+export {};

package/GithubEvents/EventTypes/PullRequest/PullRequestEvent.js

@@ -0,0 +1,374 @@
+var _CheckoutIcon, _Typography2, _Typography3, _CircularProgress;
+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 CircularProgress from '@mui/material/CircularProgress';
+import Avatar from '@mui/material/Avatar';
+// import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import CheckoutIcon from '@mui/icons-material/CallMade';
+import PullRequestView from './PullRequestView';
+import { getPullRequestDetails } from 'packages/sui-github/src/apiHandlers';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+async function getPRDetails({
+  apiUrl,
+  params
+}) {
+  if (apiUrl) {
+    const response = await fetch(`${apiUrl}?owner=${params.owner}&repo=${params.repo}&pull_number=${params.pull_number}`);
+    if (!response.ok) {
+      throw new Error('Failed to fetch PR details');
+    }
+    return response.json();
+  }
+  return getPullRequestDetails(params);
+}
+export default function PullRequestEvent({
+  event,
+  apiUrl
+}) {
+  var _event$payload, _event$payload2, _pullRequest$base, _pullRequest$head, _pullRequest$user, _pullRequest$user2, _Typography, _Chip, _Chip2;
+  const [loading, setLoading] = React.useState(true);
+  const [prDetails, setPrDetails] = React.useState(null);
+  const [error, setError] = React.useState(null);
+
+  // Use a ref to track if we've already loaded data for this PR
+  const requestIdRef = React.useRef(null);
+  const currentRequestId = `${event.repo}-${(_event$payload = event.payload) == null || (_event$payload = _event$payload.pull_request) == null ? void 0 : _event$payload.number}`;
+
+  // Prevent navigation only from anchors in the title and buttons
+  const handleLinkClick = e => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Optional: Open the link in a new tab if needed
+    // const href = (e.currentTarget as HTMLAnchorElement).href;
+    // window.open(href, '_blank', 'noopener,noreferrer');
+  };
+
+  // Check if event is valid
+  if (!(event != null && event.date)) {
+    return null;
+  }
+  const pullRequest = (_event$payload2 = event.payload) == null ? void 0 : _event$payload2.pull_request;
+  if (!pullRequest) {
+    return null;
+  }
+
+  // Extract repo, branches and user info
+  const repoFullName = event.repo;
+  const [repoOwner, repoName] = repoFullName.split('/');
+  const baseBranch = ((_pullRequest$base = pullRequest.base) == null ? void 0 : _pullRequest$base.ref) || 'unknown';
+  const headBranch = ((_pullRequest$head = pullRequest.head) == null ? void 0 : _pullRequest$head.ref) || 'unknown';
+  const authorLogin = ((_pullRequest$user = pullRequest.user) == null ? void 0 : _pullRequest$user.login) || event.user;
+  const authorAvatar = ((_pullRequest$user2 = pullRequest.user) == null ? void 0 : _pullRequest$user2.avatar_url) || event.avatarUrl;
+
+  // Check if PR is deleted or closed before making API call
+  const isPRDeleted = event.payload.action === 'deleted' || pullRequest.state === 'closed' || pullRequest.state === 'merged';
+  React.useEffect(() => {
+    // Skip if this is the same PR we've already loaded
+    if (requestIdRef.current === currentRequestId && prDetails !== null) {
+      return;
+    }
+
+    // Track the current request
+    requestIdRef.current = currentRequestId;
+    let isMounted = true;
+    const fetchPRDetails = async () => {
+      try {
+        // If PR is deleted, don't make the API call
+        if (isPRDeleted) {
+          if (isMounted) {
+            setLoading(false);
+            setPrDetails({
+              title: pullRequest.title,
+              number: pullRequest.number,
+              state: pullRequest.state,
+              merged: pullRequest.merged,
+              user: pullRequest.user,
+              created_at: pullRequest.created_at,
+              updated_at: pullRequest.updated_at,
+              closed_at: pullRequest.closed_at,
+              merged_at: pullRequest.merged_at,
+              commits_list: [],
+              files: []
+            });
+          }
+          return;
+        }
+        if (isMounted) {
+          setLoading(true);
+          setError(null);
+        }
+        try {
+          // Extract owner and repo from the repository URL
+          let owner, repo;
+          try {
+            const repoUrl = new URL(pullRequest.html_url);
+            const pathParts = repoUrl.pathname.split('/').filter(Boolean);
+            if (pathParts.length >= 2) {
+              owner = pathParts[0];
+              repo = pathParts[1];
+            } else {
+              throw new Error('Invalid repository URL');
+            }
+          } catch (urlError) {
+            // Fallback to the repo name if URL parsing fails
+            const [fallbackOwner, fallbackRepo] = repoFullName.split('/');
+            owner = fallbackOwner;
+            repo = fallbackRepo;
+          }
+          if (!owner || !repo || !pullRequest.number) {
+            throw new Error('Missing required information to fetch PR details');
+          }
+          const params = {
+            owner,
+            repo,
+            pull_number: pullRequest.number
+          };
+          const data = await getPRDetails({
+            apiUrl,
+            params
+          });
+          if (isMounted) {
+            setPrDetails(data);
+          }
+        } catch (err) {
+          console.error('Error fetching PR details:', err);
+          if (isMounted) {
+            setError(err instanceof Error ? err.message : 'Failed to load PR details');
+          }
+        } finally {
+          if (isMounted) {
+            setLoading(false);
+          }
+        }
+      } catch (err) {
+        console.error('Error in PR details flow:', err);
+        if (isMounted) {
+          setLoading(false);
+          setError('An unexpected error occurred');
+        }
+      }
+    };
+    fetchPRDetails();
+
+    // Cleanup function to prevent state updates if component unmounts
+    return () => {
+      isMounted = false;
+    };
+  }, [currentRequestId, isPRDeleted]); // Only depend on the request ID, not the entire object
+
+  const handleCheckout = hash => {
+    // TODO: Implement checkout functionality
+  };
+
+  // PR Header component with context info
+  const PrHeader = () => /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      mb: 2
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'top',
+        justifyContent: 'space-between',
+        mb: 1
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          flexWrap: 'wrap'
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          color: "text.secondary",
+          children: event.date
+        }), /*#__PURE__*/_jsx(Chip, {
+          label: `${repoOwner}/${repoName}`,
+          size: "small",
+          color: "primary",
+          variant: "outlined"
+        }), /*#__PURE__*/_jsx(Chip, {
+          label: `#${pullRequest.number}`,
+          size: "small",
+          color: "default"
+        }), /*#__PURE__*/_jsx(Chip, {
+          label: pullRequest.state,
+          size: "small",
+          color: pullRequest.state === 'open' ? 'success' : 'error'
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
+        sx: {
+          height: 'min-content',
+          padding: '8px',
+          '@media (min-width:40px)': {
+            display: 'none'
+          },
+          textTransform: 'none'
+        },
+        variant: "outlined",
+        size: "small",
+        startIcon: _CheckoutIcon || (_CheckoutIcon = /*#__PURE__*/_jsx(CheckoutIcon, {})),
+        onClick: e => {
+          e.preventDefault();
+          handleCheckout();
+        },
+        children: "Checkout"
+      })]
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      component: "h3",
+      sx: {
+        mb: 1
+      },
+      children: /*#__PURE__*/_jsx(Link, {
+        href: pullRequest.html_url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          textDecoration: 'none'
+        },
+        onClick: handleLinkClick,
+        children: pullRequest.title
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        mb: 1
+      },
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        src: authorAvatar,
+        alt: authorLogin,
+        sx: {
+          width: 24,
+          height: 24
+        }
+      }), _Typography || (_Typography = /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        children: authorLogin
+      })), _Typography2 || (_Typography2 = /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        children: "wants to merge from"
+      })), _Chip || (_Chip = /*#__PURE__*/_jsx(Chip, {
+        label: headBranch,
+        size: "small",
+        color: "default",
+        variant: "outlined"
+      })), _Typography3 || (_Typography3 = /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        children: "into"
+      })), _Chip2 || (_Chip2 = /*#__PURE__*/_jsx(Chip, {
+        label: baseBranch,
+        size: "small",
+        color: "default",
+        variant: "outlined"
+      }))]
+    })]
+  });
+  if (loading) {
+    return /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        p: '16px'
+      },
+      children: [/*#__PURE__*/_jsx(PrHeader, {}), /*#__PURE__*/_jsx(Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          p: 4
+        },
+        children: _CircularProgress || (_CircularProgress = /*#__PURE__*/_jsx(CircularProgress, {}))
+      })]
+    });
+  }
+  if (error) {
+    return /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        p: '16px'
+      },
+      children: [/*#__PURE__*/_jsx(PrHeader, {}), /*#__PURE__*/_jsx(Typography, {
+        color: "error",
+        children: error
+      }), isPRDeleted && /*#__PURE__*/_jsxs(Typography, {
+        color: "text.secondary",
+        sx: {
+          mt: 1
+        },
+        children: ["This pull request is no longer available.", pullRequest.state === 'merged' && ' It has been merged.', pullRequest.state === 'closed' && ' It has been closed.', event.payload.action === 'deleted' && ' It has been deleted.']
+      })]
+    });
+  }
+  if (!prDetails) {
+    return null;
+  }
+
+  // Transform the PR details into the format expected by PullRequestView
+  const transformedCommits = (prDetails.commits_list || []).map(commit => {
+    var _commit$author;
+    return {
+      id: commit.sha,
+      message: commit.commit.message,
+      author: {
+        name: commit.commit.author.name,
+        avatar: ((_commit$author = commit.author) == null ? void 0 : _commit$author.avatar_url) || ''
+      },
+      date: commit.commit.author.date,
+      hash: commit.sha
+    };
+  });
+  const transformedFiles = (prDetails.files || []).map(file => ({
+    path: file.path,
+    type: file.type,
+    additions: file.additions,
+    deletions: file.deletions,
+    diff: file.diff
+  }));
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: '16px'
+    },
+    children: [/*#__PURE__*/_jsx(PrHeader, {}), /*#__PURE__*/_jsx(PullRequestView, {
+      title: "" // Set to empty to avoid duplicate title
+      ,
+      number: prDetails.number,
+      commits: transformedCommits,
+      files: transformedFiles,
+      onCheckout: handleCheckout
+    })]
+  });
+}
+
+// Helper function to parse diff content into line objects
+// function parseDiff(patch: string): Array<{ type: 'addition' | 'deletion' | 'context'; content: string; lineNumber: number }> {
+//   if (!patch) return [];
+//
+//   return patch.split('\n').map((line, index) => {
+//     if (line.startsWith('+')) {
+//       return {
+//         type: 'addition',
+//         content: line,
+//         lineNumber: index + 1,
+//       };
+//     } else if (line.startsWith('-')) {
+//       return {
+//         type: 'deletion',
+//         content: line,
+//         lineNumber: index + 1,
+//       };
+//     } else {
+//       return {
+//         type: 'context',
+//         content: line,
+//         lineNumber: index + 1,
+//       };
+//     }
+//   });
+// }