Configure Doctocat (#21)

Author: rezrah

.changeset/spicy-rivers-begin.md

@@ -0,0 +1,5 @@
+---
+"@primer/react-brand": patch
+---
+
+Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.

.eslintrc.json

@@ -141,6 +141,7 @@
       },
       "rules": {
         "camelcase": 0,
+        "import/no-unresolved": 0,
         "no-constant-condition": 0,
         "no-console": 0,
         "no-empty-pattern": 0,
@@ -152,6 +153,7 @@
         "react/jsx-key": 0,
         "react/jsx-no-comment-textnodes": 0,
         "import/no-anonymous-default-export": 0,
+        "import/extensions": 0,
         "prettier/prettier": 0,
         "@typescript-eslint/no-unnecessary-condition": 0,
         "@typescript-eslint/no-unused-vars": 0,

.github/workflows/ci.yml

@@ -30,15 +30,15 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Build
+        run: npm run build
+
       - name: Run linters
         run: npm run lint
 
       - name: Check formatting
         run: npm run format
 
-      - name: Build
-        run: npm run build
-
       - name: Verify types
         run: npm run check
 

.github/workflows/deploy_storybook.yml renamed to .github/workflows/deploy_docs.yml

@@ -1,4 +1,4 @@
-name: Deploy Storybook to production
+name: Deploy docs to production
 
 on:
   push:
@@ -34,11 +34,14 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build storybook
-        run: npm run build:storybook
+      - name: Build library
+        run: npm run build
+
+      - name: Build docs
+        run: npm run build:docs
 
       - name: Archive build output
-        run: 'tar --dereference --directory storybook-static/ -cvf artifact.tar .'
+        run: 'tar --dereference --directory docs/public/ -cvf artifact.tar .'
 
       - name: Upload artifact
         uses: actions/upload-artifact@main

.github/workflows/deploy_storybook_preview.yml renamed to .github/workflows/deploy_docs_preview.yml

@@ -1,4 +1,4 @@
-name: Deploy Storybook Preview to Pages
+name: Deploy docs preview to Pages
 
 on:
   pull_request:
@@ -32,11 +32,14 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build storybook
-        run: npm run build:storybook
+      - name: Build library
+        run: npm run build
+
+      - name: Build docs
+        run: npm run build:docs
 
       - name: Archive build output
-        run: 'tar --dereference --directory storybook-static/ -cvf artifact.tar .'
+        run: 'tar --dereference --directory docs/public -cvf artifact.tar .'
 
       - name: Upload artifact
         uses: actions/upload-artifact@main

.storybook/preview.js

@@ -5,8 +5,8 @@ import '../lib/css/gh-variables.color.css'
 export const globalTypes = {
   colorMode: {
     name: 'Color mode',
-    description: 'Color mode (day, night, auto, all)',
-    defaultValue: 'day',
+    description: 'Color mode (light, dark, auto, all)',
+    defaultValue: 'light',
     toolbar: {
       icon: 'globe',
       // array of colorMode items

.vscode/settings.json

@@ -1,4 +1,13 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Primer
+Copyright (c) 2022 GitHub Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,3 +1,40 @@
-# @primer/react-brand
+<p align="center">
+  <img width="300px" src="https://user-images.githubusercontent.com/4608155/127241386-f11da52d-00d9-4366-b01c-6f4c1ebcf7f2.png">
+</p>
 
-TODO
+<h1 align="center">Primer React Brand</h1>
+
+<p align="center">A React implementation of GitHub's Brand Design System</p>
+
+<p align="center">
+  <a aria-label="npm package" href="https://www.npmjs.com/package/@primer/react-brand">
+    <img alt="" src="https://img.shields.io/npm/v/@primer/react-brand.svg">
+  </a>
+  <a aria-label="build status" href="https://github.com/primer/react-brand/actions/workflows/ci.yml">
+    <img alt="" src="https://github.com/primer/react-brand/actions/workflows/ci.yml/badge.svg">
+  </a>
+  <img src="https://img.shields.io/badge/status-experimental-red" alt="status: experimental">
+  <a aria-label="license" href="https://github.com/primer/react-brand/blob/main/LICENSE">
+    <img src="https://img.shields.io/github/license/primer/react-brand.svg" alt="">
+  </a>
+</p>
+
+<p align="center">
+    <a href="https://primer.github.io/react-brand/" target="_blank">https://primer.github.io/react-brand</a>
+</p>
+
+## Install
+
+This repository is distributed on [npm]. After [installing npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), you can install `@primer/react-brand` as a dependency of your project:
+
+```sh
+npm install @primer/react-brand
+```
+
+## Usage
+
+See our [getting started guide](https://primer.github.io/react-brand/getting-started) for more information.
+
+## License
+
+[MIT](./LICENSE) &copy; [GitHub](https://github.com/)

docs/.github/dependabot.yml

@@ -0,0 +1,13 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"
+    allow:
+      - dependency-name: "@primer/gatsby-theme-doctocat"