refactor(site): unify components with export const arrow function, simplify structure in system and typography

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({

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' }}

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();

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';

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(() => {

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({

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>

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({

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);

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"

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';

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"

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();

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"

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

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 (

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({

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"

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"

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';
 

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({

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 {

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 />

site/src/system/Box/Box.tsx → 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<

site/src/system/ButtonLink/ButtonLink.css.ts → 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',

site/src/system/ButtonLink/ButtonLink.tsx → 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;