feat: establish UI/UX foundation with Tailwind CSS, shadcn, Recharts and d3#29
Open
Sarthakkad05 wants to merge 1 commit intoAOSSIE-Org:mainfrom
Open
feat: establish UI/UX foundation with Tailwind CSS, shadcn, Recharts and d3#29Sarthakkad05 wants to merge 1 commit intoAOSSIE-Org:mainfrom
Sarthakkad05 wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
github-actions
bot
added
enhancement
WalkthroughA comprehensive UI and styling foundation is established for the project. This includes Tailwind CSS and PostCSS configuration, shadcn/ui component patterns (button, badge, card), chart components using Recharts and D3, a DemoShowcase component displaying demo implementations, utility functions for class name merging, and TypeScript/Vite module path aliases for improved imports. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/App.css`:
- Line 2: Replace the static mobile-unfriendly min-height declaration
"min-height: 100vh;" in src/App.css with a dynamic viewport height pattern:
provide "min-height: 100dvh" and keep "min-height: 100vh" as a fallback so
browsers that don't support dvh still work; update the rule where "min-height:
100vh" appears to use the fallback-first pattern (100vh) then override with
100dvh for supporting browsers.
In `@src/components/charts/D3Demo.tsx`:
- Around line 18-24: The array "data" in D3Demo.tsx uses hardcoded English month
strings (DataPoint[] with month values "Jan", "Feb", etc.); add a concise inline
comment above the "data" declaration noting these are demo-only hardcoded
English strings and should be externalized or provided via props/intl for i18n
in production, and optionally update D3Demo to accept month labels through props
or a localization function (e.g., a "labels" prop or using an i18n utility) so
future contributors know how to replace the hardcoded months.
- Around line 82-86: The SVG rendered by the D3Demo component lacks
accessibility attributes; update the JSX for the <svg ref={svgRef} /> in D3Demo
to include role="img" and an aria-label (or aria-labelledby) and render a
<title> element inside the SVG (use a stable id and reference it via
aria-labelledby) so screen readers can announce the chart; source the title text
from a prop or an internal accessibleTitle variable and ensure svgRef usage
remains unchanged.
- Around line 29-80: The useEffect in D3Demo.tsx that manipulates the DOM via
svgRef should return a cleanup function that removes D3-added elements and
clears any event listeners to avoid stale DOM references on unmount or
re-render; inside the effect (where svg is created via
d3.select(svgRef.current)) add and return () => { svg.selectAll("*").remove();
/* also remove any listeners if added, e.g. svg.on(..., null) */ } so the svg
and its handlers are explicitly cleaned up on unmount.
- Around line 60-66: The hardcoded stroke color in the D3 path (.attr("stroke",
"#2e8b57") in D3Demo.tsx) should be replaced with a theme token; update the path
creation to use a CSS variable or Tailwind token instead of the hex literal
(e.g., read a CSS var like --aossie-green or apply a class that defines stroke),
ensure the D3 attr uses that variable or class name so the path stroke is driven
by centralized theme tokens rather than the hardcoded "#2e8b57".
In `@src/components/charts/TestChart.tsx`:
- Around line 18-24: The hard-coded month labels in the TestChart component's
data array should be replaced with localized strings; edit the const data in
src/components/charts/TestChart.tsx to use your i18n lookup instead of literal
"Jan"/"Feb"/... (for example, import your translation hook/function such as
useTranslation or t and replace each month with t('months.jan'),
t('months.feb'), etc., or build data from an array of month keys mapped through
the translator); ensure the chart still receives the same shape ({ month:
<localized string>, value: number }) so rendering code (the TestChart component)
is unchanged.
- Line 34: Replace the hard-coded stroke="#2e8b57" on the Line element in
TestChart with a theme token value: read the app theme via your project's theme
hook (e.g., useTheme in TestChart) and pass the token path (for example
theme.colors.chart.stroke or theme.palette.success/main depending on your theme
shape) into stroke as a JS expression; add the necessary import for the theme
hook and use that token in the Line component so the chart color follows
centralized design tokens.
In `@src/components/common/DemoShowcase.tsx`:
- Around line 24-44: Replace hardcoded user-facing strings in the DemoShowcase
component (the <h1> "Org Explorer", the Button label "Ready to Explore", and the
section <h2> headings "Recharts Example" and "D3 Example (Raw SVG)") with
localization keys from your i18n resource; import and use the app's translation
helper (e.g., t or useTranslation) at the top of the component, add meaningful
keys like demo.title, demo.cta, demo.rechartsTitle, demo.d3Title to the language
JSON/resource files, and update the JSX to render those translated values
instead of literal strings so the UI uses externalized resources.
- Around line 19-50: Replace the top-level non-semantic div wrapper in the
DemoShowcase component with a semantic landmark element: change the outermost
<div className="min-h-screen bg-background text-foreground px-6 py-10"> to a
<main> element with the same className so the DOM uses a proper page landmark;
ensure the component (DemoShowcase) preserves all children (the inner container,
demo sections, TestChart and D3Demo) and their className props exactly while
only swapping the wrapper element to <main>.
In `@src/components/ui/badge.tsx`:
- Line 4: Update the import in Badge component to use the project's path alias
instead of a relative path: replace the relative import of the utility function
cn (import { cn } from "../../lib/utils.ts") with the configured alias import
(import { cn } from "@/lib/utils") so the Badge component consistently uses the
project's path aliases.
In `@src/components/ui/button.tsx`:
- Line 5: Replace the relative import of the `cn` utility in
src/components/ui/button.tsx (currently imported from "../../lib/utils.ts") with
the project path alias import (e.g., "@/lib/utils") to match other components
like Badge and keep imports consistent across the codebase; update the import
statement that references `cn` accordingly.
In `@src/index.css`:
- Around line 20-55: The theme is missing several CSS variables used by
shadcn/ui (add definitions for --ring, --input, --secondary,
--secondary-foreground, --destructive, and --destructive-foreground) in both
:root and the .dark scope so Button/Badge variants render correctly; update the
:root block to define those variables (using HSL or matching semantic tones to
your existing --primary/--accent/--background choices) and add corresponding
dark-mode values inside the .dark selector to ensure consistent colors for focus
rings, inputs, secondary and destructive variants.
In `@tailwind.config.js`:
- Around line 17-38: theme.extend.colors is missing the color tokens used by
Button/Badge (secondary, destructive, ring, input); update the colors object in
tailwind.config.js to add entries for secondary (with DEFAULT and foreground),
destructive (with DEFAULT and foreground), ring, and input (with DEFAULT and
foreground) following the same structure as primary and accent and the existing
chart tokens so the Tailwind classes used by Button and Badge resolve correctly.
In `@vite.config.ts`:
- Around line 3-12: The config uses __dirname in the ESM Vite file causing
ReferenceError; replace that pattern by deriving the directory from
import.meta.url using fileURLToPath to compute the project root before calling
path.resolve for the alias. Update the vite config where resolve.alias is set
(the alias block referencing path.resolve(__dirname, "./src")) to compute a
const like projectDir = path.dirname(fileURLToPath(import.meta.url)) and then
use path.resolve(projectDir, "./src") so alias resolution works in ESM.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (17)
components.jsonpackage.jsonpostcss.config.jssrc/App.csssrc/App.tsxsrc/components/charts/D3Demo.tsxsrc/components/charts/TestChart.tsxsrc/components/common/DemoShowcase.tsxsrc/components/ui/badge.tsxsrc/components/ui/button.tsxsrc/components/ui/card.tsxsrc/index.csssrc/lib/utils.tstailwind.config.jstsconfig.app.jsontsconfig.jsonvite.config.ts
| margin: 0 auto; | ||
| padding: 2rem; | ||
| text-align: center; | ||
| min-height: 100vh; |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Prefer dynamic viewport height for mobile stability.
Use 100dvh (with 100vh fallback) to avoid viewport jump issues on mobile browsers.
♻️ Suggested update
`#root` {
- min-height: 100vh;
+ min-height: 100vh;
+ min-height: 100dvh;
}📝 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
| min-height: 100vh; | |
| `#root` { | |
| min-height: 100vh; | |
| min-height: 100dvh; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/App.css` at line 2, Replace the static mobile-unfriendly min-height
declaration "min-height: 100vh;" in src/App.css with a dynamic viewport height
pattern: provide "min-height: 100dvh" and keep "min-height: 100vh" as a fallback
so browsers that don't support dvh still work; update the rule where
"min-height: 100vh" appears to use the fallback-first pattern (100vh) then
override with 100dvh for supporting browsers.
Comment on lines
+18
to
+24
| const data: DataPoint[] = [ | ||
| { month: "Jan", value: 20 }, | ||
| { month: "Feb", value: 30 }, | ||
| { month: "Mar", value: 25 }, | ||
| { month: "Apr", value: 40 }, | ||
| { month: "May", value: 35 }, | ||
| ] |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Hardcoded English month strings.
Per coding guidelines, user-visible strings should be externalized for i18n. While acceptable for a demo component, consider adding a brief comment noting this limitation for future contributors who may extend this pattern.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/charts/D3Demo.tsx` around lines 18 - 24, The array "data" in
D3Demo.tsx uses hardcoded English month strings (DataPoint[] with month values
"Jan", "Feb", etc.); add a concise inline comment above the "data" declaration
noting these are demo-only hardcoded English strings and should be externalized
or provided via props/intl for i18n in production, and optionally update D3Demo
to accept month labels through props or a localization function (e.g., a
"labels" prop or using an i18n utility) so future contributors know how to
replace the hardcoded months.
Comment on lines
+29
to
+80
| useEffect(() => { | ||
| if (!svgRef.current) return | ||
|
|
||
| const width = 500 | ||
| const height = 250 | ||
| const margin = { top: 20, right: 20, bottom: 40, left: 40 } | ||
|
|
||
| const svg = d3 | ||
| .select(svgRef.current) | ||
| .attr("width", width) | ||
| .attr("height", height) | ||
|
|
||
| svg.selectAll("*").remove() | ||
|
|
||
| const xScale = d3 | ||
| .scalePoint<string>() | ||
| .domain(data.map(d => d.month)) | ||
| .range([margin.left, width - margin.right]) | ||
|
|
||
| const yScale = d3 | ||
| .scaleLinear() | ||
| .domain([0, d3.max(data, d => d.value) ?? 0]) | ||
| .nice() | ||
| .range([height - margin.bottom, margin.top]) | ||
|
|
||
| const line = d3 | ||
| .line<DataPoint>() | ||
| .x(d => xScale(d.month) ?? 0) | ||
| .y(d => yScale(d.value)) | ||
|
|
||
| // Draw line | ||
| svg | ||
| .append("path") | ||
| .datum(data) | ||
| .attr("fill", "none") | ||
| .attr("stroke", "#2e8b57") | ||
| .attr("stroke-width", 2) | ||
| .attr("d", line) | ||
|
|
||
| // X Axis | ||
| svg | ||
| .append("g") | ||
| .attr("transform", `translate(0, ${height - margin.bottom})`) | ||
| .call(d3.axisBottom(xScale)) | ||
|
|
||
| // Y Axis | ||
| svg | ||
| .append("g") | ||
| .attr("transform", `translate(${margin.left}, 0)`) | ||
| .call(d3.axisLeft(yScale)) | ||
|
|
||
| }, []) |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Add cleanup function to useEffect.
Returning a cleanup function is good practice when manipulating the DOM with D3. While svg.selectAll("*").remove() handles re-renders, an explicit cleanup on unmount ensures no stale references remain.
🧹 Proposed cleanup pattern
svg
.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yScale))
+ return () => {
+ svg.selectAll("*").remove()
+ }
}, [])🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/charts/D3Demo.tsx` around lines 29 - 80, The useEffect in
D3Demo.tsx that manipulates the DOM via svgRef should return a cleanup function
that removes D3-added elements and clears any event listeners to avoid stale DOM
references on unmount or re-render; inside the effect (where svg is created via
d3.select(svgRef.current)) add and return () => { svg.selectAll("*").remove();
/* also remove any listeners if added, e.g. svg.on(..., null) */ } so the svg
and its handlers are explicitly cleaned up on unmount.
Comment on lines
+60
to
+66
| svg | ||
| .append("path") | ||
| .datum(data) | ||
| .attr("fill", "none") | ||
| .attr("stroke", "#2e8b57") | ||
| .attr("stroke-width", 2) | ||
| .attr("d", line) |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider using theme tokens for stroke color.
The PR objective mentions centralized theme tokens in index.css aligned with AOSSIE branding. The hardcoded hex color #2e8b57 should reference a CSS variable or Tailwind class for consistency and maintainability.
🎨 Proposed fix using CSS variable
svg
.append("path")
.datum(data)
.attr("fill", "none")
- .attr("stroke", "#2e8b57")
+ .attr("stroke", "var(--color-primary, `#2e8b57`)")
.attr("stroke-width", 2)
.attr("d", line)📝 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
| svg | |
| .append("path") | |
| .datum(data) | |
| .attr("fill", "none") | |
| .attr("stroke", "#2e8b57") | |
| .attr("stroke-width", 2) | |
| .attr("d", line) | |
| svg | |
| .append("path") | |
| .datum(data) | |
| .attr("fill", "none") | |
| .attr("stroke", "var(--color-primary, `#2e8b57`)") | |
| .attr("stroke-width", 2) | |
| .attr("d", line) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/charts/D3Demo.tsx` around lines 60 - 66, The hardcoded stroke
color in the D3 path (.attr("stroke", "#2e8b57") in D3Demo.tsx) should be
replaced with a theme token; update the path creation to use a CSS variable or
Tailwind token instead of the hex literal (e.g., read a CSS var like
--aossie-green or apply a class that defines stroke), ensure the D3 attr uses
that variable or class name so the path stroke is driven by centralized theme
tokens rather than the hardcoded "#2e8b57".
Comment on lines
+82
to
+86
| return ( | ||
| <div className="w-full"> | ||
| <svg ref={svgRef} /> | ||
| </div> | ||
| ) |
There was a problem hiding this comment.
Add basic accessibility attributes to the SVG element.
The chart SVG lacks accessibility features, making it inaccessible to screen readers. Consider adding role, aria-label, and a <title> element for users relying on assistive technologies.
♿ Proposed accessibility improvement
return (
<div className="w-full">
- <svg ref={svgRef} />
+ <svg
+ ref={svgRef}
+ role="img"
+ aria-label="Monthly trend line chart showing values from January to May"
+ >
+ <title>Monthly Trend Chart</title>
+ </svg>
</div>
)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/charts/D3Demo.tsx` around lines 82 - 86, The SVG rendered by
the D3Demo component lacks accessibility attributes; update the JSX for the <svg
ref={svgRef} /> in D3Demo to include role="img" and an aria-label (or
aria-labelledby) and render a <title> element inside the SVG (use a stable id
and reference it via aria-labelledby) so screen readers can announce the chart;
source the title text from a prop or an internal accessibleTitle variable and
ensure svgRef usage remains unchanged.
| import * as React from "react" | ||
| import { cva, type VariantProps } from "class-variance-authority" | ||
|
|
||
| import { cn } from "../../lib/utils.ts" |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider using the configured path alias for consistency.
The project has @/lib/utils alias configured in components.json and tsconfig. Using the alias would improve maintainability and consistency across components.
Suggested change
-import { cn } from "../../lib/utils.ts"
+import { cn } from "@/lib/utils"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/ui/badge.tsx` at line 4, Update the import in Badge component
to use the project's path alias instead of a relative path: replace the relative
import of the utility function cn (import { cn } from "../../lib/utils.ts") with
the configured alias import (import { cn } from "@/lib/utils") so the Badge
component consistently uses the project's path aliases.
| import { Slot } from "@radix-ui/react-slot" | ||
| import { cva, type VariantProps } from "class-variance-authority" | ||
|
|
||
| import { cn } from "../../lib/utils.ts" |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider using the configured path alias for consistency.
Same as the Badge component - using the @/lib/utils alias would align with the project's configured path aliases.
Suggested change
-import { cn } from "../../lib/utils.ts"
+import { cn } from "@/lib/utils"📝 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
| import { cn } from "../../lib/utils.ts" | |
| import { cn } from "@/lib/utils" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/ui/button.tsx` at line 5, Replace the relative import of the
`cn` utility in src/components/ui/button.tsx (currently imported from
"../../lib/utils.ts") with the project path alias import (e.g., "@/lib/utils")
to match other components like Badge and keep imports consistent across the
codebase; update the import statement that references `cn` accordingly.
Comment on lines
+20
to
+55
| @layer base { | ||
| :root { | ||
| --radius: 12px; | ||
|
|
||
| /* Brand Colors (HSL format) */ | ||
| --primary: 146 50% 36%; /* #2e8b57 */ | ||
| --primary-foreground: 0 0% 100%; | ||
| --accent: 47 89% 60%; /* #f4c430 */ | ||
| --accent-foreground: 222 47% 11%; | ||
|
|
||
| --background: 0 0% 100%; | ||
| --foreground: 222 47% 11%; | ||
|
|
||
| --border: 214 32% 91%; | ||
|
|
||
| --chart-1: 142 71% 45%; | ||
| --chart-2: 48 96% 53%; | ||
| --chart-3: 222 47% 11%; | ||
| } | ||
|
|
||
| .dark { | ||
| --background: 222 47% 11%; | ||
| --foreground: 210 40% 98%; | ||
|
|
||
| --primary: 142 71% 45%; | ||
| --primary-foreground: 0 0% 100%; | ||
|
|
||
| --accent: 48 96% 53%; | ||
| --accent-foreground: 222 47% 11%; | ||
|
|
||
| --border: 217 33% 17%; | ||
|
|
||
| --chart-1: 142 71% 45%; | ||
| --chart-2: 48 96% 53%; | ||
| --chart-3: 210 40% 98%; | ||
| } |
There was a problem hiding this comment.
Missing CSS variable definitions for shadcn/ui components.
The Button and Badge components reference several CSS variables that are not defined in this theme: --ring, --input, --secondary, --secondary-foreground, --destructive, and --destructive-foreground. These are required for the component variants to render correctly.
Suggested additions to :root
:root {
--radius: 12px;
/* Brand Colors (HSL format) */
--primary: 146 50% 36%; /* `#2e8b57` */
--primary-foreground: 0 0% 100%;
--accent: 47 89% 60%; /* `#f4c430` */
--accent-foreground: 222 47% 11%;
--background: 0 0% 100%;
--foreground: 222 47% 11%;
--border: 214 32% 91%;
+ --input: 214 32% 91%;
+ --ring: 146 50% 36%;
+
+ --secondary: 210 40% 96%;
+ --secondary-foreground: 222 47% 11%;
+
+ --destructive: 0 84% 60%;
+ --destructive-foreground: 0 0% 100%;
--chart-1: 142 71% 45%;
--chart-2: 48 96% 53%;
--chart-3: 222 47% 11%;
}Similarly, add corresponding dark mode values in the .dark selector.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/index.css` around lines 20 - 55, The theme is missing several CSS
variables used by shadcn/ui (add definitions for --ring, --input, --secondary,
--secondary-foreground, --destructive, and --destructive-foreground) in both
:root and the .dark scope so Button/Badge variants render correctly; update the
:root block to define those variables (using HSL or matching semantic tones to
your existing --primary/--accent/--background choices) and add corresponding
dark-mode values inside the .dark selector to ensure consistent colors for focus
rings, inputs, secondary and destructive variants.
Comment on lines
+17
to
+38
| colors: { | ||
| background: "hsl(var(--background))", | ||
| foreground: "hsl(var(--foreground))", | ||
|
|
||
| primary: { | ||
| DEFAULT: "hsl(var(--primary))", | ||
| foreground: "hsl(var(--primary-foreground))", | ||
| }, | ||
|
|
||
| accent: { | ||
| DEFAULT: "hsl(var(--accent))", | ||
| foreground: "hsl(var(--accent-foreground))", | ||
| }, | ||
|
|
||
| border: "hsl(var(--border))", | ||
|
|
||
| chart: { | ||
| 1: "hsl(var(--chart-1))", | ||
| 2: "hsl(var(--chart-2))", | ||
| 3: "hsl(var(--chart-3))", | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Add missing color tokens to match shadcn/ui component requirements.
The Button and Badge components use Tailwind classes that reference colors not defined here: secondary, destructive, ring, and input. These need to be added to the theme extension.
Suggested additions to theme.extend.colors
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+
+ ring: "hsl(var(--ring))",
+ input: "hsl(var(--input))",
border: "hsl(var(--border))",
chart: {
},
},📝 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
| colors: { | |
| background: "hsl(var(--background))", | |
| foreground: "hsl(var(--foreground))", | |
| primary: { | |
| DEFAULT: "hsl(var(--primary))", | |
| foreground: "hsl(var(--primary-foreground))", | |
| }, | |
| accent: { | |
| DEFAULT: "hsl(var(--accent))", | |
| foreground: "hsl(var(--accent-foreground))", | |
| }, | |
| border: "hsl(var(--border))", | |
| chart: { | |
| 1: "hsl(var(--chart-1))", | |
| 2: "hsl(var(--chart-2))", | |
| 3: "hsl(var(--chart-3))", | |
| }, | |
| }, | |
| colors: { | |
| background: "hsl(var(--background))", | |
| foreground: "hsl(var(--foreground))", | |
| primary: { | |
| DEFAULT: "hsl(var(--primary))", | |
| foreground: "hsl(var(--primary-foreground))", | |
| }, | |
| accent: { | |
| DEFAULT: "hsl(var(--accent))", | |
| foreground: "hsl(var(--accent-foreground))", | |
| }, | |
| secondary: { | |
| DEFAULT: "hsl(var(--secondary))", | |
| foreground: "hsl(var(--secondary-foreground))", | |
| }, | |
| destructive: { | |
| DEFAULT: "hsl(var(--destructive))", | |
| foreground: "hsl(var(--destructive-foreground))", | |
| }, | |
| ring: "hsl(var(--ring))", | |
| input: "hsl(var(--input))", | |
| border: "hsl(var(--border))", | |
| chart: { | |
| 1: "hsl(var(--chart-1))", | |
| 2: "hsl(var(--chart-2))", | |
| 3: "hsl(var(--chart-3))", | |
| }, | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@tailwind.config.js` around lines 17 - 38, theme.extend.colors is missing the
color tokens used by Button/Badge (secondary, destructive, ring, input); update
the colors object in tailwind.config.js to add entries for secondary (with
DEFAULT and foreground), destructive (with DEFAULT and foreground), ring, and
input (with DEFAULT and foreground) following the same structure as primary and
accent and the existing chart tokens so the Tailwind classes used by Button and
Badge resolve correctly.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
closes #17
UI Foundation Setup for Org Explorer
This PR establishes the foundational UI stack for Org Explorer, enabling consistent, scalable, and maintainable frontend development moving forward.
What This PR Introduces
1. Tailwind CSS Setup
index.css2. shadcn/ui
ButtonCardBadge3. Recharts Integration
TestChartcomponent to validate chart rendering4. D3 Integration (Low-Level Visualization Support)
D3Democomponent to demonstrate raw SVG rendering.5. Added clear, structured comments across demo components to:
Why This Matters
Org Explorer is a UI-driven platform (dashboards, charts, repo cards, governance views).
This PR creates a scalable design system foundation before introducing business logic.
Checklist
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.
Summary by CodeRabbit
Release Notes
New Features
Style
Chores