TSDoc -> TypeDoc, constants, latest @date-fns/docs

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.18.0",
+    "@date-fns/docs": "0.21.1",
     "@sentry/browser": "^5.30.0",
     "@sentry/tracing": "^5.30.0",
     "@switcher/preact": "2.3.0",

src/ui/components/DocDescription/index.tsx

@@ -0,0 +1,32 @@
+import { ComponentChildren, FunctionComponent, h, Fragment } from 'preact'
+import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
+import { Markdown } from '~/ui/components/Markdown'
+
+interface DocDescriptionProps {
+  description: string
+  header?: 'h2' | 'h3'
+}
+
+export const DocDescription: FunctionComponent<DocDescriptionProps> = ({
+  description,
+  header,
+}) => {
+  const headerContent = (
+    <>
+      Description
+      <DocHeaderAnchor anchor="description" />
+    </>
+  )
+
+  return (
+    <section>
+      {header === 'h2' ? (
+        <h2 id="description">{headerContent}</h2>
+      ) : (
+        <h3 id="description">{headerContent}</h3>
+      )}
+
+      <Markdown value={description} />
+    </section>
+  )
+}

src/ui/components/DocExamples/index.tsx

@@ -1,4 +1,4 @@
-import { h, FunctionComponent } from 'preact'
+import { h, Fragment, FunctionComponent } from 'preact'
 import { Code } from '~/ui/components/Code'
 import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
 import isArray from 'lodash/isArray'
@@ -7,23 +7,34 @@ import * as styles from './styles.css'
 
 interface Props {
   examples: string[] | string
+  header?: 'h2' | 'h3'
 }
 
-export const DocExamples: FunctionComponent<Props> = ({ examples }) => (
-  <section>
-    <h2 id="examples">
+export const DocExamples: FunctionComponent<Props> = ({ examples, header }) => {
+  const headerContent = (
+    <>
       Examples
       <DocHeaderAnchor anchor="examples" />
-    </h2>
+    </>
+  )
 
-    {isArray(examples) ? (
-      examples.map((example, index) => (
-        <div class={styles.codeContainer} key={index}>
-          <Code value={example} />
-        </div>
-      ))
-    ) : (
-      <Markdown value={examples} />
-    )}
-  </section>
-)
+  return (
+    <section>
+      {header === 'h2' ? (
+        <h2 id="examples">{headerContent}</h2>
+      ) : (
+        <h3 id="description">{headerContent}</h3>
+      )}
+
+      {isArray(examples) ? (
+        examples.map((example, index) => (
+          <div class={styles.codeContainer} key={index}>
+            <Code value={example} />
+          </div>
+        ))
+      ) : (
+        <Markdown value={examples} />
+      )}
+    </section>
+  )
+}

src/ui/components/DocLinks/index.tsx

@@ -2,7 +2,6 @@ import { h } from 'preact'
 import { useContext } from 'preact/hooks'
 import { RouterContext, RouterLink } from '~/ui/router'
 import { bugTemplateText, docIssueTemplateText } from './templateText'
-import * as styles from './styles.css'
 
 export const DocLinks = () => {
   const { location } = useContext(RouterContext)
@@ -19,7 +18,6 @@ export const DocLinks = () => {
         <li>
           <div>
             <RouterLink
-              class={styles.link}
               decorated
               to={{
                 name: 'docs',

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

@@ -146,3 +146,10 @@ globalStyle(`${content} ul ul`, {
 globalStyle(`${content} ul:last-child`, {
   marginBottom: '0',
 })
+
+globalStyle(`${content} blockquote`, {
+  marginBottom: '10px',
+  borderLeft: '3px solid #b9a2b2',
+  background: '#faf6f0',
+  padding: '0.5rem 1rem',
+})

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

@@ -11,6 +11,7 @@ import { Returns } from './Returns'
 import { Syntax } from './Syntax'
 import { DocUsage } from '~/ui/components/DocUsage'
 import { DocHeader } from '~/ui/components/DocHeader'
+import { DocDescription } from '~/ui/components/DocDescription'
 
 interface Props {
   doc: DateFnsDocs.JSDocFunction
@@ -20,14 +21,7 @@ export const JSDoc: FunctionComponent<Props> = ({ doc }) => (
   <div>
     <DocHeader>{doc.title}</DocHeader>
 
-    <section>
-      <h2 id="description">
-        Description
-        <DocHeaderAnchor anchor="description" />
-      </h2>
-
-      <Markdown value={doc.content.description} />
-    </section>
+    <DocDescription description={doc.content.description} />
 
     {doc.usage && doc.usageTabs && (
       <DocUsage usage={doc.usage} usageTabs={doc.usageTabs} />

src/ui/screens/Docs/Doc/JSDoc/index.tsx

@@ -0,0 +1,80 @@
+import type { DateFnsDocs } from '@date-fns/docs/types'
+import {
+  findDescription,
+  findSummary,
+  findFnDescription,
+  findFnExamples,
+  findExamples,
+} from '@date-fns/docs/utils'
+import { Fragment, FunctionComponent, h } from 'preact'
+import { useMemo } from 'preact/hooks'
+import type { DeclarationReflection } from 'typedoc'
+import { CodeComponent } from '~/ui/components/Code'
+import { DocDescription } from '~/ui/components/DocDescription'
+import { DocExamples } from '~/ui/components/DocExamples'
+import { DocHeader } from '~/ui/components/DocHeader'
+import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
+import { DocLinks } from '~/ui/components/DocLinks'
+import { extractCodeFromTagString } from '~/utils/docs'
+import * as styles from './styles.css'
+
+interface TypeDocConstantsProps {
+  page: DateFnsDocs.TypeDocPage
+  doc: DeclarationReflection
+}
+
+export const TypeDocConstants: FunctionComponent<TypeDocConstantsProps> = ({
+  page,
+  doc,
+}) => {
+  const description = useMemo(() => findDescription(doc), [doc])
+
+  return (
+    <>
+      <DocHeader>{page.title}</DocHeader>
+
+      {description && <DocDescription description={description} />}
+
+      {doc.children?.map((constant) => (
+        <Constant constant={constant} />
+      ))}
+
+      <code>
+        <pre>{JSON.stringify(doc, null, 2)}</pre>
+      </code>
+
+      <DocLinks />
+    </>
+  )
+}
+
+interface ConstantProps {
+  constant: DeclarationReflection
+}
+
+function Constant({ constant }: ConstantProps) {
+  if (constant.kindString !== 'Variable') return null
+
+  const description = useMemo(
+    () => findDescription(constant) || findSummary(constant),
+    [constant]
+  )
+
+  const examples = useMemo(
+    () => findExamples(constant).map(extractCodeFromTagString),
+    [constant]
+  )
+
+  return (
+    <section>
+      <h2 id={constant.name}>
+        <span class={styles.name}>{constant.name}</span>
+        <DocHeaderAnchor anchor={constant.name} />
+      </h2>
+
+      {description && <DocDescription description={description} header="h3" />}
+
+      {examples && <DocExamples examples={examples} header="h3" />}
+    </section>
+  )
+}

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

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css'
+
+export const name = style({
+  fontFamily: 'monospace',
+})