@stoked-ui/github 0.0.0-a.0

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

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

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "value", "index"];
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import CommitsList from './CommitsList';
+import FileChanges from './FileChanges';
+
+// Custom styled components to match GitHub's UI
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledTabs = styled(Tabs)(({
+  theme
+}) => ({
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  '& .MuiTab-root': {
+    textTransform: 'none',
+    minHeight: 48,
+    padding: '0 16px',
+    color: theme.palette.text.secondary,
+    '&.Mui-selected': {
+      color: theme.palette.text.primary
+    }
+  }
+}));
+const StatsBox = styled(Box)(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  padding: theme.spacing(1, 2),
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.shape.borderRadius,
+  border: `1px solid ${theme.palette.divider}`
+}));
+function TabPanel(props) {
+  const {
+      children,
+      value,
+      index
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx("div", _extends({
+    role: "tabpanel",
+    hidden: value !== index,
+    id: `pr-tabpanel-${index}`,
+    "aria-labelledby": `pr-tab-${index}`
+  }, other, {
+    children: value === index && /*#__PURE__*/_jsx(Box, {
+      sx: {
+        p: 3
+      },
+      children: children
+    })
+  }));
+}
+export default function PullRequestView({
+  title,
+  number,
+  commits,
+  files,
+  onCheckout
+}) {
+  const [tabValue, setTabValue] = React.useState(0);
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+  const totalAdditions = files.reduce((sum, file) => sum + file.additions, 0);
+  const totalDeletions = files.reduce((sum, file) => sum + file.deletions, 0);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      width: '100%'
+    },
+    children: [title && /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        mb: 2
+      },
+      children: /*#__PURE__*/_jsxs(Typography, {
+        variant: "h5",
+        component: "h1",
+        children: [title, " #", number]
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        borderBottom: 1,
+        borderColor: 'divider'
+      },
+      children: /*#__PURE__*/_jsxs(StyledTabs, {
+        value: tabValue,
+        onChange: handleTabChange,
+        children: [/*#__PURE__*/_jsx(Tab, {
+          label: `Commits (${commits.length})`,
+          id: "pr-tab-0"
+        }), /*#__PURE__*/_jsx(Tab, {
+          label: `Files changed (${files.length})`,
+          id: "pr-tab-1"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(TabPanel, {
+      value: tabValue,
+      index: 0,
+      children: /*#__PURE__*/_jsx(CommitsList, {
+        commits: commits,
+        onCheckout: onCheckout
+      })
+    }), /*#__PURE__*/_jsxs(TabPanel, {
+      value: tabValue,
+      index: 1,
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          mb: 2
+        },
+        children: /*#__PURE__*/_jsx(StatsBox, {
+          children: /*#__PURE__*/_jsxs(Typography, {
+            variant: "body2",
+            component: "span",
+            children: ["Showing ", files.length, " changed files with ", totalAdditions, " additions and ", totalDeletions, " deletions"]
+          })
+        })
+      }), /*#__PURE__*/_jsx(FileChanges, {
+        files: files
+      })]
+    })]
+  });
+}

package/modern/GithubEvents/EventTypes/PushEvent.js

@@ -0,0 +1,106 @@
+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 PushEvent({
+  event
+}) {
+  var _event$ref, _event$payload;
+  if (!(event != null && event.date)) {
+    return null;
+  }
+  const commitMessage = event.description || 'No commit message available';
+  const commitUrl = event.url || `https://github.com/${event.repo}`;
+  const branchName = ((_event$ref = event.ref) == null ? void 0 : _event$ref.replace('refs/heads/', '')) || 'main';
+  const commits = ((_event$payload = event.payload) == null ? void 0 : _event$payload.commits) || [];
+  const commitCount = commits.length;
+  // const firstCommit = commits[0];
+
+  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: branchName,
+        size: "small",
+        color: "default"
+      }), /*#__PURE__*/_jsx(Chip, {
+        label: `${commitCount} commit${commitCount !== 1 ? 's' : ''}`,
+        size: "small",
+        color: "primary"
+      })]
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      component: "h3",
+      sx: {
+        mb: 1
+      },
+      children: /*#__PURE__*/_jsx(Link, {
+        href: commitUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          textDecoration: 'none'
+        },
+        children: commitMessage
+      })
+    }), commits.length > 0 && /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        mt: 2
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "subtitle2",
+        sx: {
+          mb: 1
+        },
+        children: "Commits:"
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "ul",
+        sx: {
+          listStyle: 'none',
+          p: 0,
+          m: 0,
+          '& li': {
+            mb: 1,
+            '&:last-child': {
+              mb: 0
+            }
+          }
+        },
+        children: commits.map((commit, index) => /*#__PURE__*/_jsxs(Box, {
+          component: "li",
+          sx: {
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 1
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "span",
+            sx: {
+              color: 'text.secondary',
+              minWidth: '7ch'
+            },
+            children: commit.sha.substring(0, 7)
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            children: commit.message
+          })]
+        }, index))
+      })]
+    })]
+  });
+}