-
-
+
+
)}
- } disabled={isActionInProgress}>
+ }
+ disabled={isActionInProgress}
+ >
Back to Projects
{sortedIdeas.length > 0 ? (
-
- {sortedIdeas.map(idea => (
-
- (
+
+ !isActionInProgress && onEditIdea(idea)}
+ onSelect={() => !isActionInProgress && onEditIdea(idea)}
onDelete={() => !isActionInProgress && setIdeaToDelete(idea)}
/>
))}
) : (
-
-
)}
@@ -313,69 +415,98 @@ const IdeaList: React.FC = ({ project, onEditIdea, onCreateNewIde
{/* Project Support Files Section */}
-
{/* Delete Idea Modal */}
setIdeaToDelete(null)}
title={`Delete Idea "${ideaToDelete?.title}"?`}
>
-
diff --git a/README.md b/README.md
index adbcaef..853db16 100644
--- a/README.md
+++ b/README.md
@@ -1,42 +1,41 @@
-
-
# IdeaForge Local
IdeaForge is your private brainstorming sandbox designed to capture, structure, and explore your brilliant app ideas, startup concepts, or project inspirations. All data stays on your device, ensuring complete privacy and control. No accounts, no cloud, just your ideas.
## Features
-* **Local-First & Private:** All data is stored in your browser's `localStorage`.
-* **Project & Idea Management:** Organize your thoughts into Projects and detailed Ideas.
-* **Rich Text Editing:** Format your ideas with notes and inspiration.
-* **File Attachments:** Add images, text files, and ZIP archives to your ideas and projects.
-* **Interactive Idea Cards:** Ideas are represented as 3D, flippable cards that reveal a quick summary on the back.
-* **Export to PDF Report:** Create visual PDF exports of your project boards or individual ideas.
-* **AI Augmentation (Optional):**
- * Generate boilerplate content for new ideas (problem, solution, features, audience).
- * Summarize existing idea notes.
- * (Requires a Google Gemini API Key)
-* **Data Export & Backup:** Export individual ideas (Markdown + attachments), entire projects as ZIP archives, or create a full JSON backup for restoration.
-* **Customizable Interface:**
- * Choose from multiple themes (Dark, Light, Cosmic).
- * Adjust accent colors and typography size.
- * Toggle high-contrast and reduced motion modes.
- * Switch between list densities.
-* **Responsive Design:** Adapts to various screen sizes.
-* **Keyboard Shortcuts:** For efficient navigation and actions.
-* **Immersive Theming:** A cohesive aesthetic with custom animations, icons, and themes.
+- **Local-First & Private:** All data is stored in your browser's `localStorage`.
+- **Project & Idea Management:** Organize your thoughts into Projects and detailed Ideas.
+- **Rich Text Editing:** Format your ideas with notes and inspiration.
+- **File Attachments:** Add images, text files, and ZIP archives to your ideas and projects.
+- **Interactive Idea Cards:** Ideas are represented as 3D, flippable cards that reveal a quick summary on the back.
+- **Export to PDF Report:** Create visual PDF exports of your project boards or individual ideas.
+- **AI Augmentation (Optional):**
+ - Generate boilerplate content for new ideas (problem, solution, features, audience).
+ - Summarize existing idea notes.
+ - (Requires a Google Gemini API Key)
+- **Data Export & Backup:** Export individual ideas (Markdown + attachments), entire projects as ZIP archives, or create a full JSON backup for restoration.
+- **Customizable Interface:**
+ - Choose from multiple themes (Dark, Light, Cosmic).
+ - Adjust accent colors and typography size.
+ - Toggle high-contrast and reduced motion modes.
+ - Switch between list densities.
+- **Responsive Design:** Adapts to various screen sizes.
+- **Keyboard Shortcuts:** For efficient navigation and actions.
+- **Immersive Theming:** A cohesive aesthetic with custom animations, icons, and themes.
## Prerequisites
Before you begin, ensure you have the following installed:
-* **Node.js**: Version 18.x or later recommended. (Check with `node -v`)
-* **npm**: Version 9.x or later recommended (usually comes with Node.js). (Check with `npm -v`)
- * Alternatively, you can use `yarn` or `pnpm`.
+- **Node.js**: Version 18.x or later recommended. (Check with `node -v`)
+- **npm**: Version 9.x or later recommended (usually comes with Node.js). (Check with `npm -v`)
+ - Alternatively, you can use `yarn` or `pnpm`.
## Installation and Setup
1. **Clone the Repository:**
+
```bash
git clone
cd
@@ -44,9 +43,11 @@ Before you begin, ensure you have the following installed:
2. **Install Dependencies:**
Using npm:
+
```bash
npm install
```
+
If the `run_in_bash_session` tool fails due to the large number of files created
by `npm install`, you can install packages into a temporary directory and
symlink `node_modules` back into the repository:
@@ -54,7 +55,9 @@ Before you begin, ensure you have the following installed:
```bash
scripts/setup-temp-node-modules.sh
```
+
Or using yarn:
+
```bash
yarn install
```
@@ -68,7 +71,7 @@ Before you begin, ensure you have the following installed:
# .env
API_KEY=YOUR_GEMINI_API_KEY
```
-
+
The `vite.config.ts` file is configured to load this variable and make it accessible to the application code as `process.env.API_KEY`. This file is listed in `.gitignore` and should not be committed to version control.
Get your Gemini API key from [Google AI Studio](https://aistudio.google.com/app/apikey).
@@ -87,65 +90,77 @@ Before you begin, ensure you have the following installed:
A brief overview of key directories:
-* **`public/`**: Contains static assets that are copied directly to the build output.
- * **`assets/`**: The primary folder for static assets like images (`cosmic-forge-logo-transparent.png`, `nebula-bg.jpg`).
-* **`src/`** (or root for some files like `index.tsx`): Contains the main application source code.
- * **`components/`**: Reusable UI components.
- * **`services/`**: Modules for business logic and API interactions (e.g., `projectService.ts`, `aiService.ts`).
- * **`styles/`**: Global styles, theme definitions (`theme.ts`).
- * **`motion/`**: Animation variants and transitions for Framer Motion.
- * **`hooks/`**: Custom React hooks.
- * **`types/`**: TypeScript type definitions.
- * **`utils/`**: Utility functions like the `zineExporter`.
- * **`rendering/`**: Components or modules related to advanced rendering, like `CosmicCanvas.tsx`.
-* **`__mocks__/`**: Directory for Jest mocks.
-* **Configuration Files**: `jest.config.js`, `jest.setup.ts`, `.eslintrc.js`, `.prettierrc.js`, `tsconfig.json`, `vite.config.ts`, etc.
+- **`public/`**: Contains static assets that are copied directly to the build output.
+ - **`assets/`**: The primary folder for static assets like images (`cosmic-forge-logo-transparent.png`, `nebula-bg.jpg`).
+- **`src/`** (or root for some files like `index.tsx`): Contains the main application source code.
+ - **`components/`**: Reusable UI components.
+ - **`services/`**: Modules for business logic and API interactions (e.g., `projectService.ts`, `aiService.ts`).
+ - **`styles/`**: Global styles, theme definitions (`theme.ts`).
+ - **`motion/`**: Animation variants and transitions for Framer Motion.
+ - **`hooks/`**: Custom React hooks.
+ - **`types/`**: TypeScript type definitions.
+ - **`utils/`**: Utility functions like the `zineExporter`.
+ - **`rendering/`**: Components or modules related to advanced rendering, like `CosmicCanvas.tsx`.
+- **`__mocks__/`**: Directory for Jest mocks.
+- **Configuration Files**: `jest.config.js`, `jest.setup.ts`, `.eslintrc.js`, `.prettierrc.js`, `tsconfig.json`, `vite.config.ts`, etc.
## Development Workflow
The following scripts are available for development:
-* **Run Development Server:**
- ```bash
- npm run dev
- ```
- Starts the application in development mode with hot reloading.
+- **Run Development Server:**
-* **Build for Production:**
- ```bash
- npm run build
- ```
- Bundles the application for production deployment into a `dist` folder.
+ ```bash
+ npm run dev
+ ```
-* **Lint Code:**
- ```bash
- npm run lint
- ```
- Checks the codebase for linting errors using ESLint.
+ Starts the application in development mode with hot reloading.
-* **Check Formatting:**
- ```bash
- npm run format:check
- ```
- Checks code formatting using Prettier without making changes.
+- **Build for Production:**
-* **Format Code:**
- ```bash
- npm run format
- ```
- Automatically formats code using Prettier.
+ ```bash
+ npm run build
+ ```
-* **Run Tests:**
- ```bash
- npm test
- ```
- Runs unit and integration tests using Jest and React Testing Library.
+ Bundles the application for production deployment into a `dist` folder.
-* **Run Tests with Coverage:**
- ```bash
- npm test -- --coverage
- ```
- Runs tests and generates a code coverage report.
+- **Lint Code:**
+
+ ```bash
+ npm run lint
+ ```
+
+ Checks the codebase for linting errors using ESLint.
+
+- **Check Formatting:**
+
+ ```bash
+ npm run format:check
+ ```
+
+ Checks code formatting using Prettier without making changes.
+
+- **Format Code:**
+
+ ```bash
+ npm run format
+ ```
+
+ Automatically formats code using Prettier.
+
+- **Run Tests:**
+
+ ```bash
+ npm test
+ ```
+
+ Runs unit and integration tests using Jest and React Testing Library.
+
+- **Run Tests with Coverage:**
+ ```bash
+ npm test -- --coverage
+ ```
+ Runs tests and generates a code coverage report.
## CI Pipeline
@@ -167,4 +182,4 @@ The build will fail if any of these checks do not pass, ensuring code quality an
---
-Happy Ideating!
\ No newline at end of file
+Happy Ideating!
diff --git a/SECURITY.md b/SECURITY.md
index 9ad6372..1384fba 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -4,10 +4,10 @@
The following versions of **IdeaForge** are currently supported with security updates:
-| Version | Supported |
-|----------|--------------------|
-| 1.0.x | :white_check_mark: |
-| < 1.0.0 | :x: |
+| Version | Supported |
+| ------- | ------------------ |
+| 1.0.x | :white_check_mark: |
+| < 1.0.0 | :x: |
Only the latest minor version (1.0.x) receives security patches. Older versions are no longer maintained.
@@ -17,9 +17,9 @@ To report a security vulnerability in IdeaForge, please email **allisongattone@g
Please include:
-- A clear description of the issue
-- Steps to reproduce (if applicable)
-- Any relevant logs, code, or screenshots
+- A clear description of the issue
+- Steps to reproduce (if applicable)
+- Any relevant logs, code, or screenshots
We aim to acknowledge all reports within **72 hours**. If verified, weโll coordinate a fix and provide updates throughout the remediation process. Public disclosure will occur only after a patch is available or mitigation steps are documented.
diff --git a/TESTING.md b/TESTING.md
index d8aeec4..82206e9 100644
--- a/TESTING.md
+++ b/TESTING.md
@@ -1 +1,134 @@
-
\ No newline at end of file
+# Testing Guide for IdeaForge
+
+This document outlines the testing strategy and commands for the IdeaForge application.
+
+## Testing Stack
+
+- **Unit/Integration Tests**: Jest + React Testing Library
+- **End-to-End Tests**: Playwright (planned)
+- **Linting**: ESLint
+- **Formatting**: Prettier
+
+## Running Tests
+
+### Unit and Integration Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run tests with coverage report
+npm test -- --coverage
+
+# Run tests in watch mode
+npm test -- --watch
+
+# Run specific test file
+npm test -- Button.test.tsx
+```
+
+### Code Quality Checks
+
+```bash
+# Run linting
+npm run lint
+
+# Check code formatting
+npm run format:check
+
+# Auto-format code
+npm run format
+```
+
+### All Quality Checks (CI)
+
+```bash
+# Run complete CI pipeline locally
+npm run lint && npm run format:check && npm test -- --coverage
+```
+
+## Test Structure
+
+### Unit Tests
+- Located alongside components (e.g., `Button.test.tsx`)
+- Test individual component behavior
+- Mock external dependencies
+
+### Integration Tests
+- Test service layers (`services/*.test.ts`)
+- Test component interactions
+- Use real-like data structures
+
+### End-to-End Tests
+- Located in `tests/e2e/`
+- Test complete user workflows
+- Run against built application
+
+## Test Coverage Goals
+
+- **Components**: >80% line coverage
+- **Services**: >90% line coverage
+- **Critical Paths**: 100% coverage for data persistence and AI integration
+
+## Writing Tests
+
+### Component Tests
+```typescript
+import { render, screen, fireEvent } from '@testing-library/react';
+import Button from './Button';
+
+describe('Button', () => {
+ it('should render with correct text', () => {
+ render();
+ expect(screen.getByText('Click me')).toBeInTheDocument();
+ });
+});
+```
+
+### Service Tests
+```typescript
+import { localStorageService } from './localStorageService';
+
+describe('localStorageService', () => {
+ beforeEach(() => {
+ localStorage.clear();
+ });
+
+ it('should store and retrieve data', () => {
+ const testData = { test: 'value' };
+ localStorageService.setItem('key', testData);
+ expect(localStorageService.getItem('key')).toEqual(testData);
+ });
+});
+```
+
+## Mock Setup
+
+The test environment includes:
+- `localStorage` mock
+- `crypto.randomUUID` polyfill
+- `JSZip` mock for file operations
+- `matchMedia` mock for responsive tests
+- `fetch` mock for API tests
+
+## Continuous Integration
+
+GitHub Actions automatically runs:
+1. Code linting (`npm run lint`)
+2. Format checking (`npm run format:check`)
+3. Test suite with coverage (`npm test -- --coverage`)
+
+All checks must pass before merging PRs.
+
+## Debugging Tests
+
+```bash
+# Debug with verbose output
+npm test -- --verbose
+
+# Debug specific test
+npm test -- --testNamePattern="Button should render"
+
+# Run with debugger (Node.js debugging)
+node --inspect-brk node_modules/.bin/jest --runInBand
+```
diff --git a/Workbench.tsx b/Workbench.tsx
index 0a0f772..17aea05 100644
--- a/Workbench.tsx
+++ b/Workbench.tsx
@@ -1,5 +1,3 @@
-
-
// components/Workbench.tsx (Previously ProjectManager.tsx)
import React, { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
@@ -16,10 +14,14 @@ import { staggerContainer, staggerItem } from '../motion/variants';
interface WorkbenchProps {
onProjectSelected: (project: Project) => void;
addNotification: (message: string, type: 'success' | 'error' | 'info') => void;
- onQuickNewIdea: (project: Project) => void;
+ onQuickNewIdea: (project: Project) => void;
}
-const Workbench: React.FC = ({ onProjectSelected, addNotification, onQuickNewIdea }) => {
+const Workbench: React.FC = ({
+ onProjectSelected,
+ addNotification,
+ onQuickNewIdea,
+}) => {
const [projects, setProjects] = useState([]);
const [newProjectName, setNewProjectName] = useState('');
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -42,11 +44,11 @@ const Workbench: React.FC = ({ onProjectSelected, addNotificatio
}
try {
const newProject = projectService.createProject(newProjectName.trim());
- fetchProjects();
+ fetchProjects();
setNewProjectName('');
setIsCreateModalOpen(false);
addNotification(`Project "${newProject.name}" successfully created!`, 'success'); // Updated
- onProjectSelected(newProject);
+ onProjectSelected(newProject);
} catch (error) {
addNotification('Failed to create project.', 'error'); // Updated
console.error(error);
@@ -57,7 +59,7 @@ const Workbench: React.FC = ({ onProjectSelected, addNotificatio
if (!projectToDelete) return;
try {
projectService.deleteProject(projectToDelete.id);
- fetchProjects();
+ fetchProjects();
addNotification(`Project "${projectToDelete.name}" has been deleted.`, 'success'); // Updated
setProjectToDelete(null);
} catch (error) {
@@ -66,13 +68,16 @@ const Workbench: React.FC = ({ onProjectSelected, addNotificatio
}
};
- const handleToggleFavorite = useCallback((projectId: string) => {
- projectService.toggleFavoriteProject(projectId);
- fetchProjects();
- }, [fetchProjects]);
-
+ const handleToggleFavorite = useCallback(
+ (projectId: string) => {
+ projectService.toggleFavoriteProject(projectId);
+ fetchProjects();
+ },
+ [fetchProjects]
+ );
+
const filteredProjects = React.useMemo(() => {
- return projects.filter(project =>
+ return projects.filter((project) =>
project.name.toLowerCase().includes(searchTerm.toLowerCase())
);
}, [projects, searchTerm]);
@@ -85,7 +90,7 @@ const Workbench: React.FC = ({ onProjectSelected, addNotificatio
};
return (
- = ({ onProjectSelected, addNotificatio
Project Workbench
-
+
= ({ onProjectSelected, addNotificatio
{filteredProjects.length > 0 ? (
-
- {filteredProjects.map(project => (
+ {filteredProjects.map((project) => (
= ({ onProjectSelected, addNotificatio
))}
) : (
-
- {searchTerm ? "No projects match your search." : "Your workspace is empty. Ready to start your first project?"}
+ {searchTerm
+ ? 'No projects match your search.'
+ : 'Your workspace is empty. Ready to start your first project?'}
)}
@@ -171,11 +178,13 @@ const Workbench: React.FC = ({ onProjectSelected, addNotificatio
>
{projects.length > 0 && (
{project.logo ? (
- 
+
) : (
-
+
{/* Ideas Section */}
-
+
+
Project: {project.name}
-
-
{project.logo && (
- }
+ leftIcon={ = ({ project, onEditIdea, onCreateNewIde
- } isLoading={isExportingProjectZine} disabled={isActionInProgress && !isExportingProjectZine}>
+ }
+ isLoading={isExportingProjectZine}
+ disabled={isActionInProgress && !isExportingProjectZine}
+ >
Export Zine (PDF)
- } disabled={isActionInProgress}>
+ }
+ disabled={isActionInProgress}
+ >
Export (ZIP)
- } disabled={isActionInProgress}>
+ }
+ disabled={isActionInProgress}
+ >
New Idea
Ideas
-This is the collection of ideas within your project.
++ This is the collection of ideas within your project. +
{sortedIdeas.length > 0 && (
-
-
+
+
)}
This project has no ideas yet.
-Create your first idea by selecting 'New Idea'.
++ This project has no ideas yet. +
++ Create your first idea by selecting 'New Idea'. +
-
-
- handleProjectFileUpload(e.target.files)}
- className="hidden"
- id="project-file-upload-input"
- aria-label="Upload files to project"
- disabled={isActionInProgress}
- />
-
+
+
+ handleProjectFileUpload(e.target.files)}
+ className="hidden"
+ id="project-file-upload-input"
+ aria-label="Upload files to project"
+ disabled={isActionInProgress}
+ />
+
{project.attachments && project.attachments.length > 0 ? (
-
-
- handleProjectFileUpload(e.target.files)}
- className="hidden"
- id="project-file-upload-input"
- aria-label="Upload files to project"
- disabled={isActionInProgress}
- />
-
+
+
+ handleProjectFileUpload(e.target.files)}
+ className="hidden"
+ id="project-file-upload-input"
+ aria-label="Upload files to project"
+ disabled={isActionInProgress}
+ />
+
-
- {project.attachments.map(att => (
-
-
- - {getFileIcon(att.type)} - {att.name} - ({Math.round(att.size / 1024)} KB) --- - --
+
-
+ + {getFileIcon(att.type)} + + {att.name} + + + ({Math.round(att.size / 1024)} KB) + +++ + ++
))}
-
-
+ {project.attachments.map((att) => (
+
- No files have been added to this project yet. -
++ No files have been added to this project yet. +
)}This will permanently delete the idea. This action is irreversible.
++ This will permanently delete the idea. This action is irreversible. +
-
-
+
+
-
-
+
+
- = ({ onProjectSelected, addNotificatio
)}
setNewProjectName(e.target.value)}
placeholder="e.g., Nova Navigator App"
- autoFocus={projects.length === 0}
- onKeyDown={(e) => { if (e.key === 'Enter' && newProjectName.trim() !== '') { handleCreateProject();}}}
+ autoFocus={projects.length === 0}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' && newProjectName.trim() !== '') {
+ handleCreateProject();
+ }
+ }}
/>
Open Existing Project
++ Open Existing Project +
-
- {projects.map(p => (
-
- ( +
- {
onProjectSelected(p);
@@ -183,17 +192,31 @@ const Workbench: React.FC
= ({ onProjectSelected, addNotificatio }} role="button" tabIndex={0} - onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { onProjectSelected(p); setIsCreateModalOpen(false);}}} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + onProjectSelected(p); + setIsCreateModalOpen(false); + } + }} > {p.logo ? ( -- {p.isFavorite &&+
)} {p.name} } + {p.isFavorite && ( + + )}
))}
- {projects.length > 0 ? "Or Create a New Project" : "Create Your First Project"} + {projects.length > 0 ? 'Or Create a New Project' : 'Create Your First Project'}
-
-
+