docs: add typescript examples

[SergeyKazarinov]

---

name: Pull Request
about: Create a pull request to improve this repository
title: "Add TypeScript Examples"
labels: "docs"
assignees: "Sergey Kazarinov"

Description

Problem

In some examples it is not obvious how to use TypeScript, which causes difficulties. Also, when using the library with TypeScript earlier, an error was found (already fixed) due to the lack of examples

Changes

In this PR I migrated the docs-site to TypeScript and added all existing examples with typing.
As an addition, I added tabs to switch the display of code from JS to TS

Screenshots

To reviewers

Contribution checklist

• I have followed the contributing guidelines.
• I have added sufficient test coverage for my changes.
• I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.98%. Comparing base (3f115e0) to head (d128864).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5605      +/-   ##
==========================================
- Coverage   97.01%   96.98%   -0.03%     
==========================================
  Files          30       30              
  Lines        3355     3355              
  Branches     1416     1416              
==========================================
- Hits         3255     3254       -1     
+ Misses        100       99       -1     
- Partials        0        2       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[martijnrusschen]

Autogenerated Review notes

Build & CI
• Redundant emit build now does a full tsc (emits JS) and vite build. Vite already transpiles TS; consider tsc --noEmit inside type-check only, to avoid duplicated output and speed up CI.
• Missing ESLint integration eslint config isn’t shown; make sure @typescript-eslint/parser is wired or TS files will be skipped.

Example component
• Logic is solid, but you could simplify by switching to a functional component with useState; less boilerplate, no need for the custom TState type.
• LiveProvider receives noInline={isTS} – good. Confirm that the TS transformer is available in the Live code sandbox you’re using, else snippets won’t execute.

DX & maintenance
• One-to-one JS + TS copies will double maintenance cost. Consider:
1. Keep a single source of truth (author in TS, transpile to JS for the second tab); or
2. Auto-generate the TS files in CI with ts-migrate/recast.
• Check that every IExampleConfig entry now includes an optional componentTS field; missing ones silently hide the TS tab, which is fine but might surprise contributors.

Minor
• build emits JS into docs-site/src; be sure .gitignore excludes it, or you’ll get noisy diffs later.
• @types/lodash is added, but lodash isn’t a prod dep in docs-site; if it’s only needed for the examples site, keep it here, otherwise move to workspace root.

⸻

Suggested follow-ups (non-blocking)
1. Convert the class component to React FC + hooks.
2. Add a small “Copy code” button to each tab while you’re touching that UI.
3. Document the new type-check script in CONTRIBUTING.md.

[martijnrusschen]

I like the direction taken here, but a bit worried about the double cost for maintaining both JS and TS, can you look into options to reduce that maintenance?

[SergeyKazarinov]

I like the direction taken here, but a bit worried about the double cost for maintaining both JS and TS, can you look into options to reduce that maintenance?

Okay, I will think about how I can improve it