React Task Component

A flexible and responsive React component for displaying task cards with time tracking and status management capabilities.

Installation

npm install @mpsinc/task-component

Features

• 📊 Task status visualization
• ⏱️ Time tracking and formatting
• 🎨 Customizable color schemes
• 📱 Responsive design
• ✨ Markdown support for task descriptions
• 🔄 Action buttons for task management

Usage

Basic Implementation

import { TaskComponent } from 'react-task-component';
const taskColors = {
backlog: {
background: '#f5f5f5',
font: '#333333'
},
planned: {
background: '#e3f2fd',
font: '#1976d2'
},
closed: {
background: '#e8f5e9',
font: '#2e7d32'
}
};
const task = {
id: 1,
title: "Complete Project Documentation",
description: "Write comprehensive documentation for the project including:\n- Setup instructions\n- API endpoints\n- Usage examples",
estimated_time: 120, // in minutes
anticipated_start_time: "14:00",
anticipated_end_time: "16:00",
remaining_time: 45, // in minutes
status: "planned"
};
function App() {
return (
<TaskComponent
task={task}
taskColors={taskColors}
backgroundColor="#ffffff"
/>
);
}

Props

Task Object Structure

{
id: number;
title: string;
description: string;
estimated_time: number; // in minutes
anticipated_start_time?: string; // format: "HH:mm"
anticipated_end_time?: string; // format: "HH:mm"
remaining_time: number; // in minutes
status: "backlog" | "planned" | "closed";
}

Color Scheme Structure

{
backlog: {
background: string;
font: string;
},
planned: {
background: string;
font: string;
},
closed: {
background: string;
font: string;
}
}

Styling

The component comes with default styling, but you can override it by targeting the following CSS classes:

• .task-card - Main container
• .task-main - Title and controls section
• .task-controls - Action buttons container
• .task-metadata - Task information section
• .task-description - Markdown content area
• .start-button - Start action button
• .complete-button - Complete action button

Time Formatting

• Remaining time is automatically formatted:
  • Less than 1 hour: "45 min"
  • More than 1 hour: "2h 15m"
  • Negative time: "-45 min" or "-2h 15m"

Markdown Support

The description field supports Markdown syntax through react-markdown. Example:

# Heading
- List item 1
- List item 2

**Bold text** and *italic text*

## Subheading
1. Numbered list
2. Another item

> This is a blockquote

[Link example](https://example.com)

Dependencies

• React 16.8.0 or higher
• react-markdown
• prop-types

Development

1. Clone the repository

git clone https://github.com/yourusername/react-task-component.git  

2. Install dependencies

npm install

3. Run the development server

npm start

4. Build the component

npm run build

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

MIT License - see the LICENSE.md file for details

Support

For support, email support@example.com or open an issue in the GitHub repository.

Publishing to NPM

1. Update version in package.json

npm version patch  # for bug fixes
npm version minor  # for new features
npm version major  # for breaking changes

2. Build the component

npm run build

3. Login to npm (if not already logged in)

npm login

4. Publish the package

npm publish --access public

Note: For scoped packages (@mpsinc/task-component), make sure you have the correct permissions and use --access public for the first publication.