diff --git a/.circleci/comment.js b/.circleci/comment.js index c2af610eb7d..fc65cd0eec8 100644 --- a/.circleci/comment.js +++ b/.circleci/comment.js @@ -80,7 +80,8 @@ async function run() { * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html) * [View the S2 storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html) - * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)` + * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html) + * [View the S2 docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/s2-docs/index.html)` }); } catch (err) { console.error(err) diff --git a/.circleci/config.yml b/.circleci/config.yml index 95442fd2782..479f8245e67 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -470,6 +470,21 @@ jobs: paths: - '*/docs/' + s2-docs: + executor: rsp-xlarge + steps: + - restore_cache: + key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }} + + - run: + name: build s2 docs + command: make s2-docs + + - persist_to_workspace: + root: dist + paths: + - '*/s2-docs/' + verdaccio: executor: rsp-xlarge steps: @@ -869,6 +884,9 @@ workflows: - docs: requires: - install + - s2-docs: + requires: + - install - verdaccio: filters: branches: @@ -923,6 +941,7 @@ workflows: - storybook - storybook-s2 - docs + - s2-docs - deploy-verdaccio: requires: - v-docs diff --git a/.yarn/patches/@parcel-rsc-npm-2.14.4-224743f6b2.patch b/.yarn/patches/@parcel-rsc-npm-2.14.4-224743f6b2.patch new file mode 100644 index 00000000000..83996eff26b --- /dev/null +++ b/.yarn/patches/@parcel-rsc-npm-2.14.4-224743f6b2.patch @@ -0,0 +1,11 @@ +diff --git a/lib/client.d.ts b/lib/client.d.ts +index abfc3ae8bc4cee00f322501e209bc8a63ee3a1d1..cfe5e732732d857804b87ec2534e90aea6749330 100644 +--- a/lib/client.d.ts ++++ b/lib/client.d.ts +@@ -1,6 +1,5 @@ + /* @jsxRuntime automatic */ import { ReactNode } from 'react'; + import { HydrationOptions } from 'react-dom/client'; +-type CallServerCallback = (id: string, args: any[]) => Promise; + export declare function setServerCallback(cb: CallServerCallback): void; + export type CallServerCallback = (id: string, args: any[]) => Promise; + export interface HydrateOptions extends HydrationOptions { diff --git a/Makefile b/Makefile index 9bb9485d250..29a1526f8d5 100644 --- a/Makefile +++ b/Makefile @@ -110,7 +110,7 @@ website-production: cp packages/dev/docs/pages/robots.txt dist/production/docs/robots.txt $(MAKE) starter-zip $(MAKE) tailwind-starter - $(MAKE) s2-docs + $(MAKE) s2-storybook-docs check-examples: node scripts/extractExamples.mjs @@ -135,9 +135,15 @@ tailwind-starter: cd starters/tailwind && yarn build-storybook mv starters/tailwind/storybook-static dist/production/docs/react-aria-tailwind-starter -s2-docs: - yarn build:s2-docs -o dist/production/docs/s2 +s2-storybook-docs: + yarn build:s2-storybook-docs -o dist/production/docs/s2 s2-api-diff: node scripts/buildBranchAPI.js node scripts/api-diff.js --skip-same --skip-style-props + +s2-docs: + node scripts/extractStarter.mjs + yarn build:s2-docs --public-url /reactspectrum/$$(git rev-parse HEAD)/s2-docs + mkdir -p dist/$$(git rev-parse HEAD) + mv packages/dev/s2-docs/dist dist/$$(git rev-parse HEAD)/s2-docs diff --git a/eslint.config.mjs b/eslint.config.mjs index 7a94bf740f3..5aafcdcbdae 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -492,7 +492,7 @@ export default [{ }], }, }, { - files: ["packages/@react-spectrum/s2/**"], + files: ["packages/@react-spectrum/s2/**", "packages/dev/s2-docs/**"], rules: { "react/react-in-jsx-scope": OFF, diff --git a/package.json b/package.json index 2ca9dad9daf..8f85cb26ae4 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,11 @@ "build:chromatic-fc": "CHROMATIC=1 storybook build -c .chromatic-fc -o dist/$(git rev-parse HEAD)/chromatic-fc", "start:s2": "NODE_ENV=storybook storybook dev -p 6006 --ci -c '.storybook-s2'", "build:storybook-s2": "NODE_ENV=storybook storybook build -c .storybook-s2 -o dist/$(git rev-parse HEAD)/storybook-s2", - "build:s2-docs": "NODE_ENV=storybook storybook build -c .storybook-s2 --docs", + "build:s2-storybook-docs": "NODE_ENV=storybook storybook build -c .storybook-s2 --docs", "start:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'", "build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'", + "start:s2-docs": "yarn workspace @react-spectrum/s2-docs start", + "build:s2-docs": "yarn workspace @react-spectrum/s2-docs build", "test": "cross-env STRICT_MODE=1 yarn jest", "test:lint": "node packages/**/*.test-lint.js", "test-loose": "cross-env VIRT_ON=1 yarn jest", @@ -85,19 +87,21 @@ "@faker-js/faker": "^8.4.1", "@jdb8/eslint-plugin-monorepo": "^1.0.1", "@octokit/rest": "*", - "@parcel/bundler-library": "^2.14.0", - "@parcel/config-default": "^2.14.0", - "@parcel/config-storybook": "0.0.2", - "@parcel/core": "^2.14.0", - "@parcel/optimizer-data-url": "^2.14.0", - "@parcel/optimizer-terser": "^2.14.0", - "@parcel/packager-ts": "^2.14.0", - "@parcel/reporter-cli": "^2.14.0", - "@parcel/resolver-glob": "^2.14.0", - "@parcel/transformer-inline": "^2.14.0", - "@parcel/transformer-inline-string": "^2.14.0", - "@parcel/transformer-svg-react": "^2.14.0", - "@parcel/transformer-typescript-types": "^2.14.0", + "@parcel/bundler-library": "^2.15.1", + "@parcel/config-default": "^2.15.1", + "@parcel/config-storybook": "^0.0.2", + "@parcel/core": "^2.15.1", + "@parcel/optimizer-data-url": "^2.15.1", + "@parcel/optimizer-terser": "^2.15.1", + "@parcel/packager-react-static": "^2.15.1", + "@parcel/packager-ts": "^2.15.1", + "@parcel/reporter-cli": "^2.15.1", + "@parcel/resolver-glob": "^2.15.1", + "@parcel/transformer-inline": "^2.15.1", + "@parcel/transformer-inline-string": "^2.15.1", + "@parcel/transformer-react-static": "^2.15.1", + "@parcel/transformer-svg-react": "^2.15.1", + "@parcel/transformer-typescript-types": "^2.15.1", "@react-spectrum/s2-icon-builder": "^0.2.0", "@spectrum-css/component-builder": "workspace:^", "@spectrum-css/vars": "^2.3.0", @@ -121,7 +125,7 @@ "@stylistic/eslint-plugin-ts": "^2.9.0", "@swc/core": "^1.3.36", "@swc/jest": "^0.2.36", - "@tailwindcss/postcss": "^4.0.0", + "@tailwindcss/postcss": "^4.0.17", "@testing-library/dom": "^10.1.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^16.0.0", @@ -177,7 +181,7 @@ "npm-cli-login": "^1.0.0", "nyc": "^10.2.0", "p-queue": "^6.2.1", - "parcel": "^2.14.0", + "parcel": "^2.15.1", "parcel-optimizer-strict-mode": "workspace:^", "patch-package": "^6.2.0", "playwright": "^1.45.3", @@ -238,7 +242,8 @@ "@types/node@npm:>= 8": "^22", "micromark-extension-mdxjs": "patch:micromark-extension-mdxjs@npm%3A1.0.0#~/.yarn/patches/micromark-extension-mdxjs-npm-1.0.0-d2b6b69e4a.patch", "remark-mdx": "patch:remark-mdx@npm%3A2.0.0-rc.2#~/.yarn/patches/remark-mdx-npm-2.0.0-rc.2-7a71234e1f.patch", - "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch" + "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch", + "lightningcss": "1.30.1" }, "@parcel/transformer-css": { "cssModules": { @@ -252,7 +257,9 @@ "packages/@react-spectrum/color/src/*.tsx", "packages/@react-spectrum/s2/**/*.{js,ts,tsx}", "packages/@react-spectrum/s2/stories/**", - ".storybook-s2/**" + ".storybook-s2/**", + "packages/dev/s2-docs/**", + "starters/**" ] }, "drafts": { diff --git a/packages/@react-aria/breadcrumbs/docs/anatomy.svg b/packages/@react-aria/breadcrumbs/docs/anatomy.svg index af9ab92ba26..e04ad26f612 100644 --- a/packages/@react-aria/breadcrumbs/docs/anatomy.svg +++ b/packages/@react-aria/breadcrumbs/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Breadcrumbs anatomy diagram Shows a breadcrumbs component with labels pointing to its parts, including the navigation container, breadcrumb items, separators, and current page elements. diff --git a/packages/@react-aria/button/docs/ToggleButtonGroupAnatomy.svg b/packages/@react-aria/button/docs/ToggleButtonGroupAnatomy.svg index 98aae3e3019..abbd4f7d238 100644 --- a/packages/@react-aria/button/docs/ToggleButtonGroupAnatomy.svg +++ b/packages/@react-aria/button/docs/ToggleButtonGroupAnatomy.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/calendar/docs/calendar-anatomy.svg b/packages/@react-aria/calendar/docs/calendar-anatomy.svg index da36321f36d..d42e13a7d97 100644 --- a/packages/@react-aria/calendar/docs/calendar-anatomy.svg +++ b/packages/@react-aria/calendar/docs/calendar-anatomy.svg @@ -1,4 +1,4 @@ - + September 2021 S diff --git a/packages/@react-aria/calendar/docs/rangecalendar-anatomy.svg b/packages/@react-aria/calendar/docs/rangecalendar-anatomy.svg index dd062fcbd4d..250f42c2fd1 100644 --- a/packages/@react-aria/calendar/docs/rangecalendar-anatomy.svg +++ b/packages/@react-aria/calendar/docs/rangecalendar-anatomy.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/checkbox/docs/checkbox-anatomy.svg b/packages/@react-aria/checkbox/docs/checkbox-anatomy.svg index 60702c312e7..fd7cf711319 100644 --- a/packages/@react-aria/checkbox/docs/checkbox-anatomy.svg +++ b/packages/@react-aria/checkbox/docs/checkbox-anatomy.svg @@ -1,4 +1,4 @@ - + Checkbox anatomy diagram Shows a checkbox component with labels pointing to its parts, including the input, and label elements. diff --git a/packages/@react-aria/checkbox/docs/checkboxgroup-anatomy.svg b/packages/@react-aria/checkbox/docs/checkboxgroup-anatomy.svg index 685abf7802b..e80a210d682 100644 --- a/packages/@react-aria/checkbox/docs/checkboxgroup-anatomy.svg +++ b/packages/@react-aria/checkbox/docs/checkboxgroup-anatomy.svg @@ -1,4 +1,4 @@ - + Checkbox group anatomy diagram Shows a checkbox group component with labels pointing to its parts, including the checkbox group label, and group element containing three checkboxes with input and label elements. diff --git a/packages/@react-aria/color/docs/ColorAreaAnatomy.svg b/packages/@react-aria/color/docs/ColorAreaAnatomy.svg index bc9ddd64e6a..164973d1d78 100644 --- a/packages/@react-aria/color/docs/ColorAreaAnatomy.svg +++ b/packages/@react-aria/color/docs/ColorAreaAnatomy.svg @@ -1,4 +1,4 @@ - + Color area anatomy diagram Shows a color area component with labels pointing to its parts, including the area, and thumb elements. diff --git a/packages/@react-aria/color/docs/ColorFieldAnatomy.svg b/packages/@react-aria/color/docs/ColorFieldAnatomy.svg index 76894326e0d..a3bcd647278 100644 --- a/packages/@react-aria/color/docs/ColorFieldAnatomy.svg +++ b/packages/@react-aria/color/docs/ColorFieldAnatomy.svg @@ -1,4 +1,4 @@ - + Color field anatomy diagram Shows a color field component with labels pointing to its parts, including the input, and label elements. diff --git a/packages/@react-aria/color/docs/ColorSliderAnatomy.svg b/packages/@react-aria/color/docs/ColorSliderAnatomy.svg index 0b624eee1e0..a6f5551e709 100644 --- a/packages/@react-aria/color/docs/ColorSliderAnatomy.svg +++ b/packages/@react-aria/color/docs/ColorSliderAnatomy.svg @@ -1,4 +1,4 @@ - + Color slider anatomy diagram Shows a color slider component with labels pointing to its parts, including the track, thumb, label, and output elements. diff --git a/packages/@react-aria/color/docs/ColorWheelAnatomy.svg b/packages/@react-aria/color/docs/ColorWheelAnatomy.svg index 1857671e0dd..a8f2bac31ec 100644 --- a/packages/@react-aria/color/docs/ColorWheelAnatomy.svg +++ b/packages/@react-aria/color/docs/ColorWheelAnatomy.svg @@ -1,4 +1,4 @@ - + Color wheel anatomy diagram Shows a color wheel component with labels pointing to its parts, including the track, and thumb elements. diff --git a/packages/@react-aria/combobox/docs/anatomy.svg b/packages/@react-aria/combobox/docs/anatomy.svg index 51d906d2af2..794bf6dc5d5 100644 --- a/packages/@react-aria/combobox/docs/anatomy.svg +++ b/packages/@react-aria/combobox/docs/anatomy.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/datepicker/docs/datefield-anatomy.svg b/packages/@react-aria/datepicker/docs/datefield-anatomy.svg index 51e0ee99d8d..7766abee9bb 100644 --- a/packages/@react-aria/datepicker/docs/datefield-anatomy.svg +++ b/packages/@react-aria/datepicker/docs/datefield-anatomy.svg @@ -1,4 +1,4 @@ - + Date field anatomy diagram Shows a date field with labels pointing to its parts, including the label, field, and segments. diff --git a/packages/@react-aria/datepicker/docs/datepicker-anatomy.svg b/packages/@react-aria/datepicker/docs/datepicker-anatomy.svg index 05b988b5ced..999e6ca6717 100644 --- a/packages/@react-aria/datepicker/docs/datepicker-anatomy.svg +++ b/packages/@react-aria/datepicker/docs/datepicker-anatomy.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/datepicker/docs/daterangepicker-anatomy.svg b/packages/@react-aria/datepicker/docs/daterangepicker-anatomy.svg index 86f8e9a4cae..fc0fc0bba8f 100644 --- a/packages/@react-aria/datepicker/docs/daterangepicker-anatomy.svg +++ b/packages/@react-aria/datepicker/docs/daterangepicker-anatomy.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/datepicker/docs/timefield-anatomy.svg b/packages/@react-aria/datepicker/docs/timefield-anatomy.svg index 2455914e454..30981b79255 100644 --- a/packages/@react-aria/datepicker/docs/timefield-anatomy.svg +++ b/packages/@react-aria/datepicker/docs/timefield-anatomy.svg @@ -1,4 +1,4 @@ - + Time field anatomy diagram Shows a time field with labels pointing to its parts, including the label, field, and segments. diff --git a/packages/@react-aria/dialog/docs/anatomy.svg b/packages/@react-aria/dialog/docs/anatomy.svg index ec1b374d438..846f58038eb 100644 --- a/packages/@react-aria/dialog/docs/anatomy.svg +++ b/packages/@react-aria/dialog/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Dialog anatomy diagram Shows a dialog component with labels pointing to its parts, including the title, and dialog container elements. diff --git a/packages/@react-aria/disclosure/docs/anatomy.svg b/packages/@react-aria/disclosure/docs/anatomy.svg index 83674867796..0a0f10c9950 100644 --- a/packages/@react-aria/disclosure/docs/anatomy.svg +++ b/packages/@react-aria/disclosure/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Landscape diff --git a/packages/@react-aria/dnd/docs/Anatomy.svg b/packages/@react-aria/dnd/docs/Anatomy.svg index ec1e469fb34..14f485d133f 100644 --- a/packages/@react-aria/dnd/docs/Anatomy.svg +++ b/packages/@react-aria/dnd/docs/Anatomy.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/dnd/docs/DragAffordance.svg b/packages/@react-aria/dnd/docs/DragAffordance.svg index 0f0bf026e19..f1242c03ecd 100644 --- a/packages/@react-aria/dnd/docs/DragAffordance.svg +++ b/packages/@react-aria/dnd/docs/DragAffordance.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/dnd/docs/DragPreview.svg b/packages/@react-aria/dnd/docs/DragPreview.svg index dc1527e2aad..bdbbb375e86 100644 --- a/packages/@react-aria/dnd/docs/DragPreview.svg +++ b/packages/@react-aria/dnd/docs/DragPreview.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/dnd/docs/DropOperation.svg b/packages/@react-aria/dnd/docs/DropOperation.svg index 7e00360e05f..96b9f1a3374 100644 --- a/packages/@react-aria/dnd/docs/DropOperation.svg +++ b/packages/@react-aria/dnd/docs/DropOperation.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/listbox/docs/anatomy.svg b/packages/@react-aria/listbox/docs/anatomy.svg index 9dec4dbcf73..a751dc17255 100644 --- a/packages/@react-aria/listbox/docs/anatomy.svg +++ b/packages/@react-aria/listbox/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Listbox anatomy diagram Shows a listbox with labels pointing to its parts, including the label, listbox, group, section heading, option, option label, and option description elements. diff --git a/packages/@react-aria/menu/docs/menu-trigger-anatomy.svg b/packages/@react-aria/menu/docs/menu-trigger-anatomy.svg index f4bed0346bc..dec818bb685 100644 --- a/packages/@react-aria/menu/docs/menu-trigger-anatomy.svg +++ b/packages/@react-aria/menu/docs/menu-trigger-anatomy.svg @@ -1,4 +1,4 @@ - + Menu anatomy diagram Shows a menu component with labels pointing to its parts, including the trigger, menu, group, section heading, menu item, menu item label, menu item description, and menu item keyboard shortcut elements. diff --git a/packages/@react-aria/meter/docs/anatomy.svg b/packages/@react-aria/meter/docs/anatomy.svg index 7ff81c22ea2..6e0f0067581 100644 --- a/packages/@react-aria/meter/docs/anatomy.svg +++ b/packages/@react-aria/meter/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Meter anatomy diagram Shows a meter with labels pointing to its parts, including the label, fill, track, and value label elements. diff --git a/packages/@react-aria/numberfield/docs/anatomy.svg b/packages/@react-aria/numberfield/docs/anatomy.svg index d2f7017932f..d1f42fb276e 100644 --- a/packages/@react-aria/numberfield/docs/anatomy.svg +++ b/packages/@react-aria/numberfield/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Number field anatomy diagram Shows a number field with labels pointing to its parts, including the label, group, input, increment button, and decrement button elements. diff --git a/packages/@react-aria/overlays/docs/modal-anatomy.svg b/packages/@react-aria/overlays/docs/modal-anatomy.svg index 23b913a43b0..e31bf26ceb0 100644 --- a/packages/@react-aria/overlays/docs/modal-anatomy.svg +++ b/packages/@react-aria/overlays/docs/modal-anatomy.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/overlays/docs/popover-anatomy.svg b/packages/@react-aria/overlays/docs/popover-anatomy.svg index 385ea86f6dd..dcd4d3849d4 100644 --- a/packages/@react-aria/overlays/docs/popover-anatomy.svg +++ b/packages/@react-aria/overlays/docs/popover-anatomy.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/progress/docs/anatomy.svg b/packages/@react-aria/progress/docs/anatomy.svg index 21560d4c412..32e91085c2e 100644 --- a/packages/@react-aria/progress/docs/anatomy.svg +++ b/packages/@react-aria/progress/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Progress bar anatomy diagram Shows a progress bar with labels pointing to its parts, including the label, fill, track, and value label elements. diff --git a/packages/@react-aria/radio/docs/anatomy.svg b/packages/@react-aria/radio/docs/anatomy.svg index 50720cee9f1..b1d1afa2842 100644 --- a/packages/@react-aria/radio/docs/anatomy.svg +++ b/packages/@react-aria/radio/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Radio group anatomy diagram Shows a radio group component with labels pointing to its parts, including the radio group label, and radio group element containing three radios with input and label elements. diff --git a/packages/@react-aria/searchfield/docs/anatomy.svg b/packages/@react-aria/searchfield/docs/anatomy.svg index 74fbe93d8d8..96a70b6a425 100644 --- a/packages/@react-aria/searchfield/docs/anatomy.svg +++ b/packages/@react-aria/searchfield/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Search field anatomy diagram Shows a search field component with labels pointing to its parts, including the label, input, and clear button elements. diff --git a/packages/@react-aria/select/docs/anatomy.svg b/packages/@react-aria/select/docs/anatomy.svg index ce9ed13a8e5..ea971870f37 100644 --- a/packages/@react-aria/select/docs/anatomy.svg +++ b/packages/@react-aria/select/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Select anatomy diagram Shows two select elements, one open and one closed, with labels pointing to their parts including the label, trigger, value, and menu. diff --git a/packages/@react-aria/slider/docs/anatomy.svg b/packages/@react-aria/slider/docs/anatomy.svg index f16e8842e16..8a7e3d8d1f3 100644 --- a/packages/@react-aria/slider/docs/anatomy.svg +++ b/packages/@react-aria/slider/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Slider anatomy diagram Shows a slider with labels pointing to its parts including the label, group, track, thumb, and output elements. diff --git a/packages/@react-aria/switch/docs/anatomy.svg b/packages/@react-aria/switch/docs/anatomy.svg index dd7a37e6d42..77a2fc5dcf8 100644 --- a/packages/@react-aria/switch/docs/anatomy.svg +++ b/packages/@react-aria/switch/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Switch anatomy diagram Shows a switch component with labels pointing to its parts, including the input, and label elements. diff --git a/packages/@react-aria/table/docs/TableAnatomy.svg b/packages/@react-aria/table/docs/TableAnatomy.svg index 89841bcdfd5..175ee06273e 100644 --- a/packages/@react-aria/table/docs/TableAnatomy.svg +++ b/packages/@react-aria/table/docs/TableAnatomy.svg @@ -1,4 +1,4 @@ - + Table anatomy diagram Shows a table component with labels pointing to its parts, including the row, column, column header, and cell elements. diff --git a/packages/@react-aria/tabs/docs/anatomy.svg b/packages/@react-aria/tabs/docs/anatomy.svg index 3b505b3a9e4..27a57d4fb36 100644 --- a/packages/@react-aria/tabs/docs/anatomy.svg +++ b/packages/@react-aria/tabs/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Tabs anatomy diagram Shows a tabs component with labels for each tab, a selection state, and the tab panel. diff --git a/packages/@react-aria/textfield/docs/anatomy.svg b/packages/@react-aria/textfield/docs/anatomy.svg index 7c9b3ac89a8..dbba3b128bf 100644 --- a/packages/@react-aria/textfield/docs/anatomy.svg +++ b/packages/@react-aria/textfield/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Text field anatomy diagram Shows a text field component with labels pointing to its parts, including the input, and label elements. diff --git a/packages/@react-aria/toast/docs/toast-anatomy.svg b/packages/@react-aria/toast/docs/toast-anatomy.svg index 7972153248f..6d7deb9967c 100644 --- a/packages/@react-aria/toast/docs/toast-anatomy.svg +++ b/packages/@react-aria/toast/docs/toast-anatomy.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/@react-aria/tooltip/docs/anatomy.svg b/packages/@react-aria/tooltip/docs/anatomy.svg index ee917ba03f6..8522a119868 100644 --- a/packages/@react-aria/tooltip/docs/anatomy.svg +++ b/packages/@react-aria/tooltip/docs/anatomy.svg @@ -1,4 +1,4 @@ - + Tooltip trigger anatomy diagram Shows a tooltip trigger component with labels pointing to its parts, including the tooltip, and trigger elements. diff --git a/packages/@react-spectrum/actionbar/docs/ActionBarAnatomy.svg b/packages/@react-spectrum/actionbar/docs/ActionBarAnatomy.svg index bf4a51a1787..416c6938ca0 100644 --- a/packages/@react-spectrum/actionbar/docs/ActionBarAnatomy.svg +++ b/packages/@react-spectrum/actionbar/docs/ActionBarAnatomy.svg @@ -1,4 +1,4 @@ - + ActionBar anatomy diagram Shows an ActionBar component with labels pointing to its parts, including the clear button, selected item count, and action button group. diff --git a/packages/@react-spectrum/list/docs/anatomy.svg b/packages/@react-spectrum/list/docs/anatomy.svg index 0cac6818db2..99d63a0bc6f 100644 --- a/packages/@react-spectrum/list/docs/anatomy.svg +++ b/packages/@react-spectrum/list/docs/anatomy.svg @@ -1,4 +1,4 @@ - + ListView anatomy diagram Shows a list view with labels pointing to its parts, including a parent list view item, a child list view item, and a selected listview item. diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 636e1aaa9eb..0bb622c87f1 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -140,7 +140,7 @@ }, "devDependencies": { "@adobe/spectrum-tokens": "^13.0.0-beta.56", - "@parcel/macros": "^2.14.0", + "@parcel/macros": "^2.15.1", "@react-aria/test-utils": "1.0.0-alpha.7", "@storybook/jest": "^0.2.3", "@testing-library/dom": "^10.1.0", diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx index 5436152eefd..71527967aa6 100644 --- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx +++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx @@ -13,6 +13,7 @@ import {ActionButton} from './ActionButton'; import { Breadcrumb as AriaBreadcrumb, + BreadcrumbProps as AriaBreadcrumbItemProps, BreadcrumbsProps as AriaBreadcrumbsProps, CollectionRenderer, CollectionRendererContext, @@ -24,7 +25,6 @@ import { Provider, Breadcrumbs as RACBreadcrumbs } from 'react-aria-components'; -import {AriaBreadcrumbItemProps, useLocale} from 'react-aria'; import {baseColor, focusRing, size, style} from '../style' with { type: 'macro' }; import ChevronIcon from '../ui-icons/Chevron'; import {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared'; @@ -38,6 +38,7 @@ import intlMessages from '../intl/*.json'; import {Menu, MenuItem, MenuTrigger} from './Menu'; import {Text} from './Content'; import {useDOMRef, useResizeObserver} from '@react-spectrum/utils'; +import {useLocale} from 'react-aria'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx index 1a0e885444c..d9cc9388301 100644 --- a/packages/@react-spectrum/s2/src/Picker.tsx +++ b/packages/@react-spectrum/s2/src/Picker.tsx @@ -86,7 +86,6 @@ export interface PickerStyleProps { size?: 'S' | 'M' | 'L' | 'XL', /** * Whether the picker should be displayed with a quiet style. - * @private */ isQuiet?: boolean } diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts index 3b48b1f6d09..18cc68bfec6 100644 --- a/packages/@react-spectrum/s2/src/index.ts +++ b/packages/@react-spectrum/s2/src/index.ts @@ -10,6 +10,8 @@ * governing permissions and limitations under the License. */ +'use client'; + export {Accordion, AccordionContext} from './Accordion'; export {ActionBar, ActionBarContext} from './ActionBar'; export {ActionButton, ActionButtonContext} from './ActionButton'; diff --git a/packages/dev/docs/package.json b/packages/dev/docs/package.json index 1888e149b7b..6b2bd137b7a 100644 --- a/packages/dev/docs/package.json +++ b/packages/dev/docs/package.json @@ -30,7 +30,9 @@ "globals-docs": "^2.4.1", "highlight.js": "9.18.1", "markdown-to-jsx": "^6.11.0", - "quicklink": "^3.0.1", + "quicklink": "^2.3.0", + "react": "^19.1.0", + "react-dom": "^19.1.0", "react-lowlight": "^2.0.0" }, "peerDependencies": { diff --git a/packages/dev/docs/pages/assets/daterangepicker-anatomy.svg b/packages/dev/docs/pages/assets/daterangepicker-anatomy.svg index 86f8e9a4cae..fc0fc0bba8f 100644 --- a/packages/dev/docs/pages/assets/daterangepicker-anatomy.svg +++ b/packages/dev/docs/pages/assets/daterangepicker-anatomy.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/dev/docs/pages/assets/submenu-atan2-from-pointer.svg b/packages/dev/docs/pages/assets/submenu-atan2-from-pointer.svg index be0d5fa9fb2..7f173d1fd51 100644 --- a/packages/dev/docs/pages/assets/submenu-atan2-from-pointer.svg +++ b/packages/dev/docs/pages/assets/submenu-atan2-from-pointer.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/dev/docs/pages/assets/submenu-atan2.svg b/packages/dev/docs/pages/assets/submenu-atan2.svg index 08b39982796..5df0d7f3f12 100644 --- a/packages/dev/docs/pages/assets/submenu-atan2.svg +++ b/packages/dev/docs/pages/assets/submenu-atan2.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/dev/docs/pages/assets/submenu-safe-area.svg b/packages/dev/docs/pages/assets/submenu-safe-area.svg index 03470810bd6..b6d622d3484 100644 --- a/packages/dev/docs/pages/assets/submenu-safe-area.svg +++ b/packages/dev/docs/pages/assets/submenu-safe-area.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/dev/docs/pages/react-aria/home.global.css b/packages/dev/docs/pages/react-aria/home.global.css index a8c59e43e14..e8c677f47a2 100644 --- a/packages/dev/docs/pages/react-aria/home.global.css +++ b/packages/dev/docs/pages/react-aria/home.global.css @@ -12,7 +12,7 @@ @import 'tailwindcss' source(none); @source "*.mdx"; @source "home/*.tsx"; -@source "../../../../../starters/tailwind/**/*.{ts,tsx}"; +@source "../tailwind-starter/**/*.{ts,tsx}"; @plugin "tailwindcss-react-aria-components"; @plugin "tailwindcss-animate"; diff --git a/packages/dev/docs/src/docs.css b/packages/dev/docs/src/docs.css index b472a8ddc1c..0aa8e6e5aeb 100644 --- a/packages/dev/docs/src/docs.css +++ b/packages/dev/docs/src/docs.css @@ -151,6 +151,7 @@ html, body { --anatomy-gray-75: #FDFDFE; --anatomy-gray-50: #FFFFFF; --docsearch-logo-color: #5468FF; + --anatomy-radius: 4px; } .dark { diff --git a/packages/dev/eslint-plugin-rsp-rules/rules/sort-imports.js b/packages/dev/eslint-plugin-rsp-rules/rules/sort-imports.js index 3f36639502b..79c0f318232 100644 --- a/packages/dev/eslint-plugin-rsp-rules/rules/sort-imports.js +++ b/packages/dev/eslint-plugin-rsp-rules/rules/sort-imports.js @@ -83,7 +83,7 @@ const plugin = { for (let statement of node.body) { if (statement.type === 'ImportDeclaration') { allImports.push(statement); - } else { + } else if (allImports.length > 0) { // Do not replace if there are other statements between imports. break; } diff --git a/packages/dev/parcel-namer-docs/package.json b/packages/dev/parcel-namer-docs/package.json index 41b0c7bf722..5b9685aa5bd 100644 --- a/packages/dev/parcel-namer-docs/package.json +++ b/packages/dev/parcel-namer-docs/package.json @@ -7,6 +7,6 @@ "parcel": "^2.0.0" }, "dependencies": { - "@parcel/plugin": "^2.14.0" + "@parcel/plugin": "^2.15.1" } } diff --git a/packages/dev/parcel-namer-intl/package.json b/packages/dev/parcel-namer-intl/package.json index 5a4d5797189..cf8c2ce1464 100644 --- a/packages/dev/parcel-namer-intl/package.json +++ b/packages/dev/parcel-namer-intl/package.json @@ -7,6 +7,6 @@ "parcel": "^2.0.0" }, "dependencies": { - "@parcel/plugin": "^2.14.0" + "@parcel/plugin": "^2.15.1" } } diff --git a/packages/dev/parcel-namer-s2/package.json b/packages/dev/parcel-namer-s2/package.json index e3774cb858d..6fe51c0f294 100644 --- a/packages/dev/parcel-namer-s2/package.json +++ b/packages/dev/parcel-namer-s2/package.json @@ -7,7 +7,7 @@ "parcel": "^2.0.0" }, "dependencies": { - "@parcel/plugin": "^2.14.0" + "@parcel/plugin": "^2.15.1" }, "rsp": { "type": "cli" diff --git a/packages/dev/parcel-optimizer-strict-mode/package.json b/packages/dev/parcel-optimizer-strict-mode/package.json index 8d3e788e6c2..ccee419e7e9 100644 --- a/packages/dev/parcel-optimizer-strict-mode/package.json +++ b/packages/dev/parcel-optimizer-strict-mode/package.json @@ -7,6 +7,6 @@ "parcel": "^2.0.0" }, "dependencies": { - "@parcel/plugin": "^2.14.0" + "@parcel/plugin": "^2.15.1" } } diff --git a/packages/dev/parcel-packager-docs/DocsPackager.js b/packages/dev/parcel-packager-docs/DocsPackager.js index 5ecd4ae3a9f..9fe846793de 100644 --- a/packages/dev/parcel-packager-docs/DocsPackager.js +++ b/packages/dev/parcel-packager-docs/DocsPackager.js @@ -444,7 +444,7 @@ function visitChildren(obj, fn) { keyof: fn(obj.keyof, 'keyof') }; default: - console.log('Unknown type in DocsPackager: ' + obj.type, obj); + // console.log('Unknown type in DocsPackager: ' + obj.type, obj); return obj; } } diff --git a/packages/dev/parcel-packager-docs/package.json b/packages/dev/parcel-packager-docs/package.json index 5f1af940eac..68ee730b08e 100644 --- a/packages/dev/parcel-packager-docs/package.json +++ b/packages/dev/parcel-packager-docs/package.json @@ -7,6 +7,6 @@ "parcel": "^2.0.0" }, "dependencies": { - "@parcel/plugin": "^2.14.0" + "@parcel/plugin": "^2.15.1" } } diff --git a/packages/dev/parcel-packager-ssg/package.json b/packages/dev/parcel-packager-ssg/package.json index 0ce08f9bb09..892801bc6ea 100644 --- a/packages/dev/parcel-packager-ssg/package.json +++ b/packages/dev/parcel-packager-ssg/package.json @@ -7,8 +7,8 @@ "parcel": "^2.0.0" }, "dependencies": { - "@parcel/plugin": "^2.14.0", - "@parcel/utils": "^2.14.0" + "@parcel/plugin": "^2.15.1", + "@parcel/utils": "^2.15.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", diff --git a/packages/dev/parcel-resolver-build/package.json b/packages/dev/parcel-resolver-build/package.json index 37d72d820fa..373bdb2fb45 100644 --- a/packages/dev/parcel-resolver-build/package.json +++ b/packages/dev/parcel-resolver-build/package.json @@ -7,8 +7,8 @@ "parcel": "^2.0.0" }, "dependencies": { - "@parcel/core": "^2.14.0", - "@parcel/node-resolver-core": "^3.5.0", - "@parcel/plugin": "^2.14.0" + "@parcel/core": "^2.15.1", + "@parcel/node-resolver-core": "^3.6.1", + "@parcel/plugin": "^2.15.1" } } diff --git a/packages/dev/parcel-resolver-docs/DocsResolver.js b/packages/dev/parcel-resolver-docs/DocsResolver.js index e98e5cc59a1..25d8db66b1c 100644 --- a/packages/dev/parcel-resolver-docs/DocsResolver.js +++ b/packages/dev/parcel-resolver-docs/DocsResolver.js @@ -50,7 +50,7 @@ module.exports = new Resolver({ } } - if (/^@(react-spectrum|react-aria)\/(.*?)\/docs\/(.*)$/.test(specifier)) { + if (/^(@(react-spectrum|react-aria)\/(.*?)|react-aria-components)\/docs\/(.*)$/.test(specifier)) { let baseDir = process.env.DOCS_ENV === 'production' ? 'docs' : 'packages'; return {filePath: path.join(options.projectRoot, baseDir, specifier)}; } diff --git a/packages/dev/parcel-resolver-docs/package.json b/packages/dev/parcel-resolver-docs/package.json index aeb89fa87eb..6937ea7921f 100644 --- a/packages/dev/parcel-resolver-docs/package.json +++ b/packages/dev/parcel-resolver-docs/package.json @@ -7,8 +7,8 @@ "parcel": "^2.0.0" }, "dependencies": { - "@parcel/core": "^2.14.0", - "@parcel/node-resolver-core": "^3.5.0", - "@parcel/plugin": "^2.14.0" + "@parcel/core": "^2.15.1", + "@parcel/node-resolver-core": "^3.6.1", + "@parcel/plugin": "^2.15.1" } } diff --git a/packages/dev/parcel-transformer-css-env/package.json b/packages/dev/parcel-transformer-css-env/package.json index 8cfe9e52c94..be611510932 100644 --- a/packages/dev/parcel-transformer-css-env/package.json +++ b/packages/dev/parcel-transformer-css-env/package.json @@ -7,6 +7,6 @@ "parcel": "^2.0.0" }, "dependencies": { - "@parcel/plugin": "^2.14.0" + "@parcel/plugin": "^2.15.1" } } diff --git a/packages/dev/parcel-transformer-docs/package.json b/packages/dev/parcel-transformer-docs/package.json index 4c1f42c1a41..ae4527a3c5e 100644 --- a/packages/dev/parcel-transformer-docs/package.json +++ b/packages/dev/parcel-transformer-docs/package.json @@ -10,11 +10,11 @@ "@babel/parser": "^7.24.0", "@babel/traverse": "^7.24.0", "@babel/types": "^7.24.0", - "@parcel/plugin": "^2.14.0", + "@parcel/plugin": "^2.15.1", "doctrine": "^3.0.0" }, "devDependencies": { - "@parcel/core": "^2.14.0", - "@parcel/fs": "^2.14.0" + "@parcel/core": "^2.15.1", + "@parcel/fs": "^2.15.1" } } diff --git a/packages/dev/parcel-transformer-intl/package.json b/packages/dev/parcel-transformer-intl/package.json index a73f7224259..e1580eef994 100644 --- a/packages/dev/parcel-transformer-intl/package.json +++ b/packages/dev/parcel-transformer-intl/package.json @@ -8,6 +8,6 @@ }, "dependencies": { "@internationalized/string-compiler": "^3.0.0", - "@parcel/plugin": "^2.14.0" + "@parcel/plugin": "^2.15.1" } } diff --git a/packages/dev/parcel-transformer-mdx-docs/package.json b/packages/dev/parcel-transformer-mdx-docs/package.json index 10db6d3991c..7f117789e44 100644 --- a/packages/dev/parcel-transformer-mdx-docs/package.json +++ b/packages/dev/parcel-transformer-mdx-docs/package.json @@ -9,8 +9,8 @@ "dependencies": { "@mdx-js/mdx": "next", "@mdx-js/react": "next", - "@parcel/core": "^2.14.0", - "@parcel/plugin": "^2.14.0", + "@parcel/core": "^2.15.1", + "@parcel/plugin": "^2.15.1", "dprint-node": "^1.0.7", "js-yaml": "^3.13.1", "mdast-util-toc": "^6.1.0", diff --git a/packages/dev/parcel-transformer-mdx-extract/package.json b/packages/dev/parcel-transformer-mdx-extract/package.json index d4169f3b110..d1abf678754 100644 --- a/packages/dev/parcel-transformer-mdx-extract/package.json +++ b/packages/dev/parcel-transformer-mdx-extract/package.json @@ -7,7 +7,7 @@ "parcel": "^2.12.0" }, "dependencies": { - "@parcel/plugin": "^2.14.0", + "@parcel/plugin": "^2.15.1", "remark-mdx": "^2.0.0-rc.2", "remark-parse": "^10.0.1", "unified": "^10.0.1", diff --git a/packages/dev/parcel-transformer-mdx-storybook/package.json b/packages/dev/parcel-transformer-mdx-storybook/package.json index e8f67cfd718..8fa4355519e 100644 --- a/packages/dev/parcel-transformer-mdx-storybook/package.json +++ b/packages/dev/parcel-transformer-mdx-storybook/package.json @@ -9,7 +9,7 @@ "dependencies": { "@mdx-js/mdx": "next", "@mdx-js/react": "next", - "@parcel/plugin": "^2.14.0" + "@parcel/plugin": "^2.15.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/dev/s2-docs/.parcelrc-s2-docs b/packages/dev/s2-docs/.parcelrc-s2-docs new file mode 100644 index 00000000000..f9f23683849 --- /dev/null +++ b/packages/dev/s2-docs/.parcelrc-s2-docs @@ -0,0 +1,23 @@ +{ + "extends": "@parcel/config-default", + "resolvers": ["@parcel/resolver-glob", "parcel-resolver-docs", "..."], + "transformers": { + "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"], + "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"], + "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], + "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], + "packages/*/*/intl/*.json": ["parcel-transformer-intl"], + "starters/tailwind/**/*.css": ["@parcel/transformer-postcss", "..."], + "packages/dev/s2-docs/tailwind/*.css": ["@parcel/transformer-postcss", "..."], + // Disable PostCSS from running over style macro output + "*.css": ["@parcel/transformer-css"], + "*.svg": ["@parcel/transformer-svg-react"], + "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [ + "@parcel/transformer-js", + "@parcel/transformer-react-refresh-wrap" + ] + }, + "packagers": { + "*.json": "parcel-packager-docs" + } +} diff --git a/packages/dev/s2-docs/package.json b/packages/dev/s2-docs/package.json new file mode 100644 index 00000000000..52e01693b9b --- /dev/null +++ b/packages/dev/s2-docs/package.json @@ -0,0 +1,43 @@ +{ + "name": "@react-spectrum/s2-docs", + "version": "1.0.0", + "private": true, + "scripts": { + "start": "DOCS_ENV=dev parcel --config .parcelrc-s2-docs", + "build": "DOCS_ENV=staging parcel build --config .parcelrc-s2-docs" + }, + "targets": { + "react-static": { + "source": "pages/**/*.mdx", + "context": "react-server", + "engines": { + "browsers": [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 Firefox versions" + ] + }, + "includeNodeModules": { + "tree-sitter-highlight": false + } + } + }, + "dependencies": { + "@parcel/rsc": "patch:@parcel/rsc@npm%3A2.14.4#~/.yarn/patches/@parcel-rsc-npm-2.14.4-224743f6b2.patch", + "@react-aria/interactions": "^3.25.1", + "@react-aria/utils": "^3.29.0", + "@react-spectrum/s2": "^0.9.0", + "globals-docs": "^2.4.1", + "markdown-to-jsx": "^6.11.0", + "react": "^19", + "react-aria": "^3.40.0", + "react-aria-components": "^1.7.1", + "react-dom": "^19", + "react-stately": "^3.38.0", + "tree-sitter-highlight": "^1.0.1" + }, + "alias": { + "tailwind-starter": "../../../starters/tailwind", + "vanilla-starter": "../../../starters/docs" + } +} diff --git a/packages/dev/s2-docs/pages/Button.mdx b/packages/dev/s2-docs/pages/Button.mdx new file mode 100644 index 00000000000..c360cf8b0e1 --- /dev/null +++ b/packages/dev/s2-docs/pages/Button.mdx @@ -0,0 +1,109 @@ +import {Layout} from '../src/Layout'; +export default Layout; + +import {Card, CardPreview, Content, Image, Text} from '@react-spectrum/s2'; +import docs from 'docs:react-aria-components'; +import {Button as VanillaButton} from 'vanilla-starter/src/Button'; +import {Button as TailwindButton} from 'tailwind-starter/src/Button'; +import {Button as MacroButton} from './ButtonExample'; +import tailwindDocs from 'docs:tailwind-starter/src/Button'; +import '../tailwind/tailwind.css'; +import 'vanilla-starter/src/Button.css'; +import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; + +# Button + +{docs.exports.Button.description} + + + + + + + +## Features + +On the surface, building a custom styled button seems simple. However, there are many +cross browser inconsistencies in interactions and accessibility features to consider. +`Button` handles all of these interactions for you, so you can focus on the styling. + +* **Styleable** – Hover, press, and keyboard focus states are provided for easy styling. These states only apply when interacting with an appropriate input device, unlike CSS pseudo classes. +* **Accessible** – Uses a native `
+ + + + + + Ripple Button + A button with an animated ripple effect styled with Tailwind CSS. + + +
+ +## Events + +`Button` supports user interactions via mouse, keyboard, and touch. You can handle all of these via the `onPress` prop. This is similar to the standard `onClick` event, but normalized to support all interaction methods equally. In addition, the `onPressStart`, `onPressEnd`, and `onPressChange` events are fired as the user interacts with the button. + +Each of these handlers receives a , which exposes information about the target and the type of event that triggered the interaction. +{/* See [usePress](usePress.html) for more details. */} + +```tsx render +"use client"; +import {Button} from 'react-aria-components'; +import {useState} from 'react'; + +function Example() { + let [pointerType, setPointerType] = useState(''); + + return ( + <> + +

{pointerType ? `You are pressing the button with a ${pointerType}!` : 'Ready to be pressed.'}

+ + ) +} +``` + +## Props + + + + diff --git a/packages/dev/s2-docs/pages/ButtonExample.tsx b/packages/dev/s2-docs/pages/ButtonExample.tsx new file mode 100644 index 00000000000..306e0ea6bb7 --- /dev/null +++ b/packages/dev/s2-docs/pages/ButtonExample.tsx @@ -0,0 +1,27 @@ +'use client'; + +import {baseColor, style} from '@react-spectrum/s2/style' with {type: 'macro'}; +import {ButtonProps, Button as RACButton} from 'react-aria-components'; +import {pressScale} from '@react-spectrum/s2'; +import {useRef} from 'react'; + +const buttonStyle = style({ + borderRadius: 'default', + backgroundColor: { + default: baseColor('pink-800'), + isDisabled: 'disabled' + }, + color: { + default: 'white', + isDisabled: 'disabled' + }, + paddingX: 'edge-to-text', + height: 32, + borderStyle: 'none', + transition: 'default' +}); + +export function Button(props: ButtonProps) { + let ref = useRef(null); + return ; +} diff --git a/packages/dev/s2-docs/pages/ListBox.mdx b/packages/dev/s2-docs/pages/ListBox.mdx new file mode 100644 index 00000000000..9c1792ba73d --- /dev/null +++ b/packages/dev/s2-docs/pages/ListBox.mdx @@ -0,0 +1,396 @@ +import {Layout} from '../src/Layout'; +export default Layout; + +import docs from 'docs:react-aria-components'; +import {ListBox as VanillaListBox, ListBoxItem} from 'vanilla-starter/src/ListBox'; +import vanillaDocs from 'docs:vanilla-starter/src/ListBox'; +import '../tailwind/tailwind.css'; +import 'vanilla-starter/src/ListBox.css'; +import Anatomy from 'react-aria-components/docs/ListBoxAnatomy.svg'; + +# ListBox + +{docs.exports.ListBox.description} + + + ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionMode']} files={["starters/docs/src/ListBox.tsx", "starters/docs/src/ListBox.css", "starters/docs/src/theme.css"]} + "use client"; + import {ListBox, ListBoxItem} from 'vanilla-starter/src/ListBox'; + + + Aardvark + Cat + Dog + Kangaroo + Panda + Snake + + ``` + + ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionMode']} files={["starters/tailwind/src/ListBox.tsx"]} + "use client"; + import {ListBox, ListBoxItem} from 'tailwind-starter/src/ListBox'; + + + Aardvark + Cat + Dog + Kangaroo + Panda + Snake + + ``` + + + +## Features + +A listbox can be built using the <select> +and <option> HTML elements, but this is +not possible to style consistently cross browser. `ListBox` helps you build accessible +listbox components that can be styled as needed. + +* **Item selection** – Single or multiple selection, disabled rows, and both `toggle` and `replace` selection behaviors. +* **Keyboard navigation** – List items can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well. +* **Layout options** – Items can be arranged in a vertical or horizontal stack, or as a two-dimensional grid. +* **Drag and drop** – ListBox supports drag and drop to reorder, insert, or update items via mouse, touch, keyboard, and screen reader interactions. +* **Virtualized scrolling** – Use Virtualizer to improve performance of large lists by rendering only the visible items. +* **Accessible** – Follows the ARIA listbox pattern, with support for items and sections, and slots for label and description elements within each item for improved screen reader announcement. + +## Anatomy + + + +A listbox consists of a container element, with a list of items or sections inside. +Users can select one or more items by clicking, tapping, or navigating with the keyboard. + +```tsx +import {ListBox, ListBoxItem, ListBoxSection, Header, Text} from 'react-aria-components'; + + + + + + + +
+ + + +``` + +## Content + +`ListBox` follows the **Collection Components API**, accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children. + +```tsx render +"use client"; +import {ListBox, ListBoxItem} from 'react-aria-components'; + +function Example() { + let options = [ + { id: 1, name: 'Aardvark' }, + { id: 2, name: 'Cat' }, + { id: 3, name: 'Dog' }, + { id: 4, name: 'Kangaroo' }, + { id: 5, name: 'Koala' }, + { id: 6, name: 'Penguin' }, + { id: 7, name: 'Snake' }, + { id: 8, name: 'Turtle' }, + { id: 9, name: 'Wombat' } + ]; + + return ( + + {(item) => {item.name}} + + ); +} +``` + +### Sections + +Use the `` component to group options. A `
` element may also be included to label the section. Sections without a header must have an `aria-label`. + +```tsx render +"use client"; +import {ListBox, ListBoxItem, ListBoxSection, Header} from 'react-aria-components'; + + + +
Veggies
+ Lettuce + Tomato + Onion + + +
Protein
+ Ham + Tuna + Tofu + + +
Condiments
+ Mayonaise + Mustard + Ranch + + +``` + +### Text slots + +Use the `"label"` and `"description"` slots to separate primary and secondary content. This improves screen reader announcements and can also be used for styling purposes. + +```tsx render +"use client"; +import {ListBox, ListBoxItem, Text} from 'react-aria-components'; + + + + Read + Read only + + + Write + Read and write only + + + Admin + Full access + + +``` + +### Links + +Use the `href` prop on a `` to create a link. See the **client side routing guide** to learn how to integrate with your framework. + +By default, link items in a ListBox are not selectable, and only perform navigation when the user interacts with them. However, with `selectionBehavior="replace"`, items will be selected when single clicking or pressing the Space key, and navigate to the link when double clicking or pressing the Enter key. + +```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionBehavior']} wide +"use client"; +import {ListBox, ListBoxItem} from 'react-aria-components'; + + + Adobe + Apple + Google + Microsoft + +``` + +### Asynchronous loading + +This example uses the useAsyncList hook to handle asynchronous loading +of data from a server. + +```tsx render +"use client"; +import {ListBox, ListBoxItem} from 'react-aria-components'; +import {useAsyncList} from '@react-stately/data'; + +interface Character { + name: string +} + +function AsyncLoadingExample() { + let list = useAsyncList({ + async load({signal, filterText}) { + let res = await fetch( + `https://pokeapi.co/api/v2/pokemon`, + {signal} + ); + let json = await res.json(); + + return { + items: json.results + }; + } + }); + + return ( + + {(item) => {item.name}} + + ); +} +``` + +### Empty state + +```tsx render hideImports +"use client"; +import {ListBox, ListBoxItem} from 'react-aria-components'; + + 'No results found.'}> + {[]} + +``` + +## Selection + +Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. Items can be disabled with the `isDisabled` prop. See the Selection guide for more details. + +```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionMode', 'selectionBehavior', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide +"use client"; +import type {Selection} from 'react-aria-components'; +import {ListBox, ListBoxItem} from 'react-aria-components'; +import {useState} from 'react'; + +function Example(props) { + let [selected, setSelected] = useState(new Set(['cheese'])); + + return ( +
+ + Lettuce + Tomato + Cheese + Tuna Salad + Egg Salad + Ham + +

Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}

+
+ ); +} +``` + +## Layouts + +Use the `layout` and `orientation` props to create horizontal and vertical stacks and grids. This affects keyboard navigation and drag and drop behavior. + +```tsx render docs={docs.exports.ListBox} links={docs.links} props={['layout', 'orientation']} initialProps={{layout: 'grid'}} wide +"use client"; +import {ListBox, ListBoxItem, Text} from 'react-aria-components'; + +///- begin collapse -/// +let albums = [ + { + id: 1, + image: 'https://images.unsplash.com/photo-1593958812614-2db6a598c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZGlzY298ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60', + title: 'Euphoric Echoes', + artist: 'Luna Solstice' + }, + { + id: 2, + image: 'https://images.unsplash.com/photo-1601042879364-f3947d3f9c16?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmVvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=900&q=60', + title: 'Neon Dreamscape', + artist: 'Electra Skyline' + }, + { + id: 3, + image: 'https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHNwYWNlfGVufDB8fDB8fHww&auto=format&fit=crop&w=900&q=60', + title: 'Cosmic Serenade', + artist: 'Orion\'s Symphony' + }, + { + id: 4, + image: 'https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bXVzaWN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60', + title: 'Melancholy Melodies', + artist: 'Violet Mistral' + }, + { + id: 5, + image: 'https://images.unsplash.com/photo-1608433319511-dfe8ea4cbd3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGJlYXR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60', + title: 'Rhythmic Illusions', + artist: 'Mirage Beats' + } +]; +///- end collapse -/// + + + {item => ( + + + {item.title} + {item.artist} + + )} + +``` + +## Drag and drop + +ListBox supports drag and drop interactions when the `dragAndDropHooks` prop is provided using the hook. Users can drop data on the list as a whole, on individual items, insert new items between existing ones, or reorder items. React Aria supports drag and drop via mouse, touch, keyboard, and screen reader interactions. + +See the **drag and drop guide** to learn more. + +```tsx render +"use client"; +import {useListData} from 'react-stately'; +import {ListBox, ListBoxItem, useDragAndDrop} from 'react-aria-components'; + +function Example() { + let list = useListData({ + initialItems: [ + {id: 1, name: 'Adobe Photoshop'}, + {id: 2, name: 'Adobe XD'}, + {id: 3, name: 'Adobe Dreamweaver'}, + {id: 4, name: 'Adobe InDesign'}, + {id: 5, name: 'Adobe Connect'} + ] + }); + + ///- begin highlight -/// + let {dragAndDropHooks} = useDragAndDrop({ + getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).name})), + onReorder(e) { + if (e.target.dropPosition === 'before') { + list.moveBefore(e.target.key, e.keys); + } else if (e.target.dropPosition === 'after') { + list.moveAfter(e.target.key, e.keys); + } + } + }); + ///- end highlight -/// + + return ( + + {item => {item.name}} + + ); +} +``` + +## API + +### ListBox + + + + + +### ListBoxItem + + + + + +### ListBoxSection + + + +{/* */} diff --git a/packages/dev/s2-docs/pages/Select.mdx b/packages/dev/s2-docs/pages/Select.mdx new file mode 100644 index 00000000000..bd44b691f39 --- /dev/null +++ b/packages/dev/s2-docs/pages/Select.mdx @@ -0,0 +1,236 @@ +import {Layout} from '../src/Layout'; +export default Layout; + +import docs from 'docs:react-aria-components'; +import {Select as VanillaSelect, SelectItem} from 'vanilla-starter/src/Select'; +import vanillaDocs from 'docs:vanilla-starter/src/Select'; +import '../tailwind/tailwind.css'; +import 'vanilla-starter/src/Select.css'; +import Anatomy from 'react-aria-components/docs/SelectAnatomy.svg'; + +# Select + +{docs.exports.Select.description} + + + ```tsx render docs={docs.exports.Select} links={docs.links} props={['isDisabled', 'isInvalid']} files={["starters/docs/src/Select.tsx", "starters/docs/src/Select.css", "starters/docs/src/theme.css"]} + "use client"; + import {Select, SelectItem} from 'vanilla-starter/src/Select'; + + + ``` + + ```tsx render docs={docs.exports.Select} links={docs.links} props={['isDisabled', 'isInvalid']} files={["starters/tailwind/src/Select.tsx"]} + "use client"; + import {Select, SelectItem} from 'tailwind-starter/src/Select'; + + + ``` + + + +## Features + +A select can be built using the <select> +and <option> HTML elements, but this is +not possible to style consistently cross browser, especially the options. `Select` helps achieve accessible +select components that can be styled as needed without compromising on high quality interactions. + +* **Flexible** – Support for controlled and uncontrolled state, async loading, disabled items, validation, sections, complex items, and more. +* **Keyboard navigation** – Select can be opened and navigated using the arrow keys, along with page up/down, home/end, etc. Auto scrolling, and typeahead both in the listbox and on the button, are supported as well. +* **Accessible** – Follows the ARIA listbox pattern, with support for items and sections, and slots for label and description elements within each item for improved screen reader announcement. +* **HTML form integration** – A visually hidden ` +