nextui icon indicating copy to clipboard operation
nextui copied to clipboard
verified publisher icon nextui-org

feat(input-otp): Adding Input OTP component

Open macci001 opened this issue 1 year ago • 13 comments

Closes #2678

📝 Description

PR adds the input-otp componenet

⛳️ Current behavior (updates)

Currently NextUI do not have input-otp component.

🚀 New behavior

  • Default Color Screenshot 2024-09-16 at 11 58 32 PM

  • Primary Variant (other variant such as Secondary, Success, Warning and Danger follow similar styles) Screenshot 2024-09-16 at 11 58 41 PM

  • Video represention

input-otp gets added.

💣 Is this a breaking change (Yes/No): no

📝 Additional Information

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features

    • Introduced a new input-otp component for easier one-time password entry.
    • Automatic focus on the next input field and input length validation enhance usability.
    • Integrated with existing themes for a consistent design.
    • Customizable properties for appearance, including variants and sizes.

  • Tests

    • Added unit tests to validate the functionality of the input-otp component.

  • Documentation

    • Created a README for the input-otp component to assist users.
    • Added comprehensive documentation detailing functionality and customization options.

macci001 avatar Sep 13 '24 14:09 macci001

🦋 Changeset detected

Latest commit: 0eab6a129edb1c0d325e1a9a931c355727827d7b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@nextui-org/input-otp Minor
@nextui-org/theme Minor
@nextui-org/react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

changeset-bot[bot] avatar Sep 13 '24 14:09 changeset-bot[bot]

Someone is attempting to deploy a commit to the NextUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Sep 13 '24 14:09 vercel[bot]

[!NOTE]

Reviews paused

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Walkthrough

This update introduces a new input-otp component to the project, designed for user-friendly entry of one-time passwords (OTPs). It features automatic focus management, input validation, and visual feedback, ensuring a consistent design with existing themes. A suite of unit tests is included to validate the component's functionality and integration with React Hook Form. Additionally, documentation and package configuration are provided for the new component.

Changes

File(s) Change Summary
.changeset/spotty-flies-jump.md Added AI-generated summary of changes.
packages/components/input-otp/src/input-otp.tsx Added InputOtp component with focus management and input handling.
packages/components/input-otp/src/use-input-otp.ts Added useInputOtp hook for managing OTP input logic.
packages/components/input-otp/stories/input-otp.stories.tsx Added Storybook configuration for InputOtp component.
packages/components/input-otp/package.json Added package configuration for @nextui-org/input-otp.
packages/components/input-otp/README.md Added documentation for input-otp component.
packages/core/theme/src/components/input-otp.ts Added theming support for input-otp.
index.ts Updated exports for InputOtp and related types.
packages/core/theme/src/components/input-otp.ts Added types and configurations for theming the input-otp component.
apps/docs/content/docs/components/input-otp.mdx Added detailed documentation for the InputOtp component.
routes.json Added new entry for input-otp documentation.
New files in packages/components/input-otp: allowedKeys.ts, colors.ts, controlled.ts, etc. Introduced various utility files for the InputOtp component configurations and usage.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant InputOtp
    participant Form

    User->>InputOtp: Enter OTP digit
    InputOtp->>InputOtp: Validate input
    InputOtp->>InputOtp: Focus next input field
    InputOtp->>Form: Submit OTP
    Form->>Form: Process OTP

Assessment against linked issues

Objective Addressed Explanation
Introduce input-otp component (#[2678]) ✅
Facilitate OTP input for user-friendly access (#[2678]) ✅

Possibly related PRs

  • #2038: This PR improves RTL support for input components, which may relate to the input-otp component's usability in different text directions.
  • #3106: This PR supplements validation behavior, which could be relevant to the validation features introduced in the input-otp component.
  • #3533: This PR addresses synchronization issues between ref values and internal state in input components, which is directly related to the functionality of the input-otp component.
  • #3643: This PR ensures that the clear button is not focusable when the input is disabled, which is relevant to the user experience of the input-otp component.
  • #3768: This PR fixes the fullWidth functionality in input components, which may impact how the input-otp component behaves in terms of layout.

Suggested labels

📋 Scope : Docs, 👀 Status: In Review

Suggested reviewers

  • wingkwong
  • jrgarciadev

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot] avatar Sep 13 '24 14:09 coderabbitai[bot]

@coderabbitai full review

macci001 avatar Sep 15 '24 17:09 macci001

Actions performed

Full review triggered.

coderabbitai[bot] avatar Sep 15 '24 17:09 coderabbitai[bot]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nextui-docs-v2 ❌ Failed (Inspect) Oct 4, 2024 11:40am
nextui-storybook-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 4, 2024 11:40am

vercel[bot] avatar Sep 20 '24 11:09 vercel[bot]

Applied the comments in a168061.

Will add the documentation as well.

Also talking about keyboard left/right navigation, I thought it would be nice UX that whenever a user selects the input-otp component, the segment which needs to be filled will be in focus automatically and they can either add or remove the OTP restricting them not to navigate, given the length of the OTP is usually small. Also most of the UI libraries follows this pattern and the current implementation was done keeping this in mind.

// @wingkwong

macci001 avatar Sep 22 '24 15:09 macci001

Comments are addressed(a1680612a43420a2597ee92f3c627fa2aac052f1) and docs are added(bc5286c076e6088f7a5e4a86136c177651ea10d3) The PR is ready for the next round of review.

@wingkwong, can you please have look at the PR again?

macci001 avatar Sep 23 '24 09:09 macci001

Added the suggestions mentioned in comment in https://github.com/nextui-org/nextui/commit/cab6a940e04a8e4d75fd89529b1dafb6bbc33a5c Just one concern regarding following suggestion:

  • in Required, the error message the field is required only shows when there is no input. I think it should also show when the input is not completed (e.g. enter 3 characters in inputOtp with length of 4) For the above scenario, wouldn't it make sense that input-otp will have required error if nothing is passed. But if the input passed is lesser then the length of the OTP, tooShort error is passed. Attaching the video-clip below:

https://github.com/user-attachments/assets/4f2ba716-fb15-414a-be4c-4761f0d8213b

macci001 avatar Sep 28 '24 08:09 macci001

I second that. However, the message should be configurable. Also please refer to input component to see validationBehaviour.

wingkwong avatar Sep 28 '24 08:09 wingkwong

The current input-otp component handles the validation behaviour similar to input component. We can configure the error-message by errorMessage prop, so did I miss anything as you mentioned should be configurable in previous comment

macci001 avatar Sep 28 '24 17:09 macci001

if so, then it's all good. Just a reminder only. I haven't checked the code in detail yet.

wingkwong avatar Sep 29 '24 04:09 wingkwong

just an update. we're finalising the design. can you DM me at discord with your email address?

wingkwong avatar Oct 10 '24 16:10 wingkwong

@coderabbitai pause

macci001 avatar Oct 23 '24 19:10 macci001

:white_check_mark: Actions performed

Reviews paused.

coderabbitai[bot] avatar Oct 23 '24 19:10 coderabbitai[bot]

UPD: the design is finalised. please refer to the figma I shared to you in discord and update accordingly. thanks.

wingkwong avatar Oct 25 '24 04:10 wingkwong

Hey @macci001 please fix the conflicts

jrgarciadev avatar Nov 04 '24 21:11 jrgarciadev