docs: new product pages (features, starters, integrations) + homepage update #345
Conversation
…pport on product features page
…roduct features page
… in various components
… and FooterSection
lukasz-hycom
changed the title
|
Note Reviews pausedUse the following commands to manage reviews:
WalkthroughAdds a Product section (Features, Starters, Integrations), multiple new UI components (Accordion, CopyCommandButton, FeatureTile, HoverCard, FeaturesListWithImage, IntegrationsBlocks, StarterInfoSection, homepage sections), styling/class tweaks across many files, and a Radix accordion dependency. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CopyBtn as CopyCommandButton
participant Clipboard
participant UI
User->>CopyBtn: Click(command)
activate CopyBtn
CopyBtn->>Clipboard: navigator.clipboard.writeText(command)
Clipboard-->>CopyBtn: Success
Note over CopyBtn,UI: set copied = true (shows confirm icon for 1s)
UI-->>User: visual confirmation
CopyBtn->>CopyBtn: after 1s set copied = false
CopyBtn->>UI: show copy icon
deactivate CopyBtn
sequenceDiagram
participant User
participant Page
participant Accordion as RadixAccordion
User->>Accordion: Click item header (value)
activate Accordion
Accordion->>Accordion: toggle data-state (open/closed)
Accordion->>Page: apply animation (accordion-down / accordion-up)
Page-->>User: content shown/hidden
deactivate Accordion
sequenceDiagram
participant User
participant FeaturesList as FeaturesListWithImage
participant UI
User->>FeaturesList: Click feature button (index)
activate FeaturesList
FeaturesList->>FeaturesList: set activeFeatureIndex = index
FeaturesList->>UI: update selected button style
FeaturesList->>UI: show corresponding image in right panel
UI-->>User: image and styles updated
deactivate FeaturesList
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Comment |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
🧹 Nitpick comments (3)
apps/docs/src/components/GuidesSection/index.tsx (1)
5-6: LGTM: Excellent refactoring.The refactoring to use the
FeatureTilecomponent simplifies the code and improves maintainability by eliminating duplication. The component delegation is clean and follows React best practices.Also applies to: 43-48
apps/docs/src/components/Accordion/index.tsx (1)
16-21: Improve type safety fordefaultValuebased on accordion type.The
defaultValueprop is typed asstring, but whentype="multiple", Radix UI expectsstring[]. Line 45 converts a single string to an array, but this prevents users from specifying multiple default open items in multiple mode.Consider using a conditional type or union:
export interface AccordionProps { items: AccordionItem[]; type?: 'single' | 'multiple'; - defaultValue?: string; + defaultValue?: string | string[]; className?: string; }Then update line 45 to handle both cases:
<AccordionPrimitive.Root type="multiple" - defaultValue={defaultValue ? [defaultValue] : undefined} + defaultValue={Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : undefined} className={clsx('flex flex-col items-start w-full', className)} >apps/docs/src/pages/index.tsx (1)
62-63: Address the TODO: placeholder URL for app starters.The link currently points to a demo site with a TODO comment indicating it should point to the app starters page. According to the PR objectives, the starters page is still in progress.
Would you like me to help identify the correct URL once the starters page is complete, or should this be tracked in a separate issue?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (18)
apps/docs/src/assets/icons/ArrowLeftRightGreenTile.svgis excluded by!**/*.svgapps/docs/src/assets/icons/ArrowRight.svgis excluded by!**/*.svgapps/docs/src/assets/icons/BanGreenTile.svgis excluded by!**/*.svgapps/docs/src/assets/icons/Blocks.svgis excluded by!**/*.svgapps/docs/src/assets/icons/BlocksPurpleTile.svgis excluded by!**/*.svgapps/docs/src/assets/icons/CircleUser.svgis excluded by!**/*.svgapps/docs/src/assets/icons/FileSearch.svgis excluded by!**/*.svgapps/docs/src/assets/icons/GaugePurpleTile.svgis excluded by!**/*.svgapps/docs/src/assets/icons/LayersPurpleTile.svgis excluded by!**/*.svgapps/docs/src/assets/icons/LayoutDashboardGreenTile.svgis excluded by!**/*.svgapps/docs/src/assets/icons/Rocket.svgis excluded by!**/*.svgapps/docs/src/assets/icons/ScalingGreenTile.svgis excluded by!**/*.svgapps/docs/src/assets/icons/Star.svgis excluded by!**/*.svgapps/docs/src/assets/icons/TicketX.svgis excluded by!**/*.svgapps/docs/src/assets/icons/Wallet.svgis excluded by!**/*.svgapps/docs/src/assets/icons/WaypointsPurpleTile.svgis excluded by!**/*.svgapps/docs/static/img/homepage/starters-card-customer-portal.pngis excluded by!**/*.pngapps/docs/static/img/homepage/starters-card-digital-portal.pngis excluded by!**/*.png
📒 Files selected for processing (30)
apps/docs/README.md(0 hunks)apps/docs/docusaurus.config.ts(1 hunks)apps/docs/package.json(1 hunks)apps/docs/src/components/Accordion/Accordion.module.scss(1 hunks)apps/docs/src/components/Accordion/index.tsx(1 hunks)apps/docs/src/components/BenefitsSection/index.tsx(6 hunks)apps/docs/src/components/Card/index.tsx(2 hunks)apps/docs/src/components/ClientsSection/index.tsx(1 hunks)apps/docs/src/components/CopyCommandButton/index.tsx(1 hunks)apps/docs/src/components/DXPArchitectureSection/index.tsx(1 hunks)apps/docs/src/components/FeatureTile/index.tsx(1 hunks)apps/docs/src/components/FeaturesListWithImage/index.tsx(1 hunks)apps/docs/src/components/GuidesSection/index.tsx(2 hunks)apps/docs/src/components/HeroBannerSection/index.tsx(4 hunks)apps/docs/src/components/HomepageAboutSection/index.tsx(1 hunks)apps/docs/src/components/HomepageArchitectureSection/index.tsx(2 hunks)apps/docs/src/components/HomepageBannerSection/index.tsx(1 hunks)apps/docs/src/components/HomepageFeaturesSection/index.tsx(1 hunks)apps/docs/src/components/HomepageStartersSection/index.tsx(1 hunks)apps/docs/src/components/HoverCard/index.tsx(1 hunks)apps/docs/src/components/HubspotForm/index.tsx(2 hunks)apps/docs/src/pages/dxp/index.tsx(1 hunks)apps/docs/src/pages/index.tsx(2 hunks)apps/docs/src/pages/partners/index.tsx(1 hunks)apps/docs/src/pages/product/features.tsx(1 hunks)apps/docs/src/pages/product/integrations.tsx(1 hunks)apps/docs/src/pages/product/product.module.scss(1 hunks)apps/docs/src/pages/product/starters.tsx(1 hunks)apps/docs/src/pages/support/developers.tsx(2 hunks)apps/docs/src/pages/support/enterprise.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- apps/docs/README.md
🔇 Additional comments (22)
apps/docs/src/pages/product/product.module.scss (1)
1-1: No issues found—SCSS import path is correct and all referenced styles are defined.Verification confirms that
apps/docs/src/pages/main.module.scssexists and exports all styles used by the three product components (integrations.tsx, starters.tsx, features.tsx). The@use '../main.module'directive resolves correctly, and no circular dependencies are present.apps/docs/src/components/HomepageAboutSection/index.tsx (2)
191-191: LGTM: Improved Tailwind class consistency.Replacing the arbitrary value
left-[-16px]with the standard utility-left-4maintains the same layout while improving code consistency.
193-193: LGTM: Improved Tailwind class consistency.Replacing the arbitrary value
w-[2px]with the standard utilityw-0.5maintains the same 2px width while improving code consistency. Note thatw-0.5equals0.125rem(2px), not 0.5px.apps/docs/src/pages/partners/index.tsx (1)
118-118: Note the broader CSS selector scope.The stroke-current selector changed from
[&>*]:stroke-current(direct children only) to*:stroke-current(all descendants). This broader selector will apply the stroke to all SVG descendants, not just immediate children. Verify this produces the intended visual result if the ArrowDown SVG contains nested elements.apps/docs/src/pages/dxp/index.tsx (1)
137-137: LGTM - Consistent with PR-wide selector updates.This stroke-current selector update matches the pattern applied across other pages in this PR. The broader selector will style all SVG descendants.
apps/docs/src/components/ClientsSection/index.tsx (1)
15-15: LGTM - Layout spacing improved.The gap increase from 6 to 16 (1.5rem to 4rem) provides more visual breathing room between the lead text and client logos.
apps/docs/src/components/Accordion/Accordion.module.scss (1)
1-30: LGTM - Well-structured accordion animations.The accordion animations properly leverage Radix UI's CSS custom properties for smooth height transitions. The data-state based styling and matching animation timings (0.2s ease-out) provide a polished user experience.
apps/docs/src/pages/support/developers.tsx (1)
119-119: LGTM - Consistent selector updates.Both Icon_discord instances updated with the broader stroke-current selector, consistent with the PR-wide pattern.
Also applies to: 143-143
apps/docs/src/pages/support/enterprise.tsx (1)
37-37: LGTM - Tailwind utility modernization.The changes modernize Tailwind syntax:
- Important modifier positioning updated for consistency
shrink-0shorthand replacesflex-shrink-0Both produce identical output.
Also applies to: 47-47
apps/docs/src/components/HubspotForm/index.tsx (1)
377-377: I need to clarify: when developers writeaccent-violetwithout a shade suffix in Tailwind, it defaults to the 500 shade. Let me search for that specific value.Verify that the accent color change aligns with your design system.
Tailwind's
accent-violet(default 500 shade) is #8b5cf6, which differs from the previousaccent-[#4c5ce5]. The original color (#4c5ce5) is a blue-purple; the new color (#8b5cf6) is a true violet. Confirm this change with your design system before merging.apps/docs/package.json (1)
29-29: No action required. Dependency version verified as current and secure.The @radix-ui/react-accordion@1.2.12 version is the latest available on npm, and no known security vulnerabilities were detected.
apps/docs/src/components/HomepageBannerSection/index.tsx (1)
43-43: LGTM: Tailwind utility modernization.The update from
flex-shrink-0toshrink-0is a modernization to use the shorter Tailwind utility. Both are functionally equivalent.Also applies to: 47-47
apps/docs/src/components/Card/index.tsx (1)
5-5: LGTM: Clean API extension.The addition of the
transparentborder option is well-implemented and follows the existing pattern. Returningcard-basewithout additional border classes correctly achieves a transparent border.Also applies to: 16-16
apps/docs/src/components/CopyCommandButton/index.tsx (1)
1-45: LGTM: Well-structured reusable component.The
CopyCommandButtoncomponent is well-implemented with proper state management, smooth icon transitions, and good separation of concerns. The extraction of this functionality into a reusable component improves maintainability.apps/docs/src/components/BenefitsSection/index.tsx (3)
9-9: LGTM: Clean API enhancement.The addition of the optional
descriptionprop enhances the component's flexibility. The updated layout structure properly accommodates the new description block while maintaining backward compatibility.Also applies to: 81-87
26-26: LGTM: Consistent with Card component update.The addition of
'transparent'to theborderColorunion aligns with the same update in the Card component, ensuring type consistency across components.
44-44: LGTM: Tailwind utility modernization.The update from
flex-shrink-0toshrink-0modernizes the Tailwind utilities. Both are functionally equivalent.Also applies to: 53-53, 63-63
apps/docs/docusaurus.config.ts (1)
338-356: LGTM: Navigation structure enhanced.The new Product dropdown is well-structured and aligns with the PR's objective to add product pages. The navigation items are properly configured with correct paths.
apps/docs/src/components/HeroBannerSection/index.tsx (2)
12-15: LGTM: Badge feature is well-implemented.The optional badge prop with icon support is cleanly integrated and follows good typing practices.
Also applies to: 60-69
85-85: LGTM: Good refactor to use CopyCommandButton.Replacing inline clipboard logic with a dedicated component improves code reusability and maintainability.
apps/docs/src/pages/index.tsx (2)
38-38: LGTM: Good semantic HTML improvement.Using
<main>instead of<div>for the primary content wrapper improves accessibility and document structure.
76-103: LGTM: Homepage restructure aligns with PR objectives.The addition of
HomepageStartersSectionandHomepageFeaturesSection, along with the restructured layout, aligns well with the stated PR goals of updating the homepage and creating new product pages.
…oduct starters page
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
apps/docs/src/pages/product/starters.tsx (1)
308-308: Fix missing space in description text.The description contains
"project.We're"which renders without proper spacing between sentences.Apply this diff to fix the spacing:
- description="Tell us what kind of frontend starter would help your next project.We're planning more — and we want your input." + description="Tell us what kind of frontend starter would help your next project. We're planning more — and we want your input."
🧹 Nitpick comments (4)
apps/docs/src/components/StarterInfoSection/index.tsx (2)
44-53: Consider using a more stable key.Using
linkItem.labelas the React key assumes labels are unique. If duplicate labels are ever passed, React will issue warnings and rendering may be unpredictable.Apply this diff to use the array index combined with the label for a more stable key:
- {links.map((linkItem) => ( + {links.map((linkItem, index) => ( <a - key={linkItem.label} + key={`${index}-${linkItem.label}`} href={linkItem.link} className="text-white! underline! hover:no-underline! text-sm font-medium" target={linkItem.target}
63-65: Consider more flexible image sizing.The fixed heights (
h-[562px] md:h-[762px]) combined with absolute positioning andmax-w-none!may cause images to overflow horizontally or distort on different screen sizes or aspect ratios.Consider one of these approaches:
- Use
object-fit: coverorobject-fit: containwith defined dimensions- Allow the container to size based on the image's intrinsic aspect ratio
- Add horizontal constraints (e.g.,
max-w-full) to prevent overflowExample with aspect ratio and object-fit:
- <div className="relative h-[562px] md:h-[762px]"> - <img src={img.src} alt={img.alt} className="absolute top-0 left-0 h-full max-w-none!" /> + <div className="relative h-[562px] md:h-[762px] overflow-hidden"> + <img src={img.src} alt={img.alt} className="absolute top-0 left-0 h-full w-full object-cover" /> </div>apps/docs/src/pages/product/starters.tsx (2)
65-132: Consider extracting list item styling to reduce duplication.The accordion items contain repetitive JSX patterns with identical className strings for list items. While not critical, extracting these could improve maintainability.
Consider creating a helper component or constant for the repeated list styling:
const ListItem = ({ children, bold }: { children: ReactNode; bold?: string }) => ( <li className="text-white text-sm leading-[1.3] py-1.5"> {bold && <span className="font-semibold">{bold}:</span>} {children} </li> );Or define className constants:
const LIST_ITEM_CLASS = "text-white text-sm leading-[1.3] py-1.5"; const ICON_LIST_CLASS = "list-none! p-0! m-0!";
50-55: Consider adding security attributes for external links.Links with
target="_blank"should includerel="noopener"to prevent potential security issues (tab-napping) and performance concerns.This should be handled in the
StarterInfoSectioncomponent. Add this to the anchor tag inapps/docs/src/components/StarterInfoSection/index.tsx:<a key={linkItem.label} href={linkItem.link} className="text-white! underline! hover:no-underline! text-sm font-medium" target={linkItem.target} + rel={linkItem.target === '_blank' ? 'noopener noreferrer' : undefined} >Also applies to: 140-148
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
apps/docs/src/assets/icons/RefreshCw.svgis excluded by!**/*.svgapps/docs/static/img/starterspage/customer-portal.pngis excluded by!**/*.pngapps/docs/static/img/starterspage/digital-portal.pngis excluded by!**/*.png
📒 Files selected for processing (5)
apps/docs/src/components/Accordion/index.tsx(1 hunks)apps/docs/src/components/FeaturesListWithImage/index.tsx(1 hunks)apps/docs/src/components/StarterInfoSection/index.tsx(1 hunks)apps/docs/src/pages/product/features.tsx(1 hunks)apps/docs/src/pages/product/starters.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/src/components/Accordion/index.tsx
🧰 Additional context used
🧬 Code graph analysis (4)
apps/docs/src/pages/product/features.tsx (5)
apps/docs/src/components/HeroBannerSection/index.tsx (1)
HeroBannerSection(45-148)apps/docs/src/components/Typography/index.tsx (3)
Body(25-27)H2(13-15)H3(17-19)apps/docs/src/components/FeatureTile/index.tsx (1)
FeatureTileList(42-55)apps/docs/src/components/FeaturesListWithImage/index.tsx (1)
FeaturesListWithImage(15-72)apps/docs/src/components/FooterSection/index.tsx (1)
FooterSection(24-61)
apps/docs/src/components/StarterInfoSection/index.tsx (3)
apps/docs/src/components/Accordion/index.tsx (1)
AccordionItem(9-13)apps/docs/src/components/Typography/index.tsx (2)
H2(13-15)Body(25-27)apps/docs/src/components/CopyCommandButton/index.tsx (1)
CopyCommandButton(11-45)
apps/docs/src/pages/product/starters.tsx (5)
apps/docs/src/components/BenefitsSection/index.tsx (2)
BenefitCardProps(13-27)BenefitsSection(81-96)apps/docs/src/components/StarterInfoSection/index.tsx (2)
StarterInfoSectionProps(18-27)StarterInfoSection(29-68)apps/docs/src/components/Typography/index.tsx (2)
BodySmall(33-35)Body(25-27)apps/docs/src/components/HeroBannerSection/index.tsx (1)
HeroBannerSection(45-148)apps/docs/src/components/FooterSection/index.tsx (1)
FooterSection(24-61)
apps/docs/src/components/FeaturesListWithImage/index.tsx (1)
apps/docs/src/components/Typography/index.tsx (2)
H3(17-19)BodyBold(29-31)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: deploy-preview
🔇 Additional comments (6)
apps/docs/src/components/StarterInfoSection/index.tsx (1)
7-27: LGTM!The type definitions are clean and well-structured. The optional fields provide good flexibility for the component's use cases.
apps/docs/src/pages/product/starters.tsx (5)
1-47: LGTM!The imports are organized clearly, and the benefits configuration is well-structured with appropriate icon and title pairings.
50-55: LGTM! Past issue resolved.The links array now contains proper URLs with no empty
hrefattributes. The previous concern about broken navigation has been addressed.
250-251: Address TODO comments before launch.Two TODO comments remain in the code that should be resolved:
- Line 250-251: "add new gradient circle here"
- Line 311: "confirm link" for the contact page URL
Please confirm:
- Whether the gradient circle should be added or if the TODO can be removed
- Whether
/contactis the correct destination for the "Submit your idea" buttonAlso applies to: 311-311
238-240: Image file verified.The customer-portal.png image exists at the correct path:
apps/docs/static/img/starterspage/customer-portal.png. No action needed.
134-135: Image file verified.The file exists at the correct location (
apps/docs/static/img/starterspage/digital-portal.png), matching the path referenced in the code.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/docs/src/pages/index.tsx (1)
60-60: CLI command migration remains incomplete across the codebase.This change is part of an ongoing migration from
create-o2s-apptocreate-dxp-appthat has already been flagged. Multiple documentation files still reference the old command and need updating.
🧹 Nitpick comments (1)
apps/docs/src/pages/index.tsx (1)
102-102: Consider removing commented sections if they're permanently deprecated.Three sections are currently commented out. If these are temporarily disabled during the homepage restructure, consider adding a TODO comment explaining when they'll be re-enabled. If they're permanently removed, delete the commented code rather than leaving it in the codebase.
Also applies to: 108-109
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/docs/src/components/HomepageStartersSection/index.tsx(1 hunks)apps/docs/src/pages/index.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/src/components/HomepageStartersSection/index.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
apps/docs/src/pages/index.tsx (6)
apps/docs/src/components/HeroBannerSection/index.tsx (1)
HeroBannerSection(45-148)apps/docs/src/components/Typography/index.tsx (1)
Body(25-27)apps/docs/src/components/ClientsSection/index.tsx (1)
ClientsSection(13-28)apps/docs/src/components/HomepageStartersSection/index.tsx (1)
HomepageStartersSection(42-65)apps/docs/src/components/HomepageFeaturesSection/index.tsx (1)
HomepageFeaturesSection(37-124)apps/docs/src/components/HomepageArchitectureSection/index.tsx (1)
HomepageArchitectureSection(7-45)
🔇 Additional comments (5)
apps/docs/src/pages/index.tsx (5)
5-21: LGTM: Imports properly support homepage restructure.All new imports (icons, logos, components, and typography) are correctly added to support the updated homepage content and new sections.
38-38: Good semantic HTML improvement.Changing from a generic
<div>to the semantic<main>element properly identifies the primary content area and improves accessibility.
42-58: LGTM: Hero content and link updates align with homepage refresh.The updated heading, description, and action links effectively communicate the product value proposition and guide users to relevant resources. The GithubIcon integration is properly supported by the HeroBannerSection component.
Also applies to: 62-69
76-97: LGTM: Clients section effectively showcases experience and credibility.The addition of a lead paragraph provides valuable context about the company's experience, and the updated client list (including Orange) effectively demonstrates real-world usage across industries.
99-101: LGTM: New product sections enhance homepage content.The addition of HomepageStartersSection and HomepageFeaturesSection aligns with the PR objectives to introduce product pages and enrich the homepage with relevant information about starters and features.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/docs/src/pages/product/integrations.tsx (1)
232-239: Consider using stable keys for section mapping.While using
sectionIndexas a key works for static sections, usingsection.titlewould be more stable and semantic, making the code more resilient to potential section reordering.Apply this diff:
- {INTEGRATION_SECTIONS.map((section, sectionIndex) => ( + {INTEGRATION_SECTIONS.map((section) => ( <IntegrationsBlocks - key={sectionIndex} + key={section.title} title={section.title}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/docs/src/components/Badge/index.tsx(1 hunks)apps/docs/src/components/FooterSection/index.tsx(1 hunks)apps/docs/src/components/IntegrationsBlocks/index.tsx(1 hunks)apps/docs/src/pages/product/integrations.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
apps/docs/src/components/Badge/index.tsx (1)
packages/framework/src/utils/models/badge.ts (1)
Badge(1-4)
apps/docs/src/components/IntegrationsBlocks/index.tsx (1)
apps/docs/src/components/Typography/index.tsx (4)
H2(13-15)Body(25-27)H3(17-19)BodySmall(33-35)
apps/docs/src/pages/product/integrations.tsx (4)
apps/docs/src/components/HeroBannerSection/index.tsx (1)
HeroBannerSection(45-148)apps/docs/src/components/Typography/index.tsx (2)
Body(25-27)BodyBold(29-31)apps/docs/src/components/IntegrationsBlocks/index.tsx (1)
IntegrationsBlocks(15-54)apps/docs/src/components/FooterSection/index.tsx (1)
FooterSection(24-61)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: deploy-preview
🔇 Additional comments (6)
apps/docs/src/components/FooterSection/index.tsx (1)
35-35: Verify the removal ofitems-startalignment.Removing
items-startchanges the cross-axis alignment behavior fromflex-startto the defaultstretch. This means buttons will now stretch vertically to match each other's height instead of aligning to the top. If this is intentional for visual consistency, please confirm; otherwise, restoreitems-startto preserve the original alignment.apps/docs/src/components/Badge/index.tsx (3)
6-7: LGTM - Well-designed extension of Badge capabilities.The icon prop extension to support
React.ReactNodealongside strings, and the addition oflightanddarkvariants, are clean and properly typed. This enables richer icon usage across the component library.
10-23: LGTM - Clean variant mapping with defensive default.The
getVariantClasseshelper function provides a maintainable way to map variants to CSS classes. The default case ensures graceful fallback to primary styling if an unexpected variant is passed.
32-32: LGTM - Proper type-based rendering logic.The conditional rendering correctly handles string icons (rendered as
<img>) versus ReactNode icons (rendered directly), enabling flexible icon usage while maintaining type safety.apps/docs/src/components/IntegrationsBlocks/index.tsx (1)
24-48: LGTM - Well-structured conditional rendering.The conditional styling based on
isAvailableand the Badge component usage with dynamic icon and variant are clean and effective. The visual differentiation between available and planned integrations is clear.apps/docs/src/pages/product/integrations.tsx (1)
206-264: LGTM - Well-structured page layout with clear information architecture.The page effectively combines HeroBannerSection, IntegrationsBlocks, and FooterSection to create a cohesive integrations showcase. The messaging clearly communicates the composable, backend-agnostic architecture, and the CTA appropriately guides users to documentation and contribution paths.
| const INTEGRATION_SECTIONS = [ | ||
| { | ||
| title: 'CMS', | ||
| description: 'Content, frontend configuration', | ||
| integrations: [ | ||
| { | ||
| isAvailable: true, | ||
| name: 'Strapi', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: true, | ||
| name: 'Contentful', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: false, | ||
| name: 'Storyblok', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| title: 'Auth / Infra', | ||
| description: 'TODO: add description here', | ||
| integrations: [ | ||
| { | ||
| isAvailable: true, | ||
| name: 'Auth.js', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: false, | ||
| name: 'Keycloak', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: true, | ||
| name: 'Redis', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| title: 'CRM / Support ticket processing / Knowledge Base', | ||
| description: 'TODO: add description here', | ||
| integrations: [ | ||
| { | ||
| isAvailable: true, | ||
| name: 'Strapi', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: true, | ||
| name: 'SurveyJS', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: false, | ||
| name: 'Zendesk', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: false, | ||
| name: 'Salesforce Service Cloud', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| title: 'Billing', | ||
| description: 'TODO: add description here', | ||
| integrations: [ | ||
| { | ||
| isAvailable: false, | ||
| name: 'Kill Bill', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: true, | ||
| name: 'SAP S/4 Hana', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| title: 'Notifications', | ||
| description: 'TODO: add description here', | ||
| integrations: [ | ||
| { | ||
| isAvailable: true, | ||
| name: 'Strapi', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: true, | ||
| name: 'Notification service (custom, not open-sourced)', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: false, | ||
| name: 'novu.co notification API', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| title: 'Search, Personalization, DXP', | ||
| description: 'TODO: add description here', | ||
| integrations: [ | ||
| { | ||
| isAvailable: true, | ||
| name: 'Algolia', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: false, | ||
| name: 'Pimcore', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: false, | ||
| name: 'Headless personalization engine', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| title: 'ERP/PIM/DAM/Commerce', | ||
| description: 'TODO: add description here', | ||
| integrations: [ | ||
| { | ||
| isAvailable: true, | ||
| name: 'Medusa', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: true, | ||
| name: 'SAP S/4 Hana', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: false, | ||
| name: 'OroCommerce', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: false, | ||
| name: 'Pimcore', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| { | ||
| isAvailable: false, | ||
| name: 'Custom product API', | ||
| description: 'integration description', | ||
| icon: <BanGreenTileIcon className="w-4 h-4" />, | ||
| }, | ||
| ], | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
Address placeholder content and TODO comments before release.
The INTEGRATION_SECTIONS data structure contains multiple areas of incomplete content:
- TODO comments for descriptions at lines 41, 65, 95, 113, 137, and 161
- All integrations use placeholder
BanGreenTileIconinstead of service-specific icons - All integrations use generic
"integration description"text
This placeholder content will be visible to users and should be replaced with actual descriptions and appropriate icons before merging to production.
Would you like me to help generate more descriptive content for these integration descriptions, or should this be tracked as a follow-up issue?
🤖 Prompt for AI Agents
In apps/docs/src/pages/product/integrations.tsx around lines 14 to 195, the
INTEGRATION_SECTIONS array contains placeholder text (generic "integration
description"), multiple TODO comments for section descriptions (lines ~41, 65,
95, 113, 137, 161) and a repeated placeholder icon (BanGreenTileIcon) for every
integration; replace each TODO with a short, user-facing description for the
section, replace every integration's "integration description" with a one-line,
accurate summary specific to that service, and swap the placeholder icon for the
correct service-specific React icon component (or a meaningful fallback) for
each integration; coordinate with PM/marketing for copy and with design for icon
assets, then update the array entries accordingly and remove TODO comments (or
mark remaining items as tracked with an issue ID if they must remain).
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/docs/src/pages/product/starters.tsx (1)
308-308: Fix missing space in description text.The description string contains
"project.We're"without a space between the period and "We're", which will render incorrectly.Apply this diff to fix the spacing:
- description="Tell us what kind of frontend starter would help your next project.We're planning more — and we want your input." + description="Tell us what kind of frontend starter would help your next project. We're planning more — and we want your input."
🧹 Nitpick comments (1)
apps/docs/src/pages/product/starters.tsx (1)
250-250: Track or resolve the TODO comment.The TODO suggests adding a new gradient circle, but it's unclear if this is planned for a future iteration or was overlooked.
Would you like me to open an issue to track this enhancement, or should this TODO be removed if the current gradient implementation is sufficient?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/docs/src/pages/product/starters.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
apps/docs/src/pages/product/starters.tsx (5)
apps/docs/src/components/BenefitsSection/index.tsx (2)
BenefitCardProps(13-27)BenefitsSection(81-96)apps/docs/src/components/StarterInfoSection/index.tsx (2)
StarterInfoSectionProps(18-27)StarterInfoSection(29-68)apps/docs/src/components/Typography/index.tsx (2)
BodySmall(33-35)Body(25-27)apps/docs/src/components/HeroBannerSection/index.tsx (1)
HeroBannerSection(45-148)apps/docs/src/components/FooterSection/index.tsx (1)
FooterSection(24-61)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: deploy-preview
🔇 Additional comments (4)
apps/docs/src/pages/product/starters.tsx (4)
1-19: LGTM!The imports are well-organized and properly structured. All imported components and icons are used in the page implementation.
21-47: LGTM!The benefits array is properly structured and matches the
BenefitCardPropsinterface. The titles are clear and descriptive.
49-137: LGTM!The Digital Portal Starter configuration is comprehensive and properly structured. The links are correctly wired with real URLs, and the accordion content provides clear, detailed information.
139-242: LGTM!The Customer Portal Starter configuration mirrors the Digital Portal structure effectively and provides comprehensive information about features and integrations.
|
@coderabbitai help |
ChatThere are 3 ways to chat with CodeRabbit:
CodeRabbit commands
Other keywords and placeholders
CodeRabbit configuration file (
|
marcinkrasowski
changed the title
|
@coderabbitai pause |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
apps/docs/src/pages/product/features.tsx (1)
93-99: Fix incomplete Technical Capabilities copy (previously flagged).The issues from the previous review remain unaddressed:
- Line 94's description still ends mid-sentence with "with."
- Line 98 still uses "Ui" instead of "UI"
Apply this diff to fix the copy:
{ title: 'Next-intl', - description: 'for Internationalization and localization with.', + description: 'Internationalization and localization powered by next-intl.', }, { title: 'Tailwind + UI tokens', - description: 'for Ui customization, theming and branding.', + description: 'For UI customization, theming, and branding.', },apps/docs/src/pages/product/starters.tsx (1)
303-313: Fix missing space in CTA description copy.The description currently renders
project.We'rewithout a space; it should beproject. We're.- description="Tell us what kind of frontend starter would help your next project.We're planning more — and we want your input." + description="Tell us what kind of frontend starter would help your next project. We're planning more — and we want your input."apps/docs/src/pages/product/integrations.tsx (1)
14-195: Placeholder content and TODOs still present.The INTEGRATION_SECTIONS data structure still contains the previously flagged issues:
- TODO comments for descriptions at lines 41, 65, 95, 113, 137, and 161
- Generic
"integration description"placeholder text for all integrations- Placeholder
BanGreenTileIconfor all integration iconsThese items should be addressed before merging to production.
🧹 Nitpick comments (5)
apps/docs/src/pages/product/features.tsx (3)
76-177: Consider polishing description styles for consistency.Many descriptions in
technicalCapabilitiesstart with lowercase adjectives or past participles without subjects, creating an inconsistent style. For example:
- Line 82: "based frontend" → "A Next.js-based frontend" or "Next.js-based frontend"
- Line 86: "full-stack TypeScript support" → "Full-stack TypeScript support" (capitalize)
- Line 128: "normalized frontend data model" → "Provides a normalized frontend data model"
Consider revising for a more polished, uniform tone across all capability descriptions.
179-238: Multiple placeholder images awaiting replacement.The
functionalBlocksarray contains several TODO comments indicating placeholder images that need to be replaced with actual feature screenshots or graphics.Would you like me to generate a checklist or open a tracking issue for the remaining image replacements?
246-247: TODO: Additional gradient styling planned.The comment indicates a new gradient circle should be added here. This appears to be a styling enhancement that's still pending.
Would you like help determining the appropriate gradient styling or tracking this as a separate task?
apps/docs/src/pages/product/starters.tsx (1)
49-56: Harden external links opened in a new tab.Several links here set
target="_blank"viaStarterInfoSection, but the underlying anchor inStarterInfoSectiondoes not addrel="noopener", unlikeFooterSection/HeroBannerSectionwhich already setrel="noopener"on external CTAs. To avoidwindow.openerissues and keep behavior consistent, consider updatingStarterInfoSectionto addrelwhen opening a new tab:// apps/docs/src/components/StarterInfoSection/index.tsx - {links.map((linkItem) => ( - <a - key={linkItem.label} - href={linkItem.link} - className="text-white! underline! hover:no-underline! text-sm font-medium" - target={linkItem.target} - > + {links.map((linkItem) => ( + <a + key={linkItem.label} + href={linkItem.link} + className="text-white! underline! hover:no-underline! text-sm font-medium" + target={linkItem.target} + rel={linkItem.target === '_blank' ? 'noopener' : undefined} + >Also applies to: 139-148
apps/docs/src/pages/product/integrations.tsx (1)
203-203: Track or resolve the TODO comment.The TODO comment indicates a gradient circle element is planned. Consider tracking this in an issue or completing it before merging.
Would you like me to open a tracking issue for this visual enhancement?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/docs/src/components/HeroBannerSection/index.tsx(4 hunks)apps/docs/src/pages/product/features.tsx(1 hunks)apps/docs/src/pages/product/integrations.tsx(1 hunks)apps/docs/src/pages/product/starters.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/src/components/HeroBannerSection/index.tsx
🧰 Additional context used
🧬 Code graph analysis (3)
apps/docs/src/pages/product/features.tsx (5)
apps/docs/src/components/HeroBannerSection/index.tsx (1)
HeroBannerSection(46-154)apps/docs/src/components/Typography/index.tsx (4)
Body(25-27)H2(13-15)H3(17-19)BodySmall(33-35)apps/docs/src/components/FeatureTile/index.tsx (1)
FeatureTileList(42-55)apps/docs/src/components/FeaturesListWithImage/index.tsx (1)
FeaturesListWithImage(15-72)apps/docs/src/components/FooterSection/index.tsx (1)
FooterSection(24-61)
apps/docs/src/pages/product/integrations.tsx (4)
apps/docs/src/components/HeroBannerSection/index.tsx (1)
HeroBannerSection(46-154)apps/docs/src/components/Typography/index.tsx (2)
Body(25-27)BodyBold(29-31)apps/docs/src/components/IntegrationsBlocks/index.tsx (1)
IntegrationsBlocks(15-54)apps/docs/src/components/FooterSection/index.tsx (1)
FooterSection(24-61)
apps/docs/src/pages/product/starters.tsx (5)
apps/docs/src/components/BenefitsSection/index.tsx (2)
BenefitCardProps(13-27)BenefitsSection(81-96)apps/docs/src/components/StarterInfoSection/index.tsx (2)
StarterInfoSectionProps(18-27)StarterInfoSection(29-68)apps/docs/src/components/Typography/index.tsx (2)
BodySmall(33-35)Body(25-27)apps/docs/src/components/HeroBannerSection/index.tsx (1)
HeroBannerSection(46-154)apps/docs/src/components/FooterSection/index.tsx (1)
FooterSection(24-61)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: deploy-preview
🔇 Additional comments (5)
apps/docs/src/pages/product/starters.tsx (1)
244-321: Overall page composition and reuse look solid.The layout cleanly composes the hero, two starter sections, shared benefits, and CTA footer using the common components and gradient wrapper. Prop shapes match the shared components, and the structure is coherent and extensible.
apps/docs/src/pages/product/integrations.tsx (4)
1-12: LGTM!Import structure is clean and follows consistent patterns.
206-240: Well-structured component implementation.The HeroBannerSection and IntegrationsBlocks integration is clean and follows the established component patterns. The layout hierarchy is logical and the mapping of INTEGRATION_SECTIONS data is correctly implemented.
245-266: Footer CTA section looks great.The FooterSection is well-configured with clear calls-to-action for both viewing documentation and submitting integration requests. The copy is engaging and properly encourages community participation.
255-258: Internal documentation link verified.The documentation file exists at
apps/docs/docs/guides/integrations/adding-new-integrations.md, confirming the link target is valid.
✅ Actions performedReviews paused. |
What does this PR do?
Key Changes
Summary by CodeRabbit
New Features
Style
Chores