✨ docs-site(ts): Migrate examples to TypeScript, add live transpilation to JavaScript + Copy code feature #5865
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…skipping the type check for the files - Added a custom tsconfig.json to skip the type checking inside examples/ - Made TypeScript tab is the default tab for documentation
- Added `esbuild-wasm` as a dependency to enable TypeScript transpilation. - Implemented `tsxTransformer` for transforming TSX code to JSX. - Updated `CodeExampleComponent` to handle TSX code and display transpiled output. - Enhanced example configuration to support new TSX examples. - Removed the duplicate javascript code base examples from examples/js/*.js - Styled loading state for transpilation in examples.
- Integrated `copy-to-clipboard` library to enable copying code snippets. - Added a copy icon button in the code example component for user interaction. - Styled action buttons for better user experience in the examples section. - Introduced a new SVG icon for the copy action.
…ions - Introduced a new Toast component to display success and error messages. - Integrated Toast notifications in the CodeExampleComponent for user feedback on actions like code copying and transpilation errors. - Added corresponding styles for the Toast component in a new SCSS file.
- Removed unnecessary props from ExampleCustomInputProps to streamline the component's interface. - Improved code clarity and maintainability by focusing on essential properties.
- Introduced a new TypeScript declaration file to support importing PNG images in the project. - This addition enhances type safety and improves the development experience when working with image assets.
- Updated tsconfig.json for examples to include new compiler options and exclude specific files. - Introduced a new live-provider-globals.d.ts file to declare global variables and types that we configured for react-live. - Refactored examples to use globally declared DateFNS methods. - Add the DATEFNS directly to the react-live scope instead of destructuring it, as it avoid declaring all utilities of date-fns - Fixed the type related issues in the examples.
- Updated state variable names from `startDate` and `setStartDate` to `selectedDate` and `setSelectedDate` across multiple date picker examples. - This change enhances code readability and consistency in the examples. - Clone of the commit 5aa5985
…nths example. Related commit: 7a95428 - Eliminated the visibility style condition for the previous navigation button when customHeaderCount is 1, simplifying the component's logic. - This change enhances code clarity and reduces unnecessary complexity in the example.
…ncy. Related commit 5aa5985 - Updated state variable names from `selectedDate` to `selectedDateTime` across multiple date picker examples. - This change improves code clarity and maintains consistency in the examples.
…pied unintentionally during the merge with main branch - Deleted the customRangeSeparator.js and customWeekClassName.js example files as they are no longer needed. - This cleanup helps maintain a more streamlined and relevant codebase.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5865 +/- ##
=======================================
Coverage 97.26% 97.26%
=======================================
Files 30 30
Lines 3443 3443
Branches 1454 1439 -15
=======================================
Hits 3349 3349
Misses 94 94 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
balajis-qb
force-pushed
the
enhancement/docs-site-ts
branch
from
6dc06e5 to
0d2dc05
Compare
There was a problem hiding this comment.
What was the need to change this one?
There was a problem hiding this comment.
It got moved accidentally. I'll revent the source project yarn.lock, as the changes are related mainly on the docs-site project
There was a problem hiding this comment.
I guess there is some issue with the diff of yarn.lock. It's wrongly showing that I made changes, but I verified the changes the yarn.lock file looks identical to the main branch. For example, in the below diff screenshot, it's showing that I updated @babel/eslint-parser to 7.28.4 from 7.28.0. But when I check the main branch it was already updated to 7.28.4
I tried restoring the yarn.lock from the main branch and push the changes, but still the diff is showing the changes.
balajis-qb
force-pushed
the
enhancement/docs-site-ts
branch
2 times, most recently
from
5be234f to
f9b5c32
Compare
balajis-qb
force-pushed
the
enhancement/docs-site-ts
branch
from
f9b5c32 to
2b37f40
Compare
|
Let's get this merged. Can you rebase it so we can get it in a good state? |
|
@martijnrusschen Done 👍🏻 |
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Migrates
docs-siteexamples from JavaScript to TypeScript, adds in-browser TypeScript transpilation viaesbuild-wasm, and improves UX withcopy-to-clipboardand toast notifications.As I added live transpilation support, we don't need to maintain two separate code base of TypeScript and Javascript. I created this branch from an existing PR authored by @SergeyKazarinov. I used the TS configuration setup by him as a base and added all my changes on top of it.
Changes
docs-site/src/examples/*.jswithdocs-site/src/examples/ts/*.tsxvariants across all examples. I also noticed in the initial PR, we were maintaining typescript code as a string, but I feel making changes to those examples will be difficult as editor auto-help won't help in that case, so I changed all those examples totsxreact-livescope: Addedlive-provider-globals.d.tswith the scope imports to avoid type errors in TSX files for the unimported functions. Moved all Date Utils functions to DateFNS & updated all the usage of Date utils toDateFNS.***()to avoid redeclaring all date_utils functions in the typescript global declaration file.esbuild-wasmand addstsxTransformer.tsfor client-side transpile of example code.index.jsx→index.tsx, updatesdocs-site/index.htmlscript reference, and converts vite.config.js → vite.config.ts.tsconfig.json,tsconfig.node.json,images.d.ts, andtypes/for better typings (It was already configured in the base PR).Screenshots
React-Datepicker-crafted-by-HackerOne.2.mp4
To reviewers
@martijnrusschen Please take your time to review this PR and let me know if any changes required.
Thank you @SergeyKazarinov, I used your PR as a base to this PR and mostly reused the TS config and examples and added my changes on top of it. If you have time, you also gothrough the changes I made and let me know if any changes required.
Contribution checklist