Skip to content

Commit c985d99

Browse files
roomoteroomote
committed
refactor: address PR feedback for cookie consent implementation
- Remove shared package approach, duplicate component in each app - Replace DOM manipulation with next-themes useTheme hook for dark mode - Replace all inline styles with Tailwind utility classes - Add proper ARIA attributes for accessibility - Remove unused js-cookie dependency - Align ESLint version to v9 across all apps Addresses all review comments from @brunobergher
1 parent 1bdbe5a commit c985d99

File tree

11 files changed

+346
-531
lines changed

11 files changed

+346
-531
lines changed

‎apps/web-docs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
"clean": "rimraf .next .turbo"
1313
},
1414
"dependencies": {
15-
"@roo-code/cookie-consent": "workspace:^",
1615
"next": "^15.2.5",
1716
"next-themes": "^0.4.6",
1817
"react": "^18.3.1",
18+
"react-cookie-consent": "^9.0.0",
1919
"react-dom": "^18.3.1"
2020
},
2121
"devDependencies": {
@@ -25,7 +25,7 @@
2525
"@types/react": "^18.3.23",
2626
"@types/react-dom": "^18.3.7",
2727
"autoprefixer": "^10.4.21",
28-
"eslint": "^8",
28+
"eslint": "^9",
2929
"eslint-config-next": "^15.2.5",
3030
"postcss": "^8.5.4",
3131
"tailwindcss": "^3.4.17",

‎apps/web-docs/src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react"
22
import type { Metadata } from "next"
33
import { Inter } from "next/font/google"
4-
import { CookieConsent } from "@roo-code/cookie-consent"
4+
import { CookieConsent } from "@/components/CookieConsent"
55

66
import "./globals.css"
77

‎apps/web-docs/src/components/CookieConsent.tsx‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
"use client"
2+
3+
import React from "react"
4+
import ReactCookieConsent from "react-cookie-consent"
5+
import { useTheme } from "next-themes"
6+
7+
export interface CookieConsentProps {
8+
/**
9+
* The text to display in the cookie consent banner
10+
*/
11+
text?: string
12+
/**
13+
* The text for the accept button
14+
*/
15+
buttonText?: string
16+
/**
17+
* Callback when cookies are accepted
18+
*/
19+
onAccept?: () => void
20+
/**
21+
* Callback when cookies are declined
22+
*/
23+
onDecline?: () => void
24+
/**
25+
* Enable decline button
26+
*/
27+
enableDeclineButton?: boolean
28+
/**
29+
* The text for the decline button
30+
*/
31+
declineButtonText?: string
32+
/**
33+
* Additional className for custom styling
34+
*/
35+
className?: string
36+
/**
37+
* Cookie name to store consent
38+
*/
39+
cookieName?: string
40+
/**
41+
* Debug mode - always show banner
42+
*/
43+
debug?: boolean
44+
}
45+
46+
/**
47+
* GDPR-compliant cookie consent banner component
48+
* Uses Tailwind classes for styling and next-themes for dark mode detection
49+
*/
50+
export function CookieConsent({
51+
text = "Like pretty much everyone else, we use cookies. We assume you're OK with it, but you can opt out if you want.",
52+
buttonText = "Accept",
53+
onAccept,
54+
onDecline,
55+
enableDeclineButton = true,
56+
declineButtonText = "Decline",
57+
className = "",
58+
cookieName = "roo-code-cookie-consent",
59+
debug = false,
60+
}: CookieConsentProps) {
61+
const { theme } = useTheme()
62+
const isDarkMode = theme === "dark"
63+
64+
// Tailwind classes for the container
65+
const containerClasses = `
66+
fixed bottom-0 left-0 right-0 z-[999]
67+
${isDarkMode ? "bg-black/95" : "bg-white/95"}
68+
backdrop-blur-xl
69+
${isDarkMode ? "border-t-neutral-800" : "border-t-gray-200"}
70+
border-t
71+
px-4 py-4 md:px-8 md:py-4
72+
flex flex-wrap items-center justify-between gap-4
73+
text-sm font-sans
74+
${className}
75+
`.trim()
76+
77+
// Tailwind classes for the accept button
78+
const acceptButtonClasses = `
79+
${isDarkMode ? "bg-white text-black" : "bg-black text-white"}
80+
hover:opacity-90
81+
transition-opacity
82+
rounded-md
83+
px-4 py-2
84+
text-sm font-medium
85+
cursor-pointer
86+
focus:outline-none focus:ring-2 focus:ring-offset-2
87+
${isDarkMode ? "focus:ring-white" : "focus:ring-black"}
88+
`.trim()
89+
90+
// Tailwind classes for the decline button
91+
const declineButtonClasses = `
92+
bg-transparent
93+
${isDarkMode ? "text-white border-neutral-800" : "text-black border-gray-200"}
94+
border
95+
hover:opacity-90
96+
transition-opacity
97+
rounded-md
98+
px-4 py-2
99+
text-sm font-medium
100+
cursor-pointer
101+
focus:outline-none focus:ring-2 focus:ring-offset-2
102+
${isDarkMode ? "focus:ring-white" : "focus:ring-black"}
103+
`.trim()
104+
105+
// Tailwind classes for the content
106+
const contentClasses = `
107+
flex-1
108+
${isDarkMode ? "text-neutral-200" : "text-gray-700"}
109+
mr-4
110+
`.trim()
111+
112+
return (
113+
<div role="banner" aria-label="Cookie consent banner" aria-live="polite">
114+
<ReactCookieConsent
115+
location="bottom"
116+
buttonText={buttonText}
117+
declineButtonText={declineButtonText}
118+
cookieName={cookieName}
119+
expires={365}
120+
enableDeclineButton={enableDeclineButton}
121+
onAccept={onAccept}
122+
onDecline={onDecline}
123+
debug={debug}
124+
containerClasses={containerClasses}
125+
buttonClasses={acceptButtonClasses}
126+
declineButtonClasses={declineButtonClasses}
127+
contentClasses={contentClasses}
128+
disableStyles={true}
129+
ariaAcceptLabel={`Accept ${buttonText}`}
130+
ariaDeclineLabel={`Decline ${declineButtonText}`}>
131+
{text}
132+
</ReactCookieConsent>
133+
</div>
134+
)
135+
}
136+
137+
// Re-export the component as default as well
138+
export default CookieConsent

‎apps/web-roo-code/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
"dependencies": {
1515
"@radix-ui/react-dialog": "^1.1.14",
1616
"@radix-ui/react-slot": "^1.2.3",
17-
"@roo-code/cookie-consent": "workspace:^",
1817
"@roo-code/evals": "workspace:^",
1918
"@roo-code/types": "workspace:^",
2019
"@tanstack/react-query": "^5.79.0",
@@ -29,6 +28,7 @@
2928
"next-themes": "^0.4.6",
3029
"posthog-js": "^1.248.1",
3130
"react": "^18.3.1",
31+
"react-cookie-consent": "^9.0.0",
3232
"react-dom": "^18.3.1",
3333
"react-icons": "^5.5.0",
3434
"recharts": "^2.15.3",

‎apps/web-roo-code/src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { Metadata } from "next"
33
import { Inter } from "next/font/google"
44
import Script from "next/script"
55
import { SEO } from "@/lib/seo"
6-
import { CookieConsent } from "@roo-code/cookie-consent"
6+
import { CookieConsent } from "@/components/CookieConsent"
77

88
import { Providers } from "@/components/providers"
99

‎apps/web-roo-code/src/components/CookieConsent.tsx‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
"use client"
2+
3+
import React from "react"
4+
import ReactCookieConsent from "react-cookie-consent"
5+
import { useTheme } from "next-themes"
6+
7+
export interface CookieConsentProps {
8+
/**
9+
* The text to display in the cookie consent banner
10+
*/
11+
text?: string
12+
/**
13+
* The text for the accept button
14+
*/
15+
buttonText?: string
16+
/**
17+
* Callback when cookies are accepted
18+
*/
19+
onAccept?: () => void
20+
/**
21+
* Callback when cookies are declined
22+
*/
23+
onDecline?: () => void
24+
/**
25+
* Enable decline button
26+
*/
27+
enableDeclineButton?: boolean
28+
/**
29+
* The text for the decline button
30+
*/
31+
declineButtonText?: string
32+
/**
33+
* Additional className for custom styling
34+
*/
35+
className?: string
36+
/**
37+
* Cookie name to store consent
38+
*/
39+
cookieName?: string
40+
/**
41+
* Debug mode - always show banner
42+
*/
43+
debug?: boolean
44+
}
45+
46+
/**
47+
* GDPR-compliant cookie consent banner component
48+
* Uses Tailwind classes for styling and next-themes for dark mode detection
49+
*/
50+
export function CookieConsent({
51+
text = "Like pretty much everyone else, we use cookies. We assume you're OK with it, but you can opt out if you want.",
52+
buttonText = "Accept",
53+
onAccept,
54+
onDecline,
55+
enableDeclineButton = true,
56+
declineButtonText = "Decline",
57+
className = "",
58+
cookieName = "roo-code-cookie-consent",
59+
debug = false,
60+
}: CookieConsentProps) {
61+
const { theme } = useTheme()
62+
const isDarkMode = theme === "dark"
63+
64+
// Tailwind classes for the container
65+
const containerClasses = `
66+
fixed bottom-0 left-0 right-0 z-[999]
67+
${isDarkMode ? "bg-black/95" : "bg-white/95"}
68+
backdrop-blur-xl
69+
${isDarkMode ? "border-t-neutral-800" : "border-t-gray-200"}
70+
border-t
71+
px-4 py-4 md:px-8 md:py-4
72+
flex flex-wrap items-center justify-between gap-4
73+
text-sm font-sans
74+
${className}
75+
`.trim()
76+
77+
// Tailwind classes for the accept button
78+
const acceptButtonClasses = `
79+
${isDarkMode ? "bg-white text-black" : "bg-black text-white"}
80+
hover:opacity-90
81+
transition-opacity
82+
rounded-md
83+
px-4 py-2
84+
text-sm font-medium
85+
cursor-pointer
86+
focus:outline-none focus:ring-2 focus:ring-offset-2
87+
${isDarkMode ? "focus:ring-white" : "focus:ring-black"}
88+
`.trim()
89+
90+
// Tailwind classes for the decline button
91+
const declineButtonClasses = `
92+
bg-transparent
93+
${isDarkMode ? "text-white border-neutral-800" : "text-black border-gray-200"}
94+
border
95+
hover:opacity-90
96+
transition-opacity
97+
rounded-md
98+
px-4 py-2
99+
text-sm font-medium
100+
cursor-pointer
101+
focus:outline-none focus:ring-2 focus:ring-offset-2
102+
${isDarkMode ? "focus:ring-white" : "focus:ring-black"}
103+
`.trim()
104+
105+
// Tailwind classes for the content
106+
const contentClasses = `
107+
flex-1
108+
${isDarkMode ? "text-neutral-200" : "text-gray-700"}
109+
mr-4
110+
`.trim()
111+
112+
return (
113+
<div role="banner" aria-label="Cookie consent banner" aria-live="polite">
114+
<ReactCookieConsent
115+
location="bottom"
116+
buttonText={buttonText}
117+
declineButtonText={declineButtonText}
118+
cookieName={cookieName}
119+
expires={365}
120+
enableDeclineButton={enableDeclineButton}
121+
onAccept={onAccept}
122+
onDecline={onDecline}
123+
debug={debug}
124+
containerClasses={containerClasses}
125+
buttonClasses={acceptButtonClasses}
126+
declineButtonClasses={declineButtonClasses}
127+
contentClasses={contentClasses}
128+
disableStyles={true}
129+
ariaAcceptLabel={`Accept ${buttonText}`}
130+
ariaDeclineLabel={`Decline ${declineButtonText}`}>
131+
{text}
132+
</ReactCookieConsent>
133+
</div>
134+
)
135+
}
136+
137+
// Re-export the component as default as well
138+
export default CookieConsent

‎packages/cookie-consent/package.json‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

0 commit comments

Comments
 (0)