From e889542619b6911f1003894542d6adc4231c9a3a Mon Sep 17 00:00:00 2001 From: Thinh Trinh Duc Date: Wed, 6 Mar 2024 22:15:03 +0700 Subject: [PATCH 1/3] feat: infinite loop when using setSelectedCountry --- apps/docs/package.json | 2 +- packages/components/CHANGELOG.md | 7 +++++++ packages/components/package.json | 4 ++-- packages/phone-input/CHANGELOG.md | 6 ++++++ packages/phone-input/package.json | 2 +- packages/phone-input/src/hooks/usePhoneInput.tsx | 2 +- 6 files changed, 18 insertions(+), 5 deletions(-) diff --git a/apps/docs/package.json b/apps/docs/package.json index a694a6c..664e607 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -10,7 +10,7 @@ "clean": "rimraf .turbo && rimraf node_modules && rimraf .next" }, "dependencies": { - "@react-awesome/components": "1.0.16", + "@react-awesome/components": "1.0.17", "classnames": "^2.5.1", "lodash": "^4.17.21", "lucide-react": "^0.315.0", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index ab6c359..00127a0 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @react-awesome/components +## 1.0.17 + +### Patch Changes + +- Updated dependencies + - @react-awesome/phone-input@1.1.5 + ## 1.0.16 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 43bbba3..b17d8ed 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@react-awesome/components", - "version": "1.0.16", + "version": "1.0.17", "main": "./dist/index.cjs", "module": "./dist/index.js", "types": "./dist/index.d.ts", @@ -39,7 +39,7 @@ "access": "public" }, "dependencies": { - "@react-awesome/phone-input": "1.1.4", + "@react-awesome/phone-input": "1.1.5", "@react-awesome/use-click-outside": "0.0.3", "@react-awesome/use-preserve-input-caret-position": "0.0.3", "@react-awesome/use-selection-range": "0.0.3", diff --git a/packages/phone-input/CHANGELOG.md b/packages/phone-input/CHANGELOG.md index c4d05f5..646b472 100644 --- a/packages/phone-input/CHANGELOG.md +++ b/packages/phone-input/CHANGELOG.md @@ -1,5 +1,11 @@ # @react-awesome/phone-input +## 1.1.5 + +### Patch Changes + +- infinite loop when set country via setSelectedCountry + ## 1.1.4 ### Patch Changes diff --git a/packages/phone-input/package.json b/packages/phone-input/package.json index de51861..52e2f3d 100644 --- a/packages/phone-input/package.json +++ b/packages/phone-input/package.json @@ -1,6 +1,6 @@ { "name": "@react-awesome/phone-input", - "version": "1.1.4", + "version": "1.1.5", "main": "./dist/index.cjs", "module": "./dist/index.js", "types": "./dist/index.d.ts", diff --git a/packages/phone-input/src/hooks/usePhoneInput.tsx b/packages/phone-input/src/hooks/usePhoneInput.tsx index fc764e1..f40e763 100644 --- a/packages/phone-input/src/hooks/usePhoneInput.tsx +++ b/packages/phone-input/src/hooks/usePhoneInput.tsx @@ -224,8 +224,8 @@ export const usePhoneInput = ({ ) const setSelectedCountry = React.useCallback( (country: CountryCode) => { - const metadata = generateMetadata('') currentCountryCodeRef.current = country + const metadata = generateMetadata('') onPhoneChange(undefined, metadata) setInnerValue('') closeCountrySelect() From 070e7ca529b6bb3a48138768e2d916319dd84cc4 Mon Sep 17 00:00:00 2001 From: Thinh Trinh Duc Date: Mon, 11 Mar 2024 20:10:10 +0700 Subject: [PATCH 2/3] feat: init animated text repo --- apps/docs/src/pages/docs/_meta.json | 3 ++ apps/docs/src/pages/docs/animated-text.mdx | 32 +++++++++++++ packages/animated-text/.eslintrc.js | 8 ++++ packages/animated-text/README.md | 32 +++++++++++++ packages/animated-text/package.json | 45 +++++++++++++++++++ .../src/AnimatedText/AnimatedText.tsx | 18 ++++++++ packages/animated-text/src/index.ts | 1 + packages/animated-text/tsconfig.json | 8 ++++ packages/components/package.json | 3 +- packages/components/src/index.ts | 1 + 10 files changed, 150 insertions(+), 1 deletion(-) create mode 100644 apps/docs/src/pages/docs/animated-text.mdx create mode 100644 packages/animated-text/.eslintrc.js create mode 100644 packages/animated-text/README.md create mode 100644 packages/animated-text/package.json create mode 100644 packages/animated-text/src/AnimatedText/AnimatedText.tsx create mode 100644 packages/animated-text/src/index.ts create mode 100644 packages/animated-text/tsconfig.json diff --git a/apps/docs/src/pages/docs/_meta.json b/apps/docs/src/pages/docs/_meta.json index 9ff5ce4..bdbb8dc 100644 --- a/apps/docs/src/pages/docs/_meta.json +++ b/apps/docs/src/pages/docs/_meta.json @@ -7,6 +7,9 @@ "phone-input": { "title": "PhoneInput" }, + "animated-text": { + "title": "AnimatedText" + }, "-- Hooks": { "type": "separator", "title": "Hooks" diff --git a/apps/docs/src/pages/docs/animated-text.mdx b/apps/docs/src/pages/docs/animated-text.mdx new file mode 100644 index 0000000..4e18ff3 --- /dev/null +++ b/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 +} + +**AnimtedText** can support animate as `typewriter` effect. + + + + diff --git a/packages/animated-text/.eslintrc.js b/packages/animated-text/.eslintrc.js new file mode 100644 index 0000000..19f3ed1 --- /dev/null +++ b/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, + }, +}; diff --git a/packages/animated-text/README.md b/packages/animated-text/README.md new file mode 100644 index 0000000..911ac69 --- /dev/null +++ b/packages/animated-text/README.md @@ -0,0 +1,32 @@ +# @react-awesome/animated-text + +

+ version + coverage + license + build status + size +

+ +**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). diff --git a/packages/animated-text/package.json b/packages/animated-text/package.json new file mode 100644 index 0000000..e70290d --- /dev/null +++ b/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" + } +} diff --git a/packages/animated-text/src/AnimatedText/AnimatedText.tsx b/packages/animated-text/src/AnimatedText/AnimatedText.tsx new file mode 100644 index 0000000..3020a8c --- /dev/null +++ b/packages/animated-text/src/AnimatedText/AnimatedText.tsx @@ -0,0 +1,18 @@ +export type AnimatedTextProps = { + /** + * @description AnimatedText html tag to render + * @default p + * @requires false + */ + as?: Tag + children?: React.ReactNode + type?: 'typewriter' +} & Omit + +export const AnimatedText: React.FC = ({ + as: Element = 'p', + children, + type = 'typewriter', +}) => { + return {children} +} diff --git a/packages/animated-text/src/index.ts b/packages/animated-text/src/index.ts new file mode 100644 index 0000000..45ae4b3 --- /dev/null +++ b/packages/animated-text/src/index.ts @@ -0,0 +1 @@ +export * from './AnimatedText/AnimatedText' diff --git a/packages/animated-text/tsconfig.json b/packages/animated-text/tsconfig.json new file mode 100644 index 0000000..a09969e --- /dev/null +++ b/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"], +} diff --git a/packages/components/package.json b/packages/components/package.json index b17d8ed..af82d59 100644 --- a/packages/components/package.json +++ b/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" } } diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index f823fcd..022827c 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -1,4 +1,5 @@ export * from '@react-awesome/phone-input' +export * from '@react-awesome/animated-text' /** * Hooks From 815edce63652c22ad3ca9327058dd2ef6981bde2 Mon Sep 17 00:00:00 2001 From: Thinh Trinh Duc Date: Mon, 18 Mar 2024 09:00:55 +0700 Subject: [PATCH 3/3] chore(working on animated text): working on animated text --- .../src/AnimatedText/AnimatedText.tsx | 1 + .../animated-text/src/TypeWriter/TypeWriter.tsx | 15 +++++++++++++++ vite.config.ts | 1 + 3 files changed, 17 insertions(+) create mode 100644 packages/animated-text/src/TypeWriter/TypeWriter.tsx diff --git a/packages/animated-text/src/AnimatedText/AnimatedText.tsx b/packages/animated-text/src/AnimatedText/AnimatedText.tsx index 3020a8c..01479d3 100644 --- a/packages/animated-text/src/AnimatedText/AnimatedText.tsx +++ b/packages/animated-text/src/AnimatedText/AnimatedText.tsx @@ -5,6 +5,7 @@ export type AnimatedTextProps = { * @requires false */ as?: Tag + children?: React.ReactNode type?: 'typewriter' } & Omit diff --git a/packages/animated-text/src/TypeWriter/TypeWriter.tsx b/packages/animated-text/src/TypeWriter/TypeWriter.tsx new file mode 100644 index 0000000..917dc58 --- /dev/null +++ b/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] diff --git a/vite.config.ts b/vite.config.ts index d7f5d18..6cb1ea1 100644 --- a/vite.config.ts +++ b/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: [ {