From 9c9a4e55143ff6a7ecf4fd9a98ed8fc32b17617a Mon Sep 17 00:00:00 2001 From: Kyu Simm Date: Wed, 24 May 2023 15:14:50 -0700 Subject: [PATCH] Fix broken links in the storybook --- .github/ISSUE_TEMPLATE/bug-report.yaml | 2 -- .storybook/main.ts | 3 +++ src/components/introduction.mdx | 2 +- src/components/sdk/MeetingControls/docs/AudioInputControl.mdx | 2 +- .../sdk/MeetingControls/docs/AudioInputVFControl.mdx | 2 +- src/components/sdk/MeetingControls/docs/AudioOutputControl.mdx | 2 +- .../sdk/MeetingControls/docs/ContentShareControl.mdx | 2 +- .../MeetingControls/docs/VideoInputBackgroundBlurControl.mdx | 2 +- src/components/sdk/MeetingControls/docs/VideoInputControl.mdx | 2 +- src/components/sdk/RosterAttendee/RosterAttendee.mdx | 2 +- src/components/ui/ControlBar/ControlBar.mdx | 2 +- src/components/ui/ControlBar/ControlBarButton.tsx | 2 +- src/components/ui/VideoGrid/VideoGrid.mdx | 2 +- src/hooks/introduction.mdx | 2 +- src/providers/RosterProvider/docs/useRosterState.mdx | 2 +- .../UserActivityProvider/docs/UserActivityProvider.mdx | 2 +- 16 files changed, 17 insertions(+), 16 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug-report.yaml b/.github/ISSUE_TEMPLATE/bug-report.yaml index e21722ab7..dc0b39597 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yaml +++ b/.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 diff --git a/.storybook/main.ts b/.storybook/main.ts index cf02e71db..9c8c41187 100644 --- a/.storybook/main.ts +++ b/.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; diff --git a/src/components/introduction.mdx b/src/components/introduction.mdx index 3ba1b49db..b6407d967 100644 --- a/src/components/introduction.mdx +++ b/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) diff --git a/src/components/sdk/MeetingControls/docs/AudioInputControl.mdx b/src/components/sdk/MeetingControls/docs/AudioInputControl.mdx index d87a2b822..8491d75e1 100644 --- a/src/components/sdk/MeetingControls/docs/AudioInputControl.mdx +++ b/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 diff --git a/src/components/sdk/MeetingControls/docs/AudioInputVFControl.mdx b/src/components/sdk/MeetingControls/docs/AudioInputVFControl.mdx index c99c6819f..e9a44558c 100644 --- a/src/components/sdk/MeetingControls/docs/AudioInputVFControl.mdx +++ b/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 diff --git a/src/components/sdk/MeetingControls/docs/AudioOutputControl.mdx b/src/components/sdk/MeetingControls/docs/AudioOutputControl.mdx index 99201e67c..becb5b92b 100644 --- a/src/components/sdk/MeetingControls/docs/AudioOutputControl.mdx +++ b/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 diff --git a/src/components/sdk/MeetingControls/docs/ContentShareControl.mdx b/src/components/sdk/MeetingControls/docs/ContentShareControl.mdx index 57f7495e2..c0136a9e8 100644 --- a/src/components/sdk/MeetingControls/docs/ContentShareControl.mdx +++ b/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 diff --git a/src/components/sdk/MeetingControls/docs/VideoInputBackgroundBlurControl.mdx b/src/components/sdk/MeetingControls/docs/VideoInputBackgroundBlurControl.mdx index d9b479a86..89df10461 100644 --- a/src/components/sdk/MeetingControls/docs/VideoInputBackgroundBlurControl.mdx +++ b/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 diff --git a/src/components/sdk/MeetingControls/docs/VideoInputControl.mdx b/src/components/sdk/MeetingControls/docs/VideoInputControl.mdx index b1c001a03..6bf6383a4 100644 --- a/src/components/sdk/MeetingControls/docs/VideoInputControl.mdx +++ b/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 diff --git a/src/components/sdk/RosterAttendee/RosterAttendee.mdx b/src/components/sdk/RosterAttendee/RosterAttendee.mdx index d9dc52023..da556021a 100644 --- a/src/components/sdk/RosterAttendee/RosterAttendee.mdx +++ b/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. diff --git a/src/components/ui/ControlBar/ControlBar.mdx b/src/components/ui/ControlBar/ControlBar.mdx index 10ee3b51f..96f3c6268 100644 --- a/src/components/ui/ControlBar/ControlBar.mdx +++ b/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. diff --git a/src/components/ui/ControlBar/ControlBarButton.tsx b/src/components/ui/ControlBar/ControlBarButton.tsx index c68f9bfbb..526435288 100644 --- a/src/components/ui/ControlBar/ControlBarButton.tsx +++ b/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; diff --git a/src/components/ui/VideoGrid/VideoGrid.mdx b/src/components/ui/VideoGrid/VideoGrid.mdx index cdf46783b..6850fa9b6 100644 --- a/src/components/ui/VideoGrid/VideoGrid.mdx +++ b/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. diff --git a/src/hooks/introduction.mdx b/src/hooks/introduction.mdx index d24e0e9f6..eb08025f4 100644 --- a/src/hooks/introduction.mdx +++ b/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'; diff --git a/src/providers/RosterProvider/docs/useRosterState.mdx b/src/providers/RosterProvider/docs/useRosterState.mdx index f3381471e..d20613be8 100644 --- a/src/providers/RosterProvider/docs/useRosterState.mdx +++ b/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 diff --git a/src/providers/UserActivityProvider/docs/UserActivityProvider.mdx b/src/providers/UserActivityProvider/docs/UserActivityProvider.mdx index 5bad1c9fe..e9dbaa1a5 100644 --- a/src/providers/UserActivityProvider/docs/UserActivityProvider.mdx +++ b/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