diff --git a/.circleci/comment.js b/.circleci/comment.js index 384c5fa5f0f..82ee84445d0 100644 --- a/.circleci/comment.js +++ b/.circleci/comment.js @@ -81,7 +81,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 6d39f884533..b21286df640 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: @@ -874,6 +889,9 @@ workflows: - docs: requires: - install + - s2-docs: + requires: + - install - verdaccio: filters: branches: @@ -928,6 +946,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/bin/imports.js b/bin/imports.js index 05c8e628631..3d3707257ee 100644 --- a/bin/imports.js +++ b/bin/imports.js @@ -56,6 +56,10 @@ module.exports = { return; } + if (pkgName === 'vanilla-starter' || pkgName === 'tailwind-starter') { + return; + } + if (!exists(pkg.dependencies, pkgName) && !exists(pkg.peerDependencies, pkgName) && pkgName !== pkg.name) { context.report({ node, diff --git a/eslint.config.mjs b/eslint.config.mjs index 88d9fa5fd4e..fcc739808cf 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -54,7 +54,8 @@ export default [{ "starters/**/*", "scripts/icon-builder-fixture/**/*", "packages/@react-spectrum/s2/icon.d.ts", - "packages/@react-spectrum/s2/spectrum-illustrations" + "packages/@react-spectrum/s2/spectrum-illustrations", + "packages/dev/s2-docs/pages/**" ], }, ...compat.extends("eslint:recommended"), { plugins: { @@ -493,7 +494,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 5b15cb699cf..ebc7ad663ec 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,21 +87,23 @@ "@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/parcel-namer-s2": "^0.3.0", - "@react-spectrum/s2-icon-builder": "^0.2.0", + "@react-spectrum/s2-icon-builder": "^0.3.0", "@spectrum-css/component-builder": "workspace:^", "@spectrum-css/vars": "^2.3.0", "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A^7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch", @@ -122,7 +126,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", @@ -178,7 +182,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", @@ -222,9 +226,6 @@ "@babel/preset-env": "7.24.4", "@babel/traverse": "7.24.1", "@babel/types": "7.24.0", - "@parcel/transformer-react-refresh-wrap": "2.14.0", - "@parcel/transformer-js": "2.14.0", - "@parcel/codeframe": "2.14.0", "postcss": "8.4.24", "postcss-custom-properties": "13.2.0", "postcss-import": "15.1.0", @@ -242,7 +243,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": { @@ -256,7 +258,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/gridlist/src/useGridList.ts b/packages/@react-aria/gridlist/src/useGridList.ts index 09e1c0cf368..055602c8146 100644 --- a/packages/@react-aria/gridlist/src/useGridList.ts +++ b/packages/@react-aria/gridlist/src/useGridList.ts @@ -38,7 +38,10 @@ export interface GridListProps extends CollectionBase, MultipleSelection { * the collection's `selectionBehavior` prop and the interaction modality. */ onAction?: (key: Key) => void, - /** Whether `disabledKeys` applies to all interactions, or only selection. */ + /** + * Whether `disabledKeys` applies to all interactions, or only selection. + * @default "all" + */ disabledBehavior?: DisabledBehavior, /** Whether selection should occur on press up instead of press down. */ shouldSelectOnPressUp?: boolean 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 5dd41032579..a30fd1a6cc7 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.8", "@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 5928c3795ce..0f9dade5a1d 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 728e630f583..985ee01fcac 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 db31605a7bc..a7dc64d1c53 100644 --- a/packages/dev/parcel-namer-s2/package.json +++ b/packages/dev/parcel-namer-s2/package.json @@ -6,7 +6,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/DocsTransformer.js b/packages/dev/parcel-transformer-docs/DocsTransformer.js index 29f258c10b8..2af0f1cfcd7 100644 --- a/packages/dev/parcel-transformer-docs/DocsTransformer.js +++ b/packages/dev/parcel-transformer-docs/DocsTransformer.js @@ -648,7 +648,7 @@ module.exports = new Transformer({ }); } - console.log('UNKNOWN TYPE', path.node.type); + // console.log('UNKNOWN TYPE', path.node.type); return Object.assign(node, {type: 'any'}); } 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..9f27faa34b7 --- /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/src", + "vanilla-starter": "../../../starters/docs/src" + } +} diff --git a/packages/dev/s2-docs/pages/index.mdx b/packages/dev/s2-docs/pages/index.mdx new file mode 100644 index 00000000000..03cac99e67b --- /dev/null +++ b/packages/dev/s2-docs/pages/index.mdx @@ -0,0 +1,30 @@ +import {Layout} from '../src/Layout'; +export default Layout; + +export const section = 'Getting started'; + +# Test page + +Hello world! some `inline code` and **bold** stuff... + +Bulleted list: + +* One +* Two +* Three + +Numbered list: + +1. Do this +2. Then that +3. Then this other thing + +## H2 + +### H3 + +#### H4 + +## Another H2 + +### Another H3 diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx new file mode 100644 index 00000000000..b163311c8d9 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx @@ -0,0 +1,108 @@ +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/Button'; +import {Button as TailwindButton} from 'tailwind-starter/Button'; +import {Button as MacroButton} from './ButtonExample'; +import tailwindDocs from 'docs:tailwind-starter/Button'; +import '../../tailwind/tailwind.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/react-aria/ButtonExample.tsx b/packages/dev/s2-docs/pages/react-aria/ButtonExample.tsx new file mode 100644 index 00000000000..306e0ea6bb7 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/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/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx new file mode 100644 index 00000000000..3cb071e482c --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx @@ -0,0 +1,350 @@ +import {Layout} from '../../src/Layout'; +export default Layout; + +import docs from 'docs:react-aria-components'; +import vanillaDocs from 'docs:vanilla-starter/Calendar'; +import {Calendar as VanillaCalendar} from 'vanilla-starter/Calendar'; +import {Calendar as TailwindCalendar} from 'tailwind-starter/Calendar'; +import '../../tailwind/tailwind.css'; +import Anatomy from '@react-aria/calendar/docs/calendar-anatomy.svg'; + +# Calendar + +{docs.exports.Calendar.description} + + + + + + +## Anatomy + + + +A calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating between date ranges. Each `CalendarGrid` consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date. + +`Calendar` also supports an optional error message element, which can be used to provide more context about any validation errors. + +```tsx +import {Calendar, Heading, Button, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Text} from 'react-aria-components'; + + + + } +

{monthFormatter.format(state.visibleRange.start.add({months: i}).toDate(state.timeZone))}

+ {i === props.visibleDuration.months - 1 && + + } + + + {date => } + + + )) + )} + + ); +} +``` + +## Controlling the focused date + +Use the `focusedValue` or `defaultFocusedValue` prop to control which date is focused. This controls which month is visible. The `onFocusChange` event is called when a date is focused by the user. + +```tsx render +"use client"; +import {Calendar} from 'vanilla-starter/Calendar'; +import {Button} from 'vanilla-starter/Button'; +import {CalendarDate, today, getLocalTimeZone} from '@internationalized/date'; +import {useState} from 'react'; + +function Example() { + let defaultDate = new CalendarDate(2021, 7, 1); + let [focusedDate, setFocusedDate] = useState(defaultDate); + + return ( +
+ + +
+ ); +} +``` + +### Month and year pickers + +You can also control the focused date via `CalendarStateContext`. This example shows month and year dropdown components that work inside any ``. + +```tsx render files={['packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx', 'packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx']} +"use client"; +import {Calendar, CalendarGrid, CalendarCell} from 'react-aria-components'; +import {MonthDropdown} from './MonthDropdown'; +import {YearDropdown} from './YearDropdown'; +import {Button} from 'vanilla-starter/Button'; + + +
+ + + + +
+ + {(date) => } + + +``` + +## API + +### Calendar + + + + + +### CalendarGrid + + + +{/* */} + +### CalendarGridHeader + + + +{/* */} + +### CalendarHeaderCell + + + +{/* */} + +### CalendarGridBody + + + +{/* */} + +### CalendarCell + + + + diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx new file mode 100644 index 00000000000..d4e00739d97 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx @@ -0,0 +1,104 @@ +import {Layout} from '../../src/Layout'; +export default Layout; + +import docs from 'docs:react-aria-components'; +import {Checkbox as VanillaCheckbox} from 'vanilla-starter/Checkbox'; +import {Checkbox as TailwindCheckbox} from 'tailwind-starter/Checkbox'; +import '../../tailwind/tailwind.css'; +import Anatomy from '@react-aria/checkbox/docs/checkbox-anatomy.svg'; + +# Checkbox + +{docs.exports.Checkbox.description} + + + + + + +## Anatomy + + + +A checkbox consists of a visual selection indicator and a label. Checkboxes support three +selection states: checked, unchecked, and indeterminate. Users may click, touch, or use the Space key to toggle it. + +In most cases, checkboxes should have a visual label. If a checkbox does not have a visible label, an `aria-label` or `aria-labelledby` prop must be provided to identify it to assistive technology. + +```tsx +import {Checkbox} from 'react-aria-components'; + +Label +``` + +## Selection + +Use the `isSelected` or `defaultSelected` prop to set the selection state, and `onChange` to handle selection changes. The `isIndeterminate` prop overrides the selection state regardless of user interaction. + +```tsx render wide docs={docs.exports.Checkbox} links={docs.links} props={['isIndeterminate']} +"use client"; +import {Checkbox} from 'vanilla-starter/Checkbox'; +import {useState} from 'react'; + +function Example(props) { + let [selected, setSelection] = useState(false); + + return ( +
+ + Subscribe + +

{`You are ${props.isIndeterminate ? 'kind of subscribed' : selected ? 'subscribed' : 'unsubscribed'}`}

+
+ ); +} +``` + +## Forms + +Use the `name` and `value` props to submit the checkbox to the server. Set the `isRequired` prop to validate the user selects the checkbox, or implement custom client or server-side validation. See the Forms guide to learn more. + +```tsx render +"use client"; +import {Checkbox} from 'vanilla-starter/Checkbox'; +import {Button} from 'vanilla-starter/Button'; +import {Form} from 'react-aria-components'; + +
+ + I agree to the terms + + +
+``` + +## API + + + + diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx new file mode 100644 index 00000000000..2657bd50337 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx @@ -0,0 +1,316 @@ +import {Layout} from '../../src/Layout'; +export default Layout; + +import docs from 'docs:react-aria-components'; +import {ComboBox as VanillaComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; +import vanillaDocs from 'docs:vanilla-starter/ComboBox'; +import '../../tailwind/tailwind.css'; +import Anatomy from 'react-aria-components/docs/ComboBoxAnatomy.svg'; + +# ComboBox + +{docs.exports.ComboBox.description} + + + ```tsx render docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['label', 'isDisabled']} initialProps={{label: 'Favorite Animal'}} files={["starters/docs/src/ComboBox.tsx", "starters/docs/src/ComboBox.css", "starters/docs/src/theme.css"]} + "use client"; + import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; + + + Aardvark + Cat + Dog + Kangaroo + Panda + Snake + + ``` + + ```tsx render docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['label', 'isDisabled']} initialProps={{label: 'Favorite Animal'}} files={["starters/tailwind/src/ComboBox.tsx"]} + "use client"; + import {ComboBox, ComboBoxItem} from 'tailwind-starter/ComboBox'; + + + Aardvark + Cat + Dog + Kangaroo + Panda + Snake + + ``` + + + +## Anatomy + + + +A ComboBox consists of a label, an input which displays the current value, a [ListBox](ListBox.html) displayed in a [Popover](Popover.html), and an optional [Button](Button.html) +to open the popover. Users can type within the input to filter the available options +within the ListBox. + +`ComboBox` also supports optional description and `` slots. If there is no visible label, an `aria-label` or `aria-labelledby` must be provided to identify it to assistive technology. + +For more flexibility when building patterns such as command palettes, searchable menus, or filterable selects, see the [Autocomplete](Autocomplete.html) component. + +```tsx +import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem, ListBoxSection, Header, Text, FieldError} from 'react-aria-components'; + + +