chore: add TypeScript types for support us button component and updat…#5
Merged
Merged
Conversation
github-actions
Bot
added
no-issue-linked
WalkthroughAdds TypeScript type definitions for the UI (new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2✅ 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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Around line 47-49: The peerDependencies block currently pins React/ReactDOM to
React 19 only; update package.json peerDependencies to allow React 18 and 19
(for example use "react": "^18 || ^19" and "react-dom": "^18 || ^19") because
the code only requires React.ReactNode (see src/types/index.ts where
React.ReactNode is used), so broaden the range to include React 18 consumers
while keeping React 19 support.
In `@src/types/index.ts`:
- Around line 1-155: The types in src/types/index.ts (e.g.,
supportUsButtonProps, theme, ButtonVariant, sponsorLink, hero,
organizationInformation) are never exported from the package entrypoint and the
package.json/build are not configured to emit/publish .d.ts files; update
src/index.ts to re-export the types (export * from "./types" or explicit exports
for the above symbols), update package.json to add a "types" field pointing to
the built declaration (e.g., dist/index.d.ts), add/adjust "files" to include the
dist output (or src if publishing sources), add a proper build script that runs
tsc to emit declarations (e.g., tsc --emitDeclarationOnly or full compile with
declaration: true), and add an "exports" map for modern resolution pointing to
the compiled entry (e.g., ./dist/index.js and ./dist/index.d.ts) so consumers
can import those types.
- Line 1: The current import brings React in as a runtime value but only a type
is used; replace the value import "import React from 'react'" with a type-only
import "import type { ReactNode } from 'react'" and then update the type
annotation that uses React.ReactNode (referenced as the type on the
props/interface at the previous line 98) to use ReactNode directly so the module
is imported only for types.
- Around line 7-155: The public types and interface use inconsistent casing:
rename types image→Image, hero→Hero, theme→Theme,
projectInformation→ProjectInformation,
organizationInformation→OrganizationInformation, Tier (ok), sponsor→Sponsor,
sponsors→Sponsors, sponsorLink→SponsorLink, CTAsection→CTASection (then use
camelCase property), pattern→Pattern, supportUsButtonProps→SupportUsButtonProps
and ButtonVariant (keep) and update property names in SupportUsButtonProps:
Hero→hero, CTAsection→ctaSection, ButtonVariant→buttonVariant, classNames keys
remain camelCase; update all references/usages across the codebase (imports,
props, consumers) to the new PascalCase type names and camelCase properties to
preserve public API consistency.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 4dcbf415-8728-4c0f-8b58-3b4d48e65348
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
package.jsonsrc/types/index.ts
Comment on lines
+1
to
+155
| import React from "react"; | ||
|
|
||
| /* ========================= | ||
| THEME | ||
| ========================= */ | ||
|
|
||
| export type theme = "AOSSIE" | "light" | "dark" | "minimal" | "corporate"; | ||
|
|
||
| /* ========================================================= | ||
| Button Variant | ||
| ========================================================= */ | ||
|
|
||
| export type ButtonVariant = "solid" | "outline" | "ghost" | "gradient"; | ||
|
|
||
| /* ========================= | ||
| IMAGE TYPE | ||
| ========================= */ | ||
|
|
||
| export type image = { | ||
| src?: string; | ||
| alt?: string; | ||
| }; | ||
|
|
||
| /* ========================= | ||
| HERO SECTION | ||
| ========================= */ | ||
|
|
||
| export type hero = { | ||
| /** Optional hero background image */ | ||
| image?: image; | ||
|
|
||
| title: string; | ||
| description: string; | ||
|
|
||
| /** Label like: YOU'RE SPONSORING */ | ||
| sponsorLabel?: string; | ||
| }; | ||
|
|
||
| /* ========================= | ||
| PROJECT INFORMATION | ||
| ========================= */ | ||
|
|
||
| export type projectInformation = { | ||
| name: string; | ||
| description: string; | ||
| }; | ||
|
|
||
| /* ========================= | ||
| ORGANIZATION INFORMATION | ||
| ========================= */ | ||
|
|
||
| export type organizationInformation = { | ||
| name: string; | ||
| description: string; | ||
|
|
||
| /** Organization logo */ | ||
| logo?: image | string; | ||
|
|
||
| projectInformation: projectInformation; | ||
| }; | ||
|
|
||
| /* ========================= | ||
| SPONSOR TIERS | ||
| ========================= */ | ||
|
|
||
| export type Tier = "Platinum" | "Gold" | "Silver" | "Bronze"; | ||
|
|
||
| /* ========================= | ||
| SPONSOR CARD | ||
| ========================= */ | ||
|
|
||
| export type sponsor = { | ||
| name: string; | ||
|
|
||
| /** Sponsor logo or avatar */ | ||
| logo?: string; | ||
|
|
||
| /** Sponsor website */ | ||
| link?: string; | ||
|
|
||
| /** Sponsorship tier */ | ||
| sponsorshipTier?: Tier; | ||
| }; | ||
|
|
||
| /* ========================= | ||
| CURRENT SPONSORS | ||
| ========================= */ | ||
|
|
||
| export type sponsors = sponsor[]; | ||
|
|
||
| /* ========================= | ||
| SPONSOR LINKS (CTA) | ||
| ========================= */ | ||
|
|
||
| export type sponsorLink = { | ||
| name: string; | ||
| url: string; | ||
| icon?: React.ReactNode; | ||
| className?: string; | ||
|
|
||
| /** open link in new tab */ | ||
| newTab?: boolean; | ||
| }; | ||
|
|
||
| /* ========================= | ||
| CTA SECTION | ||
| ========================= */ | ||
|
|
||
| export type CTAsection = { | ||
| title: string; | ||
| description: string; | ||
| sponsorLink: sponsorLink[]; | ||
| }; | ||
|
|
||
| /* ========================= | ||
| BACKGROUND PATTERNS | ||
| ========================= */ | ||
|
|
||
| export type pattern = "dots" | "grid" | "stripes" | "none"; | ||
|
|
||
| /* ========================= | ||
| SUPPORT US COMPO PROPS | ||
| ========================= */ | ||
|
|
||
| export interface supportUsButtonProps { | ||
| // Theme for the button, can be one of "AOSSIE", "light", "dark", "minimal", or "corporate" | ||
| theme?: theme; | ||
|
|
||
| // Optional background pattern for the button, can be one of "dots", "grid", "stripes", or "none" | ||
| pattern?: pattern; | ||
|
|
||
| // Information about the hero section, including title, description, sponsor label, and optional background image | ||
| Hero: hero; | ||
|
|
||
| // Information about the organization, including name, description, logo, and project information | ||
| organizationInformation: organizationInformation; | ||
|
|
||
| // List of current sponsors, each with name, optional logo, link, and sponsorship tier | ||
| sponsors: sponsors; | ||
|
|
||
| // Information about the call-to-action section, including title, description, and sponsor links | ||
| CTAsection: CTAsection; | ||
|
|
||
| // Optional class name for custom styling | ||
| classNames?: { | ||
| container?: string; | ||
| hero?: string; | ||
| organizationInformation?: string; | ||
| sponsors?: string; | ||
| CTAsection?: string; | ||
| }; | ||
|
|
||
| // Optional button variant for styling the call-to-action buttons | ||
| ButtonVariant?: ButtonVariant; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify that the new types module is exported and publishable.
set -e
echo "== package manifest =="
jq '{main, module, types, exports, files, scripts}' package.json
echo
echo "== candidate entrypoints =="
fd '^index\.(ts|tsx|js|mjs|cjs)$' src . -x sh -c 'echo "== $1 =="; sed -n "1,200p" "$1"; echo' sh {}
echo
echo "== tsconfig files =="
fd '^tsconfig.*\.json$' . -x sh -c 'echo "== $1 =="; cat "$1"; echo' sh {}
echo
echo "== re-exports of the new types module =="
rg -n --type=ts --type=tsx 'export\s+(\*|\{[^}]+\})\s+from\s+["'\''].*types.*["'\'']' srcRepository: AOSSIE-Org/SupportUsButton
Length of output: 297
🏁 Script executed:
#!/bin/bash
# Verify that the new types module is exported and publishable.
echo "== package.json content =="
cat package.json
echo
echo "== candidate entrypoints (index files) =="
find src -maxdepth 2 -name 'index.ts' -o -name 'index.tsx' -o -name 'index.js' | head -10
echo
echo "== tsconfig files =="
find . -maxdepth 2 -name 'tsconfig*.json' -type f
echo
echo "== re-exports of the types module =="
rg -n 'export.*from.*types' src --type ts --type tsxRepository: AOSSIE-Org/SupportUsButton
Length of output: 1546
🏁 Script executed:
#!/bin/bash
echo "== src/index.ts content =="
cat src/index.ts
echo
echo "== tsconfig.json content =="
cat tsconfig.jsonRepository: AOSSIE-Org/SupportUsButton
Length of output: 453
🏁 Script executed:
#!/bin/bash
echo "== All files in src/ =="
find src -type f | sort
echo
echo "== Check for any exports in non-index files =="
rg -l 'export' src --type ts 2>/dev/null || echo "No matches or files found"Repository: AOSSIE-Org/SupportUsButton
Length of output: 213
The types added in this file are not actually exported or publishable.
The module src/types/index.ts cannot be consumed by consumers because:
- The main entry point
src/index.tsis empty and does not re-export these types package.jsonlacks atypesfield to point to generated.d.tsfiles- The
filesarray excludessrc/, so source files are not published even if configured - The build script is not configured (currently a no-op)
- No
exportsfield is defined for modern package resolution
Re-export these types from src/index.ts and configure the build and package manifest to properly emit and publish .d.ts declaration files.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/types/index.ts` around lines 1 - 155, The types in src/types/index.ts
(e.g., supportUsButtonProps, theme, ButtonVariant, sponsorLink, hero,
organizationInformation) are never exported from the package entrypoint and the
package.json/build are not configured to emit/publish .d.ts files; update
src/index.ts to re-export the types (export * from "./types" or explicit exports
for the above symbols), update package.json to add a "types" field pointing to
the built declaration (e.g., dist/index.d.ts), add/adjust "files" to include the
dist output (or src if publishing sources), add a proper build script that runs
tsc to emit declarations (e.g., tsc --emitDeclarationOnly or full compile with
declaration: true), and add an "exports" map for modern resolution pointing to
the compiled entry (e.g., ./dist/index.js and ./dist/index.d.ts) so consumers
can import those types.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
package.json (1)
41-49:⚠️ Potential issue | 🔴 CriticalThese dependency changes still do not make the new types consumable.
Adding
@types/reactand React peers is incomplete while the package still pointsmainat TypeScript source, has notypes/exportsentry, and keeps a no-op build. As published, consumers still will not get a stable compiled entrypoint or declaration file forsrc/types/index.ts.#!/bin/bash set -e echo "== package manifest ==" jq '{main, types, exports, files, scripts}' package.json echo echo "== src/index.ts ==" if [ -f src/index.ts ]; then cat -n src/index.ts else echo "src/index.ts is missing" fi echo echo "== re-exports from ./types ==" rg -n --type=ts --type=tsx "export\\s+.*from\\s+['\\\"]\\./types['\\\"]" src || trueThis verifies whether the new types are re-exported and whether the package manifest exposes built declarations and entrypoints. Expected after the fix: a real build command, a
types/exportsentry, and a re-export fromsrc/index.ts.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` around lines 41 - 49, The package.json currently points "main" at TypeScript source and lacks "types"/"exports" and a real build, so consumers won't get compiled JS or declarations; update package.json to set "main" to the compiled entry (e.g. dist/index.js), add "types" pointing to the compiled declaration (e.g. dist/types/index.d.ts) and an "exports" field for the entry, add a proper "build" script that emits JS + declaration files (e.g. tsc --build or similar) and include the output folder in "files", and ensure src/index.ts re-exports from ./types (src/types/index.ts) so the declarations are exported; also remove direct publishing of TS source as the primary entry so consumers get stable compiled entrypoints and .d.ts files.src/types/index.ts (1)
28-30: 🛠️ Refactor suggestion | 🟠 MajorFinish normalizing the public API casing before release.
This file still exports lowerCamelCase type names (
projectInformation,organizationInformation,sponsorLink,supportUsButtonProps) and PascalCase prop keys (Image,Theme,Hero). Because these names are part of the package surface, shipping them now turns the eventual cleanup into a breaking rename for consumers.Representative rename direction
-export type projectInformation = { +export type ProjectInformation = { -export type organizationInformation = { +export type OrganizationInformation = { -export type sponsorLink = { +export type SponsorLink = { -export interface supportUsButtonProps { - Theme?: Theme; +export interface SupportUsButtonProps { + theme?: Theme; pattern?: Pattern; hero: Hero; - organizationInformation: organizationInformation; + organizationInformation: OrganizationInformation; classNames?: { container?: string; - Hero?: string; + hero?: string;As per coding guidelines, "Review for significant deviations from Google JavaScript style guide. Minor style issues are not a priority".
Also applies to: 43-59, 72-98, 125-154
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/types/index.ts` around lines 28 - 30, Update the public API casing: rename the exported type names from lowerCamelCase to PascalCase (projectInformation -> ProjectInformation, organizationInformation -> OrganizationInformation, sponsorLink -> SponsorLink, supportUsButtonProps -> SupportUsButtonProps) and change exported prop keys from PascalCase to lowerCamelCase (Image -> image, Theme -> theme, Hero -> hero); update the corresponding type declarations, export statements and every reference/usage of these symbols in the codebase to the new names so the package surface uses consistent PascalCase for types and camelCase for object/prop keys.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Around line 47-49: Update the peerDependencies range to limit accepted React
majors to the tested ones: replace the open-ended ">=18" entries under
peerDependencies for "react" and "react-dom" with a capped range such as
"^18.0.0 || ^19.0.0" (or equivalently ">=18 <20") so the package only allows
validated major versions; ensure both "react" and "react-dom" entries are
changed consistently in package.json.
In `@src/types/index.ts`:
- Around line 89-113: The public types only expose a current sponsors array
(export type sponsors = sponsor[]), so there's no way to model a
previous-sponsors section; update the type surface to explicitly support
previous sponsors (either by adding an exported previousSponsors type e.g.
export type previousSponsors = sponsor[] and/or extend the CTASection to accept
previousSponsorLink or previousSponsors fields) and ensure the existing
sponsor/sponsorLink/CTASection symbols are updated to include the new
previous-sponsors collection so consumers can configure both current and
previous sponsors.
---
Duplicate comments:
In `@package.json`:
- Around line 41-49: The package.json currently points "main" at TypeScript
source and lacks "types"/"exports" and a real build, so consumers won't get
compiled JS or declarations; update package.json to set "main" to the compiled
entry (e.g. dist/index.js), add "types" pointing to the compiled declaration
(e.g. dist/types/index.d.ts) and an "exports" field for the entry, add a proper
"build" script that emits JS + declaration files (e.g. tsc --build or similar)
and include the output folder in "files", and ensure src/index.ts re-exports
from ./types (src/types/index.ts) so the declarations are exported; also remove
direct publishing of TS source as the primary entry so consumers get stable
compiled entrypoints and .d.ts files.
In `@src/types/index.ts`:
- Around line 28-30: Update the public API casing: rename the exported type
names from lowerCamelCase to PascalCase (projectInformation ->
ProjectInformation, organizationInformation -> OrganizationInformation,
sponsorLink -> SponsorLink, supportUsButtonProps -> SupportUsButtonProps) and
change exported prop keys from PascalCase to lowerCamelCase (Image -> image,
Theme -> theme, Hero -> hero); update the corresponding type declarations,
export statements and every reference/usage of these symbols in the codebase to
the new names so the package surface uses consistent PascalCase for types and
camelCase for object/prop keys.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: a0eeff02-1d4f-48ab-bbb4-38881fa5e548
📒 Files selected for processing (2)
package.jsonsrc/types/index.ts
Comment on lines
+47
to
+49
| "peerDependencies": { | ||
| "react": ">=18", | ||
| "react-dom": ">=18" |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
For a published npm library, is an open-ended React peer dependency like ">=18" recommended, or should the range be capped to explicitly tested majors such as "^18.3.0 || ^19.0.0"? Please include the latest stable React major version in the answer.
💡 Result:
For a published npm library, avoid an open-ended React peer dependency like "react": ">=18" because it will also accept future majors (e.g. React 20) that may introduce breaking changes—so users can end up installing an incompatible React version without any peer warning.
Prefer declaring the broadest range you actually support, but cap it to supported majors, e.g.:
- If you support React 18 and 19:
"react": "^18.0.0 || ^19.0.0"(and same forreact-dom) - Or equivalently:
"react": ">=18 <20"
Only raise the minimum (e.g. ^18.3.0) if you truly require APIs/behavior introduced in that minor.
This aligns with the intent of peer dependencies (declare what you’re compatible with, not just what you happened to test once) and avoids npm v7+ peer-resolution conflicts surprising consumers. (nodejs.org)
Latest stable React major: React 19 (current latest line is 19.2.x; e.g. 19.2.4 was released Jan 26, 2026). (react.dev)
Citations:
- 1: https://nodejs.org/en/blog/npm/peer-dependencies/?utm_source=openai
- 2: https://react.dev/versions
Cap the React peer range to tested majors.
>=18 will accept React 20+ without evidence that this library has been validated there. Specify the explicit range of tested majors, such as ^18.0.0 || ^19.0.0 (or >=18 <20).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` around lines 47 - 49, Update the peerDependencies range to
limit accepted React majors to the tested ones: replace the open-ended ">=18"
entries under peerDependencies for "react" and "react-dom" with a capped range
such as "^18.0.0 || ^19.0.0" (or equivalently ">=18 <20") so the package only
allows validated major versions; ensure both "react" and "react-dom" entries are
changed consistently in package.json.
This was referenced Mar 9, 2026
This was referenced Mar 17, 2026
This was referenced Mar 25, 2026
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.
This PR adds a TypeScript types file to define the structure for the Sponsors Page component. The types provide a minimal and flexible way to configure key sections such as the hero section, organization information, sponsors, previous sponsors, and the CTA section.
It also includes support for sponsor tiers, reusable image types, background patterns, and predefined themes (including the AOSSIE yellow theme). The goal is to keep the API simple while making the component easier to configure and maintain.
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
Chores
Tests