docs: Add more new docs content (#8874)

* add Getting Started page

* add Styling guide

* remove RAC imports from S2 docs examples

* add Migration page

* update links in Release Notes

* lint

* add index page

* lint

* fix mobile nav in dark mode

* add missing S2 component descriptions to JSDoc

* add No Results state for Icons and Illustrations search

* Add note to Illustration docs about pipeline name

* add coming soon pages for S2 Collections, Drag and Drop, and Selection

* rename  S2 guide pages for better slugs

* git casing fix

* add version badge to S2 Toast docs

* fix todo link

* add Internationalized docs

* use BetaApp icon for Beta bage

* fix Icons and Illustrations search items

* improve RAC Button example

* fix UserCard props type

* make S2 style macro supported CSS properties list responsive

* enable horizontal scrolling BundlerSwitcher control

* lint

* fix 'Esc' keyboard listener

* add README.md for @react-spectrum/mcp

* have mcp server load markdown docs from CDN

* fix search menu background

* lint

Author: reidbarber

packages/@react-spectrum/s2/src/ActionBar.tsx

@@ -89,6 +89,9 @@ export interface ActionBarProps extends SlotProps {
 
 export const ActionBarContext = createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);
 
+/**
+ * Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.
+ */
 export const ActionBar = forwardRef(function ActionBar(props: ActionBarProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionBarContext);
   let domRef = useDOMRef(ref);

packages/@react-spectrum/s2/src/Calendar.tsx

@@ -284,6 +284,9 @@ const selectionSpanStyles = style({
   forcedColorAdjust: 'none'
 });
 
+/**
+ * Calendars display a grid of days in one or more months and allow users to select a single date.
+ */
 export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CalendarContext);
   let {

packages/@react-spectrum/s2/src/Card.tsx

@@ -635,7 +635,7 @@ export interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {
   variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
-export const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {
+export const UserCard = forwardRef(function UserCard(props: UserCardProps, ref: DOMRef<HTMLDivElement>) {
   let {size = 'M'} = props;
   return (
     <Card {...props} ref={ref} density="spacious">

packages/@react-spectrum/s2/src/DateField.tsx

@@ -87,6 +87,10 @@ const iconStyles = style({
   justifyContent: 'end'
 });
 
+/**
+ * DateFields allow users to enter and edit date and time values using a keyboard.
+ * Each part of a date value is displayed in an individually editable segment.
+ */
 export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(
   props: DateFieldProps<T>, ref: Ref<HTMLDivElement>
 ): ReactElement {

packages/@react-spectrum/s2/src/DatePicker.tsx

@@ -119,6 +119,9 @@ export const timeField = style({
   width: 'unset'
 });
 
+/**
+ * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ */
 export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(
   props: DatePickerProps<T>, ref: Ref<HTMLDivElement>
 ): ReactElement {

packages/@react-spectrum/s2/src/DateRangePicker.tsx

@@ -52,6 +52,10 @@ export interface DateRangePickerProps<T extends DateValue> extends
 
 export const DateRangePickerContext = createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);
 
+/**
+ * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
+ * to enter or select a date and time range.
+ */
 export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(
   props: DateRangePickerProps<T>, ref: Ref<HTMLDivElement>
 ): ReactElement {

packages/@react-spectrum/s2/src/RangeCalendar.tsx

@@ -64,6 +64,9 @@ const headerStyles = style({
   width: 'full'
 });
 
+/**
+ * RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.
+ */
 export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, RangeCalendarContext);
   let {

packages/@react-spectrum/s2/src/RangeSlider.tsx

@@ -45,6 +45,9 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
 
 export const RangeSliderContext = createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
+/**
+ * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
+ */
 export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, RangeSliderContext);

packages/@react-spectrum/s2/src/TimeField.tsx

@@ -41,6 +41,10 @@ export interface TimeFieldProps<T extends TimeValue> extends
 
 export const TimeFieldContext = createContext<ContextValue<Partial<TimeFieldProps<any>>, HTMLDivElement>>(null);
 
+/**
+ * TimeFields allow users to enter and edit time values using a keyboard.
+ * Each part of the time is displayed in an individually editable segment.
+ */
 export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function TimeField<T extends TimeValue>(
   props: TimeFieldProps<T>, ref: Ref<HTMLDivElement>
 ): ReactElement {

packages/@react-spectrum/s2/stories/Card.stories.tsx

@@ -52,6 +52,7 @@ const meta: Meta<CardProps & {isLoading?: boolean}> = {
 
 export default meta;
 type Story = StoryObj<typeof Card>;
+type UserCardStory = StoryObj<typeof UserCard>;
 
 export const Example: Story = {
   render: (args) => (
@@ -124,7 +125,7 @@ export const Asset: Story = {
   argTypes: specificArgTypes
 };
 
-export const User: Story = {
+export const User: UserCardStory = {
   render: (args) => (
     <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
       <UserCard {...args}>