Project Status

A React component library for displaying project status information parsed from markdown files. Features elegant, colorful UI with status badges, deadlines, assignees, and more.

Installation

npm install project-status

Peer Dependencies

This package requires React 18+ or 19+:

npm install react react-dom

Usage

Basic Example

import { ProjectStatus, loadProjectStatus } from "project-status";
import "project-status/dist/index.css"; // Import styles

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const projectData = await loadProjectStatus("/path/to/status.md");
      setData(projectData);
    }
    fetchData();
  }, []);

  return <ProjectStatus data={data} />;
}

Using Individual Components

import { 
  Section, 
  ProjectItemCard, 
  StatusBadge,
  parseMarkdown 
} from "project-status";
import type { ProjectStatusData } from "project-status";

// Parse markdown content
const markdownContent = `# My Projects
## Section 1
### Project 1
- **Státusz:** folyamatban
- **Határidő:** 2025.12.20
- **Felelős:** John Doe
- **Infó:** Working on it
`;

const data: ProjectStatusData = parseMarkdown(markdownContent);

function MyComponent() {
  return (
    <div>
      {data.sections.map((section, index) => (
        <Section 
          key={index} 
          section={section} 
          sectionIndex={index} 
        />
      ))}
    </div>
  );
}

With Custom Styling

import { ProjectStatus } from "project-status";
import "project-status/dist/index.css";

function App() {
  return (
    <ProjectStatus 
      data={data} 
      className="custom-class" 
    />
  );
}

API Reference

Components

ProjectStatus

Main component that displays the entire project status dashboard.

Props:

• data: ProjectStatusData | null - The parsed project status data
• className?: string - Optional CSS class name

Section

Displays a single section with its project items.

Props:

• section: SectionType - Section data
• sectionIndex?: number - Index for color variation
• className?: string - Optional CSS class name

ProjectItemCard

Displays a single project/task item card.

Props:

• item: ProjectItem - Project item data
• index?: number - Index for color variation

StatusBadge

Displays a status badge with color coding.

Props:

• status: ProjectStatusType - Status value ("notstarted" | "inprogress" | "done" | "cancelled" | "delayed")
• className?: string - Optional CSS class name

Utilities

loadProjectStatus(filePath: string): Promise<ProjectStatusData>

Fetches and parses a markdown file from a URL or path.

parseMarkdown(content: string): ProjectStatusData

Parses markdown content string into structured data.

Types

type ProjectStatus = "notstarted" | "inprogress" | "done" | "cancelled" | "delayed";

interface ProjectItem {
  title: string;
  titleHtml?: string;
  status: ProjectStatus;
  deadline: string;
  assignee?: string;
  assignees?: Assignee[];
  info: string;
}

interface Section {
  title: string;
  items: ProjectItem[];
}

interface ProjectStatusData {
  title: string;
  sections: Section[];
}

Markdown Format

The library expects markdown files in the following format:

# Main Title

## Section Title

### Project Name

- **Státusz:** folyamatban
- **Határidő:** 2025.12.20
- **Felelős:** John Doe (Jane Doe)
- **Infó:** Additional information

Status Values

• nem kezdődött el → "notstarted"
• folyamatban → "inprogress"
• befejeződött → "done"
• megszakítva → "cancelled"
• halasztva → "delayed" (auto-detected if deadline passed)

Deadline Format

• Date format: YYYY.MM.DD (e.g., 2025.12.20)
• Continuous: folyamatos (never expires)

Features

• ✅ Parse markdown project status files
• ✅ Automatic delayed status detection (if deadline passed)
• ✅ Colorful status badges and card borders
• ✅ Responsive grid layout
• ✅ TypeScript support
• ✅ Tailwind CSS styling
• ✅ Accessible components

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build:lib

# Build app
npm run build

License

MIT