feat: add Org Explorer logo with AOSSIE-aligned branding#7
feat: add Org Explorer logo with AOSSIE-aligned branding#7Zahnentferner merged 1 commit intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughThe PR introduces shadcn UI component library setup with Tailwind CSS theming infrastructure, adding pre-built UI components (Button, Badge, Card), a recharts-based TestChart component, utility functions for class merging, and configuration for path aliases and PostCSS processing. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 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 |
|
Hi @Zahnentferner, could you please review this when you get a chance? I am happy to make any necessary changes. |
github-actions
bot
added
configuration
dependencies
frontend
javascript
size/XL
and removed
size/XS
size/XL
labels
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@package.json`:
- Around line 29-35: tailwind.config.js mixes CJS require with ESM export
causing runtime errors; replace the require("tailwindcss-animate") call by
adding an ESM import (import animate from "tailwindcss-animate") at the top and
update the plugins array to reference the imported animate variable (instead of
require(...)); ensure you remove any require usage and keep the existing export
default configuration intact so the plugins array uses animate.
In `@src/App.tsx`:
- Line 20: The div in App (the JSX with className="w-full bg-zinc-900
rounded-2xl p-6 shadow-lg") uses a hardcoded dark background that breaks
light-mode theming; replace the bg-zinc-900 token with the theme-aware CSS
variable-based token (e.g. use the component's background token such as the
--card variable via a utility that maps to it, and ensure text uses
--card-foreground) so the card follows light/dark themes, and add the missing
--card and --card-foreground token definitions to index.css; update the
className string on that element (and any sibling card elements) to reference
the theme token instead of bg-zinc-900 and verify colors render correctly in
both themes.
In `@src/index.css`:
- Around line 20-38: The theme is missing many CSS custom properties used by
shadcn/ui (referenced in button.tsx and card.tsx); update :root and .dark blocks
to define the missing tokens (and their dark-mode counterparts): add variables
such as --primary-foreground, --destructive, --destructive-foreground,
--secondary, --secondary-foreground, --accent-foreground, --border-input (or
--input-border), --ring, --bg-card (or --card), --card-foreground, and
--muted-foreground with appropriate HSL values derived from your existing
palette so bg-primary / text-primary-foreground / bg-destructive /
text-destructive-foreground / bg-secondary / text-secondary-foreground /
bg-accent / text-accent-foreground / border-input / ring-ring / bg-card /
text-card-foreground / text-muted-foreground resolve correctly in both :root and
.dark scopes.
In `@tailwind.config.js`:
- Line 59: Replace the CommonJS require call in the Tailwind config with an ESM
import: add an ESM import for the package (e.g., import tailwindcssAnimate from
'tailwindcss-animate') at the top of the file and then use that imported
identifier in the plugins array instead of require("tailwindcss-animate");
update the export (e.g., export default ...) if necessary so the file remains a
valid ES module and the plugins array references the imported symbol.
In `@tsconfig.json`:
- Around line 2-7: The root tsconfig's "paths" alias isn't inherited by
referenced projects, so update tsconfig.app.json to add a compilerOptions block
with baseUrl set to "." and a paths entry mapping "@/*" to "../src/*" (i.e., add
"compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["../src/*"] } }) so IDEs
and tsc recognize the `@/`* alias when compiling the app project.
🧹 Nitpick comments (6)
src/components/ui/badge.tsx (1)
4-4: Use the@/path alias instead of a relative import.The project just set up the
@/*alias (invite.config.tsandtsconfig.json). Prefer@/lib/utilsover../../lib/utils.tsfor consistency and maintainability. Also, importing with an explicit.tsextension is non-standard for bundled TypeScript projects.Suggested fix
-import { cn } from "../../lib/utils.ts" +import { cn } from "@/lib/utils"tailwind.config.js (1)
1-58: Inconsistent indentation — tabs mixed with spaces.The file uses tabs for some lines (e.g., Lines 9-56) but spaces elsewhere. Consider normalizing to match the project's formatting convention.
src/index.css (1)
1-3: Static analysis warnings are false positives — Tailwind directives are expected here.The Biome and Stylelint errors about unknown
@tailwindat-rules and@applyare false positives. These are standard Tailwind CSS directives processed by PostCSS. Configure the linters to recognize Tailwind syntax (e.g., enabletailwindDirectivesin Biome's CSS parser options, or usetailwindcss/no-custom-at-rulesoverride in Stylelint) to suppress these.src/components/charts/TestChart.tsx (2)
34-34: Hardcoded color bypasses the theme system.
stroke="#2e8b57"duplicates the primary brand color as a magic string instead of using the CSS variable defined inindex.css. If the brand color changes, this will be missed.Consider using
stroke="hsl(var(--primary))"or extracting it from the Tailwind theme to stay in sync.
9-39: Inconsistent indentation — top-level declarations are indented an extra level.The
const data,export default function, and all their contents are indented by an extra 2 spaces relative to the file's top-level scope. This appears unintentional.src/App.tsx (1)
11-11: Usetext-primaryinstead oftext-green-500for brand consistency.The heading hardcodes
text-green-500while the theme defines--primary: 146 50% 36%for the brand green. Usingtext-primarykeeps the heading in sync with the token system.- <h1 className="text-4xl md:text-5xl font-bold text-green-500"> + <h1 className="text-4xl md:text-5xl font-bold text-primary">
package.json
Outdated
| "autoprefixer": "^10.4.24", | ||
| "eslint": "^9.39.1", | ||
| "eslint-plugin-react-hooks": "^7.0.1", | ||
| "eslint-plugin-react-refresh": "^0.4.24", | ||
| "globals": "^16.5.0", | ||
| "postcss": "^8.5.6", | ||
| "tailwindcss": "^3.4.1", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for tailwind.config files and their content
echo "=== Checking for tailwind.config files ==="
fd -i tailwind.config
echo -e "\n=== Checking package.json for type field ==="
cat package.json | grep -A 1 '"type"'
echo -e "\n=== Checking tailwind.config.js for require() usage ==="
fd -i tailwind.config.js -x cat {}Repository: AOSSIE-Org/OrgExplorer
Length of output: 1819
Switch tailwind.config.js to use ESM import syntax for the animate plugin.
package.json declares "type": "module", but tailwind.config.js uses require("tailwindcss-animate") in the plugins array while using export default syntax. This mixes ESM and CommonJS, which will cause a require is not defined error at runtime.
Replace require("tailwindcss-animate") with import animate from "tailwindcss-animate" and update the plugins array to use the imported variable.
🤖 Prompt for AI Agents
In `@package.json` around lines 29 - 35, tailwind.config.js mixes CJS require with
ESM export causing runtime errors; replace the require("tailwindcss-animate")
call by adding an ESM import (import animate from "tailwindcss-animate") at the
top and update the plugins array to reference the imported animate variable
(instead of require(...)); ensure you remove any require usage and keep the
existing export default configuration intact so the plugins array uses animate.
src/App.tsx
Outdated
| </div> | ||
|
|
||
| {/* recharts example chart */} | ||
| <div className="w-full bg-zinc-900 rounded-2xl p-6 shadow-lg"> |
There was a problem hiding this comment.
Hardcoded bg-zinc-900 breaks light-mode theming.
This dark background is always applied regardless of the active theme. In light mode, you'll get a jarring dark card on a white page. Use a theme-aware token instead:
- <div className="w-full bg-zinc-900 rounded-2xl p-6 shadow-lg">
+ <div className="w-full bg-card text-card-foreground rounded-2xl p-6 shadow-lg">(This also requires the missing --card / --card-foreground tokens flagged in index.css.)
🤖 Prompt for AI Agents
In `@src/App.tsx` at line 20, The div in App (the JSX with className="w-full
bg-zinc-900 rounded-2xl p-6 shadow-lg") uses a hardcoded dark background that
breaks light-mode theming; replace the bg-zinc-900 token with the theme-aware
CSS variable-based token (e.g. use the component's background token such as the
--card variable via a utility that maps to it, and ensure text uses
--card-foreground) so the card follows light/dark themes, and add the missing
--card and --card-foreground token definitions to index.css; update the
className string on that element (and any sibling card elements) to reference
the theme token instead of bg-zinc-900 and verify colors render correctly in
both themes.
src/index.css
Outdated
| @layer base { | ||
| :root { | ||
| --radius: 0.5rem; | ||
|
|
||
| /* Brand Colors (HSL format) */ | ||
| --primary: 146 50% 36%; /* #2e8b57 */ | ||
| --accent: 47 89% 60%; /* #f4c430 */ | ||
|
|
||
| /* Light Theme */ | ||
| --background: 0 0% 100%; | ||
| --foreground: 222 47% 11%; | ||
| --border: 214 32% 91%; | ||
| } | ||
|
|
||
| .dark { | ||
| --background: 222 47% 11%; | ||
| --foreground: 0 0% 98%; | ||
| --border: 217 33% 17%; | ||
| } |
There was a problem hiding this comment.
Missing CSS custom properties will break component styling.
The theme only defines --primary, --accent, --background, --foreground, --border, and --radius. However, the shadcn/ui components in this PR reference many additional tokens that are undefined:
button.tsxuses:bg-primary,text-primary-foreground,bg-destructive,text-destructive-foreground,bg-secondary,text-secondary-foreground,bg-accent,text-accent-foreground,border-input,ring-ringcard.tsxuses:bg-card,text-card-foreground,text-muted-foreground
Without these variables defined, the components will render with missing or transparent colors.
Proposed fix — add the missing tokens
`@layer` base {
:root {
--radius: 0.5rem;
/* Brand Colors (HSL format) */
--primary: 146 50% 36%; /* `#2e8b57` */
+ --primary-foreground: 0 0% 100%;
--accent: 47 89% 60%; /* `#f4c430` */
+ --accent-foreground: 222 47% 11%;
/* Light Theme */
--background: 0 0% 100%;
--foreground: 222 47% 11%;
--border: 214 32% 91%;
+ --input: 214 32% 91%;
+ --ring: 146 50% 36%;
+ --card: 0 0% 100%;
+ --card-foreground: 222 47% 11%;
+ --secondary: 210 40% 96%;
+ --secondary-foreground: 222 47% 11%;
+ --muted: 210 40% 96%;
+ --muted-foreground: 215 16% 47%;
+ --destructive: 0 84% 60%;
+ --destructive-foreground: 0 0% 100%;
}
.dark {
--background: 222 47% 11%;
--foreground: 0 0% 98%;
--border: 217 33% 17%;
+ --input: 217 33% 17%;
+ --ring: 146 50% 36%;
+ --card: 222 47% 11%;
+ --card-foreground: 0 0% 98%;
+ --secondary: 217 33% 17%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 217 33% 17%;
+ --muted-foreground: 215 20% 65%;
+ --destructive: 0 62% 30%;
+ --destructive-foreground: 0 0% 98%;
+ --accent: 47 89% 60%;
+ --accent-foreground: 222 47% 11%;
+ --primary: 146 50% 36%;
+ --primary-foreground: 0 0% 100%;
}🤖 Prompt for AI Agents
In `@src/index.css` around lines 20 - 38, The theme is missing many CSS custom
properties used by shadcn/ui (referenced in button.tsx and card.tsx); update
:root and .dark blocks to define the missing tokens (and their dark-mode
counterparts): add variables such as --primary-foreground, --destructive,
--destructive-foreground, --secondary, --secondary-foreground,
--accent-foreground, --border-input (or --input-border), --ring, --bg-card (or
--card), --card-foreground, and --muted-foreground with appropriate HSL values
derived from your existing palette so bg-primary / text-primary-foreground /
bg-destructive / text-destructive-foreground / bg-secondary /
text-secondary-foreground / bg-accent / text-accent-foreground / border-input /
ring-ring / bg-card / text-card-foreground / text-muted-foreground resolve
correctly in both :root and .dark scopes.
tailwind.config.js
Outdated
| } | ||
| } | ||
| }, | ||
| plugins: [require("tailwindcss-animate")], |
There was a problem hiding this comment.
require() is not available in ESM — this will fail at build time.
As noted in the package.json review, the project uses "type": "module", so require() is not available. Use an ESM import instead.
Suggested fix
+import tailwindcssAnimate from "tailwindcss-animate"
+
/** `@type` {import('tailwindcss').Config} */
export default {
...
- plugins: [require("tailwindcss-animate")],
+ plugins: [tailwindcssAnimate],
}📝 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.
| plugins: [require("tailwindcss-animate")], | |
| import tailwindcssAnimate from "tailwindcss-animate" | |
| /** `@type` {import('tailwindcss').Config} */ | |
| export default { | |
| ... | |
| plugins: [tailwindcssAnimate], | |
| } |
🤖 Prompt for AI Agents
In `@tailwind.config.js` at line 59, Replace the CommonJS require call in the
Tailwind config with an ESM import: add an ESM import for the package (e.g.,
import tailwindcssAnimate from 'tailwindcss-animate') at the top of the file and
then use that imported identifier in the plugins array instead of
require("tailwindcss-animate"); update the export (e.g., export default ...) if
necessary so the file remains a valid ES module and the plugins array references
the imported symbol.
tsconfig.json
Outdated
| "compilerOptions": { | ||
| "baseUrl": ".", | ||
| "paths": { | ||
| "@/*": ["src/*"] | ||
| } | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if tsconfig.app.json exists and examine its contents
fd tsconfig.app.json --type f --exec cat {}Repository: AOSSIE-Org/OrgExplorer
Length of output: 796
🏁 Script executed:
#!/bin/bash
# Read the root tsconfig.json
cat tsconfig.jsonRepository: AOSSIE-Org/OrgExplorer
Length of output: 276
Add paths alias to tsconfig.app.json — it's not inherited from the root config.
This is a solution-style tsconfig.json with "files": [] and "references". In TypeScript project references, compilerOptions from the root are not inherited by referenced projects. The @/* path alias defined here must also be added to tsconfig.app.json for IDE resolution and tsc to recognize it when compiling source files.
Add the following to tsconfig.app.json:
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["../src/*"]
}
}🤖 Prompt for AI Agents
In `@tsconfig.json` around lines 2 - 7, The root tsconfig's "paths" alias isn't
inherited by referenced projects, so update tsconfig.app.json to add a
compilerOptions block with baseUrl set to "." and a paths entry mapping "@/*" to
"../src/*" (i.e., add "compilerOptions": { "baseUrl": ".", "paths": { "@/*":
["../src/*"] } }) so IDEs and tsc recognize the `@/`* alias when compiling the app
project.
|
hey @Zahnentferner |
2 participants
This PR introduces the Org Explorer logo aligned with AOSSIE’s branding palette.
The update includes:
No functional logic is modified in this PR.
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