Merge pull request #45 from trinhthinh388/master

Publish Packages
trinhthinh388 · Jan 29, 2024 · c295a64 · c295a64
2 parents 448956d + de1cb0b
commit c295a64
Show file tree

Hide file tree

Showing 61 changed files with 1,654 additions and 252 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -15,7 +15,7 @@ permissions:
   contents: read
 
 jobs:
-  unit-test:
+  unit-tests:
     name: ʦ Vitest
     runs-on: ubuntu-latest
     steps:
@@ -33,5 +33,5 @@ jobs:
       - name: 📥 Download deps
         run: yarn install --frozen-lockfile
 
-      - name: 🔎 Type check
+      - name: 🔎 Unit Test
         run: yarn test
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,156 @@
+Thanks for showing interest to contribute to React Awesome Components, you rock!
+
+When it comes to open source, there are different ways you can contribute, all
+of which are valuable. Here's a few guidelines that should help you as you
+prepare your contribution.
+
+## Setup the Project
+
+The following steps will get you up and running to contribute to React Awesome Components:
+
+1. Fork the repo (click the <kbd>Fork</kbd> button at the top right of
+   [this page](<[https://github.com/trinhthinh388/react-awesome-components](https://github.com/trinhthinh388/react-awesome-components)>))
+
+2. Clone your fork locally
+
+```sh
+git clone https://github.com/<your_github_username>/react-awesome-components.git
+cd react-awesome-components
+```
+
+3. Setup all the dependencies and packages by running `yarn install`. This
+   command will install dependencies.
+
+> If you run into any issues during this step, kindly reach out to the React Awesome Components
+>
+> - Email: trinhthinh388@gmail.com
+> - Telegram: @chick_buster
+> - Twitter: @chick_buster
+
+## Development
+
+To improve our development process, we've set up tooling and systems. React Awesome Components
+uses a monorepo structure and we treat each component as an independent package
+that can be consumed in isolation.
+
+### Tooling
+
+- [Yarn](https://yarnpkg.com/) to manage packages and dependencies
+- [Testing Library](https://testing-library.com/) for testing components and
+  hooks
+- [Changeset](https://github.com/atlassian/changesets) for changes
+  documentation, changelog generation, and release management.
+- [Nextra](https://nextra.site) for documenting components and hooks.
+
+### Commands
+
+**`yarn install`**: bootstraps the entire project, symlinks all dependencies for
+cross-component development and builds all components.
+
+**`yarn dev`**: Runs the build and watch command for all component packages.
+
+**`yarn build`**: run build for all component packages.
+
+**`yarn test`**: run test for all component packages.
+
+**`yarn release`**: publish changed packages.
+
+## Think you found a bug?
+
+Please conform to the issue template and provide a clear path to reproduction
+with a code example. The best way to show a bug is by sending a CodeSandbox
+link.
+
+## Proposing new or changed API?
+
+Please provide thoughtful comments and some sample API code. Proposals that
+don't line up with our roadmap or don't have a thoughtful explanation will be
+closed.
+
+## Making a Pull Request?
+
+Pull requests need only the :+1: of two or more collaborators to be merged; when
+the PR author is a collaborator, that counts as one.
+
+### Commit Convention
+
+Before you create a Pull Request, please check whether your commits comply with
+the commit conventions used in this repository.
+
+When you create a commit we kindly ask you to follow the convention
+`category(scope or module): message` in your commit message while using one of
+the following categories:
+
+- `feat / feature`: all changes that introduce completely new code or new
+  features
+- `fix`: changes that fix a bug (ideally you will additionally reference an
+  issue if present)
+- `refactor`: any code related change that is not a fix nor a feature
+- `docs`: changing existing or creating new documentation (i.e. README, docs for
+  usage of a lib or cli usage)
+- `build`: all changes regarding the build of the software, changes to
+  dependencies or the addition of new dependencies
+- `test`: all changes regarding tests (adding new tests or changing existing
+  ones)
+- `ci`: all changes regarding the configuration of continuous integration (i.e.
+  github actions, ci system)
+- `chore`: all changes to the repository that do not fit into any of the above
+  categories
+
+If you are interested in the detailed specification you can visit
+https://www.conventionalcommits.org/ or check out the
+[Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).
+
+### Steps to PR
+
+1. Fork of the react-awesome-components repository and clone your fork
+
+2. Create a new branch out of the `master` branch. We follow the convention
+   `[type/scope]`. For example `fix/use-previous-hook` or `docs/menu-typo`. `type`
+   can be either `docs`, `fix`, `feat`, `build`, or any other conventional
+   commit type. `scope` is just a short id that describes the scope of work.
+
+3. Make and commit your changes following the
+   [commit convention](https://github.com//trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md#commit-convention).
+   As you develop, you can run `yarn workspace <module> build` and
+   `yarn workspace <module> test` to make sure everything works as expected. Please
+   note that you might have to run `yarn build` first in order to build all
+   dependencies.
+
+4. Run `yarn changeset` to create a detailed description of your changes. This
+   will be used to generate a changelog when we publish an update.
+   [Learn more about Changeset](https://github.com/atlassian/changesets/tree/master/packages/cli).
+   Please note that you might have to run `git fetch origin main:master` (where
+   origin will be your fork on GitHub) before `yarn changeset` works.
+5. Also, if you provide `jsx` snippets to the changeset, please turn off the
+   live preview by doing the following at the beginning of the snippet:
+   ` ```jsx live=false`
+
+> If you made minor changes like CI config, prettier, etc, you can run
+> `yarn changeset add --empty` to generate an empty changeset file to document
+> your changes.
+
+### Tests
+
+All commits that fix bugs or add features need a test.
+
+> Please do not merge code without tests
+
+## Want to write a blog post or tutorial
+
+That would be amazing! Reach out to me here:
+
+> - Email: trinhthinh388@gmail.com
+> - Telegram: @chick_buster
+> - Twitter: @chick_buster
+
+## Want to help improve the docs?
+
+Our docsite lives in a
+[monorepo](https://github.com/trinhthinh388/react-awesome-components/apps/docs). If you're
+interested in contributing to the documentation, you can check it out.
+
+## License
+
+By contributing your code to the react-awesome-components GitHub repository, you agree to
+license your contribution under the MIT license.
diff --git 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.3",
+    "@react-awesome/components": "1.0.4",
     "lucide-react": "^0.315.0",
     "next": "^14.0.4",
     "nextra": "^2.13.2",

diff --git a/apps/docs/src/pages/docs/use-preserve-input-caret-position.mdx b/apps/docs/src/pages/docs/use-preserve-input-caret-position.mdx
@@ -52,11 +52,11 @@ return <input className="w-full border rounded-md px-3 py-2" value={value} onCha
 
 ## Install
 
-To start using **usePreserveInputCaretPosition**, you can install the `@react-awesome/hooks` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
+To start using **usePreserveInputCaretPosition**, you can install the `@react-awesome/use-preserve-input-caret-position` 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/hooks
+npm i @react-awesome/use-preserve-input-caret-position
 ```
 
 ## Usage
@@ -87,7 +87,7 @@ When using `usePreserveInputCaretPosition` the input now can perfectly handle th
 </Container>
 
 ```jsx
-import { usePreserveInputCaretPosition } from '@react-awesome/hooks'
+import { usePreserveInputCaretPosition } from '@react-awesome/use-preserve-input-caret-position'
 
 export const Example = () => {
   const ref = useRef(null)
@@ -163,7 +163,7 @@ return <input ref={ref} className="w-full border rounded-md px-3 py-2" value={va
 </Container>
 
 ```jsx
-import { usePreserveInputCaretPosition } from '@react-awesome/hooks'
+import { usePreserveInputCaretPosition } from '@react-awesome/use-preserve-input-caret-position'
 
 export const Example = () => {
   const ref = useRef(null)

diff --git a/apps/docs/src/pages/docs/use-previous.mdx b/apps/docs/src/pages/docs/use-previous.mdx
@@ -8,11 +8,11 @@ title: usePrevious
 
 ## Install
 
-To start using **usePrevious**, you can install the `@react-awesome/hooks` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
+To start using **usePrevious**, you can install the `@react-awesome/use-previous` 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/hooks
+npm i @react-awesome/use-previous
 ```
 
 ## Usage
@@ -33,7 +33,7 @@ return (
     onClick={() => setState((prev) => ++prev)}
     className="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
   >
-    <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
+    <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
       Click to add
     </span>
   </button>
@@ -59,7 +59,7 @@ return (
 </Container>
 
 ```jsx
-import { usePrevious } from '@react-awesome/hooks'
+import { usePrevious } from '@react-awesome/use-previous'
 
 const Example = () => {
   const [state, setState] = useState(0)

diff --git a/apps/docs/src/pages/docs/use-selection-range.mdx b/apps/docs/src/pages/docs/use-selection-range.mdx
@@ -8,11 +8,11 @@ title: useSelectionRange
 
 ## Install
 
-To start using **useSelectionRange**, you can install the `@react-awesome/hooks` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
+To start using **useSelectionRange**, you can install the `@react-awesome/use-selection-range` 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/hooks
+npm i @react-awesome/use-selection-range
 ```
 
 ## Usage
@@ -56,7 +56,7 @@ return (
 </Container>
 
 ```jsx
-import { useSelectionRange } from '@react-awesome/phone-input'
+import { useSelectionRange } from '@react-awesome/use-selection-range'
 
 const Example = () => {
   const ref = useRef(null)
@@ -68,6 +68,65 @@ const Example = () => {
 }
 ```
 
+## Notes
+
+**useSelectionRange** doesn't have effect on some special editable elements like `div` with `contentEditable` or `textarea`.
+Since `div` with `contentEditable` (or `textarea`) doesn't offer any `selectionStart` or `selectionEnd` to the callback.
+
+export const BadExample = () => {
+  const [ref, setRef] = useState(null)
+
+const { caret } = useSelectionRange(ref)
+
+return (
+
+<>
+  <div
+    className="w-full border rounded-md px-3 py-2 border-red-400"
+    ref={setRef}
+    contentEditable
+    suppressContentEditableWarning
+  >
+    I cannot track the contentEditable div element
+  </div>
+  <ul className="mt-2">
+    <li>
+      <span className="font-medium">😢 Start</span>
+      <code className="ml-2 nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10">
+        {caret.start.toString()}
+      </code>
+    </li>
+    <li>
+      <span className="font-medium">😢 End</span>
+      <code className="ml-2 nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10">
+        {caret.end.toString()}
+      </code>
+    </li>
+  </ul>
+</>
+); };
+
+<Container>
+  <BadExample />
+</Container>
+
+```jsx
+import { useSelectionRange } from '@react-awesome/use-selection-range'
+
+const NotWorkingExample = () => {
+  const ref = useRef(null)
+  const { register } = useSelectionRange()
+
+  const { caret } = useSelectionRange(ref.current)
+
+  return (
+    <div ref={setRef} contentEditable>
+      I cannot track the contentEditable div element
+    </div>
+  )
+}
+```
+
 ## Parameters
 
 The `useSelectionRange` takes the following parameters:

diff --git a/package.json b/package.json
@@ -5,30 +5,32 @@
     "build": "turbo build",
     "dev": "turbo dev",
     "lint": "turbo lint",
-    "test": "turbo test",
+    "test": "turbo build --filter=!@react-awesome/docs && turbo test",
     "typecheck": "turbo typecheck",
     "clean": "turbo clean && rimraf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "format:fix": "prettier --write \"**/*.{ts,tsx,md}\"",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "release": "yarn build && changeset publish",
+    "release": "yarn build --filter=!@react-awesome/docs && changeset publish",
     "docs": "yarn workspace @react-awesome/docs",
-    "phone-input": "yarn workspace @react-awesome/phone-input",
-    "hooks": "yarn workspace @react-awesome/hooks",
     "eslint": "yarn workspace @react-awesome/eslint-config",
     "prepare": "husky"
   },
   "devDependencies": {
     "@changesets/cli": "2.26.2",
     "@react-awesome/eslint-config": "*",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-istanbul": "^1.2.1",
     "@vitest/ui": "^1.2.1",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.56.0",
     "husky": "^9.0.6",
+    "jsdom": "^24.0.0",
     "prettier": "^3.1.1",
     "rimraf": "^5.0.5",
     "tty-table": "^4.2.3",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @react-awesome/components
 
+## 1.0.4
+
+### Patch Changes
+
+- Split each hook in `@react-awesome/hooks` into individual package.
+- Updated dependencies
+  - @react-awesome/use-preserve-input-caret-position@0.0.1
+  - @react-awesome/use-selection-range@0.0.1
+  - @react-awesome/use-click-outside@0.0.1
+  - @react-awesome/use-previous@0.0.1
+  - @react-awesome/phone-input@1.0.3
+
 ## 1.0.3
 
 ### Patch Changes