feat: minimal valid ts setup for docs

Author: exploIF

docs/package.json

@@ -12,7 +12,8 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "format-js": "prettier --write --list-different './**/*.{js,ts,tsx}'"
+    "format-js": "prettier --write --list-different './**/*.{js,ts,tsx}'",
+    "typecheck": "tsc"
   },
   "dependencies": {
     "@docusaurus/core": "3.9.2",
@@ -58,7 +59,8 @@
     "@docusaurus/module-type-aliases": "3.9.2",
     "@docusaurus/tsconfig": "3.9.2",
     "@docusaurus/types": "3.9.2",
-    "raw-loader": "^4.0.2"
+    "raw-loader": "^4.0.2",
+    "typescript": "5.9.3"
   },
   "browserslist": {
     "production": [

docs/src/components/Grid/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { PropsWithChildren } from 'react';
 import styles from './styles.module.css';
 
-export default function Grid({ children }) {
+export default function Grid({ children }: PropsWithChildren) {
   return <div className={styles.container}>{children}</div>;
 }

docs/src/components/Indent/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { PropsWithChildren } from 'react';
 import styles from './styles.module.css';
 
-export default function Indent({ children }) {
+export default function Indent({ children }: PropsWithChildren) {
   return <div className={styles.container}>{children}</div>;
 }

docs/src/components/Optional/index.tsx

@@ -5,6 +5,6 @@ interface Props {
   footnote?: boolean;
 }
 
-export default function Optional({ footnote }) {
+export default function Optional({ footnote }: Props) {
   return <div className={styles.badge}>Optional{footnote ? '*' : ''}</div>;
 }

docs/src/components/Row/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { PropsWithChildren } from 'react';
 import styles from './styles.module.css';
 
-export default function Row({ children }) {
+export default function Row({ children }: PropsWithChildren) {
   return <div className={styles.container}>{children}</div>;
 }

docs/src/theme/MDXComponents/DetailsStyling.tsx

@@ -3,13 +3,22 @@ import { useCollapsible, Collapsible } from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import React from 'react';
 import { useRef, useState } from 'react';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
 
 import styles from './styles.module.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import ThemedImage from '@theme/ThemedImage';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-const DetailsStyling = ({ summary, children, ...props }): JSX.Element => {
+interface DetailsStylingProps extends ComponentProps<'details'> {
+  summary: ReactElement<{ children?: ReactNode }>;
+}
+
+const DetailsStyling = ({
+  summary,
+  children,
+  ...props
+}: DetailsStylingProps): ReactElement => {
   const isBrowser = useIsBrowser();
   const { collapsed, setCollapsed } = useCollapsible({
     initialState: !props.open,
@@ -72,7 +81,6 @@ const DetailsStyling = ({ summary, children, ...props }): JSX.Element => {
       <Collapsible
         lazy={false}
         collapsed={collapsed}
-        disableSSRStyle
         onCollapseTransitionEnd={newCollapsed => {
           setCollapsed(newCollapsed);
           setOpen(!newCollapsed);

docs/src/theme/muiTheme.tsx

@@ -1,4 +1,4 @@
-import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { extendTheme } from '@mui/material/styles';
 
 import Aeonik from '../../static/fonts/Aeonik-Regular.otf';
 

docs/src/types.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="@docusaurus/module-type-aliases" />
+/// <reference types="@docusaurus/theme-classic" />
+
+// t-rex-ui publishes no type declarations (its package.json points at a
+// dist/main.d.ts that is not shipped). Only the exports used from checked
+// TypeScript files are declared here; the .js theme overrides that import
+// its components are not typechecked and need no declarations.
+declare module '@swmansion/t-rex-ui' {
+  export interface BannerZone {
+    zoneId: string;
+    contentId: string;
+    fallbackBgColor?: string;
+  }
+}
+
+declare module '*.otf';

docs/tsconfig.json

@@ -1,12 +1,14 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": ".",
+    "strict": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "paths": {
       "@site/*": ["./*"],
       "react-native-enriched-html": ["../src/index.tsx"]
-    },
+    }
   },
-  "exclude": [".docusaurus", "build"],
-  "include": ["src/examples"]
-}
+  "include": ["src"],
+  "exclude": [".docusaurus", "build"]
+}

docs/yarn.lock

@@ -7395,6 +7395,7 @@ __metadata:
     react-dom: "npm:19.1.1"
     react-native: "npm:0.86.0"
     react-native-web: "npm:0.21.2"
+    typescript: "npm:5.9.3"
   languageName: unknown
   linkType: soft
 
@@ -14798,6 +14799,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:5.9.3":
+  version: 5.9.3
+  resolution: "typescript@npm:5.9.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/6bd7552ce39f97e711db5aa048f6f9995b53f1c52f7d8667c1abdc1700c68a76a308f579cd309ce6b53646deb4e9a1be7c813a93baaf0a28ccd536a30270e1c5
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>":
+  version: 5.9.3
+  resolution: "typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>::version=5.9.3&hash=5786d5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/ad09fdf7a756814dce65bc60c1657b40d44451346858eea230e10f2e95a289d9183b6e32e5c11e95acc0ccc214b4f36289dcad4bf1886b0adb84d711d336a430
+  languageName: node
+  linkType: hard
+
 "ua-parser-js@npm:^1.0.35":
   version: 1.0.41
   resolution: "ua-parser-js@npm:1.0.41"