@saptanshuwanjari/react-component-library 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Saptanshu Wanjari 
+
+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,56 @@
+# React Component Library
+
+A modern, lightweight React component library featuring robust DataTable and Form components built with the Compound Component pattern.
+
+## Features
+
+- 🎯 **DataTable**: Powerful data table with sorting, filtering, and pagination
+- 📝 **Form**: Flexible form system with validation using react-hook-form and Zod
+- 🎨 **Styled with Tailwind CSS**: Fully customizable with Tailwind
+- 📦 **Tree-shakeable**: Only import what you need
+- 🔷 **TypeScript**: Full type safety
+
+## Installation
+
+```bash
+npm install @your-org/react-component-library
+```
+
+## Usage
+
+```tsx
+import { Form, DataTable } from '@your-org/react-component-library';
+
+// Form example
+<Form.Root schema={mySchema} onSubmit={handleSubmit}>
+  <Form.InputField name="email" label="Email" />
+  <Form.Submit>Submit</Form.Submit>
+</Form.Root>
+
+// DataTable example
+<DataTable.Root data={data}>
+  <DataTable.Header>
+    <DataTable.Column>Name</DataTable.Column>
+  </DataTable.Header>
+  <DataTable.Body />
+</DataTable.Root>
+```
+
+## Development
+
+This library is built with `tsup` for fast bundling. The `example/` folder contains a Next.js app for testing components locally.
+
+```bash
+# Install dependencies
+npm install
+
+# Start development mode
+npm run dev
+
+# Build for production
+npm run build
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,171 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, Path, ControllerRenderProps } from 'react-hook-form';
+import * as z from 'zod';
+import { ColumnDef } from '@tanstack/react-table';
+import { ClassValue } from 'clsx';
+
+type ZodSchema = z.ZodTypeAny;
+
+type RootProps$1<T extends FieldValues> = {
+    schema?: ZodSchema;
+    defaultValues?: Partial<T>;
+    onSubmit: (values: any) => void | Promise<void>;
+    children: React.ReactNode;
+    enableOptimistic?: boolean;
+    title?: string;
+    description?: string;
+    enableEditMode?: boolean;
+    formId?: string;
+};
+declare function Root$1<T extends FieldValues = FieldValues>({ schema, defaultValues, onSubmit, children, enableOptimistic, title, description, enableEditMode, formId, }: RootProps$1<T>): react_jsx_runtime.JSX.Element;
+
+type FieldProps<TFieldValues extends FieldValues> = {
+    name: Path<TFieldValues>;
+    label?: string;
+    children: (field: ControllerRenderProps<TFieldValues, Path<TFieldValues>>) => React.ReactNode;
+};
+declare function Field<TFieldValues extends FieldValues>({ name, label, children, }: FieldProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+declare const Button$2: ({ children, ...props }: React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
+declare function Submit({ children, ...props }: React.ComponentProps<typeof Button$2>): react_jsx_runtime.JSX.Element | null;
+
+declare const Button$1: ({ children, ...props }: React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
+type EditButtonProps = React.ComponentProps<typeof Button$1> & {
+    formId?: string;
+};
+declare function EditButton({ children, formId, ...props }: EditButtonProps): react_jsx_runtime.JSX.Element | null;
+
+declare const Button: ({ children, className, ...props }: React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
+declare function CancelButton({ children, ...props }: React.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element | null;
+
+type LinkFieldProps = {
+    label?: string;
+    link: string;
+    LinkComponent?: React.ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
+};
+declare function LinkField({ label, link, LinkComponent }: LinkFieldProps): react_jsx_runtime.JSX.Element;
+
+declare const Form: typeof Root$1 & {
+    Field: typeof Field;
+    InputField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        placeholder?: string;
+        type?: React.HTMLInputTypeAttribute;
+        icon?: React.ReactNode;
+        iconAlign?: "inline-start" | "inline-end" | "block-start" | "block-end";
+        startAddon?: React.ReactNode;
+        endAddon?: React.ReactNode;
+        useGroup?: boolean;
+    }) => react.ReactNode;
+    PasswordField: react.MemoExoticComponent<(<TFieldValues extends react_hook_form.FieldValues>({ name, label, placeholder, }: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        placeholder?: string;
+    }) => react_jsx_runtime.JSX.Element)>;
+    TextareaField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        placeholder?: string;
+        rows?: number;
+    }) => react.ReactNode;
+    SelectField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        placeholder?: string;
+        options: Array<{
+            label: string;
+            value: string;
+        }>;
+    }) => react.ReactNode;
+    CheckboxField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        description?: string;
+    }) => react.ReactNode;
+    DateField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        placeholder?: string;
+    }) => react.ReactNode;
+    FileField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        accept?: string;
+        multiple?: boolean;
+    }) => react.ReactNode;
+    ProfilePictureField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        className?: string;
+        avatarClassName?: string;
+        fallback?: string;
+    }) => react.ReactNode;
+    Submit: typeof Submit;
+    EditButton: typeof EditButton;
+    CancelButton: typeof CancelButton;
+    Group: ({ children }: {
+        children: React.ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    LinkField: typeof LinkField;
+};
+
+type ViewMode = 'table' | 'grid';
+interface FilterOption {
+    id: string;
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    placeholder?: string;
+    multiSelect?: boolean;
+}
+
+interface RootProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    filters?: FilterOption[];
+    defaultViewMode?: ViewMode;
+    defaultPageSize?: number;
+    children: React.ReactNode;
+}
+declare function Root<TData, TValue>({ columns, data, filters, defaultViewMode, defaultPageSize, children, }: RootProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
+declare function Toolbar(): react_jsx_runtime.JSX.Element;
+
+interface ContentProps {
+    renderCard?: (item: any, index: number) => React.ReactNode;
+    gridColumns?: number;
+    gridGap?: number;
+}
+declare function Content({ renderCard, gridColumns, gridGap }: ContentProps): react_jsx_runtime.JSX.Element;
+
+declare function TableView(): react_jsx_runtime.JSX.Element;
+
+interface GridViewProps<TData = any> {
+    renderCard?: (item: TData, index: number) => React.ReactNode;
+    columns?: number;
+    gap?: number;
+}
+declare function GridView<TData = any>({ renderCard, columns, gap }: GridViewProps<TData>): react_jsx_runtime.JSX.Element;
+
+declare function Pagination(): react_jsx_runtime.JSX.Element;
+
+declare const DataTable: typeof Root & {
+    Toolbar: typeof Toolbar;
+    Content: typeof Content;
+    TableView: typeof TableView;
+    GridView: typeof GridView;
+    Pagination: typeof Pagination;
+};
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { DataTable, Form, cn };

package/dist/index.d.ts

@@ -0,0 +1,171 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, Path, ControllerRenderProps } from 'react-hook-form';
+import * as z from 'zod';
+import { ColumnDef } from '@tanstack/react-table';
+import { ClassValue } from 'clsx';
+
+type ZodSchema = z.ZodTypeAny;
+
+type RootProps$1<T extends FieldValues> = {
+    schema?: ZodSchema;
+    defaultValues?: Partial<T>;
+    onSubmit: (values: any) => void | Promise<void>;
+    children: React.ReactNode;
+    enableOptimistic?: boolean;
+    title?: string;
+    description?: string;
+    enableEditMode?: boolean;
+    formId?: string;
+};
+declare function Root$1<T extends FieldValues = FieldValues>({ schema, defaultValues, onSubmit, children, enableOptimistic, title, description, enableEditMode, formId, }: RootProps$1<T>): react_jsx_runtime.JSX.Element;
+
+type FieldProps<TFieldValues extends FieldValues> = {
+    name: Path<TFieldValues>;
+    label?: string;
+    children: (field: ControllerRenderProps<TFieldValues, Path<TFieldValues>>) => React.ReactNode;
+};
+declare function Field<TFieldValues extends FieldValues>({ name, label, children, }: FieldProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+declare const Button$2: ({ children, ...props }: React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
+declare function Submit({ children, ...props }: React.ComponentProps<typeof Button$2>): react_jsx_runtime.JSX.Element | null;
+
+declare const Button$1: ({ children, ...props }: React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
+type EditButtonProps = React.ComponentProps<typeof Button$1> & {
+    formId?: string;
+};
+declare function EditButton({ children, formId, ...props }: EditButtonProps): react_jsx_runtime.JSX.Element | null;
+
+declare const Button: ({ children, className, ...props }: React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
+declare function CancelButton({ children, ...props }: React.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element | null;
+
+type LinkFieldProps = {
+    label?: string;
+    link: string;
+    LinkComponent?: React.ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
+};
+declare function LinkField({ label, link, LinkComponent }: LinkFieldProps): react_jsx_runtime.JSX.Element;
+
+declare const Form: typeof Root$1 & {
+    Field: typeof Field;
+    InputField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        placeholder?: string;
+        type?: React.HTMLInputTypeAttribute;
+        icon?: React.ReactNode;
+        iconAlign?: "inline-start" | "inline-end" | "block-start" | "block-end";
+        startAddon?: React.ReactNode;
+        endAddon?: React.ReactNode;
+        useGroup?: boolean;
+    }) => react.ReactNode;
+    PasswordField: react.MemoExoticComponent<(<TFieldValues extends react_hook_form.FieldValues>({ name, label, placeholder, }: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        placeholder?: string;
+    }) => react_jsx_runtime.JSX.Element)>;
+    TextareaField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        placeholder?: string;
+        rows?: number;
+    }) => react.ReactNode;
+    SelectField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        placeholder?: string;
+        options: Array<{
+            label: string;
+            value: string;
+        }>;
+    }) => react.ReactNode;
+    CheckboxField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        description?: string;
+    }) => react.ReactNode;
+    DateField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        placeholder?: string;
+    }) => react.ReactNode;
+    FileField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        accept?: string;
+        multiple?: boolean;
+    }) => react.ReactNode;
+    ProfilePictureField: <TFieldValues extends react_hook_form.FieldValues>(props: {
+        name: react_hook_form.Path<TFieldValues>;
+        label?: string;
+        className?: string;
+        avatarClassName?: string;
+        fallback?: string;
+    }) => react.ReactNode;
+    Submit: typeof Submit;
+    EditButton: typeof EditButton;
+    CancelButton: typeof CancelButton;
+    Group: ({ children }: {
+        children: React.ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    LinkField: typeof LinkField;
+};
+
+type ViewMode = 'table' | 'grid';
+interface FilterOption {
+    id: string;
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    placeholder?: string;
+    multiSelect?: boolean;
+}
+
+interface RootProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    filters?: FilterOption[];
+    defaultViewMode?: ViewMode;
+    defaultPageSize?: number;
+    children: React.ReactNode;
+}
+declare function Root<TData, TValue>({ columns, data, filters, defaultViewMode, defaultPageSize, children, }: RootProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
+declare function Toolbar(): react_jsx_runtime.JSX.Element;
+
+interface ContentProps {
+    renderCard?: (item: any, index: number) => React.ReactNode;
+    gridColumns?: number;
+    gridGap?: number;
+}
+declare function Content({ renderCard, gridColumns, gridGap }: ContentProps): react_jsx_runtime.JSX.Element;
+
+declare function TableView(): react_jsx_runtime.JSX.Element;
+
+interface GridViewProps<TData = any> {
+    renderCard?: (item: TData, index: number) => React.ReactNode;
+    columns?: number;
+    gap?: number;
+}
+declare function GridView<TData = any>({ renderCard, columns, gap }: GridViewProps<TData>): react_jsx_runtime.JSX.Element;
+
+declare function Pagination(): react_jsx_runtime.JSX.Element;
+
+declare const DataTable: typeof Root & {
+    Toolbar: typeof Toolbar;
+    Content: typeof Content;
+    TableView: typeof TableView;
+    GridView: typeof GridView;
+    Pagination: typeof Pagination;
+};
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { DataTable, Form, cn };