docs: add typescript examples

Author: SergeyKazarinov

docs-site/package.json

@@ -16,21 +16,26 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
   },
   "devDependencies": {
     "@eslint/js": "^9.24.0",
+    "@types/lodash": "^4.17.11",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.2",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.23.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
     "sass": "^1.86.3",
+    "typescript": "^5.3.3",
     "vite": "^6.2.5"
   },
   "packageManager": "[email protected]"

docs-site/src/components/Example/index.jsx renamed to docs-site/src/components/Example/index.tsx

@@ -12,26 +12,70 @@ import slugify from "slugify";
 import range from "lodash/range";
 import { themes } from "prism-react-renderer";
 import editIcon from "./edit-regular.svg";
+import { IExampleConfig } from "../../types";
+
+type TState = {
+  activeTab: "js" | "ts";
+};
+
+type TProps = {
+  example: IExampleConfig;
+};
+
+export default class CodeExampleComponent extends React.Component<
+  TProps,
+  TState
+> {
+  state: TState = {
+    activeTab: "js",
+  };
 
-export default class CodeExampleComponent extends React.Component {
   componentDidMount() {
     registerLocale("fi", fi);
     registerLocale("pt-BR", ptBR);
     registerLocale("en-GB", enGB);
   }
 
+  handleTabChange = (tab: TState["activeTab"]) => {
+    this.setState({ activeTab: tab });
+  };
+
   render() {
-    const { title, description, component } = this.props.example;
+    const { title, description, component, componentTS } = this.props.example;
+    const { activeTab } = this.state;
+
+    const jsCode = component.trim();
+    const tsCode = componentTS?.trim();
+
+    const code = activeTab === "js" ? jsCode : tsCode;
+    const isTS = activeTab === "ts";
+
     return (
       <div
         id={`example-${slugify(title, { lower: true })}`}
         className="example"
       >
         <h2 className="example__heading">{title}</h2>
         {description && <p>{description}</p>}
+        <div className="example__tabs">
+          <button
+            className={`example__tab ${activeTab === "js" ? "active" : ""}`}
+            onClick={() => this.handleTabChange("js")}
+          >
+            JavaScript
+          </button>
+          {tsCode && (
+            <button
+              className={`example__tab ${activeTab === "ts" ? "active" : ""}`}
+              onClick={() => this.handleTabChange("ts")}
+            >
+              TypeScript
+            </button>
+          )}
+        </div>
         <div className="row">
           <LiveProvider
-            code={component.trim()}
+            code={code}
             scope={{
               // NB any globals added here should also be referenced in ../../examples/.eslintrc
               useState,
@@ -43,6 +87,8 @@ export default class CodeExampleComponent extends React.Component {
               forwardRef,
             }}
             theme={themes.github}
+            noInline={isTS}
+            language={isTS ? "tsx" : "jsx"}
           >
             <pre className="example__code">
               <img