@stoked-ui/github 0.0.0-a.0

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface PullRequestViewProps {
+    title: string;
+    number: number;
+    commits: Array<{
+        id: string;
+        message: string;
+        author: {
+            name: string;
+            avatar: string;
+        };
+        date: string;
+        hash: string;
+    }>;
+    files: Array<{
+        path: string;
+        type: 'added' | 'modified' | 'deleted';
+        additions: number;
+        deletions: number;
+        diff: Array<{
+            type: 'addition' | 'deletion' | 'context';
+            content: string;
+            lineNumber: number;
+        }>;
+    }>;
+    onCheckout?: (hash?: string) => void;
+}
+export default function PullRequestView({ title, number, commits, files, onCheckout, }: PullRequestViewProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { EventDetails } from '../../types/github';
+interface PushEventProps {
+    event: EventDetails;
+}
+export default function PushEvent({ event }: PushEventProps): React.JSX.Element | null;
+export {};

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

package/GithubEvents/GithubEvents.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { RequestError } from '@octokit/request-error';
+import { GitHubEvent } from '../types/github';
+export type EventsQuery = {
+    page?: number;
+    per_page?: number;
+    repo?: string;
+    action?: string;
+    date?: string;
+    description?: string;
+};
+export declare function githubEventsQuery({ query, githubUser, githubToken }: {
+    query: EventsQuery;
+    githubUser: string;
+    githubToken?: string;
+}): Promise<{
+    events: GitHubEvent[];
+    total: number;
+    repositories: string[];
+    actionTypes: string[];
+    page: number;
+    per_page: number;
+    total_pages: number;
+    total_fetched_events: number;
+    max_pages_fetched: number;
+}>;
+export interface GetEventsParams {
+    githubUser: string;
+    githubToken?: string;
+    apiUrl?: string;
+    query: {
+        page: number;
+        perPage: number;
+        repo?: string;
+        action?: string;
+        date?: string;
+        description?: string;
+    };
+}
+export declare function ErrorDetails({ error }: {
+    error: string | RequestError;
+}): React.JSX.Element | null;
+export default function GithubEvents({ apiUrl, eventsPerPage, hideMetadata, githubUser, githubToken }: {
+    apiUrl?: string;
+    eventsPerPage?: number;
+    hideMetadata?: boolean;
+    githubUser: string;
+    githubToken?: string;
+}): import("react/jsx-runtime").JSX.Element;