@tanstack/router-devtools 1.20.1 → 1.20.3-alpha.1

package/src/theme.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-
-export const defaultTheme = {
-  background: '#222222',
-  backgroundAlt: '#292929',
-  foreground: 'white',
-  gray: '#444',
-  grayAlt: '#444',
-  inputBackgroundColor: '#fff',
-  inputTextColor: '#000',
-  success: '#80cb00',
-  danger: '#ff0085',
-  active: '#0099ff',
-  warning: '#ffb200',
-} as const
-
-export type Theme = typeof defaultTheme
-interface ProviderProps {
-  theme: Theme
-  children?: React.ReactNode
-}
-
-const ThemeContext = React.createContext(defaultTheme)
-
-export function ThemeProvider({ theme, ...rest }: ProviderProps) {
-  return <ThemeContext.Provider value={theme} {...rest} />
-}
-
-export function useTheme() {
-  return React.useContext(ThemeContext)
-}

package/src/tokens.ts

@@ -1,305 +0,0 @@
-export const tokens = {
-  colors: {
-    inherit: 'inherit',
-    current: 'currentColor',
-    transparent: 'transparent',
-    black: '#000000',
-    white: '#ffffff',
-    neutral: {
-      50: '#f9fafb',
-      100: '#f2f4f7',
-      200: '#eaecf0',
-      300: '#d0d5dd',
-      400: '#98a2b3',
-      500: '#667085',
-      600: '#475467',
-      700: '#344054',
-      800: '#1d2939',
-      900: '#101828',
-    },
-    darkGray: {
-      50: '#525c7a',
-      100: '#49536e',
-      200: '#414962',
-      300: '#394056',
-      400: '#313749',
-      500: '#292e3d',
-      600: '#212530',
-      700: '#191c24',
-      800: '#111318',
-      900: '#0b0d10',
-    },
-    gray: {
-      50: '#f9fafb',
-      100: '#f2f4f7',
-      200: '#eaecf0',
-      300: '#d0d5dd',
-      400: '#98a2b3',
-      500: '#667085',
-      600: '#475467',
-      700: '#344054',
-      800: '#1d2939',
-      900: '#101828',
-    },
-    blue: {
-      25: '#F5FAFF',
-      50: '#EFF8FF',
-      100: '#D1E9FF',
-      200: '#B2DDFF',
-      300: '#84CAFF',
-      400: '#53B1FD',
-      500: '#2E90FA',
-      600: '#1570EF',
-      700: '#175CD3',
-      800: '#1849A9',
-      900: '#194185',
-    },
-    green: {
-      25: '#F6FEF9',
-      50: '#ECFDF3',
-      100: '#D1FADF',
-      200: '#A6F4C5',
-      300: '#6CE9A6',
-      400: '#32D583',
-      500: '#12B76A',
-      600: '#039855',
-      700: '#027A48',
-      800: '#05603A',
-      900: '#054F31',
-    },
-    red: {
-      50: '#fef2f2',
-      100: '#fee2e2',
-      200: '#fecaca',
-      300: '#fca5a5',
-      400: '#f87171',
-      500: '#ef4444',
-      600: '#dc2626',
-      700: '#b91c1c',
-      800: '#991b1b',
-      900: '#7f1d1d',
-      950: '#450a0a',
-    },
-    yellow: {
-      25: '#FFFCF5',
-      50: '#FFFAEB',
-      100: '#FEF0C7',
-      200: '#FEDF89',
-      300: '#FEC84B',
-      400: '#FDB022',
-      500: '#F79009',
-      600: '#DC6803',
-      700: '#B54708',
-      800: '#93370D',
-      900: '#7A2E0E',
-    },
-    purple: {
-      25: '#FAFAFF',
-      50: '#F4F3FF',
-      100: '#EBE9FE',
-      200: '#D9D6FE',
-      300: '#BDB4FE',
-      400: '#9B8AFB',
-      500: '#7A5AF8',
-      600: '#6938EF',
-      700: '#5925DC',
-      800: '#4A1FB8',
-      900: '#3E1C96',
-    },
-    teal: {
-      25: '#F6FEFC',
-      50: '#F0FDF9',
-      100: '#CCFBEF',
-      200: '#99F6E0',
-      300: '#5FE9D0',
-      400: '#2ED3B7',
-      500: '#15B79E',
-      600: '#0E9384',
-      700: '#107569',
-      800: '#125D56',
-      900: '#134E48',
-    },
-    pink: {
-      25: '#fdf2f8',
-      50: '#fce7f3',
-      100: '#fbcfe8',
-      200: '#f9a8d4',
-      300: '#f472b6',
-      400: '#ec4899',
-      500: '#db2777',
-      600: '#be185d',
-      700: '#9d174d',
-      800: '#831843',
-      900: '#500724',
-    },
-    cyan: {
-      25: '#ecfeff',
-      50: '#cffafe',
-      100: '#a5f3fc',
-      200: '#67e8f9',
-      300: '#22d3ee',
-      400: '#06b6d4',
-      500: '#0891b2',
-      600: '#0e7490',
-      700: '#155e75',
-      800: '#164e63',
-      900: '#083344',
-    },
-  },
-  alpha: {
-    100: 'ff',
-    90: 'e5',
-    80: 'cc',
-    70: 'b3',
-    60: '99',
-    50: '80',
-    40: '66',
-    30: '4d',
-    20: '33',
-    10: '1a',
-    0: '00',
-  },
-  font: {
-    size: {
-      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',
-      xs: 'calc(var(--tsrd-font-size) * 0.75)',
-      sm: 'calc(var(--tsrd-font-size) * 0.875)',
-      md: 'var(--tsrd-font-size)',
-      lg: 'calc(var(--tsrd-font-size) * 1.125)',
-      xl: 'calc(var(--tsrd-font-size) * 1.25)',
-      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',
-      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',
-      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',
-      '5xl': 'calc(var(--tsrd-font-size) * 3)',
-      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',
-      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',
-      '8xl': 'calc(var(--tsrd-font-size) * 6)',
-      '9xl': 'calc(var(--tsrd-font-size) * 8)',
-    },
-    lineHeight: {
-      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',
-      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',
-      xs: 'calc(var(--tsrd-font-size) * 1)',
-      sm: 'calc(var(--tsrd-font-size) * 1.25)',
-      md: 'calc(var(--tsrd-font-size) * 1.5)',
-      lg: 'calc(var(--tsrd-font-size) * 1.75)',
-      xl: 'calc(var(--tsrd-font-size) * 2)',
-      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',
-      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',
-      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',
-      '5xl': 'calc(var(--tsrd-font-size) * 3)',
-      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',
-      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',
-      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',
-      '9xl': 'calc(var(--tsrd-font-size) * 4)',
-    },
-    weight: {
-      thin: '100',
-      extralight: '200',
-      light: '300',
-      normal: '400',
-      medium: '500',
-      semibold: '600',
-      bold: '700',
-      extrabold: '800',
-      black: '900',
-    },
-    fontFamily: {
-      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',
-      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,
-    },
-  },
-  breakpoints: {
-    xs: '320px',
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-  },
-  border: {
-    radius: {
-      none: '0px',
-      xs: 'calc(var(--tsrd-font-size) * 0.125)',
-      sm: 'calc(var(--tsrd-font-size) * 0.25)',
-      md: 'calc(var(--tsrd-font-size) * 0.375)',
-      lg: 'calc(var(--tsrd-font-size) * 0.5)',
-      xl: 'calc(var(--tsrd-font-size) * 0.75)',
-      '2xl': 'calc(var(--tsrd-font-size) * 1)',
-      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',
-      full: '9999px',
-    },
-  },
-  size: {
-    0: '0px',
-    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',
-    0.5: 'calc(var(--tsrd-font-size) * 0.125)',
-    1: 'calc(var(--tsrd-font-size) * 0.25)',
-    1.5: 'calc(var(--tsrd-font-size) * 0.375)',
-    2: 'calc(var(--tsrd-font-size) * 0.5)',
-    2.5: 'calc(var(--tsrd-font-size) * 0.625)',
-    3: 'calc(var(--tsrd-font-size) * 0.75)',
-    3.5: 'calc(var(--tsrd-font-size) * 0.875)',
-    4: 'calc(var(--tsrd-font-size) * 1)',
-    4.5: 'calc(var(--tsrd-font-size) * 1.125)',
-    5: 'calc(var(--tsrd-font-size) * 1.25)',
-    5.5: 'calc(var(--tsrd-font-size) * 1.375)',
-    6: 'calc(var(--tsrd-font-size) * 1.5)',
-    6.5: 'calc(var(--tsrd-font-size) * 1.625)',
-    7: 'calc(var(--tsrd-font-size) * 1.75)',
-    8: 'calc(var(--tsrd-font-size) * 2)',
-    9: 'calc(var(--tsrd-font-size) * 2.25)',
-    10: 'calc(var(--tsrd-font-size) * 2.5)',
-    11: 'calc(var(--tsrd-font-size) * 2.75)',
-    12: 'calc(var(--tsrd-font-size) * 3)',
-    14: 'calc(var(--tsrd-font-size) * 3.5)',
-    16: 'calc(var(--tsrd-font-size) * 4)',
-    20: 'calc(var(--tsrd-font-size) * 5)',
-    24: 'calc(var(--tsrd-font-size) * 6)',
-    28: 'calc(var(--tsrd-font-size) * 7)',
-    32: 'calc(var(--tsrd-font-size) * 8)',
-    36: 'calc(var(--tsrd-font-size) * 9)',
-    40: 'calc(var(--tsrd-font-size) * 10)',
-    44: 'calc(var(--tsrd-font-size) * 11)',
-    48: 'calc(var(--tsrd-font-size) * 12)',
-    52: 'calc(var(--tsrd-font-size) * 13)',
-    56: 'calc(var(--tsrd-font-size) * 14)',
-    60: 'calc(var(--tsrd-font-size) * 15)',
-    64: 'calc(var(--tsrd-font-size) * 16)',
-    72: 'calc(var(--tsrd-font-size) * 18)',
-    80: 'calc(var(--tsrd-font-size) * 20)',
-    96: 'calc(var(--tsrd-font-size) * 24)',
-  },
-  shadow: {
-    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,
-    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,
-    md: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,
-    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,
-    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,
-    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>
-      `0 25px 50px -12px ${color}` as const,
-    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>
-      `inset 0 2px 4px 0 ${color}` as const,
-    none: () => `none` as const,
-  },
-  zIndices: {
-    hide: -1,
-    auto: 'auto',
-    base: 0,
-    docked: 10,
-    dropdown: 1000,
-    sticky: 1100,
-    banner: 1200,
-    overlay: 1300,
-    modal: 1400,
-    popover: 1500,
-    skipLink: 1600,
-    toast: 1700,
-    tooltip: 1800,
-  },
-} as const

package/src/useLocalStorage.ts

@@ -1,52 +0,0 @@
-import React from 'react'
-
-const getItem = (key: string): unknown => {
-  try {
-    const itemValue = localStorage.getItem(key)
-    if (typeof itemValue === 'string') {
-      return JSON.parse(itemValue)
-    }
-    return undefined
-  } catch {
-    return undefined
-  }
-}
-
-export default function useLocalStorage<T>(
-  key: string,
-  defaultValue: T | undefined,
-): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void] {
-  const [value, setValue] = React.useState<T>()
-
-  React.useEffect(() => {
-    const initialValue = getItem(key) as T | undefined
-
-    if (typeof initialValue === 'undefined' || initialValue === null) {
-      setValue(
-        typeof defaultValue === 'function' ? defaultValue() : defaultValue,
-      )
-    } else {
-      setValue(initialValue)
-    }
-  }, [defaultValue, key])
-
-  const setter = React.useCallback(
-    (updater: any) => {
-      setValue((old) => {
-        let newVal = updater
-
-        if (typeof updater == 'function') {
-          newVal = updater(old)
-        }
-        try {
-          localStorage.setItem(key, JSON.stringify(newVal))
-        } catch {}
-
-        return newVal
-      })
-    },
-    [key],
-  )
-
-  return [value, setter]
-}

package/src/useMediaQuery.ts

@@ -1,39 +0,0 @@
-import React from 'react'
-
-export default function useMediaQuery(query: string): boolean | undefined {
-  // Keep track of the preference in state, start with the current match
-  const [isMatch, setIsMatch] = React.useState(() => {
-    if (typeof window !== 'undefined') {
-      return window.matchMedia && window.matchMedia(query).matches
-    }
-    return
-  })
-
-  // Watch for changes
-  React.useEffect(() => {
-    if (typeof window !== 'undefined') {
-      if (!window.matchMedia) {
-        return
-      }
-
-      // Create a matcher
-      const matcher = window.matchMedia(query)
-
-      // Create our handler
-      const onChange = ({ matches }: { matches: boolean }) =>
-        setIsMatch(matches)
-
-      // Listen for changes
-      matcher.addListener(onChange)
-
-      return () => {
-        // Stop listening for changes
-        matcher.removeListener(onChange)
-      }
-    }
-
-    return
-  }, [isMatch, query, setIsMatch])
-
-  return isMatch
-}

package/src/utils.ts

@@ -1,183 +0,0 @@
-import React from 'react'
-import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router'
-
-import { Theme, useTheme } from './theme'
-import useMediaQuery from './useMediaQuery'
-
-export const isServer = typeof window === 'undefined'
-
-type StyledComponent<T> = T extends 'button'
-  ? React.DetailedHTMLProps<
-      React.ButtonHTMLAttributes<HTMLButtonElement>,
-      HTMLButtonElement
-    >
-  : T extends 'input'
-    ? React.DetailedHTMLProps<
-        React.InputHTMLAttributes<HTMLInputElement>,
-        HTMLInputElement
-      >
-    : T extends 'select'
-      ? React.DetailedHTMLProps<
-          React.SelectHTMLAttributes<HTMLSelectElement>,
-          HTMLSelectElement
-        >
-      : T extends keyof HTMLElementTagNameMap
-        ? React.HTMLAttributes<HTMLElementTagNameMap[T]>
-        : never
-
-export function getStatusColor(match: AnyRouteMatch) {
-  return match.status === 'success' && match.isFetching
-    ? 'blue'
-    : match.status === 'pending'
-      ? 'yellow'
-      : match.status === 'error'
-        ? 'red'
-        : match.status === 'success'
-          ? 'green'
-          : 'gray'
-}
-
-export function getRouteStatusColor(
-  matches: AnyRouteMatch[],
-  route: AnyRoute | AnyRootRoute,
-) {
-  const found = matches.find((d) => d.routeId === route.id)
-  if (!found) return 'gray'
-  return getStatusColor(found)
-}
-
-type Styles =
-  | React.CSSProperties
-  | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)
-
-export function styled<T extends keyof HTMLElementTagNameMap>(
-  type: T,
-  newStyles: Styles,
-  queries: Record<string, Styles> = {},
-) {
-  return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(
-    ({ style, ...rest }, ref) => {
-      const theme = useTheme()
-
-      const mediaStyles = Object.entries(queries).reduce(
-        (current, [key, value]) => {
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          return useMediaQuery(key)
-            ? {
-                ...current,
-                ...(typeof value === 'function' ? value(rest, theme) : value),
-              }
-            : current
-        },
-        {},
-      )
-
-      return React.createElement(type, {
-        ...rest,
-        style: {
-          ...(typeof newStyles === 'function'
-            ? newStyles(rest, theme)
-            : newStyles),
-          ...style,
-          ...mediaStyles,
-        },
-        ref,
-      })
-    },
-  )
-}
-
-export function useIsMounted() {
-  const mountedRef = React.useRef(false)
-  const isMounted = React.useCallback(() => mountedRef.current, [])
-
-  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
-    mountedRef.current = true
-    return () => {
-      mountedRef.current = false
-    }
-  }, [])
-
-  return isMounted
-}
-
-/**
- * Displays a string regardless the type of the data
- * @param {unknown} value Value to be stringified
- */
-export const displayValue = (value: unknown) => {
-  const name = Object.getOwnPropertyNames(Object(value))
-  const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value
-  try {
-    return JSON.stringify(newValue, name)
-  } catch (e) {
-    return `unable to stringify`
-  }
-}
-
-/**
- * This hook is a safe useState version which schedules state updates in microtasks
- * to prevent updating a component state while React is rendering different components
- * or when the component is not mounted anymore.
- */
-export function useSafeState<T>(initialState: T): [T, (value: T) => void] {
-  const isMounted = useIsMounted()
-  const [state, setState] = React.useState(initialState)
-
-  const safeSetState = React.useCallback(
-    (value: T) => {
-      scheduleMicrotask(() => {
-        if (isMounted()) {
-          setState(value)
-        }
-      })
-    },
-    [isMounted],
-  )
-
-  return [state, safeSetState]
-}
-
-/**
- * Schedules a microtask.
- * This can be useful to schedule state updates after rendering.
- */
-function scheduleMicrotask(callback: () => void) {
-  Promise.resolve()
-    .then(callback)
-    .catch((error) =>
-      setTimeout(() => {
-        throw error
-      }),
-    )
-}
-
-export function multiSortBy<T>(
-  arr: T[],
-  accessors: ((item: T) => any)[] = [(d) => d],
-): T[] {
-  return arr
-    .map((d, i) => [d, i] as const)
-    .sort(([a, ai], [b, bi]) => {
-      for (const accessor of accessors) {
-        const ao = accessor(a)
-        const bo = accessor(b)
-
-        if (typeof ao === 'undefined') {
-          if (typeof bo === 'undefined') {
-            continue
-          }
-          return 1
-        }
-
-        if (ao === bo) {
-          continue
-        }
-
-        return ao > bo ? 1 : -1
-      }
-
-      return ai - bi
-    })
-    .map(([d]) => d)
-}