@stoked-ui/github 0.1.0-alpha.11.2 → 0.1.0-alpha.13.1

package/GithubBranch/GithubBranch.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GithubBranchData } from '../types/github';
+import { GithubBranchData, GithubFileHighlight } from '../types/github';
 export interface GithubBranchProps {
     owner: string;
     repo: string;
@@ -8,5 +8,6 @@ export interface GithubBranchProps {
     apiUrl?: string;
     private?: boolean;
     data?: GithubBranchData;
+    highlights?: GithubFileHighlight[];
 }
-export default function GithubBranch({ owner, repo, base, head, apiUrl, private: privateMode, data, }: GithubBranchProps): React.JSX.Element;
+export default function GithubBranch({ owner, repo, base, head, apiUrl, private: privateMode, data, highlights, }: GithubBranchProps): React.JSX.Element;

package/GithubBranch/GithubBranch.js

@@ -52,7 +52,8 @@ export default function GithubBranch({
   head,
   apiUrl,
   private: privateMode = false,
-  data
+  data,
+  highlights
 }) {
   const [branchData, setBranchData] = React.useState(data || null);
   const [loading, setLoading] = React.useState(!data && !privateMode);
@@ -170,7 +171,8 @@ export default function GithubBranch({
         title: "",
         number: 0,
         commits: branchData.commits,
-        files: branchData.files
+        files: branchData.files,
+        highlights: highlights
       })]
     }) : null]
   });

package/GithubCalendar/GithubCalendar.js

@@ -3,9 +3,45 @@ import * as React from 'react';
 import { Box } from "@mui/material";
 import { ActivityCalendar } from "react-activity-calendar";
 import { useTheme } from '@mui/material/styles';
-import { useResize } from '@stoked-ui/common';
-import { useResizeWindow } from '@stoked-ui/common';
 import { jsx as _jsx } from "react/jsx-runtime";
+function useWindowSize() {
+  const [size, setSize] = React.useState(() => {
+    if (typeof window === 'undefined') {
+      return [0, 0];
+    }
+    return [window.innerWidth, window.innerHeight];
+  });
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const handleResize = () => {
+      setSize([window.innerWidth, window.innerHeight]);
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return size;
+}
+function useElementSize(elementRef) {
+  const [size, setSize] = React.useState({
+    width: undefined,
+    height: undefined
+  });
+  React.useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: elementRef.current ? elementRef.current.offsetWidth : undefined,
+        height: elementRef.current ? elementRef.current.offsetHeight : undefined
+      });
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [elementRef]);
+  return size;
+}
 function formatActivityDate(date) {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -70,8 +106,8 @@ export default function GithubCalendar({
   const [labelsTimer, setLabelsTimer] = React.useState(null);
   const theme = useTheme();
   const elementRef = React.useRef(null);
-  const [windowWidth, _] = useResizeWindow();
-  const elemSize = useResize(elementRef);
+  const [windowWidth] = useWindowSize();
+  const elemSize = useElementSize(elementRef);
   React.useEffect(() => {
     if (inputBlockSize) {
       return;

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { GithubFileHighlight } from '../../../types/github';
 interface FileChange {
     path: string;
     type: 'added' | 'modified' | 'deleted';
@@ -12,6 +13,7 @@ interface FileChange {
 }
 interface FileChangesProps {
     files: FileChange[];
+    highlights?: GithubFileHighlight[];
 }
-export default function FileChanges({ files }: FileChangesProps): React.JSX.Element;
+export default function FileChanges({ files, highlights }: FileChangesProps): React.JSX.Element;
 export {};

package/GithubEvents/EventTypes/PullRequest/FileChanges.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _Chip, _Chip2, _Chip3, _FileIcon;
+var _Chip, _Chip2, _Chip3, _FileIcon, _Chip4, _Typography;
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -11,7 +11,7 @@ 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';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // const StyledTreeItem = styled(TreeItem)((props) => ({
 //   '& .MuiTreeItem-content': {
 //     padding: props.theme.spacing(1),
@@ -26,7 +26,7 @@ import Chip from '@mui/material/Chip';
 //     },
 //   },
 // }));
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 const DiffView = styled(Box)(({
   theme
 }) => ({
@@ -66,8 +66,83 @@ const DiffLine = styled(Box, {
 //   children?: TreeNode[];
 // }
 
+function isGroupHighlight(highlight) {
+  return 'files' in highlight;
+}
+function normalizeHighlights(files, highlights = []) {
+  const fileMap = new Map(files.map(file => [file.path, file]));
+  const claimedPaths = new Set();
+  const groups = [];
+  highlights.forEach(highlight => {
+    const paths = isGroupHighlight(highlight) ? highlight.files : [highlight.file];
+    const matchedFiles = paths.map(path => fileMap.get(path)).filter(file => Boolean(file)).filter(file => {
+      if (claimedPaths.has(file.path)) {
+        return false;
+      }
+      claimedPaths.add(file.path);
+      return true;
+    });
+    if (matchedFiles.length > 0) {
+      groups.push({
+        files: matchedFiles,
+        comment: highlight.comment
+      });
+    }
+  });
+  return {
+    highlightedGroups: groups,
+    remainingFiles: files.filter(file => !claimedPaths.has(file.path))
+  };
+}
+function renderFileLabel(file) {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      children: file.path
+    }), /*#__PURE__*/_jsxs(Typography, {
+      variant: "caption",
+      color: "text.secondary",
+      children: ["+", file.additions, " -", file.deletions]
+    })]
+  });
+}
+function renderFileNode({
+  file,
+  index,
+  getFileIcon
+}) {
+  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), renderFileLabel(file)]
+    }),
+    children: /*#__PURE__*/_jsx(Box, {
+      sx: {
+        p: '16px'
+      },
+      children: /*#__PURE__*/_jsx(DiffView, {
+        children: file.diff.map((line, diffIndex) => /*#__PURE__*/_jsx(DiffLine, {
+          type: line.type,
+          children: line.content
+        }, `${itemId}-line-${diffIndex}`))
+      })
+    })
+  }, itemId);
+}
 export default function FileChanges({
-  files
+  files,
+  highlights
 }) {
   const [expanded, setExpanded] = React.useState([]);
   const [selected, setSelected] = React.useState([]);
@@ -101,6 +176,10 @@ export default function FileChanges({
         return _FileIcon || (_FileIcon = /*#__PURE__*/_jsx(FileIcon, {}));
     }
   };
+  const {
+    highlightedGroups,
+    remainingFiles
+  } = React.useMemo(() => normalizeHighlights(files, highlights), [files, highlights]);
 
   // Transform files into tree nodes
   // const items: TreeNode[] = files.map((file, index) => ({
@@ -134,8 +213,78 @@ export default function FileChanges({
   //   </Box>
   // );
 
-  return /*#__PURE__*/_jsx(Box, {
-    children: /*#__PURE__*/_jsx(SimpleTreeView, {
+  return /*#__PURE__*/_jsxs(Box, {
+    children: [highlightedGroups.length > 0 ? /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        mb: 3,
+        p: 2,
+        border: theme => `1px solid ${theme.palette.warning.main}`,
+        borderRadius: 2,
+        backgroundColor: 'action.hover'
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          mb: 1.5
+        },
+        children: [_Chip4 || (_Chip4 = /*#__PURE__*/_jsx(Chip, {
+          label: "Highlighted files",
+          size: "small",
+          color: "warning"
+        })), _Typography || (_Typography = /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          color: "text.secondary",
+          children: "Pulled out for focused review"
+        }))]
+      }), highlightedGroups.map((group, groupIndex) => /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          mb: groupIndex === highlightedGroups.length - 1 ? 0 : 2,
+          p: 1.5,
+          borderRadius: 2,
+          border: '1px solid',
+          borderColor: 'divider',
+          backgroundColor: 'background.paper'
+        },
+        children: [group.comment ? /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            mb: 1.5
+          },
+          children: group.comment
+        }) : null, /*#__PURE__*/_jsx(SimpleTreeView, {
+          slots: {
+            collapseIcon: ExpandMoreIcon,
+            expandIcon: ChevronRightIcon
+          },
+          defaultExpandedItems: group.files.map((file, index) => `highlight-${groupIndex}-${index}-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`),
+          children: group.files.map((file, index) => /*#__PURE__*/_jsx(TreeItem, {
+            itemId: `highlight-${groupIndex}-${index}-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`,
+            label: /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+              },
+              children: [getFileIcon(file.type), renderFileLabel(file)]
+            }),
+            children: /*#__PURE__*/_jsx(Box, {
+              sx: {
+                p: '16px'
+              },
+              children: /*#__PURE__*/_jsx(DiffView, {
+                children: file.diff.map((line, diffIndex) => /*#__PURE__*/_jsx(DiffLine, {
+                  type: line.type,
+                  children: line.content
+                }, `highlight-${groupIndex}-${index}-line-${diffIndex}`))
+              })
+            })
+          }, `highlight-${groupIndex}-${index}-${file.path}`))
+        })]
+      }, `highlight-group-${groupIndex}`))]
+    }) : null, /*#__PURE__*/_jsx(SimpleTreeView, {
       slots: {
         collapseIcon: ExpandMoreIcon,
         expandIcon: ChevronRightIcon
@@ -145,38 +294,11 @@ export default function FileChanges({
       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);
-      })
-    })
+      children: remainingFiles.map((file, index) => renderFileNode({
+        file,
+        index,
+        getFileIcon
+      }))
+    })]
   });
 }

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { GithubFileHighlight } from '../../../types/github';
 interface PullRequestViewProps {
     title: string;
     number: number;
@@ -24,6 +25,7 @@ interface PullRequestViewProps {
         }>;
     }>;
     onCheckout?: (hash?: string) => void;
+    highlights?: GithubFileHighlight[];
 }
-export default function PullRequestView({ title, number, commits, files, onCheckout, }: PullRequestViewProps): React.JSX.Element;
+export default function PullRequestView({ title, number, commits, files, onCheckout, highlights, }: PullRequestViewProps): React.JSX.Element;
 export {};

package/GithubEvents/EventTypes/PullRequest/PullRequestView.js

@@ -9,9 +9,8 @@ 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";
+// Custom styled components to match GitHub's UI
 const StyledTabs = styled(Tabs)(({
   theme
 }) => ({
@@ -63,7 +62,8 @@ export default function PullRequestView({
   number,
   commits,
   files,
-  onCheckout
+  onCheckout,
+  highlights
 }) {
   const [tabValue, setTabValue] = React.useState(0);
   const handleTabChange = (event, newValue) => {
@@ -125,7 +125,8 @@ export default function PullRequestView({
           })
         })
       }), /*#__PURE__*/_jsx(FileChanges, {
-        files: files
+        files: files,
+        highlights: highlights
       })]
     })]
   });

package/index.d.ts

@@ -4,4 +4,4 @@ export { default as GithubCommit } from './GithubCommit';
 export { default as GithubEvents } from './GithubEvents';
 export { createGithubBranchHandler, createGithubCommitHandler, createGithubContributionsHandler, createGithubEventsHandler, getBranchCompareDetails, getCommitDetails, getGithubContributions, getGithubEvents, getPullRequestDetails, githubEventsQuery, } from './apiHandlers';
 export type { EventsQuery } from './apiHandlers';
-export type { GithubBranchData, GithubCommitData } from './types/github';
+export type { GithubBranchData, GithubCommitData, GithubFileHighlight } from './types/github';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @stoked-ui/github v0.1.0-alpha.11.2
+ * @stoked-ui/github v0.1.0-alpha.11.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/GithubBranch/GithubBranch.js

@@ -52,7 +52,8 @@ export default function GithubBranch({
   head,
   apiUrl,
   private: privateMode = false,
-  data
+  data,
+  highlights
 }) {
   const [branchData, setBranchData] = React.useState(data || null);
   const [loading, setLoading] = React.useState(!data && !privateMode);
@@ -170,7 +171,8 @@ export default function GithubBranch({
         title: "",
         number: 0,
         commits: branchData.commits,
-        files: branchData.files
+        files: branchData.files,
+        highlights: highlights
       })]
     }) : null]
   });

package/modern/GithubCalendar/GithubCalendar.js

@@ -3,9 +3,45 @@ import * as React from 'react';
 import { Box } from "@mui/material";
 import { ActivityCalendar } from "react-activity-calendar";
 import { useTheme } from '@mui/material/styles';
-import { useResize } from '@stoked-ui/common';
-import { useResizeWindow } from '@stoked-ui/common';
 import { jsx as _jsx } from "react/jsx-runtime";
+function useWindowSize() {
+  const [size, setSize] = React.useState(() => {
+    if (typeof window === 'undefined') {
+      return [0, 0];
+    }
+    return [window.innerWidth, window.innerHeight];
+  });
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const handleResize = () => {
+      setSize([window.innerWidth, window.innerHeight]);
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return size;
+}
+function useElementSize(elementRef) {
+  const [size, setSize] = React.useState({
+    width: undefined,
+    height: undefined
+  });
+  React.useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: elementRef.current ? elementRef.current.offsetWidth : undefined,
+        height: elementRef.current ? elementRef.current.offsetHeight : undefined
+      });
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [elementRef]);
+  return size;
+}
 function formatActivityDate(date) {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -70,8 +106,8 @@ export default function GithubCalendar({
   const [labelsTimer, setLabelsTimer] = React.useState(null);
   const theme = useTheme();
   const elementRef = React.useRef(null);
-  const [windowWidth, _] = useResizeWindow();
-  const elemSize = useResize(elementRef);
+  const [windowWidth] = useWindowSize();
+  const elemSize = useElementSize(elementRef);
   React.useEffect(() => {
     if (inputBlockSize) {
       return;

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _Chip, _Chip2, _Chip3, _FileIcon;
+var _Chip, _Chip2, _Chip3, _FileIcon, _Chip4, _Typography;
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -11,7 +11,7 @@ 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';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // const StyledTreeItem = styled(TreeItem)((props) => ({
 //   '& .MuiTreeItem-content': {
 //     padding: props.theme.spacing(1),
@@ -26,7 +26,7 @@ import Chip from '@mui/material/Chip';
 //     },
 //   },
 // }));
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 const DiffView = styled(Box)(({
   theme
 }) => ({
@@ -66,8 +66,83 @@ const DiffLine = styled(Box, {
 //   children?: TreeNode[];
 // }
 
+function isGroupHighlight(highlight) {
+  return 'files' in highlight;
+}
+function normalizeHighlights(files, highlights = []) {
+  const fileMap = new Map(files.map(file => [file.path, file]));
+  const claimedPaths = new Set();
+  const groups = [];
+  highlights.forEach(highlight => {
+    const paths = isGroupHighlight(highlight) ? highlight.files : [highlight.file];
+    const matchedFiles = paths.map(path => fileMap.get(path)).filter(file => Boolean(file)).filter(file => {
+      if (claimedPaths.has(file.path)) {
+        return false;
+      }
+      claimedPaths.add(file.path);
+      return true;
+    });
+    if (matchedFiles.length > 0) {
+      groups.push({
+        files: matchedFiles,
+        comment: highlight.comment
+      });
+    }
+  });
+  return {
+    highlightedGroups: groups,
+    remainingFiles: files.filter(file => !claimedPaths.has(file.path))
+  };
+}
+function renderFileLabel(file) {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      children: file.path
+    }), /*#__PURE__*/_jsxs(Typography, {
+      variant: "caption",
+      color: "text.secondary",
+      children: ["+", file.additions, " -", file.deletions]
+    })]
+  });
+}
+function renderFileNode({
+  file,
+  index,
+  getFileIcon
+}) {
+  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), renderFileLabel(file)]
+    }),
+    children: /*#__PURE__*/_jsx(Box, {
+      sx: {
+        p: '16px'
+      },
+      children: /*#__PURE__*/_jsx(DiffView, {
+        children: file.diff.map((line, diffIndex) => /*#__PURE__*/_jsx(DiffLine, {
+          type: line.type,
+          children: line.content
+        }, `${itemId}-line-${diffIndex}`))
+      })
+    })
+  }, itemId);
+}
 export default function FileChanges({
-  files
+  files,
+  highlights
 }) {
   const [expanded, setExpanded] = React.useState([]);
   const [selected, setSelected] = React.useState([]);
@@ -101,6 +176,10 @@ export default function FileChanges({
         return _FileIcon || (_FileIcon = /*#__PURE__*/_jsx(FileIcon, {}));
     }
   };
+  const {
+    highlightedGroups,
+    remainingFiles
+  } = React.useMemo(() => normalizeHighlights(files, highlights), [files, highlights]);
 
   // Transform files into tree nodes
   // const items: TreeNode[] = files.map((file, index) => ({
@@ -134,8 +213,78 @@ export default function FileChanges({
   //   </Box>
   // );
 
-  return /*#__PURE__*/_jsx(Box, {
-    children: /*#__PURE__*/_jsx(SimpleTreeView, {
+  return /*#__PURE__*/_jsxs(Box, {
+    children: [highlightedGroups.length > 0 ? /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        mb: 3,
+        p: 2,
+        border: theme => `1px solid ${theme.palette.warning.main}`,
+        borderRadius: 2,
+        backgroundColor: 'action.hover'
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          mb: 1.5
+        },
+        children: [_Chip4 || (_Chip4 = /*#__PURE__*/_jsx(Chip, {
+          label: "Highlighted files",
+          size: "small",
+          color: "warning"
+        })), _Typography || (_Typography = /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          color: "text.secondary",
+          children: "Pulled out for focused review"
+        }))]
+      }), highlightedGroups.map((group, groupIndex) => /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          mb: groupIndex === highlightedGroups.length - 1 ? 0 : 2,
+          p: 1.5,
+          borderRadius: 2,
+          border: '1px solid',
+          borderColor: 'divider',
+          backgroundColor: 'background.paper'
+        },
+        children: [group.comment ? /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            mb: 1.5
+          },
+          children: group.comment
+        }) : null, /*#__PURE__*/_jsx(SimpleTreeView, {
+          slots: {
+            collapseIcon: ExpandMoreIcon,
+            expandIcon: ChevronRightIcon
+          },
+          defaultExpandedItems: group.files.map((file, index) => `highlight-${groupIndex}-${index}-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`),
+          children: group.files.map((file, index) => /*#__PURE__*/_jsx(TreeItem, {
+            itemId: `highlight-${groupIndex}-${index}-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`,
+            label: /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+              },
+              children: [getFileIcon(file.type), renderFileLabel(file)]
+            }),
+            children: /*#__PURE__*/_jsx(Box, {
+              sx: {
+                p: '16px'
+              },
+              children: /*#__PURE__*/_jsx(DiffView, {
+                children: file.diff.map((line, diffIndex) => /*#__PURE__*/_jsx(DiffLine, {
+                  type: line.type,
+                  children: line.content
+                }, `highlight-${groupIndex}-${index}-line-${diffIndex}`))
+              })
+            })
+          }, `highlight-${groupIndex}-${index}-${file.path}`))
+        })]
+      }, `highlight-group-${groupIndex}`))]
+    }) : null, /*#__PURE__*/_jsx(SimpleTreeView, {
       slots: {
         collapseIcon: ExpandMoreIcon,
         expandIcon: ChevronRightIcon
@@ -145,38 +294,11 @@ export default function FileChanges({
       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);
-      })
-    })
+      children: remainingFiles.map((file, index) => renderFileNode({
+        file,
+        index,
+        getFileIcon
+      }))
+    })]
   });
 }

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

@@ -9,9 +9,8 @@ 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";
+// Custom styled components to match GitHub's UI
 const StyledTabs = styled(Tabs)(({
   theme
 }) => ({
@@ -63,7 +62,8 @@ export default function PullRequestView({
   number,
   commits,
   files,
-  onCheckout
+  onCheckout,
+  highlights
 }) {
   const [tabValue, setTabValue] = React.useState(0);
   const handleTabChange = (event, newValue) => {
@@ -125,7 +125,8 @@ export default function PullRequestView({
           })
         })
       }), /*#__PURE__*/_jsx(FileChanges, {
-        files: files
+        files: files,
+        highlights: highlights
       })]
     })]
   });

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @stoked-ui/github v0.1.0-alpha.11.2
+ * @stoked-ui/github v0.1.0-alpha.11.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/GithubBranch/GithubBranch.js

@@ -60,7 +60,8 @@ function GithubBranch({
   head,
   apiUrl,
   private: privateMode = false,
-  data
+  data,
+  highlights
 }) {
   const [branchData, setBranchData] = React.useState(data || null);
   const [loading, setLoading] = React.useState(!data && !privateMode);
@@ -178,7 +179,8 @@ function GithubBranch({
         title: "",
         number: 0,
         commits: branchData.commits,
-        files: branchData.files
+        files: branchData.files,
+        highlights: highlights
       })]
     }) : null]
   });

package/node/GithubCalendar/GithubCalendar.js

@@ -10,9 +10,46 @@ var React = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _reactActivityCalendar = require("react-activity-calendar");
 var _styles = require("@mui/material/styles");
-var _common = require("@stoked-ui/common");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function useWindowSize() {
+  const [size, setSize] = React.useState(() => {
+    if (typeof window === 'undefined') {
+      return [0, 0];
+    }
+    return [window.innerWidth, window.innerHeight];
+  });
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const handleResize = () => {
+      setSize([window.innerWidth, window.innerHeight]);
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return size;
+}
+function useElementSize(elementRef) {
+  const [size, setSize] = React.useState({
+    width: undefined,
+    height: undefined
+  });
+  React.useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: elementRef.current ? elementRef.current.offsetWidth : undefined,
+        height: elementRef.current ? elementRef.current.offsetHeight : undefined
+      });
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [elementRef]);
+  return size;
+}
 function formatActivityDate(date) {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -77,8 +114,8 @@ function GithubCalendar({
   const [labelsTimer, setLabelsTimer] = React.useState(null);
   const theme = (0, _styles.useTheme)();
   const elementRef = React.useRef(null);
-  const [windowWidth, _] = (0, _common.useResizeWindow)();
-  const elemSize = (0, _common.useResize)(elementRef);
+  const [windowWidth] = useWindowSize();
+  const elemSize = useElementSize(elementRef);
   React.useEffect(() => {
     if (inputBlockSize) {
       return;

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

@@ -8,16 +8,17 @@ exports.default = FileChanges;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Typography2 = _interopRequireDefault(require("@mui/material/Typography"));
 var _SimpleTreeView = require("@mui/x-tree-view/SimpleTreeView");
 var _TreeItem = require("@mui/x-tree-view/TreeItem");
 var _styles = require("@mui/material/styles");
 var _InsertDriveFile = _interopRequireDefault(require("@mui/icons-material/InsertDriveFile"));
 var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-var _Chip4 = _interopRequireDefault(require("@mui/material/Chip"));
+var _Chip5 = _interopRequireDefault(require("@mui/material/Chip"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _Chip, _Chip2, _Chip3, _FileIcon; // import FolderIcon from '@mui/icons-material/Folder';
+var _Chip, _Chip2, _Chip3, _FileIcon, _Chip4, _Typography; // import FolderIcon from '@mui/icons-material/Folder';
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // const StyledTreeItem = styled(TreeItem)((props) => ({
 //   '& .MuiTreeItem-content': {
 //     padding: props.theme.spacing(1),
@@ -32,7 +33,7 @@ var _Chip, _Chip2, _Chip3, _FileIcon; // import FolderIcon from '@mui/icons-mate
 //     },
 //   },
 // }));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+
 const DiffView = (0, _styles.styled)(_Box.default)(({
   theme
 }) => ({
@@ -72,8 +73,83 @@ const DiffLine = (0, _styles.styled)(_Box.default, {
 //   children?: TreeNode[];
 // }
 
+function isGroupHighlight(highlight) {
+  return 'files' in highlight;
+}
+function normalizeHighlights(files, highlights = []) {
+  const fileMap = new Map(files.map(file => [file.path, file]));
+  const claimedPaths = new Set();
+  const groups = [];
+  highlights.forEach(highlight => {
+    const paths = isGroupHighlight(highlight) ? highlight.files : [highlight.file];
+    const matchedFiles = paths.map(path => fileMap.get(path)).filter(file => Boolean(file)).filter(file => {
+      if (claimedPaths.has(file.path)) {
+        return false;
+      }
+      claimedPaths.add(file.path);
+      return true;
+    });
+    if (matchedFiles.length > 0) {
+      groups.push({
+        files: matchedFiles,
+        comment: highlight.comment
+      });
+    }
+  });
+  return {
+    highlightedGroups: groups,
+    remainingFiles: files.filter(file => !claimedPaths.has(file.path))
+  };
+}
+function renderFileLabel(file) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography2.default, {
+      variant: "body2",
+      children: file.path
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography2.default, {
+      variant: "caption",
+      color: "text.secondary",
+      children: ["+", file.additions, " -", file.deletions]
+    })]
+  });
+}
+function renderFileNode({
+  file,
+  index,
+  getFileIcon
+}) {
+  const itemId = `file-${index}-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem.TreeItem, {
+    itemId: itemId,
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      },
+      children: [getFileIcon(file.type), renderFileLabel(file)]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        p: '16px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DiffView, {
+        children: file.diff.map((line, diffIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DiffLine, {
+          type: line.type,
+          children: line.content
+        }, `${itemId}-line-${diffIndex}`))
+      })
+    })
+  }, itemId);
+}
 function FileChanges({
-  files
+  files,
+  highlights
 }) {
   const [expanded, setExpanded] = React.useState([]);
   const [selected, setSelected] = React.useState([]);
@@ -86,19 +162,19 @@ function FileChanges({
   const getFileIcon = type => {
     switch (type) {
       case 'added':
-        return _Chip || (_Chip = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip4.default, {
+        return _Chip || (_Chip = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip5.default, {
           label: "A",
           size: "small",
           color: "success"
         }));
       case 'modified':
-        return _Chip2 || (_Chip2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip4.default, {
+        return _Chip2 || (_Chip2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip5.default, {
           label: "M",
           size: "small",
           color: "warning"
         }));
       case 'deleted':
-        return _Chip3 || (_Chip3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip4.default, {
+        return _Chip3 || (_Chip3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip5.default, {
           label: "D",
           size: "small",
           color: "error"
@@ -107,6 +183,10 @@ function FileChanges({
         return _FileIcon || (_FileIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_InsertDriveFile.default, {}));
     }
   };
+  const {
+    highlightedGroups,
+    remainingFiles
+  } = React.useMemo(() => normalizeHighlights(files, highlights), [files, highlights]);
 
   // Transform files into tree nodes
   // const items: TreeNode[] = files.map((file, index) => ({
@@ -140,8 +220,78 @@ function FileChanges({
   //   </Box>
   // );
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleTreeView.SimpleTreeView, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    children: [highlightedGroups.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        mb: 3,
+        p: 2,
+        border: theme => `1px solid ${theme.palette.warning.main}`,
+        borderRadius: 2,
+        backgroundColor: 'action.hover'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          mb: 1.5
+        },
+        children: [_Chip4 || (_Chip4 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip5.default, {
+          label: "Highlighted files",
+          size: "small",
+          color: "warning"
+        })), _Typography || (_Typography = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography2.default, {
+          variant: "caption",
+          color: "text.secondary",
+          children: "Pulled out for focused review"
+        }))]
+      }), highlightedGroups.map((group, groupIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          mb: groupIndex === highlightedGroups.length - 1 ? 0 : 2,
+          p: 1.5,
+          borderRadius: 2,
+          border: '1px solid',
+          borderColor: 'divider',
+          backgroundColor: 'background.paper'
+        },
+        children: [group.comment ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography2.default, {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            mb: 1.5
+          },
+          children: group.comment
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleTreeView.SimpleTreeView, {
+          slots: {
+            collapseIcon: _ExpandMore.default,
+            expandIcon: _ChevronRight.default
+          },
+          defaultExpandedItems: group.files.map((file, index) => `highlight-${groupIndex}-${index}-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`),
+          children: group.files.map((file, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem.TreeItem, {
+            itemId: `highlight-${groupIndex}-${index}-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`,
+            label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              sx: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+              },
+              children: [getFileIcon(file.type), renderFileLabel(file)]
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              sx: {
+                p: '16px'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DiffView, {
+                children: file.diff.map((line, diffIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DiffLine, {
+                  type: line.type,
+                  children: line.content
+                }, `highlight-${groupIndex}-${index}-line-${diffIndex}`))
+              })
+            })
+          }, `highlight-${groupIndex}-${index}-${file.path}`))
+        })]
+      }, `highlight-group-${groupIndex}`))]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleTreeView.SimpleTreeView, {
       slots: {
         collapseIcon: _ExpandMore.default,
         expandIcon: _ChevronRight.default
@@ -151,38 +301,11 @@ function FileChanges({
       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__*/(0, _jsxRuntime.jsx)(_TreeItem.TreeItem, {
-          itemId: itemId,
-          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-            sx: {
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1
-            },
-            children: [getFileIcon(file.type), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              variant: "body2",
-              children: file.path
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
-              variant: "caption",
-              color: "text.secondary",
-              children: ["+", file.additions, " -", file.deletions]
-            })]
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-            sx: {
-              p: '16px'
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DiffView, {
-              children: file.diff.map((line, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DiffLine, {
-                type: line.type,
-                children: line.content
-              }, `${itemId}-line-${index}`))
-            })
-          })
-        }, itemId);
-      })
-    })
+      children: remainingFiles.map((file, index) => renderFileNode({
+        file,
+        index,
+        getFileIcon
+      }))
+    })]
   });
 }

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

@@ -16,8 +16,9 @@ var _styles = require("@mui/material/styles");
 var _CommitsList = _interopRequireDefault(require("./CommitsList"));
 var _FileChanges = _interopRequireDefault(require("./FileChanges"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "value", "index"]; // Custom styled components to match GitHub's UI
+const _excluded = ["children", "value", "index"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Custom styled components to match GitHub's UI
 const StyledTabs = (0, _styles.styled)(_Tabs.default)(({
   theme
 }) => ({
@@ -69,7 +70,8 @@ function PullRequestView({
   number,
   commits,
   files,
-  onCheckout
+  onCheckout,
+  highlights
 }) {
   const [tabValue, setTabValue] = React.useState(0);
   const handleTabChange = (event, newValue) => {
@@ -131,7 +133,8 @@ function PullRequestView({
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileChanges.default, {
-        files: files
+        files: files,
+        highlights: highlights
       })]
     })]
   });

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @stoked-ui/github v0.1.0-alpha.11.2
+ * @stoked-ui/github v0.1.0-alpha.11.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoked-ui/github",
-  "version": "0.1.0-alpha.11.2",
+  "version": "0.1.0-alpha.13.1",
   "description": "Github components for Stoked UI",
   "author": "Brian Stoker",
   "main": "./node/index.js",
@@ -65,4 +65,4 @@
   "private": false,
   "module": "./index.js",
   "types": "./index.d.ts"
-}
+}

package/types/github.d.ts

@@ -45,6 +45,15 @@ export interface GithubChangedFile {
     deletions: number;
     diff: GithubDiffLine[];
 }
+export interface GithubFileHighlightSingle {
+    file: string;
+    comment?: string;
+}
+export interface GithubFileHighlightGroup {
+    files: string[];
+    comment?: string;
+}
+export type GithubFileHighlight = GithubFileHighlightSingle | GithubFileHighlightGroup;
 export interface GithubContributor {
     login: string;
     name: string;