FP submodule section & dark theme

package.json

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

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

@@ -2,4 +2,5 @@ import { style } from '@vanilla-extract/css'
 
 export const highlight = style({
   backgroundColor: '#fffe25',
+  color: 'black',
 })

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

@@ -0,0 +1,52 @@
+import { Fragment, FunctionComponent, h } from 'preact'
+import { RouterLink } from '~/ui/router'
+import { docLink } from '~/ui/router/docLink'
+import { parseMajorVersion } from '~/utils/docs'
+import * as styles from './styles.css'
+
+interface Props {
+  name: string
+  pure: boolean | undefined
+  selectedVersion: string
+  hasOptions: boolean
+}
+
+export const FP: FunctionComponent<Props> = ({
+  name,
+  pure,
+  selectedVersion,
+  hasOptions,
+}) => {
+  const version = selectedVersion && parseMajorVersion(selectedVersion)
+  if (!version || version < 3) return null
+
+  return pure ? (
+    <div class={styles.fpNote}>
+      🦄 The function is also available in the FP submodule as{' '}
+      <code>{name}</code>
+      {hasOptions && (
+        <Fragment>
+          {' '}
+          and <code>{name}WithOptions</code>
+        </Fragment>
+      )}
+      .{' '}
+      <RouterLink
+        decorated
+        to={docLink({
+          page: 'FP-Guide',
+          version: selectedVersion,
+        })}
+      >
+        Read more about it in the FP guide
+      </RouterLink>
+      .
+    </div>
+  ) : (
+    <div class={styles.fpNote}>
+      ⚠️ Please note that this function is not present in the FP submodule as it
+      uses <code>Date.now()</code> internally hence impure and can't be safely
+      curried.
+    </div>
+  )
+}

src/ui/screens/Docs/Doc/TypeDoc/Function/FP/styles.css.ts

@@ -0,0 +1,25 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+
+export const fpNote = style({
+  marginTop: '0.75rem',
+  fontSize: '14px',
+  color: '#7c6973',
+
+  '@media': {
+    '(prefers-color-scheme: dark)': {
+      color: '#9b838f',
+    },
+  },
+})
+
+globalStyle(`${fpNote} code`, {
+  border: '1px solid #5844521a',
+  background: '#fffefd',
+
+  '@media': {
+    '(prefers-color-scheme: dark)': {
+      borderColor: '#2c1622',
+      background: '#12000a',
+    },
+  },
+})

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

@@ -17,13 +17,15 @@ import { InlineTypeContext } from '~/ui/contexts/InlineTypeContext'
 import {
   extractCodeFromTagString,
   findSource,
+  fnHasOptions,
   generateUsage,
   pageTypeHash,
   pageTypeId,
   pageTypeIdHighlightMatch,
   ParentTypesMap,
 } from '~/utils/docs'
 import { Signatures } from './Signatures'
+import { FP } from './FP'
 
 interface TypeDocFunctionProps {
   page: DateFnsDocs.TypeDocPage
@@ -61,6 +63,13 @@ export const TypeDocFunction: FunctionComponent<TypeDocFunctionProps> = ({
 
       <DocUsage usage={usage} usageTabs={usageTabs} />
 
+      <FP
+        name={doc.name}
+        selectedVersion={page.version}
+        pure={page.pure}
+        hasOptions={fnHasOptions(fn)}
+      />
+
       {signatures && <Signatures name={doc.name} signatures={signatures} />}
 
       {examples && <DocExamples examples={examples} />}

src/ui/screens/Docs/NavBar/SubmoduleSelector.tsx

@@ -4,6 +4,7 @@ import { docLink } from '~/ui/router/docLink'
 import { useContext } from 'preact/hooks'
 import { RouterContext } from '~/ui/router'
 import * as styles from './styles.css'
+import { parseMajorVersion } from '~/utils/docs'
 
 const SUBMODULE_LABELS: Record<DateFnsDocs.Submodule, string> = {
   default: 'Default',
@@ -31,6 +32,10 @@ export const SubmoduleSelector: FunctionComponent<Props> = ({
     return null
   }
 
+  // For v3 don't show submodule selector and render FP section instead
+  const version = parseMajorVersion(selectedVersion)
+  if (version >= 3) return null
+
   return (
     <label class={styles.selector}>
       <span class={styles.label}>Submodule:</span>

src/utils/docs/index.ts

@@ -176,3 +176,15 @@ export function inlineTypeIdHighlightMatch(id: string, hash: string) {
 function rand() {
   return btoa(Math.random().toString().slice(2, 5)).slice(0, 3)
 }
+
+export function parseMajorVersion(version: string) {
+  const majorVersionStr = version.match(/v(\d+)/)?.[1]
+  const majorVersion = majorVersionStr && parseInt(majorVersionStr)
+  return majorVersion || 1
+}
+
+export function fnHasOptions(fn: DeclarationReflection | undefined) {
+  return !!fn?.signatures?.find((sig) =>
+    sig.parameters?.find((param) => param.name === 'options')
+  )
+}

yarn.lock

@@ -251,10 +251,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@date-fns/docs@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@date-fns/docs/-/docs-0.24.0.tgz#a69db423f5ffe78992cbbb2094c631da696c3cb0"
-  integrity sha512-/mI63fs/kVMThANrSSDiLsHi8polkI9Ase4S7rkMh5r77pxmhvhSoA78m7mLIRyst5u5dlP9052hKspSxtf92A==
+"@date-fns/docs@^0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@date-fns/docs/-/docs-0.25.0.tgz#aab430671215386bd1bdb490a7b34abe114a8b2d"
+  integrity sha512-Tu+7Bme1SnAvh2xK1kUPRWZcacw2ThZ0XoRTvx3mFU383U9fWis3wTF7ihl2bF7tfmsqjLnSXKzZDhlPr5afuw==
   dependencies:
     firebase-admin "^11.4.1"
     js-fns "^2.5.2"