[C-3349] Fix internal links (#6652)

packages/harmony/src/foundations/motion/Motion.stories.mdx

@@ -3,3 +3,5 @@ import { Meta, Title } from '@storybook/blocks'
 <Meta title='Foundations/Motion' />
 
 <Title>Motion</Title>
+
+TODO

packages/harmony/src/foundations/spacing/Spacing.stories.mdx

@@ -1,9 +1,9 @@
 import { useTheme } from '@emotion/react'
 import { Meta, Title, Unstyled } from '@storybook/blocks'
 
-import { Paper, Flex, Text, Box } from 'components'
+import { Paper, Flex, Text } from 'components'
 import spacingExample from 'storybook/assets/spacingExample.png'
-import { Heading, CardLink, RelatedFoundations } from 'storybook/components'
+import { Heading, RelatedFoundations } from 'storybook/components'
 
 <Meta title='Foundations/Spacing' />
 
@@ -74,22 +74,6 @@ export function SpacingExample(props) {
 
 </div>
 
-## Containers
-
-<Unstyled>
-  <Paper p='xl' direction='column' gap='2xl'>
-    <Box w={200}>
-      <CardLink
-        subtitle="I'm a title"
-        description="I'm a description."
-        link='/'
-      />
-    </Box>
-    <Text>Padding: XS | S | M | L | **XL** | 2XL | 3XL | 4XL</Text>
-    <Text>Vertical gap: XS | **S** | M | L | XL | 2XL | 3XL | 4XL</Text>
-  </Paper>
-</Unstyled>
-
 ## Usage and examples
 
 - Stay consistent with paddings and sizes across different UI components.

packages/harmony/src/storybook/Welcome.stories.mdx

@@ -45,12 +45,12 @@ Collaborative tools for designers and developers.
     }}
     title='Open Source Library'
     description='Our Audius Protocol Harmony package on Github'
-    href='https://github.com/AudiusProject/audius-protocol/tree/main/packages/harmony'
+    to={{ href: 'https://github.com/AudiusProject/audius-protocol/tree/main/packages/harmony' }}
   />
   <InformationBox
     title='Foundations'
     description="Harmony's core essence: type, color, spacing, shadows, and more."
-    href='/?path=/docs/foundations--documentation'
+    to={{kind: 'foundations', story: 'documentation'}}
     component={
       <Flex alignItems='center' gap='xl'>
         <Text variant='display' size='s'>
@@ -95,7 +95,7 @@ Collaborative tools for designers and developers.
   <InformationBox
     title='Components'
     description='Detailed information and guidelines on each component.'
-    href='/?path=/docs/components--documentation'
+    to={{kind: 'components', story: 'documentation'}}
     css={{ overflow: 'hidden' }}
     component={
       <Flex gap='l' alignItems='center' wrap='wrap'>
@@ -150,13 +150,17 @@ Empowering creativity with streamlined resources. Dive into our collaborative to
     title='Figma'
     description='Our public Figma library on Community.'
     component={<IconFigma css={{ width: 50 }} />}
-    href='https://www.figma.com/files/1105962599171830714/team/1167502323345567390/Team?fuid=1060287303847875173'
+    to={{
+      href: 'https://www.figma.com/files/1105962599171830714/team/1167502323345567390/Team?fuid=1060287303847875173'
+    }}
   />
   <InformationBox
     title='Github'
     description='Our open-source library on GitHub'
     component={<img css={{ width: 200 }} src={IconGitHub} />}
-    href='https://github.com/AudiusProject/audius-protocol/tree/main/packages/harmony'
+    to={{
+      href: 'https://github.com/AudiusProject/audius-protocol/tree/main/packages/harmony'
+    }}
   />
 </Flex>
 

packages/harmony/src/storybook/components/DeprecatedWarning.tsx

@@ -1,3 +1,4 @@
+import { Link } from './Link'
 import { Tip } from './Tip'
 
 const messages = {
@@ -9,21 +10,19 @@ const messages = {
 
 type DeprecatedWarningProps = {
   alternativeName: string
-  alternativeLink: string
+  alternativeLinkTo: { kind: string; story: string }
 }
 
 export const DeprecatedWarning = (props: DeprecatedWarningProps) => {
-  const { alternativeName, alternativeLink } = props
+  const { alternativeName, alternativeLinkTo } = props
 
   return (
     <Tip
       title={messages.title}
       description={
         <p css={{ margin: 0 }}>
           {messages.description}
-          <a href={alternativeLink} css={{ fontSize: `16px !important` }}>
-            {alternativeName}
-          </a>{' '}
+          <Link {...alternativeLinkTo}>{alternativeName}</Link>{' '}
           {messages.instead}
         </p>
       }

packages/harmony/src/storybook/components/InformationBox.tsx

@@ -12,11 +12,11 @@ type InformationBoxProps = {
   component: ReactNode
   title: string
   description: string
-  href?: string
+  to?: { kind: string; story: string } | { href: string }
 }
 
 export const InformationBox = (props: InformationBoxProps) => {
-  const { component = null, title, description, href, className } = props
+  const { component = null, title, description, to, className } = props
   const theme = useTheme()
   const titleCss = { fontSize: '24px !important' }
 
@@ -37,16 +37,14 @@ export const InformationBox = (props: InformationBoxProps) => {
         <Unstyled>{component}</Unstyled>
       </Flex>
       <Flex direction='column' pv='xl' ph='l' gap='s'>
-        {href ? (
-          <Link href={href} css={titleCss}>
+        {to ? (
+          <Link {...to} css={titleCss}>
             {title}
           </Link>
         ) : (
-          <Text
-            css={[titleCss, { color: `${theme.color.primary} !important` }]}
-          >
+          <p css={[titleCss, { color: `${theme.color.primary} !important` }]}>
             {title}
-          </Text>
+          </p>
         )}
         <Text>{description}</Text>
       </Flex>

packages/harmony/src/storybook/components/Link.tsx

@@ -1,38 +1,29 @@
-import { useCallback, MouseEvent, ComponentPropsWithoutRef } from 'react'
+import type { ReactNode } from 'react'
 
-import cn from 'classnames'
+import LinkTo from '@storybook/addon-links/react'
 
-import { Text, TextProps } from '../../components/text'
-
-import styles from './Link.module.css'
-
-type LinkProps = TextProps &
-  ComponentPropsWithoutRef<'a'> & {
-    stopPropagation?: boolean
-  }
+type LinkProps = { className?: string; children?: ReactNode } & (
+  | { href: string }
+  | { kind: string; story: string }
+)
 
 export const Link = (props: LinkProps) => {
-  const {
-    className,
-    onClick,
-    stopPropagation = true,
-    children,
-    ...other
-  } = props
+  const { className, children, ...other } = props
 
-  const handleClick = useCallback(
-    (e: MouseEvent<HTMLAnchorElement>) => {
-      onClick?.(e)
-      if (stopPropagation) {
-        e.stopPropagation()
-      }
-    },
-    [onClick, stopPropagation]
-  )
+  if ('href' in other) {
+    const { href } = other
+    return (
+      <a className={className} href={href} target='_blank' rel='noreferrer'>
+        {children}
+      </a>
+    )
+  }
 
+  const { kind, story } = other
   return (
-    <Text className={cn(styles.root, className)} {...other} asChild>
-      <a onClick={handleClick}>{children}</a>
-    </Text>
+    // @ts-expect-error className is available
+    <LinkTo className={className} kind={kind} story={story}>
+      {children}
+    </LinkTo>
   )
 }

packages/harmony/src/storybook/components/RelatedComponents.tsx

@@ -22,7 +22,10 @@ const relatedComponentsMap = {
     description:
       'Buttons allow users to trigger an action or event with a single click.',
     component: <Button>Button</Button>,
-    link: 'buttons-button--documentation'
+    to: {
+      kind: 'buttons-button',
+      story: 'documentation'
+    }
   },
   TextInput: {
     title: 'Text Input',
@@ -34,26 +37,26 @@ const relatedComponentsMap = {
         _isFocused
       />
     ),
-    link: 'inputs-textinput--documentation'
+    to: { kind: 'inputs-textinput', story: 'documentation' }
   },
   SelectablePill: {
     title: 'Selectable Pill',
     description: 'Used for binary selections',
     component: (
       <SelectablePill label='SelectablePill' size='large' isSelected={false} />
     ),
-    link: 'inputs-selectablepill--documentation'
+    to: { kind: 'inputs-selectablepill', story: 'documentation' }
   },
   PlainButton: {
     title: 'Plain Button',
     description:
       'The plain button is like our button component but without a bounding frame or container.',
     component: <PlainButton iconRight={IconCaretRight}>See More</PlainButton>,
-    link: 'buttons-plainbutton-beta--documentation'
+    to: { kind: 'buttons-plainbutton-beta', story: 'documentation' }
   },
   SocialButton: {
     component: <SocialButton socialType='instagram' aria-label='instagram' />,
-    link: 'buttons-socialbutton--documentation',
+    to: { kind: 'buttons-socialbutton', story: 'documentation' },
     description: 'A button that can connect a users socials.'
   },
   Divider: {
@@ -76,7 +79,7 @@ const relatedComponentsMap = {
     ),
     description:
       'A separator between two elements, usually consisting of a horizontal  or vertical line.',
-    link: 'layout-divider--documentation'
+    to: { kind: 'layout-divider', story: 'documentation' }
   },
   Avatar: {
     title: 'Avatar',
@@ -87,14 +90,14 @@ const relatedComponentsMap = {
         <Avatar src={shadowBackground} />
       </Box>
     ),
-    link: 'components-avatar--documentation'
+    to: { kind: 'components-avatar', story: 'documentation' }
   },
   Paper: {
     title: 'Paper',
     description:
       'Ensure layouts are consistent with our intuitive spacing system.',
     component: <Paper w={200} h={80} shadow='mid' />,
-    link: 'layout-paper--documentation'
+    to: { kind: 'layout-paper', story: 'documentation' }
   },
   Box: {
     component: (
@@ -109,7 +112,7 @@ const relatedComponentsMap = {
     ),
     description:
       'A simple layout component which adds pre-defined margin, padding, and borders',
-    link: 'layout-box--documentation'
+    to: { kind: 'layout-box', story: 'documentation' }
   },
   Flex: {
     component: (
@@ -128,20 +131,20 @@ const relatedComponentsMap = {
     ),
     description:
       'A layout component to handle flex behavior without manual styling.',
-    link: 'layout-flex--documentation'
+    to: { kind: 'layout-flex', story: 'documentation' }
   },
   FollowButton: {
     title: 'Follow Button',
     description: 'The Follow button allow users to hold an on or off state.',
     component: 'TODO',
-    link: 'TODO'
+    to: undefined
   },
   RadioInput: {
     title: 'Radio Input',
     description:
       'Radio buttons allow a user to select a single option from a list of predefined options.',
     component: 'TODO',
-    link: 'TODO'
+    to: undefined
   }
 }
 
@@ -162,14 +165,13 @@ export const RelatedComponents = (props: RelatedComponentsProps) => {
       justifyContent='space-between'
     >
       {componentNames.map((componentName) => {
-        const { component, link, description } =
+        const { component, to, description } =
           relatedComponentsMap[componentName]
-        const fullLink = `../?path=/docs/${link}`
         return (
           <InformationBox
             key={componentName}
             component={component}
-            href={fullLink}
+            to={to}
             title={componentName}
             description={description}
           />