feat: add examples app #597
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
4 issues found across 26 files
Prompt for AI agents (all 4 issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="apps/examples/components/ui/sidebar.tsx">
<violation number="1" location="apps/examples/components/ui/sidebar.tsx:369">
P2: Using `Math.random()` in `useMemo` will cause hydration mismatches because the value generated on the server differs from the client. Consider using `useId()` to generate a deterministic seed, or move the random calculation to a `useEffect` with state, or use a CSS-based solution for the varying widths.</violation>
</file>
<file name="apps/examples/components/header-actions.tsx">
<violation number="1" location="apps/examples/components/header-actions.tsx:31">
P2: Avatar fallback initials "CC" don't match the alt text "Luke Tracy". Consider using "LT" for consistency, or update the alt text to match the intended user.</violation>
</file>
<file name="apps/examples/components/nav-main.tsx">
<violation number="1" location="apps/examples/components/nav-main.tsx:156">
P2: Inconsistent use of Next.js `Link` vs plain `<a>` tags. The MenuPopup uses `<Link>` for client-side navigation, but this SidebarMenuSubButton uses a plain `<a>` tag which causes a full page reload. Use `<Link>` for consistent SPA navigation.</violation>
<violation number="2" location="apps/examples/components/nav-main.tsx:179">
P2: Use Next.js `Link` instead of plain `<a>` tag for consistent client-side navigation behavior.</violation>
</file>
Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR
| showIcon?: boolean; | ||
| }) { | ||
| // Random width between 50 to 90%. | ||
| const width = React.useMemo(() => { |
Contributor
There was a problem hiding this comment.
P2: Using Math.random() in useMemo will cause hydration mismatches because the value generated on the server differs from the client. Consider using useId() to generate a deterministic seed, or move the random calculation to a useEffect with state, or use a CSS-based solution for the varying widths.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/examples/components/ui/sidebar.tsx, line 369:
<comment>Using `Math.random()` in `useMemo` will cause hydration mismatches because the value generated on the server differs from the client. Consider using `useId()` to generate a deterministic seed, or move the random calculation to a `useEffect` with state, or use a CSS-based solution for the varying widths.</comment>
<file context>
@@ -0,0 +1,475 @@
+ showIcon?: boolean;
+}) {
+ // Random width between 50 to 90%.
+ const width = React.useMemo(() => {
+ return `${Math.floor(Math.random() * 40) + 50}%`;
+ }, []);
</file context>
| alt="Luke Tracy" | ||
| src="https://pbs.twimg.com/profile_images/1994776674391457792/7utKOMi6_400x400.jpg" | ||
| /> | ||
| <AvatarFallback>CC</AvatarFallback> |
Contributor
There was a problem hiding this comment.
P2: Avatar fallback initials "CC" don't match the alt text "Luke Tracy". Consider using "LT" for consistency, or update the alt text to match the intended user.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/examples/components/header-actions.tsx, line 31:
<comment>Avatar fallback initials "CC" don't match the alt text "Luke Tracy". Consider using "LT" for consistency, or update the alt text to match the intended user.</comment>
<file context>
@@ -0,0 +1,39 @@
+ alt="Luke Tracy"
+ src="https://pbs.twimg.com/profile_images/1994776674391457792/7utKOMi6_400x400.jpg"
+ />
+ <AvatarFallback>CC</AvatarFallback>
+ </Avatar>
+ </Link>
</file context>
| className="font-medium text-sidebar-foreground" | ||
| isActive={item.isActive} | ||
| render={ | ||
| <a href={item.url}> |
Contributor
There was a problem hiding this comment.
P2: Use Next.js Link instead of plain <a> tag for consistent client-side navigation behavior.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/examples/components/nav-main.tsx, line 179:
<comment>Use Next.js `Link` instead of plain `<a>` tag for consistent client-side navigation behavior.</comment>
<file context>
@@ -0,0 +1,209 @@
+ className="font-medium text-sidebar-foreground"
+ isActive={item.isActive}
+ render={
+ <a href={item.url}>
+ <item.icon />
+ <span className="md:max-lg:hidden lg:inline">{item.title}</span>
</file context>
| <SidebarMenuSubButton | ||
| className="from-secondary to-secondary/64 ps-8.5 hover:bg-transparent active:bg-transparent data-[active=true]:bg-linear-to-tr" | ||
| render={ | ||
| <a href={subItem.url}> |
Contributor
There was a problem hiding this comment.
P2: Inconsistent use of Next.js Link vs plain <a> tags. The MenuPopup uses <Link> for client-side navigation, but this SidebarMenuSubButton uses a plain <a> tag which causes a full page reload. Use <Link> for consistent SPA navigation.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/examples/components/nav-main.tsx, line 156:
<comment>Inconsistent use of Next.js `Link` vs plain `<a>` tags. The MenuPopup uses `<Link>` for client-side navigation, but this SidebarMenuSubButton uses a plain `<a>` tag which causes a full page reload. Use `<Link>` for consistent SPA navigation.</comment>
<file context>
@@ -0,0 +1,209 @@
+ <SidebarMenuSubButton
+ className="from-secondary to-secondary/64 ps-8.5 hover:bg-transparent active:bg-transparent data-[active=true]:bg-linear-to-tr"
+ render={
+ <a href={subItem.url}>
+ <span>{subItem.title}</span>
+ </a>
</file context>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by cubic
Adds a new examples app that demonstrates a Cal.com-style shell using @coss/ui in Next.js. Includes a responsive sidebar, mobile header/footer, and an Event Types page.
New Features
Dependencies
Written for commit 09183f7. Summary will update automatically on new commits.