From 0159227befa16188bc9fa86bdb57b054c5c509b6 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Sat, 31 Aug 2024 14:31:47 +0900
Subject: [PATCH 1/4] refactor(site/system): simplify the file structure

---
 site/src/system/{Box => }/Box.tsx             |  4 ++--
 .../system/{ButtonLink => }/ButtonLink.css.ts |  4 ++--
 .../system/{ButtonLink => }/ButtonLink.tsx    |  6 ++---
 site/src/system/{Columns => }/Columns.tsx     | 23 +++++++++----------
 .../{ContentBlock => }/ContentBlock.css.ts    |  0
 .../{ContentBlock => }/ContentBlock.tsx       | 15 ++++++------
 site/src/system/{Stack => }/Stack.tsx         | 15 +++++-------
 site/src/system/index.ts                      | 11 +++++----
 site/src/system/styles/index.ts               |  2 ++
 9 files changed, 40 insertions(+), 40 deletions(-)
 rename site/src/system/{Box => }/Box.tsx (94%)
 rename site/src/system/{ButtonLink => }/ButtonLink.css.ts (92%)
 rename site/src/system/{ButtonLink => }/ButtonLink.tsx (93%)
 rename site/src/system/{Columns => }/Columns.tsx (95%)
 rename site/src/system/{ContentBlock => }/ContentBlock.css.ts (100%)
 rename site/src/system/{ContentBlock => }/ContentBlock.tsx (81%)
 rename site/src/system/{Stack => }/Stack.tsx (76%)
 create mode 100644 site/src/system/styles/index.ts

diff --git a/site/src/system/Box/Box.tsx b/site/src/system/Box.tsx
similarity index 94%
rename from site/src/system/Box/Box.tsx
rename to site/src/system/Box.tsx
index 30f9f1bb8..f3ee0d3bd 100644
--- a/site/src/system/Box/Box.tsx
+++ b/site/src/system/Box.tsx
@@ -1,7 +1,7 @@
 import { createElement, AllHTMLAttributes, ElementType } from 'react';
 import classnames from 'classnames';
-import * as resetStyles from '../styles/reset.css';
-import { sprinkles, Sprinkles } from '../styles/sprinkles.css';
+import * as resetStyles from './styles/reset.css';
+import { sprinkles, Sprinkles } from './styles/sprinkles.css';
 
 export interface BoxProps
   extends Omit<
diff --git a/site/src/system/ButtonLink/ButtonLink.css.ts b/site/src/system/ButtonLink.css.ts
similarity index 92%
rename from site/src/system/ButtonLink/ButtonLink.css.ts
rename to site/src/system/ButtonLink.css.ts
index 11fb593ac..4d27c4279 100644
--- a/site/src/system/ButtonLink/ButtonLink.css.ts
+++ b/site/src/system/ButtonLink.css.ts
@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '../../themes.css';
-import { darkMode } from '../styles/sprinkles.css';
+import { vars } from '../themes.css';
+import { darkMode } from './styles';
 
 export const button = style({
   textDecoration: 'none',
diff --git a/site/src/system/ButtonLink/ButtonLink.tsx b/site/src/system/ButtonLink.tsx
similarity index 93%
rename from site/src/system/ButtonLink/ButtonLink.tsx
rename to site/src/system/ButtonLink.tsx
index 2cb752597..b349661a4 100644
--- a/site/src/system/ButtonLink/ButtonLink.tsx
+++ b/site/src/system/ButtonLink.tsx
@@ -2,11 +2,11 @@ import { ReactNode } from 'react';
 import classnames from 'classnames';
 import { Link, NavLinkProps } from 'react-router-dom';
 import { HashLink } from 'react-router-hash-link';
-import { Box } from '..';
+import { Box } from '.';
 import * as styles from './ButtonLink.css';
-import { sprinkles } from '../styles/sprinkles.css';
+import { sprinkles } from './styles';
 
-interface ButtonLinkProps extends NavLinkProps {
+export interface ButtonLinkProps extends NavLinkProps {
   variant?: 'solid' | 'transparent';
   icon?: ReactNode;
   children: ReactNode;
diff --git a/site/src/system/Columns/Columns.tsx b/site/src/system/Columns.tsx
similarity index 95%
rename from site/src/system/Columns/Columns.tsx
rename to site/src/system/Columns.tsx
index 8d8c3e58f..99216d195 100644
--- a/site/src/system/Columns/Columns.tsx
+++ b/site/src/system/Columns.tsx
@@ -1,19 +1,10 @@
 import { Children, ReactNode } from 'react';
-import { Box } from '../Box/Box';
+import { Box } from './Box';
 import {
   mapResponsiveValue,
   ResponsiveValue,
   Space,
-} from '../styles/sprinkles.css';
-
-interface Props {
-  children: ReactNode;
-  space: Space;
-  alignY?: ResponsiveValue<'top' | 'center' | 'bottom'>;
-  reverseX?: boolean;
-  collapseOnMobile?: boolean;
-  collapseOnTablet?: boolean;
-}
+} from './styles/sprinkles.css';
 
 const alignYToFlexAlign = {
   top: 'flex-start',
@@ -24,6 +15,14 @@ const alignYToFlexAlign = {
 const negate = (space: Space) =>
   space === 'none' ? ('none' as const) : (`-${space}` as const);
 
+export interface ColumnsProps {
+  children: ReactNode;
+  space: Space;
+  alignY?: ResponsiveValue<'top' | 'center' | 'bottom'>;
+  reverseX?: boolean;
+  collapseOnMobile?: boolean;
+  collapseOnTablet?: boolean;
+}
 export const Columns = ({
   children,
   space,
@@ -31,7 +30,7 @@ export const Columns = ({
   collapseOnTablet = false,
   reverseX = false,
   alignY = 'top',
-}: Props) => {
+}: ColumnsProps) => {
   const columns = Children.toArray(children);
   const row = reverseX ? 'row-reverse' : 'row';
 
diff --git a/site/src/system/ContentBlock/ContentBlock.css.ts b/site/src/system/ContentBlock.css.ts
similarity index 100%
rename from site/src/system/ContentBlock/ContentBlock.css.ts
rename to site/src/system/ContentBlock.css.ts
diff --git a/site/src/system/ContentBlock/ContentBlock.tsx b/site/src/system/ContentBlock.tsx
similarity index 81%
rename from site/src/system/ContentBlock/ContentBlock.tsx
rename to site/src/system/ContentBlock.tsx
index b06ae391b..c59ee9189 100644
--- a/site/src/system/ContentBlock/ContentBlock.tsx
+++ b/site/src/system/ContentBlock.tsx
@@ -1,17 +1,18 @@
 import { ReactNode } from 'react';
-import { Box } from '../';
+import { Box, type BoxProps } from './Box';
 import * as styles from './ContentBlock.css';
-import { BoxProps } from '../Box/Box';
+
+export interface ContentBlockProps {
+  children: ReactNode;
+  withGutters?: boolean;
+  size?: BoxProps['maxWidth'];
+}
 
 export const ContentBlock = ({
   children,
   withGutters = false,
   size = 'standard',
-}: {
-  children: ReactNode;
-  withGutters?: boolean;
-  size?: BoxProps['maxWidth'];
-}) => {
+}: ContentBlockProps) => {
   return (
     <Box
       maxWidth={size}
diff --git a/site/src/system/Stack/Stack.tsx b/site/src/system/Stack.tsx
similarity index 76%
rename from site/src/system/Stack/Stack.tsx
rename to site/src/system/Stack.tsx
index a9ff9918d..d15372a82 100644
--- a/site/src/system/Stack/Stack.tsx
+++ b/site/src/system/Stack.tsx
@@ -1,7 +1,6 @@
 import { Children, ReactNode } from 'react';
-import { Box } from '../';
-import { BoxProps } from '../Box/Box';
-import { mapResponsiveValue, ResponsiveValue } from '../styles/sprinkles.css';
+import { Box, type BoxProps } from './Box';
+import { mapResponsiveValue, ResponsiveValue } from './styles/sprinkles.css';
 
 const alignToFlexAlign = {
   left: 'flex-start',
@@ -9,15 +8,13 @@ const alignToFlexAlign = {
   right: 'flex-end',
 } as const;
 
-export const Stack = ({
-  children,
-  space,
-  align,
-}: {
+export interface StackProps {
   children: ReactNode;
   space: BoxProps['paddingBottom'];
   align?: ResponsiveValue<'left' | 'center' | 'right'>;
-}) => {
+}
+
+export const Stack = ({ children, space, align }: StackProps) => {
   const stackItems = Children.toArray(children);
   const alignItems = align
     ? mapResponsiveValue(align, (value) => alignToFlexAlign[value])
diff --git a/site/src/system/index.ts b/site/src/system/index.ts
index 345b996c2..cdeaea051 100644
--- a/site/src/system/index.ts
+++ b/site/src/system/index.ts
@@ -1,5 +1,6 @@
-export { Box } from './Box/Box';
-export { ButtonLink } from './ButtonLink/ButtonLink';
-export { ContentBlock } from './ContentBlock/ContentBlock';
-export { Columns } from './Columns/Columns';
-export { Stack } from './Stack/Stack';
+export * from './styles';
+export { Box, type BoxProps } from './Box';
+export { ButtonLink, type ButtonLinkProps } from './ButtonLink';
+export { Columns, type ColumnsProps } from './Columns';
+export { ContentBlock, type ContentBlockProps } from './ContentBlock';
+export { Stack, type StackProps } from './Stack';
diff --git a/site/src/system/styles/index.ts b/site/src/system/styles/index.ts
new file mode 100644
index 000000000..b0fc1c3c3
--- /dev/null
+++ b/site/src/system/styles/index.ts
@@ -0,0 +1,2 @@
+export * from './reset.css';
+export * from './sprinkles.css';

From 729cae3e160274bd22712a846deb0670ab25a97e Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Sat, 31 Aug 2024 14:51:45 +0900
Subject: [PATCH 2/4] refactor(site/typography): rename Typography to
 typography, add index.ts like system, unify with export arrow func style

---
 site/src/{Typography => typography}/Heading.tsx     |  2 +-
 site/src/{Typography => typography}/Link.css.ts     |  0
 site/src/{Typography => typography}/Link.tsx        | 13 ++++++++-----
 site/src/{Typography => typography}/Text.tsx        |  2 +-
 site/src/typography/index.ts                        |  8 ++++++++
 .../{Typography => typography}/typography.css.ts    |  0
 6 files changed, 18 insertions(+), 7 deletions(-)
 rename site/src/{Typography => typography}/Heading.tsx (94%)
 rename site/src/{Typography => typography}/Link.css.ts (100%)
 rename site/src/{Typography => typography}/Link.tsx (87%)
 rename site/src/{Typography => typography}/Text.tsx (98%)
 create mode 100644 site/src/typography/index.ts
 rename site/src/{Typography => typography}/typography.css.ts (100%)

diff --git a/site/src/Typography/Heading.tsx b/site/src/typography/Heading.tsx
similarity index 94%
rename from site/src/Typography/Heading.tsx
rename to site/src/typography/Heading.tsx
index 1171f0c9d..43bbf7a8c 100644
--- a/site/src/Typography/Heading.tsx
+++ b/site/src/typography/Heading.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 import * as styles from './typography.css';
 import { Box } from '../system';
-import { sprinkles, Sprinkles } from '../system/styles/sprinkles.css';
+import { sprinkles, Sprinkles } from '../system/styles';
 
 export type HeadingLevel = keyof typeof styles.heading;
 
diff --git a/site/src/Typography/Link.css.ts b/site/src/typography/Link.css.ts
similarity index 100%
rename from site/src/Typography/Link.css.ts
rename to site/src/typography/Link.css.ts
diff --git a/site/src/Typography/Link.tsx b/site/src/typography/Link.tsx
similarity index 87%
rename from site/src/Typography/Link.tsx
rename to site/src/typography/Link.tsx
index 94635a54a..ed1dc4311 100644
--- a/site/src/Typography/Link.tsx
+++ b/site/src/typography/Link.tsx
@@ -1,11 +1,14 @@
-import { Link, LinkProps } from 'react-router-dom';
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from 'react-router-dom';
 import { HashLink } from 'react-router-hash-link';
 import classnames from 'classnames';
 import { TextProps, useTextStyles } from './Text';
 import * as styles from './Link.css';
 import { sprinkles } from '../system/styles/sprinkles.css';
 
-interface Props extends LinkProps {
+export interface LinkProps extends RouterLinkProps {
   baseline?: boolean;
   size?: 'standard' | 'small' | 'xsmall';
   underline?: 'always' | 'hover' | 'never';
@@ -16,7 +19,7 @@ interface Props extends LinkProps {
   inline?: boolean;
   highlightOnFocus?: boolean;
 }
-export default ({
+export const Link = ({
   to,
   baseline = false,
   size = 'standard',
@@ -28,7 +31,7 @@ export default ({
   inline = false,
   className,
   ...restProps
-}: Props) => {
+}: LinkProps) => {
   const classNames = classnames(
     inline ? undefined : sprinkles({ display: 'block' }),
     underline === 'hover' ? styles.underlineOnHover : undefined,
@@ -47,7 +50,7 @@ export default ({
   }
 
   return (
-    <Link
+    <RouterLink
       onClick={() => window.scrollTo(0, 0)}
       to={to}
       {...restProps}
diff --git a/site/src/Typography/Text.tsx b/site/src/typography/Text.tsx
similarity index 98%
rename from site/src/Typography/Text.tsx
rename to site/src/typography/Text.tsx
index a40ec29a3..9ea41c18a 100644
--- a/site/src/Typography/Text.tsx
+++ b/site/src/typography/Text.tsx
@@ -42,7 +42,7 @@ export const useTextStyles = ({
     styles.weight[weight],
   );
 
-export default ({
+export const Text = ({
   component = 'span',
   size,
   color,
diff --git a/site/src/typography/index.ts b/site/src/typography/index.ts
new file mode 100644
index 000000000..d5c310ca5
--- /dev/null
+++ b/site/src/typography/index.ts
@@ -0,0 +1,8 @@
+export {
+  Heading,
+  useHeadingStyles,
+  type HeadingProps,
+  type HeadingLevel,
+} from './Heading';
+export { Link, type LinkProps } from './Link';
+export { Text, useTextStyles, type TextProps } from './Text';
diff --git a/site/src/Typography/typography.css.ts b/site/src/typography/typography.css.ts
similarity index 100%
rename from site/src/Typography/typography.css.ts
rename to site/src/typography/typography.css.ts

From 4789b2f2ec26f8361f7ebad3d888716db2be502b Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Sat, 31 Aug 2024 15:16:20 +0900
Subject: [PATCH 3/4] refactor(site): unify components with export const arrow
 function, add Props interface for each component

---
 site/src/Blockquote/Blockquote.css.ts         |  2 +-
 site/src/Blockquote/Blockquote.tsx            |  6 ++++-
 site/src/Code/CompiledCode.css.ts             |  2 +-
 site/src/Code/CompiledCode.tsx                |  4 ++--
 site/src/Code/ErrorHighlighter.tsx            |  7 ++++--
 site/src/Code/SyntaxHighlighter.css.ts        |  2 +-
 site/src/Code/SyntaxHighlighter.tsx           | 20 +++++++++-------
 .../ColorModeToggle/ColorModeToggle.css.ts    |  2 +-
 site/src/ColorModeToggle/ColorModeToggle.tsx  |  8 +++++--
 site/src/Divider/Divider.tsx                  |  2 +-
 site/src/DocsPage/DocsPage.tsx                | 11 ++++-----
 site/src/DocsPage/SiblingDoc/SiblingDoc.tsx   | 10 +++++---
 site/src/Fab/Fab.css.ts                       |  2 +-
 site/src/Fab/Fab.tsx                          |  9 ++++----
 site/src/GitHubStars/GitHubStars.tsx          |  2 +-
 site/src/HomePage/HomePage.tsx                |  8 +++----
 site/src/InlineCode/InlineCode.css.ts         |  2 +-
 site/src/InlineCode/InlineCode.tsx            |  2 +-
 site/src/Logo/Logo.tsx                        |  6 ++++-
 site/src/SearchInput/SearchInput.css.ts       |  2 +-
 site/src/Tweet/Tweet.css.ts                   |  2 +-
 site/src/Tweet/Tweet.tsx                      |  3 +--
 site/src/mdx-components.tsx                   | 23 +++++++++++--------
 23 files changed, 79 insertions(+), 58 deletions(-)

diff --git a/site/src/Blockquote/Blockquote.css.ts b/site/src/Blockquote/Blockquote.css.ts
index 3c233c6f3..ea71e8c41 100644
--- a/site/src/Blockquote/Blockquote.css.ts
+++ b/site/src/Blockquote/Blockquote.css.ts
@@ -1,5 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/sprinkles.css';
+import { darkMode } from '../system/styles';
 import { vars } from '../themes.css';
 
 export const root = style({
diff --git a/site/src/Blockquote/Blockquote.tsx b/site/src/Blockquote/Blockquote.tsx
index 2f45c5a62..745fe8804 100644
--- a/site/src/Blockquote/Blockquote.tsx
+++ b/site/src/Blockquote/Blockquote.tsx
@@ -2,7 +2,11 @@ import { ReactNode } from 'react';
 import { Box } from '../system';
 import * as styles from './Blockquote.css';
 
-export default (props: { children: ReactNode }) => {
+export interface BlockquoteProps {
+  children: ReactNode;
+}
+
+export const Blockquote = (props: BlockquoteProps) => {
   return (
     <Box
       paddingX={{ mobile: 'large', tablet: 'xlarge' }}
diff --git a/site/src/Code/CompiledCode.css.ts b/site/src/Code/CompiledCode.css.ts
index 719d96061..e9f93cffe 100644
--- a/site/src/Code/CompiledCode.css.ts
+++ b/site/src/Code/CompiledCode.css.ts
@@ -1,6 +1,6 @@
 import { createVar, fallbackVar, style, StyleRule } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
-import { darkMode, sprinkles } from '../system/styles/sprinkles.css';
+import { darkMode, sprinkles } from '../system/styles';
 import { vars } from '../themes.css';
 
 export const darkModeBg = createVar();
diff --git a/site/src/Code/CompiledCode.tsx b/site/src/Code/CompiledCode.tsx
index d1f89d477..4e549b27b 100644
--- a/site/src/Code/CompiledCode.tsx
+++ b/site/src/Code/CompiledCode.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { Box, Stack } from '../system';
-import Text from '../Typography/Text';
-import SyntaxHighlighter from './SyntaxHighlighter';
+import { Text } from '../typography';
+import { SyntaxHighlighter } from './SyntaxHighlighter';
 
 import * as styles from './CompiledCode.css';
 import { vars } from '../themes.css';
diff --git a/site/src/Code/ErrorHighlighter.tsx b/site/src/Code/ErrorHighlighter.tsx
index 822d04705..c8a9435c9 100644
--- a/site/src/Code/ErrorHighlighter.tsx
+++ b/site/src/Code/ErrorHighlighter.tsx
@@ -1,12 +1,15 @@
 import { useRef, useEffect, ReactNode } from 'react';
 import * as styles from './ErrorHighlighter.css';
 
-export interface CodeProps {
+export interface ErrorHighlighterProps {
   children: ReactNode;
   tokens: Array<string>;
 }
 
-export const ErrorHighlighter = ({ tokens, children }: CodeProps) => {
+export const ErrorHighlighter = ({
+  tokens,
+  children,
+}: ErrorHighlighterProps) => {
   const rootRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
diff --git a/site/src/Code/SyntaxHighlighter.css.ts b/site/src/Code/SyntaxHighlighter.css.ts
index 26ea3ea97..06c954fdc 100644
--- a/site/src/Code/SyntaxHighlighter.css.ts
+++ b/site/src/Code/SyntaxHighlighter.css.ts
@@ -4,7 +4,7 @@ import {
   createThemeContract,
   assignVars,
 } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/sprinkles.css';
+import { darkMode } from '../system/styles';
 import { vars } from '../themes.css';
 
 const themeVars = createThemeContract({
diff --git a/site/src/Code/SyntaxHighlighter.tsx b/site/src/Code/SyntaxHighlighter.tsx
index 11b5be5e1..62f3b10eb 100644
--- a/site/src/Code/SyntaxHighlighter.tsx
+++ b/site/src/Code/SyntaxHighlighter.tsx
@@ -1,23 +1,27 @@
 // @ts-ignore
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter/dist/esm/index';
+import { PrismLight } from 'react-syntax-highlighter/dist/esm/index';
 // @ts-ignore
 import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
 // @ts-ignore
 import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
-SyntaxHighlighter.registerLanguage('tsx', tsx);
-SyntaxHighlighter.registerLanguage('ts', ts);
+PrismLight.registerLanguage('tsx', tsx);
+PrismLight.registerLanguage('ts', ts);
 
 import { Box } from '../system';
-import Text from '../Typography/Text';
+import { Text } from '../typography';
 import * as styles from './SyntaxHighlighter.css';
 
-export interface CodeProps {
+export interface SyntaxHighlighterProps {
   language: string;
   children: string;
   tokenized?: boolean;
 }
 
-export default ({ language, children, tokenized }: CodeProps) => {
+export const SyntaxHighlighter = ({
+  language,
+  children,
+  tokenized,
+}: SyntaxHighlighterProps) => {
   return (
     <Box className={styles.root}>
       <Text size="code" component="div" baseline={false}>
@@ -28,12 +32,12 @@ export default ({ language, children, tokenized }: CodeProps) => {
             dangerouslySetInnerHTML={{ __html: children }}
           />
         ) : (
-          <SyntaxHighlighter
+          <PrismLight
             language={language}
             style={{ [`pre[class*="language-"]`]: {} }}
           >
             {children}
-          </SyntaxHighlighter>
+          </PrismLight>
         )}
       </Text>
     </Box>
diff --git a/site/src/ColorModeToggle/ColorModeToggle.css.ts b/site/src/ColorModeToggle/ColorModeToggle.css.ts
index adc66a687..120c6195d 100644
--- a/site/src/ColorModeToggle/ColorModeToggle.css.ts
+++ b/site/src/ColorModeToggle/ColorModeToggle.css.ts
@@ -1,5 +1,5 @@
 import { assignVars, createThemeContract, style } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/sprinkles.css';
+import { darkMode } from '../system/styles';
 import { vars } from '../themes.css';
 
 const themeVars = createThemeContract({
diff --git a/site/src/ColorModeToggle/ColorModeToggle.tsx b/site/src/ColorModeToggle/ColorModeToggle.tsx
index b00ddd361..ad5d43c24 100644
--- a/site/src/ColorModeToggle/ColorModeToggle.tsx
+++ b/site/src/ColorModeToggle/ColorModeToggle.tsx
@@ -21,7 +21,11 @@ export const ColorModeContext = createContext<ColorModeContextValues>({
   setColorMode: () => {},
 });
 
-export function ColorModeProvider({ children }: { children: ReactNode }) {
+export interface ColorModeProviderProps {
+  children: ReactNode;
+}
+
+export const ColorModeProvider = ({ children }: ColorModeProviderProps) => {
   const [colorMode, setColorMode] = useState<ColorMode | null>(null);
 
   useEffect(() => {
@@ -51,7 +55,7 @@ export function ColorModeProvider({ children }: { children: ReactNode }) {
       {children}
     </ColorModeContext.Provider>
   );
-}
+};
 
 export const ColorModeToggle = () => {
   const { colorMode, setColorMode } = useContext(ColorModeContext);
diff --git a/site/src/Divider/Divider.tsx b/site/src/Divider/Divider.tsx
index db5bfb975..9f87e17ce 100644
--- a/site/src/Divider/Divider.tsx
+++ b/site/src/Divider/Divider.tsx
@@ -1,7 +1,7 @@
 import { Box } from '../system';
 import * as styles from './Divider.css';
 
-export default () => {
+export const Divider = () => {
   return (
     <Box
       component="hr"
diff --git a/site/src/DocsPage/DocsPage.tsx b/site/src/DocsPage/DocsPage.tsx
index 3544681c3..3799657ac 100644
--- a/site/src/DocsPage/DocsPage.tsx
+++ b/site/src/DocsPage/DocsPage.tsx
@@ -9,16 +9,15 @@ import { MDXProvider } from '@mdx-js/react';
 import { Title, Meta } from 'react-head';
 import classnames from 'classnames';
 import { useActiveHash, useHeadingRouteUpdates } from '../useHeadingRoute';
-import SiblingDoc from './SiblingDoc/SiblingDoc';
-import mdxComponents from '../mdx-components';
-import { Fab } from '../Fab/Fab';
 import { Box, ContentBlock, Stack } from '../system';
+import { Link, Text } from '../typography';
+import { SiblingDoc } from './SiblingDoc/SiblingDoc';
+import { mdxComponents } from '../mdx-components';
+import { Fab } from '../Fab/Fab';
 import { groups, pages } from '../docs-store';
-import Logo from '../Logo/Logo';
+import { Logo } from '../Logo/Logo';
 import { ColorModeToggle } from '../ColorModeToggle/ColorModeToggle';
 import * as styles from './DocsPage.css';
-import Link from '../Typography/Link';
-import Text from '../Typography/Text';
 
 import mapKeys from 'lodash/mapKeys';
 import { SearchInput } from '../SearchInput/SearchInput';
diff --git a/site/src/DocsPage/SiblingDoc/SiblingDoc.tsx b/site/src/DocsPage/SiblingDoc/SiblingDoc.tsx
index 84a2ea75c..7cab7d0a0 100644
--- a/site/src/DocsPage/SiblingDoc/SiblingDoc.tsx
+++ b/site/src/DocsPage/SiblingDoc/SiblingDoc.tsx
@@ -1,6 +1,5 @@
-import Link from '../../Typography/Link';
-import Text from '../../Typography/Text';
 import { Chevron } from '../../Chevron/Chevron';
+import { Link, Text } from '../../typography';
 import { Box } from '../../system';
 
 export interface SiblingDocProps {
@@ -9,7 +8,12 @@ export interface SiblingDocProps {
   direction: 'left' | 'right';
   subtitle?: string;
 }
-export default ({ title, route, subtitle, direction }: SiblingDocProps) => (
+export const SiblingDoc = ({
+  title,
+  route,
+  subtitle,
+  direction,
+}: SiblingDocProps) => (
   <Box
     display="flex"
     alignItems="center"
diff --git a/site/src/Fab/Fab.css.ts b/site/src/Fab/Fab.css.ts
index d9131c271..eda0cc948 100644
--- a/site/src/Fab/Fab.css.ts
+++ b/site/src/Fab/Fab.css.ts
@@ -1,5 +1,5 @@
 import { style, createVar, fallbackVar } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/sprinkles.css';
+import { darkMode } from '../system/styles';
 import { vars } from '../themes.css';
 
 export const focusColorVar = createVar();
diff --git a/site/src/Fab/Fab.tsx b/site/src/Fab/Fab.tsx
index ca318c89a..f7111296b 100644
--- a/site/src/Fab/Fab.tsx
+++ b/site/src/Fab/Fab.tsx
@@ -2,13 +2,12 @@ import classnames from 'classnames';
 import { Box } from '../system';
 import * as styles from './Fab.css';
 
-export const Fab = ({
-  open,
-  onClick,
-}: {
+export interface FabProps {
   open: boolean;
   onClick: () => void;
-}) => {
+}
+
+export const Fab = ({ open, onClick }: FabProps) => {
   return (
     <Box
       component="button"
diff --git a/site/src/GitHubStars/GitHubStars.tsx b/site/src/GitHubStars/GitHubStars.tsx
index 39221ce38..dd0ce8ac9 100644
--- a/site/src/GitHubStars/GitHubStars.tsx
+++ b/site/src/GitHubStars/GitHubStars.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Box } from '../system';
-import Text from '../Typography/Text';
+import { Text } from '../typography';
 
 const Star = () => (
   <svg
diff --git a/site/src/HomePage/HomePage.tsx b/site/src/HomePage/HomePage.tsx
index 20c07155c..89dc87088 100644
--- a/site/src/HomePage/HomePage.tsx
+++ b/site/src/HomePage/HomePage.tsx
@@ -1,19 +1,17 @@
 import { ReactNode } from 'react';
 import dedent from 'dedent';
 import { Box, Stack, ContentBlock, Columns, ButtonLink } from '../system';
-import { Heading } from '../Typography/Heading';
+import { Heading, Link, Text } from '../typography';
 import { Chevron } from '../Chevron/Chevron';
-import Link from '../Typography/Link';
-import Text from '../Typography/Text';
-import Logo from '../Logo/Logo';
+import { Logo } from '../Logo/Logo';
 import { Tweet } from '../Tweet/Tweet';
 import { groups, pages } from '../docs-store';
 import { ColorModeToggle } from '../ColorModeToggle/ColorModeToggle';
 import { GitHubStars } from '../GitHubStars/GitHubStars';
 import { CompiledCode } from '../Code/CompiledCode';
 import { ErrorHighlighter } from '../Code/ErrorHighlighter';
-import * as styles from './HomePage.css';
 import { SearchInput } from '../SearchInput/SearchInput';
+import * as styles from './HomePage.css';
 
 const InstallPrompt = () => {
   return (
diff --git a/site/src/InlineCode/InlineCode.css.ts b/site/src/InlineCode/InlineCode.css.ts
index 8915da4b8..c6c2b1803 100644
--- a/site/src/InlineCode/InlineCode.css.ts
+++ b/site/src/InlineCode/InlineCode.css.ts
@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/sprinkles.css';
+import { darkMode } from '../system/styles';
 import { vars } from '../themes.css';
 
 export const code = style({
diff --git a/site/src/InlineCode/InlineCode.tsx b/site/src/InlineCode/InlineCode.tsx
index 8b31b359e..f4f36f711 100644
--- a/site/src/InlineCode/InlineCode.tsx
+++ b/site/src/InlineCode/InlineCode.tsx
@@ -6,7 +6,7 @@ export interface InlineCodeProps {
   children: ReactNode;
   inline?: boolean;
 }
-export default ({ children }: InlineCodeProps) => {
+export const InlineCode = ({ children }: InlineCodeProps) => {
   return (
     <Box
       component="code"
diff --git a/site/src/Logo/Logo.tsx b/site/src/Logo/Logo.tsx
index fb274b79e..cbbfd1579 100644
--- a/site/src/Logo/Logo.tsx
+++ b/site/src/Logo/Logo.tsx
@@ -1,6 +1,10 @@
 import { Box } from '../system';
 
-export default ({ height = '100%' }: { height?: string | number }) => (
+export interface LogoProps {
+  height?: string | number;
+}
+
+export const Logo = ({ height = '100%' }: LogoProps) => (
   <Box display="flex">
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/site/src/SearchInput/SearchInput.css.ts b/site/src/SearchInput/SearchInput.css.ts
index 787874294..12f8de817 100644
--- a/site/src/SearchInput/SearchInput.css.ts
+++ b/site/src/SearchInput/SearchInput.css.ts
@@ -1,6 +1,6 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { homePage } from '../HomePage/HomePage.css';
-import { darkMode as darkModeClass } from '../system/styles/sprinkles.css';
+import { darkMode as darkModeClass } from '../system/styles';
 import { vars } from '../themes.css';
 import { responsiveStyle } from '../themeUtils';
 
diff --git a/site/src/Tweet/Tweet.css.ts b/site/src/Tweet/Tweet.css.ts
index b49027340..649f632af 100644
--- a/site/src/Tweet/Tweet.css.ts
+++ b/site/src/Tweet/Tweet.css.ts
@@ -1,5 +1,5 @@
 import { createVar, style } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/sprinkles.css';
+import { darkMode } from '../system/styles';
 import { vars } from '../themes.css';
 
 export const tweetLink = style({
diff --git a/site/src/Tweet/Tweet.tsx b/site/src/Tweet/Tweet.tsx
index 5946a08c3..2c04e2b49 100644
--- a/site/src/Tweet/Tweet.tsx
+++ b/site/src/Tweet/Tweet.tsx
@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { Box, Stack } from '../system';
-import Link from '../Typography/Link';
-import Text from '../Typography/Text';
+import { Link, Text } from '../typography';
 import * as styles from './Tweet.css';
 
 interface TweetProps {
diff --git a/site/src/mdx-components.tsx b/site/src/mdx-components.tsx
index cb5a19ac8..3c794f543 100644
--- a/site/src/mdx-components.tsx
+++ b/site/src/mdx-components.tsx
@@ -7,16 +7,19 @@ import {
   Children,
 } from 'react';
 import { MDXProvider } from '@mdx-js/react';
-import Text, { useTextStyles } from './Typography/Text';
-import { Box } from './system';
-import InlineCode from './InlineCode/InlineCode';
-import Link from './Typography/Link';
-import Blockquote from './Blockquote/Blockquote';
-import { HeadingLevel, useHeadingStyles } from './Typography/Heading';
-import Divider from './Divider/Divider';
+import { Box, type BoxProps } from './system';
+import {
+  Text,
+  useTextStyles,
+  useHeadingStyles,
+  type HeadingLevel,
+  Link,
+} from './typography';
+import { InlineCode } from './InlineCode/InlineCode';
+import { Blockquote } from './Blockquote/Blockquote';
+import { Divider } from './Divider/Divider';
 import { CompiledCode, CompiledCodeProps } from './Code/CompiledCode';
-import { BoxProps } from './system/Box/Box';
-import { sprinkles } from './system/styles/sprinkles.css';
+import { sprinkles } from './system/styles';
 import { vars } from './themes.css';
 import * as styles from './mdx-components.css';
 
@@ -120,7 +123,7 @@ const Heading = ({ level, component, children, href }: HeadingProps) => {
   );
 };
 
-export default {
+export const mdxComponents = {
   hr: () => (
     <Block>
       <Divider />

From e84e7a48e4b6867e0d3642f7f6ba454946f14ef4 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Sat, 31 Aug 2024 15:26:40 +0900
Subject: [PATCH 4/4] refactor(site/typography/Link): rename RouterLink to
 ReactRouterLink

---
 site/src/system/Columns.tsx  | 1 +
 site/src/typography/Link.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/site/src/system/Columns.tsx b/site/src/system/Columns.tsx
index 99216d195..8988e1f1c 100644
--- a/site/src/system/Columns.tsx
+++ b/site/src/system/Columns.tsx
@@ -23,6 +23,7 @@ export interface ColumnsProps {
   collapseOnMobile?: boolean;
   collapseOnTablet?: boolean;
 }
+
 export const Columns = ({
   children,
   space,
diff --git a/site/src/typography/Link.tsx b/site/src/typography/Link.tsx
index ed1dc4311..704a4ae95 100644
--- a/site/src/typography/Link.tsx
+++ b/site/src/typography/Link.tsx
@@ -1,6 +1,6 @@
 import {
-  Link as RouterLink,
-  LinkProps as RouterLinkProps,
+  Link as ReactRouterLink,
+  LinkProps as ReactRouterLinkProps,
 } from 'react-router-dom';
 import { HashLink } from 'react-router-hash-link';
 import classnames from 'classnames';
@@ -8,7 +8,7 @@ import { TextProps, useTextStyles } from './Text';
 import * as styles from './Link.css';
 import { sprinkles } from '../system/styles/sprinkles.css';
 
-export interface LinkProps extends RouterLinkProps {
+export interface LinkProps extends ReactRouterLinkProps {
   baseline?: boolean;
   size?: 'standard' | 'small' | 'xsmall';
   underline?: 'always' | 'hover' | 'never';
@@ -50,7 +50,7 @@ export const Link = ({
   }
 
   return (
-    <RouterLink
+    <ReactRouterLink
       onClick={() => window.scrollTo(0, 0)}
       to={to}
       {...restProps}