Add starter kit download link to the docs (#5450)

Author: devongovett

packages/dev/docs/pages/react-aria/getting-started.mdx

@@ -12,6 +12,8 @@ export default Layout;
 
 import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 import styles from '@react-spectrum/docs/src/docs.css';
+import {ResourceCard} from '@react-spectrum/docs/src/ResourceCard';
+import {spawnSync} from 'child_process';
 
 ---
 category: Introduction
@@ -218,6 +220,15 @@ This is a quick way to get started, but you can also create your own custom clas
 
 Check out our [styling guide](styling.html) to learn more about styling, states, render props, working with Tailwind CSS, and animation.
 
+## Starter kit
+
+To help kick-start your project, we offer a starter kit that includes example implementations of all React Aria components, along with styles from the docs. It also comes with a pre-configured [Storybook](https://storybook.js.org/) that you can experiment with, or use as a starting point for your own component library.
+
+<ResourceCard
+  type="Storybook"
+  url={`../react-aria-starter.${process.env.GIT_HASH || spawnSync('git', ['rev-parse', '--short', 'HEAD']).stdout}.zip`}
+  style={{marginTop: 36}} />
+
 ## Hooks
 
 React Aria includes both components and hooks depending on the level of customization you need. The components provide a default DOM structure and styling API, and handle all of the glue code necessary to connect the hooks together on your behalf. If you need even more control, you can drop down to the lower-level hook-based API. Check out our [Hooks Introduction](hooks.html) to get started.

packages/dev/docs/src/ResourceCard.js

@@ -19,7 +19,8 @@ export function ResourceCard(props) {
 
   let {
     type,
-    url
+    url,
+    style
   } = props;
 
   // set content for source type
@@ -53,10 +54,23 @@ export function ResourceCard(props) {
       title: 'View ARIA pattern',
       type
     };
+  } else if (type.toLowerCase() === 'storybook') {
+    cardContent = {
+      svg: <svg viewBox="0 0 52 64" style={{background: '#FF4785'}}>
+        <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+          <g transform="translate(1.000000, 1.000000)">
+            <path id="S" fill="#FFF" fillRule="nonzero" d="M29.4029796,23.368648 C29.4029796,24.58142 37.6567008,24.00017 38.7646901,23.1482813 C38.7646901,14.8895929 34.2873503,10.5497821 26.0885852,10.5497821 C17.88982,10.5497821 13.2961856,14.9571143 13.2961856,21.5681161 C13.2961856,33.0822778 28.9959487,33.3026444 28.9959487,39.5830962 C28.9959487,41.3460299 28.1237396,42.3927719 26.2048797,42.3927719 C23.7045471,42.3927719 22.7160434,41.1289316 22.832338,36.8317805 C22.832338,35.8995698 13.2961856,35.6089448 13.0054493,36.8317805 C12.2651161,47.2453073 18.8201763,50.248968 26.3211742,50.248968 C33.5895831,50.248968 39.2880157,46.4144645 39.2880157,39.4729126 C39.2880157,27.132376 23.3556634,27.4629261 23.3556634,21.3477494 C23.3556634,18.8686237 25.2163761,18.5380737 26.3211742,18.5380737 C27.4841196,18.5380737 29.5774214,18.7409467 29.4029796,23.368648 Z" mask="url(#mask-2)" />
+            <path id="bookmark" fill="#FFF" fillRule="nonzero" d="M37.1272753,7.62078766 L37.4276823,0.591583333 L43.4674595,0.218291667 L43.7276576,7.37468316 C43.7367132,7.6313391 43.5338374,7.84666553 43.2745216,7.85562813 C43.1634862,7.85946584 43.0546693,7.82423279 42.9673936,7.75618537 L40.6382617,5.94019678 L37.880626,8.0105767 C37.6738999,8.16578288 37.3791917,8.12573637 37.2223772,7.92113026 C37.1563661,7.83500129 37.1227378,7.72879963 37.1272753,7.62078766 Z" mask="url(#mask-2)" />
+          </g>
+        </g>
+      </svg>,
+      title: 'Download starter',
+      type
+    };
   }
 
   return (
-    <a href={url} rel="noreferrer" target="_blank" title={cardContent.title} className={styles['resourceCard']} data-hover={styles['is-hovered']}>
+    <a href={url} rel="noreferrer" target="_blank" title={cardContent.title} className={styles['resourceCard']} data-hover={styles['is-hovered']} style={style}>
       <div>
         {cardContent.svg}
       </div>

scripts/buildWebsite.js

@@ -17,6 +17,7 @@ const path = require('path');
 const glob = require('fast-glob');
 const semver = require('semver');
 const spawn = require('cross-spawn');
+const spawnSync = require('child_process').spawnSync;
 
 build().catch(err => {
   console.error(err.stack);
@@ -30,6 +31,7 @@ async function build() {
   console.log(`Building into ${dir}...`);
 
   // Generate a package.json containing just what we need to build the website
+  let gitHash = spawnSync('git', ['rev-parse', '--short', 'HEAD']).stdout;
   let pkg = {
     name: 'rsp-website',
     version: '0.0.0',
@@ -67,7 +69,7 @@ async function build() {
     browserslist: packageJSON.browserslist,
     scripts: {
       // Add a public url if provided via arg (for verdaccio prod doc website build since we want a commit hash)
-      build: `DOCS_ENV=production PARCEL_WORKER_BACKEND=process parcel build 'docs/*/*/docs/*.mdx' 'docs/react-aria-components/docs/**/*.mdx' 'packages/dev/docs/pages/**/*.mdx' ${publicUrlFlag}`,
+      build: `DOCS_ENV=production PARCEL_WORKER_BACKEND=process GIT_HASH=${gitHash} parcel build 'docs/*/*/docs/*.mdx' 'docs/react-aria-components/docs/**/*.mdx' 'packages/dev/docs/pages/**/*.mdx' ${publicUrlFlag}`,
       postinstall: 'patch-package'
     },
     '@parcel/transformer-css': packageJSON['@parcel/transformer-css']