Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web): finish website v1 #185

Open
wants to merge 33 commits into
base: main
Choose a base branch
from
Open

feat(web): finish website v1 #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
32010b1
refactor: remove dependency from shadcn
HasithDeAlwis Nov 24, 2024
b5adda6
refactor(web): use Remix Link instead of default <a> tag
HasithDeAlwis Nov 24, 2024
2594307
refactor(ui/web): use presenter container convention on navbar
HasithDeAlwis Nov 24, 2024
e7228d5
refactor(libs): reorganize folder structure
HasithDeAlwis Nov 28, 2024
6a94965
feat(shared/ui/typography): create component
HasithDeAlwis Nov 28, 2024
aa7a700
refactor(storybook/website): rename stories
HasithDeAlwis Nov 28, 2024
7e35015
feat(ui/web/navbar): add hover effect
HasithDeAlwis Nov 28, 2024
3f65d01
feat(ui/web/faq): add multiple lines to faq answers
HasithDeAlwis Nov 28, 2024
507488d
refactor(ui/web/sponsorship): rename files
HasithDeAlwis Nov 28, 2024
8dd526a
feat(ui/web/sponsorship): improve alignment on large screen
HasithDeAlwis Nov 28, 2024
9dc47f0
refactor(ui/web/spline): use error boundaries
HasithDeAlwis Nov 28, 2024
dcec371
feat(ui/web/navbar): add mobile animations
HasithDeAlwis Nov 28, 2024
f503fb6
feat(ui/web): update content
HasithDeAlwis Nov 28, 2024
65650c3
feat(ui/web/terminal-text): adjust tilde alignment with text to flex-…
HasithDeAlwis Nov 28, 2024
dc0c4ff
fix(ui/web): stopped overflow-x from spline images
HasithDeAlwis Nov 28, 2024
4c30efd
chore(gitignore): add deno.lock
HasithDeAlwis Nov 28, 2024
dc95a27
perf(web): lazy load spline and remove unnecessary react imports
MFarabi619 Dec 2, 2024
9ec61a0
fix(ui/web): text rendered as sans instead of mono
MFarabi619 Dec 2, 2024
413c701
perf(web): slow load times due to client-side font fetch
HasithDeAlwis Dec 2, 2024
7f03481
perf(web): entire navbar rendered client-side instead of mobile drawer
HasithDeAlwis Dec 2, 2024
e1343c9
chore(deps): add react three fiber, and three.js
HasithDeAlwis Dec 2, 2024
2096740
fix(ui/web): greendiant text not appearing
HasithDeAlwis Dec 18, 2024
e4a847a
fix(ui/web): hover animations not appearing on buttons
HasithDeAlwis Dec 18, 2024
cba7b1f
perf(web): low lighthouse accessibility scores from imprecise ARIA la…
HasithDeAlwis Dec 19, 2024
e0c54b8
fix(ui/web): broken social media links and past sponsors not present
HasithDeAlwis Dec 19, 2024
22eb904
chore(web-e2e): create library
HasithDeAlwis Dec 18, 2024
42a922f
test(web-e2e): add homepage coverage for mobile, desktop, and tablet …
HasithDeAlwis Dec 19, 2024
8aa5d49
test(web-e2e): add lighthouse audit
HasithDeAlwis Dec 19, 2024
9fd7ed6
chore(web): update vite allowed files
HasithDeAlwis Dec 19, 2024
be79eed
docs(feature-sliced-design): create content
HasithDeAlwis Dec 23, 2024
14db181
docs(bullet-proof-react): create content
HasithDeAlwis Dec 23, 2024
1815200
docs(front-end): add presenter, container pattern guide
HasithDeAlwis Dec 23, 2024
dc555b8
docs(style-guide): create content
HasithDeAlwis Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ public/build

# Local Netlify folder
.netlify
deno.lock

# Next.js
.next
Expand Down
1 change: 1 addition & 0 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default {
'../libs/shared/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
'../libs/website/feature/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
'../libs/website/shared/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
'../libs/website/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Documentation and testing coverage needs improvement

Several UI components are missing stories and documentation:

  • No test files found for any components
  • Missing stories for components:
    • sponsor-presenter/sponsor-item.tsx
    • sponsor-presenter/sponsor-presenter.tsx
    • faq-item/faq-item.tsx
  • No documentation files (.md or .mdx) found in the UI components directory
  • Existing stories (e.g., stat-item.stories.tsx) lack viewport-specific testing scenarios for responsive design
🔗 Analysis chain

Documentation and testing requirements

According to the PR objectives, documentation updates and tests are pending. Please ensure that:

  1. New UI components have proper documentation
  2. Components have associated stories for testing
  3. Components are tested across mobile, tablet, and desktop platforms

Let me gather more information about the UI components to better assess the test coverage.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for documentation and test coverage

# Check for story files
echo "Story files for UI components:"
fd -e stories.tsx -e stories.ts -e mdx . --base-directory libs/website/ui

# Check for test files
echo -e "\nTest files for UI components:"
fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts . --base-directory libs/website/ui

# Check for documentation
echo -e "\nDocumentation files:"
fd -e md -e mdx . --base-directory libs/website/ui

Length of output: 699

Script:

#!/bin/bash
# List all UI component files to compare with existing stories and tests
echo "All UI component files:"
fd -e tsx -e ts . --base-directory libs/website/ui | grep -v "stories\|test\|spec"

# Check content of a sample story file to verify responsive testing
echo -e "\nChecking sample story file for responsive testing:"
cat libs/website/ui/stats/stat-item/stat-item.stories.tsx

Length of output: 2396

],
staticDirs: [
// './public',
Expand Down
46 changes: 46 additions & 0 deletions apps/docs/content/docs/concepts/bullet-proof-react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
title: Bullet-Proof React
description: WIP
icon: ShieldCheck
---
Comment on lines +1 to +5
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Update description before v1 release

The description is marked as "WIP" (Work in Progress), but this PR is for the v1 release. Please provide a proper description that explains the purpose and benefits of Bullet-Proof React in your project.


import { File, Folder, Files } from 'fumadocs-ui/components/files';
import { TbBrandTypescript } from "react-icons/tb";

## [Bullet-Proof React](https://reacthandbook.dev/project-standards)
<iframe
title="Bullet-Proof React"
className="mt-4 w-full h-[400px] rounded-lg"
src="https://reacthandbook.dev/project-standards"
allowFullScreen>
</iframe>

Bullet-Proof React is a methodology for building scalable and maintainable front-end application, however, we extend it for our entire codebase.
We use Bullet-Proof React and [Feature-Sliced Design](/concepts/feature-sliced-design) to create a scalable and maintainable codebase.

In our use case, the Bullet-Proof React is how we organize our [Feature Slices](https://feature-sliced.design/docs/reference/slices-segments)
Comment on lines +18 to +21
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Clarify the integration of methodologies

The explanation of how Bullet-Proof React and Feature-Sliced Design work together is too vague. Please:

  1. Explain the specific benefits of combining these methodologies
  2. Provide concrete examples of how they complement each other
  3. Clarify how Feature Slices are organized using Bullet-Proof React principles
🧰 Tools
🪛 LanguageTool

[uncategorized] ~18-~18: The grammatical number of this noun doesn’t look right. Consider replacing it.
Context: ...ing scalable and maintainable front-end application, however, we extend it for our entire c...

(AI_EN_LECTOR_REPLACEMENT_NOUN_NUMBER)


### Example structure
<Files>
<Folder name="features" defaultOpen>
<Folder name="awesome-feature" defaultOpen>
<Folder name="api">
</Folder>
<Folder name="assets">
</Folder>
<Folder name="entities">
</Folder>
<Folder name="hooks">
</Folder>
<Folder name="routes">
</Folder>
<Folder name="stores">
</Folder>
<Folder name="ui">
</Folder>
<Folder name="utils">
</Folder>
<File name="index.ts" icon={<TbBrandTypescript/>}/>
</Folder>
</Folder>
</Files>
Comment on lines +1 to +46
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Documentation needs improvement before v1 release

  1. Both files are marked as "WIP" (Work in Progress) in their frontmatter
  2. The integration between Bullet-Proof React and Feature-Sliced Design needs clarification:
    • Current explanation "Bullet-Proof React is how we organize our Feature Slices" is too vague
    • No concrete examples showing how both methodologies work together
  3. The example structures show inconsistencies:
    • Feature-Sliced Design shows a full monorepo structure
    • Bullet-Proof React shows only a feature-level structure
    • No clear explanation of how these structures complement each other
🔗 Analysis chain

Verify documentation completeness for v1 release

Since this is part of the website v1 release, please ensure:

  1. All key concepts are documented
  2. Integration points between Bullet-Proof React and Feature-Sliced Design are clear
  3. Examples are complete and tested
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check for any missing documentation links or references
rg -l "TODO|FIXME|WIP" "apps/docs/content/docs/"

# Verify all referenced documentation files exist
rg -o "/concepts/[a-zA-Z0-9-]+" "apps/docs/content/docs/" | while read -r link; do
  if [ ! -f "apps/docs/content/docs/${link#/}.mdx" ]; then
    echo "Missing documentation: ${link}"
  fi
done

Length of output: 3249

Script:

#!/bin/bash
# Let's verify if the feature-sliced-design.mdx file exists and check its content
fd "feature-sliced-design.mdx" apps/docs/content/docs/

# Check the actual content of both files to verify integration points
cat apps/docs/content/docs/concepts/feature-sliced-design.mdx 2>/dev/null || echo "File not found"
cat apps/docs/content/docs/concepts/bullet-proof-react.mdx 2>/dev/null || echo "File not found"

# Check if there are any other references to these concepts
rg "Bullet-Proof React|Feature-Sliced Design" "apps/docs/content/docs/" -A 2 -B 2

Length of output: 10794

🧰 Tools
🪛 LanguageTool

[uncategorized] ~18-~18: The grammatical number of this noun doesn’t look right. Consider replacing it.
Context: ...ing scalable and maintainable front-end application, however, we extend it for our entire c...

(AI_EN_LECTOR_REPLACEMENT_NOUN_NUMBER)

Comment on lines +23 to +46
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance example with practical details

The folder structure example would be more helpful with:

  1. Explanation of each folder's purpose and when to use it
  2. Sample code snippets showing typical contents
  3. Guidelines for what belongs in each folder

107 changes: 107 additions & 0 deletions apps/docs/content/docs/concepts/feature-sliced-design.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
---
title: Feature-Sliced Design
description: WIP
icon: Eclipse
---
Comment on lines +1 to +5
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Update the "WIP" description before v1 release.

The frontmatter description is marked as "WIP" (Work in Progress), which should be completed before finalizing v1 of the website.

Would you like help drafting a proper description that highlights the key aspects of Feature-Sliced Design?


import { File, Folder, Files } from 'fumadocs-ui/components/files';
import {Atom as TSX} from 'lucide-react'
import { DiJavascript1 } from "react-icons/di";
import { TbBrandTypescript } from "react-icons/tb";
import { BsFiletypeJson } from "react-icons/bs";
import { DiCss3 } from "react-icons/di";

We follow [Feature-Sliced Design](https://feature-sliced.design/docs) for our project structure.

<iframe
title="Feature-Sliced Design"
className="mt-4 w-full h-[400px] rounded-lg"
src="https://feature-sliced.design/docs"
allowFullScreen>
</iframe>
Comment on lines +16 to +21
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Consider security implications and accessibility of iframe usage.

The iframe embedding external content:

  1. Should include a sandbox attribute to restrict potentially harmful operations
  2. Should handle loading states and potential failures
  3. May cause accessibility issues with screen readers

Consider this alternative approach:

 <iframe
   title="Feature-Sliced Design"
   className="mt-4 w-full h-[400px] rounded-lg"
   src="https://feature-sliced.design/docs"
+  sandbox="allow-scripts allow-same-origin allow-popups"
+  loading="lazy"
   allowFullScreen>
+  <p>Unable to load Feature-Sliced Design documentation. Please visit <a href="https://feature-sliced.design/docs">the documentation website</a> directly.</p>
 </iframe>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<iframe
title="Feature-Sliced Design"
className="mt-4 w-full h-[400px] rounded-lg"
src="https://feature-sliced.design/docs"
allowFullScreen>
</iframe>
<iframe
title="Feature-Sliced Design"
className="mt-4 w-full h-[400px] rounded-lg"
src="https://feature-sliced.design/docs"
sandbox="allow-scripts allow-same-origin allow-popups"
loading="lazy"
allowFullScreen>
<p>Unable to load Feature-Sliced Design documentation. Please visit <a href="https://feature-sliced.design/docs">the documentation website</a> directly.</p>
</iframe>


Feature-Sliced Design is a methodology for building scalable and maintainable front-end applications, but we extend it for our entire codebase.
It is based on the idea of splitting the application into features, each of which is a separate entity with its own logic, UI, and data.
All content shared within an app is placed into the shared folder.
This approach allows for better organization of the codebase, easier collaboration between team members, and faster development cycles.
Comment on lines +23 to +26
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Clarify the scope and implementation details.

The current description is quite brief. Consider expanding on:

  1. How Feature-Sliced Design integrates with your monorepo structure
  2. Specific guidelines for implementing features
  3. Best practices for sharing code between applications


It is highly recommended that you follow the [Feature-Sliced Design Tutorial](https://feature-sliced.design/docs/get-started/tutorial) to practice using the methodology.

### Example structure
<Files>
<Folder name="apps" defaultOpen>
<Folder name="docs" defaultOpen>
</Folder>
<Folder name="docs-e2e">
</Folder>
<Folder name="portal">
</Folder>
<Folder name="portal-e2e">
</Folder>
<Folder name="website">
<File name="global.css" icon={<DiCss3 />}/>
<File name="home.tsx" icon={<TSX/>}/>
<File name="layout.tsx" />
</Folder>
<Folder name="website-e2e">
</Folder>
</Folder>
<Folder name="libs" defaultOpen>
<Folder name="docs">
</Folder>
<Folder name="docs-e2e">
</Folder>
<Folder name="portal">
</Folder>
<Folder name="portal-e2e">
</Folder>
<Folder name="shared" defaultOpen>
<Folder name="entities">
</Folder>
<Folder name="features">
<Folder name="events">
</Folder>
</Folder>
<Folder name="pages">
</Folder>
<Folder name="utils">
</Folder>
</Folder>
<Folder name="website" defaultOpen>
<Folder name="app">
</Folder>
<Folder name="entities">
</Folder>
<Folder name="features" defaultOpen>
<Folder name="awesome-feature" defaultOpen>
<Folder name="api">
</Folder>
<Folder name="assets">
</Folder>
<Folder name="entities">
</Folder>
<Folder name="hooks">
</Folder>
<Folder name="routes">
</Folder>
<Folder name="stores">
</Folder>
<Folder name="ui">
</Folder>
<Folder name="utils">
</Folder>
<File name="index.ts" icon={<TbBrandTypescript/>}/>
</Folder>
</Folder>
<Folder name="pages">
</Folder>
<Folder name="shared">
</Folder>
<Folder name="utils">
</Folder>
</Folder>
<Folder name="website-e2e">
</Folder>
</Folder>
</Files>

4 changes: 3 additions & 1 deletion apps/docs/content/docs/concepts/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
"design-systems",
"extreme-programming",
"self-hosted-infrastructure",
"keyboard-driven"
"keyboard-driven",
"feature-sliced-design",
"bullet-proof-react"
]
}
15 changes: 14 additions & 1 deletion apps/docs/content/docs/contribution-guidelines/coding-standards/front-end.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,21 @@ description: WIP
icon: Atom
---

## [Presenter, Container Pattern](https://www.patterns.dev/react/presentational-container-pattern/)
<iframe
title="Presenter, Container Pattern"
className="mt-4 w-full h-[400px] rounded-lg"
src="https://www.patterns.dev/react/presentational-container-pattern/"
allowFullScreen>
</iframe>
Comment on lines +8 to +13
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance iframe security and user experience

The iframe implementation could benefit from additional security attributes and improved user experience.

Apply these improvements:

 <iframe
   title="Presenter, Container Pattern"
   className="mt-4 w-full h-[400px] rounded-lg"
   src="https://www.patterns.dev/react/presentational-container-pattern/"
-  allowFullScreen>
+  allowFullScreen
+  loading="lazy"
+  sandbox="allow-scripts allow-same-origin allow-popups"
+  referrerPolicy="no-referrer">
 </iframe>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<iframe
title="Presenter, Container Pattern"
className="mt-4 w-full h-[400px] rounded-lg"
src="https://www.patterns.dev/react/presentational-container-pattern/"
allowFullScreen>
</iframe>
<iframe
title="Presenter, Container Pattern"
className="mt-4 w-full h-[400px] rounded-lg"
src="https://www.patterns.dev/react/presentational-container-pattern/"
allowFullScreen
loading="lazy"
sandbox="allow-scripts allow-same-origin allow-popups"
referrerPolicy="no-referrer">
</iframe>

TLDR: Presenter components answer **how** UI is rendered. Container components answer **what** UI is rendered.

## tsconfig
[tsconfig.json with comments and explanations](https://gist.github.com/er-ant/e8c2f8c47ad871a4685c2a17800c86ae)

## Folder structure
Please refer to the [Feature-Sliced Design](/concepts/feature-sliced-design) and the [Bullet-Proof React](/concepts/bullet-proof-react) for the folder structure.
Comment on lines +19 to +20
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Clarify folder structure guidelines

When referencing both Feature-Sliced Design and Bullet-Proof React for folder structure, please:

  1. Specify which aspects to follow from each methodology
  2. Explain how to resolve any conflicts between the two approaches
  3. Provide examples of how they work together in your project
🧰 Tools
🪛 LanguageTool

[typographical] ~19-~19: Consider adding a comma here.
Context: ...a4685c2a17800c86ae) ## Folder structure Please refer to the [Feature-Sliced Design](/c...

(PLEASE_COMMA)


## Scaffolding Shadcn Ecosystem Library

- Find desired library from [Awesome Shadcn](https://github.com/birobirobiro/awesome-shadcn-ui) or elsewhere.
Expand All @@ -27,4 +40,4 @@ icon: Atom
"@shadcn/*": ["libs/external/shadcn/*"],
"@website/*": ["libs/website/*"]
},
```
```
3 changes: 2 additions & 1 deletion apps/docs/content/docs/contribution-guidelines/coding-standards/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"unit-testing",
"front-end",
"back-end",
"tooling"
"tooling",
"style-guide"
]
}
28 changes: 28 additions & 0 deletions apps/docs/content/docs/contribution-guidelines/coding-standards/style-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
title: Style Guide
description: WIP
icon: PenTool
---

## Inspiration
Our style guide is an extension of the [Angular Style Guide](https://angular.dev/style-guide).
<iframe
title="Conventional Commits Website"
className="mt-4 w-full h-[400px] rounded-lg"
src="https://angular.dev/style-guide"
allowFullScreen>
</iframe>
Comment on lines +9 to +14
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance iframe implementation for better security and accessibility.

The iframe implementation needs improvements:

  1. Add sandbox attribute to restrict iframe capabilities
  2. Provide fallback content for cases where iframe fails to load
  3. Update title to be more descriptive (currently references "Conventional Commits" but loads Angular style guide)
 <iframe
-title="Conventional Commits Website"
+title="Angular Style Guide Reference"
 className="mt-4 w-full h-[400px] rounded-lg"
 src="https://angular.dev/style-guide"
-allowFullScreen>
+allowFullScreen
+sandbox="allow-scripts allow-same-origin">
+  Unable to load Angular Style Guide. Please visit <a href="https://angular.dev/style-guide">angular.dev/style-guide</a> directly.
 </iframe>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<iframe
title="Conventional Commits Website"
className="mt-4 w-full h-[400px] rounded-lg"
src="https://angular.dev/style-guide"
allowFullScreen>
</iframe>
<iframe
title="Angular Style Guide Reference"
className="mt-4 w-full h-[400px] rounded-lg"
src="https://angular.dev/style-guide"
allowFullScreen
sandbox="allow-scripts allow-same-origin">
Unable to load Angular Style Guide. Please visit <a href="https://angular.dev/style-guide">angular.dev/style-guide</a> directly.
</iframe>


## Overview

### File Naming Convention
We follow the Angular style guide for naming files. The file name should be in kebab-case, not capitalized, and should describe the content of the file. For example, a component file should be named `event-card.component.ts`.

Comment on lines +18 to +20
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Based on the results from our verification, I can now provide a final response:

Update file extension guidance to match codebase patterns

The codebase shows a clear pattern:

  • .tsx extension is used for React components/presenters in the website libraries
  • .ts extension is used for non-React components in tools

Recommend updating the style guide to:

  • Replace the .ts example with both extensions
  • Clarify when to use each:
    • Use .tsx for React components
    • Use .ts for non-React TypeScript files
🔗 Analysis chain

Clarify file extension requirements and resolve inconsistency.

The example references .ts extension but all provided examples use .tsx. Please clarify whether both extensions are acceptable and under what circumstances each should be used.

Let me run one more check to see if there are any React components in the main application directories that might have different extension patterns.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check what extensions are actually used in the codebase
echo "Checking file extensions in the codebase:"
fd -e ts -e tsx | grep -E '\.(component|container|presenter|service|helper)\.(ts|tsx)$' | sort | uniq -c

Length of output: 1839

Script:

#!/bin/bash
# Check for React component files in apps directory
echo "Checking React component files in apps directory:"
fd -e tsx -e ts -p apps/ | grep -i component

Length of output: 155

**Note:** Presenter and component files must be prefixed with a `.presenter` or a `.container` and do not need a `.component` suffix

Examples:
- `event-card.component.tsx`
- `event-card.container.tsx`
- `event-card.presenter.tsx`
- `event.service.tsx`
- `event.helper.tsx`
Comment on lines +21 to +28
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Expand documentation on file suffix usage.

The current documentation lacks clarity on:

  1. When to use .container vs .presenter
  2. Whether .component suffix is required for regular components
  3. Criteria for using .service and .helper suffixes

Consider adding a table or section that explains each suffix type and its use case. For example:

 Examples:
 - `event-card.component.tsx`
 - `event-card.container.tsx`
 - `event-card.presenter.tsx`
 - `event.service.tsx`
 - `event.helper.tsx`
+
+### Suffix Usage Guide
+
+| Suffix | Usage |
+|--------|-------|
+| `.container` | Components that manage state and business logic |
+| `.presenter` | Pure presentational components |
+| `.component` | Standard components (specify if required) |
+| `.service` | Service classes for business logic |
+| `.helper` | Utility functions and helper methods |
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
**Note:** Presenter and component files must be prefixed with a `.presenter` or a `.container` and do not need a `.component` suffix
Examples:
- `event-card.component.tsx`
- `event-card.container.tsx`
- `event-card.presenter.tsx`
- `event.service.tsx`
- `event.helper.tsx`
**Note:** Presenter and component files must be prefixed with a `.presenter` or a `.container` and do not need a `.component` suffix
Examples:
- `event-card.component.tsx`
- `event-card.container.tsx`
- `event-card.presenter.tsx`
- `event.service.tsx`
- `event.helper.tsx`
### Suffix Usage Guide
| Suffix | Usage |
|--------|-------|
| `.container` | Components that manage state and business logic |
| `.presenter` | Pure presentational components |
| `.component` | Standard components (specify if required) |
| `.service` | Service classes for business logic |
| `.helper` | Utility functions and helper methods |

45 changes: 27 additions & 18 deletions apps/website-e2e/playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,30 +40,33 @@ export default defineConfig({
// reporter: [['html']],
projects: [
{
name: 'chromium',
name: 'chromium (desktop)',
use: { ...devices['Desktop Chrome'] },
},

// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },

// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },

// Uncomment for mobile browsers support
/* {
name: 'Mobile Chrome',
{
name: 'firefox (desktop)',
use: { ...devices['Desktop Firefox'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'webkit (desktop)',
use: { ...devices['Desktop Safari'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'webkit (tablet)',
use: { ...devices['iPad Mini'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'chromium (mobile)',
use: { ...devices['Pixel 5'] },
},
{
name: 'Mobile Safari',
name: 'webkit (mobile)',
use: { ...devices['iPhone 12'] },
}, */

testIgnore: ['./src/lighthouse.spec.ts'],
},
Comment on lines +43 to +69
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add missing testIgnore property to Chromium projects

The testIgnore property is inconsistently applied across projects. Firefox, WebKit desktop, tablet, and mobile configurations exclude lighthouse tests, but Chromium configurations don't have this property.

Apply this diff to maintain consistency:

    {
      name: 'chromium (desktop)',
      use: { ...devices['Desktop Chrome'] },
+     testIgnore: ['./src/lighthouse.spec.ts'],
    },
    ...
    {
      name: 'chromium (mobile)',
      use: { ...devices['Pixel 5'] },
+     testIgnore: ['./src/lighthouse.spec.ts'],
    },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
name: 'chromium (desktop)',
use: { ...devices['Desktop Chrome'] },
},
// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },
// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },
// Uncomment for mobile browsers support
/* {
name: 'Mobile Chrome',
{
name: 'firefox (desktop)',
use: { ...devices['Desktop Firefox'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'webkit (desktop)',
use: { ...devices['Desktop Safari'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'webkit (tablet)',
use: { ...devices['iPad Mini'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'chromium (mobile)',
use: { ...devices['Pixel 5'] },
},
{
name: 'Mobile Safari',
name: 'webkit (mobile)',
use: { ...devices['iPhone 12'] },
}, */
testIgnore: ['./src/lighthouse.spec.ts'],
},
name: 'chromium (desktop)',
use: { ...devices['Desktop Chrome'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'firefox (desktop)',
use: { ...devices['Desktop Firefox'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'webkit (desktop)',
use: { ...devices['Desktop Safari'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'webkit (tablet)',
use: { ...devices['iPad Mini'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'chromium (mobile)',
use: { ...devices['Pixel 5'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},
{
name: 'webkit (mobile)',
use: { ...devices['iPhone 12'] },
testIgnore: ['./src/lighthouse.spec.ts'],
},

// Uncomment for branded browsers
/* {
name: 'Microsoft Edge',
Expand All @@ -74,4 +77,10 @@ export default defineConfig({
use: { ...devices['Desktop Chrome'], channel: 'chrome' },
} */
],

// Ignore Chromium projects in CI to speed up runs
ignore: process.env.CI
? ['chromium (desktop)', 'chromium (mobile)']
: [],

})
3 changes: 3 additions & 0 deletions apps/website-e2e/src/lighthouse.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { doLighthouseTest } from '@website-e2e/features/lighthouse/lighthouse'

doLighthouseTest()
Comment on lines +1 to +3
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Test structure needs improvement

The Lighthouse test implementation is too minimal and lacks proper test structure. For a production website launch, we need:

  1. Proper test organization with describe/it blocks
  2. Clear performance thresholds
  3. Error handling
  4. Multiple device viewport testing

Consider restructuring like this:

import { doLighthouseTest } from '@website-e2e/features/lighthouse/lighthouse'
+import { test, expect } from '@playwright/test'

-doLighthouseTest()
+test.describe('Website Performance', () => {
+  const devices = ['Mobile', 'Tablet', 'Desktop']
+  
+  for (const device of devices) {
+    test(`should meet performance thresholds on ${device}`, async () => {
+      const results = await doLighthouseTest({ device })
+      
+      expect(results.performance).toBeGreaterThanOrEqual(0.9)
+      expect(results.accessibility).toBeGreaterThanOrEqual(0.9)
+      expect(results.seo).toBeGreaterThanOrEqual(0.9)
+    })
+  }
+})

Committable suggestion skipped: line range outside the PR's diff.

13 changes: 13 additions & 0 deletions apps/website-e2e/src/pages/home.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// import type { Browser } from 'playwright'
// import { chromium, expect, test } from '@playwright/test'
import { footerMobileTabletDesktop } from '@website-e2e/ui/footer/footer'
import { navbarMobile, navbarMobileTabletDesktop, navbarTabletDesktop } from '@website-e2e/ui/navbar/navbar'
import { sponsorsMobileTabletDesktop } from '@website-e2e/ui/sponsorship/sponsorship'
import { welcomeMobileTabletDesktop } from '@website-e2e/ui/welcome/welcome'

navbarMobileTabletDesktop()
navbarTabletDesktop()
navbarMobile()
welcomeMobileTabletDesktop()
footerMobileTabletDesktop()
sponsorsMobileTabletDesktop()
Comment on lines +1 to +13
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Critical: Test file structure needs significant improvements.

The current implementation has several issues that need to be addressed:

  1. Essential test framework imports are commented out
  2. Missing proper test structure (no describe/test blocks)
  3. Direct function calls without test context
  4. No device-specific configurations for responsive testing

Here's how the file should be structured:

- // import type { Browser } from 'playwright'
- // import { chromium, expect, test } from '@playwright/test'
+ import { test } from '@playwright/test'
  import { footerMobileTabletDesktop } from '@website-e2e/ui/footer/footer'
  import { navbarMobile, navbarMobileTabletDesktop, navbarTabletDesktop } from '@website-e2e/ui/navbar/navbar'
  import { sponsorsMobileTabletDesktop } from '@website-e2e/ui/sponsorship/sponsorship'
  import { welcomeMobileTabletDesktop } from '@website-e2e/ui/welcome/welcome'

- navbarMobileTabletDesktop()
- navbarTabletDesktop()
- navbarMobile()
- welcomeMobileTabletDesktop()
- footerMobileTabletDesktop()
- sponsorsMobileTabletDesktop()
+ test.describe('Home Page', () => {
+   test('should render correctly on mobile', async ({ page }) => {
+     // Set mobile viewport
+     await page.setViewportSize({ width: 375, height: 667 })
+     await navbarMobile(page)
+     await welcomeMobileTabletDesktop(page)
+     await footerMobileTabletDesktop(page)
+     await sponsorsMobileTabletDesktop(page)
+   })
+
+   test('should render correctly on tablet', async ({ page }) => {
+     // Set tablet viewport
+     await page.setViewportSize({ width: 768, height: 1024 })
+     await navbarTabletDesktop(page)
+     await welcomeMobileTabletDesktop(page)
+     await footerMobileTabletDesktop(page)
+     await sponsorsMobileTabletDesktop(page)
+   })
+
+   test('should render correctly on desktop', async ({ page }) => {
+     // Set desktop viewport
+     await page.setViewportSize({ width: 1440, height: 900 })
+     await navbarMobileTabletDesktop(page)
+     await welcomeMobileTabletDesktop(page)
+     await footerMobileTabletDesktop(page)
+     await sponsorsMobileTabletDesktop(page)
+   })
+ })

Committable suggestion skipped: line range outside the PR's diff.

Loading
Loading