@xyd-js/source-react-runtime 0.0.0-build-23166ce-20260423151359

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @xyd-js/source-react-runtime
+
+## 0.0.0-build-23166ce-20260423151359
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/openapi@0.0.0-build-23166ce-20260423151359
+  - @xyd-js/uniform@0.0.0-build-23166ce-20260423151359

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) LiveSession Sp.z.o.o
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/README.md

@@ -0,0 +1,121 @@
+# @xyd-js/source-react-runtime
+
+Build plugin that auto-detects React components and injects runtime type metadata (`__xydUniform` by default) using [typia](https://typia.io/) for TypeScript type resolution and [@xyd-js/openapi](../xyd-openapi) for JSON Schema → xyd uniform conversion.
+
+No manual annotations needed — just add the plugin to your build config.
+
+## Supported bundlers
+
+| Bundler | Import | Build command |
+|---------|--------|---------------|
+| **Vite** | `@xyd-js/source-react-runtime` | `vite build` |
+| **Rollup** | `@xyd-js/source-react-runtime` | `rollup -c` |
+| **esbuild** | `@xyd-js/source-react-runtime/esbuild` | `node esbuild.config.mjs` |
+| **React Router v7** | `@xyd-js/source-react-runtime` | `react-router build` |
+| **TanStack Router** | `@xyd-js/source-react-runtime` | `vite build` |
+
+## Usage
+
+### Vite / React Router / TanStack Router
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { xydSourceReactRuntime } from "@xyd-js/source-react-runtime";
+
+export default defineConfig({
+  plugins: [
+    xydSourceReactRuntime(),
+    react(),
+  ],
+});
+```
+
+### Rollup
+
+```js
+// rollup.config.mjs
+import typescript from "@rollup/plugin-typescript";
+import { xydSourceReactRuntime } from "@xyd-js/source-react-runtime";
+
+export default {
+  input: "src/index.ts",
+  plugins: [
+    xydSourceReactRuntime(),
+    typescript(),
+  ],
+};
+```
+
+### esbuild
+
+```js
+// esbuild.config.mjs
+import * as esbuild from "esbuild";
+import { xydSourceReactRuntimeEsbuild } from "@xyd-js/source-react-runtime/esbuild";
+
+await esbuild.build({
+  entryPoints: ["src/index.ts"],
+  outfile: "dist/index.js",
+  bundle: true,
+  format: "esm",
+  plugins: [
+    xydSourceReactRuntimeEsbuild(),
+  ],
+});
+```
+
+## Options
+
+All options are optional.
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `tsconfig` | `string` | `./tsconfig.json` | Path to `tsconfig.json`. Configurable for monorepos or custom locations. |
+| `propertyName` | `string` | `__xydUniform` | Property name for the injected metadata |
+
+```ts
+xydSourceReactRuntime({
+  tsconfig: resolve(__dirname, "tsconfig.json"),
+  propertyName: "__docs", // Component.__docs = JSON.parse('...')
+});
+```
+
+## What it detects
+
+The plugin auto-detects:
+
+- **Exported function components** — `export function MyComponent(props: Props) { ... }`
+- **Exported arrow components** — `export const MyComponent = (props: Props) => { ... }`
+- **Re-exported components** — `function MyComponent(props: Props) { ... } export { MyComponent }`
+- **Contexts** — `export const MyContext = createContext<ValueType>(null)`
+
+Props with `React.*` types (e.g. `React.ReactNode`) are skipped because typia cannot resolve React's internal types.
+
+## How it works
+
+1. **Detect** — scans all source files from `tsconfig.json` using the TypeScript compiler AST to find exported components and their props type names
+2. **Inject** — creates in-memory modified source files with `typia.json.schemas<[PropsType]>()` calls appended
+3. **Transform** — runs typia's TypeScript transform on the full program (all files) for cross-file type resolution
+4. **Convert** — converts the resulting JSON Schema to xyd uniform format using `@xyd-js/openapi`'s `schemaObjectToUniformDefinitionProperties`
+5. **Output** — replaces the typia call with `Component.{propertyName} = JSON.parse('...')`
+
+## Output format
+
+Each component gets a static property with the [xyd uniform Reference](../xyd-uniform) format:
+
+```js
+// Build output
+function UserCard(props) { /* ... */ }
+UserCard.__xydUniform = JSON.parse('{"title":"UserCard","definitions":[{"title":"Props","properties":[{"name":"name","type":"string","meta":[{"name":"required","value":"true"}]},{"name":"email","type":"string","meta":[{"name":"required","value":"true"}]}]}]}');
+```
+
+At runtime, access the metadata:
+
+```ts
+import { UserCard } from "./components";
+
+console.log(UserCard.__xydUniform);
+// { title: "UserCard", definitions: [{ title: "Props", properties: [...] }] }
+```

package/__fixtures__/-1.vite-lib.custom-property/input/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "xyd-fixture-rt-1-vite-lib-user-card",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/__fixtures__/-1.vite-lib.custom-property/input/src/UserCard.tsx

@@ -0,0 +1,27 @@
+interface UserCardProps {
+    /** Full name of the user */
+    name: string;
+
+    /** Email address of the user */
+    email: string;
+
+    /** URL to the user's avatar image */
+    avatarUrl?: string;
+
+    /** Role or title of the user */
+    role?: "admin" | "editor" | "viewer";
+
+    /** Whether the card is in a loading state */
+    loading?: boolean;
+}
+
+export function UserCard(props: UserCardProps) {
+    return (
+        <div>
+            {props.avatarUrl && <img src={props.avatarUrl} alt={props.name} />}
+            <h3>{props.name}</h3>
+            <p>{props.email}</p>
+            {props.role && <span>{props.role}</span>}
+        </div>
+    );
+}

package/__fixtures__/-1.vite-lib.custom-property/input/src/index.ts

@@ -0,0 +1 @@
+export {UserCard} from './UserCard';

package/__fixtures__/-1.vite-lib.custom-property/input/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "strict": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/__fixtures__/-1.vite-lib.custom-property/input/vite.config.ts

@@ -0,0 +1,22 @@
+import {defineConfig} from 'vite';
+import {resolve} from 'node:path';
+import react from '@vitejs/plugin-react';
+import {xydSourceReactRuntime} from '@xyd-js/source-react-runtime';
+
+export default defineConfig({
+    plugins: [
+        xydSourceReactRuntime({tsconfig: resolve(__dirname, 'tsconfig.json'), propertyName: '__docs'}),
+        react(),
+    ],
+    build: {
+        lib: {
+            entry: 'src/index.ts',
+            formats: ['es'],
+            fileName: 'index',
+        },
+        rollupOptions: {
+            external: ['react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom'],
+        },
+        minify: false,
+    },
+});

package/__fixtures__/-1.vite-lib.custom-property/output.js

@@ -0,0 +1,10 @@
+// === index.js ===
+import { jsxs, jsx } from "react/jsx-runtime";
+function UserCard(props) {
+  return jsxs("div", { children: [props.avatarUrl && jsx("img", { src: props.avatarUrl, alt: props.name }), jsx("h3", { children: props.name }), jsx("p", { children: props.email }), props.role && jsx("span", { children: props.role })] });
+}
+UserCard.__docs = JSON.parse(`{"title":"UserCard","canonical":"","description":"","definitions":[{"title":"Props","properties":[{"name":"name","type":"string","description":"Full name of the user","meta":[{"name":"required","value":"true"}]},{"name":"email","type":"string","description":"Email address of the user","meta":[{"name":"required","value":"true"}]},{"name":"avatarUrl","type":"string","description":"URL to the user's avatar image","meta":[]},{"name":"role","type":"$xor","description":"Role or title of the user","properties":[{"name":"role","type":"object","description":"","meta":[]},{"name":"role","type":"object","description":"","meta":[]},{"name":"role","type":"object","description":"","meta":[]}],"meta":[]},{"name":"loading","type":"boolean","description":"Whether the card is in a loading state","meta":[]}],"meta":[{"name":"type","value":"parameters"}]}],"examples":{"groups":[]}}`);
+export {
+  UserCard
+};
+

package/__fixtures__/1.vite-lib.user-card/input/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "xyd-fixture-rt-1-vite-lib-user-card",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/__fixtures__/1.vite-lib.user-card/input/src/UserCard.tsx

@@ -0,0 +1,27 @@
+interface UserCardProps {
+    /** Full name of the user */
+    name: string;
+
+    /** Email address of the user */
+    email: string;
+
+    /** URL to the user's avatar image */
+    avatarUrl?: string;
+
+    /** Role or title of the user */
+    role?: "admin" | "editor" | "viewer";
+
+    /** Whether the card is in a loading state */
+    loading?: boolean;
+}
+
+export function UserCard(props: UserCardProps) {
+    return (
+        <div>
+            {props.avatarUrl && <img src={props.avatarUrl} alt={props.name} />}
+            <h3>{props.name}</h3>
+            <p>{props.email}</p>
+            {props.role && <span>{props.role}</span>}
+        </div>
+    );
+}

package/__fixtures__/1.vite-lib.user-card/input/src/index.ts

@@ -0,0 +1 @@
+export {UserCard} from './UserCard';

package/__fixtures__/1.vite-lib.user-card/input/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "strict": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/__fixtures__/1.vite-lib.user-card/input/vite.config.ts

@@ -0,0 +1,22 @@
+import {defineConfig} from 'vite';
+import {resolve} from 'node:path';
+import react from '@vitejs/plugin-react';
+import {xydSourceReactRuntime} from '@xyd-js/source-react-runtime';
+
+export default defineConfig({
+    plugins: [
+        xydSourceReactRuntime(),
+        react(),
+    ],
+    build: {
+        lib: {
+            entry: 'src/index.ts',
+            formats: ['es'],
+            fileName: 'index',
+        },
+        rollupOptions: {
+            external: ['react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom'],
+        },
+        minify: false,
+    },
+});

package/__fixtures__/1.vite-lib.user-card/output.js

@@ -0,0 +1,10 @@
+// === index.js ===
+import { jsxs, jsx } from "react/jsx-runtime";
+function UserCard(props) {
+  return jsxs("div", { children: [props.avatarUrl && jsx("img", { src: props.avatarUrl, alt: props.name }), jsx("h3", { children: props.name }), jsx("p", { children: props.email }), props.role && jsx("span", { children: props.role })] });
+}
+UserCard.__xydUniform = JSON.parse(`{"title":"UserCard","canonical":"","description":"","definitions":[{"title":"Props","properties":[{"name":"name","type":"string","description":"Full name of the user","meta":[{"name":"required","value":"true"}]},{"name":"email","type":"string","description":"Email address of the user","meta":[{"name":"required","value":"true"}]},{"name":"avatarUrl","type":"string","description":"URL to the user's avatar image","meta":[]},{"name":"role","type":"$xor","description":"Role or title of the user","properties":[{"name":"role","type":"object","description":"","meta":[]},{"name":"role","type":"object","description":"","meta":[]},{"name":"role","type":"object","description":"","meta":[]}],"meta":[]},{"name":"loading","type":"boolean","description":"Whether the card is in a loading state","meta":[]}],"meta":[{"name":"type","value":"parameters"}]}],"examples":{"groups":[]}}`);
+export {
+  UserCard
+};
+

package/__fixtures__/2.vite-lib.sample-app/input/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "xyd-fixture-rt-2-vite-lib-sample-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/__fixtures__/2.vite-lib.sample-app/input/src/components/UserProfile.tsx

@@ -0,0 +1,42 @@
+import type { User } from "../types/user";
+
+interface UserProfileProps {
+    /** The user object to display */
+    user: User;
+
+    /** Show the full address block */
+    showAddress?: boolean;
+
+    /** Called when the edit button is clicked */
+    onEdit: (userId: number) => void;
+
+    /** Custom CSS class name */
+    className?: string;
+
+    /** Maximum number of tags to display */
+    maxTags?: number;
+}
+
+export function UserProfile({ user, showAddress, onEdit, className, maxTags }: UserProfileProps) {
+    const visibleTags = maxTags ? user.tags.slice(0, maxTags) : user.tags;
+
+    return (
+        <div className={className}>
+            <h2>{user.name}</h2>
+            <p>{user.email}</p>
+            <span>{user.role}</span>
+            {showAddress && user.address && (
+                <address>
+                    {user.address.street}, {user.address.city}, {user.address.country}
+                    {user.address.zip && ` ${user.address.zip}`}
+                </address>
+            )}
+            <div>
+                {visibleTags.map((tag) => (
+                    <span key={tag}>{tag}</span>
+                ))}
+            </div>
+            <button type="button" onClick={() => onEdit(user.id)}>Edit</button>
+        </div>
+    );
+}

package/__fixtures__/2.vite-lib.sample-app/input/src/contexts/UserContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, useMemo, useState } from "react";
+import type { User } from "../types/user";
+
+interface UserContextValue {
+    currentUser: User | null;
+    isLoggedIn: boolean;
+    login: (user: User) => void;
+    logout: () => void;
+}
+
+const UserContext = createContext<UserContextValue | null>(null);
+UserContext.displayName = "UserContext";
+
+function UserProvider({ children }: { children: React.ReactNode }) {
+    const [currentUser, setCurrentUser] = useState<User | null>(null);
+
+    const value = useMemo((): UserContextValue => ({
+        currentUser,
+        isLoggedIn: currentUser !== null,
+        login: setCurrentUser,
+        logout: () => setCurrentUser(null),
+    }), [currentUser]);
+
+    return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+}
+
+export { UserContext, UserProvider };

package/__fixtures__/2.vite-lib.sample-app/input/src/index.ts

@@ -0,0 +1,3 @@
+export { UserProfile } from "./components/UserProfile";
+export { UserContext, UserProvider } from "./contexts/UserContext";
+export type { User, Role, Address } from "./types/user";

package/__fixtures__/2.vite-lib.sample-app/input/src/types/user.ts

@@ -0,0 +1,18 @@
+export type Role = "admin" | "editor" | "viewer";
+
+export interface Address {
+    street: string;
+    city: string;
+    country: string;
+    zip?: string;
+}
+
+export interface User {
+    id: number;
+    name: string;
+    email: string;
+    role: Role;
+    address: Address;
+    tags: string[];
+    joinedAt: string;
+}

package/__fixtures__/2.vite-lib.sample-app/input/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "strict": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/__fixtures__/2.vite-lib.sample-app/input/vite.config.ts

@@ -0,0 +1,22 @@
+import {defineConfig} from 'vite';
+import {resolve} from 'node:path';
+import react from '@vitejs/plugin-react';
+import {xydSourceReactRuntime} from '@xyd-js/source-react-runtime';
+
+export default defineConfig({
+    plugins: [
+        xydSourceReactRuntime(),
+        react(),
+    ],
+    build: {
+        lib: {
+            entry: 'src/index.ts',
+            formats: ['es'],
+            fileName: 'index',
+        },
+        rollupOptions: {
+            external: ['react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom'],
+        },
+        minify: false,
+    },
+});

package/__fixtures__/2.vite-lib.sample-app/output.js

@@ -0,0 +1,27 @@
+// === index.js ===
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createContext, useState, useMemo } from "react";
+function UserProfile({ user, showAddress, onEdit, className, maxTags }) {
+  const visibleTags = maxTags ? user.tags.slice(0, maxTags) : user.tags;
+  return jsxs("div", { className, children: [jsx("h2", { children: user.name }), jsx("p", { children: user.email }), jsx("span", { children: user.role }), showAddress && user.address && jsxs("address", { children: [user.address.street, ", ", user.address.city, ", ", user.address.country, user.address.zip && ` ${user.address.zip}`] }), jsx("div", { children: visibleTags.map((tag) => jsx("span", { children: tag }, tag)) }), jsx("button", { type: "button", onClick: () => onEdit(user.id), children: "Edit" })] });
+}
+UserProfile.__xydUniform = JSON.parse('{"title":"UserProfile","canonical":"","description":"","definitions":[{"title":"Props","properties":[{"name":"user","type":"object","description":"","meta":[{"name":"required","value":"true"}],"properties":[{"name":"id","type":"number","description":"","meta":[{"name":"required","value":"true"}]},{"name":"name","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"email","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"role","type":"$xor","description":"","properties":[{"name":"role","type":"object","description":"","meta":[{"name":"required","value":"true"}]},{"name":"role","type":"object","description":"","meta":[{"name":"required","value":"true"}]},{"name":"role","type":"object","description":"","meta":[{"name":"required","value":"true"}]}],"meta":[{"name":"required","value":"true"}]},{"name":"address","type":"object","description":"","meta":[{"name":"required","value":"true"}],"properties":[{"name":"street","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"city","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"country","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"zip","type":"string","description":"","meta":[]}]},{"name":"tags","type":"$array","description":"","meta":[{"name":"required","value":"true"}],"properties":[],"ofProperty":{"name":"","type":"string","properties":[],"description":"","meta":[{"name":"required","value":"true"}]}},{"name":"joinedAt","type":"string","description":"","meta":[{"name":"required","value":"true"}]}]},{"name":"showAddress","type":"boolean","description":"Show the full address block","meta":[]},{"name":"className","type":"string","description":"Custom CSS class name","meta":[]},{"name":"maxTags","type":"number","description":"Maximum number of tags to display","meta":[]}],"meta":[{"name":"type","value":"parameters"}]}],"examples":{"groups":[]}}');
+const UserContext = createContext(null);
+UserContext.displayName = "UserContext";
+function UserProvider({ children }) {
+  const [currentUser, setCurrentUser] = useState(null);
+  const value = useMemo(() => ({
+    currentUser,
+    isLoggedIn: currentUser !== null,
+    login: setCurrentUser,
+    logout: () => setCurrentUser(null)
+  }), [currentUser]);
+  return jsx(UserContext.Provider, { value, children });
+}
+UserContext.__xydUniform = JSON.parse('{"title":"UserContext","canonical":"","description":"","definitions":[{"title":"Props","properties":[{"name":"currentUser","type":"$xor","description":"","properties":[{"name":"currentUser","type":"null","description":"","meta":[{"name":"required","value":"true"}]},{"name":"currentUser","type":"object","description":"","meta":[{"name":"required","value":"true"}],"properties":[{"name":"id","type":"number","description":"","meta":[{"name":"required","value":"true"}]},{"name":"name","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"email","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"role","type":"$xor","description":"","properties":[{"name":"role","type":"object","description":"","meta":[{"name":"required","value":"true"}]},{"name":"role","type":"object","description":"","meta":[{"name":"required","value":"true"}]},{"name":"role","type":"object","description":"","meta":[{"name":"required","value":"true"}]}],"meta":[{"name":"required","value":"true"}]},{"name":"address","type":"object","description":"","meta":[{"name":"required","value":"true"}],"properties":[{"name":"street","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"city","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"country","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"zip","type":"string","description":"","meta":[]}]},{"name":"tags","type":"$array","description":"","meta":[{"name":"required","value":"true"}],"properties":[],"ofProperty":{"name":"","type":"string","properties":[],"description":"","meta":[{"name":"required","value":"true"}]}},{"name":"joinedAt","type":"string","description":"","meta":[{"name":"required","value":"true"}]}]}],"meta":[{"name":"required","value":"true"}]},{"name":"isLoggedIn","type":"boolean","description":"","meta":[{"name":"required","value":"true"}]}],"meta":[{"name":"type","value":"parameters"}]}],"examples":{"groups":[]}}');
+export {
+  UserContext,
+  UserProfile,
+  UserProvider
+};
+

package/__fixtures__/3.vite-lib.sample-real-app/input/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "xyd-fixture-rt-3-vite-lib-sample-real-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/__fixtures__/3.vite-lib.sample-real-app/input/src/components/AddTodoForm.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import type { Priority } from "../types/todo";
+
+interface AddTodoFormProps {
+    /** Callback fired after a todo is successfully added */
+    onAdd: (title: string, priority: Priority, description?: string, tags?: string[]) => void;
+
+    /** Default priority for new todos */
+    defaultPriority?: Priority;
+
+    /** Placeholder text for the title input */
+    placeholder?: string;
+}
+
+export function AddTodoForm({ onAdd, defaultPriority = "medium", placeholder = "What needs to be done?" }: AddTodoFormProps) {
+    const [title, setTitle] = useState("");
+    const [priority, setPriority] = useState<Priority>(defaultPriority);
+    const [description, setDescription] = useState("");
+    const [tags, setTags] = useState("");
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!title.trim()) return;
+        onAdd(
+            title.trim(),
+            priority,
+            description.trim() || undefined,
+            tags.split(",").map((t) => t.trim()).filter(Boolean),
+        );
+        setTitle("");
+        setDescription("");
+        setTags("");
+        setPriority(defaultPriority);
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="add-todo-form">
+            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder={placeholder} />
+            <select value={priority} onChange={(e) => setPriority(e.target.value as Priority)}>
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+                <option value="urgent">Urgent</option>
+            </select>
+            <textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description (optional)" />
+            <input type="text" value={tags} onChange={(e) => setTags(e.target.value)} placeholder="Tags (comma separated)" />
+            <button type="submit" disabled={!title.trim()}>Add</button>
+        </form>
+    );
+}
+

package/__fixtures__/3.vite-lib.sample-real-app/input/src/components/FilterBar.tsx

@@ -0,0 +1,56 @@
+import type { FilterStatus, TodoStats } from "../types/todo";
+
+interface FilterBarProps {
+    /** Current active filter */
+    filter: FilterStatus;
+
+    /** Called when the filter changes */
+    onFilterChange: (filter: FilterStatus) => void;
+
+    /** Current search query */
+    searchQuery: string;
+
+    /** Called when the search query changes */
+    onSearchChange: (query: string) => void;
+
+    /** Todo statistics for displaying counts */
+    stats: TodoStats;
+
+    /** Called when "Clear completed" is clicked */
+    onClearCompleted: () => void;
+
+    /** Additional CSS classes */
+    className?: string;
+}
+
+export function FilterBar({ filter, onFilterChange, searchQuery, onSearchChange, stats, onClearCompleted, className }: FilterBarProps) {
+    const tabs: { value: FilterStatus; label: string }[] = [
+        { value: "all", label: `All (${stats.total})` },
+        { value: "active", label: `Active (${stats.active})` },
+        { value: "completed", label: `Done (${stats.completed})` },
+    ];
+
+    return (
+        <div className={`filter-bar ${className || ""}`}>
+            <div className="tabs">
+                {tabs.map((tab) => (
+                    <button
+                        key={tab.value}
+                        type="button"
+                        className={filter === tab.value ? "active" : ""}
+                        onClick={() => onFilterChange(tab.value)}
+                    >
+                        {tab.label}
+                    </button>
+                ))}
+            </div>
+            <input type="search" value={searchQuery} onChange={(e) => onSearchChange(e.target.value)} placeholder="Search..." />
+            {stats.completed > 0 && (
+                <button type="button" onClick={onClearCompleted} className="clear-btn">
+                    Clear completed
+                </button>
+            )}
+        </div>
+    );
+}
+