@stoked-ui/github 0.0.0-a.0

package/GithubCalendar/GithubCalendar.d.ts

@@ -0,0 +1,7 @@
+export default function GithubCalendar({ windowMode, containerMode, blockSize: inputBlockSize, fx, startImage }: {
+    windowMode?: boolean;
+    containerMode?: boolean;
+    blockSize?: number;
+    fx?: 'punch' | 'highlight';
+    startImage?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/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/GithubCalendar/index.d.ts

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

package/GithubCalendar/index.js

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

package/GithubCalendar/package.json

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

package/GithubEvents/EventTypes/CreateEvent.d.ts

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

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

package/GithubEvents/EventTypes/DeleteEvent.d.ts

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

package/GithubEvents/EventTypes/DeleteEvent.js

@@ -0,0 +1,65 @@
+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 DeleteEvent({
+  event
+}) {
+  var _event$payload, _event$payload2;
+  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}`;
+  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: "error"
+      })]
+    }), /*#__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: ["Deleted ", refType, " ", refName]
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      },
+      children: /*#__PURE__*/_jsxs(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        children: ["from ", event.repo]
+      })
+    })]
+  });
+}

package/GithubEvents/EventTypes/ForkEvent.d.ts

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

package/GithubEvents/EventTypes/ForkEvent.js

@@ -0,0 +1,77 @@
+var _Chip;
+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 ForkEvent({
+  event
+}) {
+  var _event$payload;
+  if (!(event != null && event.date)) {
+    return null;
+  }
+  const forkee = (_event$payload = event.payload) == null ? void 0 : _event$payload.forkee;
+  if (!forkee) {
+    return null;
+  }
+  const forkUrl = forkee.html_url;
+  const forkName = forkee.full_name;
+  const originalRepo = event.repo;
+  const description = forkee.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
+      }), _Chip || (_Chip = /*#__PURE__*/_jsx(Chip, {
+        label: "fork",
+        size: "small",
+        color: "info"
+      }))]
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      component: "h3",
+      sx: {
+        mb: 1
+      },
+      children: /*#__PURE__*/_jsx(Link, {
+        href: forkUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          textDecoration: 'none'
+        },
+        children: forkName
+      })
+    }), 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: ["Forked from ", originalRepo]
+      })
+    })]
+  });
+}

package/GithubEvents/EventTypes/IssueCommentEvent.d.ts

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