(SP: 2) [Frontend] Add logo icons svg, styles & refactoring#450
Conversation
…ategory styles via registry
ViktorSvertoka
added
refactor
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 46 minutes and 12 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe PR consolidates duplicated category definitions into a centralized typed registry ( Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~70 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 4❌ Failed checks (2 warnings, 2 inconclusive)
✅ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/data/category.ts (1)
3-15:⚠️ Potential issue | 🟠 MajorPreserve literal slug types through
createCategory.
createCategorydeclaresslug: string, soCategorySlug = (typeof categoryData)[number]['slug']resolves tostringrather than the literal union ('git' | 'html' | ...) available fromcategoryRegistry. This breaks the type chain:isCategorySlugaccepts any string at the type level, and the type assertion inQaSection.tsx:87indicates consumers already need workarounds.Fix by preserving literal types through
createCategoryusing a generic parameter:🛠️ Proposed fix
-const createCategory = (slug: string, title: string, displayOrder: number) => ({ - slug, - displayOrder, - translations: { - uk: title, - en: title, - pl: title, - }, -}); +const createCategory = <S extends string>(slug: S, title: string, displayOrder: number) => ({ + slug, + displayOrder, + translations: { + uk: title, + en: title, + pl: title, + }, +});Also apply the same pattern to
createRegistryItemincategoryRegistry.tsso the literal types flow through from the start.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/data/category.ts` around lines 3 - 15, The createCategory function currently types slug as plain string so literal slug types are lost; change createCategory to be generic (e.g. function createCategory<T extends string>(slug: T, title: string, displayOrder: number) => { slug: T; displayOrder: number; translations: { uk: string; en: string; pl: string } }) so the returned object's slug preserves the literal type, then update categoryRegistry's createRegistryItem with the same generic pattern so the literal union flows from the registry into categoryData and CategorySlug; this will make isCategorySlug and consumers (e.g. the code asserting in QaSection) receive the narrowed union type instead of string.
🧹 Nitpick comments (1)
frontend/data/categoryRegistry.ts (1)
32-309: Consider derivingdisplayOrderfrom array position.Every entry hardcodes
displayOrderequal to its array index (0–29). This duplication is easy to get out of sync when inserting/reordering entries. Since the registry is already an ordered array, you could drop the parameter and compute order via.map((item, index) => ({ ...item, displayOrder: index }))at the export site, eliminating a class of human error.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/data/categoryRegistry.ts` around lines 32 - 309, The array hardcodes displayOrder for each createRegistryItem call, risking drift; remove the positional displayOrder argument from the createRegistryItem invocations in categoryRegistry and instead compute displayOrder from the array index when exporting—e.g., keep the array of items (using createRegistryItem without the index param) and wrap the exported categoryRegistry with .map((item, index) => ({ ...item, displayOrder: index })); update createRegistryItem's signature/usages if necessary to drop the index parameter and ensure the final exported symbol categoryRegistry contains the computed displayOrder.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/data/categoryRegistry.ts`:
- Around line 309-311: The array-wide as const isn't preserving literal
slug/title types because createRegistryItem is declared to return
CategoryRegistryItem (with slug: string); update createRegistryItem so it's
generic over S extends string (and optionally T extends string for title) and
returns a typed object that preserves those literals, then let categoryRegistry
be inferred as readonly tuple (so CategoryRegistryEntry = (typeof
categoryRegistry)[number] retains literal slug types); adjust
CategoryRegistryItem or introduce a generic CategoryRegistryItem<S,T> if needed
and ensure downstream types (CategorySlug in frontend/components/q&a/types.ts
and uses in frontend/components/q&a/useQaTabs.ts and categoryStyles.ts) rely on
(typeof categoryRegistry)[number]['slug'] to get the narrowed literal union.
In `@frontend/lib/about/stats.ts`:
- Line 46: The frontend shows a mismatch between the formatted metric and the
fallback — update either formatMetric or the HeroSection fallback so they match
visually; specifically either (A) change formatMetric (function formatMetric) to
avoid rendering unnecessary “.0” (trim trailing “.0” after toFixed(1)) so it
returns "2k+" for 2000, or (B) change the fallback value in HeroSection.tsx from
"2k+" to "2.0k+" so the initial placeholder matches formatMetric; pick one
approach and update the referenced symbol (formatMetric or the HeroSection
fallback string) so both display the same formatted string.
---
Outside diff comments:
In `@frontend/data/category.ts`:
- Around line 3-15: The createCategory function currently types slug as plain
string so literal slug types are lost; change createCategory to be generic (e.g.
function createCategory<T extends string>(slug: T, title: string, displayOrder:
number) => { slug: T; displayOrder: number; translations: { uk: string; en:
string; pl: string } }) so the returned object's slug preserves the literal
type, then update categoryRegistry's createRegistryItem with the same generic
pattern so the literal union flows from the registry into categoryData and
CategorySlug; this will make isCategorySlug and consumers (e.g. the code
asserting in QaSection) receive the narrowed union type instead of string.
---
Nitpick comments:
In `@frontend/data/categoryRegistry.ts`:
- Around line 32-309: The array hardcodes displayOrder for each
createRegistryItem call, risking drift; remove the positional displayOrder
argument from the createRegistryItem invocations in categoryRegistry and instead
compute displayOrder from the array index when exporting—e.g., keep the array of
items (using createRegistryItem without the index param) and wrap the exported
categoryRegistry with .map((item, index) => ({ ...item, displayOrder: index }));
update createRegistryItem's signature/usages if necessary to drop the index
parameter and ensure the final exported symbol categoryRegistry contains the
computed displayOrder.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: c6fc3c71-36bc-481d-8e31-2fc3b8678c1f
⛔ Files ignored due to path filters (3)
frontend/public/icons/csharp.svgis excluded by!**/*.svgfrontend/public/icons/dotnet.svgis excluded by!**/*.svgstudio/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (19)
frontend/components/about/HeroSection.tsxfrontend/data/category.tsfrontend/data/categoryRegistry.tsfrontend/data/categoryStyles.tsfrontend/lib/about/stats.tsstudio/.gitignorestudio/.prettierrcstudio/eslint.config.mjsstudio/package.jsonstudio/sanity.cli.tsstudio/sanity.config.tsstudio/schemaTypes/author.tsstudio/schemaTypes/blockContent.tsstudio/schemaTypes/category.tsstudio/schemaTypes/index.tsstudio/schemaTypes/post.tsstudio/schemaTypes/socialLink.tsstudio/static/.gitkeepstudio/tsconfig.json
💤 Files with no reviewable changes (14)
- studio/static/.gitkeep
- studio/tsconfig.json
- studio/.prettierrc
- studio/schemaTypes/category.ts
- studio/schemaTypes/index.ts
- studio/sanity.config.ts
- studio/package.json
- studio/.gitignore
- studio/sanity.cli.ts
- studio/schemaTypes/blockContent.ts
- studio/schemaTypes/socialLink.ts
- studio/schemaTypes/author.ts
- studio/eslint.config.mjs
- studio/schemaTypes/post.ts
* feat(svg) add icons PHP & Laravel (#447) * (SP: 1) [SHOP] make cart provider capability env reads runtime-safe * (SP: 1) [SHOP] validate STRIPE_MODE at runtime in stripe env helper * (SP: 2) [Frontend] Add logo icons svg, styles & refactoring (#450) * feat(categories): add php/laravel/csharp/dotnet styles and refactor category styles via registry * fix(types): preserve category registry slug literals and normalize stats k-format * docs(files): update documentation * chore(release): bump frontend to v1.0.12 and update changelog --------- Co-authored-by: liudmylasovetovs <milkaegik@gmail.com>
1 participant
Summary
categoryRegistrysourcecategoryData,categoryTabStyles,getCategoryTabStyle) to avoid UI breakageWhy
Category data and styles were duplicated across files, making updates error-prone and harder to scale as new icons/categories are added.
Changes
frontend/data/categoryRegistry.ts(new): centralized category metadata and style classesfrontend/data/category.ts: generatecategoryDatafrom registryfrontend/data/categoryStyles.ts: generate style map from registry#092E20to#0E7A53Closes #449
Summary by CodeRabbit
Bug Fixes
Chores