Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -816,9 +816,10 @@ jobs:
- run:
name: deploy
command: |
azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --exclude-pattern "*.md;*.txt"
azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.md" --content-type "text/markdown; charset=utf-8"
azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.txt" --content-type "text/plain; charset=utf-8"
azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --exclude-pattern "*.md;*.txt;*.html;*.rsc"
azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.md" --content-type "text/markdown; charset=utf-8" --cache-control "max-age=300"
azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.txt" --content-type "text/plain; charset=utf-8" --cache-control "max-age=300"
azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.html;*.rsc" --cache-control "max-age=300"

comment:
executor: rsp
Expand Down
8 changes: 4 additions & 4 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -146,16 +146,16 @@ s2-api-diff:
node scripts/api-diff.js --skip-same --skip-style-props

s2-docs:
BASE_URL=https://reactspectrum.blob.core.windows.net PUBLIC_URL=/reactspectrum/$$(git rev-parse HEAD)/s2-docs DIST_DIR=dist/$$(git rev-parse HEAD)/s2-docs $(MAKE) build-s2-docs
PUBLIC_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs DIST_DIR=dist/$$(git rev-parse HEAD)/s2-docs $(MAKE) build-s2-docs

s2-docs-production:
BASE_URL=https://react-spectrum.adobe.com PUBLIC_URL=/beta DIST_DIR=dist/production/docs/beta $(MAKE) build-s2-docs
PUBLIC_URL=https://react-spectrum.adobe.com/beta DIST_DIR=dist/production/docs/beta $(MAKE) build-s2-docs

build-s2-docs:
yarn workspace @react-spectrum/s2-docs generate:md
yarn workspace @react-spectrum/s2-docs generate:og
REGISTRY_URL=$(BASE_URL)$(PUBLIC_URL)/registry node scripts/buildRegistry.mjs
REGISTRY_URL=$(BASE_URL)$(PUBLIC_URL)/registry yarn build:s2-docs --public-url $(PUBLIC_URL)
REGISTRY_URL=$(PUBLIC_URL)/registry node scripts/buildRegistry.mjs
REGISTRY_URL=$(PUBLIC_URL)/registry yarn build:s2-docs --public-url $(PUBLIC_URL)
mkdir -p $(DIST_DIR)
mv packages/dev/s2-docs/dist/* $(DIST_DIR)
mkdir -p $(DIST_DIR)/registry
Expand Down
3 changes: 2 additions & 1 deletion packages/dev/s2-docs/src/CodeSandbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ const dependencies = {
'react-aria-components': '^1.10.0',
react: '^19',
'react-dom': '^19',
'lucide-react': '^0.514.0'
'lucide-react': '^0.514.0',
'clsx': '^2.1.1'
},
tailwind: {
'react-aria-components': '^1.10.0',
Expand Down
13 changes: 4 additions & 9 deletions packages/dev/s2-docs/src/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,16 +64,11 @@ const getTitle = (currentPage: Page): string => {
};

const getOgImageUrl = (currentPage: Page): string => {
const slug = currentPage.url.replace(/^\//, '').replace(/\.html$/, '');

if (slug.includes('s2-docs/')) {
// For build links, use the full URL
const ogPath = slug.replace(/s2-docs\//, 's2-docs/og/');
return `https://reactspectrum.blob.core.windows.net/${ogPath}.png`;
let publicUrl = process.env.PUBLIC_URL || '/';
if (!publicUrl.endsWith('/')) {
publicUrl += '/';
}

// For production, use relative path with /og/ prefix
return `/og/${slug}.png`;
return publicUrl + 'og/' + currentPage.url.replace(publicUrl, '').replace(/\.html$/, '.png');
};

const getDescription = (currentPage: Page): string => {
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/s2-docs/src/Nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function Nav({pages, currentPage}: PageProps) {
let currentLibrary = getLibraryFromPage(currentPage);
let sections = new Map();
for (let page of pages) {
if (page.exports?.hideNav) {
if (page.exports?.hideNav || page.exports?.hideFromSearch) {
continue;
}

Expand Down
3 changes: 3 additions & 0 deletions packages/dev/s2-docs/src/client.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ async function navigate(pathname: string, push = false) {
// Intercept link clicks to perform RSC navigation.
document.addEventListener('click', e => {
let link = (e.target as Element).closest('a');
let publicUrl = process.env.PUBLIC_URL || '/';
let publicUrlPathname = publicUrl.startsWith('http') ? new URL(publicUrl).pathname : publicUrl;
if (
link &&
link instanceof HTMLAnchorElement &&
Expand All @@ -57,6 +59,7 @@ document.addEventListener('click', e => {
link.origin === location.origin &&
link.pathname !== location.pathname &&
!link.hasAttribute('download') &&
link.pathname.startsWith(publicUrlPathname) &&
e.button === 0 && // left clicks only
!e.metaKey && // open in new tab (mac)
!e.ctrlKey && // open in new tab (windows)
Expand Down
16 changes: 8 additions & 8 deletions packages/react-aria-components/docs/styling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ With this configured, all states for React Aria Components can be accessed with

## Animation

React Aria Components supports both [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) and [keyframe animations](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes), and works with JavaScript animation libraries like [Framer Motion](https://www.framer.com/motion/).
React Aria Components supports both [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) and [keyframe animations](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes), and works with JavaScript animation libraries like [Motion](https://motion.dev/).

### CSS transitions

Expand Down Expand Up @@ -348,20 +348,20 @@ If you are using Tailwind CSS, we recommend using the [tailwindcss-animate](http
</Popover>
```

### Framer Motion
### Motion

[Framer Motion](https://www.framer.com/motion/) and other JavaScript animation libraries can also be used with React Aria Components. Use the [motion](https://www.framer.com/motion/component/#custom-components) function to create a wrapper component that adds support for Framer Motion's animation props.
[Motion](https://motion.dev) and other JavaScript animation libraries can also be used with React Aria Components. Use the [motion](https://motion.dev/docs/react-motion-component#custom-components) function to create a wrapper component that adds support for Motion's animation props.

```tsx
import {Modal, ModalOverlay} from 'react-aria-components';
import {motion} from 'motion/react';

// Create Framer Motion wrappers.
// Create a Motion wrappers.
const MotionModal = motion(Modal);
const MotionModalOverlay = motion(ModalOverlay);
```

This enables using props like [animate](https://www.framer.com/motion/animation/) with React Aria Components.
This enables using props like [animate](https://motion.dev/docs/react-animation) with React Aria Components.

```tsx
<MotionModal
Expand All @@ -371,7 +371,7 @@ This enables using props like [animate](https://www.framer.com/motion/animation/
</MotionModal>
```

Overlay exit animations can be implemented using the `isExiting` prop, which keeps the element in the DOM until an animation is complete. Framer Motion's [variants](https://www.framer.com/motion/animation/#variants) are a good way to setup named animation states.
Overlay exit animations can be implemented using the `isExiting` prop, which keeps the element in the DOM until an animation is complete. Motion's [variants](https://motion.dev/docs/react-animation#variants) are a good way to setup named animation states.

```tsx
type AnimationState = 'unmounted' | 'hidden' | 'visible';
Expand Down Expand Up @@ -418,9 +418,9 @@ function Example() {
}
```

**Note**: Framer Motion's `AnimatePresence` component may not work with React Aria overlays in all cases, so the example shown above is the recommended approach for exit animations.
**Note**: Motion's `AnimatePresence` component may not work with React Aria overlays in all cases, so the example shown above is the recommended approach for exit animations.

The [AnimatePresence](https://www.framer.com/motion/animate-presence/) component allows you to animate when items are added or removed in collection components. Use `array.map` to create children, and make sure each child has a unique `key` in addition to an `id` to ensure Framer Motion can track it.
The [AnimatePresence](https://motion.dev/docs/react-animate-presence) component allows you to animate when items are added or removed in collection components. Use `array.map` to create children, and make sure each child has a unique `key` in addition to an `id` to ensure Motion can track it.

```tsx
import {GridList, GridListItem} from 'react-aria-components';
Expand Down
Loading