@zomako/elearning-components 2.0.5 → 2.0.6

package/src/App.jsx

@@ -1,9 +1,16 @@
 import React from 'react';
-import { Accordion, FlashcardDeck } from './index';
+import {
+  Accordion,
+  FlashcardDeck,
+  InteractiveTimeline,
+  MatchingActivity,
+  SortingActivity,
+  DragAndDropActivity,
+} from './index';
 
 const accordionItems = [
   { id: 'getting-started', title: 'Getting started', content: 'Install the package and import the components you need.' },
-  { id: 'components', title: 'Components', content: 'FlashcardDeck and Accordion are available. See each component README for usage.' },
+  { id: 'components', title: 'Components', content: 'Accordion, FlashcardDeck, InteractiveTimeline, MatchingActivity, SortingActivity, and DragAndDropActivity are available.' },
   { id: 'support', title: 'Support', content: 'Check the repository for documentation and issues.' },
 ];
 
@@ -12,18 +19,91 @@ const sampleCards = [
   { front: 'Front 2', back: 'Back 2' },
 ];
 
+const timelineEvents = [
+  { id: '1', year: '2020', title: 'Project kickoff', content: <p>The project started with a small team and a clear roadmap.</p> },
+  { id: '2', year: '2021', title: 'First release', content: <p>We shipped the first public version and gathered feedback.</p> },
+  { id: '3', year: '2022', title: 'Scale and grow', content: <p>Focus shifted to performance and scaling for enterprise.</p> },
+];
+
+const matchingItems = [
+  { id: 'a', content: 'Paris', matchId: 'capital-france' },
+  { id: 'b', content: 'Berlin', matchId: 'capital-germany' },
+  { id: 'c', content: 'Madrid', matchId: 'capital-spain' },
+];
+
+const matchingTargets = [
+  { id: 'capital-france', content: 'France' },
+  { id: 'capital-germany', content: 'Germany' },
+  { id: 'capital-spain', content: 'Spain' },
+];
+
+const sortableItems = [
+  { id: '1', content: 'First step: Plan the project' },
+  { id: '2', content: 'Second step: Build the prototype' },
+  { id: '3', content: 'Third step: Test and iterate' },
+  { id: '4', content: 'Fourth step: Launch' },
+];
+
+const correctOrder = ['1', '2', '3', '4'];
+
+const dragDropItems = [
+  { id: 'paris', content: 'Paris' },
+  { id: 'berlin', content: 'Berlin' },
+  { id: 'madrid', content: 'Madrid' },
+];
+
+const dragDropTargets = [
+  { id: 'target-fr', accepts: ['paris'], label: 'Capital of France' },
+  { id: 'target-de', accepts: ['berlin'], label: 'Capital of Germany' },
+  { id: 'target-es', accepts: ['madrid'], label: 'Capital of Spain' },
+];
+
 export default function App() {
   return (
-    <div style={{ padding: '2rem', maxWidth: 640, margin: '0 auto' }}>
+    <div style={{ padding: '2rem', maxWidth: 800, margin: '0 auto' }}>
       <h1>E-learning Components</h1>
-      <section style={{ marginBottom: '2rem' }}>
+
+      <section style={{ marginBottom: '2.5rem' }}>
         <h2>Accordion</h2>
         <Accordion items={accordionItems} />
       </section>
-      <section>
+
+      <section style={{ marginBottom: '2.5rem' }}>
         <h2>FlashcardDeck</h2>
         <FlashcardDeck cards={sampleCards} />
       </section>
+
+      <section style={{ marginBottom: '2.5rem' }}>
+        <h2>InteractiveTimeline</h2>
+        <InteractiveTimeline events={timelineEvents} />
+      </section>
+
+      <section style={{ marginBottom: '2.5rem' }}>
+        <h2>MatchingActivity</h2>
+        <MatchingActivity
+          items={matchingItems}
+          targets={matchingTargets}
+          onComplete={(result) => console.log('Matching result:', result)}
+        />
+      </section>
+
+      <section style={{ marginBottom: '2.5rem' }}>
+        <h2>SortingActivity</h2>
+        <SortingActivity
+          items={sortableItems}
+          correctOrder={correctOrder}
+          onComplete={(result) => console.log('Sorting result:', result)}
+        />
+      </section>
+
+      <section>
+        <h2>DragAndDropActivity</h2>
+        <DragAndDropActivity
+          items={dragDropItems}
+          targets={dragDropTargets}
+          onComplete={(result) => console.log('Drag and drop result:', result)}
+        />
+      </section>
     </div>
   );
 }

package/src/index.ts

@@ -1,8 +1,25 @@
 // src/index.ts
 export { default as FlashcardDeck } from './components/FlashcardDeck';
-export { default as Accordion, type AccordionProps, type AccordionItem } from './components/Accordion';
+export { default as Accordion, type AccordionProps, type AccordionItem } from '../Accordion';
 export {
   default as InteractiveTimeline,
   type TimelineEvent,
   type InteractiveTimelineProps,
-} from './components/InteractiveTimeline';
+} from './components/InteractiveTimeline';
+export {
+  default as MatchingActivity,
+  type MatchItem,
+  type MatchTarget,
+  type MatchingActivityProps,
+} from '../MatchingActivity';
+export {
+  default as SortingActivity,
+  type SortableItem,
+  type SortingActivityProps,
+} from '../SortingActivity';
+export {
+  default as DragAndDropActivity,
+  type DraggableItem,
+  type DropTarget,
+  type DragAndDropProps,
+} from '../DragAndDropActivity';

package/src/components/Accordion/README.md

@@ -1,164 +0,0 @@
-# Accordion Component
-
-A fully accessible React accordion using **pure CSS** for animations and CSS Modules for styling. It renders a list of collapsible items with smooth expand/collapse and supports either single or multiple open panels. No Framer Motion or other animation library is required.
-
-## Purpose
-
-The `Accordion` component is designed for e-learning and content-heavy UIs where you need to reveal content on demand without leaving the page. Use it for FAQs, course modules, step-by-step instructions, or any list of titled sections with collapsible bodies.
-
-## Features
-
-- **Pure CSS expand/collapse** – Smooth animations without Framer Motion; consistent with a CSS-first approach and smaller bundle size
-- **Single or multiple open panels** – Controlled by the `allowMultiple` prop
-- **Id-based API** – Items use required `id`; initial open state is set via `defaultOpenId` (string or string[])
-- **Keyboard accessible** – Enter/Space to toggle, Arrow keys to move focus, Home/End for first/last
-- **ARIA-compliant** – Correct `aria-expanded`, `aria-controls`, `aria-labelledby`, and `aria-hidden` for screen readers
-- **Clean, modern styling** – CSS Modules with a clear header/content distinction
-- **TypeScript** – Exported `AccordionProps` and `AccordionItem` interfaces
-
-## Installation
-
-### Prerequisites
-
-- React 16.8+ (hooks)
-- Node.js and npm (or yarn/pnpm)
-
-### Dependencies
-
-```bash
-npm install react react-dom
-```
-
-No animation library is required.
-
-## Props
-
-The component accepts props as defined in the `AccordionProps` interface.
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `items` | `AccordionItem[]` | Yes | — | List of accordion items. Each must have `id`, `title`, and `content`. |
-| `allowMultiple` | `boolean` | No | `false` | If `true`, multiple panels can be open at once. If `false`, opening one closes the others. |
-| `defaultOpenId` | `string \| string[]` | No | — | Id(s) of item(s) to open initially. Single string or array of strings. |
-
-### AccordionItem
-
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `id` | `string` | Yes | Unique id for the item (used for state and as React `key`). |
-| `title` | `string` | Yes | Label for the accordion header. |
-| `content` | `React.ReactNode` | Yes | Content shown when the panel is expanded. |
-
-### TypeScript interfaces
-
-```typescript
-import Accordion, { AccordionProps, AccordionItem } from './Accordion';
-
-interface AccordionItem {
-  id: string;
-  title: string;
-  content: React.ReactNode;
-}
-
-interface AccordionProps {
-  items: AccordionItem[];
-  allowMultiple?: boolean;
-  defaultOpenId?: string | string[];
-}
-```
-
-## Usage
-
-### Basic example (single open panel)
-
-Only one panel is open at a time. No panel is open initially.
-
-```tsx
-import Accordion, { AccordionItem } from './components/Accordion';
-
-const items: AccordionItem[] = [
-  {
-    id: 'included',
-    title: 'What is included?',
-    content: 'Access to all lessons, quizzes, and downloadable resources for 12 months.',
-  },
-  {
-    id: 'refund',
-    title: 'Can I get a refund?',
-    content: 'Yes. You can request a full refund within 14 days of purchase if you have not completed more than 2 lessons.',
-  },
-  {
-    id: 'support',
-    title: 'How do I get support?',
-    content: 'Use the Help button in the course dashboard or email support@example.com.',
-  },
-];
-
-function FAQ() {
-  return <Accordion items={items} />;
-}
-```
-
-### Multiple panels open
-
-Allow several panels to be open at once, with specific items open by id:
-
-```tsx
-<Accordion
-  items={items}
-  allowMultiple
-  defaultOpenId={['included', 'support']}
-/>
-```
-
-### One panel open by default (single mode)
-
-Open a single item initially by id:
-
-```tsx
-<Accordion
-  items={items}
-  defaultOpenId="refund"
-/>
-```
-
-### Rich content
-
-`content` can be any `React.ReactNode` (e.g. lists, links, components):
-
-```tsx
-const items: AccordionItem[] = [
-  {
-    id: 'module-1',
-    title: 'Module 1: Introduction',
-    content: (
-      <>
-        <p>Welcome to the course. In this module you will:</p>
-        <ul>
-          <li>Learn the key concepts</li>
-          <li>Complete a short quiz</li>
-        </ul>
-      </>
-    ),
-  },
-];
-```
-
-## Accessibility
-
-- **Keyboard**: Each header is focusable. Enter or Space toggles the panel. Arrow Down/Right moves to the next header, Arrow Up/Left to the previous. Home focuses the first header, End the last.
-- **ARIA**: The root has `role="region"` and `aria-label="Accordion"`. Each trigger has `aria-expanded` and `aria-controls` pointing to its panel. Each panel has `role="region"`, `aria-labelledby` pointing to its header, and `aria-hidden` when collapsed.
-- **Focus**: Focus is not trapped; keyboard users can tab in and out of the accordion and use the arrow keys to move between headers.
-
-## Styling
-
-Styles are in `style.module.css`. Expand/collapse and chevron rotation use CSS transitions (no JavaScript animation library). You can override by targeting the accordion’s container in your own CSS. The design uses a light gray header background and white content area with a clear border between header and content.
-
-## File structure
-
-```
-Accordion/
-  index.tsx       # Component and TypeScript interfaces
-  style.module.css # Component styles (pure CSS animations)
-  README.md       # This file
-```