@zomako/elearning-components 2.0.6 → 2.0.8

package/src/components/ResponsiveWrapper/index.tsx

@@ -0,0 +1,84 @@
+import React, { useRef, useState, useEffect } from 'react';
+import styles from './style.module.css';
+
+export interface ResponsiveWrapperProps {
+  children: React.ReactNode;
+  /** Optional max-width for the container (default: "100%") */
+  maxWidth?: string;
+  /** Optional padding (default: "1rem") */
+  padding?: string;
+  /** Optional gap between grid rows (default: "1rem") */
+  gap?: string;
+}
+
+const MOBILE_BREAKPOINT_PX = 600;
+
+/**
+ * ResponsiveWrapper – A responsive layout container using CSS Grid with three rows
+ * (header, body, footer). The body section is scrollable when content exceeds the
+ * viewport. Uses ResizeObserver for dimension-based styling and 100dvh for
+ * mobile viewport handling.
+ */
+const ResponsiveWrapper: React.FC<ResponsiveWrapperProps> = ({
+  children,
+  maxWidth = '100%',
+  padding = '1rem',
+  gap = '1rem',
+}) => {
+  const containerRef = useRef<HTMLSectionElement>(null);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    // ResizeObserver tracks the container's width so we can apply mobile vs desktop
+    // styles based on actual rendered size (e.g. in responsive design mode or
+    // when the container is constrained by a parent), not just the viewport.
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        setIsMobile(width < MOBILE_BREAKPOINT_PX);
+      }
+    });
+
+    resizeObserver.observe(el);
+
+    // Set initial value in case ResizeObserver fires after first paint
+    setIsMobile(el.getBoundingClientRect().width < MOBILE_BREAKPOINT_PX);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <section
+      ref={containerRef}
+      className={`${styles.wrapper} ${isMobile ? styles.mobile : styles.desktop}`}
+      style={{
+        maxWidth,
+        padding,
+        gap,
+      }}
+      role="region"
+      aria-label="Content wrapper"
+    >
+      <header className={styles.header} aria-hidden>
+        {/* Optional header slot; empty by default. Structure supports future extension. */}
+      </header>
+      <main
+        className={styles.body}
+        tabIndex={0}
+        aria-label="Main content"
+      >
+        {children}
+      </main>
+      <footer className={styles.footer} aria-hidden>
+        {/* Optional footer slot; empty by default. */}
+      </footer>
+    </section>
+  );
+};
+
+export default ResponsiveWrapper;

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

@@ -0,0 +1,73 @@
+/* Three-row grid: header (auto), body (1fr), footer (auto). Body scrolls when content overflows. */
+.wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 0;
+  /* 100dvh: dynamic viewport height – accounts for mobile browser UI (address bar) showing/hiding */
+  height: 100dvh;
+  max-height: 100dvh;
+  box-sizing: border-box;
+  font-size: clamp(14px, 2.5vw, 18px);
+  line-height: 1.5;
+  color: #1a1a1a;
+  background-color: #ffffff;
+}
+
+.header,
+.footer {
+  min-height: 0;
+  flex-shrink: 0;
+}
+
+/* Scrollable body: takes remaining space and scrolls when content exceeds viewport */
+.body {
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: clamp(0.5rem, 2vw, 1.5rem);
+  -webkit-overflow-scrolling: touch;
+}
+
+.body:focus {
+  outline: none;
+}
+
+.body:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+/* Ensure readable text and sufficient touch targets on mobile */
+.mobile .body {
+  padding: clamp(0.5rem, 2vw, 1.5rem);
+  font-size: clamp(14px, 2.5vw, 16px);
+}
+
+/* Minimum 44px touch targets for mobile accessibility (WCAG 2.5.5) */
+.mobile .body button,
+.mobile .body a[href],
+.mobile .body [role="button"] {
+  min-height: 44px;
+  min-width: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Desktop: more spacing and typography */
+.desktop .body {
+  padding: clamp(0.5rem, 2vw, 1.5rem);
+}
+
+/* Media query fallback for environments where ResizeObserver might not drive class */
+@media (max-width: 599px) {
+  .wrapper {
+    font-size: clamp(14px, 2.5vw, 16px);
+  }
+}
+
+@media (min-width: 600px) {
+  .wrapper {
+    font-size: clamp(14px, 2.5vw, 18px);
+  }
+}

package/src/index.ts

@@ -22,4 +22,15 @@ export {
   type DraggableItem,
   type DropTarget,
   type DragAndDropProps,
-} from '../DragAndDropActivity';
+} from '../DragAndDropActivity';
+export {
+  default as BranchingScenario,
+  type BranchingScenarioProps,
+  type ScenarioNode,
+  type Choice,
+  type Outcome,
+} from '../BranchingScenario';
+export {
+  default as ResponsiveWrapper,
+  type ResponsiveWrapperProps,
+} from './components/ResponsiveWrapper';