npm package: @httpf/http-project-status
Description: A React component library for displaying project status information from markdown files
Author: HTTP Foundation
Latest version: 1.0.2

# 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

```bash
npm install project-status
```

## Peer Dependencies

This package requires React 18+ or 19+:

```bash
npm install react react-dom
```

## Usage

### Basic Example

```tsx
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

```tsx
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

```tsx
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

```typescript
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:

```markdown
# 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

```bash
# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build:lib

# Build app
npm run build
```

## License

MIT