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);
+  }
 }
 ```
 

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

@@ -77,10 +77,9 @@ import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, Calen
 <details>
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
 ```css hidden
-/* We only import styles up to one page away, we don't follow those pages dependencies, so
-* import everything and in the correct order of dependency so that layers don't overwrite each other. */
 @import './Button.mdx' layer(button);
 @import './Popover.mdx' layer(popover);
+@import './Dialog.mdx' layer(dialog);
 @import './DateField.mdx' layer(datefield);
 @import './Calendar.mdx' layer(calendar);
 @import './Form.mdx' layer(form);
@@ -90,6 +89,8 @@ import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, Calen
 @import "@react-aria/example-theme";
 
 .react-aria-DatePicker {
+  color: var(--text-color);
+
   .react-aria-Group {
     display: flex;
     width: fit-content;
@@ -110,6 +111,11 @@ import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, Calen
     font-size: 0.857rem;
     box-sizing: content-box;
 
+    &[data-pressed] {
+      box-shadow: none;
+      background: var(--highlight-background);
+    }
+
     &[data-focus-visible] {
       outline: 2px solid var(--focus-ring-color);
       outline-offset: 2px;
@@ -123,7 +129,6 @@ import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, Calen
 
 .react-aria-Popover[data-trigger=DatePicker] {
   max-width: unset;
-  padding: 1.25rem;
 }
 ```
 
@@ -529,11 +534,11 @@ import {Form, FieldError} from 'react-aria-components';
       text-align: end;
     }
   }
-}
 
-.react-aria-FieldError {
-  font-size: 12px;
-  color: var(--invalid-color);
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
 }
   ```
 

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

@@ -80,10 +80,9 @@ import {DateRangePicker, Label, Group, Popover, Dialog, RangeCalendar, CalendarG
 <details>
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
 ```css hidden
-/* We only import styles up to one page away, we don't follow those pages dependencies, so
-* import everything and in the correct order of dependency so that layers don't overwrite each other. */
 @import './Button.mdx' layer(button);
 @import './Popover.mdx' layer(popover);
+@import './Dialog.mdx' layer(dialog);
 @import './DateField.mdx' layer(datefield);
 @import './RangeCalendar.mdx' layer(rangecalendar);
 @import './Form.mdx' layer(form);
@@ -110,6 +109,11 @@ import {DateRangePicker, Label, Group, Popover, Dialog, RangeCalendar, CalendarG
     background: var(--field-background);
     white-space: nowrap;
 
+    &[data-pressed] {
+      box-shadow: none;
+      background: var(--highlight-background);
+    }
+
     &[data-focus-within] {
       outline: 2px solid var(--focus-ring-color);
       outline-offset: -1px;
@@ -159,7 +163,6 @@ import {DateRangePicker, Label, Group, Popover, Dialog, RangeCalendar, CalendarG
 
 .react-aria-Popover[data-trigger=DateRangePicker] {
   max-width: unset;
-  padding: 1.25rem;
 }
 ```
 

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

@@ -60,7 +60,7 @@ import {DialogTrigger, Modal, Dialog, Button, Heading, TextField, Label, Input}
             <Label>Last Name</Label>
             <Input />
           </TextField>
-          <Button onPress={close}>
+          <Button onPress={close} style={{marginTop: 8}}>
             Submit
           </Button>
         </form>
@@ -85,15 +85,10 @@ import {DialogTrigger, Modal, Dialog, Button, Heading, TextField, Label, Input}
   outline: none;
   padding: 30px;
 
-  .react-aria-Heading {
+  .react-aria-Heading[slot=title] {
     line-height: 1em;
     margin-top: 0;
   }
-
-  .react-aria-Button {
-    margin-top: 20px;
-    margin-right: 8px;
-  }
 }
 ```
 
@@ -169,7 +164,7 @@ Alert dialogs are a special type of dialog meant to present a prompt that the us
         <>
           <Heading slot="title">Delete file</Heading>
           <p>This will permanently delete the selected file. Continue?</p>
-          <div>
+          <div style={{display: 'flex', gap: 8}}>
             <Button onPress={close}>Cancel</Button>
             <Button onPress={close}>Delete</Button>
           </div>

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

@@ -51,22 +51,22 @@ import {GridList, GridListItem, Button} from 'react-aria-components';
 
 <GridList aria-label="Favorite pokemon" selectionMode="multiple">
   <GridListItem textValue="Charizard">
-    <MyCheckbox />
+    <MyCheckbox slot="selection" />
     Charizard
     <Button aria-label="Info">ⓘ</Button>
   </GridListItem>
   <GridListItem textValue="Blastoise">
-    <MyCheckbox />
+    <MyCheckbox slot="selection" />
     Blastoise
     <Button aria-label="Info">ⓘ</Button>
   </GridListItem>
   <GridListItem textValue="Venusaur">
-    <MyCheckbox />
+    <MyCheckbox slot="selection" />
     Venusaur
     <Button aria-label="Info">ⓘ</Button>
   </GridListItem>
   <GridListItem textValue="Pikachu">
-    <MyCheckbox />
+    <MyCheckbox slot="selection" />
     Pikachu
     <Button aria-label="Info">ⓘ</Button>
   </GridListItem>
@@ -298,7 +298,7 @@ If you will use a GridList in multiple places in your app, you can wrap all of t
 This example wraps `GridList` and all of its children together into a single component which accepts a `label` prop and `children`, which are passed through to the right places. The `GridListItem` component is also wrapped to include a custom [checkbox](Checkbox.html) component automatically when the item is multi-selectable, and a drag handle when [drag and drop](#drag-and-drop) is enabled.
 
 ```tsx example export=true
-import type {GridListProps, GridListItemProps} from 'react-aria-components';
+import type {GridListProps, GridListItemProps, CheckboxProps} from 'react-aria-components';
 import {Button, Checkbox} from 'react-aria-components';
 
 function MyGridList<T extends object>({children, ...props}: GridListProps<T>) {
@@ -316,17 +316,17 @@ function MyItem({children, ...props}: GridListItemProps) {
       {({selectionMode, selectionBehavior, allowsDragging}) => <>
         {/* Add elements for drag and drop and selection. */}
         {allowsDragging && <Button slot="drag">≡</Button>}
-        {selectionMode === 'multiple' && selectionBehavior === 'toggle' && <MyCheckbox />}
+        {selectionMode === 'multiple' && selectionBehavior === 'toggle' && <MyCheckbox slot="selection" />}
         {children}
       </>}
     </GridListItem>
   );
 }
 
-function MyCheckbox() {
+function MyCheckbox({children, ...props}: CheckboxProps) {
   return (
-    <Checkbox slot="selection">
-      {({isIndeterminate}) => (
+    <Checkbox {...props}>
+      {({isIndeterminate}) => <>
         <div className="checkbox">
           <svg viewBox="0 0 18 18" aria-hidden="true">
             {isIndeterminate
@@ -335,7 +335,8 @@ function MyCheckbox() {
             }
           </svg>
         </div>
-      )}
+        {children}
+      </>}
     </Checkbox>
   );
 }