Conversation
anmolsinghbhatia
requested review from
prateekshourya29,
sriramveeraghanta and
vamsikrishnamathala
Contributor
There was a problem hiding this comment.
Pull Request Overview
This pull request introduces empty state components and assets for the propel package as part of WEB-3567. The PR adds a new empty-state module with reusable components and supporting illustration assets in both horizontal and vertical stack variants.
- Empty state React component with configurable titles, descriptions, and action buttons
- Comprehensive illustration assets for different scenarios (work items, views, projects, etc.)
- Stories documentation for component usage and asset previews
Reviewed Changes
Copilot reviewed 49 out of 50 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/propel/tsdown.config.ts | Added empty-state module to build configuration |
| packages/propel/src/empty-state/index.ts | Module entry point exporting empty state components |
| packages/propel/src/empty-state/empty-state.tsx | Main empty state component with props interface and variants |
| packages/propel/src/empty-state/empty-state.stories.tsx | Storybook documentation and examples |
| packages/propel/src/empty-state/assets/vertical-stack/*.tsx | Collection of vertical stack illustration components |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| export const Simple: Story = { | ||
| args: { | ||
| asset: <WorkItemHorizontalStackIllustration className="w-40 h-45" />, | ||
| title: "There're no progress metrics to show yet.", |
There was a problem hiding this comment.
Corrected spelling of 'There're' to 'There are'.
Suggested change
| title: "There're no progress metrics to show yet.", | |
| title: "There are no progress metrics to show yet.", |
Contributor
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a new EmptyState UI component with stories, many new SVG illustration assets (horizontal & vertical stacks) plus helper and asset maps, exposes the empty-state via package exports and tsdown config, fixes JSX SVG attribute names in an icon, and updates .gitignore. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Consumer
participant EmptyState
participant Asset
participant Actions
Consumer->>EmptyState: render(title, description, type, asset?, actions?)
alt asset provided
EmptyState->>Asset: render(asset, className)
Asset-->>EmptyState: SVG element
end
EmptyState->>Consumer: render content (title, description)
opt actions provided
EmptyState->>Actions: render buttons
Consumer->>Actions: click
Actions-->>Consumer: call handler
end
Note over EmptyState: layout differs by type ("detailed" = left-aligned, "simple" = centered)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (2)
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 35
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/propel/src/empty-state/assets/vertical-stack/draft.tsx (1)
14-308: CamelCase all SVG attributesEvery SVG attribute in this TSX file currently uses kebab-case (
stroke-width,fill-rule, etc.). React/TypeScript expect camelCase (strokeWidth,fillRule,clipRule, …); otherwise you get compile-time errors. Please update all of them.
♻️ Duplicate comments (1)
packages/propel/src/empty-state/empty-state.stories.tsx (1)
71-71: Grammar: “There are”Replace "There're" with "There are".
- title: "There're no progress metrics to show yet.", + title: "There are no progress metrics to show yet.",
🧹 Nitpick comments (14)
packages/propel/src/empty-state/assets/horizontal-stack/note.tsx (1)
4-4: Decorative SVGs: hide from AT and prevent focus.Add aria-hidden and focusable for purely illustrative assets.
- <svg width="52" height="59" viewBox="0 0 52 59" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}> + <svg width="52" height="59" viewBox="0 0 52 59" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true" focusable="false">packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx (1)
4-11: Mark illustration as decorative (improves a11y).Hide from assistive tech and remove focus.
<svg width="162" height="188" viewBox="0 0 162 188" fill="none" xmlns="http://www.w3.org/2000/svg" - className={className} + className={className} + aria-hidden="true" + focusable="false" >packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx (1)
4-4: Make SVG decorative by default.- <svg width="72" height="80" viewBox="0 0 72 80" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}> + <svg width="72" height="80" viewBox="0 0 72 80" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true" focusable="false">packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx (1)
236-239: Avoid clipPath ID collisions using React.useId().Using a constant id risks collisions when multiple instances mount. Generate a unique id and reference it; also switch to camelCase attributes.
-import { TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; +import { TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; +import { useId } from "react"; -export const CycleVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( - <svg +export const CycleVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => { + const clipPathId = useId(); + return ( + <svg width="160" height="165" viewBox="0 0 160 165" fill="none" xmlns="http://www.w3.org/2000/svg" - className={className} + className={className} + aria-hidden="true" + focusable="false" > - <g clip-path="url(#clip0_446_128653)"> + <g clipPath={`url(#${clipPathId})`}> ... - <defs> - <clipPath id="clip0_446_128653"> + <defs> + <clipPath id={clipPathId}> <rect width="160" height="164" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary} transform="translate(0 0.5)" /> </clipPath> </defs> - </svg> -); + </svg> + ); +};Also applies to: 12-12
packages/propel/src/empty-state/assets/horizontal-stack/state.tsx (1)
4-4: Decorative SVG a11y.- <svg width="72" height="81" viewBox="0 0 72 81" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}> + <svg width="72" height="81" viewBox="0 0 72 81" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true" focusable="false">packages/propel/src/empty-state/assets/vertical-stack/module.tsx (1)
4-11: Add aria-hidden/focusable for decorative SVG.<svg width="162" height="168" viewBox="0 0 162 168" fill="none" xmlns="http://www.w3.org/2000/svg" - className={className} + className={className} + aria-hidden="true" + focusable="false" >packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx (1)
4-11: Mark as decorative to improve accessibility.<svg width="162" height="171" viewBox="0 0 162 171" fill="none" xmlns="http://www.w3.org/2000/svg" - className={className} + className={className} + aria-hidden="true" + focusable="false" >packages/propel/src/empty-state/assets/vertical-stack/epic.tsx (1)
4-11: Decorative SVG: add aria-hidden/focusable.<svg width="162" height="166" viewBox="0 0 162 166" fill="none" xmlns="http://www.w3.org/2000/svg" - className={className} + className={className} + aria-hidden="true" + focusable="false" >packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx (1)
1-21: Avoid potential barrel self-import cyclesImporting components from "./" (the same folder’s barrel) can create circular deps if that barrel re-exports this file. Safer: import components directly from their files (e.g., "./customer", "./epic", …).
Please confirm the barrel does not re-export constant.tsx; if it does, switch to direct imports.
packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx (1)
17-19: Use React SVG camelCase props and forward a11y/rest props.
- Replace hyphenated SVG attributes with camelCase for React/TSX (e.g., strokeWidth, strokeLinecap, strokeLinejoin, fillRule, clipRule). This improves type safety and consistency.
- Consider extending TIllustrationAssetProps to accept/forward standard SVG props (e.g., role, aria-hidden, title) and spread them onto the root for accessibility.
Example (apply pattern across the file):
- <path stroke-width="0.4" stroke-linecap="round" stroke-linejoin="round" /> + <path strokeWidth="0.4" strokeLinecap="round" strokeLinejoin="round" />And for props forwarding (requires updating helper.tsx):
-export const WorkItemVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( +export const WorkItemVerticalStackIllustration = ({ className, ...props }: TIllustrationAssetProps) => ( - <svg ... className={className}> + <svg ... className={className} {...props}>Optionally set width/height to "100%" and rely on viewBox + className for sizing flexibility.
Also applies to: 25-27, 35-37, 43-45, 51-53, 61-63, 65-73, 75-83, 101-105, 111-115, 133-139, 141-143, 145-153, 155-163, 167-173, 181-183, 187-193, 197-203, 205-213, 215-223, 225-233, 235-243
packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx (1)
17-19: CamelCase SVG attributes + a11y/rest props.
- Convert stroke-width/linecap/linejoin and fill-rule/clip-rule to strokeWidth/strokeLinecap/strokeLinejoin and fillRule/clipRule.
- Allow forwarding standard SVG props for accessibility.
Example:
- <path fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.5" /> + <path fillRule="evenodd" clipRule="evenodd" strokeWidth="0.5" />Consider: ({ className, ...props }: TIllustrationAssetProps) and {...props} on .
Also applies to: 25-27, 33-35, 41-45, 49-55, 59-63, 69-71, 73-79, 81-87, 89-95, 97-103, 105-111, 115-117, 119-121, 125-131, 135-141, 145-151, 155-161
packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx (1)
10-13: Adopt React SVG camelCase props; enable passing a11y props.
- Use strokeWidth/strokeLinecap/strokeLinejoin instead of hyphenated forms.
- Forward {...props} to and extend the prop type to include SVG props for accessibility.
Example:
- stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round" + strokeWidth="0.25" strokeLinecap="round" strokeLinejoin="round"Also applies to: 18-21, 28-31, 36-39, 44-48, 58-60, 62-64, 66-68, 70-72
packages/propel/src/empty-state/empty-state.tsx (2)
36-41: Use stable keys for actions instead of array index.Index keys cause reconciliation issues on change/reorder. Prefer a stable id (or label if guaranteed unique).
- {actions.map((action, index) => ( - <Button key={index} ... + {actions.map((action) => ( + <Button key={action.label} ...If labels aren’t unique, add an id to ActionButton and key by it.
54-59: Align “detailed” layout items; mirror “simple” behavior.Add items-start for detailed to align content consistently.
- const alignmentClass = type === "simple" ? "items-center text-center" : "text-left"; + const alignmentClass = type === "simple" ? "items-center text-center" : "items-start text-left";Optional: change asset wrapper from max-w-40 to w-40 for consistent sizing.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (50)
.gitignore(1 hunks)packages/propel/package.json(1 hunks)packages/propel/src/empty-state/assets/helper.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/export.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/index.ts(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/label.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/link.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/members.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/note.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/state.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/template.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/token.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/update.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx(1 hunks)packages/propel/src/empty-state/assets/index.ts(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/constant.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/customer.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/draft.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/epic.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/index.ts(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/module.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/page.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/project.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/view.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx(1 hunks)packages/propel/src/empty-state/empty-state.stories.tsx(1 hunks)packages/propel/src/empty-state/empty-state.tsx(1 hunks)packages/propel/src/empty-state/index.ts(1 hunks)packages/propel/tsdown.config.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (41)
packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/draft.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx (19)
packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx (1)
CustomerHorizontalStackIllustration(3-64)packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx (1)
EpicHorizontalStackIllustration(3-62)packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx (1)
EstimateHorizontalStackIllustration(3-64)packages/propel/src/empty-state/assets/horizontal-stack/export.tsx (1)
ExportHorizontalStackIllustration(3-70)packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx (1)
IntakeHorizontalStackIllustration(3-82)packages/propel/src/empty-state/assets/horizontal-stack/label.tsx (1)
LabelHorizontalStackIllustration(3-68)packages/propel/src/empty-state/assets/horizontal-stack/link.tsx (1)
LinkHorizontalStackIllustration(3-76)packages/propel/src/empty-state/assets/horizontal-stack/members.tsx (1)
MembersHorizontalStackIllustration(3-82)packages/propel/src/empty-state/assets/horizontal-stack/note.tsx (1)
NoteHorizontalStackIllustration(3-62)packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx (1)
PriorityHorizontalStackIllustration(3-74)packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx (1)
SettingsHorizontalStackIllustration(3-66)packages/propel/src/empty-state/assets/horizontal-stack/state.tsx (1)
StateHorizontalStackIllustration(3-62)packages/propel/src/empty-state/assets/horizontal-stack/template.tsx (1)
TemplateHorizontalStackIllustration(3-76)packages/propel/src/empty-state/assets/horizontal-stack/token.tsx (1)
TokenHorizontalStackIllustration(3-70)packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx (1)
UnknownHorizontalStackIllustration(3-77)packages/propel/src/empty-state/assets/horizontal-stack/update.tsx (1)
UpdateHorizontalStackIllustration(3-68)packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx (1)
WebhookHorizontalStackIllustration(3-62)packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx (1)
WorkItemHorizontalStackIllustration(3-76)packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx (1)
WorklogHorizontalStackIllustration(3-70)
packages/propel/src/empty-state/assets/horizontal-stack/token.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/project.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/note.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/page.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/export.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/members.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/update.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/epic.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/state.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/label.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/view.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/module.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/customer.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/template.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/link.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/empty-state.tsx (1)
packages/propel/src/button/helper.tsx (1)
TButtonVariant(1-12)
packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/empty-state.stories.tsx (3)
packages/propel/src/empty-state/empty-state.tsx (2)
EmptyStateProps(14-21)EmptyState(46-62)packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx (1)
HorizontalStackAssetsMap(23-100)packages/propel/src/empty-state/assets/vertical-stack/constant.tsx (1)
VerticalStackAssetsMap(22-95)
🪛 GitHub Actions: Build and lint web apps
packages/propel/src/empty-state/empty-state.stories.tsx
[error] 7-7: ./empty-state' import is duplicated no-duplicate-imports
🪛 GitHub Check: Build and lint web apps
packages/propel/src/empty-state/empty-state.stories.tsx
[failure] 7-7:
'./empty-state' import is duplicated
⏰ 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: Analyze (javascript)
🔇 Additional comments (9)
.gitignore (1)
101-103: LGTMAdding
CLAUDE.mdhere keeps the Storybook static bundle free of stray docs—no concerns.packages/propel/src/empty-state/index.ts (1)
1-1: Public barrel looks goodAligns with package export; no issues.
packages/propel/tsdown.config.ts (1)
17-17: Build entry added correctlyIncluding empty-state in tsdown entries is correct.
packages/propel/package.json (1)
31-31: Export mapping added correctlyMatches the barrel and tsdown entry; looks good.
packages/propel/src/empty-state/assets/index.ts (1)
1-3: Barrel re-exports are correctConsolidated exports look good.
packages/propel/src/empty-state/assets/vertical-stack/constant.tsx (1)
22-94: LGTMThe registry wiring looks good and matches the newly added assets.
packages/propel/src/empty-state/empty-state.stories.tsx (1)
70-71: Verify Tailwind class h-45 exists.If not in your theme, use a supported size (e.g., h-40 or h-44) or a custom utility.
packages/propel/src/empty-state/assets/vertical-stack/index.ts (1)
1-19: Barrel looks good.Re-exports are consistent and cohesive.
packages/propel/src/empty-state/assets/horizontal-stack/index.ts (1)
1-19: Barrel looks good.Clean, comprehensive re-exports.
packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
Outdated
Show resolved
Hide resolved
packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx
Outdated
Show resolved
Hide resolved
packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx
Outdated
Show resolved
Hide resolved
packages/propel/src/empty-state/assets/horizontal-stack/export.tsx
Outdated
Show resolved
Hide resolved
packages/propel/src/empty-state/assets/vertical-stack/project.tsx
Outdated
Show resolved
Hide resolved
packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx
Outdated
Show resolved
Hide resolved
packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx
Outdated
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
packages/propel/src/empty-state/assets/horizontal-stack/note.tsx (1)
4-4: Add the decorative SVG accessibility flags that were requested earlier.The earlier review asked for
aria-hidden/focusable="false"on this illustration, but they’re still missing, so assistive tech will surface an unlabeled graphic.- <svg width="52" height="59" viewBox="0 0 52 59" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}> + <svg + width="52" + height="59" + viewBox="0 0 52 59" + fill="none" + xmlns="http://www.w3.org/2000/svg" + className={className} + aria-hidden="true" + focusable="false" + >packages/propel/src/empty-state/empty-state.stories.tsx (1)
69-72: Fix grammar in the “Simple” story title.
The string reverted to “There're…”, which is ungrammatical; please switch back to “There are…” so the UI copy reads correctly.- title: "There're no progress metrics to show yet.", + title: "There are no progress metrics to show yet.",
🧹 Nitpick comments (5)
packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx (1)
3-11: Hide the decorative SVG from assistive techThis illustration has no accessible name, so screen readers can announce a meaningless “graphic”. Add
aria-hidden="true"(andfocusable="false"for IE/Edge) on the<svg>so the empty state layout stays quiet for AT users.packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx (1)
3-11: Consider accessibility and performance enhancements.Two optional improvements to consider:
Accessibility: Since this is likely a decorative illustration in an empty state, consider adding
aria-hidden="true"to indicate it's purely decorative, or add a descriptivearia-labelif it conveys meaningful information to screen reader users.Performance: If this component is rendered frequently or in lists, wrapping it with
React.memocould prevent unnecessary re-renders when parent components update.Example with both enhancements:
+import { memo } from 'react'; import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; -export const WorkItemVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( +export const WorkItemVerticalStackIllustration = memo(({ className }: TIllustrationAssetProps) => ( <svg width="162" height="180" viewBox="0 0 162 180" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} + aria-hidden="true" > {/* ... rest of SVG content ... */} </svg> -); +)); + +WorkItemVerticalStackIllustration.displayName = 'WorkItemVerticalStackIllustration';packages/propel/src/empty-state/assets/horizontal-stack/token.tsx (1)
4-4: Mark decorative SVGs asaria-hidden.These illustration components are decorative, but the root
<svg>lacksaria-hidden/focusableso assistive tech will still announce an unlabeled graphic. Please mirror the pattern we use elsewhere and flag it decorative.- <svg width="81" height="92" viewBox="0 0 81 92" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}> + <svg + width="81" + height="92" + viewBox="0 0 81 92" + fill="none" + xmlns="http://www.w3.org/2000/svg" + className={className} + aria-hidden="true" + focusable="false" + >packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx (1)
4-11: Flag large decorative SVG as hidden from a11y tools.Without
aria-hidden/focusable="false"this sizeable illustration shows up to screen readers as an empty graphic. Please mark it decorative.<svg width="162" height="173" viewBox="0 0 162 173" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} + aria-hidden="true" + focusable="false" >packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx (1)
4-11: Hide this decorative SVG from screen readers.Like the other empty-state assets, this SVG should ship with
aria-hidden/focusable="false"so assistive tech isn’t forced to announce an unlabeled image.<svg width="162" height="175" viewBox="0 0 162 175" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} + aria-hidden="true" + focusable="false" >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (43)
.gitignore(1 hunks)packages/propel/package.json(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/export.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/label.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/link.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/members.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/note.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/state.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/template.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/token.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/update.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx(1 hunks)packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/customer.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/draft.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/epic.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/module.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/page.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/project.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/view.tsx(1 hunks)packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx(1 hunks)packages/propel/src/empty-state/empty-state.stories.tsx(1 hunks)packages/propel/src/icons/brand/zerodha-logo.tsx(1 hunks)packages/propel/tsdown.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .gitignore
🚧 Files skipped from review as they are similar to previous changes (27)
- packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
- packages/propel/src/empty-state/assets/vertical-stack/page.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/members.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/template.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/label.tsx
- packages/propel/src/empty-state/assets/vertical-stack/view.tsx
- packages/propel/src/empty-state/assets/vertical-stack/module.tsx
- packages/propel/src/empty-state/assets/vertical-stack/draft.tsx
- packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx
- packages/propel/src/empty-state/assets/vertical-stack/epic.tsx
- packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx
- packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx
- packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx
- packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx
- packages/propel/tsdown.config.ts
- packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/state.tsx
- packages/propel/src/empty-state/assets/vertical-stack/customer.tsx
- packages/propel/src/empty-state/assets/vertical-stack/project.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/link.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx
- packages/propel/src/empty-state/assets/horizontal-stack/export.tsx
🧰 Additional context used
🧬 Code graph analysis (13)
packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/update.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/token.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/empty-state.stories.tsx (3)
packages/propel/src/empty-state/empty-state.tsx (2)
EmptyStateProps(14-21)EmptyState(46-62)packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx (1)
HorizontalStackAssetsMap(23-100)packages/propel/src/empty-state/assets/vertical-stack/constant.tsx (1)
VerticalStackAssetsMap(22-95)
packages/propel/src/empty-state/assets/horizontal-stack/note.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx (1)
packages/propel/src/empty-state/assets/helper.tsx (2)
TIllustrationAssetProps(13-15)ILLUSTRATION_COLOR_TOKEN_MAP(1-11)
⏰ 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). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx (1)
1-245: LGTM! Clean implementation following established patterns.The component correctly:
- Uses proper TypeScript typing with
TIllustrationAssetProps- Forwards the
classNameprop to the root SVG element- Leverages color tokens from
ILLUSTRATION_COLOR_TOKEN_MAPfor consistent theming- Uses camelCase SVG attributes appropriate for React/JSX
packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx (1)
1-82: LGTM! Previous SVG attribute issue resolved.The component is well-implemented. All SVG attributes are properly camelCased (strokeWidth, strokeLinecap, strokeLinejoin, fillRule, clipRule), correctly addressing the previous review concern. The component structure is clean, uses the color token map appropriately, and follows React/TSX conventions.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/propel/package.json (1)
99-102: Subpath export for “./empty-state” is correct;src/empty-state/index.tsis included in tsdown’s entries withdts: true. Consider adding a"types": "./dist/empty-state/index.d.ts"condition alongside"import"and"require"for each export.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/propel/package.json(1 hunks)
⏰ 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). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
vamsikrishnamathala
approved these changes
Oct 7, 2025
packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
Outdated
Show resolved
Hide resolved
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
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.
Summary
This PR includes new empty state assets and components in the propel package.
Type of Change
Media
Summary by CodeRabbit
New Features
Documentation
Chores
Style