docs(contributions): add contributors script to the build process

package.json

@@ -42,7 +42,6 @@
     "commitlint": "commitlint --edit"
   },
   "devDependencies": {
-    "@types/node": "20.14.9",
     "@biomejs/biome": "1.8.2",
     "@chromatic-com/storybook": "^1",
     "@commitlint/cli": "^9.1.2",
@@ -60,6 +59,7 @@
     "@storybook/react-webpack5": "^8.0.9",
     "@storybook/test-runner": "^0.17.0",
     "@storybook/theming": "^8.0.9",
+    "@types/node": "20.14.9",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@vitejs/plugin-react": "4.1.0",
@@ -102,6 +102,7 @@
     }
   },
   "dependencies": {
-    "@storybook/test": "^8.0.9"
+    "@storybook/test": "^8.0.9",
+    "dotenv": "^16.4.5"
   }
 }

packages/docs/components/contributions/contributor-stats.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import styles from './contributions.module.css'
 import { Bleed, Button, Stack } from '@vtex/shoreline'
+import type { Contributor } from '../../__contributions__/stats'
 
 export function ContributorStats(props: ContributorStatsProps) {
   const {
@@ -52,17 +53,5 @@ const statsLabels = {
   reviews: 'PRs reviewed',
 }
 interface ContributorStatsProps {
-  contributor: {
-    username: string
-    image: string
-    stats: {
-      issues: number
-      pulls: number
-      reviews: number
-      comments: number
-      merged: number
-      assigns: number
-      rate: number
-    }
-  }
+  contributor: Contributor
 }

packages/docs/components/contributions/index.tsx

@@ -1,3 +1,3 @@
 export * from './contributors-list'
 export * from './contributor-stats'
-export * from './issues-on-fire'
+export * from './issues-list'

packages/docs/components/contributions/issues-on-fire.tsx → packages/docs/components/contributions/issues-list.tsx

@@ -4,7 +4,7 @@ import { LinkBox, Stack } from '@vtex/shoreline'
 import { IconOpenIssue } from './icon-open-issue'
 import { IconChatCircle } from './icon-chat-circle'
 
-export function IssuesOnFire() {
+export function IssuesList() {
   return (
     <div className={styles.issuesContainer}>
       {issuesOnFire.map((issue) => {

packages/docs/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "npm run gen:examples && npm run gen:props && next dev",
-    "build-docs": "npm --prefix ../../ run build && npm run gen:examples && npm run gen:props && next build",
+    "build-docs": "npm --prefix ../../ run build && npm run gen:contributors && npm run gen:examples && npm run gen:props && next build",
     "start": "next start",
     "gen:examples": "node ./scripts/build-examples.mjs",
     "gen:props": "node ./scripts/build-props.mjs",
@@ -17,7 +17,6 @@
   "dependencies": {
     "@next/third-parties": "^14.1.0",
     "@octokit/graphql": "^8.1.1",
-    "@octokit/rest": "^21.0.0",
     "@sentry/nextjs": "^7.103.0",
     "@tanstack/react-table": "8.17.3",
     "@vtex/shoreline": "workspace:*",

packages/docs/pages/guides/activity.mdx

@@ -16,4 +16,4 @@ Thank you for your participation!
 
 <br />
 
-<IssuesOnFire />
+<IssuesList />

packages/docs/scripts/build-contributors.mjs

@@ -1,13 +1,17 @@
+import { config } from 'dotenv'
+
 import { graphql } from '@octokit/graphql'
 import path from 'node:path'
 import fse from 'fs-extra'
 import { format } from 'prettier'
 
+config()
+
 const statsOutputDirectory = `${path.dirname('')}/__contributions__`
 const contributorsOutputDirectory = `${path.dirname('')}/pages/guides/contributor`
 const VTEX_ORG = 'vtex'
 const REPO_NAME = 'shoreline'
-const token = process.env.GITHUB_TOKEN
+const token = process.env.VTEX_GITHUB_BOT_TOKEN
 const startDate = new Date('2024-01-01T00:00:00Z').toISOString()
 
 const graphqlWithAuth = graphql.defaults({
@@ -301,6 +305,7 @@ function getIssuesOnFire() {
 async function main() {
   const stats = contributors.map((contributor) => {
     const stats = getContributorStats(contributor.username)
+
     return {
       ...contributor,
       stats,
@@ -310,7 +315,21 @@ async function main() {
   stats.sort((a, b) => b.stats.rate - a.stats.rate)
 
   const code = `
-export const contributors = ${JSON.stringify(stats)}
+export interface Contributor {
+  username: string
+  image: string
+  stats: {
+    issues: number
+    pulls: number
+    reviews: number
+    comments: number
+    merged: number
+    assigns: number
+    rate: number
+  }
+}
+
+export const contributors: Contributor[] = ${JSON.stringify(stats)}
 
 export function getContributor(username: string) {
   return contributors.find((contributor) => contributor.username === username)
@@ -325,7 +344,8 @@ const maintainers = [
 
 export function getContributors() {
   return contributors.filter(
-    (contributor) => !maintainers.includes(contributor.username)
+    (contributor) =>
+      !maintainers.includes(contributor.username) && contributor.stats.rate > 0
   )
 }
   `
@@ -347,7 +367,23 @@ export function getContributors() {
   const issuesOnFire = getIssuesOnFire()
 
   const issuesCode = `
-export const issuesOnFire = ${JSON.stringify(issuesOnFire)}
+interface Author {
+  login: string
+  avatarUrl: string
+}
+
+export interface Issue {
+  assignees: { nodes: Omit<Author, 'avatarUrl'>[] }
+  url: string
+  number: number
+  title: string
+  createdAt: string
+  author: Author
+  state: string
+  comments: { nodes: { author: Author }[] }
+}
+
+export const issuesOnFire: Issue[] = ${JSON.stringify(issuesOnFire)}
   `
 
   const formattedIssuesCode = await format(issuesCode, {
@@ -411,9 +447,3 @@ import { getContributor } from '../../../__contributions__/stats';
 }
 
 main()
-
-/**
- * @TODO
- * - Add possibility to customize range of dates
- * - Add this script to the build process
- */

packages/docs/theme.config.tsx

@@ -19,7 +19,7 @@ import { ImgCard, ImgCardGrid } from './components/img-card'
 import {
   ContributorList,
   ContributorStats,
-  IssuesOnFire,
+  IssuesList,
 } from './components/contributions'
 
 const docsTitle = 'Shoreline'
@@ -99,7 +99,7 @@ const config: DocsThemeConfig = {
     ImgCardGrid: ImgCardGrid as React.FC,
     ContributorList: ContributorList as React.FC,
     ContributorStats: ContributorStats as React.FC,
-    IssuesOnFire: IssuesOnFire as React.FC,
+    IssuesList: IssuesList as React.FC,
   },
   sidebar: {
     defaultMenuCollapseLevel: 1,