Mich Pages

A React library for easily generating create, view, update and delete pages using just a few lines of code.

Features

• 🚀 Quick Setup: Generate complete CRUD pages with minimal configuration
• 🎨 Beautiful UI: Pre-styled components with modern design
• 📱 Responsive: Works perfectly on desktop and mobile devices
• 🎯 TypeScript: Full TypeScript support with type definitions
• 🎨 Tailwind CSS: Built with Tailwind CSS for easy customization
• 📝 Rich Text Editor: WYSIWYG editor powered by Quill
• 📁 File Upload: Support for multiple file types and image uploads
• 🔧 Customizable: Highly configurable components and styling

Installation

npm install mich-pages
# or
yarn add mich-pages
# or
pnpm add mich-pages

CSS Import

Import the styles in your main application file:

// Import the complete CSS bundle
import 'mich-pages/style';

Or import the main package which includes styles:

import 'mich-pages';

Quick Start

Basic Input Components

import { Input, SelectInput, FileInput } from 'mich-pages';

function MyForm() {
  return (
    <div>
      <Input
        label="Name"
        placeholder="Enter your name"
        type="text"
        required
        onChange={(value) => console.log(value)}
      />
      
      <SelectInput
        label="Category"
        placeholder="Choose a category"
        options={[
          { label: "Technology", value: "tech" },
          { label: "Design", value: "design" }
        ]}
        onChange={(value) => console.log(value)}
      />
      
      <FileInput
        label="Upload Files"
        accept="image/*,.pdf"
        multiple
        onChange={(files) => console.log(files)}
      />
    </div>
  );
}

Complete Page Components

import { NewCreatePage, NewViewPage, NewSubmitPage } from 'mich-pages';

const pageConfig = {
  title: "User Management",
  description: "Create and manage user accounts",
  categories: [
    { label: "Admin", value: "admin" },
    { label: "User", value: "user" }
  ],
  onSubmit: (data) => {
    console.log('Form submitted:', data);
    // Handle form submission
  },
  onCancel: () => {
    console.log('Form cancelled');
    // Handle cancellation
  },
  fields: [
    {
      type: "text",
      label: "Full Name",
      placeholder: "Enter full name",
      required: true
    },
    {
      type: "email",
      label: "Email Address",
      placeholder: "Enter email address",
      required: true
    },
    {
      type: "select",
      label: "Role",
      options: [
        { label: "Admin", value: "admin" },
        { label: "User", value: "user" }
      ]
    }
  ]
};

function App() {
  return (
    <div>
      {/* Create Page */}
      <NewCreatePage {...pageConfig} />
      
      {/* View Page */}
      <NewViewPage {...pageConfig} />
      
      {/* Submit Page */}
      <NewSubmitPage {...pageConfig} />
    </div>
  );
}

Rich Text Editor

import { PresetQuillEditor } from 'mich-pages';

function MyEditor() {
  return (
    <PresetQuillEditor
      value=""
      onChange={(value) => console.log(value)}
      placeholder="Start writing your content..."
    />
  );
}

Styled Button

import { StyledButton } from 'mich-pages';

function MyButtons() {
  return (
    <div>
      <StyledButton 
        variant="primary" 
        onClick={() => console.log('Primary clicked')}
      >
        Primary Button
      </StyledButton>
      
      <StyledButton 
        variant="secondary" 
        onClick={() => console.log('Secondary clicked')}
      >
        Secondary Button
      </StyledButton>
    </div>
  );
}

Available Components

Input Components

• Input - Text input with validation
• SelectInput - Dropdown select
• SelectInput2 - Alternative select variant
• SelectInput3 - Enhanced select variant
• FileInput - File upload component
• PresetQuillEditor - Rich text editor

Page Components

• NewCreatePage - Complete create form page
• NewViewPage - Display page for viewing records
• NewSubmitPage - Submission page with processing states
• NewPage - Generic page component
• NewPageUi - UI-only page component

Utility Components

• StyledButton - Pre-styled button with variants

TypeScript Support

All components include full TypeScript definitions:

import { InputI, SelectI, PageI } from 'mich-pages';

const inputConfig: InputI = {
  label: "Sample Input",
  placeholder: "Enter text...",
  type: "text",
  required: true,
  onChange: (value: string) => console.log(value),
  value: ""
};

Styling

The package uses Tailwind CSS for styling. You can customize the appearance by:

1. Overriding CSS Variables:

:root {
  --primary: #your-primary-color;
  --gray-3: #your-gray-color;
  --white-color: #your-white-color;
}

2. Using Tailwind Classes: All components accept className props for additional styling.

3. Custom CSS: Import the styles and override specific classes as needed.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📖 Documentation: GitHub Wiki

Changelog

v0.0.19

• Added CSS export support
• Improved TypeScript definitions
• Enhanced component documentation
• Added comprehensive styling system

v0.0.18

• Initial release
• Basic CRUD components
• Input components
• Page components