@zomako/elearning-components 2.0.3 → 2.0.5

package/src/components/Accordion/README.md

@@ -1,6 +1,6 @@
 # Accordion Component
 
-A fully accessible, animated React accordion built with Motion and CSS Modules. It renders a list of collapsible items with smooth expand/collapse animations and supports either single or multiple open panels.
+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
 
@@ -8,12 +8,13 @@ The `Accordion` component is designed for e-learning and content-heavy UIs where
 
 ## Features
 
-- **Animated expand/collapse** using Framer Motion and `AnimatePresence`
-- **Single or multiple open panels** controlled by the `allowMultiple` prop
-- **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** via CSS Modules with a clear header/content distinction
-- **TypeScript** with exported `AccordionProps` and `AccordionItem` interfaces
+- **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
 
@@ -25,36 +26,26 @@ The `Accordion` component is designed for e-learning and content-heavy UIs where
 ### Dependencies
 
 ```bash
-npm install react react-dom motion
+npm install react react-dom
 ```
 
-Or with yarn:
-
-```bash
-yarn add react react-dom motion
-```
-
-Or with pnpm:
-
-```bash
-pnpm add react react-dom motion
-```
+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 has `title` and `content`. |
+| `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. |
-| `defaultExpandedIndex` | `number` | No | — | When `allowMultiple` is `false`, the index of the initially open item. Omit or use `-1` for none. |
-| `defaultExpandedIndexes` | `number[]` | No | — | When `allowMultiple` is `true`, the indices of initially open items. |
-| `className` | `string` | No | — | Optional class name applied to the root accordion element. |
+| `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` | No | Optional unique id for the item (used as React `key` when provided). |
+| `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. |
 
@@ -63,20 +54,16 @@ pnpm add react react-dom motion
 ```typescript
 import Accordion, { AccordionProps, AccordionItem } from './Accordion';
 
-// AccordionItem: each item in the list
 interface AccordionItem {
-  id?: string;
+  id: string;
   title: string;
   content: React.ReactNode;
 }
 
-// AccordionProps: component props
 interface AccordionProps {
   items: AccordionItem[];
   allowMultiple?: boolean;
-  defaultExpandedIndex?: number;
-  defaultExpandedIndexes?: number[];
-  className?: string;
+  defaultOpenId?: string | string[];
 }
 ```
 
@@ -91,14 +78,17 @@ 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.',
   },
@@ -111,35 +101,27 @@ function FAQ() {
 
 ### Multiple panels open
 
-Allow several panels to be open at once, with the first and third open by default:
+Allow several panels to be open at once, with specific items open by id:
 
 ```tsx
 <Accordion
   items={items}
   allowMultiple
-  defaultExpandedIndexes={[0, 2]}
+  defaultOpenId={['included', 'support']}
 />
 ```
 
 ### One panel open by default (single mode)
 
-Open only the second item initially:
+Open a single item initially by id:
 
 ```tsx
 <Accordion
   items={items}
-  defaultExpandedIndex={1}
+  defaultOpenId="refund"
 />
 ```
 
-### Custom root class
-
-Pass a `className` to style or position the accordion:
-
-```tsx
-<Accordion items={items} className="my-accordion" />
-```
-
 ### Rich content
 
 `content` can be any `React.ReactNode` (e.g. lists, links, components):
@@ -147,6 +129,7 @@ Pass a `className` to style or position the accordion:
 ```tsx
 const items: AccordionItem[] = [
   {
+    id: 'module-1',
     title: 'Module 1: Introduction',
     content: (
       <>
@@ -169,13 +152,13 @@ const items: AccordionItem[] = [
 
 ## Styling
 
-Styles are in `style.module.css`. You can override by passing `className` or 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.
+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
+  style.module.css # Component styles (pure CSS animations)
   README.md       # This file
 ```

package/src/components/Accordion/index.tsx

@@ -1,73 +1,41 @@
 import React, { useState, useCallback, useId } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
 import styles from './style.module.css';
 
-/**
- * A single accordion item with a title and collapsible content.
- */
 export interface AccordionItem {
-  /** Optional unique id. If omitted, index is used. */
-  id?: string;
-  /** Header label (always visible). */
+  id: string;
   title: string;
-  /** Content shown when the item is expanded. */
   content: React.ReactNode;
 }
 
-/**
- * Props for the Accordion component.
- */
 export interface AccordionProps {
-  /** List of accordion items (title + content). */
   items: AccordionItem[];
-  /** If true, multiple items can be open at once. Default: false. */
   allowMultiple?: boolean;
-  /** When allowMultiple is false, the index of the item to be open initially. Omit or -1 for none. */
-  defaultExpandedIndex?: number;
-  /** When allowMultiple is true, the indices of items to be open initially. */
-  defaultExpandedIndexes?: number[];
-  /** Optional className for the root element. */
-  className?: string;
+  defaultOpenId?: string | string[];
 }
 
-const getInitialOpen = (
-  allowMultiple: boolean,
-  defaultExpandedIndex?: number,
-  defaultExpandedIndexes?: number[],
-  itemCount?: number
-): Set<number> => {
-  if (allowMultiple && defaultExpandedIndexes && defaultExpandedIndexes.length > 0) {
-    return new Set(
-      defaultExpandedIndexes.filter((i) => itemCount != null && i >= 0 && i < itemCount)
-    );
-  }
-  if (!allowMultiple && defaultExpandedIndex != null && defaultExpandedIndex >= 0 && itemCount != null && defaultExpandedIndex < itemCount) {
-    return new Set([defaultExpandedIndex]);
-  }
-  return new Set<number>();
-};
+function getInitialOpenSet(defaultOpenId?: string | string[]): Set<string> {
+  if (defaultOpenId == null) return new Set<string>();
+  if (typeof defaultOpenId === 'string') return new Set([defaultOpenId]);
+  return new Set(defaultOpenId);
+}
 
 const Accordion: React.FC<AccordionProps> = ({
   items,
   allowMultiple = false,
-  defaultExpandedIndex,
-  defaultExpandedIndexes,
-  className,
+  defaultOpenId,
 }) => {
   const baseId = useId();
-  const [openSet, setOpenSet] = useState<Set<number>>(() =>
-    getInitialOpen(allowMultiple, defaultExpandedIndex, defaultExpandedIndexes, items?.length)
-  );
+  const [openSet, setOpenSet] = useState<Set<string>>(() => getInitialOpenSet(defaultOpenId));
 
   const toggle = useCallback(
-    (index: number) => {
+    (id: string) => {
       setOpenSet((prev) => {
         const next = new Set(prev);
-        if (next.has(index)) {
-          next.delete(index);
+        if (next.has(id)) {
+          next.delete(id);
         } else {
           if (!allowMultiple) next.clear();
-          next.add(index);
+          next.add(id);
         }
         return next;
       });
@@ -85,7 +53,7 @@ const Accordion: React.FC<AccordionProps> = ({
         case 'Enter':
         case ' ':
           e.preventDefault();
-          toggle(index);
+          if (items[index]) toggle(items[index].id);
           break;
         case 'ArrowDown':
         case 'ArrowRight':
@@ -109,12 +77,12 @@ const Accordion: React.FC<AccordionProps> = ({
           break;
       }
     },
-    [items.length, toggle]
+    [items, toggle]
   );
 
   if (!items?.length) {
     return (
-      <div className={[styles.accordion, className].filter(Boolean).join(' ')} role="region" aria-label="Accordion">
+      <div className={styles.accordion} role="region" aria-label="Accordion">
         <p className={styles.empty}>No items to display.</p>
       </div>
     );
@@ -122,19 +90,19 @@ const Accordion: React.FC<AccordionProps> = ({
 
   return (
     <div
-      className={[styles.accordion, className].filter(Boolean).join(' ')}
+      className={styles.accordion}
       role="region"
       aria-label="Accordion"
       data-accordion
     >
       {items.map((item, index) => {
-        const isOpen = openSet.has(index);
+        const isOpen = openSet.has(item.id);
         const headerId = `${baseId}-header-${index}`;
         const panelId = `${baseId}-panel-${index}`;
 
         return (
           <div
-            key={item.id ?? index}
+            key={item.id}
             className={styles.item}
             data-open={isOpen}
           >
@@ -146,18 +114,13 @@ const Accordion: React.FC<AccordionProps> = ({
                 aria-expanded={isOpen}
                 aria-controls={panelId}
                 data-accordion-trigger
-                onClick={() => toggle(index)}
+                onClick={() => toggle(item.id)}
                 onKeyDown={(e) => handleKeyDown(e, index)}
               >
                 <span className={styles.title}>{item.title}</span>
-                <motion.span
-                  className={styles.icon}
-                  animate={{ rotate: isOpen ? 180 : 0 }}
-                  transition={{ duration: 0.25 }}
-                  aria-hidden
-                >
+                <span className={styles.icon} aria-hidden>
                   ▼
-                </motion.span>
+                </span>
               </button>
             </h3>
             <div
@@ -166,20 +129,11 @@ const Accordion: React.FC<AccordionProps> = ({
               aria-labelledby={headerId}
               aria-hidden={!isOpen}
               className={styles.panelWrapper}
+              data-open={isOpen}
             >
-              <AnimatePresence initial={false}>
-                {isOpen && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: 'auto', opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    transition={{ duration: 0.25, ease: 'easeInOut' }}
-                    className={styles.panel}
-                  >
-                    <div className={styles.content}>{item.content}</div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
+              <div className={styles.panel}>
+                <div className={styles.content}>{item.content}</div>
+              </div>
             </div>
           </div>
         );

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

@@ -79,7 +79,7 @@
   flex-shrink: 0;
   font-size: 0.65rem;
   color: #64748b;
-  transition: color 0.2s ease;
+  transition: color 0.2s ease, transform 0.25s ease;
 }
 
 .trigger:hover .icon,
@@ -87,11 +87,22 @@
   color: #3b82f6;
 }
 
+.item[data-open="true"] .icon {
+  transform: rotate(180deg);
+}
+
 .panelWrapper {
-  overflow: hidden;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease-in-out;
+}
+
+.panelWrapper[data-open="true"] {
+  grid-template-rows: 1fr;
 }
 
 .panel {
+  min-height: 0;
   overflow: hidden;
 }
 

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