From 8aec325d130da36f84e3c4f99374958fab1bfea8 Mon Sep 17 00:00:00 2001 From: Jacob Maynard Date: Mon, 19 Jan 2026 21:27:31 -0600 Subject: [PATCH 1/6] remove more mocks --- .../web/src/components/mocks/MockIndex.jsx | 251 +- .../web/src/components/mocks/MockRoutes.jsx | 8 - .../components/mocks/ProjectViewDashboard.jsx | 502 ---- .../components/mocks/ProjectViewEditorial.jsx | 378 --- .../components/mocks/ProjectViewKanban.jsx | 496 ---- .../components/mocks/ProjectWizardMock.jsx | 2235 ----------------- 6 files changed, 1 insertion(+), 3869 deletions(-) delete mode 100644 packages/web/src/components/mocks/ProjectViewDashboard.jsx delete mode 100644 packages/web/src/components/mocks/ProjectViewEditorial.jsx delete mode 100644 packages/web/src/components/mocks/ProjectViewKanban.jsx delete mode 100644 packages/web/src/components/mocks/ProjectWizardMock.jsx diff --git a/packages/web/src/components/mocks/MockIndex.jsx b/packages/web/src/components/mocks/MockIndex.jsx index be0a7f89f..3ea7d4646 100644 --- a/packages/web/src/components/mocks/MockIndex.jsx +++ b/packages/web/src/components/mocks/MockIndex.jsx @@ -22,35 +22,6 @@ export default function MockIndex() {

Featured

- -
-
-

Project Creation Wizard

-

- Multi-step wizard for creating systematic review projects. Material + Apple HIG - blend with blue palette. Includes project basics, team, studies import, and - reviewer assignment steps. -

-
- - Light Theme - - - Material + Apple - - - 4 Steps - -
-
- - New - -
-
- {/* Add Studies Flow Mocks */} -
-

Add Studies Flow

-

- Different approaches for the study import workflow (PDF upload, DOI/PMID lookup, - reference files, Google Drive) with smart deduplication and metadata enrichment. -

-
- -

Add Studies - Wizard Modal

-

- Step-by-step wizard flow: Select sources, import content, review and dedupe, - confirm. Best for guided onboarding and complex imports. -

-
- - Modal - - - 3 Steps - -
- - - -

- Add Studies - Slide-over Panel -

-

- Tabbed slide-over panel with all import sources available at once. Real-time staging - area shows studies as they're added with live dedup feedback. -

-
- - Panel - - - Tabbed - -
- - - -

- Add Studies - Inline Progressive -

-

- Lives directly on the page. Drop zone first with progressive disclosure for other - import options. Good for quick additions without losing context. -

-
- - Inline - - - Progressive - -
- -
-
- - {/* Other ProjectView Style Explorations */} -
-

ProjectView Style Explorations

-
- -

- ProjectView - Editorial/Magazine Style -

-

- Clean, typographic, newspaper-inspired design with serif fonts, strong hierarchy, - and generous whitespace. Inspired by NYT and academic journals. -

- - Light Theme - - - - -

- ProjectView - Dashboard/Analytical Style -

-

- Data-focused design with visual progress indicators, glassmorphism, and animated - elements. Inspired by Linear and modern SaaS dashboards. -

- - Dark Theme - - - - -

- ProjectView - Kanban/Board Style -

-

- Spatial organization with columns for workflow stages, drag-drop potential, and - paper-like textures. Inspired by Notion and Linear. -

- - Warm Light Theme - - -
-
- - {/* Settings Page Mocks */} -
-

Settings Page Mocks

-

- Different approaches for the settings/preferences page layout with various visual styles - and information architecture. -

-
- -
-
-

- Settings - Combined Profile & Settings -

-

- Unified profile and settings in one place. Minimal Swiss style with app's blue - color scheme. Includes profile editing, linked accounts, billing, security, 2FA, - sessions, notifications, and integrations. -

-
- - App Colors - - - Sidebar Nav - - - Profile + Settings - -
-
- - Recommended - -
- - - -

Settings - Bento Box Style

-

- Modern dashboard-inspired bento grid layout with varied card sizes, progress rings, - and gradient accents. Apple-inspired aesthetics. -

-
- - Grid Layout - - - Modern - -
- - - -

- Settings - Minimal Swiss Style -

-

- Clean, typographic, understated elegance with strong hierarchy, generous whitespace, - and sidebar navigation. Dieter Rams-inspired. -

-
- - Sidebar Nav - - - Minimal - -
- -
-
- {/* Other Mocks */}

Other Mocks

-
- -

- ROBINS-I Section B Question Reconcile -

-

- Three-column compare view for a single Section B question with always-visible - comments. -

- -
+
diff --git a/packages/web/src/components/mocks/MockRoutes.jsx b/packages/web/src/components/mocks/MockRoutes.jsx index 5e2be7eae..ea0bdd588 100644 --- a/packages/web/src/components/mocks/MockRoutes.jsx +++ b/packages/web/src/components/mocks/MockRoutes.jsx @@ -5,13 +5,9 @@ import { Route } from '@solidjs/router'; import MockIndex from './MockIndex.jsx'; // Lazy-load all mock page components -const ProjectViewEditorial = lazy(() => import('./ProjectViewEditorial.jsx')); -const ProjectViewDashboard = lazy(() => import('./ProjectViewDashboard.jsx')); -const ProjectViewKanban = lazy(() => import('./ProjectViewKanban.jsx')); const ProjectViewComplete = lazy(() => import('./ProjectViewComplete.jsx')); const DashboardMock = lazy(() => import('./DashboardMock.jsx')); const ReactivePropsDemo = lazy(() => import('./ReactivePropsDemo.jsx')); -const ProjectWizardMock = lazy(() => import('./ProjectWizardMock.jsx')); const ProjectViewV2 = lazy(() => import('./ProjectViewV2.jsx')); /** @@ -22,13 +18,9 @@ export default function MockRoutes() { return ( - - - - ); diff --git a/packages/web/src/components/mocks/ProjectViewDashboard.jsx b/packages/web/src/components/mocks/ProjectViewDashboard.jsx deleted file mode 100644 index ed7a1adfb..000000000 --- a/packages/web/src/components/mocks/ProjectViewDashboard.jsx +++ /dev/null @@ -1,502 +0,0 @@ -/** - * ProjectView Mock - Dashboard/Analytical Style - * - * Design Direction: Data-focused with visual progress indicators and metrics. - * Dark theme with vibrant accent colors, glassmorphism, and animated elements. - * Inspired by Linear, Raycast, and modern SaaS analytics dashboards. - */ - -import { For, Show, createSignal } from 'solid-js'; -import { - FiArrowLeft, - FiPlus, - FiSearch, - FiFilter, - FiGrid, - FiList, - FiMoreHorizontal, - FiExternalLink, - FiUser, - FiClock, -} from 'solid-icons/fi'; - -// Mock data -const mockProject = { - name: 'Mindfulness Interventions for Chronic Pain', - description: 'Systematic review of RCTs examining mindfulness-based interventions', - progress: 67, -}; - -const mockStats = [ - { - label: 'Total Studies', - value: 24, - change: '+3 this week', - color: 'from-violet-500 to-fuchsia-500', - }, - { label: 'Completed', value: 16, percentage: 67, color: 'from-emerald-400 to-cyan-400' }, - { label: 'In Review', value: 5, percentage: 21, color: 'from-amber-400 to-orange-500' }, - { label: 'Pending', value: 3, percentage: 12, color: 'from-slate-400 to-slate-500' }, -]; - -const mockStudies = [ - { - id: '1', - title: 'MBSR for Chronic Low Back Pain: A Randomized Controlled Trial', - journal: 'JAMA', - year: 2016, - status: 'completed', - confidence: 'high', - reviewers: [ - { name: 'Sarah Chen', progress: 100 }, - { name: 'Michael Torres', progress: 100 }, - ], - consensusReached: true, - daysAgo: 2, - }, - { - id: '2', - title: 'MBCT on Body Awareness in Chronic Pain Patients', - journal: 'Front Psychol', - year: 2016, - status: 'reconcile', - confidence: null, - reviewers: [ - { name: 'Emily Watson', progress: 100 }, - { name: 'Sarah Chen', progress: 100 }, - ], - consensusReached: false, - daysAgo: 1, - }, - { - id: '3', - title: 'Mindfulness Meditation for Pediatric Chronic Pain', - journal: 'Children', - year: 2019, - status: 'in-progress', - confidence: null, - reviewers: [ - { name: 'Michael Torres', progress: 65 }, - { name: 'Emily Watson', progress: 30 }, - ], - consensusReached: false, - daysAgo: 0, - }, - { - id: '4', - title: 'Mindfulness for Fibromyalgia: Impact on Pain and QoL', - journal: 'Pain Med', - year: 2020, - status: 'pending', - confidence: null, - reviewers: [], - consensusReached: false, - daysAgo: 5, - }, -]; - -const mockActivity = [ - { - user: 'Sarah Chen', - action: 'completed review', - study: 'MBSR for Chronic Low Back Pain', - time: '2 hours ago', - }, - { - user: 'Michael Torres', - action: 'started review', - study: 'Mindfulness Meditation for Pediatric', - time: '5 hours ago', - }, - { - user: 'Emily Watson', - action: 'requested reconciliation', - study: 'MBCT on Body Awareness', - time: '1 day ago', - }, -]; - -function ProgressRing(props) { - const circumference = 2 * Math.PI * 18; - const offset = circumference - (props.value / 100) * circumference; - - return ( -
- - - - - - - - - - - - {props.value}% - -
- ); -} - -function StatusPill(props) { - const styles = { - completed: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30', - reconcile: 'bg-amber-500/20 text-amber-400 border-amber-500/30', - 'in-progress': 'bg-blue-500/20 text-blue-400 border-blue-500/30', - pending: 'bg-slate-500/20 text-slate-400 border-slate-500/30', - }; - - const labels = { - completed: 'Completed', - reconcile: 'Reconciling', - 'in-progress': 'In Progress', - pending: 'Pending', - }; - - return ( - - - {labels[props.status]} - - ); -} - -function ConfidenceBadge(props) { - const styles = { - high: 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white', - moderate: 'bg-gradient-to-r from-amber-500 to-orange-500 text-white', - low: 'bg-gradient-to-r from-rose-500 to-pink-500 text-white', - 'critically-low': 'bg-gradient-to-r from-red-600 to-rose-600 text-white', - }; - - return ( - - {props.level.replace('-', ' ')} - - ); -} - -function ReviewerProgress(props) { - return ( -
-
- {props.name - .split(' ') - .map(n => n[0]) - .join('')} -
-
-
- {props.name.split(' ')[0]} - {props.progress}% -
-
-
-
-
-
- ); -} - -export default function ProjectViewDashboard() { - const [viewMode, setViewMode] = createSignal('cards'); - const [filterOpen, setFilterOpen] = createSignal(false); - - return ( -
- {/* Gradient Background Effects */} -
-
-
-
-
- -
- {/* Header */} -
-
-
-
- -
-

{mockProject.name}

-

{mockProject.description}

-
-
-
- -
-
-
-
- - {/* Stats Cards */} -
-
- - {stat => ( -
-
-
-

{stat.label}

-
- {stat.value} - - - {stat.percentage}% - - - - {stat.change} - -
- -
-
-
- -
-
- )} - -
-
- - {/* Main Content Area */} -
-
- {/* Studies List */} -
- {/* Toolbar */} -
-
-
- - -
- -
-
- - -
-
- - {/* Study Cards */} -
- - {study => ( -
-
- {/* Progress Ring */} - - a + r.progress, 0) / - Math.max(study.reviewers.length, 1), - ) - } - /> - - -
- -
- - - {/* Content */} -
-
- - - - -
- -

- {study.title} -

- -

- {study.journal} ({study.year}) -

- - {/* Reviewers */} - 0}> -
- - {reviewer => ( - - )} - -
- - - - - -
- - {/* Actions */} - -
- - {/* Consensus indicator */} - -
- -
- )} - -
-
- - {/* Activity Sidebar */} -
-
-

Recent Activity

-
- - {activity => ( -
-
- {activity.user - .split(' ') - .map(n => n[0]) - .join('')} -
-
-

- - {activity.user.split(' ')[0]} - {' '} - {activity.action} -

-

{activity.study}

-

{activity.time}

-
-
- )} - -
- - -
- - {/* Quick Actions */} -
-

Quick Actions

-
- - -
-
-
-
-
-
- - {/* Embedded Styles */} - -
- ); -} diff --git a/packages/web/src/components/mocks/ProjectViewEditorial.jsx b/packages/web/src/components/mocks/ProjectViewEditorial.jsx deleted file mode 100644 index daac68f42..000000000 --- a/packages/web/src/components/mocks/ProjectViewEditorial.jsx +++ /dev/null @@ -1,378 +0,0 @@ -/** - * ProjectView Mock - Editorial/Magazine Style - * - * Design Direction: Clean, typographic, newspaper-inspired with strong hierarchy. - * Uses serif display fonts, generous whitespace, and editorial grid layouts. - * Inspired by The New York Times, Bloomberg, and academic journals. - */ - -import { For, Show, createSignal } from 'solid-js'; -import { - FiArrowLeft, - FiPlus, - FiFileText, - FiUsers, - FiCheck, - FiClock, - FiAlertCircle, -} from 'solid-icons/fi'; - -// Mock data -const mockProject = { - name: 'Effectiveness of Mindfulness-Based Interventions for Chronic Pain Management', - description: - 'A systematic review examining RCTs of mindfulness interventions for chronic pain conditions including fibromyalgia, low back pain, and arthritis.', - createdAt: '2024-12-15', - members: [ - { id: '1', name: 'Dr. Sarah Chen', avatar: null, role: 'Lead' }, - { id: '2', name: 'Dr. Michael Torres', avatar: null, role: 'Reviewer' }, - { id: '3', name: 'Dr. Emily Watson', avatar: null, role: 'Reviewer' }, - ], -}; - -const mockStudies = [ - { - id: '1', - title: - 'Mindfulness-Based Stress Reduction for Chronic Low Back Pain: A Randomized Controlled Trial', - authors: 'Cherkin DC, Sherman KJ, Balderson BH, et al.', - journal: 'JAMA', - year: 2016, - status: 'completed', - reviewers: ['Dr. Sarah Chen', 'Dr. Michael Torres'], - rating: 'High', - }, - { - id: '2', - title: - 'Effects of Mindfulness-Based Cognitive Therapy on Body Awareness in Patients with Chronic Pain', - authors: 'de Jong M, Lazar SW, Hug K, et al.', - journal: 'Frontiers in Psychology', - year: 2016, - status: 'reconcile', - reviewers: ['Dr. Emily Watson', 'Dr. Sarah Chen'], - rating: null, - }, - { - id: '3', - title: 'A Pilot Study of Mindfulness Meditation for Pediatric Chronic Pain', - authors: 'Jastrowski Mano KE, Salamon KS, Hainsworth KR, et al.', - journal: 'Children', - year: 2019, - status: 'in-progress', - reviewers: ['Dr. Michael Torres'], - rating: null, - }, - { - id: '4', - title: 'Mindfulness-Based Intervention for Fibromyalgia: Impact on Pain and Quality of Life', - authors: 'Schmidt S, Grossman P, Schwarzer B, et al.', - journal: 'Pain Medicine', - year: 2020, - status: 'pending', - reviewers: [], - rating: null, - }, -]; - -const stats = { - total: 24, - completed: 8, - inProgress: 6, - reconciling: 4, - pending: 6, -}; - -function StatusBadge(props) { - const colors = { - completed: 'bg-emerald-900 text-emerald-100', - reconcile: 'bg-amber-900 text-amber-100', - 'in-progress': 'bg-blue-900 text-blue-100', - pending: 'bg-stone-300 text-stone-700', - }; - - const labels = { - completed: 'Completed', - reconcile: 'Reconciling', - 'in-progress': 'In Progress', - pending: 'Pending', - }; - - return ( - - {labels[props.status]} - - ); -} - -function RatingBadge(props) { - const colors = { - High: 'border-emerald-700 text-emerald-700', - Moderate: 'border-amber-600 text-amber-600', - Low: 'border-rose-600 text-rose-600', - 'Critically Low': 'border-rose-900 text-rose-900', - }; - - return ( - - {props.rating} - - ); -} - -export default function ProjectViewEditorial() { - const [activeSection, setActiveSection] = createSignal('all'); - - return ( -
- {/* Editorial Header */} -
-
- {/* Breadcrumb */} -
- - / - Project -
- - {/* Title Block */} -
-
-

- {mockProject.name} -

-

- {mockProject.description} -

-
- - {/* Meta sidebar */} -
-
-
-

- Research Team -

-
- - {member => ( -
-
- {member.name - .split(' ') - .map(n => n[0]) - .join('')} -
- {member.name} - - - (Lead) - - -
- )} - -
-
- -
-

- Created -

-

{mockProject.createdAt}

-
-
-
-
-
-
- - {/* Progress Bar */} -
-
-
-
-
-
-
-
-
-
-
-
-
- {stats.completed} Completed -
-
-
- {stats.inProgress} In Progress -
-
-
- {stats.reconciling} Reconciling -
-
-
- {stats.pending} Pending -
-
-
-
-
- - {/* Navigation */} - - - {/* Main Content */} -
- {/* Action Bar */} -
-
- -
- -
- - {/* Studies List */} -
- - {(study, index) => ( -
-
- {/* Number */} -
- - {String(index() + 1).padStart(2, '0')} - -
- - {/* Main Content */} -
-
- - - - -
- -

- {study.title} -

- -

{study.authors}

- -

- {study.journal}, {study.year} -

-
- - {/* Reviewers */} -
- 0}> -

- Reviewers -

-
- - {reviewer => ( - - {reviewer.split(' ').slice(-1)[0]} - - )} - -
- - - - -
-
-
- )} - -
- - {/* Load More */} -
- -
-
- - {/* Footer */} -
-
-

- CoRATES / Collaborative Research Appraisal Tool for Evidence Synthesis -

-
-
- - {/* Embedded Styles */} - -
- ); -} diff --git a/packages/web/src/components/mocks/ProjectViewKanban.jsx b/packages/web/src/components/mocks/ProjectViewKanban.jsx deleted file mode 100644 index 168c65121..000000000 --- a/packages/web/src/components/mocks/ProjectViewKanban.jsx +++ /dev/null @@ -1,496 +0,0 @@ -/** - * ProjectView Mock - Kanban/Board Style - * - * Design Direction: Spatial organization with drag-drop potential. - * Warm, approachable palette with paper-like textures and soft shadows. - * Inspired by Notion, Linear, and modern project management tools. - */ - -import { For, Show, createSignal } from 'solid-js'; -import { - FiArrowLeft, - FiPlus, - FiSearch, - FiSettings, - FiMoreVertical, - FiFile, - FiMessageCircle, - FiCheckCircle, - FiAlertTriangle, - FiClock, - FiChevronDown, -} from 'solid-icons/fi'; - -// Mock data -const mockProject = { - name: 'Mindfulness Interventions Review', - emoji: null, - members: ['SC', 'MT', 'EW'], -}; - -const mockColumns = [ - { - id: 'pending', - title: 'Pending', - color: 'slate', - icon: FiClock, - studies: [ - { - id: '4', - title: 'Mindfulness for Fibromyalgia: Impact on Pain and Quality of Life', - journal: 'Pain Medicine', - year: 2020, - pdf: true, - comments: 0, - priority: 'normal', - }, - { - id: '5', - title: 'Online Mindfulness Training for Chronic Pain', - journal: 'J Pain Res', - year: 2021, - pdf: true, - comments: 2, - priority: 'high', - }, - ], - }, - { - id: 'in-review', - title: 'In Review', - color: 'blue', - icon: FiFile, - studies: [ - { - id: '3', - title: 'A Pilot Study of Mindfulness Meditation for Pediatric Chronic Pain', - journal: 'Children', - year: 2019, - pdf: true, - comments: 5, - priority: 'normal', - reviewers: [ - { initials: 'MT', progress: 65 }, - { initials: 'EW', progress: 30 }, - ], - }, - { - id: '6', - title: 'Acceptance and Mindfulness-Based Therapy for Chronic Pain', - journal: 'Clin J Pain', - year: 2018, - pdf: true, - comments: 1, - priority: 'normal', - reviewers: [ - { initials: 'SC', progress: 45 }, - { initials: 'MT', progress: 20 }, - ], - }, - ], - }, - { - id: 'reconcile', - title: 'Reconciliation', - color: 'amber', - icon: FiAlertTriangle, - studies: [ - { - id: '2', - title: 'Effects of MBCT on Body Awareness in Patients with Chronic Pain', - journal: 'Frontiers in Psychology', - year: 2016, - pdf: true, - comments: 8, - priority: 'urgent', - reviewers: [ - { initials: 'EW', progress: 100 }, - { initials: 'SC', progress: 100 }, - ], - disagreements: 3, - }, - ], - }, - { - id: 'completed', - title: 'Completed', - color: 'emerald', - icon: FiCheckCircle, - studies: [ - { - id: '1', - title: 'MBSR for Chronic Low Back Pain: A Randomized Controlled Trial', - journal: 'JAMA', - year: 2016, - pdf: true, - comments: 12, - rating: 'High', - reviewers: [ - { initials: 'SC', progress: 100 }, - { initials: 'MT', progress: 100 }, - ], - }, - ], - }, -]; - -const colorMap = { - slate: { - bg: 'bg-slate-50', - border: 'border-slate-200', - header: 'bg-slate-100 text-slate-700', - dot: 'bg-slate-400', - accent: 'text-slate-600', - }, - blue: { - bg: 'bg-blue-50/50', - border: 'border-blue-200/50', - header: 'bg-blue-100 text-blue-700', - dot: 'bg-blue-400', - accent: 'text-blue-600', - }, - amber: { - bg: 'bg-amber-50/50', - border: 'border-amber-200/50', - header: 'bg-amber-100 text-amber-700', - dot: 'bg-amber-400', - accent: 'text-amber-600', - }, - emerald: { - bg: 'bg-emerald-50/50', - border: 'border-emerald-200/50', - header: 'bg-emerald-100 text-emerald-700', - dot: 'bg-emerald-500', - accent: 'text-emerald-600', - }, -}; - -function PriorityDot(props) { - const colors = { - urgent: 'bg-rose-500', - high: 'bg-amber-500', - normal: 'bg-slate-300', - }; - - return ; -} - -function RatingBadge(props) { - const colors = { - High: 'bg-emerald-100 text-emerald-700 border-emerald-200', - Moderate: 'bg-amber-100 text-amber-700 border-amber-200', - Low: 'bg-rose-100 text-rose-700 border-rose-200', - 'Critically Low': 'bg-rose-200 text-rose-800 border-rose-300', - }; - - return ( - - {props.rating} Confidence - - ); -} - -function ReviewerStack(props) { - return ( -
- - {reviewer => ( -
-
- {reviewer.initials} -
- - - - - - - -
- -
- -
- )} - -
- ); -} - -function StudyCard(props) { - const [expanded, setExpanded] = createSignal(false); - - return ( -
- {/* Header Row */} -
-
- - - - - - - - {props.study.disagreements} conflicts - - -
- -
- - {/* Title */} -

- {props.study.title} -

- - {/* Meta */} -

- {props.study.journal} ({props.study.year}) -

- - {/* Footer */} -
-
- - - - - - 0}> - - - {props.study.comments} - - -
- 0}> - - -
-
- ); -} - -function KanbanColumn(props) { - const colors = colorMap[props.column.color]; - const Icon = props.column.icon; - - return ( -
- {/* Column Header */} -
-
- - - - {props.column.title} - - {props.column.studies.length} - -
- -
- - {/* Cards */} -
- {study => } - - {/* Add card button */} - -
-
- ); -} - -export default function ProjectViewKanban() { - const [viewMode, setViewMode] = createSignal('board'); - - return ( -
- {/* Subtle Paper Texture Overlay */} -
- -
- {/* Header */} -
-
-
- {/* Left: Back + Project Info */} -
- "" - -
-
- M -
-
-

{mockProject.name}

-
- 6 studies - | - 3 team members -
-
-
-
- - {/* Center: View Toggle */} -
- - - -
- - {/* Right: Actions */} -
-
- - -
- - {/* Team avatars */} -
- - {initials => ( -
- {initials} -
- )} - - -
- - - - -
-
-
-
- - {/* Filter Bar */} -
-
-
- - - -
- -
-
-
- - {/* Kanban Board */} -
-
- {column => } -
-
-
- - {/* Floating Action Button (mobile) */} -
- -
- - {/* Embedded Styles */} - -
- ); -} diff --git a/packages/web/src/components/mocks/ProjectWizardMock.jsx b/packages/web/src/components/mocks/ProjectWizardMock.jsx deleted file mode 100644 index b7e246c70..000000000 --- a/packages/web/src/components/mocks/ProjectWizardMock.jsx +++ /dev/null @@ -1,2235 +0,0 @@ -/** - * Project Creation Wizard Mock - * - * Design Direction: Material + Apple HIG blend for researchers - * - Blue-oriented palette (trustworthy, calm, professional) - * - Inter typography with clear hierarchy - * - Generous whitespace, refined surfaces - * - Subtle depth through shadows and layering - * - Academic sensibility without being stuffy - */ - -import { For, Show, createSignal, createMemo } from 'solid-js'; -import { useSearchParams } from '@solidjs/router'; -import { - FiCheck, - FiChevronRight, - FiChevronLeft, - FiInfo, - FiX, - FiExternalLink, - FiUserPlus, - FiMail, - FiMoreHorizontal, - FiTrash2, - FiAlertCircle, - FiUpload, - FiSearch, - FiFile, - FiFileText, - FiLink, - FiFolder, - FiCheckCircle, - FiCopy, - FiSliders, -} from 'solid-icons/fi'; - -// ============================================================================ -// DESIGN TOKENS -// ============================================================================ - -// These would normally be CSS variables, inline here for mock isolation -const tokens = { - // Primary blue palette - trustworthy, professional - blue50: '#eff6ff', - blue100: '#dbeafe', - blue200: '#bfdbfe', - blue300: '#93c5fd', - blue500: '#3b82f6', - blue600: '#2563eb', - blue700: '#1d4ed8', - blue900: '#1e3a8a', - - // Neutral slate - warm enough to not feel clinical - slate50: '#f8fafc', - slate100: '#f1f5f9', - slate200: '#e2e8f0', - slate300: '#cbd5e1', - slate400: '#94a3b8', - slate500: '#64748b', - slate600: '#475569', - slate700: '#334155', - slate800: '#1e293b', - slate900: '#0f172a', - - // Semantic colors - success: '#059669', - successLight: '#d1fae5', -}; - -// ============================================================================ -// STEP CONFIGURATION -// ============================================================================ - -const steps = [ - { id: 1, label: 'Project Details', description: 'Name and configuration' }, - { id: 2, label: 'Team', description: 'Invite collaborators' }, - { id: 3, label: 'Studies', description: 'Import your corpus' }, - { id: 4, label: 'Assignment', description: 'Distribute reviews' }, -]; - -const checklistOptions = [ - { - id: 'amstar2', - name: 'AMSTAR 2', - description: 'Assessment of systematic reviews of interventions', - domains: 16, - }, - { - id: 'robins-i', - name: 'ROBINS-I', - description: 'Risk of bias in non-randomized studies of interventions', - domains: 7, - }, - { - id: 'rob2', - name: 'RoB 2', - description: 'Risk of bias in randomized trials', - domains: 5, - }, - { - id: 'robis', - name: 'ROBIS', - description: 'Risk of bias in systematic reviews', - domains: 4, - }, -]; - -// Mock organization members for autocomplete -const orgMembers = [ - { id: '1', name: 'Dr. Sarah Chen', email: 'sarah.chen@university.edu' }, - { id: '2', name: 'Dr. Michael Torres', email: 'm.torres@research.org' }, - { id: '3', name: 'Dr. Emily Watson', email: 'e.watson@institute.edu' }, - { id: '4', name: 'Dr. James Liu', email: 'j.liu@university.edu' }, - { id: '5', name: 'Dr. Anna Kowalski', email: 'a.kowalski@medical.edu' }, -]; - -// ============================================================================ -// COMPONENTS -// ============================================================================ - -/** - * Horizontal stepper with connected line - * Apple-inspired minimal design with Material's clear affordances - */ -function Stepper(props) { - return ( - - ); -} - -/** - * Checklist type selection card - * Material-inspired card with Apple's attention to touch targets - */ -function ChecklistCard(props) { - const isSelected = () => props.selected?.includes(props.checklist.id); - - return ( - - ); -} - -/** - * Form field wrapper with label - * Clean, accessible form pattern - */ -function FormField(props) { - return ( -
- - {props.children} - -

- {props.hint} -

- -
- ); -} - -/** - * Text input with consistent styling - */ -function TextInput(props) { - return ( - props.onInput?.(e.target.value)} - placeholder={props.placeholder} - class='w-full rounded-lg border px-3 py-2.5 text-sm transition-all duration-200 outline-none' - style={{ - 'border-color': tokens.slate200, - background: 'white', - color: tokens.slate900, - }} - onFocus={e => { - e.target.style.borderColor = tokens.blue500; - e.target.style.boxShadow = `0 0 0 3px ${tokens.blue100}`; - }} - onBlur={e => { - e.target.style.borderColor = tokens.slate200; - e.target.style.boxShadow = 'none'; - }} - /> - ); -} - -/** - * Textarea with consistent styling - */ -function TextArea(props) { - return ( -