Add TypeScript Version of Noise Component in Animations Section

[whitedevil-glitch]

Description:

Hello!

I’d like to contribute by adding TypeScript support for the Noise component under the Animations section. As mentioned in issue #34, the library now supports TypeScript, and I’d like to help by converting this component to TypeScript.

What I Plan to Do:

• Create TypeScript versions of the Noise component:
  • A default version with CSS (/ts-default/Noise).
  • A Tailwind version (/ts-tailwind/Noise).
• Update the snippet constants in /src/constants/code/Animations/noiseCode.js to include the new TypeScript snippets.
• Update the demo component in /src/demo/Animations/NoiseDemo.jsx to reflect the TypeScript changes.

notes:

• I’ll follow the branch naming convention: feat/add-ts-noise.
• I’ll ensure the changes are tested on both desktop and mobile.

let me know if this is okay, and I’ll start working on it.

peace.

[DavidHDev]

Hey! Just to note:

I've modified how the code snippets work inside the project, now, we import the actual component files as raw text, so we can avoid duplicating the code:

For example:

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
}

For components that also have CSS files, you would also add:

import css from '@content/Animations/AnimatedContent/AnimatedContent.css?raw';

Only thing to note - it's important to keep the key naming as code, tailwind, css, tsCode, tsTailwind

[DavidHDev]

I will update this info in the general issue as well

[whitedevil-glitch]

oh.. alright! should I start to work on it then?

[DavidHDev]

Yep, anytime you want

[whitedevil-glitch]

hey @DavidHDev , should I create another branch(feat/add-ts-noise) for PR? or should I just put a request to directly merge into main branch.

[DavidHDev]

hey @whitedevil-glitch , after you have your fork, you can just open a PR with your changes. So you can merge your main into this repo's main. It's up to you if you prefer having separate branches

[DavidHDev]

Done, merged 👍