Adding docs links in intellisense (#2024)

dbanksdesign · web-flow · commit 93bd65f62b81 · 2022-06-02T14:24:20.000-07:00
diff --git a/docs/src/pages/[platform]/components/icon/index.page.mdx b/docs/src/pages/[platform]/components/icon/index.page.mdx
@@ -1,6 +1,8 @@
 ---
 title: Icon
 description: The icon component displays simple vector graphics for use in other components like Buttons.
+themeSource: packages/ui/src/theme/tokens/components/icon.ts
+reactSource: packages/react/src/primitives/Icon/Icon.tsx
 supportedFrameworks: react
 ---
 
diff --git a/docs/src/pages/[platform]/components/image/index.page.mdx b/docs/src/pages/[platform]/components/image/index.page.mdx
@@ -1,6 +1,8 @@
 ---
 title: Image
 description: The Image primitive can be used to display responsive images.
+themeSource: packages/ui/src/theme/tokens/components/image.ts
+reactSource: packages/react/src/primitives/Image/Image.tsx
 supportedFrameworks: react
 ---
 
diff --git a/packages/react/src/components/Authenticator/Authenticator.tsx b/packages/react/src/components/Authenticator/Authenticator.tsx
@@ -38,6 +38,9 @@ function InitMachine({
   return <>{children}</>;
 }
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/authenticator)
+ */
 export function Authenticator({
   children,
   className,
diff --git a/packages/react/src/components/Authenticator/hooks/useAuthenticator/index.tsx b/packages/react/src/components/Authenticator/hooks/useAuthenticator/index.tsx
@@ -101,6 +101,9 @@ const useAuthenticatorService = () => {
   return service;
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/authenticator#useauthenticator-hook)
+ */
 export const useAuthenticator = (selector?: Selector) => {
   const service = useAuthenticatorService();
 
diff --git a/packages/react/src/components/Authenticator/withAuthenticator.tsx b/packages/react/src/components/Authenticator/withAuthenticator.tsx
@@ -2,6 +2,9 @@ import { Authenticator, AuthenticatorProps } from './Authenticator';
 
 export type WithAuthenticatorOptions = Omit<AuthenticatorProps, 'children'>;
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/authenticator)
+ */
 export function withAuthenticator<Props>(
   Component: (props?: Props) => JSX.Element,
   options: WithAuthenticatorOptions = {}
diff --git a/packages/react/src/components/Geo/LocationSearch/index.tsx b/packages/react/src/components/Geo/LocationSearch/index.tsx
@@ -19,7 +19,9 @@ type AmplifyLocationSearch = IControl & {
 };
 
 /**
- * The `<LocationSearch>` component provides location search. See https://ui.docs.amplify.aws/components/geo#geocoder.
+ * The `<LocationSearch>` component provides location search.
+ *
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/geo#location-search)
  *
  * @example
  * // Used as a map control:
diff --git a/packages/react/src/components/Geo/MapView/index.tsx b/packages/react/src/components/Geo/MapView/index.tsx
@@ -15,6 +15,8 @@ export type MapViewProps = Omit<MapProps, 'transformRequest'>;
  * [react-map-gl default Map](https://visgl.github.io/react-map-gl/docs/api-reference/map), it accepts the same
  * properties except `transformRequest` which is set by Amplify.
  *
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/geo#mapview)
+ *
  * @example
  * // Basic usage of MapView:
  * function App() {
diff --git a/packages/react/src/components/ThemeProvider/index.tsx b/packages/react/src/components/ThemeProvider/index.tsx
@@ -127,4 +127,7 @@ export function AmplifyProvider({
   );
 }
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/theming)
+ */
 export const ThemeProvider = AmplifyProvider;
diff --git a/packages/react/src/hooks/useBreakpointValue.ts b/packages/react/src/hooks/useBreakpointValue.ts
@@ -3,6 +3,9 @@ import { getValueAtCurrentBreakpoint } from '../primitives/shared/responsive/uti
 import { useBreakpoint } from '../primitives/shared/responsive/useBreakpoint';
 import { useTheme } from './useTheme';
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/theming/responsive#usebreakpointvalue)
+ */
 export function useBreakpointValue<T>(
   values: Record<string, T> | T[],
   defaultBreakpoint?: Breakpoint
diff --git a/packages/react/src/hooks/useTheme.ts b/packages/react/src/hooks/useTheme.ts
@@ -6,6 +6,9 @@ import {
   AmplifyContextType,
 } from '../components/ThemeProvider/AmplifyContext';
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/theming)
+ */
 export const useTheme = (): WebTheme => {
   const context = React.useContext(AmplifyContext);
   return getThemeFromContext(context);
diff --git a/packages/react/src/primitives/Alert/Alert.tsx b/packages/react/src/primitives/Alert/Alert.tsx
@@ -69,6 +69,9 @@ const AlertPrimitive: Primitive<AlertProps, typeof Flex> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/alert)
+ */
 export const Alert = React.forwardRef(AlertPrimitive);
 
 Alert.displayName = 'Alert';
diff --git a/packages/react/src/primitives/Badge/Badge.tsx b/packages/react/src/primitives/Badge/Badge.tsx
@@ -31,6 +31,9 @@ const BadgePrimitive: Primitive<BadgeProps, 'span'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/badge)
+ */
 export const Badge = React.forwardRef(BadgePrimitive);
 
 Badge.displayName = 'Badge';
diff --git a/packages/react/src/primitives/Button/Button.tsx b/packages/react/src/primitives/Button/Button.tsx
@@ -67,6 +67,9 @@ const ButtonPrimitive: Primitive<ButtonProps, 'button'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/button)
+ */
 export const Button = React.forwardRef(ButtonPrimitive);
 
 Button.displayName = 'Button';
diff --git a/packages/react/src/primitives/ButtonGroup/ButtonGroup.tsx b/packages/react/src/primitives/ButtonGroup/ButtonGroup.tsx
@@ -24,6 +24,9 @@ const ButtonGroupPrimitive: Primitive<ButtonGroupProps, typeof Flex> = (
   </Flex>
 );
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/button#buttongroup)
+ */
 export const ButtonGroup = React.forwardRef(ButtonGroupPrimitive);
 
 ButtonGroup.displayName = 'ButtonGroup';
diff --git a/packages/react/src/primitives/Card/Card.tsx b/packages/react/src/primitives/Card/Card.tsx
@@ -26,6 +26,9 @@ const CardPrimitive: Primitive<CardProps, 'div'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/card)
+ */
 export const Card = React.forwardRef(CardPrimitive);
 
 Card.displayName = 'Card';
diff --git a/packages/react/src/primitives/CheckboxField/CheckboxField.tsx b/packages/react/src/primitives/CheckboxField/CheckboxField.tsx
@@ -47,6 +47,9 @@ const CheckboxFieldPrimitive: Primitive<CheckboxFieldProps, 'input'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/checkboxfield)
+ */
 export const CheckboxField = React.forwardRef(CheckboxFieldPrimitive);
 
 CheckboxField.displayName = 'CheckboxField';
diff --git a/packages/react/src/primitives/Collection/Collection.tsx b/packages/react/src/primitives/Collection/Collection.tsx
@@ -37,6 +37,9 @@ const GridCollection = <Item,>({
   <Grid {...rest}>{Array.isArray(items) ? items.map(children) : null}</Grid>
 );
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/collection)
+ */
 export const Collection = <Item,>({
   className,
   isSearchable,
diff --git a/packages/react/src/primitives/Divider/Divider.tsx b/packages/react/src/primitives/Divider/Divider.tsx
@@ -31,6 +31,9 @@ const DividerPrimitive: Primitive<DividerProps, 'hr'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/divider)
+ */
 export const Divider = React.forwardRef(DividerPrimitive);
 
 Divider.displayName = 'Divider';
diff --git a/packages/react/src/primitives/Expander/Expander.tsx b/packages/react/src/primitives/Expander/Expander.tsx
@@ -59,6 +59,9 @@ const ExpanderPrimitive: Primitive<ExpanderProps, typeof Root> = (
   return expander;
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/expander)
+ */
 export const Expander = React.forwardRef(ExpanderPrimitive);
 
 Expander.displayName = 'Expander';
diff --git a/packages/react/src/primitives/Flex/Flex.tsx b/packages/react/src/primitives/Flex/Flex.tsx
@@ -18,6 +18,9 @@ const FlexPrimitive: Primitive<FlexProps, 'div'> = (
   </View>
 );
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/flex)
+ */
 export const Flex = React.forwardRef(FlexPrimitive);
 
 Flex.displayName = 'Flex';
diff --git a/packages/react/src/primitives/Grid/Grid.tsx b/packages/react/src/primitives/Grid/Grid.tsx
@@ -18,6 +18,9 @@ const GridPrimitive: Primitive<GridProps, 'div'> = (
   </View>
 );
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/grid)
+ */
 export const Grid = React.forwardRef(GridPrimitive);
 
 Grid.displayName = 'Grid';
diff --git a/packages/react/src/primitives/Heading/Heading.tsx b/packages/react/src/primitives/Heading/Heading.tsx
@@ -39,6 +39,9 @@ const HeadingPrimitive: Primitive<HeadingProps, HeadingTag> = (
   </View>
 );
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/heading)
+ */
 export const Heading = React.forwardRef(HeadingPrimitive);
 
 Heading.displayName = 'Heading';
diff --git a/packages/react/src/primitives/Icon/Icon.tsx b/packages/react/src/primitives/Icon/Icon.tsx
@@ -54,6 +54,9 @@ const IconPrimitive: Primitive<IconProps, 'svg'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/icon)
+ */
 export const Icon = React.forwardRef(IconPrimitive);
 
 Icon.displayName = 'Icon';
diff --git a/packages/react/src/primitives/Image/Image.tsx b/packages/react/src/primitives/Image/Image.tsx
@@ -17,6 +17,9 @@ const ImagePrimitive: Primitive<ImageProps, 'img'> = (
   />
 );
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/image)
+ */
 export const Image = React.forwardRef(ImagePrimitive);
 
 Image.displayName = 'Image';
diff --git a/packages/react/src/primitives/Link/Link.tsx b/packages/react/src/primitives/Link/Link.tsx
@@ -24,6 +24,9 @@ const LinkPrimitive: Primitive<LinkProps, 'a'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/link)
+ */
 export const Link = React.forwardRef(LinkPrimitive);
 
 Link.displayName = 'Link';
diff --git a/packages/react/src/primitives/Loader/Loader.tsx b/packages/react/src/primitives/Loader/Loader.tsx
@@ -145,6 +145,9 @@ const LoaderPrimitive: Primitive<LoaderProps, 'svg'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/loader)
+ */
 export const Loader = React.forwardRef(LoaderPrimitive);
 
 Loader.displayName = 'Loader';
diff --git a/packages/react/src/primitives/Menu/Menu.tsx b/packages/react/src/primitives/Menu/Menu.tsx
@@ -60,6 +60,9 @@ const MenuPrimitive: Primitive<MenuProps, 'div'> = (
   </DropdownMenu>
 );
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
+ */
 export const Menu = React.forwardRef(MenuPrimitive);
 
 Menu.displayName = 'Menu';
diff --git a/packages/react/src/primitives/Menu/MenuButton.tsx b/packages/react/src/primitives/Menu/MenuButton.tsx
@@ -7,6 +7,9 @@ import { ButtonProps, PrimitiveProps } from '../types';
 import { ComponentClassNames } from '../shared/constants';
 import { useStyles } from '../shared/styleUtils';
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
+ */
 export const MenuButton = React.forwardRef<
   HTMLButtonElement,
   PrimitiveProps<ButtonProps, 'button'>
diff --git a/packages/react/src/primitives/Menu/MenuItem.tsx b/packages/react/src/primitives/Menu/MenuItem.tsx
@@ -8,6 +8,9 @@ import { MenuItemProps } from '../types';
 
 export const MENU_ITEM_TEST_ID = 'amplify-menu-item-test-id';
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
+ */
 export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
   ({ children, className, variation, ...rest }, ref) => {
     return (
diff --git a/packages/react/src/primitives/Pagination/Pagination.tsx b/packages/react/src/primitives/Pagination/Pagination.tsx
@@ -53,6 +53,9 @@ const PaginationPrimitive: Primitive<PaginationProps, 'nav'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/pagination)
+ */
 export const Pagination = React.forwardRef(PaginationPrimitive);
 
 Pagination.displayName = 'Pagination';
diff --git a/packages/react/src/primitives/PasswordField/PasswordField.tsx b/packages/react/src/primitives/PasswordField/PasswordField.tsx
@@ -56,6 +56,9 @@ const PasswordFieldPrimitive: Primitive<PasswordFieldProps, 'input'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/passwordfield)
+ */
 export const PasswordField = React.forwardRef(PasswordFieldPrimitive);
 
 PasswordField.displayName = 'PasswordField';
diff --git a/packages/react/src/primitives/PhoneNumberField/PhoneNumberField.tsx b/packages/react/src/primitives/PhoneNumberField/PhoneNumberField.tsx
@@ -62,6 +62,9 @@ const PhoneNumberFieldPrimitive: Primitive<PhoneNumberFieldProps, 'input'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/phonenumberfield)
+ */
 export const PhoneNumberField = React.forwardRef(PhoneNumberFieldPrimitive);
 
 PhoneNumberField.displayName = 'PhoneNumberField';
diff --git a/packages/react/src/primitives/Placeholder/Placeholder.tsx b/packages/react/src/primitives/Placeholder/Placeholder.tsx
@@ -28,6 +28,9 @@ const PlaceholderPrimitive: Primitive<PlaceholderProps, 'div'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/placeholder)
+ */
 export const Placeholder = React.forwardRef(PlaceholderPrimitive);
 
 Placeholder.displayName = 'Placeholder';
diff --git a/packages/react/src/primitives/RadioGroupField/RadioGroupField.tsx b/packages/react/src/primitives/RadioGroupField/RadioGroupField.tsx
@@ -101,6 +101,9 @@ const RadioGroupFieldPrimitive: Primitive<RadioGroupFieldProps, typeof Flex> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/radiogroupfield)
+ */
 export const RadioGroupField = React.forwardRef(RadioGroupFieldPrimitive);
 
 RadioGroupField.displayName = 'RadioGroupField';
diff --git a/packages/react/src/primitives/Rating/Rating.tsx b/packages/react/src/primitives/Rating/Rating.tsx
@@ -80,6 +80,9 @@ const RatingPrimitive: Primitive<RatingProps, typeof Flex> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/rating)
+ */
 export const Rating = React.forwardRef(RatingPrimitive);
 
 Rating.displayName = 'Rating';
diff --git a/packages/react/src/primitives/ScrollView/ScrollView.tsx b/packages/react/src/primitives/ScrollView/ScrollView.tsx
@@ -24,6 +24,9 @@ const ScrollViewPrimitive: Primitive<ScrollViewProps, 'div'> = (
   </View>
 );
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/scrollview)
+ */
 export const ScrollView = React.forwardRef(ScrollViewPrimitive);
 
 ScrollView.displayName = 'ScrollView';
diff --git a/packages/react/src/primitives/SearchField/SearchField.tsx b/packages/react/src/primitives/SearchField/SearchField.tsx
@@ -61,6 +61,9 @@ const SearchFieldPrimitive: Primitive<SearchFieldProps, 'input'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/searchfield)
+ */
 export const SearchField = React.forwardRef(SearchFieldPrimitive);
 
 SearchField.displayName = 'SearchField';
diff --git a/packages/react/src/primitives/SelectField/SelectField.tsx b/packages/react/src/primitives/SelectField/SelectField.tsx
@@ -96,6 +96,9 @@ const SelectFieldPrimitive: Primitive<SelectFieldProps, 'select'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/selectfield)
+ */
 export const SelectField = React.forwardRef(SelectFieldPrimitive);
 
 SelectField.displayName = 'SelectField';
diff --git a/packages/react/src/primitives/SliderField/SliderField.tsx b/packages/react/src/primitives/SliderField/SliderField.tsx
@@ -171,6 +171,9 @@ const SliderFieldPrimitive: Primitive<SliderFieldProps, typeof Root> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/sliderfield)
+ */
 export const SliderField = React.forwardRef(SliderFieldPrimitive);
 
 SliderField.displayName = 'SliderField';
diff --git a/packages/react/src/primitives/StepperField/StepperField.tsx b/packages/react/src/primitives/StepperField/StepperField.tsx
@@ -179,6 +179,9 @@ const StepperFieldPrimitive: Primitive<StepperFieldProps, 'input'> = (
   );
 };
 
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/stepperfield)
+ */
 export const StepperField = React.forwardRef(StepperFieldPrimitive);
 
 StepperField.displayName = 'StepperField';
diff --git a/packages/react/src/primitives/SwitchField/SwitchField.tsx b/packages/react/src/primitives/SwitchField/SwitchField.tsx
diff --git a/packages/react/src/primitives/Table/Table.tsx b/packages/react/src/primitives/Table/Table.tsx
diff --git a/packages/react/src/primitives/Tabs/Tabs.tsx b/packages/react/src/primitives/Tabs/Tabs.tsx
diff --git a/packages/react/src/primitives/Text/Text.tsx b/packages/react/src/primitives/Text/Text.tsx
diff --git a/packages/react/src/primitives/TextAreaField/TextAreaField.tsx b/packages/react/src/primitives/TextAreaField/TextAreaField.tsx
diff --git a/packages/react/src/primitives/TextField/TextField.tsx b/packages/react/src/primitives/TextField/TextField.tsx
diff --git a/packages/react/src/primitives/ToggleButton/ToggleButton.tsx b/packages/react/src/primitives/ToggleButton/ToggleButton.tsx
diff --git a/packages/react/src/primitives/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/react/src/primitives/ToggleButtonGroup/ToggleButtonGroup.tsx
diff --git a/packages/react/src/primitives/View/View.tsx b/packages/react/src/primitives/View/View.tsx
diff --git a/packages/react/src/primitives/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/primitives/VisuallyHidden/VisuallyHidden.tsx

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,9 @@ function InitMachine({`
`38`	`38`	`return <>{children}</>;`
`39`	`39`	`}`
`40`	`40`
	`41`	`+/**`
	`42`	`+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/authenticator)`
	`43`	`+ */`
`41`	`44`	`export function Authenticator({`
`42`	`45`	`children,`
`43`	`46`	`className,`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,8 @@ export type MapViewProps = Omit<MapProps, 'transformRequest'>;`
`15`	`15`	`* [react-map-gl default Map](https://visgl.github.io/react-map-gl/docs/api-reference/map), it accepts the same`
`16`	`16`	* properties except `transformRequest` which is set by Amplify.
`17`	`17`	`*`
	`18`	`+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/geo#mapview)`
	`19`	`+ *`
`18`	`20`	`* @example`
`19`	`21`	`* // Basic usage of MapView:`
`20`	`22`	`* function App() {`
Original file line number	Diff line number	Diff line change
`@@ -127,4 +127,7 @@ export function AmplifyProvider({`
`127`	`127`	`);`
`128`	`128`	`}`
`129`	`129`
	`130`	`+/**`
	`131`	`+ * [📖 Docs](https://ui.docs.amplify.aws/react/theming)`
	`132`	`+ */`
`130`	`133`	`export const ThemeProvider = AmplifyProvider;`