Commit bunch of changes

Author: kossnocorp

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