feat: Add onboarding flow UI with metrics tracking #148
Conversation
- Add 6-step onboarding flow with split-screen layout - Implement organization name, member import, team setup, role creation, KPI/metrics, and finish steps - Add data source dropdown and goal type toggle (absolute/relative) for metrics - Add numeric input validation for goal fields - Note: This is UI-only implementation, no data persistence yet
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Add quick-select buttons for common team names (growth, product, operations) - Improve UX by allowing users to quickly select example team names - Matches the pattern used in metrics step
WalkthroughIntroduces a complete 6-step onboarding wizard with synchronized form and visual components. Each step collects configuration data (organization name, team members import, team setup, role creation, KPI configuration) with navigation controls. Uses Framer Motion for animations and state management to track progress through the flow. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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: 0
🧹 Nitpick comments (12)
src/app/onboarding/_components/kpi-step.tsx (2)
23-45: Use explicit type imports for events and clarify numeric validation behavior
handleAbsoluteGoalChange/handleRelativeGoalChangeuseReact.ChangeEventwithout importing the type, relying on the globalReactnamespace and mixing manual regex with atype="number"input. To align with typicalconsistent-type-importssetups and keep intent clear, consider importing the event type and tightening the validation story:import { useState, type ChangeEvent } from "react"; const handleAbsoluteGoalChange = (e: ChangeEvent<HTMLInputElement>) => { const value = e.target.value; // currently allows "", "123", "123.45", and also just "." if (value === "" || /^\d*\.?\d*$/.test(value)) { setAbsoluteGoal(value); } };Also double‑check that allowing a lone
"."is intentional and that future parsing to a number accounts for this case to avoidNaN.
259-283: Consider gating “continue” on KPI completenessRight now “continue” always calls
onNextregardless of whether a metric name, data source, or goal has been entered, while “skip for now” is also available. To avoid accidental empty KPIs, consider disabling “continue” until a minimal set of fields (e.g., metric name and either absolute or relative goal) is present, and reserve “skip for now” for intentionally bypassing this step.src/app/onboarding/_components/import-members-step.tsx (1)
84-121: Align Slack “COMING SOON” state with selection and continue behaviorSlack is labeled “COMING SOON” but is still fully selectable and enables the “continue” CTA, making it indistinguishable in behavior from Google Workspace. This can confuse users into thinking Slack import is available.
Consider either:
- Disabling the Slack button (and not letting it satisfy
selectedIntegration) while it’s “coming soon”, or- Handling Slack as a separate code path (e.g., toast / modal explaining it’s not yet available) and keeping
continuegated only on supported integrations.Also applies to: 139-146
src/app/onboarding/layout.tsx (1)
1-13: Prefer importingReactNodeas a type instead of usingReact.ReactNodeTo keep type usage explicit and align with typical
@typescript-eslint/consistent-type-importssetups, consider importingReactNoderather than relying on the globalReactnamespace:import { type Metadata } from "next"; import type { ReactNode } from "react"; export default function OnboardingLayout({ children, }: { children: ReactNode; }) { return <div className="bg-background min-h-screen">{children}</div>; }This keeps all external types coming from explicit imports and avoids depending on ambient
Reactglobals.src/app/onboarding/_components/finish-step.tsx (1)
12-15: Avoid hard‑codingmockTeamIdin the final CTA
mockTeamIdis currently hard‑coded to"demo-team"and used in the final CTA link. That’s fine for a UI‑only prototype, but easy to forget once you wire up real data.Before shipping beyond a demo context, consider:
- Passing a real
teamId(and possibly team name) via props or context, and- Falling back gracefully (e.g., disabling the CTA or routing to a safe default) if no team has been created yet.
This will prevent the “open role canvas” button from silently routing to an invalid or demo route in production.
Also applies to: 100-115
src/app/onboarding/_components/progress-indicator.tsx (1)
10-51: Optional: add ARIA semantics to improve progress accessibilityThe animated dot indicator works visually, but it’s currently just a bare
<div>for assistive tech. Consider wrapping it with appropriate ARIA semantics (e.g.,role="group"/aria-labelon the container, or arole="progressbar"witharia-valuenow/aria-valuemax) so screen readers can convey onboarding progress as well.src/app/onboarding/page.tsx (1)
32-93: Well-structured layout with synchronized step transitions.The split-screen layout and AnimatePresence integration work well together. The step synchronization between left and right panels is clean.
However, consider the following enhancements:
Data persistence: While the PR scope is UI-only, user progress is lost on page refresh. Consider adding localStorage to persist step data and current step for better UX.
Accessibility: The onboarding flow lacks keyboard navigation hints, ARIA labels, and focus management:
- Add
aria-labelto the progress indicator- Add
role="progressbar"witharia-valuenow,aria-valuemin,aria-valuemaxattributes- Manage focus when transitioning between steps
- Consider adding keyboard shortcuts (e.g., Ctrl+→ for next, Ctrl+← for back)
Error boundaries: Wrap step components in an error boundary to gracefully handle rendering failures.
src/app/onboarding/_components/step-visuals.tsx (5)
12-73: Consider using theme colors instead of hardcoded RGB values.Lines 28-29 use hardcoded
rgb(60, 60, 55)for the grid background. This breaks theme consistency and won't adapt to theme changes.Consider using Tailwind theme colors or CSS custom properties:
- linear-gradient(rgb(60, 60, 55) 1px, transparent 1px), - linear-gradient(90deg, rgb(60, 60, 55) 1px, transparent 1px) + linear-gradient(rgb(var(--border)) 1px, transparent 1px), + linear-gradient(90deg, rgb(var(--border)) 1px, transparent 1px)Or use a Tailwind utility class approach if the pattern is reused.
75-170: LGTM! Orbiting nodes visualization is mathematically sound.The circular positioning using trigonometry is correctly implemented with 6 nodes at 60-degree intervals. The SVG connection lines animate nicely.
One optional note: The SVG positioning (lines 125-128) uses magic numbers that could be extracted to constants if this pattern is reused elsewhere, but it's fine for a one-off visual.
346-466: Refactor hardcoded theme colors for consistency.Lines 369, 420, 425, and 440 use hardcoded
rgb(142, 157, 172)which breaks theme consistency and won't adapt to theme changes.Extract the color to a CSS custom property or Tailwind theme color:
- style={{ backgroundColor: "rgb(142, 157, 172)" }} + className="bg-chart-line"And define in your Tailwind config or use an existing theme color.
Additionally, the SVG path generation (lines 431, 438) is complex and hard to maintain. Consider extracting it to a helper function:
const createChartPath = (dataPoints: number[], width: number, height: number) => { const xStep = width / (dataPoints.length - 1); const points = dataPoints.map((p, i) => `L${i * xStep},${height - p * 0.5}`).join(" "); return `M0,${height - dataPoints[0] * 0.5} ${points}`; };
468-623: LGTM! Celebration visual effectively conveys completion.The network diagram with animated connections and spring-animated checkmark provides a satisfying conclusion to the onboarding flow.
The positioning coordinates are hardcoded but acceptable for a static decorative visual. If this pattern is reused, consider extracting node positions to a configuration object.
12-623: Add accessibility attributes for decorative visuals.All six visual components are purely decorative and should be hidden from assistive technologies to avoid confusing screen reader users.
Add
aria-hidden="true"to the rootmotion.divof each visual component:<motion.div + aria-hidden="true" variants={containerVariants} initial="initial" animate="animate"Apply this to all six visuals: OrgNameVisual, ImportMembersVisual, TeamSetupVisual, RoleCreationVisual, KpiVisual, and FinishVisual.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/app/onboarding/_components/finish-step.tsx(1 hunks)src/app/onboarding/_components/import-members-step.tsx(1 hunks)src/app/onboarding/_components/kpi-step.tsx(1 hunks)src/app/onboarding/_components/org-name-step.tsx(1 hunks)src/app/onboarding/_components/progress-indicator.tsx(1 hunks)src/app/onboarding/_components/role-creation-step.tsx(1 hunks)src/app/onboarding/_components/step-visuals.tsx(1 hunks)src/app/onboarding/_components/team-setup-step.tsx(1 hunks)src/app/onboarding/layout.tsx(1 hunks)src/app/onboarding/page.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: In TypeScript files, use@typescript-eslint/consistent-type-importsto enforce inline type imports and sort imports with @trivago/prettier-plugin-sort-imports
Use the tRPC server caller API fromsrc/trpc/server.tsdirectly in Server Components for 10x faster performance instead of client-side hooks
Files:
src/app/onboarding/_components/import-members-step.tsxsrc/app/onboarding/_components/progress-indicator.tsxsrc/app/onboarding/_components/role-creation-step.tsxsrc/app/onboarding/_components/finish-step.tsxsrc/app/onboarding/_components/org-name-step.tsxsrc/app/onboarding/layout.tsxsrc/app/onboarding/page.tsxsrc/app/onboarding/_components/step-visuals.tsxsrc/app/onboarding/_components/team-setup-step.tsxsrc/app/onboarding/_components/kpi-step.tsx
src/app/**/*.{tsx,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use React Server Components and server-side data fetching patterns instead of client-side fetching for better performance and security
Files:
src/app/onboarding/_components/import-members-step.tsxsrc/app/onboarding/_components/progress-indicator.tsxsrc/app/onboarding/_components/role-creation-step.tsxsrc/app/onboarding/_components/finish-step.tsxsrc/app/onboarding/_components/org-name-step.tsxsrc/app/onboarding/layout.tsxsrc/app/onboarding/page.tsxsrc/app/onboarding/_components/step-visuals.tsxsrc/app/onboarding/_components/team-setup-step.tsxsrc/app/onboarding/_components/kpi-step.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use TanStack Query (via tRPC hooks) for server state management, client-side data fetching, and automatic cache invalidation
Files:
src/app/onboarding/_components/import-members-step.tsxsrc/app/onboarding/_components/progress-indicator.tsxsrc/app/onboarding/_components/role-creation-step.tsxsrc/app/onboarding/_components/finish-step.tsxsrc/app/onboarding/_components/org-name-step.tsxsrc/app/onboarding/layout.tsxsrc/app/onboarding/page.tsxsrc/app/onboarding/_components/step-visuals.tsxsrc/app/onboarding/_components/team-setup-step.tsxsrc/app/onboarding/_components/kpi-step.tsx
src/app/**/page.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Use the shared canvas library from
src/lib/canvas/when building new React Flow canvas features (BaseNode, SaveStatus, EdgeActionButtons, create-canvas-store)
Files:
src/app/onboarding/page.tsx
🧠 Learnings (2)
📚 Learning: 2025-12-02T13:36:55.215Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-02T13:36:55.215Z
Learning: Applies to src/components/ui/**/*.tsx : Use shadcn/ui CLI from `components.json` configuration to add new UI components instead of manual copying
Applied to files:
src/app/onboarding/_components/import-members-step.tsxsrc/app/onboarding/_components/step-visuals.tsx
📚 Learning: 2025-12-02T13:36:55.215Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-02T13:36:55.215Z
Learning: Applies to src/app/**/components/**/*.tsx : Define custom React Flow nodes in a `_components/` folder within the feature directory and style them with the `BaseNode` component from the shared library
Applied to files:
src/app/onboarding/_components/finish-step.tsxsrc/app/onboarding/_components/step-visuals.tsx
🧬 Code graph analysis (2)
src/app/onboarding/page.tsx (8)
src/app/onboarding/_components/progress-indicator.tsx (1)
ProgressIndicator(10-53)src/app/onboarding/_components/org-name-step.tsx (1)
OrgNameStep(11-99)src/app/onboarding/_components/import-members-step.tsx (1)
ImportMembersStep(12-151)src/app/onboarding/_components/team-setup-step.tsx (1)
TeamSetupStep(12-121)src/app/onboarding/_components/role-creation-step.tsx (1)
RoleCreationStep(12-136)src/app/onboarding/_components/kpi-step.tsx (1)
KpiStep(23-286)src/app/onboarding/_components/finish-step.tsx (1)
FinishStep(12-127)src/app/onboarding/_components/step-visuals.tsx (6)
OrgNameVisual(13-73)ImportMembersVisual(76-170)TeamSetupVisual(173-230)RoleCreationVisual(233-344)KpiVisual(347-466)FinishVisual(469-623)
src/app/onboarding/_components/kpi-step.tsx (2)
src/components/ui/select.tsx (5)
Select(178-178)SelectTrigger(186-186)SelectValue(187-187)SelectContent(179-179)SelectItem(181-181)src/components/ui/toggle-group.tsx (2)
ToggleGroup(84-84)ToggleGroupItem(84-84)
⏰ 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: test
🔇 Additional comments (8)
src/app/onboarding/_components/org-name-step.tsx (1)
11-96: Solid minimal validation and keyboard UX for org nameThe
canContinuecheck usingorgName.trim().length > 0plus disabling the button and handling Enter keypress provides a clear, minimal guard against empty org names with good keyboard UX. This step looks good as a self‑contained client component.src/app/onboarding/_components/role-creation-step.tsx (1)
12-132: Role creation step state and validation look consistentRequiring both
titleandpurposeviacanContinuebefore enabling the continue button fits the guidance text and keeps the flow from advancing on empty roles. The structure and local state management here look solid.src/app/onboarding/_components/team-setup-step.tsx (1)
12-117: Team setup step is coherent and consistent with the rest of the flowUsing
canContinuebased on a trimmedteamName, plus example chips and Enter‑to‑continue behavior, keeps this step consistent with OrgNameStep and provides a smooth UX. The component looks good as implemented.src/app/onboarding/page.tsx (2)
1-23: LGTM! Clean setup and imports.The component is correctly marked as a client component for state management and animations. Imports are well-organized and the TOTAL_STEPS constant follows good practices.
25-30: LGTM! Navigation logic is sound.The state management and boundary checks are correctly implemented. Using the functional form of setState is good practice.
src/app/onboarding/_components/step-visuals.tsx (3)
1-10: LGTM! Good use of shared animation variants.The containerVariants provide a consistent fade transition across all visual components, following DRY principles.
172-230: LGTM! Clean and straightforward team visualization.The staggered animation and highlighting of the first team card effectively demonstrates the team organization concept.
232-344: LGTM! Effective educational breakdown.The staggered reveal of role components (title, purpose, accountabilities) with examples provides clear guidance to users. Proper quote escaping and clean structure.
This PR adds a complete onboarding flow UI with 6 steps including organization setup, team creation, role definition, and metrics tracking.
Note: This is UI-only implementation for now - no data persistence or backend integration yet.
Key Changes
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.