From e2e0dc6755fc49f96b226ad9aa7b0abec0aa2438 Mon Sep 17 00:00:00 2001 From: Thinh Trinhduc Date: Thu, 1 Feb 2024 20:54:26 +0700 Subject: [PATCH] feat(usetoggle): added useToggle --- apps/docs/package.json | 2 +- packages/components/CHANGELOG.md | 7 +++ packages/components/package.json | 5 ++- packages/components/src/index.ts | 1 + packages/use-toggle/.eslintrc.js | 8 ++++ packages/use-toggle/CHANGELOG.md | 7 +++ packages/use-toggle/README.md | 32 ++++++++++++++ packages/use-toggle/package.json | 43 +++++++++++++++++++ packages/use-toggle/src/index.ts | 1 + .../src/useToggle/useToggle.spec.tsx | 24 +++++++++++ .../use-toggle/src/useToggle/useToggle.tsx | 16 +++++++ packages/use-toggle/tsconfig.json | 8 ++++ turbo.json | 1 + 13 files changed, 152 insertions(+), 3 deletions(-) create mode 100644 packages/use-toggle/.eslintrc.js create mode 100644 packages/use-toggle/CHANGELOG.md create mode 100644 packages/use-toggle/README.md create mode 100644 packages/use-toggle/package.json create mode 100644 packages/use-toggle/src/index.ts create mode 100644 packages/use-toggle/src/useToggle/useToggle.spec.tsx create mode 100644 packages/use-toggle/src/useToggle/useToggle.tsx create mode 100644 packages/use-toggle/tsconfig.json diff --git a/apps/docs/package.json b/apps/docs/package.json index 13ba551..b1a742e 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.7", + "@react-awesome/components": "1.0.8", "classnames": "^2.5.1", "lucide-react": "^0.315.0", "next": "^14.0.4", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a08b85e..8119ebe 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @react-awesome/components +## 1.0.8 + +### Patch Changes + +- Updated dependencies + - @react-awesome/use-toggle@0.0.1 + ## 1.0.7 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 1b3e1df..d947215 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@react-awesome/components", - "version": "1.0.7", + "version": "1.0.8", "main": "./dist/index.cjs", "module": "./dist/index.js", "types": "./dist/index.d.ts", @@ -43,6 +43,7 @@ "@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", - "@react-awesome/use-previous": "0.0.3" + "@react-awesome/use-previous": "0.0.3", + "@react-awesome/use-toggle": "0.0.1" } } diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 2777743..a0aa236 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -7,3 +7,4 @@ export * from '@react-awesome/use-click-outside' export * from '@react-awesome/use-preserve-input-caret-position' export * from '@react-awesome/use-previous' export * from '@react-awesome/use-selection-range' +export * from '@react-awesome/use-toggle' diff --git a/packages/use-toggle/.eslintrc.js b/packages/use-toggle/.eslintrc.js new file mode 100644 index 0000000..19f3ed1 --- /dev/null +++ b/packages/use-toggle/.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/use-toggle/CHANGELOG.md b/packages/use-toggle/CHANGELOG.md new file mode 100644 index 0000000..28c6503 --- /dev/null +++ b/packages/use-toggle/CHANGELOG.md @@ -0,0 +1,7 @@ +# @react-awesome/use-previous + +## 0.0.1 + +### Patch Changes + +- Added useToggle diff --git a/packages/use-toggle/README.md b/packages/use-toggle/README.md new file mode 100644 index 0000000..3b57ea5 --- /dev/null +++ b/packages/use-toggle/README.md @@ -0,0 +1,32 @@ +# @react-awesome/use-toggle + +

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

+ +**useToggle** tracks the previous value of a variable. + +Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-toggle) for more information. + +## Installation + +```sh +yarn add @react-awesome/use-toggle +# or +npm i @react-awesome/use-toggle +``` + +## 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/use-toggle/package.json b/packages/use-toggle/package.json new file mode 100644 index 0000000..f9d3bf8 --- /dev/null +++ b/packages/use-toggle/package.json @@ -0,0 +1,43 @@ +{ + "name": "@react-awesome/use-toggle", + "version": "0.0.1", + "main": "./dist/index.cjs", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "sideEffects": false, + "license": "MIT", + "description": "useToggle toggles the boolean value with ease.", + "keywords": [ + "react", + "hooks", + "toggle", + "useToggle" + ], + "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": "vitest --config ../../vite.config.ts --coverage --run", + "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/use-toggle/src/index.ts b/packages/use-toggle/src/index.ts new file mode 100644 index 0000000..1f9a92f --- /dev/null +++ b/packages/use-toggle/src/index.ts @@ -0,0 +1 @@ +export * from './useToggle/useToggle' diff --git a/packages/use-toggle/src/useToggle/useToggle.spec.tsx b/packages/use-toggle/src/useToggle/useToggle.spec.tsx new file mode 100644 index 0000000..6094f23 --- /dev/null +++ b/packages/use-toggle/src/useToggle/useToggle.spec.tsx @@ -0,0 +1,24 @@ +import { act, renderHook } from '@testing-library/react' +import { useToggle } from './useToggle' + +describe('useToggle', () => { + it('Should toggle the value', () => { + const { result, rerender } = renderHook(() => useToggle(true)) + + expect(result.current.isOn).toBe(true) + + act(() => { + result.current.toggle() + rerender() + }) + + expect(result.current.isOn).toBe(false) + + act(() => { + result.current.toggle(true) + rerender() + }) + + expect(result.current.isOn).toBe(true) + }) +}) diff --git a/packages/use-toggle/src/useToggle/useToggle.tsx b/packages/use-toggle/src/useToggle/useToggle.tsx new file mode 100644 index 0000000..314e088 --- /dev/null +++ b/packages/use-toggle/src/useToggle/useToggle.tsx @@ -0,0 +1,16 @@ +import React, { useCallback, useState } from 'react' + +export const useToggle = (initialValue: boolean) => { + const [value, setValue] = useState(initialValue) + + const toggle = useCallback( + (_value?: boolean) => + setValue((prev) => (typeof _value === 'boolean' ? _value : !prev)), + [], + ) + + return { + toggle, + isOn: value, + } +} diff --git a/packages/use-toggle/tsconfig.json b/packages/use-toggle/tsconfig.json new file mode 100644 index 0000000..a09969e --- /dev/null +++ b/packages/use-toggle/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/turbo.json b/turbo.json index b4ca87c..71e00e9 100644 --- a/turbo.json +++ b/turbo.json @@ -8,6 +8,7 @@ }, "@react-awesome/components#build": { "dependsOn": [ + "@react-awesome/use-toggle#build", "@react-awesome/use-previous#build", "@react-awesome/use-selection-range#build", "@react-awesome/use-preserve-input-caret-position#build",