Matrix Component Library Documentation

🚀 Matrix Component Library

A modern and customizable component library built with React, TypeScript, and Framer Motion for smooth animations. This library includes components such as Accordions, Buttons, Alerts, DropDowns, Tooltips, and more, designed to provide a sleek and consistent UI for your applications.

📦 Installation

To install the library, run:

npm install matrix-component-library

🛠️ Usage

Here's a quick guide on how to use the components in your React project.

1. Accordion

Single Accordion A collapsible component that displays content when the user clicks on the header.

import { SingleAccordion } from 'matrix-component-library';

<SingleAccordion
    items={[
        { header: 'Section 1', content: <p>This is the content for section 1.</p> },
        { header: 'Section 2', content: <p>This is the content for section 2.</p> },
        { header: 'Section 3', content: <p>This is the content for section 3.</p> },
    ]}
    theme="primary"
    size="medium"
/>

Nested Accordion Create nested accordions for more complex structures.

import { NestedAccordion } from 'matrix-component-library';

<NestedAccordion
    items={[
        {
            header: 'Main Section 1',
            content: (
                <NestedAccordion
                    items={[
                        { header: 'Sub Section 1', content: <p>Nested content 1</p> },
                        { header: 'Sub Section 2', content: <p>Nested content 2</p> },
                    ]}
                />
            ),
        },
        { header: 'Main Section 2', content: <p>This is the content for section 2.</p> },
    ]}
    theme="secondary"
    size="small"
    allowMultiple={true}
/>

2. Button

A customizable button with animations.

import { Button } from 'matrix-component-library';

<Button
    label="Click Me"
    theme="primary"
    size="large"
    onClick={() => alert('Button clicked!')}
/>

3. Alert

Display messages such as warnings, info, errors, or success alerts.

import { Alert } from 'matrix-component-library';

<Alert mode="Success" message="This is a success alert!" timeout={3000} />

4. DropDown

A versatile dropdown component with search and multi-select functionality.

import { DropDown } from 'matrix-component-library';

<DropDown
    options={['Option 1', 'Option 2', 'Option 3']}
    placeholder="Select an option"
    multiple={true}
    onSelect={(value) => console.log('Selected:', value)}
    theme="secondary"
    size="medium"
/>

5. Tooltip

A simple tooltip component to display helpful information when hovering over an element.

import { ToolTip } from 'matrix-component-library';

<ToolTip content="This is a tooltip" position="top" alwaysVisible={true}>
    <button>Hover over me</button>
</ToolTip>

6. FileUploader

An interactive file uploader with drag-and-drop support.

import { FileUploader } from 'matrix-component-library';

<FileUploader submitButtonText="Upload Files" supportedTypes={['jpg', 'png']} />

7. ProgressBar

A visual representation of a task's progress.

import { ProgressBar } from 'matrix-component-library';

<ProgressBar progress={60} striped={true} color="green" />

8. Rating

A rating component using stars or hearts.

import { Rating } from 'matrix-component-library';

<Rating icon="star" maxrating={5} readonly={false} />

9. SkeletonScreen

A dynamic skeleton screen for loading effects.

import { SkeletonScreen } from 'matrix-component-library';

<SkeletonScreen letters="Loading..." dropSpeed={100} color="green" />

10. TextInput

A text input field with validation styles.

import { TextInput } from 'matrix-component-library';

<TextInput
    placeholder="Enter your name"
    disabled={false}
    errorHandler={(value) => value.length < 3}
    changeHandler={(value) => console.log('Changed:', value)}
/>

11. Timeline

Display events in a vertical or horizontal timeline.

import { Timeline } from 'matrix-component-library';

<Timeline
    orientation="vertical"
    color="green"
    events={[
        { year: 2020, title: 'Event 1', description: 'Description of event 1' },
        { year: 2021, title: 'Event 2', description: 'Description of event 2' },
    ]}
/>

📄 Props

For detailed information about the props of each component, please refer to the API Documentation.

🛠️ Customization

Themes

• primary: Dark background with green accents.
• secondary: Green background with dark accents.

Sizes

• small: Compact design.
• medium: Balanced design (default).
• large: Spacious design for better readability.

📝 License

This project is licensed under the MIT License. See the [LICENSE] file for details.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.