[HELP WANTED] Add TypeScript Version of Existing Components

[DavidHDev]

Description

The library now supports TypeScript! But we still need to add the TypeScript code for most of the components!

Help Wanted

Two new folders have been created inside the src folder of the project:

• /ts-default
• /ts-tailwind

The steps to adding full TypeScript support for any component are:

1. Under /ts-default and /ts-tailwind, create a new folder using the component's name (e.g: SplitText)
2. For /ts-default, create two files: <ComponentName>.tsx and <ComponentName>.css - this will be the TS + CSS version of the component
3. For /ts-tailwind, create one file: <ComponentName>.tsx - this will be the TS + Tailwind version of the component
4. It's then up to you to add the component code in both of these folders
5. Test your code locally to ensure the component is working as expected after the conversion! Replace the import inside the Demo component of the component you just converted to TypeScript, and it should work exactly the same as the JS one, if not, you need to go back and fix any issues!
6. Now that you have your components, you will have to update the snippet constants that are used for that component in the "Code" tab! You will find this under /src/constants/code/<Category>/<componentName>Code.js. In here you will have to add the following information: cliTsDefault, cliTsTailwind, tsCode, tsTailwind
7. For the actual component code, you'll need to add some extra imports in the file and append them to the existing object that gets exported out of the file:

import code from '@content/<Category>/<Component>/<Component>.jsx?raw';

// if there's also a css file
import code from '@content/<Category>/<Component>/<Component>.css?raw';

import tailwind from '@tailwind/<Category>/<Component>/<Component>.jsx?raw';
import tsCode from '@ts-default/<Category>/<Component>/<Component>.tsx?raw';
import tsTailwind from '@ts-tailwind/<Category>/<Component>/<Component>.tsx?raw';

Please note: it's important to keep the import keys as code, css, tailwind, tsCode, tsTailwind!

So your final updated file should look similar to this:

import code from '@content/Animations/AnimatedContent/AnimatedContent.jsx?raw';
import tailwind from '@tailwind/Animations/AnimatedContent/AnimatedContent.jsx?raw';
import tsCode from '@ts-default/Animations/AnimatedContent/AnimatedContent.tsx?raw';
import tsTailwind from '@ts-tailwind/Animations/AnimatedContent/AnimatedContent.tsx?raw';

export const animatedContent = {
  installation: `npm install @react-spring/web`,
  cliDefault: `npx jsrepo add https://reactbits.dev/default/Animations/AnimatedContent`,
  cliTailwind: `npx jsrepo add https://reactbits.dev/tailwind/Animations/AnimatedContent`,
  cliTsDefault: `npx jsrepo add https://reactbits.dev/ts/default/Animations/AnimatedContent`,
  cliTsTailwind: `npx jsrepo add https://reactbits.dev/ts/tailwind/Animations/AnimatedContent`,
  usage: `import AnimatedContent from './AnimatedContent'

<AnimatedContent
  distance={150}
  direction="horizontal"
  reverse={false}
  config={{ tension: 80, friction: 20 }}
  initialOpacity={0.2}
  animateOpacity
  scale={1.1}
  threshold={0.2}
>
  <div>Content to Animate</div>
</AnimatedContent>`,
  code,
  tailwind,
  tsCode,
  tsTailwind
}

8. Finally, inside /demo/<Category>/<ComponentName>Demo.jsx, update the CliInstallation props so that it looks like the example below:

<CliInstallation {...animatedContent} />

Wrapping Up

That's it! When you're done, test your changes, go through all the tabs and make sure the snippets are correct, check the console for errors, and if all is well, you've successfully added the TypeScript snippets to the component!

[iwint]

Hey @DavidHDev, I would like to contribute to this. Can I know what is all pending on this? , please

[DavidHDev]

@iwint most of the components are pending, besides the ones in the Text Animations. If you open the "content" folder in the project, every component there should also be in ts-default and ts-tailwind, if they're not there, it means the files have not been migrated

[iwint]

@DavidHDev Thanks for the clarification and I'll do the necessary changes and provide you an update.

[iwint]

Hi @DavidHDev,

I've noticed that the interfaces are currently duplicated in ts-default and ts-tailwind, and are also defined directly within components. Would it be a good practice to declare these interfaces separately in their own interfaces folder?

Looking forward to your thoughts.

[DavidHDev]

@iwint Interfaces are supposed to be duplicated, because using the CLI to install the components requires all the code to be in the component file/folder, so even if you were to extract the interfaces you would have to define two files for each component and keep them in their respective folders in ts-default and ts-tailwind, they can't use the same one.

[iwint]

@iwint Interfaces are supposed to be duplicated, because using the CLI to install the components requires all the code to be in the component file/folder, so even if you were to extract the interfaces you would have to define two files for each component and keep them in their respective folders in ts-default and ts-tailwind, they can't use the same one.

Got it @DavidHDev. Thanks for the clarification

[iwint]

Hey @DavidHDev, Can I take up the SplashCursor and StarBorder components ts-conversion?

[DavidHDev]

@iwint you don't need to ask, just go for it if you have the time 🙌

[DavidHDev]

@iwint StarBorder was just merged in by someone else

[DavidHDev]

As of now, here are the components left:

Component that need TS conversion:

• PixelCard
• RollingGallery
• TiltedCard
• GridDistortion
• Ballpit
• BounceCards
• ElasticSlider
• InfiniteScroll
• LogoWall

Components that need TS & Tailwind conversion:

• GridMotion - [TS + Tailwind Needed]
• DecayCard [TS + Tailwind Needed]
• Masonry [TS + Tailwind Needed]

Thanks everyone for the help so far, we're really close to fully supporting the library in all 4 variants 🥇 🎊

[iwint]

@DavidHDev . I'll work on PixelCard Component today

[DavidHDev]

All 50+ components in the React Bits collection are now supported in 4 versions:

• JS + CSS
• JS + Tailwind
• TS + CSS
• TS + Tailwind

Thanks to everyone who gave some of their time to make this happen faster! 🥳

Happy to say this issue can be closed!