@zomako/elearning-components 2.0.5 → 2.0.7

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';