Generate a starter storybook from the docs (#5440)

Author: devongovett

.circleci/comment.js

@@ -57,7 +57,8 @@ async function run() {
       [Publish stats](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/publish.json)
       [Size diff since last release](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/size-diff.txt)
       [Docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/docs/index.html)
-      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)`
+      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
+      [RAC Starter Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/starter-storybook/index.html)`
         });
       }
     } catch (error) {

.eslintignore

@@ -10,3 +10,4 @@ packages/react-aria-components/dist
 packages/react-stately/dist
 packages/dev/storybook-builder-parcel/preview.js
 examples/**
+starters/**

Makefile

@@ -110,9 +110,16 @@ website:
 	yarn build:docs --public-url /reactspectrum/$$(git rev-parse HEAD)/docs --dist-dir dist/$$(git rev-parse HEAD)/docs
 
 website-production:
-	node scripts/buildWebsite.js
+	node scripts/buildWebsite.js $$PUBLIC_URL
 	cp packages/dev/docs/pages/robots.txt dist/production/docs/robots.txt
+	$(MAKE) starter
+	cd starters/docs && zip -r react-aria-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*"
+	mv starters/docs/react-aria-starter.zip dist/production/docs/react-aria-starter.$$(git rev-parse --short HEAD).zip
 
 check-examples:
 	node scripts/extractExamples.mjs
 	yarn tsc --project dist/docs-examples/tsconfig.json
+
+starter:
+	node scripts/extractStarter.mjs
+	cd starters/docs && yarn && yarn tsc

packages/@react-aria/example-theme/package.json

@@ -4,11 +4,11 @@
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "source": "src/index.css",
-  "dist": "dist/index.css",
+  "out": "dist/index.css",
   "main": "dist/index.css",
   "targets": {
     "main": false,
-    "dist": {
+    "out": {
       "optimize": false
     }
   },

packages/dev/parcel-transformer-mdx-docs/processCSS.js

@@ -38,6 +38,7 @@ module.exports = async function processCSS(cssCode, asset, options) {
         if (path.extname(specifier) === '') {
           // Assume this is a package.
           specifier += '/src/index.css';
+          return require.resolve(specifier);
         }
 
         let baseDir = process.env.DOCS_ENV === 'production' ? 'docs' : 'packages';

packages/react-aria-components/docs/Breadcrumbs.mdx

@@ -65,6 +65,7 @@ import {Breadcrumbs, Breadcrumb, Link} from 'react-aria-components';
   margin: 0;
   padding: 0;
   font-size: 18px;
+  color: var(--text-color);
 
   .react-aria-Breadcrumb:not(:last-child)::after {
     content: '›';

packages/react-aria-components/docs/Checkbox.mdx

@@ -68,6 +68,7 @@ import {Checkbox} from 'react-aria-components';
   align-items: center;
   gap: 0.571rem;
   font-size: 1.143rem;
+  color: var(--text-color);
   forced-color-adjust: none;
 
   .checkbox {

packages/react-aria-components/docs/CheckboxGroup.mdx

@@ -72,17 +72,19 @@ import {CheckboxGroup, Checkbox, Label} from 'react-aria-components';
 <details>
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
 ```css hidden
-@import "@react-aria/example-theme";
 @import './Checkbox.mdx' layer(checkbox);
 @import './Form.mdx' layer(form);
 @import './Button.mdx' layer(button);
 ```
 
 ```css
+@import "@react-aria/example-theme";
+
 .react-aria-CheckboxGroup {
   display: flex;
   flex-direction: column;
   gap: 0.571rem;
+  color: var(--text-color);
 }
 ```
 
@@ -294,9 +296,11 @@ import {Form, FieldError, Button} from 'react-aria-components';
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
 
 ```css
-.react-aria-FieldError {
-  font-size: 12px;
-  color: var(--invalid-color);
+.react-aria-CheckboxGroup {
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
 }
 ```
 

packages/react-aria-components/docs/ComboBox.mdx

@@ -83,9 +83,13 @@ import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem} from 'rea
 @import "@react-aria/example-theme";
 
 .react-aria-ComboBox {
+  color: var(--text-color);
+
   .react-aria-Input {
     margin: 0;
     font-size: 1.072rem;
+    background: var(--field-background);
+    color: var(--field-text-color);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     padding: 0.286rem 2rem 0.286rem 0.571rem;
@@ -109,11 +113,16 @@ import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem} from 'rea
     height: 1.429rem;
     padding: 0;
     font-size: 0.857rem;
+
+    &[data-pressed] {
+      box-shadow: none;
+      background: var(--highlight-background);
+    }
   }
 }
 
 .react-aria-Popover[data-trigger=ComboBox] {
-    width: var(--trigger-width);
+  width: var(--trigger-width);
 
   .react-aria-ListBox {
     display: block;

packages/react-aria-components/docs/DateField.mdx

@@ -65,6 +65,10 @@ import {DateField, Label, DateInput, DateSegment} from 'react-aria-components';
 ```css
 @import "@react-aria/example-theme";
 
+.react-aria-DateField {
+  color: var(--text-color);
+}
+
 .react-aria-DateInput {
   display: flex;
   padding: 4px;
@@ -415,9 +419,11 @@ import {Form, FieldError, Button} from 'react-aria-components';
   }
 }
 
-.react-aria-FieldError {
-  font-size: 12px;
-  color: var(--invalid-color);
+.react-aria-DateField {
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
 }
 ```