@stoked-ui/github 0.0.0-a.0

package/GithubEvents/index.d.ts

@@ -0,0 +1,2 @@
+import GithubEvents from './GithubEvents';
+export default GithubEvents;

package/GithubEvents/index.js

@@ -0,0 +1,2 @@
+import GithubEvents from './GithubEvents';
+export default GithubEvents;

package/GithubEvents/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/GithubEvents/index.js",
+  "types": "./index.d.ts"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Call-Em-All
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# Stoked UI - Github
+
+This package contains Stoked UI's Github components.
+It's part of [Stoked UI](https://stoked-ui.com/stoked-ui/docs), an open-sourced component library.
+
+## Installation
+
+Install the package in your project directory with:
+
+```bash
+npm install @stoked-ui/github
+```
+
+This component has the following peer dependencies that you will need to install as well.
+
+```json
+"peerDependencies": {
+  "@emotion/react": "^11.9.0",
+  "@emotion/styled": "^11.8.1",
+  "@mui/icons-material": "^5.15.21",
+  "@mui/material": "^5.15.21",
+  "react": "18.3.1",
+  "react-dom": "^18.0.0"
+},
+```
+
+## Documentation
+
+Visit [https://stoked-ui.com/github/docs](https://stoked-ui.com/github/docs/) to view the full documentation.

package/apiHandlers/getPullRequestDetails.d.ts

@@ -0,0 +1,7 @@
+import { RequestError } from '@octokit/request-error';
+import { PullRequestDetails } from '../types/github';
+export default function getPullRequestDetails(params: {
+    owner: string;
+    repo: string;
+    pull_number: number;
+}): Promise<PullRequestDetails | RequestError | null>;

package/apiHandlers/getPullRequestDetails.js

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { RequestError } from '@octokit/request-error';
+export default async function getPullRequestDetails(params) {
+  const requestErrorOptions = {
+    request: {
+      headers: {},
+      method: 'GET',
+      url: 'https://api.github.com/repos/${owner}/${repo}/pulls/${pull_number}'
+    },
+    response: {
+      status: 400,
+      data: {
+        message: 'Bad Request'
+      },
+      headers: {},
+      url: 'https://docs.github.com/en/rest/pulls?apiVersion=2022-11-28'
+    }
+  };
+  try {
+    const {
+      owner,
+      repo,
+      pull_number
+    } = params;
+    if (!owner || !repo || !pull_number) {
+      console.error('Missing required parameters: owner, repo, pull_number');
+      return new RequestError('Missing required parameters: owner, repo, pull_number', 400, requestErrorOptions);
+    }
+    const githubToken = process.env.GITHUB_TOKEN;
+    //if (!githubToken) {
+    //  return res.status(500).json({ message: 'GitHub token not configured' });
+    //}
+
+    let headers = {
+      'User-Agent': 'brianstoker.com-website'
+    };
+    if (githubToken) {
+      headers.Authorization = `token ${githubToken}`;
+    }
+    async function fetchWithRateLimit(url) {
+      const response = await fetch(url, {
+        headers
+      });
+      const rateLimit = {
+        limit: response.headers.get('x-ratelimit-limit'),
+        remaining: response.headers.get('x-ratelimit-remaining'),
+        reset: response.headers.get('x-ratelimit-reset')
+      };
+      if (!response.ok) {
+        if (response.status === 403 && rateLimit.remaining === '0') {
+          console.error('Rate limit exceeded. Resets at', rateLimit.reset);
+          const resetDate = new Date(Number(rateLimit.reset) * 1000);
+          throw new Error(`Rate limit exceeded. Resets at ${resetDate.toLocaleString()}`);
+        }
+        console.error('GitHub API error:', response.status, await response.text());
+        throw new Error(`GitHub API error: ${response.status} - ${await response.text()}`);
+      }
+      return {
+        data: await response.json(),
+        rateLimit
+      };
+    }
+
+    // Fetch basic PR information
+    const {
+      data: prData
+    } = await fetchWithRateLimit(`https://api.github.com/repos/${owner}/${repo}/pulls/${pull_number}`);
+
+    // Fetch commits for this PR
+    const {
+      data: commitsData
+    } = await fetchWithRateLimit(`https://api.github.com/repos/${owner}/${repo}/pulls/${pull_number}/commits`);
+
+    // Fetch file changes
+    const {
+      data: filesData
+    } = await fetchWithRateLimit(`https://api.github.com/repos/${owner}/${repo}/pulls/${pull_number}/files`);
+
+    // Process file changes to match our interface
+    const processedFiles = filesData.map(file => {
+      // Parse the patch into diff lines
+      const diff = file.patch ? file.patch.split('\n').map((line, index) => {
+        let type = 'context';
+        if (line.startsWith('+')) {
+          type = 'addition';
+        } else if (line.startsWith('-')) {
+          type = 'deletion';
+        }
+        return {
+          type,
+          content: line,
+          lineNumber: index + 1
+        };
+      }) : [];
+      return {
+        path: file.filename,
+        type: file.status === 'added' ? 'added' : file.status === 'removed' ? 'deleted' : 'modified',
+        additions: file.additions,
+        deletions: file.deletions,
+        diff
+      };
+    });
+
+    // Combine all the data
+    const pullRequestDetails = _extends({}, prData, {
+      commits_list: commitsData,
+      files: processedFiles
+    });
+
+    // Include rate limit info in response headers
+    //res.setHeader('X-RateLimit-Limit', rateLimit.limit || '');
+    //res.setHeader('X-RateLimit-Remaining', rateLimit.remaining || '');
+    //res.setHeader('X-RateLimit-Reset', rateLimit.reset || '');
+
+    return pullRequestDetails;
+  } catch (error) {
+    console.error('Error fetching pull request details:', error);
+    return new RequestError(error instanceof Error ? error.message : String(error), 500, requestErrorOptions);
+  }
+}

package/apiHandlers/index.d.ts

@@ -0,0 +1 @@
+export { default as getPullRequestDetails } from './getPullRequestDetails';

package/apiHandlers/index.js

@@ -0,0 +1 @@
+export { default as getPullRequestDetails } from './getPullRequestDetails';

package/apiHandlers/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/apiHandlers/index.js",
+  "types": "./index.d.ts"
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+import GithubCalendar from './GithubCalendar';
+import GithubEvents from './GithubEvents';
+export { GithubCalendar, GithubEvents };

package/index.js

@@ -0,0 +1,10 @@
+/**
+ * @stoked-ui/github v0.0.0-a.0
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import GithubCalendar from './GithubCalendar';
+import GithubEvents from './GithubEvents';
+export { GithubCalendar, GithubEvents };

package/modern/GithubCalendar/GithubCalendar.js

@@ -0,0 +1,330 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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";
+const defaultActivityData = {
+  total: {},
+  contributions: [],
+  countLabel: 'Loading...'
+};
+function sleep(duration) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(void 0);
+    }, duration);
+  });
+}
+export default function GithubCalendar({
+  windowMode = false,
+  containerMode = false,
+  blockSize: inputBlockSize = 12,
+  fx = undefined,
+  startImage = undefined
+}) {
+  const [activityTheme, setActivityTheme] = React.useState('light');
+  const [activityData, setActivityData] = React.useState(defaultActivityData);
+  const [activityLoading, setActivityLoading] = React.useState(true);
+  const [activityHover, setActivityHover] = React.useState(false);
+  const [activityLabels, setActivityLabels] = React.useState(false);
+  const [activityClass, setActivityClass] = React.useState('activity');
+  const [labelsTimer, setLabelsTimer] = React.useState(null);
+  const theme = useTheme();
+  const elementRef = React.useRef(null);
+  const [windowWidth, _] = useResizeWindow();
+  const elemSize = useResize(elementRef);
+  React.useEffect(() => {
+    if (inputBlockSize) {
+      return;
+    }
+    if (activityData.totalWeeks) {
+      if (windowMode) {
+        activityData.blockSize = Math.max(10, Math.floor(windowWidth / activityData.totalWeeks));
+        setActivityData(_extends({}, activityData));
+      } else if (containerMode) {
+        if (elemSize.width) {
+          activityData.blockSize = Math.max(10, Math.floor(elemSize.width / activityData.totalWeeks));
+          setActivityData(_extends({}, activityData));
+        }
+      }
+    }
+  }, [elemSize.width, windowWidth]);
+  React.useEffect(() => {
+    if (activityHover && !activityLabels) {
+      setLabelsTimer(setTimeout(() => {
+        setActivityLabels(true);
+      }, 200));
+    } else if (!activityHover && (activityLabels || labelsTimer)) {
+      setActivityLabels(false);
+      if (labelsTimer) {
+        clearTimeout(labelsTimer);
+      }
+    }
+    setActivityClass('activity ' + (activityLabels ? 'hover labels' : activityHover ? 'hover' : ''));
+  }, [activityHover, activityLabels]);
+
+  // Scroll activity all the way to the right on mount
+  React.useEffect(() => {
+    if (!activityLoading) {
+      setTimeout(() => {
+        const activityContainer = document.querySelector('.react-activity-calendar__scroll-container');
+        if (activityContainer) {
+          activityContainer.scrollLeft = activityContainer.scrollWidth;
+        }
+      }, 200);
+    }
+  }, [activityLoading]);
+  const fetchActivityData = async () => {
+    setActivityLoading(true);
+    try {
+      const response = await fetch('https://github-contributions-api.jogruber.de/v4/brian-stoker?yr=last');
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status}`);
+      }
+      const data = await response.json();
+      function compare(a, b) {
+        if (a.date < b.date) {
+          return -1;
+        }
+        if (a.date > b.date) {
+          return 1;
+        }
+        return 0;
+      }
+      const earliestDate = data.contributions.filter(item => item.count > 0) // Filter items with count > 0
+      .reduce((earliest, current) => {
+        return !earliest || new Date(current.date) < new Date(earliest.date) ? current : earliest;
+      }, null);
+      const today = new Date();
+      const year = today.getFullYear();
+      const month = String(today.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed
+      const day = String(today.getDate()).padStart(2, '0');
+      const formattedDate = `${year}-${month}-${day}`;
+      const contribs = data.contributions.filter(contrib => contrib.date < formattedDate && (!earliestDate || contrib.date >= earliestDate.date));
+      data.contributions = contribs.sort(compare);
+      const allJansSet = contribs.map(contrib => {
+        return contrib.date.slice(2, 7);
+      }).filter(yymm => yymm.slice(-2) === '01');
+      const allJans = new Set(allJansSet);
+      console.log('allJans', [...allJans]);
+      const all = Object.values(data.total).reduce((acc, curr) => acc + curr, 0);
+      const totalKeys = Object.keys(data.total);
+      data.countLabel = `${all} contributions from ${totalKeys[0]} to ${totalKeys[totalKeys.length - 1]}`;
+      data.totalWeeks = data.contributions.length / 7;
+      if (inputBlockSize) {
+        data.blockSize = inputBlockSize;
+      } else if (windowMode) {
+        data.blockSize = Math.max(10, Math.floor(windowWidth / data.totalWeeks));
+      } else {
+        if (elemSize.width) {
+          data.blockSize = Math.max(10, Math.floor(elemSize.width / data.totalWeeks));
+        }
+      }
+      setActivityData(data);
+    } catch (err) {
+      console.error(`Error fetching activity data: ${err instanceof Error ? err.message : String(err)}`);
+      // Use fallback data if API fails
+      setActivityData(defaultActivityData);
+    } finally {
+      setActivityLoading(false);
+    }
+  };
+
+  // Initial load
+  React.useEffect(() => {
+    async function setup() {
+      await fetchActivityData();
+      await sleep(800);
+      setupRectAnimations();
+      window.addEventListener('resize', handleResize);
+    }
+    if (!fx) {
+      fetchActivityData().catch(() => console.error('Error fetching activity data'));
+    } else {
+      setup().catch(() => console.error('Error fetching activity data'));
+    }
+    if (startImage) {
+      const startImageContainer = document.querySelector('.react-activity-calendar__scroll-container');
+      if (startImageContainer) {
+        const startImageEl = document.createElement('img');
+        startImageEl.src = startImage;
+        startImageEl.alt = 'hbngha';
+        startImageEl.style.position = 'absolute';
+        startImageEl.style.top = '0';
+        startImageEl.style.left = '0';
+        startImageEl.style.marginTop = '25px';
+        startImageEl.style.width = `${(activityData.blockSize || 12) * 7}px`;
+        startImageEl.style.height = `${(activityData.blockSize || 12) * 7}px`;
+        const div = document.createElement('div');
+        div.style.position = 'relative';
+        div.appendChild(startImageEl);
+        startImageContainer.insertBefore(div, startImageContainer.firstChild);
+      }
+    }
+    return () => {
+      if (fx) {
+        var _elementRef$current;
+        window.removeEventListener('resize', handleResize);
+
+        // Clean up any active timeouts
+        const svg = (_elementRef$current = elementRef.current) == null ? void 0 : _elementRef$current.querySelector('svg');
+        if (svg) {
+          const rects = svg.querySelectorAll('rect');
+          rects.forEach(rect => {
+            if (rect.dataset.timeoutId) {
+              clearTimeout(parseInt(rect.dataset.timeoutId));
+            }
+          });
+        }
+      }
+    };
+  }, []);
+  const handleResize = () => {
+    var _elementRef$current2;
+    // Clear all animations first
+    const svg = (_elementRef$current2 = elementRef.current) == null ? void 0 : _elementRef$current2.querySelector('svg');
+    if (svg) {
+      const rects = svg.querySelectorAll('rect');
+      rects.forEach(rect => {
+        rect.classList.remove('rect-animated');
+        if (rect.dataset.timeoutId) {
+          clearTimeout(parseInt(rect.dataset.timeoutId));
+          delete rect.dataset.timeoutId;
+        }
+      });
+    }
+
+    // Recalculate positions
+    setupRectAnimations();
+  };
+  function setupRectAnimations() {
+    var _elementRef$current3;
+    // Get the SVG container
+    const svg = (_elementRef$current3 = elementRef.current) == null ? void 0 : _elementRef$current3.querySelector('svg');
+    if (!svg) return;
+
+    // Calculate center of the SVG
+    const svgRect = svg.getBoundingClientRect();
+    const centerX = svgRect.width / 2;
+    const centerY = svgRect.height / 2;
+
+    // Get all rect elements
+    const rects = svg.querySelectorAll('rect');
+    rects.forEach(rect => {
+      if (fx === 'punch') {
+        var _rect$parentNode;
+        // Calculate the translate value
+        const rectRect = rect.getBoundingClientRect();
+        const rectCenterY = rectRect.top + rectRect.height / 2 - svgRect.top;
+        const rectCenterX = rectRect.left + rectRect.width / 2 - svgRect.left;
+
+        // Calculate distance from center
+        const distanceFromCenterX = svgRect.width / 2 / (rectCenterX - centerX);
+        const distanceFromCenterY = svgRect.height / 2 / (rectCenterY - centerY);
+        const translateFactorX = 6;
+        const translateFactorY = 0.02;
+        const randomX = Math.random() * 10 - 5;
+        const randomY = Math.random() * 10 - 5;
+        const translateX = distanceFromCenterX * translateFactorX + randomX;
+        const translateY = distanceFromCenterY * translateFactorY + randomY;
+        // Set the custom property
+        rect.style.setProperty('--translate-x', `${translateX}px`);
+        rect.style.setProperty('--translate-y', `${translateY - 200}px`);
+        // Remove existing event listeners (if possible)
+        const oldRect = rect.cloneNode(true);
+        (_rect$parentNode = rect.parentNode) == null || _rect$parentNode.replaceChild(oldRect, rect);
+
+        // Add mouseenter event
+        oldRect.addEventListener('mouseenter', () => {
+          // Clear any existing timeout
+          if (oldRect != null && oldRect.dataset.timeoutId) {
+            clearTimeout(parseInt(oldRect == null ? void 0 : oldRect.dataset.timeoutId));
+          }
+          oldRect.style.position = 'relative';
+          // Add the animated class
+          oldRect == null || oldRect.classList.add('rect-animated');
+
+          // Set a timeout to return after random delay
+          const minDelay = 100;
+          const randomDelay = Math.random() * 1000 + minDelay;
+          const timeoutId = setTimeout(() => {
+            oldRect == null || oldRect.classList.remove('rect-animated');
+            oldRect == null || delete oldRect.dataset.timeoutId;
+          }, randomDelay);
+
+          // Store the timeout ID
+          if (oldRect != null && oldRect.dataset) {
+            oldRect.dataset.timeoutId = timeoutId.toString();
+          }
+        });
+      } else {
+        var _rect$parentNode2;
+        const oldRect = rect.cloneNode(true);
+        (_rect$parentNode2 = rect.parentNode) == null || _rect$parentNode2.replaceChild(oldRect, rect);
+        // Add mouseenter event
+        rect.addEventListener('mouseenter', () => {
+          // Clear any existing timeout
+          if (rect != null && rect.dataset.timeoutId) {
+            clearTimeout(parseInt(rect == null ? void 0 : rect.dataset.timeoutId));
+          }
+          rect.style.position = 'relative';
+          // Add the animated class
+          rect == null || rect.classList.add('rect-highlight');
+          // Add the animated class
+          //oldRect?.classList.add('rect-animated');
+
+          // Set a timeout to return after random delay
+          const minDelay = 100;
+          const randomDelay = Math.random() * 1000 + minDelay;
+          const timeoutId = setTimeout(() => {
+            rect == null || rect.classList.remove('rect-highlight');
+            rect == null || delete rect.dataset.timeoutId;
+          }, randomDelay);
+
+          // Store the timeout ID
+          if (rect != null && rect.dataset) {
+            rect.dataset.timeoutId = timeoutId.toString();
+          }
+        });
+      }
+    });
+  }
+  React.useEffect(() => {
+    setActivityTheme(theme.palette.mode === 'dark' ? 'dark' : 'light');
+  }, [theme.palette.mode]);
+  return /*#__PURE__*/_jsx(Box, {
+    ref: elementRef,
+    onMouseEnter: () => setActivityHover(true),
+    onMouseLeave: () => {
+      setActivityHover(false);
+      setActivityLabels(false);
+    },
+    className: `${activityClass} ${activityLoading ? 'loading' : ''}`,
+    sx: {
+      '& .activity > *': {
+        transition: '1s ease-in-out'
+      },
+      position: 'sticky'
+    },
+    children: /*#__PURE__*/_jsx(ActivityCalendar, {
+      data: activityData.contributions,
+      theme: {
+        light: activityTheme === 'light' ? ['hsl(0, 0%, 92%)', theme.palette.primary.dark] : ['hsl(0, 0%, 12%)', theme.palette.primary.light],
+        dark: activityTheme === 'light' ? ['hsl(0, 0%, 92%)', theme.palette.primary.dark] : ['hsl(0, 0%, 12%)', theme.palette.primary.light]
+      },
+      loading: activityLoading,
+      blockMargin: 0.5,
+      blockRadius: 0,
+      blockSize: activityData.blockSize || 12,
+      style: {
+        backgroundColor: theme.palette.background.paper
+      },
+      labels: {
+        totalCount: activityData.countLabel
+      }
+    })
+  });
+}

package/modern/GithubCalendar/index.js

@@ -0,0 +1,2 @@
+import GithubCalendar from './GithubCalendar';
+export default GithubCalendar;

package/modern/GithubEvents/EventTypes/CreateEvent.js

@@ -0,0 +1,72 @@
+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 CreateEvent({
+  event
+}) {
+  var _event$payload, _event$payload2, _event$payload3;
+  if (!(event != null && event.date)) {
+    return null;
+  }
+  const refType = ((_event$payload = event.payload) == null ? void 0 : _event$payload.ref_type) || 'unknown';
+  const refName = ((_event$payload2 = event.payload) == null ? void 0 : _event$payload2.ref) || 'unknown';
+  const repoUrl = `https://github.com/${event.repo}`;
+  const description = (_event$payload3 = event.payload) == null ? void 0 : _event$payload3.description;
+  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: refType,
+        size: "small",
+        color: "success"
+      })]
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      component: "h3",
+      sx: {
+        mb: 1
+      },
+      children: /*#__PURE__*/_jsxs(Link, {
+        href: repoUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          textDecoration: 'none'
+        },
+        children: ["Created ", refType, " ", refName]
+      })
+    }), description && /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      sx: {
+        mb: 2
+      },
+      children: description
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      },
+      children: /*#__PURE__*/_jsxs(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        children: ["in ", event.repo]
+      })
+    })]
+  });
+}