Feat/animated text

apps/docs/src/pages/docs/_meta.json

@@ -7,6 +7,9 @@
   "phone-input": {
     "title": "PhoneInput"
   },
+  "animated-text": {
+    "title": "AnimatedText"
+  },
   "-- Hooks": {
     "type": "separator",
     "title": "Hooks"

apps/docs/src/pages/docs/animated-text.mdx

@@ -0,0 +1,32 @@
+---
+title: AnimatedText
+---
+
+# AnimatedText
+
+**AnimatedText** is a animated customizable React Component.
+
+## Install
+
+To start using **AnimatedText**, you can install the `@react-awesome/use-breakpoint` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
+the following command to install the dependencies:
+
+```sh npm2yarn
+npm i @react-awesome/components
+```
+
+## Usage
+
+import { useState } from 'react'
+import { Container } from '../../components/Container'
+import { AnimatedText } from '@react-awesome/components'
+
+export const TypeWritter = () => {
+  return <AnimatedText />
+}
+
+**AnimtedText** can support animate as `typewriter` effect.
+
+<Container>
+  <TypeWritter />
+</Container>

packages/animated-text/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ["@react-awesome/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

packages/animated-text/README.md

@@ -0,0 +1,32 @@
+# @react-awesome/animated-text
+
+<p align="center">
+  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fanimated-text" />
+  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=animated-text" />
+  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
+  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
+  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/animated-text" />
+</p>
+
+**animated-text** tracks the previous value of a variable.
+
+Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/animated-text) for more information.
+
+## Installation
+
+```sh
+yarn add @react-awesome/animated-text
+# or
+npm i @react-awesome/animated-text
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).

packages/animated-text/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@react-awesome/animated-text",
+  "version": "0.0.0",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "description": "The customizable animated text component.",
+  "keywords": [
+    "react",
+    "animation",
+    "typewriter",
+    "shine",
+    "text",
+    "React",
+    "animated"
+  ],
+  "repository": {
+    "url": "https://github.com/trinhthinh388/react-awesome-components"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "vite --config ../../vite.config.ts build",
+    "dev": "vite --watch --config ../../vite.config.ts build",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "clean": "rimraf .turbo && rimraf node_modules && rimraf dist",
+    "test:ui": "vitest --config ../../vite.config.ts --coverage --ui",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@react-awesome/eslint-config": "*",
+    "@react-awesome/tsconfig": "*",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "eslint": "^8.56.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/animated-text/src/AnimatedText/AnimatedText.tsx

@@ -0,0 +1,19 @@
+export type AnimatedTextProps<Tag extends keyof JSX.IntrinsicElements = 'p'> = {
+  /**
+   * @description AnimatedText html tag to render
+   * @default p
+   * @requires false
+   */
+  as?: Tag
+
+  children?: React.ReactNode
+  type?: 'typewriter'
+} & Omit<JSX.IntrinsicElements[Tag], 'type'>
+
+export const AnimatedText: React.FC<AnimatedTextProps> = ({
+  as: Element = 'p',
+  children,
+  type = 'typewriter',
+}) => {
+  return <Element>{children}</Element>
+}

packages/animated-text/src/TypeWriter/TypeWriter.tsx

@@ -0,0 +1,15 @@
+export type TypeWriterSequenceObj = {
+  duration: number
+}
+
+export type TypeWriterAnimatedTextProps<
+  Tag extends keyof JSX.IntrinsicElements = 'p',
+> = {
+  /**
+   * @description AnimatedText html tag to render
+   * @default p
+   * @requires false
+   */
+  as?: Tag
+  sequences?: (string | TypeWriterSequenceObj)[]
+} & JSX.IntrinsicElements[Tag]

packages/animated-text/src/index.ts

@@ -0,0 +1 @@
+export * from './AnimatedText/AnimatedText'

packages/animated-text/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@react-awesome/tsconfig/react-library.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+}

packages/components/package.json

@@ -45,6 +45,7 @@
     "@react-awesome/use-selection-range": "0.0.3",
     "@react-awesome/use-previous": "0.0.3",
     "@react-awesome/use-toggle": "0.0.1",
-    "@react-awesome/use-breakpoint": "0.0.2"
+    "@react-awesome/use-breakpoint": "0.0.2",
+    "@react-awesome/animated-text": "0.0.0"
   }
 }

packages/components/src/index.ts

@@ -1,4 +1,5 @@
 export * from '@react-awesome/phone-input'
+export * from '@react-awesome/animated-text'
 
 /**
  * Hooks

vite.config.ts

@@ -36,6 +36,7 @@ export default defineConfig({
         '@react-awesome/phone-input',
         '@react-awesome/use-toggle',
         '@react-awesome/use-breakpoint',
+        '@react-awesome/animated-text',
       ],
       output: [
         {