Merge pull request #67 from trinhthinh388/master

Publish packages

.github/workflows/test.yml

@@ -71,3 +71,10 @@ jobs:
           token: ${{ secrets.CODECOV_TOKEN }}
           flags: useSelectionRange
           files: ./packages/use-selection-range/coverage/coverage-final.json
+
+      - name: Upload `useToggle` coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          flags: useToggle
+          files: ./packages/use-toggle/coverage/coverage-final.json

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",

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

@@ -11,18 +11,21 @@
     "type": "separator",
     "title": "Hooks"
   },
+  "use-toggle": {
+    "title": "useToggle"
+  },
   "use-previous": {
     "title": "usePrevious"
   },
+  "use-click-outside": {
+    "title": "useClickOutside"
+  },
   "use-selection-range": {
     "title": "useSelectionRange"
   },
   "use-preserve-input-caret-position": {
     "title": "usePreserveInputCaretPosition"
   },
-  "use-click-outside": {
-    "title": "useClickOutside"
-  },
   "-- More": {
     "type": "separator",
     "title": "More"

apps/docs/src/pages/docs/use-toggle.mdx

@@ -0,0 +1,90 @@
+---
+title: useToggle
+---
+
+# useToggle
+
+**useToggle** toggles a boolean value.
+
+## Install
+
+To start using **useToggle**, you can install the `@react-awesome/use-toggle` 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/use-toggle
+```
+
+## Usage
+
+import { useState } from 'react'
+import { Container } from '../../components/Container'
+import { useToggle } from '@react-awesome/components'
+
+export const Example = () => {
+  const { toggle, isOn } = useToggle(true)
+return (
+
+<>
+  <div className="inline-flex items-center">
+    <div className="relative inline-block w-8 h-4 rounded-full cursor-pointer">
+      <input
+        checked={isOn}
+        id="switch"
+        type="checkbox"
+        onClick={toggle}
+        className="absolute bg-gray-100  w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-amber-500 peer-checked:border-amber-500 peer-checked:before:bg-amber-500"
+      />
+      <label
+        htmlFor="switch"
+        class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-amber-500 peer-checked:before:bg-amber-500"
+      >
+        <div
+          className="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
+          data-ripple-dark="true"
+        ></div>
+      </label>
+    </div>
+    <label
+      htmlFor="switch"
+      class="mt-px mb-0 ml-3 font-light cursor-pointer select-none"
+    >
+      Click to toggle
+    </label>
+  </div>
+</>
+); };
+
+<Container>
+  <Example />
+</Container>
+
+```jsx
+import { useToggle } from '@react-awesome/use-toggle'
+
+const Example = () => {
+  const { toggle, isOn } = useToggle(state)
+
+  return <input checked={isOn} type="checkbox" onClick={toggle} />
+}
+```
+
+## Parameters
+
+The `useToggle` takes the following parameters:
+
+#### `value`
+
+- Type: `boolean`
+
+## API
+
+The `useToggle` returns the following props:
+
+#### `isOn`
+
+- Type: `boolean`
+
+#### `toggle`
+
+- Type: `(value?: boolean) => void`

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

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"
   }
 }

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'

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,
+  },
+};

packages/use-toggle/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @react-awesome/use-previous
+
+## 0.0.1
+
+### Patch Changes
+
+- Added useToggle

packages/use-toggle/README.md

@@ -0,0 +1,32 @@
+# @react-awesome/use-toggle
+
+<p align="center">
+  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-toggle" />
+  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=useToggle" />
+  <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/use-toggle" />
+</p>
+
+**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).

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"
+  }
+}

packages/use-toggle/src/index.ts

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

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)
+  })
+})

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,
+  }
+}

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"],
+}

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",

vite.config.ts

@@ -34,6 +34,7 @@ export default defineConfig({
         '@react-awesome/use-click-outside',
         '@react-awesome/use-preserve-input-caret-position',
         '@react-awesome/phone-input',
+        '@react-awesome/use-toggle',
       ],
       output: [
         {