@sp-days-framework/docusaurus-plugin-interactive-tasks 1.0.0

package/lib/theme/TaskExample/index.js

@@ -0,0 +1,249 @@
+"use strict";
+/**
+ * TaskExample Component
+ * Interactive collapsible task example with optional hint and solution sections
+ * Similar to Task component but:
+ * - Uses "Example N" numbering instead of "Task N"
+ * - Does NOT persist completion state to localStorage
+ * - Animations work but state is not saved
+ * - Not included in task registry (no progress tracking)
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TaskExample;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const DocTaskCounterProvider_1 = require("../DocTaskCounterProvider");
+const icons_1 = require("../../utils/icons");
+const styles_module_css_1 = __importDefault(require("../Task/styles.module.css")); // Reuse Task styles
+function TaskExample({ name, children }) {
+    // Get auto-incremented example number
+    const exampleNumber = (0, DocTaskCounterProvider_1.useTaskExampleNumber)();
+    // Local state only (no persistence)
+    const [isCompleted, setIsCompleted] = (0, react_1.useState)(false);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
+    const [showHint, setShowHint] = (0, react_1.useState)(false);
+    const [showSolution, setShowSolution] = (0, react_1.useState)(false);
+    const [isAnimatingCompletion, setIsAnimatingCompletion] = (0, react_1.useState)(false);
+    const [isRemovingCheckmark, setIsRemovingCheckmark] = (0, react_1.useState)(false);
+    const [isCollapsingHint, setIsCollapsingHint] = (0, react_1.useState)(false);
+    const [isCollapsingSolution, setIsCollapsingSolution] = (0, react_1.useState)(false);
+    const [isSwitchingPanels, setIsSwitchingPanels] = (0, react_1.useState)(false);
+    const [isCollapsingBody, setIsCollapsingBody] = (0, react_1.useState)(false);
+    const [panelSpacerHeight, setPanelSpacerHeight] = (0, react_1.useState)(0);
+    // Refs for measuring panel heights
+    const hintRef = (0, react_1.useRef)(null);
+    const solutionRef = (0, react_1.useRef)(null);
+    // Track previous completion state
+    const prevIsCompleted = (0, react_1.useRef)(isCompleted);
+    // Detect when completion state changes
+    (0, react_1.useEffect)(() => {
+        if (prevIsCompleted.current !== isCompleted) {
+            // When task becomes completed
+            if (isCompleted && !prevIsCompleted.current) {
+                setIsAnimatingCompletion(true);
+                setIsRemovingCheckmark(false);
+                setTimeout(() => {
+                    setIsAnimatingCompletion(false);
+                }, 600);
+            }
+            // When task is uncompleted (undo)
+            if (!isCompleted && prevIsCompleted.current) {
+                setIsRemovingCheckmark(true);
+            }
+            prevIsCompleted.current = isCompleted;
+        }
+    }, [isCompleted]);
+    // Measure panel heights and update spacer
+    (0, react_1.useEffect)(() => {
+        const updateSpacerHeight = () => {
+            if (showHint && hintRef.current) {
+                setPanelSpacerHeight(hintRef.current.offsetHeight);
+            }
+            else if (showSolution && solutionRef.current) {
+                setPanelSpacerHeight(solutionRef.current.offsetHeight);
+            }
+            else {
+                setPanelSpacerHeight(0);
+            }
+        };
+        // Update immediately
+        updateSpacerHeight();
+        // Also update on window resize (for responsive content)
+        window.addEventListener('resize', updateSpacerHeight);
+        return () => window.removeEventListener('resize', updateSpacerHeight);
+    }, [showHint, showSolution]);
+    const toggleExpanded = () => {
+        // When collapsing, start animation then remove from DOM
+        if (isExpanded) {
+            setIsCollapsingBody(true);
+            setShowHint(false);
+            setShowSolution(false);
+            setTimeout(() => {
+                setIsExpanded(false);
+                setIsCollapsingBody(false);
+            }, 300); // Match animation duration
+        }
+        else {
+            // When expanding, add to DOM immediately
+            setIsExpanded(true);
+        }
+    };
+    const toggleCompleted = () => {
+        // Toggle completion state locally (no persistence)
+        setIsCompleted(!isCompleted);
+    };
+    const toggleHint = () => {
+        if (showHint) {
+            // Closing hint
+            setIsCollapsingHint(true);
+            setIsSwitchingPanels(false);
+            setTimeout(() => {
+                setShowHint(false);
+                setIsCollapsingHint(false);
+            }, 300);
+        }
+        else {
+            // Opening hint
+            if (showSolution) {
+                // Switching from solution to hint
+                setIsSwitchingPanels(true);
+                setIsCollapsingSolution(true);
+                setTimeout(() => {
+                    setShowSolution(false);
+                    setIsCollapsingSolution(false);
+                    // Delay before showing hint panel
+                    setTimeout(() => {
+                        setShowHint(true);
+                    }, 25);
+                }, 300);
+            }
+            else {
+                setIsSwitchingPanels(false);
+                setShowHint(true);
+            }
+        }
+    };
+    const toggleSolution = () => {
+        if (showSolution) {
+            // Closing solution
+            setIsCollapsingSolution(true);
+            setIsSwitchingPanels(false);
+            setTimeout(() => {
+                setShowSolution(false);
+                setIsCollapsingSolution(false);
+            }, 300);
+        }
+        else {
+            // Opening solution
+            if (showHint) {
+                // Switching from hint to solution
+                setIsSwitchingPanels(true);
+                setIsCollapsingHint(true);
+                setTimeout(() => {
+                    setShowHint(false);
+                    setIsCollapsingHint(false);
+                    // Delay before showing solution panel
+                    setTimeout(() => {
+                        setShowSolution(true);
+                    }, 25);
+                }, 300);
+            }
+            else {
+                setIsSwitchingPanels(false);
+                setShowSolution(true);
+            }
+        }
+    };
+    // Extract child components
+    let textComponent = null;
+    let hintComponent = null;
+    let solutionComponent = null;
+    react_1.default.Children.forEach(children, (child) => {
+        if (!react_1.default.isValidElement(child))
+            return;
+        const childType = child.type?.displayName || child.type?.name;
+        if (childType === 'Text') {
+            textComponent = child;
+        }
+        else if (childType === 'Hint') {
+            hintComponent = child;
+        }
+        else if (childType === 'Solution') {
+            solutionComponent = child;
+        }
+    });
+    // Build task identifier badge
+    const taskBadge = `Example ${exampleNumber}`;
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(styles_module_css_1.default.taskContainer, isCompleted && styles_module_css_1.default.taskCompleted, isAnimatingCompletion && styles_module_css_1.default.taskCompletedAnimating) },
+        react_1.default.createElement("div", { className: styles_module_css_1.default.taskHeader, onClick: toggleExpanded },
+            react_1.default.createElement("div", { className: styles_module_css_1.default.taskHeaderLeft },
+                react_1.default.createElement("span", { className: styles_module_css_1.default.taskBadge }, taskBadge),
+                react_1.default.createElement("h3", { className: styles_module_css_1.default.taskName },
+                    name,
+                    react_1.default.createElement("span", { className: (0, clsx_1.default)(styles_module_css_1.default.checkmark, isCompleted && !isAnimatingCompletion && !isRemovingCheckmark && styles_module_css_1.default.checkmarkVisible, isAnimatingCompletion && styles_module_css_1.default.checkmarkAnimating, isRemovingCheckmark && styles_module_css_1.default.checkmarkRemoving) }, icons_1.CHECKMARK_CIRCLE_FILL_ICON))),
+            react_1.default.createElement("button", { type: "button", className: styles_module_css_1.default.expandButton, "aria-expanded": isExpanded, "aria-label": isExpanded ? 'Collapse task' : 'Expand task' },
+                react_1.default.createElement("span", { className: (0, clsx_1.default)(styles_module_css_1.default.chevron, !isExpanded && styles_module_css_1.default.chevronCollapsed) }, icons_1.CHEVRON_DOWN_ICON))),
+        (isExpanded || isCollapsingBody) && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: (0, clsx_1.default)(styles_module_css_1.default.taskBody, isCollapsingBody && styles_module_css_1.default.taskBodyCollapsing) }, textComponent),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)(styles_module_css_1.default.taskFooter, isCollapsingBody && styles_module_css_1.default.taskFooterCollapsing) },
+                react_1.default.createElement("div", { className: styles_module_css_1.default.taskActions },
+                    hintComponent && (react_1.default.createElement("button", { type: "button", className: (0, clsx_1.default)(styles_module_css_1.default.taskButton, styles_module_css_1.default.hintButton, showHint && styles_module_css_1.default.active), onClick: (e) => {
+                            e.stopPropagation();
+                            toggleHint();
+                        } }, "Hint")),
+                    solutionComponent && (react_1.default.createElement("button", { type: "button", className: (0, clsx_1.default)(styles_module_css_1.default.taskButton, styles_module_css_1.default.solutionButton, showSolution && styles_module_css_1.default.active), onClick: (e) => {
+                            e.stopPropagation();
+                            toggleSolution();
+                        } }, "Solution"))),
+                react_1.default.createElement("button", { type: "button", className: (0, clsx_1.default)(styles_module_css_1.default.taskButton, styles_module_css_1.default.completeButton, isCompleted && styles_module_css_1.default.completedButton), onClick: (e) => {
+                        e.stopPropagation();
+                        toggleCompleted();
+                    } }, isCompleted ? 'Undo Task' : 'Mark as Done')),
+            (hintComponent || solutionComponent) && (react_1.default.createElement("div", { className: styles_module_css_1.default.panelWrapper, style: {
+                    marginBottom: panelSpacerHeight > 0 ? '1rem' : 0,
+                    transition: 'margin-bottom 0.3s ease-out'
+                } },
+                react_1.default.createElement("div", { className: styles_module_css_1.default.panelSpacer, style: {
+                        height: panelSpacerHeight > 0 ? `${panelSpacerHeight}px` : 0,
+                        transition: 'height 0.3s ease-out'
+                    } }),
+                hintComponent && (react_1.default.createElement("div", { ref: hintRef, className: (0, clsx_1.default)(styles_module_css_1.default.panelContainer, styles_module_css_1.default.panelAbsolute, (showHint || isCollapsingHint) && styles_module_css_1.default.panelVisible, showHint && !isCollapsingHint && !isSwitchingPanels && styles_module_css_1.default.panelContainerExpanding, showHint && !isCollapsingHint && isSwitchingPanels && styles_module_css_1.default.hintPanelContainerExpandingSwitching, isCollapsingHint && !isSwitchingPanels && styles_module_css_1.default.panelContainerCollapsing, isCollapsingHint && isSwitchingPanels && styles_module_css_1.default.hintPanelContainerCollapsingSwitching) }, hintComponent)),
+                solutionComponent && (react_1.default.createElement("div", { ref: solutionRef, className: (0, clsx_1.default)(styles_module_css_1.default.panelContainer, styles_module_css_1.default.panelAbsolute, (showSolution || isCollapsingSolution) && styles_module_css_1.default.panelVisible, showSolution && !isCollapsingSolution && !isSwitchingPanels && styles_module_css_1.default.panelContainerExpanding, showSolution && !isCollapsingSolution && isSwitchingPanels && styles_module_css_1.default.solutionPanelContainerExpandingSwitching, isCollapsingSolution && !isSwitchingPanels && styles_module_css_1.default.panelContainerCollapsing, isCollapsingSolution && isSwitchingPanels && styles_module_css_1.default.solutionPanelContainerCollapsingSwitching) }, solutionComponent))))))));
+}
+//# sourceMappingURL=index.js.map

package/lib/theme/TaskExample/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/TaskExample/index.tsx"],"names":[],"mappings":"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"}

package/lib/theme/TaskPlaceholder/README.md

@@ -0,0 +1,119 @@
+# TaskPlaceholder Component
+
+A standalone task component designed for use outside of doc pages, such as landing pages, home pages, or any standalone MDX pages where you want to showcase the task UI.
+
+## Overview
+
+`TaskPlaceholder` is a fully-featured task component that looks and behaves identically to the regular `Task` component, but without requiring:
+- TaskProvider context
+- DocTaskCounterProvider context  
+- Being placed inside a docs directory
+- Task registry or progress tracking
+
+This makes it perfect for demonstrations, examples, or creating task-like interfaces on any page in your Docusaurus site.
+
+## Features
+
+- **Standalone** - Works anywhere, no provider context needed  
+- **Auto-collapse support** - Respects global auto-collapse toggle  
+- **Custom badges** - Default "Demo N" numbering or custom badge text  
+- **Full animations** - All the same animations as Task/TaskExample  
+- **MDX support** - Use markdown content with Text, Hint, and Solution  
+- **Reuses styling** - Identical look and feel to Task components  
+- **Ephemeral state** - Completion state resets on page refresh  
+
+## Usage
+
+### Basic Example
+
+```tsx
+import TaskPlaceholder from '@theme/TaskPlaceholder';
+import Text from '@theme/Task/Text';
+import Hint from '@theme/Task/Hint';
+import Solution from '@theme/Task/Solution';
+
+<TaskPlaceholder title="Example Task">
+  <Text>
+    This is the main task description. You can use **markdown** formatting here.
+    
+    - Create a new file
+    - Add some code
+    - Test your changes
+  </Text>
+  <Hint>
+    Try looking at the documentation for help!
+  </Hint>
+  <Solution>
+    Here's the complete solution with code examples:
+    
+    ```javascript
+    console.log('Hello, World!');
+    ```
+  </Solution>
+</TaskPlaceholder>
+```
+
+### With Custom Badge
+
+```tsx
+<TaskPlaceholder title="Custom Badge Example" badge="Step 1">
+  <Text>
+    This task shows a custom badge instead of auto-numbered "Demo N".
+  </Text>
+</TaskPlaceholder>
+```
+
+### Minimal Example (No Hint/Solution)
+
+```tsx
+<TaskPlaceholder title="Simple Task">
+  <Text>
+    Just the basics - no hint or solution needed.
+  </Text>
+</TaskPlaceholder>
+```
+
+## Props API
+
+### TaskPlaceholder
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `title` | `string` | Yes | - | The title/name of the task displayed in the header |
+| `badge` | `string` | No | `"Demo N"` | Custom badge text. If omitted, auto-increments as "Demo 1", "Demo 2", etc. |
+| `children` | `ReactNode` | No | - | Task content including Text, Hint, and Solution components |
+
+### Child Components
+
+TaskPlaceholder supports the same child components as regular Task:
+
+- **`<Text>`** - Main task description/instructions
+- **`<Hint>`** - Optional hint panel (collapsible)
+- **`<Solution>`** - Optional solution panel (collapsible)
+
+These are the same components used by `@theme/Task` - see their documentation for details.
+
+## Behavior
+
+### Auto-Collapse Integration
+
+TaskPlaceholder respects the global auto-collapse setting:
+- Reads from `localStorage` key `autoCollapseCompletedTasks`
+- Listens to changes from the navbar toggle
+- Works across tabs via storage events
+- When enabled, completed tasks automatically collapse after animation
+
+### Completion State
+
+Unlike regular `Task` components:
+- Completion state is **ephemeral** (not saved to localStorage)
+- State resets on page refresh/navigation
+- No impact on task progression tracking
+- Perfect for demonstrations and examples
+
+### Auto-Numbering
+
+The demo counter increments globally across all TaskPlaceholder instances on a page:
+- First instance: "Demo 1"
+- Second instance: "Demo 2"
+- And so on...

package/lib/theme/TaskPlaceholder/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * TaskPlaceholder Component
+ * A standalone task component for use outside of doc pages (e.g., landing pages, standalone pages)
+ *
+ * Key differences from Task/TaskExample:
+ * - No dependency on TaskProvider or DocTaskCounterProvider
+ * - Can be used anywhere (not just in docs)
+ * - Custom badge text with auto-increment fallback
+ * - Respects global auto-collapse setting from localStorage
+ * - Ephemeral completion state (not persisted)
+ * - Supports MDX content with Hint and Solution components
+ */
+import { type ReactNode, type ReactElement } from 'react';
+export interface TaskPlaceholderProps {
+    /** The title/name of the task */
+    title: string;
+    /** Optional custom badge text. If not provided, auto-increments as "Demo 1", "Demo 2", etc. */
+    badge?: string;
+    /** Task content including Text, Hint, and Solution components */
+    children?: ReactNode;
+}
+export default function TaskPlaceholder({ title, badge, children }: TaskPlaceholderProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/TaskPlaceholder/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/TaskPlaceholder/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAc,EAAE,KAAK,SAAS,EAAY,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAC;AAM9F,MAAM,WAAW,oBAAoB;IACnC,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAKD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,oBAAoB,GAAG,YAAY,CAsWtG"}