React GridForms

A modern React TypeScript implementation of GridForms - a compact and beautiful grid-based form system with built-in theming support.

Features

• 🎨 Modern Design: Clean, responsive grid-based form layout
• 🌙 Theme Support: Built-in light and dark themes with easy customization
• 📱 Responsive: Works seamlessly across all device sizes
• 🎯 TypeScript: Full TypeScript support with comprehensive type definitions
• ⚡ Performance: Optimized for performance with minimal bundle size
• 🎨 Styled Components: Built with styled-components for flexible styling

Installation

Option 1: Publish to npm (Recommended)

1. Build the library:

   yarn build:lib

2. Publish to npm:

   npm publish

3. Install in your project:

   yarn add react-gridforms

Option 2: Use as a Git dependency

Add this repository as a dependency in your package.json:

{
  "dependencies": {
    "react-gridforms": "github:yourusername/react-gridforms#main"
  }
}

Option 3: Use with yarn link (Development)

1. Link the library:

   cd /path/to/react-gridforms
   yarn link

2. Link in your project:

   cd /path/to/your-project
   yarn link react-gridforms

Option 4: Use as a local dependency

1. Build the library:

   cd /path/to/react-gridforms
   yarn build:lib

2. Add to your project's package.json:

   {
     "dependencies": {
       "react-gridforms": "file:/path/to/react-gridforms"
     }
   }

3. Install:

   yarn install

Usage

Basic Setup

import React from 'react';
import {
  GridForm,
  FormSection,
  FormRow,
  FormField,
  TextInput,
  ThemeProvider,
  lightTheme,
} from 'react-gridforms';

function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      <GridForm onSubmit={(data) => console.log(data)}>
        <FormSection title="Personal Information">
          <FormRow>
            <FormField label="First Name">
              <TextInput name="firstName" placeholder="Enter your first name" />
            </FormField>
            <FormField label="Last Name">
              <TextInput name="lastName" placeholder="Enter your last name" />
            </FormField>
          </FormRow>
        </FormSection>
      </GridForm>
    </ThemeProvider>
  );
}

Available Components

Core Components

• GridForm - Main form container
• FormSection - Group form fields into sections
• FormRow - Arrange fields in a row
• FormField - Individual form field wrapper

Input Components

• TextInput - Text input field
• SelectInput - Dropdown select field
• RadioGroup - Radio button group

Theme Components

• ThemeProvider - Theme context provider
• ThemeToggle - Toggle between light and dark themes

Theming

import { ThemeProvider, lightTheme, darkTheme, useTheme } from 'react-gridforms';

// Use light theme
<ThemeProvider theme={lightTheme}>
  {/* Your form */}
</ThemeProvider>

// Use dark theme
<ThemeProvider theme={darkTheme}>
  {/* Your form */}
</ThemeProvider>

// Custom theme
const customTheme = {
  ...lightTheme,
  colors: {
    ...lightTheme.colors,
    primary: '#ff6b6b',
    secondary: '#4ecdc4',
  }
};

<ThemeProvider theme={customTheme}>
  {/* Your form */}
</ThemeProvider>

Form Submission

<GridForm
  onSubmit={(data) => {
    console.log('Form data:', data);
    // Handle form submission
  }}
>
  {/* Form fields */}
</GridForm>

API Reference

GridForm Props

• onSubmit: (data: Record<string, any>) => void - Form submission handler
• children: ReactNode - Form content

FormSection Props

• title: string - Section title
• children: ReactNode - Section content

FormRow Props

• children: ReactNode - Row content

FormField Props

• label: string - Field label
• children: ReactNode - Input component

TextInput Props

• name: string - Field name
• placeholder?: string - Placeholder text
• type?: string - Input type (default: "text")
• required?: boolean - Required field
• disabled?: boolean - Disabled state

SelectInput Props

• name: string - Field name
• options: SelectOption[] - Select options
• placeholder?: string - Placeholder text
• required?: boolean - Required field
• disabled?: boolean - Disabled state

RadioGroup Props

• name: string - Field name
• options: RadioOption[] - Radio options
• required?: boolean - Required field
• disabled?: boolean - Disabled state

Development

Prerequisites

• Node.js 18+
• Yarn

Setup

git clone https://github.com/yourusername/react-gridforms.git
cd react-gridforms
yarn install

Available Scripts

• yarn dev - Start development server
• yarn build - Build for production
• yarn build:lib - Build library for distribution
• yarn lint - Run ESLint
• yarn preview - Preview production build

Project Structure

src/
├── components/          # React components
│   ├── inputs/         # Input components
│   └── index.ts        # Component exports
├── theme/              # Theme configuration
├── index.ts            # Main library exports
└── lib.ts              # Library build entry point

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

For support, please open an issue on GitHub or contact the maintainers.