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
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