[WEB-4731] feat: add baseui input component to propel package #7769

JayashTripathy · 2025-09-10T20:10:33Z

Description

Added input component to propel package with respective stories

Type of Change

Feature (non-breaking change which adds functionality)

Screenshots and Media (if applicable)

Summary by CodeRabbit

New Features
- Introduced a reusable Input component with multiple modes, sizes, states (error/disabled), and input types. Now available via the package’s public exports.
Documentation
- Added comprehensive Storybook examples and grouped showcases for the Input component with controls.
Chores
- Updated build/exports configuration to include the new Input module.
Style
- Minor import order cleanup in the web app; no user-facing changes.

coderabbitai · 2025-09-10T20:10:41Z

Walkthrough

Introduces a new Input component in @plane/propel with stories, adds corresponding barrel/export entries and build config wiring, updates package exports to expose "./input", and reorders a single import in a web editor file. No changes to existing public APIs beyond the new export.

Changes

Cohort / File(s)	Summary
Web import reorder `apps/web/core/components/pages/version/editor.tsx`	Reordered an import; no logic changes.
Propel build/export wiring `packages/propel/package.json`, `packages/propel/tsdown.config.ts`	Added `"./input": "./dist/input/index.js"` to exports; included `src/input/index.ts` in tsdown entries.
Propel Input component + stories `packages/propel/src/input/input.tsx`, `packages/propel/src/input/index.ts`, `packages/propel/src/input/input.stories.tsx`	Added new Input component wrapping BaseInput with modes/sizes/error styling; barrel export; Storybook stories and showcases.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor Consumer
  participant Input as Input (propel)
  participant BaseInput as BaseInput (@base-ui-components/react/input)

  Consumer->>Input: Render with props (mode, inputSize, hasError, type, ...)
  Note right of Input: Compute className via cn<br/>merge defaults + conditionals
  Input->>BaseInput: Forward props/ref (id, type, name, autoComplete, ...)<br/>className
  BaseInput-->>Consumer: Rendered input element

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

[WEB-4844] fix: export prople package dist #7712 — Also updates @plane/propel public exports and build outputs; similar export-surface changes.
[WEB-4682 | WEB-4685] feat: propel comobobox and command component #7615 — Adds new Propel UI components with package exports; analogous to introducing Input.
fix: build error due to exports in propel package #7715 — Adjusts exports map to .js build outputs; related export configuration changes.

Suggested labels

🌐frontend, requires approval

Suggested reviewers

vamsikrishnamathala
anmolsinghbhatia

Pre-merge checks (3 passed)

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "[WEB-4731] feat: add baseui input component to propel package" accurately and concisely describes the primary change in this PR (adding an Input component to the propel package) and aligns with the changeset (new component, stories, exports and tsdown entry); it includes the ticket reference and conventional commit prefix and is not misleading.
Description Check	✅ Passed	The PR description contains a short Description, correctly marks the change as a Feature, and includes a screenshot, so it covers the core template items, but it is brief and missing the required "Test Scenarios" section and does not list References or a concise list of key files/public API changes (component, barrel export, package.json export, tsdown entry).
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

Poem

A bunny taps the keys with cheer,
New Input hops into the UI sphere.
Modes and sizes, neat and tight,
Stories bloom in Storybook light.
Exports wired, the path now true—
Thump-thump! Ship it, on cue. 🐇✨

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat-propel-input

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

makeplane · 2025-09-10T20:10:43Z

Linked to Plane Work Item(s)

[WEB-4731] [Propel_UI] Input

This comment was auto-generated by Plane

Copilot

Pull Request Overview

This PR adds a new Input component to the propel package, built on top of the @base-ui-components/react/input library with customizable styling and properties.

Added a new Input component with support for different modes (primary, transparent, true-transparent), sizes (xs, sm, md), and states (error, disabled)
Created comprehensive Storybook stories demonstrating all component variants and use cases
Updated package configuration to export the new Input component

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
packages/propel/src/input/index.tsx	Main Input component implementation with BaseUI integration and styling
packages/propel/src/input/input.stories.tsx	Comprehensive Storybook stories showcasing all Input variants
packages/propel/tsdown.config.ts	Added input module to build configuration
packages/propel/package.json	Added input export path for package consumers

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

coderabbitai

Actionable comments posted: 3

🧹 Nitpick comments (3)

packages/propel/src/input/index.tsx (2)
27-49: Add accessibility hint for invalid inputs.

Expose aria-invalid so screen readers catch the error state.
     <BaseInput
       id={id}
       ref={ref}
       type={type}
       name={name}
+      aria-invalid={hasError || undefined}
       className={cn(
6-12: Don’t narrow autoComplete; avoid redeclaring className.

InputHTMLAttributes already includes className; redeclaration is redundant.

Narrowing autoComplete to "on" | "off" blocks valid tokens like "email", "username", etc. Keep it as the native string type.
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   mode?: "primary" | "transparent" | "true-transparent";
   inputSize?: "xs" | "sm" | "md";
   hasError?: boolean;
-  className?: string;
-  autoComplete?: "on" | "off";
+  autoComplete?: React.InputHTMLAttributes<HTMLInputElement>["autoComplete"];
 }
packages/propel/src/input/input.stories.tsx (1)
126-129: Rename story “Number” to avoid shadowing global Number
-export const Number = createStory({
+export const NumberField = createStory({
Prevents confusion and satisfies the linter.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0f7bfdd and 787f81c.

📒 Files selected for processing (5)

apps/web/core/components/pages/version/editor.tsx (1 hunks)
packages/propel/package.json (1 hunks)
packages/propel/src/input/index.tsx (1 hunks)
packages/propel/src/input/input.stories.tsx (1 hunks)
packages/propel/tsdown.config.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/propel/src/input/input.stories.tsx (1)

packages/propel/src/input/index.tsx (1)

Input (55-55)

🪛 Biome (2.1.2)

packages/propel/src/input/input.stories.tsx

[error] 126-126: Do not shadow the global "Number" property.

Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.

(lint/suspicious/noShadowRestrictedNames)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Build and lint web apps

🔇 Additional comments (1)

apps/web/core/components/pages/version/editor.tsx (1)

7-7: No functional change; import order tweak is fine.

Reorder aligns with local style; no impact.

packages/propel/package.json

packages/propel/src/input/index.tsx

packages/propel/tsdown.config.ts

coderabbitai

Actionable comments posted: 3

🧹 Nitpick comments (2)

packages/propel/src/input/input.tsx (2)
19-24: Don’t default autoComplete to "off".

Hurts UX/password managers. Let browsers decide unless explicitly set.
-    autoComplete = "off",
+    autoComplete,
53-53: Set displayName to “Input”.

Improves DevTools/Storybook clarity.
-Input.displayName = "form-input-field";
+Input.displayName = "Input";

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 787f81c and c8a657d.

📒 Files selected for processing (2)

packages/propel/src/input/index.ts (1 hunks)
packages/propel/src/input/input.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Build and lint web apps
GitHub Check: Analyze (javascript)

🔇 Additional comments (2)

packages/propel/src/input/index.ts (1)

1-1: Barrel export looks good.

Simple and correct re-export to expose the component.

packages/propel/src/input/input.tsx (1)

28-49: Confirm BaseInput styling target.

Please verify that BaseInput forwards className and aria-* to the actual element (not a wrapper), otherwise styles/a11y props may not apply as intended.

packages/propel/src/input/input.tsx

…t-propel-input

…bility

…menu stories

JayashTripathy added 2 commits September 11, 2025 01:36

✨ feat: add input component to propel package

9ad195e

🚨 fix: lint

787f81c

JayashTripathy requested review from anmolsinghbhatia, Copilot and vamsikrishnamathala September 10, 2025 20:10

Copilot AI reviewed Sep 10, 2025

View reviewed changes

JayashTripathy changed the title ~~[WEB-4731] feat: added baseui input component to propel package~~ [WEB-4731] feat: add baseui input component to propel package Sep 10, 2025

coderabbitai bot reviewed Sep 10, 2025

View reviewed changes

packages/propel/package.json Outdated Show resolved Hide resolved

packages/propel/src/input/index.tsx Show resolved Hide resolved

packages/propel/tsdown.config.ts Show resolved Hide resolved

🚨 fix: lint

c8a657d

coderabbitai bot reviewed Sep 11, 2025

View reviewed changes

packages/propel/src/input/input.tsx Show resolved Hide resolved

packages/propel/src/input/input.tsx Show resolved Hide resolved

packages/propel/src/input/input.tsx Show resolved Hide resolved

JayashTripathy added the requires approval label Sep 11, 2025

anmolsinghbhatia previously approved these changes Sep 17, 2025

View reviewed changes

Merge branch 'preview' of https://github.com/makeplane/plane into fea…

41227e4

…t-propel-input

JayashTripathy dismissed anmolsinghbhatia’s stale review via 41227e4 October 7, 2025 08:08

fix: add aria-invalid attribute to Input component for better accessi…

21ef643

…bility

vamsikrishnamathala previously approved these changes Oct 7, 2025

View reviewed changes

JayashTripathy added ready to merge and removed requires approval labels Oct 7, 2025

chore: fix formatting in package.json and reorder imports in popover-…

44b37d2

…menu stories

JayashTripathy dismissed vamsikrishnamathala’s stale review via 44b37d2 October 7, 2025 08:19

JayashTripathy requested a review from vamsikrishnamathala October 7, 2025 08:20

vamsikrishnamathala approved these changes Oct 7, 2025

View reviewed changes

sriramveeraghanta approved these changes Oct 7, 2025

View reviewed changes

sriramveeraghanta merged commit d3024f8 into preview Oct 7, 2025
6 of 7 checks passed

sriramveeraghanta deleted the feat-propel-input branch October 7, 2025 11:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[WEB-4731] feat: add baseui input component to propel package #7769

[WEB-4731] feat: add baseui input component to propel package #7769

Uh oh!

JayashTripathy commented Sep 10, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Sep 10, 2025 •

edited

Loading

Uh oh!

makeplane bot commented Sep 10, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

[WEB-4731] feat: add baseui input component to propel package #7769

[WEB-4731] feat: add baseui input component to propel package #7769

Uh oh!

Conversation

JayashTripathy commented Sep 10, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Screenshots and Media (if applicable)

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Pre-merge checks (3 passed)

Poem

Uh oh!

makeplane bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

JayashTripathy commented Sep 10, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Sep 10, 2025 •

edited

Loading

makeplane bot commented Sep 10, 2025 •

edited

Loading