From 9ad195ec63dda8357a7e8655cab019f16d23a410 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 11 Sep 2025 01:36:03 +0530 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20input=20component?= =?UTF-8?q?=20to=20propel=20package?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/package.json | 3 +- packages/propel/src/input/index.tsx | 55 +++++++ packages/propel/src/input/input.stories.tsx | 153 ++++++++++++++++++++ packages/propel/tsdown.config.ts | 1 + 4 files changed, 211 insertions(+), 1 deletion(-) create mode 100644 packages/propel/src/input/index.tsx create mode 100644 packages/propel/src/input/input.stories.tsx diff --git a/packages/propel/package.json b/packages/propel/package.json index 6650905bb26..572df2d1bb2 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -32,6 +32,7 @@ "./emoji-reaction": "./dist/emoji-reaction/index.js", "./emoji-reaction-picker": "./dist/emoji-reaction-picker/index.js", "./icons": "./dist/icons/index.js", + "./input": "./dist/input/index.js", "./menu": "./dist/menu/index.js", "./pill": "./dist/pill/index.js", "./popover": "./dist/popover/index.js", @@ -79,4 +80,4 @@ "tsdown": "catalog:", "typescript": "catalog:" } -} +} \ No newline at end of file diff --git a/packages/propel/src/input/index.tsx b/packages/propel/src/input/index.tsx new file mode 100644 index 00000000000..cfd818b4ead --- /dev/null +++ b/packages/propel/src/input/index.tsx @@ -0,0 +1,55 @@ +import * as React from "react"; +import { Input as BaseInput } from "@base-ui-components/react/input"; +// helpers +import { cn } from "../utils"; + +export interface InputProps extends React.InputHTMLAttributes { + mode?: "primary" | "transparent" | "true-transparent"; + inputSize?: "xs" | "sm" | "md"; + hasError?: boolean; + className?: string; + autoComplete?: "on" | "off"; +} + +const Input = React.forwardRef((props, ref) => { + const { + id, + type, + name, + mode = "primary", + inputSize = "sm", + hasError = false, + className = "", + autoComplete = "off", + ...rest + } = props; + + return ( + + ); +}); + +Input.displayName = "form-input-field"; + +export { Input }; diff --git a/packages/propel/src/input/input.stories.tsx b/packages/propel/src/input/input.stories.tsx new file mode 100644 index 00000000000..76648eaf89a --- /dev/null +++ b/packages/propel/src/input/input.stories.tsx @@ -0,0 +1,153 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { Input } from "./index"; + +const meta: Meta = { + title: "Components/Input", + component: Input, + parameters: { + layout: "centered", + }, + tags: ["autodocs"], + argTypes: { + mode: { + control: "select", + options: ["primary", "transparent", "true-transparent"], + }, + inputSize: { + control: "select", + options: ["xs", "sm", "md"], + }, + hasError: { + control: "boolean", + }, + type: { + control: "select", + options: ["text", "email", "password", "number", "tel", "url", "search"], + }, + autoComplete: { + control: "select", + options: ["on", "off"], + }, + disabled: { + control: "boolean", + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const createStory = (args: Partial>): Story => ({ + args: { placeholder: "Enter text...", className: "w-[400px]", ...args }, +}); + +const createShowcaseStory = ( + title: string, + sections: Array<{ label: string; props: Partial> }> +): Story => ({ + render: () => ( +
+
+

{title}

+
+ {sections.map(({ label, props }, index) => ( +
+ + +
+ ))} +
+
+
+ ), +}); + +export const Default = createStory({}); + +export const Primary = createStory({ + mode: "primary", + placeholder: "Primary input", +}); + +export const Transparent = createStory({ + mode: "transparent", + placeholder: "Transparent input", +}); + +export const TrueTransparent = createStory({ + mode: "true-transparent", + placeholder: "True transparent input", +}); + +export const ExtraSmall = createStory({ + inputSize: "xs", + placeholder: "Extra small input", +}); + +export const Small = createStory({ + inputSize: "sm", + placeholder: "Small input", +}); + +export const Medium = createStory({ + inputSize: "md", + placeholder: "Medium input", +}); + +export const WithError = createStory({ + hasError: true, + placeholder: "Input with error", + defaultValue: "Invalid input", +}); + +export const Disabled = createStory({ + disabled: true, + placeholder: "Disabled input", + defaultValue: "Cannot edit this", +}); + +export const WithValue = createStory({ + defaultValue: "Pre-filled value", + placeholder: "Input with value", +}); + +export const Email = createStory({ + type: "email", + placeholder: "Enter your email", + autoComplete: "on", +}); + +export const Password = createStory({ + type: "password", + placeholder: "Enter your password", + autoComplete: "off", +}); + +export const Number = createStory({ + type: "number", + placeholder: "Enter a number", +}); + +export const Search = createStory({ + type: "search", + placeholder: "Search...", +}); + +export const AllModes = createShowcaseStory("Input Modes", [ + { label: "Primary", props: { mode: "primary", placeholder: "Primary input" } }, + { label: "Transparent", props: { mode: "transparent", placeholder: "Transparent input" } }, + { label: "True Transparent", props: { mode: "true-transparent", placeholder: "True transparent input" } }, +]); + +export const AllSizes = createShowcaseStory("Input Sizes", [ + { label: "Extra Small (xs)", props: { inputSize: "xs", placeholder: "Extra small input" } }, + { label: "Small (sm)", props: { inputSize: "sm", placeholder: "Small input" } }, + { label: "Medium (md)", props: { inputSize: "md", placeholder: "Medium input" } }, +]); + +export const AllStates = createShowcaseStory("Input States", [ + { label: "Normal", props: { placeholder: "Normal input" } }, + { label: "With Error", props: { hasError: true, placeholder: "Input with error" } }, + { label: "Disabled", props: { disabled: true, placeholder: "Disabled input" } }, + { label: "With Value", props: { defaultValue: "Pre-filled value", placeholder: "Input with value" } }, +]); diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts index 20f242fb564..3dcdd07188e 100644 --- a/packages/propel/tsdown.config.ts +++ b/packages/propel/tsdown.config.ts @@ -18,6 +18,7 @@ export default defineConfig({ "src/emoji-reaction/index.ts", "src/emoji-reaction-picker/index.ts", "src/icons/index.ts", + "src/input/index.ts", "src/menu/index.ts", "src/pill/index.ts", "src/popover/index.ts", From 787f81cb228c5a0a77b46f1f47a30a2edcc80010 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 11 Sep 2025 01:40:08 +0530 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=9A=A8=20fix:=20lint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/core/components/pages/version/editor.tsx | 2 +- packages/propel/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/core/components/pages/version/editor.tsx b/apps/web/core/components/pages/version/editor.tsx index d001072dbbe..c484a4ee5cb 100644 --- a/apps/web/core/components/pages/version/editor.tsx +++ b/apps/web/core/components/pages/version/editor.tsx @@ -3,8 +3,8 @@ import { useParams } from "next/navigation"; // plane imports import type { TDisplayConfig } from "@plane/editor"; import type { JSONContent, TPageVersion } from "@plane/types"; -import { isJSONContentEmpty } from "@plane/utils"; import { Loader } from "@plane/ui"; +import { isJSONContentEmpty } from "@plane/utils"; // components import { DocumentEditor } from "@/components/editor/document/editor"; // hooks diff --git a/packages/propel/package.json b/packages/propel/package.json index 572df2d1bb2..a134e3c1d46 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -80,4 +80,4 @@ "tsdown": "catalog:", "typescript": "catalog:" } -} \ No newline at end of file +} From c8a657d2b62a4bf281085f40cbf87b752693bd77 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 11 Sep 2025 12:50:15 +0530 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=9A=A8=20fix:=20lint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/src/input/index.ts | 1 + packages/propel/src/input/{index.tsx => input.tsx} | 0 2 files changed, 1 insertion(+) create mode 100644 packages/propel/src/input/index.ts rename packages/propel/src/input/{index.tsx => input.tsx} (100%) diff --git a/packages/propel/src/input/index.ts b/packages/propel/src/input/index.ts new file mode 100644 index 00000000000..4ce4a889370 --- /dev/null +++ b/packages/propel/src/input/index.ts @@ -0,0 +1 @@ +export * from "./input"; diff --git a/packages/propel/src/input/index.tsx b/packages/propel/src/input/input.tsx similarity index 100% rename from packages/propel/src/input/index.tsx rename to packages/propel/src/input/input.tsx From 21ef64397706cdb19d0bf7553a7575e9b4816757 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Tue, 7 Oct 2025 13:42:33 +0530 Subject: [PATCH 4/5] fix: add aria-invalid attribute to Input component for better accessibility --- packages/propel/src/input/input.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/propel/src/input/input.tsx b/packages/propel/src/input/input.tsx index cfd818b4ead..04034b9391e 100644 --- a/packages/propel/src/input/input.tsx +++ b/packages/propel/src/input/input.tsx @@ -7,8 +7,6 @@ export interface InputProps extends React.InputHTMLAttributes mode?: "primary" | "transparent" | "true-transparent"; inputSize?: "xs" | "sm" | "md"; hasError?: boolean; - className?: string; - autoComplete?: "on" | "off"; } const Input = React.forwardRef((props, ref) => { @@ -44,6 +42,7 @@ const Input = React.forwardRef((props, ref) => { }, className )} + aria-invalid={hasError || undefined} autoComplete={autoComplete} {...rest} /> From 44b37d2dbc18304512ff8d8a3dee58f985003acb Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Tue, 7 Oct 2025 13:48:50 +0530 Subject: [PATCH 5/5] chore: fix formatting in package.json and reorder imports in popover-menu stories --- packages/propel/package.json | 2 +- packages/ui/src/popovers/popover-menu.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index d0eb6237180..be0be893d89 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -192,4 +192,4 @@ "tsdown": "catalog:", "typescript": "catalog:" } -} \ No newline at end of file +} diff --git a/packages/ui/src/popovers/popover-menu.stories.tsx b/packages/ui/src/popovers/popover-menu.stories.tsx index b868c9d01e9..4e8a56cda6b 100644 --- a/packages/ui/src/popovers/popover-menu.stories.tsx +++ b/packages/ui/src/popovers/popover-menu.stories.tsx @@ -1,5 +1,5 @@ -import React from "react"; import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; import { PopoverMenu } from "./popover-menu"; type TPopoverMenu = {