@zomako/elearning-components 2.0.4 → 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/components/InteractiveTimeline/InteractiveTimeline.tsx

@@ -0,0 +1,191 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import styles from './style.module.css';
+
+export interface TimelineEvent {
+  id: string;
+  year: string;
+  title: string;
+  content: React.ReactNode;
+}
+
+export interface InteractiveTimelineProps {
+  events: TimelineEvent[];
+  defaultActiveId?: string;
+}
+
+const InteractiveTimeline: React.FC<InteractiveTimelineProps> = ({
+  events,
+  defaultActiveId,
+}) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [activeId, setActiveId] = useState<string | null>(() => {
+    if (defaultActiveId && events.some((e) => e.id === defaultActiveId)) {
+      return defaultActiveId;
+    }
+    return events.length > 0 ? events[0].id : null;
+  });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragState = useRef({ startX: 0, scrollLeft: 0 });
+
+  const activeEvent = events.find((e) => e.id === activeId) ?? events[0];
+  const activeIndex = events.findIndex((e) => e.id === activeId);
+
+  const handleMarkerClick = useCallback(
+    (id: string) => {
+      setActiveId(id);
+    },
+    []
+  );
+
+  const goPrevious = useCallback(() => {
+    if (activeIndex > 0) {
+      setActiveId(events[activeIndex - 1].id);
+    }
+  }, [activeIndex, events]);
+
+  const goNext = useCallback(() => {
+    if (activeIndex < events.length - 1 && activeIndex >= 0) {
+      setActiveId(events[activeIndex + 1].id);
+    }
+  }, [activeIndex, events]);
+
+  const handlePointerDown = useCallback(
+    (e: React.MouseEvent | React.TouchEvent) => {
+      if (!scrollRef.current) return;
+      const target = e.target as HTMLElement;
+      if (target.closest(`.${styles.marker}`)) return;
+      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+      setIsDragging(true);
+      dragState.current = {
+        startX: clientX,
+        scrollLeft: scrollRef.current.scrollLeft,
+      };
+    },
+    []
+  );
+
+  const handlePointerMove = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (!isDragging || !scrollRef.current) return;
+      e.preventDefault();
+      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+      const dx = dragState.current.startX - clientX;
+      scrollRef.current.scrollLeft = dragState.current.scrollLeft + dx;
+    },
+    [isDragging]
+  );
+
+  const handlePointerUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    window.addEventListener('mousemove', handlePointerMove, { passive: false });
+    window.addEventListener('mouseup', handlePointerUp);
+    window.addEventListener('touchmove', handlePointerMove, { passive: false });
+    window.addEventListener('touchend', handlePointerUp);
+    return () => {
+      window.removeEventListener('mousemove', handlePointerMove);
+      window.removeEventListener('mouseup', handlePointerUp);
+      window.removeEventListener('touchmove', handlePointerMove);
+      window.removeEventListener('touchend', handlePointerUp);
+    };
+  }, [isDragging, handlePointerMove, handlePointerUp]);
+
+  useEffect(() => {
+    if (!scrollRef.current || !activeId) return;
+    const marker = scrollRef.current.querySelector(
+      `[data-event-id="${activeId}"]`
+    ) as HTMLElement | null;
+    if (marker) {
+      const container = scrollRef.current;
+      const half = container.clientWidth / 2;
+      const target =
+        marker.offsetLeft - half + marker.offsetWidth / 2;
+      container.scrollTo({
+        left: Math.max(0, target),
+        behavior: 'smooth',
+      });
+    }
+  }, [activeId]);
+
+  if (!events || events.length === 0) {
+    return (
+      <div className={styles.wrapper}>
+        <p className={styles.empty}>No events to display.</p>
+      </div>
+    );
+  }
+
+  const canGoPrevious = activeIndex > 0;
+  const canGoNext = activeIndex >= 0 && activeIndex < events.length - 1;
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.contentPanel}>
+        <div key={activeId} className={styles.contentSlide}>
+          {activeEvent && (
+            <>
+              <span className={styles.contentYear}>{activeEvent.year}</span>
+              <h2 className={styles.contentTitle}>{activeEvent.title}</h2>
+              <div className={styles.contentBody}>{activeEvent.content}</div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className={styles.timelineSection}>
+        <button
+          type="button"
+          className={styles.navButton}
+          onClick={goPrevious}
+          disabled={!canGoPrevious}
+          aria-label="Previous event"
+        >
+          ‹
+        </button>
+
+        <div
+          ref={scrollRef}
+          className={`${styles.track} ${isDragging ? styles.dragging : ''}`}
+          onMouseDown={handlePointerDown}
+          onTouchStart={handlePointerDown}
+          role="list"
+          aria-label="Timeline events"
+        >
+          <div className={styles.trackInner}>
+            {events.map((event) => (
+              <button
+                type="button"
+                key={event.id}
+                data-event-id={event.id}
+                className={`${styles.marker} ${
+                  event.id === activeId ? styles.markerActive : ''
+                }`}
+                onClick={() => handleMarkerClick(event.id)}
+                aria-pressed={event.id === activeId}
+                aria-label={`${event.year}: ${event.title}`}
+              >
+                <span className={styles.markerYear}>{event.year}</span>
+                <span className={styles.markerTitle}>{event.title}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <button
+          type="button"
+          className={styles.navButton}
+          onClick={goNext}
+          disabled={!canGoNext}
+          aria-label="Next event"
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default InteractiveTimeline;

package/src/components/InteractiveTimeline/index.ts

@@ -0,0 +1,5 @@
+export {
+  default,
+  type TimelineEvent,
+  type InteractiveTimelineProps,
+} from './InteractiveTimeline';

package/src/components/InteractiveTimeline/style.module.css

@@ -0,0 +1,211 @@
+/* ---- Wrapper ---- */
+.wrapper {
+  --timeline-accent: #2563eb;
+  --timeline-accent-hover: #1d4ed8;
+  --timeline-bg: #f8fafc;
+  --timeline-line: #e2e8f0;
+  --timeline-text: #1e293b;
+  --timeline-muted: #64748b;
+  --timeline-radius: 12px;
+  --timeline-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  color: var(--timeline-text);
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* ---- Content panel ---- */
+.contentPanel {
+  background: var(--timeline-bg);
+  border-radius: var(--timeline-radius);
+  padding: 1.75rem 2rem;
+  box-shadow: var(--timeline-shadow);
+  min-height: 140px;
+  overflow: hidden;
+}
+
+.contentSlide {
+  animation: contentIn 0.35s ease-out forwards;
+}
+
+@keyframes contentIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.contentYear {
+  display: inline-block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--timeline-accent);
+  margin-bottom: 0.35rem;
+}
+
+.contentTitle {
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 0 0 0.75rem 0;
+  color: var(--timeline-text);
+}
+
+.contentBody {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--timeline-muted);
+}
+
+.contentBody p {
+  margin: 0 0 0.5rem 0;
+}
+
+.contentBody p:last-child {
+  margin-bottom: 0;
+}
+
+/* ---- Timeline section ---- */
+.timelineSection {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.navButton {
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  border: 2px solid var(--timeline-line);
+  background: #fff;
+  color: var(--timeline-text);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
+}
+
+.navButton:hover:not(:disabled) {
+  border-color: var(--timeline-accent);
+  background: var(--timeline-accent);
+  color: #fff;
+}
+
+.navButton:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ---- Track (draggable scroll area) ---- */
+.track {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scrollbar-width: thin;
+  scrollbar-color: var(--timeline-line) transparent;
+  cursor: grab;
+  padding: 0.5rem 0;
+  margin: 0 -0.5rem;
+}
+
+.track.dragging {
+  cursor: grabbing;
+  scroll-behavior: auto;
+}
+
+.track::-webkit-scrollbar {
+  height: 6px;
+}
+
+.track::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.track::-webkit-scrollbar-thumb {
+  background: var(--timeline-line);
+  border-radius: 3px;
+}
+
+.trackInner {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0 0.25rem;
+  min-width: min-content;
+}
+
+/* ---- Event markers ---- */
+.marker {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.75rem 1rem;
+  min-width: 100px;
+  border: 2px solid var(--timeline-line);
+  border-radius: var(--timeline-radius);
+  background: #fff;
+  color: var(--timeline-muted);
+  font: inherit;
+  cursor: pointer;
+  text-align: center;
+  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease,
+    color 0.25s ease, box-shadow 0.25s ease;
+}
+
+.marker:hover {
+  border-color: var(--timeline-accent);
+  color: var(--timeline-accent);
+}
+
+.markerActive {
+  border-color: var(--timeline-accent);
+  background: var(--timeline-accent);
+  color: #fff;
+  transform: scale(1.08);
+  box-shadow: var(--timeline-shadow);
+}
+
+.markerActive:hover {
+  background: var(--timeline-accent-hover);
+  border-color: var(--timeline-accent-hover);
+  color: #fff;
+}
+
+.markerYear {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.markerTitle {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.25;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ---- Empty state ---- */
+.empty {
+  margin: 0;
+  padding: 2rem;
+  text-align: center;
+  color: var(--timeline-muted);
+  font-size: 1rem;
+}

package/src/index.ts

@@ -1,3 +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';
+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';