8000 Merge pull request #1 from octobooth/update-app · github-samples/task-dashboard@5f21d60 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5f21d60

Browse files
chrisreddingtonchrisreddington
authored
Merge pull request #1 from octobooth/update-app
Add task management components and improve styling
2 parents e0ec673 + 5ab03cd commit 5f21d60

32 files changed

+6993
-1558
lines changed

‎.github/copilot-instructions.md

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# React Todo App - Copilot Instructions
2+
3+
## Project Overview
4+
This is a React-based Todo application that allows users to create, manage, and organize tasks with features like tags, task lists, and task filtering. The application is built using React, Framer Motion for animations, and Tailwind CSS for styling. It uses Vite as the build tool and Vitest for testing.
5+
6+
## Code Standards
7+
8+
### Required Before Commit
9+
- All tests must pass: `npm test`
10+
- Code must follow JSX and React best practices
11+
- Ensure proper component structure and separation of concerns
12+
- Verify that new components follow established patterns and include tests
13+
- Check for accessibility issues in UI components
14+
15+
### React Patterns
16+
- Follow functional component patterns with React Hooks
17+
- Use context providers for state management (TaskContext, TagContext, ListContext)
18+
- Follow component composition principles
19+
- Use proper data-testid attributes for testability
20+
- Apply proper prop types validation when needed
21+
- Keep components focused on a single responsibility
22+
- Use descriptive variable and function names
23+
24+
### CSS/Styling Standards
25+
- Use Tailwind CSS utility classes for styling
26+
- Follow the established color scheme defined in tailwind.config.js
27+
- Use consistent spacing and sizing patterns
28+
- Ensure responsive design works across different screen sizes
29+
30+
## Development Flow
31+
32+
- Install dependencies: `npm install`
33+
- Start development server: `npm start`
34+
- Run tests: `npm test`
35+
- Build for production: `npm run build`
36+
37+
## Repository Structure
38+
- `/src`: Main application source code
39+
- `/context`: React context providers for state management
40+
- `/features`: Feature-based organization of components
41+
- `/lists`: List-related components
42+
- `/tags`: Tag management components
43+
- `/tasks`: Task-related components
44+
- `/common`: Common/shared components and utilities
45+
- `/public`: Static assets and HTML template
46+
- Configuration files:
47+
- `vite.config.js`: Vite configuration
48+
- `tailwind.config.js`: Tailwind CSS configuration
49+
- `vitest.config.js`: Vitest test runner configuration
50+
51+
## Key Guidelines
52+
53+
1. **Component Architecture**:
54+
- Components should be organized by feature in the features directory
55+
- Each component should have a single responsibility
56+
- Use composition over inheritance
57+
- Keep components reasonably sized and focused
58+
59+
2. **State Management**:
60+
- Use the established context providers:
61+
- `TaskContext` for task-related state and operations
62+
- `TagContext` for tag management
63+
- `ListContext` for task list management
64+
- Follow the pattern of providing actions through context
65+
66+
3. **UI/UX Standards**:
67+
- Use Framer Motion for animations to maintain consistency
68+
- Follow the established design patterns for components
69+
- Ensure proper accessibility attributes are included
70+
- Use the defined color palette from the Tailwind configuration
71+
72+
4. **Testing**:
73+
- Write tests for all components using Vitest and React Testing Library
74+
- Mock dependencies appropriately in tests
75+
- Test both component rendering and user interactions
76+
- Use data-testid attributes for targeting elements in tests
77+
78+
5. **Documentation**:
79+
- Include JSDoc comments for complex functions
80+
- Document props for components when they're not self-explanatory
81+
- Add meaningful comments for complex logic
82+
- Document context providers' purpose and available values/actions
83+
84+
6. **Performance Considerations**:
85+
- Use React.memo for components that render frequently
86+
- Be mindful of unnecessary re-renders
87+
- Keep animations performant by using hardware-accelerated properties

‎.github/dependabot.yml

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
version: 2
2+
updates:
3+
- package-ecosystem: github-actions
4+
directory: /
5+
schedule:
6+
interval: weekly
7+
groups:
8+
actions-minor:
9+
update-types:
10+
- minor
11+
- patch
12+
13+
- package-ecosystem: npm
14+
directory: /
15+
schedule:
16+
interval: weekly
17+
groups:
18+
npm-development:
19+
dependency-type: development
20+
update-types:
21+
- minor
22+
- patch
23+
npm-production:
24+
dependency-type: production
25+
update-types:
26+
- patch

‎.github/workflows/attestations.yml renamed to ‎.github/workflows/attest-and-deploy.yml

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,21 @@ jobs:
1616
steps:
1717
# Checkout the repository
1818
- name: Checkout repository
19-
uses: actions/checkout@v4
19+
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
20+
21+
- name: Setup Node.js
22+
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020
23+
with:
24+
node-version: '22'
25+
cache: 'npm'
2026

2127
# Install dependencies
2228
- name: Install dependencies
23-
run: npm install
29+
run: npm ci
2430

2531
# Generate SBOM from the dependencies (scanning the workspace directory)
2632
- name: Generate SBOM
27-
uses: anchore/sbom-action@v0
33+
uses: anchore/sbom-action@9f7302141466aa6482940f15371237e9d9f4c34a
2834
with:
2935
upload-artifact: false
3036
upload-release-assets: false
@@ -46,14 +52,14 @@ jobs:
4652
# subject-path: "dist.tar.gz"
4753

4854
# Complete an attestation of the SBOM and the build
49-
- uses: actions/attest-sbom@v1
55+
- uses: actions/attest-sbom@115c3be05ff3974bcbd596578934b3f9ce39bf68
5056
with:
5157
subject-path: 'dist.tar.gz'
5258
sbom-path: 'sbom.spdx.json'
5359

5460
# Publish the SBOM (Zipped per https://github.com/actions/upload-artifact?tab=readme-ov-file#zip-archives)
5561
- name: Publish the SBOM
56-
uses: actions/upload-artifact@v4
62+
uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02
5763
with:
5864
name: sbom
5965
path: sbom.spdx.json
@@ -66,7 +72,7 @@ jobs:
6672
# path: dist.tar.gz
6773

6874
- name: "Deploy to GitHub Pages"
69-
uses: actions/upload-pages-artifact@v3.0.1
75+
uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa
7076
with:
7177
path: dist
7278

@@ -90,4 +96,4 @@ jobs:
9096
steps:
9197
- name: Deploy to GitHub Pages
9298
id: deployment
93-
uses: actions/deploy-pages@v4 # or specific "vX.X.X" version tag for this action
99+
uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # or specific "vX.X.X" version tag for this action

‎.github/workflows/ci-cd.yml

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: React Todo App CI/CD
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
pull_request:
7+
branches: [ main ]
8+
9+
# Explicitly define permissions
10+
permissions:
11+
contents: read
12+
pull-requests: read
13+
checks: write
14+
15+
jobs:
16+
build-and-test:
17+
runs-on: ubuntu-latest
18+
19+
steps:
20+
- name: Checkout repository
21+
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
22+
23+
- name: Setup Node.js
24+
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020
25+
with:
26+
node-version: '22'
27+
cache: 'npm'
28+
29+
- name: Install dependencies
30+
run: npm ci
31+
32+
- name: Build application
33+
run: npm run build
34+
35+
- name: Run tests
36+
run: npm test
37+
38+
# TODO: Add linting steps
39+
# - name: Run ESLint
40+
# run: npm run lint
41+
#
42+
# - name: Run accessibility checks
43+
# run: npm run lint:a11y

0 commit comments

Comments
 (0)
0