feat: CLI UX improvements - branding, docs links & starter card update#804
Merged
feat: CLI UX improvements - branding, docs links & starter card update#804
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughAdds CLI UX improvements to create-o2s-app (startup banner, boxed summary listing selected blocks/integrations, docs links, conditional warnings). Updates CLI constants and wizard tip formatting, adjusts homepage starter visuals and product starters text, and expands CMS blocks implementation-status docs. Includes two new changesets. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CLI as create-o2s-app
participant Logger
participant FS as Filesystem/Scaffold
participant PKG as BlockMetadata
participant Docs
User->>CLI: run scaffold command / answer prompts
CLI->>Logger: printBanner()
CLI->>PKG: read selected block metadata (warnings)
PKG-->>CLI: metadata (warnings/flags)
CLI->>FS: scaffold project files (template, blocks, integrations)
FS-->>CLI: scaffold result (targetDir, uncoveredModules)
CLI->>Logger: printSummary(selectedBlocks, selectedIntegrations, uncoveredModules, skipInstall)
Logger->>Docs: include docs links (installation, integrations, storybook)
Logger-->>User: render boxed summary with lists and warnings
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
Contributor
Coverage Report for packages/configs/vitest-config
File CoverageNo changed files found. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
apps/docs/docs/integrations/cms/contentful/blocks.md (1)
17-61: Documentation improvement looks good.The table reformatting with better alignment and the addition of comprehensive block entries improves readability and completeness of the implementation status tracking.
Consider aligning the block ordering with the Strapi blocks documentation (apps/docs/docs/integrations/cms/strapi/blocks.md) for easier cross-reference and maintenance. For example, grouping all implemented blocks alphabetically first, then all not-implemented blocks alphabetically would provide consistency across both CMS integration docs.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/docs/docs/integrations/cms/contentful/blocks.md` around lines 17 - 61, Reorder the table in apps/docs/docs/integrations/cms/contentful/blocks.md so implemented blocks (rows with ✅) appear first sorted alphabetically by Block name (e.g., article-list, category-list, faq, quick-links, ticket-list) followed by not-implemented blocks (rows with ❌) also sorted alphabetically (e.g., article, bento-grid, cart, checkout-billing-payment, ...), mirroring the grouping and alphabetical ordering used in the Strapi blocks documentation to make cross-referencing and maintenance easier.packages/cli/create-o2s-app/src/wizard/prompts.ts (1)
98-120: Avoid duplicated literals in tip-box width/padding calculations.The same text is repeated in multiple places (Line 104–106 and Line 113/116), which makes future copy edits error-prone.
♻️ Suggested refactor
- const tipLines = [ - `${kleur.blue().bold('Tip:')} Not sure which blocks to pick?`, - `Browse our Storybook to preview all available components:`, - kleur.cyan(STORYBOOK_URL), - ]; - const tipWidth = Math.max( - 'Tip: Not sure which blocks to pick?'.length, - 'Browse our Storybook to preview all available components:'.length, - STORYBOOK_URL.length, - ); + const plainTipLines = [ + 'Tip: Not sure which blocks to pick?', + 'Browse our Storybook to preview all available components:', + STORYBOOK_URL, + ]; + const tipLines = [ + `${kleur.blue().bold('Tip:')} Not sure which blocks to pick?`, + plainTipLines[1], + kleur.cyan(STORYBOOK_URL), + ]; + const tipWidth = Math.max(...plainTipLines.map((line) => line.length)); const boxWidth = tipWidth + 4; + const pad = (plain: string) => ' '.repeat(boxWidth - 2 - plain.length); console.log(); console.log(` ${kleur.blue('╭' + '─'.repeat(boxWidth) + '╮')}`); - console.log( - ` ${kleur.blue('│')} ${tipLines[0]}${' '.repeat(boxWidth - 2 - 'Tip: Not sure which blocks to pick?'.length)}${kleur.blue('│')}`, - ); - console.log( - ` ${kleur.blue('│')} ${tipLines[1]}${' '.repeat(boxWidth - 2 - 'Browse our Storybook to preview all available components:'.length)}${kleur.blue('│')}`, - ); - console.log( - ` ${kleur.blue('│')} ${tipLines[2]}${' '.repeat(boxWidth - 2 - STORYBOOK_URL.length)}${kleur.blue('│')}`, - ); + console.log(` ${kleur.blue('│')} ${tipLines[0]}${pad(plainTipLines[0])}${kleur.blue('│')}`); + console.log(` ${kleur.blue('│')} ${tipLines[1]}${pad(plainTipLines[1])}${kleur.blue('│')}`); + console.log(` ${kleur.blue('│')} ${tipLines[2]}${pad(plainTipLines[2])}${kleur.blue('│')}`); console.log(` ${kleur.blue('╰' + '─'.repeat(boxWidth) + '╯')}`);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/cli/create-o2s-app/src/wizard/prompts.ts` around lines 98 - 120, Replace duplicated literal usage by deriving widths from a single source of truth: create an array of raw tip strings (e.g., tipLinesRaw = ['Tip: Not sure which blocks to pick?', 'Browse our Storybook to preview all available components:', STORYBOOK_URL]), compute tipWidth = Math.max(...tipLinesRaw.map(s => s.length)), then build the colored tipLines from tipLinesRaw (apply kleur to the pieces) and use tipLinesRaw[i].length when computing the pad (instead of reusing the literal). Update references to tipLines, tipWidth, and boxWidth accordingly so padding uses tipLinesRaw lengths and the printed lines use the colored tipLines.packages/cli/create-o2s-app/src/utils/logger.ts (1)
43-43: Small UX polish: avoid printing./.for current directory.When
targetDirequalsprocess.cwd(),relativeDirbecomes".", so lines likecd ./.are shown. Consider normalizing display to just.in that case.Also applies to: 57-57, 98-98
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/cli/create-o2s-app/src/utils/logger.ts` at line 43, The code builds relativeDir via const relativeDir = path.relative(process.cwd(), targetDir) || '.' which later gets printed as `./${relativeDir}` producing `./.` when targetDir === process.cwd(); fix by normalizing a display variable (e.g., displayDir) so that if relativeDir === '.' you use '.' else prefix with './' (or join with path.posix.join) and replace all uses of `./${relativeDir}` with this normalized displayDir; update the references where relativeDir is printed (the occurrences flagged around the relativeDir definition and its other uses) so output shows `.` instead of `./.`.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/docs/docs/guides/using-generators.md`:
- Line 59: Fix the grammar in the sentence "For each module you chose, it will
create appropriate folder within the `packages/api/integrations/src/module`
directory." by changing "folder" to the plural "folders" so it reads "create
appropriate folders"; locate that exact sentence in the using-generators.md
content and update it accordingly.
In `@packages/cli/create-o2s-app/src/utils/logger.ts`:
- Around line 7-31: printBanner currently prints title/description but omits the
CLI version; update printBanner to accept a version parameter (e.g.,
printBanner(version: string)) and include that version in the banner (centered
or placed in the header/footer area alongside title/description), adjust padding
calculations (contentWidth, titlePad/descPad) as needed so the version fits
without breaking layout, and update callers to pass program.version() or the
package version when invoking printBanner.
---
Nitpick comments:
In `@apps/docs/docs/integrations/cms/contentful/blocks.md`:
- Around line 17-61: Reorder the table in
apps/docs/docs/integrations/cms/contentful/blocks.md so implemented blocks (rows
with ✅) appear first sorted alphabetically by Block name (e.g., article-list,
category-list, faq, quick-links, ticket-list) followed by not-implemented blocks
(rows with ❌) also sorted alphabetically (e.g., article, bento-grid, cart,
checkout-billing-payment, ...), mirroring the grouping and alphabetical ordering
used in the Strapi blocks documentation to make cross-referencing and
maintenance easier.
In `@packages/cli/create-o2s-app/src/utils/logger.ts`:
- Line 43: The code builds relativeDir via const relativeDir =
path.relative(process.cwd(), targetDir) || '.' which later gets printed as
`./${relativeDir}` producing `./.` when targetDir === process.cwd(); fix by
normalizing a display variable (e.g., displayDir) so that if relativeDir === '.'
you use '.' else prefix with './' (or join with path.posix.join) and replace all
uses of `./${relativeDir}` with this normalized displayDir; update the
references where relativeDir is printed (the occurrences flagged around the
relativeDir definition and its other uses) so output shows `.` instead of `./.`.
In `@packages/cli/create-o2s-app/src/wizard/prompts.ts`:
- Around line 98-120: Replace duplicated literal usage by deriving widths from a
single source of truth: create an array of raw tip strings (e.g., tipLinesRaw =
['Tip: Not sure which blocks to pick?', 'Browse our Storybook to preview all
available components:', STORYBOOK_URL]), compute tipWidth =
Math.max(...tipLinesRaw.map(s => s.length)), then build the colored tipLines
from tipLinesRaw (apply kleur to the pieces) and use tipLinesRaw[i].length when
computing the pad (instead of reusing the literal). Update references to
tipLines, tipWidth, and boxWidth accordingly so padding uses tipLinesRaw lengths
and the printed lines use the colored tipLines.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b017fa29-9f1b-423b-9b7f-40f5d15c000d
⛔ Files ignored due to path filters (1)
apps/docs/static/img/homepage/starters-card-cli.wizzard.pngis excluded by!**/*.png
📒 Files selected for processing (9)
.changeset/fair-cows-clean.mdapps/docs/docs/guides/using-generators.mdapps/docs/docs/integrations/cms/contentful/blocks.mdapps/docs/docs/integrations/cms/strapi/blocks.mdapps/docs/src/components/HomepageStartersSection/index.tsxpackages/cli/create-o2s-app/src/constants.tspackages/cli/create-o2s-app/src/index.tspackages/cli/create-o2s-app/src/utils/logger.tspackages/cli/create-o2s-app/src/wizard/prompts.ts
…custom frontend setup
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
.changeset/yellow-jeans-change.md (1)
5-5: Consider expanding the description to capture the full scope of docs changes.The current description is quite minimal. Based on the PR objectives and enriched summary, the docs changes include:
- Removing "Coming soon" badge from "Build your own" starter card
- Adding CTA link to the starter card
- Adding CLI wizard background image with gradient
- Activating the "Build your own" starter card on the homepage
A more comprehensive description would provide better context for the changelog.
📝 Example of a more descriptive changeset message
-docs: enhance product starters section with CLI scaffolding link for custom frontend setup +docs: activate "Build your own" starter card with CLI scaffolding link and wizard image + +- Remove "Coming soon" badge from "Build your own" starter card +- Add CTA link pointing to CLI installation documentation +- Add CLI wizard background image with gradient overlay +- Enable interactive starter card on docs homepage for custom frontend setup🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.changeset/yellow-jeans-change.md at line 5, Update the changeset description in .changeset/yellow-jeans-change.md to list the specific doc edits: removing the "Coming soon" badge from the "Build your own" starter card, adding the CTA link to that starter card, adding the CLI wizard background image with gradient, and activating the "Build your own" starter card on the homepage; make the message explicit about these four items so the changelog clearly reflects the actual doc/UX changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In @.changeset/yellow-jeans-change.md:
- Line 5: Update the changeset description in .changeset/yellow-jeans-change.md
to list the specific doc edits: removing the "Coming soon" badge from the "Build
your own" starter card, adding the CTA link to that starter card, adding the CLI
wizard background image with gradient, and activating the "Build your own"
starter card on the homepage; make the message explicit about these four items
so the changelog clearly reflects the actual doc/UX changes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cefa4cea-7201-4318-8e7a-3fddc6e7fcf9
📒 Files selected for processing (2)
.changeset/yellow-jeans-change.mdapps/docs/src/pages/product/starters.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/docs/src/pages/product/starters.tsx
marcinkrasowski
approved these changes
Mar 16, 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
2 participants
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.
What does this PR do?
Related Ticket(s)
Key Changes
create-o2s-app): improved logger with branding, updated prompts and scaffold flowHow to test
npx create-o2s-appand verify improved CLI output (branding header, summary, docs links)npm run devand check homepage starters section - "Build your own" card should show CLI wizard imagenpm run storybookand verify new cart/checkout component storiesMedia (Loom or gif)
Summary by CodeRabbit
New Features
Documentation
UI Updates