Stirling 2.0 (#3928)

# Description of Changes  --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
2025-07-16 17:53:50 +01:00
parent 584e2ecee7
commit 922bbc9076
66 changed files with 8728 additions and 2519 deletions
@@ -0,0 +1,120 @@
+import React, { createContext, useContext, useMemo, useRef } from 'react';
+import { Paper, Text, Stack, Box } from '@mantine/core';
+
+interface ToolStepContextType {
+  visibleStepCount: number;
+  getStepNumber: () => number;
+}
+
+const ToolStepContext = createContext<ToolStepContextType | null>(null);
+
+export interface ToolStepProps {
+  title: string;
+  isVisible?: boolean;
+  isCollapsed?: boolean;
+  isCompleted?: boolean;
+  onCollapsedClick?: () => void;
+  children?: React.ReactNode;
+  completedMessage?: string;
+  helpText?: string;
+  showNumber?: boolean;
+}
+
+const ToolStep = ({
+  title,
+  isVisible = true,
+  isCollapsed = false,
+  isCompleted = false,
+  onCollapsedClick,
+  children,
+  completedMessage,
+  helpText,
+  showNumber
+}: ToolStepProps) => {
+  if (!isVisible) return null;
+
+  // Auto-detect if we should show numbers based on sibling count
+  const shouldShowNumber = useMemo(() => {
+    if (showNumber !== undefined) return showNumber;
+    const parent = useContext(ToolStepContext);
+    return parent ? parent.visibleStepCount >= 3 : false;
+  }, [showNumber]);
+
+  const stepNumber = useContext(ToolStepContext)?.getStepNumber?.() || 1;
+
+  return (
+    <Paper
+      p="md"
+      withBorder
+      style={{
+        cursor: isCollapsed && onCollapsedClick ? 'pointer' : 'default',
+        opacity: isCollapsed ? 0.8 : 1,
+        transition: 'opacity 0.2s ease'
+      }}
+      onClick={isCollapsed && onCollapsedClick ? onCollapsedClick : undefined}
+    >
+      <Text fw={500} size="lg" mb="sm">
+        {shouldShowNumber ? `${stepNumber}. ` : ''}{title}
+      </Text>
+
+      {isCollapsed ? (
+        <Box>
+          {isCompleted && completedMessage && (
+            <Text size="sm" c="green">
+              ✓ {completedMessage}
+              {onCollapsedClick && (
+                <Text span c="dimmed" size="xs" ml="sm">
+                  (click to change)
+                </Text>
+              )}
+            </Text>
+          )}
+        </Box>
+      ) : (
+        <Stack gap="md">
+          {helpText && (
+            <Text size="sm" c="dimmed">
+              {helpText}
+            </Text>
+          )}
+          {children}
+        </Stack>
+      )}
+    </Paper>
+  );
+}
+
+export interface ToolStepContainerProps {
+  children: React.ReactNode;
+}
+
+export const ToolStepContainer = ({ children }: ToolStepContainerProps) => {
+  const stepCounterRef = useRef(0);
+
+  // Count visible ToolStep children
+  const visibleStepCount = useMemo(() => {
+    let count = 0;
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child) && child.type === ToolStep) {
+        const isVisible = child.props.isVisible !== false;
+        if (isVisible) count++;
+      }
+    });
+    return count;
+  }, [children]);
+
+  const contextValue = useMemo(() => ({
+    visibleStepCount,
+    getStepNumber: () => ++stepCounterRef.current
+  }), [visibleStepCount]);
+
+  stepCounterRef.current = 0;
+
+  return (
+    <ToolStepContext.Provider value={contextValue}>
+      {children}
+    </ToolStepContext.Provider>
+  );
+}
+
+export default ToolStep;