Fix broken links in the storybook

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -23,8 +23,6 @@ body:
         required: true
       - label: README [page](https://github.com/aws/amazon-chime-sdk-component-library-react#readme)
         required: true
-      - label: How-to [documentation](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/story/how-tos--page)
-        required: true
       - label: React SDK meeting [demo](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting#readme---react-meeting-demo)
         required: true
   - type: textarea

.storybook/main.ts

@@ -29,6 +29,9 @@ const config: StorybookConfig = {
   },
   docs: {
     autodocs: true,
+    // Storybook 7 appends "--page" to the URL of auto-generated documentation.
+    // By default, Storybook uses the "Docs" name that would break all our existing links.
+    defaultName: 'Page',
   },
 };
 export default config;

src/components/introduction.mdx

@@ -6,7 +6,7 @@ import { Meta } from '@storybook/blocks';
 
 React components for building realtime meeting applications with Amazon Chime.
 
-- [UI Components](/docs/ui-components-badge--basic-badge)
+- [UI Components](/docs/ui-components-badge--page)
 - [SDK Components](/docs/sdk-components-introduction--page)
 - [UI Providers](/docs/ui-providers-notificationprovider--page)
 - [SDK Providers](/docs/sdk-providers-introduction--page)

src/components/sdk/MeetingControls/docs/AudioInputControl.mdx

@@ -10,7 +10,7 @@ These audio input options are provided by the `useAudioInputs` hook.
 
 When you click the button, the local audio input toggles between muted/unmuted state.
 
-You can use it in the [ControlBar component](/docs/ui-components-controlbar--control-bar) to build the meeting controls bar.
+You can use it in the [ControlBar component](/docs/ui-components-controlbar--page) to build the meeting controls bar.
 
 ## Importing
 

src/components/sdk/MeetingControls/docs/AudioInputVFControl.mdx

@@ -14,7 +14,7 @@ Amazon Voice Focus feature toggles between on/off state.
 
 If you want to apply Amazon Voice Focus feature, try this `AudioInputVFControl`. If not, `AudioInputControl` is a better choice.
 
-You can use it in the [ControlBar component](/docs/ui-components-controlbar--control-bar) to build the meeting controls bar.
+You can use it in the [ControlBar component](/docs/ui-components-controlbar--page) to build the meeting controls bar.
 
 ## Importing
 

src/components/sdk/MeetingControls/docs/AudioOutputControl.mdx

@@ -10,7 +10,7 @@ These audio output options are provided by the `useAudioOutputs` hook.
 
 When you click the button, the local audio output toggles between on/off state.
 
-You can use it in the [ControlBar component](/docs/ui-components-controlbar--control-bar) to build the meeting controls bar.
+You can use it in the [ControlBar component](/docs/ui-components-controlbar--page) to build the meeting controls bar.
 
 ## Importing
 

src/components/sdk/MeetingControls/docs/ContentShareControl.mdx

@@ -9,7 +9,7 @@ The `ContentShareControl` component renders a `ControlBarButton` with pop over m
 
 When you click the button, the content share toggles between on/off state.
 
-You can use it in the [ControlBar component](/docs/ui-components-controlbar--control-bar) to build the meeting controls bar.
+You can use it in the [ControlBar component](/docs/ui-components-controlbar--page) to build the meeting controls bar.
 
 ## Importing
 

src/components/sdk/MeetingControls/docs/VideoInputBackgroundBlurControl.mdx

@@ -18,7 +18,7 @@ This component must be used within `BackgroundBlurProvider` and `MeetingProvider
 
 When you click the button, the local video input toggles between on/off state.
 
-You can use it in the [ControlBar component](/docs/ui-components-controlbar--control-bar) to build the meeting controls bar.
+You can use it in the [ControlBar component](/docs/ui-components-controlbar--page) to build the meeting controls bar.
 
 ## Importing
 

src/components/sdk/MeetingControls/docs/VideoInputControl.mdx

@@ -10,7 +10,7 @@ These video input sources are provided by the `useVideoInputs` hook.
 
 When you click the button, the local video input toggles between on/off state.
 
-You can use it in the [ControlBar component](/docs/ui-components-controlbar--control-bar) to build the meeting controls bar.
+You can use it in the [ControlBar component](/docs/ui-components-controlbar--page) to build the meeting controls bar.
 
 ## Importing
 

src/components/sdk/RosterAttendee/RosterAttendee.mdx

@@ -5,7 +5,7 @@ import { RosterAttendee } from './';
 
 # RosterAttendee
 
-The `RosterAttendee` component renders a [RosterCell](?path=/docs/ui-components-roster--roster-cell) for a given attendee. It will display the attendee's name along with their mute, video, and content share status.
+The `RosterAttendee` component renders a [RosterCell](?path=/docs/ui-components-roster--page) for a given attendee. It will display the attendee's name along with their mute, video, and content share status.
 
 You have to provide the `MeetingManager` with a `getAttendee` function in order to get names. See the [MeetingManager](?path=/docs/sdk-providers-meetingmanager--page) for more information.
 

src/components/ui/ControlBar/ControlBar.mdx

@@ -17,7 +17,7 @@ The ControlBar component displays a section of controls with icons and labels.
 
 You can place ControlBar into the parent element according to the `layout` prop, e.g. `top`, `bottom`, `right`, `left`, `undocked-horizontal`, and `undocked-vertical`.
 
-The ControlBar component contains one or more `ControlBarButton` components, which can show a label and icon. You can add a dropdown list to each ControlBarButton by setting the [popOver props](/docs/ui-components-popover--basic-pop-over-menu).
+The ControlBar component contains one or more `ControlBarButton` components, which can show a label and icon. You can add a dropdown list to each ControlBarButton by setting the [popOver props](/docs/ui-components-popover--page).
 
 `ControlBarButton` support tooltips on any buttons by adding a `data-tooltip` property. Adding a `data-tooltip-position` property controls the tooltip position. The tooltip will render the `label` passed, unless a `tooltipContent` prop is passed.
 

src/components/ui/ControlBar/ControlBarButton.tsx

@@ -22,7 +22,7 @@ export interface ControlBarButtonProps
   onClick: () => void;
   /** The label of an control bar item. */
   label: string;
-  /** The items to render in a popover menu. When passed, the button will render an arrow to open or close a popover menu. Refer to [PopOverItem](/docs/ui-components-popover--basic-pop-over-menu) */
+  /** The items to render in a popover menu. When passed, the button will render an arrow to open or close a popover menu. Refer to [PopOverItem](/docs/ui-components-popover--page) */
   popOver?: PopOverItemProps[] | null;
   /** Defines the placement of PopOver menu. */
   popOverPlacement?: Placement;

src/components/ui/VideoGrid/VideoGrid.mdx

@@ -11,7 +11,7 @@ import * as VideoGridStories from './VideoGrid.stories.tsx';
 
 # VideoGrid
 
-The VideoGrid component adapts to screen size and orientation, ensuring consistent rendering of up to 25 [VideoTiles](/docs/ui-components-video-videotile--video-tiles).
+The VideoGrid component adapts to screen size and orientation, ensuring consistent rendering of up to 25 [VideoTile](/docs/ui-components-video-videotile--page).
 
 It also supports a 'featured' layout, which will give a single tile a larger portion of the available space, and lay out the other tiles as smaller, 'thumbnail' styled, videos.
 

src/hooks/introduction.mdx

@@ -61,7 +61,7 @@ const ContentShare () => => {
 
 ### Building a Roster
 
-_Note_ - You will need to have provided `meetingManager.getAttendee` with a function to fetch your attendee names, otherwise there will be no names in the roster. See the [MeetingManager documentation](/docs/providers-meetingmanager--page) for more information.
+_Note_ - You will need to have provided `meetingManager.getAttendee` with a function to fetch your attendee names, otherwise there will be no names in the roster. See the [MeetingManager documentation](/docs/sdk-providers-meetingmanager--page) for more information.
 
 ```jsx
 import { useRosterState, useAttendeeStatus } from 'amazon-chime-sdk-component-library-react';

src/providers/RosterProvider/docs/useRosterState.mdx

@@ -6,7 +6,7 @@ import { Meta } from '@storybook/blocks';
 
 The `useRosterState` hook returns the state of present attendees in a meeting, it is also referred as `Roster`.
 
-You have to provide the `MeetingManager` with a `getAttendee` function in order to get names in your roster. See the [MeetingManager](?path=/docs/providers-meetingmanager--page) for more information.
+You have to provide the `MeetingManager` with a `getAttendee` function in order to get names in your roster. See the [MeetingManager](?path=/docs/sdk-providers-meetingmanager--page) for more information.
 
 ### Return Value
 

src/providers/UserActivityProvider/docs/UserActivityProvider.mdx

@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # UserActivityProvider
 
-The `UserActivityProvider` provides the state of user activity by tracking mouse movements and focus events. The user activity state can be used to conditionally show/hide elements like the [ControlBar](?path=/docs/ui-components-controlbar--control-bar) component.
+The `UserActivityProvider` provides the state of user activity by tracking mouse movements and focus events. The user activity state can be used to conditionally show/hide elements like the [ControlBar](?path=/docs/ui-components-controlbar--page) component.
 
 ### State