feat: establish UI foundation with Tailwind CSS, shadcn/ui, Recharts and D3#11
feat: establish UI foundation with Tailwind CSS, shadcn/ui, Recharts and D3#11Sarthakkad05 wants to merge 4 commits intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughAdds Tailwind/PostCSS and shadcn UI configuration, new runtime and dev dependencies, path aliases (TS + Vite), global Tailwind-driven styles, CN utility, reusable UI primitives (Button, Badge, Card), and two chart demos (Recharts + D3). Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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: 4
🤖 Fix all issues with AI agents
In `@src/App.tsx`:
- Line 20: In App.tsx update the hardcoded utility classes inside the JSX (the
inner container div and the element using text-green-500) to use semantic tokens
so theming works: replace the bg-zinc-900 on the inner <div className="w-full
bg-zinc-900 rounded-2xl p-6 shadow-lg"> with a semantic background token such as
bg-card or bg-muted, and replace the text-green-500 usage with text-primary;
ensure these changes are made inside the App component’s JSX so the container
and its text follow the CSS-variable theme tokens.
In `@tailwind.config.js`:
- Around line 15-55: Tailwind config uses many CSS variables that are not
defined in your global CSS; add missing :root variable definitions in your main
stylesheet (e.g., the file that currently defines --radius, --primary, --accent,
--background, --foreground, --border) so all references in tailwind.config.js
resolve; specifically define --card, --card-foreground, --popover,
--popover-foreground, --primary-foreground, --accent-foreground, --secondary,
--secondary-foreground, --muted, --muted-foreground, --destructive,
--destructive-foreground, --input, --ring, and --chart-1 through --chart-5 (with
sensible HSL values or CSS variables pointing to theme values) to prevent
invalid hsl() outputs for classes like bg-card, text-muted-foreground, and
border-input.
- Line 59: The tailwind config is using CommonJS require in an ESM file: replace
the require("tailwindcss-animate") usage with an ESM import and use that
identifier in the plugins array; specifically add an import like import animate
from "tailwindcss-animate" at the top of the file (the file uses export default)
and change plugins: [require("tailwindcss-animate")] to plugins: [animate] so
the module works under "type":"module".
In `@tsconfig.json`:
- Around line 2-7: Add the same path mapping defined in the root tsconfig to
tsconfig.app.json by adding compilerOptions.baseUrl set to "." and
compilerOptions.paths with the "@/*" -> ["src/*"] mapping inside
tsconfig.app.json so referenced builds and tsc --build/type-checking in CI pick
up the alias; update the tsconfig.app.json's "compilerOptions" section (the file
name to edit is tsconfig.app.json and keys to add are baseUrl and paths with
"@/*") accordingly.
🧹 Nitpick comments (9)
src/components/charts/TestChart.tsx (2)
34-34: Consider using the theme's primary color variable instead of a hardcoded hex.The stroke color
#2e8b57duplicates the primary brand color defined as a CSS variable (--primary) inindex.css. If the brand color changes, this will fall out of sync.Since Recharts accepts any CSS color string, you can reference the variable:
Suggested change
- <Line type="monotone" dataKey="value" stroke="#2e8b57" /> + <Line type="monotone" dataKey="value" stroke="hsl(var(--primary))" />
9-39: Inconsistent indentation throughout the file.The import block (lines 9–16) uses 4-space indentation for its members, while the component body and module-level
data(lines 18–39) are indented by an extra 2 spaces relative to the top level. This suggests the code was pasted with a stray indent. Consider normalizing to a consistent style.src/index.css (2)
1-3: Static analysis false positives — configure linters for Tailwind.The Biome and Stylelint errors about unknown
@tailwindand@applyat-rules are false positives. These are standard Tailwind CSS directives processed by PostCSS before reaching the browser. To suppress these:
- Biome: Enable
tailwindDirectivesin the CSS parser options.- Stylelint: If using
scss/at-rule-no-unknown, addtailwind,apply, andlayerto theignoreAtRuleslist, or switch tostylelint-config-tailwindcss.
20-38: Dark mode token set is incomplete.The
.darkblock only defines--background,--foreground, and--border, but the light theme also defines--primary,--accent, and--radius. When dark mode is eventually enabled,--primaryand--accentwill fall through to the:rootvalues, which may or may not be appropriate for dark backgrounds. Consider adding dark-mode overrides for these as well — even if just re-stating the same values to make the intent explicit.src/components/ui/badge.tsx (1)
4-4: Prefer the@/path alias over relative imports with.tsextension.The project configures
@→./srcin both Vite and TypeScript, andcomponents.jsondeclares"utils": "@/lib/utils". Using the alias is more consistent and avoids brittle relative paths. The explicit.tsextension in imports is also unconventional with bundlers like Vite. Same applies tobutton.tsx(line 5) andcard.tsx(line 3).Suggested fix
-import { cn } from "../../lib/utils.ts" +import { cn } from "@/lib/utils"src/components/ui/button.tsx (1)
43-55:forwardRefis unnecessary with React 19.Since the project uses React 19,
refis a regular prop andforwardRefis no longer needed. This applies to all the Card sub-components incard.tsxas well. Not urgent sinceforwardRefstill works, but worth cleaning up when convenient.Example simplification
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button" - return ( - <Comp - className={cn(buttonVariants({ variant, size, className }))} - ref={ref} - {...props} - /> - ) - } -) -Button.displayName = "Button" +function Button({ className, variant, size, asChild = false, ref, ...props }: ButtonProps & { ref?: React.Ref<HTMLButtonElement> }) { + const Comp = asChild ? Slot : "button" + return ( + <Comp + className={cn(buttonVariants({ variant, size, className }))} + ref={ref} + {...props} + /> + ) +}src/App.tsx (1)
14-16: Demo button has no interaction.The "Ready to Explore" button has no
onClickhandler or link behavior. Fine for a demo, but consider adding a brief comment ordisabledstate to signal it's a placeholder.src/components/ui/card.tsx (1)
32-42: Consider using a heading element forCardTitle.
CardTitlerenders a<div>, which hurts accessibility since screen readers won't announce it as a heading. Rendering as an<h3>(or accepting anasprop) would improve semantics at no cost.package.json (1)
21-21:tailwindcss-animateshould be a devDependency.It's a Tailwind CSS plugin consumed only at build time (referenced in
tailwind.config.js), similar totailwindcssandpostcsswhich are correctly placed indevDependencies.Suggested fix
Move from
dependenciestodevDependencies:"dependencies": { ... - "tailwindcss-animate": "^1.0.7" }, "devDependencies": { ... + "tailwindcss-animate": "^1.0.7", "typescript": "~5.9.3",
tailwind.config.js
Outdated
| colors: { | ||
| background: 'hsl(var(--background))', | ||
| foreground: 'hsl(var(--foreground))', | ||
| card: { | ||
| DEFAULT: 'hsl(var(--card))', | ||
| foreground: 'hsl(var(--card-foreground))' | ||
| }, | ||
| popover: { | ||
| DEFAULT: 'hsl(var(--popover))', | ||
| foreground: 'hsl(var(--popover-foreground))' | ||
| }, | ||
| primary: { | ||
| DEFAULT: 'hsl(var(--primary))', | ||
| foreground: 'hsl(var(--primary-foreground))' | ||
| }, | ||
| secondary: { | ||
| DEFAULT: 'hsl(var(--secondary))', | ||
| foreground: 'hsl(var(--secondary-foreground))' | ||
| }, | ||
| muted: { | ||
| DEFAULT: 'hsl(var(--muted))', | ||
| foreground: 'hsl(var(--muted-foreground))' | ||
| }, | ||
| accent: { | ||
| DEFAULT: 'hsl(var(--accent))', | ||
| foreground: 'hsl(var(--accent-foreground))' | ||
| }, | ||
| destructive: { | ||
| DEFAULT: 'hsl(var(--destructive))', | ||
| foreground: 'hsl(var(--destructive-foreground))' | ||
| }, | ||
| border: 'hsl(var(--border))', | ||
| input: 'hsl(var(--input))', | ||
| ring: 'hsl(var(--ring))', | ||
| chart: { | ||
| '1': 'hsl(var(--chart-1))', | ||
| '2': 'hsl(var(--chart-2))', | ||
| '3': 'hsl(var(--chart-3))', | ||
| '4': 'hsl(var(--chart-4))', | ||
| '5': 'hsl(var(--chart-5))' | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Compare CSS variables referenced in tailwind.config.js vs defined in index.css
echo "=== Variables referenced in tailwind.config.js ==="
rg -oP 'var\(--([a-z0-9-]+)\)' tailwind.config.js | sort -u
echo ""
echo "=== Variables defined in src/index.css ==="
rg -oP '--([a-z0-9-]+):' src/index.css | sort -uRepository: AOSSIE-Org/OrgExplorer
Length of output: 1046
🏁 Script executed:
# Read the full tailwind.config.js to understand context
echo "=== Full tailwind.config.js ==="
cat -n tailwind.config.js
echo ""
echo "=== Full src/index.css ==="
cat -n src/index.cssRepository: AOSSIE-Org/OrgExplorer
Length of output: 3567
🏁 Script executed:
# Check if there are other CSS files that might define these variables
echo "=== Searching for CSS files ==="
fd -e css
echo ""
echo "=== Checking for global styles or CSS variable definitions elsewhere ==="
rg 'var\(--' --type=css | head -50Repository: AOSSIE-Org/OrgExplorer
Length of output: 197
🏁 Script executed:
# Check App.css for variable definitions
echo "=== Content of src/App.css ==="
cat -n src/App.cssRepository: AOSSIE-Org/OrgExplorer
Length of output: 148
🏁 Script executed:
# Double-check by searching for all CSS variable definitions in the entire codebase
echo "=== All CSS variable definitions in codebase ==="
rg --type=css '\-\-[a-z0-9\-]+:' | head -100Repository: AOSSIE-Org/OrgExplorer
Length of output: 523
Add missing CSS variable definitions to src/index.css.
The Tailwind config references 26 CSS variables, but src/index.css only defines 6 (--radius, --primary, --accent, --background, --foreground, --border). Missing definitions include: --card, --card-foreground, --popover, --popover-foreground, --secondary, --secondary-foreground, --muted, --muted-foreground, --destructive, --destructive-foreground, --input, --ring, --chart-1 through --chart-5, and the -foreground variants of --primary and --accent.
Any utility class referencing an undefined variable (e.g., bg-card, text-muted-foreground, border-input) will result in invalid hsl() values and broken styling.
🤖 Prompt for AI Agents
In `@tailwind.config.js` around lines 15 - 55, Tailwind config uses many CSS
variables that are not defined in your global CSS; add missing :root variable
definitions in your main stylesheet (e.g., the file that currently defines
--radius, --primary, --accent, --background, --foreground, --border) so all
references in tailwind.config.js resolve; specifically define --card,
--card-foreground, --popover, --popover-foreground, --primary-foreground,
--accent-foreground, --secondary, --secondary-foreground, --muted,
--muted-foreground, --destructive, --destructive-foreground, --input, --ring,
and --chart-1 through --chart-5 (with sensible HSL values or CSS variables
pointing to theme values) to prevent invalid hsl() outputs for classes like
bg-card, text-muted-foreground, and border-input.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/index.css`:
- Around line 20-55: Add the missing CSS variables referenced by Badge, Button
and Card and mirror them for dark mode: define --ring, --input, --secondary,
--secondary-foreground, --destructive, --destructive-foreground, --card,
--card-foreground, and --muted-foreground inside :root and .dark (alias sensible
HSL values to existing primary/accent/background/foreground palettes so values
like hsl(var(--secondary)) and hsl(var(--destructive)) resolve correctly); then
extend theme.extend.colors in tailwind.config.ts to include matching color
tokens (secondary, secondary-foreground, destructive, destructive-foreground,
input, ring, card, card-foreground, muted-foreground) pointing to the
corresponding CSS variable HSL usage so utilities like bg-secondary,
text-destructive-foreground, border-input and focus:ring-ring resolve to valid
hsl() colors used by badge.tsx, button.tsx and card.tsx.
🧹 Nitpick comments (1)
src/index.css (1)
1-3: Configure linters to recognize Tailwind directives.Biome and Stylelint both flag
@tailwindand@applyas unknown at-rules. These are false positives for a Tailwind project. To silence them:
- Biome: enable
tailwindDirectivesin the CSS parser options.- Stylelint: use
stylelint-config-tailwindcssor add@tailwind/@apply/@layertoignoreAtRulesinscss/at-rule-no-unknown.
| @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.
🧩 Analysis chain
🏁 Script executed:
find . -type f -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" | grep -E "(component|src)" | head -20Repository: AOSSIE-Org/OrgExplorer
Length of output: 241
🏁 Script executed:
# Find UI components directory
find . -type d -name "ui" | head -5Repository: AOSSIE-Org/OrgExplorer
Length of output: 85
🏁 Script executed:
# Check if components/ui directory exists and list files
ls -la src/components/ui/ 2>/dev/null || echo "Directory not found, searching for component files..."
fd -t f '\.tsx?$' src/components/ 2>/dev/null || fd -t f '\.tsx?$' components/Repository: AOSSIE-Org/OrgExplorer
Length of output: 474
🏁 Script executed:
cat -n src/components/ui/badge.tsxRepository: AOSSIE-Org/OrgExplorer
Length of output: 1464
🏁 Script executed:
cat -n src/components/ui/button.tsxRepository: AOSSIE-Org/OrgExplorer
Length of output: 2373
🏁 Script executed:
cat -n src/components/ui/card.tsxRepository: AOSSIE-Org/OrgExplorer
Length of output: 2432
🏁 Script executed:
# Check for tailwind config
cat -n tailwind.config.* 2>/dev/null || echo "No tailwind config found"Repository: AOSSIE-Org/OrgExplorer
Length of output: 1309
🏁 Script executed:
# Check src/index.css for all variable definitions
cat -n src/index.cssRepository: AOSSIE-Org/OrgExplorer
Length of output: 2028
Add missing CSS variables and Tailwind color definitions.
The Card, Badge, and Button components reference CSS variables that are not defined in src/index.css and not configured in tailwind.config.ts. Specifically:
badge.tsxuses--ring,--secondary,--secondary-foreground,--destructive,--destructive-foregroundbutton.tsxuses--ring,--input,--secondary,--secondary-foreground,--destructive,--destructive-foregroundcard.tsxuses--card,--card-foreground,--muted-foreground
Without these variables and corresponding Tailwind color definitions, utility classes like bg-secondary, text-destructive-foreground, border-input, and focus:ring-ring will resolve to invalid hsl() values, resulting in broken styling at runtime.
Update both src/index.css (add CSS variables to :root and .dark) and tailwind.config.ts (add color entries to theme.extend.colors). Start with reasonable defaults: alias secondary/muted to accent-adjacent colors, destructive to a red palette, input/ring to primary-related values, and card to the background/foreground pair.
🧰 Tools
🪛 Stylelint (17.2.0)
[error] 30-30: Unexpected empty line before custom property (custom-property-empty-line-before)
(custom-property-empty-line-before)
[error] 33-33: Unexpected empty line before custom property (custom-property-empty-line-before)
(custom-property-empty-line-before)
[error] 35-35: Unexpected empty line before custom property (custom-property-empty-line-before)
(custom-property-empty-line-before)
[error] 44-44: Unexpected empty line before custom property (custom-property-empty-line-before)
(custom-property-empty-line-before)
[error] 47-47: Unexpected empty line before custom property (custom-property-empty-line-before)
(custom-property-empty-line-before)
[error] 50-50: Unexpected empty line before custom property (custom-property-empty-line-before)
(custom-property-empty-line-before)
[error] 52-52: Unexpected empty line before custom property (custom-property-empty-line-before)
(custom-property-empty-line-before)
🤖 Prompt for AI Agents
In `@src/index.css` around lines 20 - 55, Add the missing CSS variables referenced
by Badge, Button and Card and mirror them for dark mode: define --ring, --input,
--secondary, --secondary-foreground, --destructive, --destructive-foreground,
--card, --card-foreground, and --muted-foreground inside :root and .dark (alias
sensible HSL values to existing primary/accent/background/foreground palettes so
values like hsl(var(--secondary)) and hsl(var(--destructive)) resolve
correctly); then extend theme.extend.colors in tailwind.config.ts to include
matching color tokens (secondary, secondary-foreground, destructive,
destructive-foreground, input, ring, card, card-foreground, muted-foreground)
pointing to the corresponding CSS variable HSL usage so utilities like
bg-secondary, text-destructive-foreground, border-input and focus:ring-ring
resolve to valid hsl() colors used by badge.tsx, button.tsx and card.tsx.
There was a problem hiding this comment.
🧹 Nitpick comments (4)
src/components/charts/D3Demo.tsx (2)
29-80: Missing cleanup return inuseEffect.If React strict-mode double-invokes the effect,
selectAll("*").remove()at line 41 handles stale content, so this isn't broken. Still, returning a cleanup function is the idiomatic pattern and avoids surprises if the effect becomes more complex later.♻️ Suggested addition
// Y Axis 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, Add a cleanup function to the existing useEffect so stale D3 DOM is explicitly removed when the component unmounts or the effect is re-run: capture the svg selection (the variable svg created via d3.select(svgRef.current)) and return a () => { svg.selectAll("*").remove(); } from useEffect (keeping the current dependency array) so the cleanup mirrors the initial removal and prevents leaked DOM or listeners associated with the line/chart rendering.
32-39: Fixed SVG dimensions inside a fluid container — chart won't be responsive.The SVG is hard-coded to 500×250 px (lines 32-33) while the wrapper
divisw-full(line 83). On viewports narrower than 500 px the chart will overflow; on wider ones it won't scale up. Consider using aviewBoxand letting CSS control the actual size:♻️ Suggested fix
- const svg = d3 - .select(svgRef.current) - .attr("width", width) - .attr("height", height) + const svg = d3 + .select(svgRef.current) + .attr("viewBox", `0 0 ${width} ${height}`) + .attr("preserveAspectRatio", "xMidYMid meet")- <svg ref={svgRef} /> + <svg ref={svgRef} className="w-full h-auto" />Also applies to: 82-85
🤖 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 32 - 39, The SVG is hard-coded to 500×250 which breaks responsiveness in the D3Demo component; update the SVG created via svgRef so it uses a viewBox and CSS-controlled sizing instead of fixed px attributes: remove the hard-coded .attr("width", width).attr("height", height) and instead set .attr("viewBox", `0 0 ${width} ${height}`) and .attr("preserveAspectRatio", "xMidYMid meet"), and ensure the SVG gets CSS width:100% (or style width: "100%" and height: "auto") so the wrapper div (w-full) controls its display; if you need to preserve exact aspect or adapt margins on resize, add a resize handler that recalculates scales/dimensions and redraws using svgRef and the same viewBox reference.package.json (2)
12-22: Consider pinning exact versions (or narrower ranges) for UI foundation deps.Several deps use wide caret ranges (e.g.,
"d3": "^7.9.0","recharts": "^3.7.0"). For a foundation layer that the rest of the app builds on, tighter version constraints reduce the risk of unexpected breaking changes sneaking in via transitive updates.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` around lines 12 - 22, Update the loose caret ranges for UI foundation dependencies in package.json to pinned or narrower constraints: replace entries like "d3": "^7.9.0", "recharts": "^3.7.0", "react": "^19.2.0", "react-dom": "^19.2.0", "@radix-ui/react-slot": "^1.2.4", "lucide-react": "^0.563.0", "tailwind-merge": "^3.4.0", "tailwindcss-animate": "^1.0.7", "class-variance-authority": "^0.7.1", and "clsx": "^2.1.1" with either exact versions (e.g. "d3": "7.9.0") or narrower ranges (e.g. "~7.9.0"), then run your package manager to update the lockfile (npm/yarn/pnpm) so transitive updates are fixed; ensure tests pass and adjust any packages that require minor bumps after pinning.
16-20: Two full charting libraries shipped as production dependencies.Both
d3(≈250 kB min) andrecharts(which itself bundles d3 modules) are added. For a demo this is fine, but before shipping to production, pick one to avoid a significant bundle-size penalty. If Recharts covers the project's needs,d3can be dropped (and vice-versa).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` around lines 16 - 20, The project currently ships both charting libraries (d3 and recharts) which duplicates functionality and increases bundle size; choose one (either remove "d3" or remove "recharts") and remove it from package.json, then update imports/usages across the codebase (search for imports referencing "d3", "d3-*" or "recharts" and related components) to rely on the chosen library only, remove any adapter/helper modules tied to the removed library, run the package manager uninstall (npm/yarn) to update lockfile, rebuild and verify with your bundle analyzer to confirm bundle-size reduction.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@package.json`:
- Around line 12-22: Update the loose caret ranges for UI foundation
dependencies in package.json to pinned or narrower constraints: replace entries
like "d3": "^7.9.0", "recharts": "^3.7.0", "react": "^19.2.0", "react-dom":
"^19.2.0", "@radix-ui/react-slot": "^1.2.4", "lucide-react": "^0.563.0",
"tailwind-merge": "^3.4.0", "tailwindcss-animate": "^1.0.7",
"class-variance-authority": "^0.7.1", and "clsx": "^2.1.1" with either exact
versions (e.g. "d3": "7.9.0") or narrower ranges (e.g. "~7.9.0"), then run your
package manager to update the lockfile (npm/yarn/pnpm) so transitive updates are
fixed; ensure tests pass and adjust any packages that require minor bumps after
pinning.
- Around line 16-20: The project currently ships both charting libraries (d3 and
recharts) which duplicates functionality and increases bundle size; choose one
(either remove "d3" or remove "recharts") and remove it from package.json, then
update imports/usages across the codebase (search for imports referencing "d3",
"d3-*" or "recharts" and related components) to rely on the chosen library only,
remove any adapter/helper modules tied to the removed library, run the package
manager uninstall (npm/yarn) to update lockfile, rebuild and verify with your
bundle analyzer to confirm bundle-size reduction.
In `@src/components/charts/D3Demo.tsx`:
- Around line 29-80: Add a cleanup function to the existing useEffect so stale
D3 DOM is explicitly removed when the component unmounts or the effect is
re-run: capture the svg selection (the variable svg created via
d3.select(svgRef.current)) and return a () => { svg.selectAll("*").remove(); }
from useEffect (keeping the current dependency array) so the cleanup mirrors the
initial removal and prevents leaked DOM or listeners associated with the
line/chart rendering.
- Around line 32-39: The SVG is hard-coded to 500×250 which breaks
responsiveness in the D3Demo component; update the SVG created via svgRef so it
uses a viewBox and CSS-controlled sizing instead of fixed px attributes: remove
the hard-coded .attr("width", width).attr("height", height) and instead set
.attr("viewBox", `0 0 ${width} ${height}`) and .attr("preserveAspectRatio",
"xMidYMid meet"), and ensure the SVG gets CSS width:100% (or style width: "100%"
and height: "auto") so the wrapper div (w-full) controls its display; if you
need to preserve exact aspect or adapt margins on resize, add a resize handler
that recalculates scales/dimensions and redraws using svgRef and the same
viewBox reference.
Sarthakkad05
changed the title
github-actions
bot
added
size/XL
enhancement
|
It appears the "Sync PR Labels / sync-labels (pull_request)" workflow is failing with: 403: Resource not accessible by integration From the logs, it seems the workflow is attempting to add file-based labels (javascript, configuration, dependencies, frontend), but since this PR originates from a fork, the pull_request event does not grant write permissions to modify labels. |
1 participant
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
New Features
Style
Chores