Commit bunch of changes

package.json

@@ -14,7 +14,7 @@
     "start": "env NODE_ENV=development ts-node -r tsconfig-paths/register devServer.ts"
   },
   "dependencies": {
-    "@date-fns/docs": "0.22.0",
+    "@date-fns/docs": "0.24.0",
     "@sentry/browser": "^5.30.0",
     "@sentry/tracing": "^5.30.0",
     "@switcher/preact": "2.3.0",

src/ui/components/DocDescription/index.tsx

@@ -6,15 +6,19 @@ interface DocDescriptionProps {
   description: string
   scope?: string
   header?: 'h2' | 'h3'
+  skipHeader?: boolean
 }
 
 export const DocDescription: FunctionComponent<DocDescriptionProps> = ({
   description,
   header,
   scope,
+  skipHeader,
 }) => (
   <section>
-    <SectionHeader header="Description" scope={scope} tag={header} />
+    {!skipHeader && (
+      <SectionHeader header="Description" scope={scope} tag={header} />
+    )}
     <Markdown value={description} />
   </section>
 )

src/ui/components/HighlightQuery/index.tsx

@@ -5,7 +5,7 @@ import * as styles from './styles.css'
 
 interface HighlightQueryProps {
   text: string
-  query: string
+  query: string | undefined
 }
 
 export const HighlightQuery: FunctionComponent<HighlightQueryProps> = ({
@@ -33,7 +33,7 @@ interface Chunk {
   type: 'chunk' | 'query'
 }
 
-function highlightText(text: string, query: string): Chunk[] {
+function highlightText(text: string, query: string | undefined): Chunk[] {
   if (!text || !query) return [{ text, type: 'chunk' }]
 
   const chunks: Chunk[] = []

src/ui/components/IdHighlight/index.tsx

@@ -1,6 +1,7 @@
 import { match } from 'assert'
 import { FunctionComponent, h } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
+import { isInViewport } from '~/utils/dom'
 import * as styles from './styles.css'
 
 interface IdHightlightProps {
@@ -62,14 +63,3 @@ export const IdHightlight: FunctionComponent<IdHightlightProps> = ({
     </span>
   )
 }
-
-function isInViewport(element: HTMLElement): boolean {
-  const rect = element.getBoundingClientRect()
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <=
-      (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
-}

src/ui/components/Item/index.tsx

@@ -1,27 +1,45 @@
 import classNames from 'classnames'
 import { Fragment, FunctionComponent, h } from 'preact'
+import { Ref } from 'preact/hooks'
+import { highlightMarkdown } from '~/utils/docs'
+import { HighlightQuery } from '../HighlightQuery'
+import { Markdown } from '../Markdown'
+import { RichText } from '../RichText'
 import * as styles from './styles.css'
 
 interface Props {
   title: string
   summary: string | undefined
-  selected: boolean
+  active: boolean
   code: boolean
+  query?: string
+  activeRef?: Ref<HTMLDivElement>
 }
 
 export const Item: FunctionComponent<Props> = ({
   title,
   summary,
-  selected,
+  active,
   code,
+  query,
+  activeRef,
 }) => (
-  <div class={classNames(styles.item, selected && styles.selected)}>
+  <div
+    class={classNames(styles.item, active && styles.active)}
+    ref={(active && activeRef) || undefined}
+  >
     <div>
       <h4 class={classNames(styles.title, code && styles.codeTitle)}>
-        {title}
+        <HighlightQuery text={title} query={query} />
       </h4>
 
-      {styles.summary && <p class={styles.summary}>{summary}</p>}
+      {summary && (
+        <p class={styles.summary}>
+          <RichText>
+            <Markdown value={highlightMarkdown(summary, query)} />
+          </RichText>
+        </p>
+      )}
     </div>
 
     <div class={styles.icon} />

src/ui/components/Item/styles.css.ts

@@ -24,7 +24,7 @@ export const icon = style({
   marginLeft: '10px',
 })
 
-export const selected = style({
+export const active = style({
   backgroundColor: '#fff0f3',
 
   ':hover': {

src/ui/components/NoSearchResults/index.tsx

@@ -1,21 +1,18 @@
-import classNames from 'classnames'
 import { Fragment, FunctionComponent, h } from 'preact'
-import { useMemo } from 'preact/hooks'
+import { RichText } from '../RichText'
 import * as styles from './styles.css'
 
 interface NoSearchResultsProps {
   noun: string
-  query: string
-  setQuery: (query: string) => void
+  query: [string, (query: string) => void]
 }
 
 export const NoSearchResults: FunctionComponent<NoSearchResultsProps> = ({
   noun,
-  query,
-  setQuery,
+  query: [query, setQuery],
 }) => {
   return (
-    <div>
+    <RichText>
       No {noun} found for <span class={styles.query}>{query}</span>.{' '}
       <a
         href="#"
@@ -26,6 +23,6 @@ export const NoSearchResults: FunctionComponent<NoSearchResultsProps> = ({
       >
         Clear query
       </a>
-    </div>
+    </RichText>
   )
 }

src/ui/components/RichText/styles.css.ts

@@ -2,7 +2,7 @@ import { style, globalStyle } from '@vanilla-extract/css'
 
 export const content = style({
   fontSize: '1rem',
-  lineHeight: '1.6em',
+  lineHeight: '1.6',
 })
 
 globalStyle(`${content} a`, {

src/ui/components/Search/index.tsx

@@ -1,18 +1,20 @@
 import { FunctionComponent, h } from 'preact'
 // import { trackAction } from 'app/acts/tracking_acts'
 import debounce from 'lodash/debounce'
-import { StateUpdater, useCallback } from 'preact/hooks'
+import { Ref, StateUpdater, useCallback } from 'preact/hooks'
 import * as styles from './styles.css'
 import classNames from 'classnames'
 
 interface SearchProps {
-  query: [string, StateUpdater<string>]
+  query: [string, (query: string) => void]
   bordered?: boolean
+  inputRef?: Ref<HTMLInputElement>
 }
 
 export const Search: FunctionComponent<SearchProps> = ({
   query: [query, setQuery],
   bordered,
+  inputRef,
 }) => {
   const trackSearch = useCallback(
     debounce((newQuery: string) => {
@@ -36,6 +38,7 @@ export const Search: FunctionComponent<SearchProps> = ({
           trackSearch(newQuery)
           setQuery(newQuery)
         }}
+        ref={inputRef}
       />
 
       {query.trim().length > 0 && <Cancel setQuery={setQuery} />}

src/ui/components/Search/styles.css.ts

@@ -28,7 +28,7 @@ export const cancel = style({
   backgroundImage: `url('${cancelURL}')`,
   backgroundSize: '16px',
   position: 'absolute',
-  right: '1.5rem',
+  right: '1rem',
 })
 
 export const input = style({

src/ui/components/TypeDocSignature/Generics/index.tsx

@@ -1,6 +1,7 @@
 import { FunctionComponent, h, Fragment } from 'preact'
 import { useContext } from 'preact/hooks'
 import type { TypeParameterReflection } from 'typedoc'
+import { IgnoreParentTypesSourceContext } from '~/ui/contexts/IgnoreParentTypesSource'
 import { InlineTypeContext } from '~/ui/contexts/InlineTypeContext'
 import { ParentTypesMap, typeHash } from '~/utils/docs'
 import { IdHightlight } from '../../IdHighlight'
@@ -14,6 +15,7 @@ export const TypeDocSignatureGenerics: FunctionComponent<TypeDocSignatureGeneric
   params,
 }) => {
   const inline = useContext(InlineTypeContext)
+  const ignoreSource = useContext(IgnoreParentTypesSourceContext)
 
   return (
     <>
@@ -22,7 +24,9 @@ export const TypeDocSignatureGenerics: FunctionComponent<TypeDocSignatureGeneric
         const id = inline.buildId?.(param)
         return (
           <>
-            {inline ? (
+            {inline && ignoreSource && inline.parentTypesMap?.[param.id] ? (
+              <a href={inline.parentTypesMap[param.id]}>{param.name}</a>
+            ) : inline && !ignoreSource ? (
               <span id={id}>
                 <IdHightlight id={id} match={inline.idHighlightMatch}>
                   {param.name}

src/ui/components/TypeDocSignature/index.tsx

@@ -1,11 +1,8 @@
-import classNames from 'classnames'
 import { Fragment, FunctionComponent, h } from 'preact'
-import type { SignatureReflection, TypeParameterReflection } from 'typedoc'
-import { ParentTypesMap } from '~/utils/docs'
+import type { SignatureReflection } from 'typedoc'
 import { TypeDocType } from '../TypeDocType'
 import { TypeDocSignatureArguments as Arguments } from './Arguments'
 import { TypeDocSignatureGenerics as Generics } from './Generics'
-import * as styles from './styles.css'
 
 interface TypeDocSignatureProps {
   name?: string

src/ui/contexts/IgnoreParentTypesSource/index.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'preact'
+
+export const IgnoreParentTypesSourceContext = createContext<boolean>(false)

src/ui/hooks/useActiveItem/index.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef, useState } from 'preact/hooks'
+import {
+  scrollIntoViewIfNeeded,
+  ScrollIntoViewIfNeededOptions,
+} from '~/utils/dom'
+
+export function useActiveItem(
+  id: unknown,
+  options?: ScrollIntoViewIfNeededOptions
+) {
+  const activeRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    console.log('item', activeRef.current)
+    scrollIntoViewIfNeeded(activeRef.current, options)
+  }, [id])
+
+  return { activeRef }
+}

src/ui/hooks/useQuery/index.tsx

@@ -0,0 +1,13 @@
+import { useRef, useState } from 'preact/hooks'
+
+export function useQuery() {
+  const searchRef = useRef<HTMLInputElement>(null)
+  const [query, setQueryState] = useState('')
+
+  function setQuery(str: string) {
+    setQueryState(str)
+    searchRef.current?.focus()
+  }
+
+  return { query, setQuery, searchRef }
+}

src/ui/screens/Docs/Doc/TypeDoc/Constants/index.tsx

@@ -22,11 +22,12 @@ import { Search } from '~/ui/components/Search'
 import { SectionHeader } from '~/ui/components/SectionHeader'
 import { SourceLink } from '~/ui/components/SourceLink'
 import { TypeDocType } from '~/ui/components/TypeDocType'
+import { useQuery } from '~/ui/hooks/useQuery'
 import {
   extractCodeFromTagString,
   findSource,
   generateUsage,
-  hightlightMarkdown,
+  highlightMarkdown,
 } from '~/utils/docs'
 import * as styles from './styles.css'
 
@@ -47,7 +48,7 @@ export const TypeDocConstants: FunctionComponent<TypeDocConstantsProps> = ({
 }) => {
   const description = useMemo(() => findDescription(doc), [doc])
 
-  const [query, setQuery] = useState('')
+  const { query, setQuery, searchRef } = useQuery()
 
   const constants: ConstantItem[] = useMemo(
     () =>
@@ -80,7 +81,7 @@ export const TypeDocConstants: FunctionComponent<TypeDocConstantsProps> = ({
 
       <section class={styles.list}>
         <div class={styles.search}>
-          <Search query={[query, setQuery]} bordered />
+          <Search query={[query, setQuery]} inputRef={searchRef} bordered />
         </div>
 
         {filtered.length ? (
@@ -90,7 +91,7 @@ export const TypeDocConstants: FunctionComponent<TypeDocConstantsProps> = ({
             ))}
           </Entities>
         ) : (
-          <NoSearchResults noun="constants" query={query} setQuery={setQuery} />
+          <NoSearchResults noun="constants" query={[query, setQuery]} />
         )}
       </section>
 
@@ -136,7 +137,7 @@ function Constant({ item, query }: ConstantProps) {
 
       {description && (
         <DocDescription
-          description={hightlightMarkdown(description, query)}
+          description={highlightMarkdown(description, query)}
           scope={name}
           header="h3"
         />

src/ui/screens/Docs/Doc/TypeDoc/Function/Signature/index.tsx

@@ -2,6 +2,7 @@ import { findSignatureReturns } from '@date-fns/docs/utils'
 import { h, FunctionComponent, Fragment } from 'preact'
 import { useMemo } from 'preact/hooks'
 import type { SignatureReflection, TypeParameterReflection } from 'typedoc'
+import { IgnoreParentTypesSourceContext } from '~/ui/contexts/IgnoreParentTypesSource'
 import { Arguments } from '../Arguments'
 import { Generics } from '../Generics'
 import { Returns } from '../Returns'
@@ -27,7 +28,9 @@ export const Signature: FunctionComponent<SignatureProps> = ({
 
   return (
     <>
-      <Type name={name} signature={signature} header={header} />
+      <IgnoreParentTypesSourceContext.Provider value>
+        <Type name={name} signature={signature} header={header} />
+      </IgnoreParentTypesSourceContext.Provider>
 
       {signature.typeParameter && (
         <Generics args={signature.typeParameter} header={header} />