@primer/components 33.0.0-rc.9f3670b7 → 33.0.0-rc.cface7dc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "33.0.0-rc.9f3670b7",
+  "version": "33.0.0-rc.cface7dc",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -91,6 +91,7 @@
     "@types/jest-axe": "3.5.3",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
+    "@types/node": "16.11.11",
     "@typescript-eslint/eslint-plugin": "4.31.2",
     "@typescript-eslint/parser": "4.26.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
@@ -116,6 +117,7 @@
     "eslint-plugin-primer-react": "0.7.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
+    "front-matter": "4.0.2",
     "jest": "27.0.4",
     "jest-axe": "5.0.1",
     "jest-styled-components": "6.3.4",
@@ -137,7 +139,7 @@
     "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
     "ts-toolbelt": "9.6.0",
-    "typescript": "4.2.2"
+    "typescript": "4.4.4"
   },
   "peerDependencies": {
     "react": "^17.0.0",

package/script/component-status-project/build.ts

@@ -0,0 +1,100 @@
+import fs from 'fs'
+import path from 'path'
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const fm = require('front-matter') // FIXME after this bugfix is merged https://github.com/jxson/front-matter/pull/77
+
+const sourceDirectory = path.resolve(__dirname, '../../docs/content/')
+const outputDir = path.resolve(__dirname, '../../dist/')
+
+type ComponentStatus = {
+  [component: string]: string
+}
+
+/**
+ * Extracts the component status for each file in the given directory.
+ *
+ * @param filenames Array of filenames to read front-matter from
+ * @param dir Absolute path to directory containing files
+ * @returns A promise that resolves to an array containing outcome of file front-matter extraction
+ */
+function getComponentStatuses(filenames: string[], dir: string) {
+  const promises: Promise<ComponentStatus | null>[] = []
+
+  const handleCallback = (
+    filename: string,
+    resolve: (value: ComponentStatus | null) => void,
+    reject: (value: unknown) => void
+  ) => {
+    fs.readFile(path.resolve(dir, filename), 'utf-8', (err, content) => {
+      if (err) return reject(err)
+
+      if (fm.test(content)) {
+        const {
+          attributes: {title, status}
+        } = fm(content)
+
+        if (status) {
+          return resolve({[title]: status})
+        }
+      }
+
+      resolve(null)
+    })
+  }
+
+  for (const filename of filenames) {
+    const promise: Promise<ComponentStatus | null> = new Promise((resolve, reject) => {
+      return handleCallback(filename, resolve, reject)
+    })
+    promises.push(promise)
+  }
+
+  return Promise.all(promises)
+}
+
+/**
+ * Orchestrates the process of reading component status for each file in the given directory.
+ *
+ * @param dir Directory to source files where status will be extracted from
+ * @returns A promise that resolves to an object containing component statuses
+ */
+async function readFiles(dir: string) {
+  try {
+    const dirContents = fs.readdirSync(dir, {withFileTypes: true})
+    const filenames = dirContents.filter(dirent => dirent.isFile()).map(dirent => dirent.name)
+    const componentStatuses = await getComponentStatuses(filenames, dir)
+
+    return componentStatuses
+      .filter(Boolean)
+      .reverse()
+      .reduce(
+        (acc, file) => ({
+          ...acc,
+          ...file
+        }),
+        {}
+      )
+  } catch (err) {
+    throw new Error(`error reading files: ${err}`)
+  }
+}
+
+/**
+ * Writes the component status to the given file.
+ */
+async function build() {
+  try {
+    const componentStatuses = await readFiles(sourceDirectory)
+
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir)
+    }
+
+    fs.writeFileSync(`${outputDir}/component-status.json`, JSON.stringify(componentStatuses))
+  } catch (error) {
+    throw new Error(`error building component status object: ${error}`)
+  }
+}
+
+build()

package/script/component-status-project/deploy.rb

@@ -0,0 +1,142 @@
+#!/usr/bin/env ruby
+# Adapted from https://github.com/primer/view_components/blob/main/script/update-statuses-project.rb
+# Usage: script/update-statuses-project
+# frozen_string_literal: true
+
+require "graphql/client"
+require "graphql/client/http"
+
+statuses = File.read(File.join(File.dirname(__FILE__), "../../dist/component-status.json"))
+statuses_json = JSON.parse(statuses)
+
+class QueryExecutionError < StandardError; end
+NOTE_SEPARATOR = " --- "
+
+module Github
+  GITHUB_ACCESS_TOKEN = ENV.fetch("GITHUB_TOKEN")
+  URL = "https://api.github.com/graphql"
+  HttpAdapter = GraphQL::Client::HTTP.new(URL) do
+    def headers(_)
+      {
+        "Authorization" => "Bearer #{GITHUB_ACCESS_TOKEN}",
+        "User-Agent" => "Ruby"
+      }
+    end
+  end
+  Schema = GraphQL::Client.load_schema(HttpAdapter)
+  Client = GraphQL::Client.new(schema: Schema, execute: HttpAdapter)
+end
+
+# Project is a GraphQL wrapper for interacting with GitHub projects
+class Project
+  ProjectQuery = Github::Client.parse <<-'GRAPHQL'
+    query {
+      repository(owner: "primer", name: "react") {
+        project(number: 5) {
+          columns(first: 100) {
+            nodes {
+              name
+              id
+              databaseId
+              cards {
+                nodes {
+                  id
+                  databaseId
+                  note
+                  column {
+                    name
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  GRAPHQL
+
+  CreateCard = Github::Client.parse <<-'GRAPHQL'
+    mutation($note: String!, $projectColumnId: ID!) {
+      addProjectCard(input:{note: $note, projectColumnId: $projectColumnId, clientMutationId: "prc-actions"}) {
+        __typename
+      }
+    }
+  GRAPHQL
+
+  MoveCard = Github::Client.parse <<-'GRAPHQL'
+    mutation($cardId: ID!, $columnId: ID!) {
+      moveProjectCard(input:{cardId: $cardId, columnId: $columnId, clientMutationId: "prc-actions"}) {
+        __typename
+      }
+    }
+  GRAPHQL
+
+  def self.create_card(note:, column_id:)
+    response = Github::Client.query(CreateCard, variables: { note: note, projectColumnId: column_id })
+    return unless response.errors.any?
+
+    raise QueryExecutionError, response.errors[:data].join(", ")
+  end
+
+  def self.move_card(card_id:, column_id:)
+    response = Github::Client.query(MoveCard, variables: { cardId: card_id, columnId: column_id })
+    return unless response.errors.any?
+
+    raise(QueryExecutionError, response.errors[:data].join(", "))
+  end
+
+  def self.fetch_columns
+    response = Github::Client.query(ProjectQuery)
+    return response.data.repository.project.columns unless response.errors.any?
+
+    raise(QueryExecutionError, response.errors[:data].join(", "))
+  end
+end
+
+columns = Project.fetch_columns.nodes
+
+@column_mapping = {}
+columns.each do |column|
+  @column_mapping[column.name.downcase] = column.id
+end
+
+@cards = columns.map(&:cards).map(&:nodes).flatten
+
+def get_card(name_prefix:)
+  @cards.find { |card| card.note.start_with?(name_prefix) }
+end
+
+def on_correct_column?(card_id:, status:)
+  card = @cards.find { |c| c.id == card_id }
+  card.column.name.casecmp(status).zero?
+end
+
+def move_card(card_id:, status:)
+  column_id = @column_mapping[status.downcase]
+
+  puts "move card with #{card_id} to #{status} on column #{column_id}"
+
+  Project.move_card(card_id: card_id, column_id: column_id)
+end
+
+def create_card(component_name:, status:)
+  column_id = @column_mapping[status.downcase]
+
+  puts "create card with #{component_name} on #{status} on column #{column_id}"
+
+  Project.create_card(note: component_name, column_id: column_id)
+end
+
+statuses_json.each do |component_name, component_status|
+  card = get_card(name_prefix: component_name)
+
+  if card
+    if on_correct_column?(card_id: card.id, status: component_status)
+      puts "#{card.id} is on the right column. noop"
+    else
+      move_card(card_id: card.id, status: component_status)
+    end
+  else
+    create_card(component_name: component_name, status: component_status)
+  end
+end