Project approval

Project lifecycle controls with a Draft → Submitted → Approved → Completed status track, confirm dialogs that spring the fill forward, a reject shake that drains it back, a confetti pop on completion and a comments sheet.

TypeScript Source with Startup & Business plans Light & dark

Onboarding flow redesign

MLMaya Lindqvist

draft

1DraftOwner
2SubmittedAdmin review
3ApprovedIn progress
4CompletedShipped

Not submitted yet

Maya is still working on this. Submit it when it is ready for review.

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { ProjectApproval } from '@/components/component-kit/items/block-project-approval';
2
3export function Example() {
4  return <ProjectApproval onStatusChange={(from, to) => console.log(from, to)} />;
5}

Props

Project approval properties
Prop	Type	Default	Description
`project`	`ApprovalProject`	`built-in demo project`	Title, owner ({ name, initials }), initial status and comments.
`defaultStatus`	`"draft" \| "submitted" \| "approved" \| "completed"`	`project.status`	Overrides the project's status for the initial render.
`onStatusChange`	`(from: ProjectStatus, to: ProjectStatus, reason?: string) => void`	`undefined`	Called on every transition, with the dialog note or rejection reason when one was given.
`compact`	`boolean`	`false`	Track plus a single action button, for small previews.
`autoPlay`	`boolean`	`compact`	Idle loop that walks the track every 1.8s and wraps to Draft.
`contentClassName`	`string`	`undefined`	Class for the portalled confirm dialog and comments sheet.

1import { ProjectApproval } from '@/components/component-kit/items/block-project-approval'; 2 3export function Example() { 4 return <ProjectApproval onStatusChange={(from, to) => console.log(from, to)} />; 5}

Props

Project approval properties
Prop	Type	Default	Description
`project`	`ApprovalProject`	`built-in demo project`	Title, owner ({ name, initials }), initial status and comments.
`defaultStatus`	`"draft" \| "submitted" \| "approved" \| "completed"`	`project.status`	Overrides the project's status for the initial render.
`onStatusChange`	`(from: ProjectStatus, to: ProjectStatus, reason?: string) => void`	`undefined`	Called on every transition, with the dialog note or rejection reason when one was given.
`compact`	`boolean`	`false`	Track plus a single action button, for small previews.
`autoPlay`	`boolean`	`compact`	Idle loop that walks the track every 1.8s and wraps to Draft.
`contentClassName`	`string`	`undefined`	Class for the portalled confirm dialog and comments sheet.

Props

Project approval properties
Prop	Type	Default	Description
`project`	`ApprovalProject`	`built-in demo project`	Title, owner ({ name, initials }), initial status and comments.
`defaultStatus`	`"draft" \| "submitted" \| "approved" \| "completed"`	`project.status`	Overrides the project's status for the initial render.
`onStatusChange`	`(from: ProjectStatus, to: ProjectStatus, reason?: string) => void`	`undefined`	Called on every transition, with the dialog note or rejection reason when one was given.
`compact`	`boolean`	`false`	Track plus a single action button, for small previews.
`autoPlay`	`boolean`	`compact`	Idle loop that walks the track every 1.8s and wraps to Draft.
`contentClassName`	`string`	`undefined`	Class for the portalled confirm dialog and comments sheet.

Project approval

TypeScript Source with Startup & Business plans Light & dark

Onboarding flow redesign

MLMaya Lindqvist

draft

1DraftOwner
2SubmittedAdmin review
3ApprovedIn progress
4CompletedShipped

Not submitted yet

Maya is still working on this. Submit it when it is ready for review.

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { ProjectApproval } from '@/components/component-kit/items/block-project-approval';
2
3export function Example() {
4  return <ProjectApproval onStatusChange={(from, to) => console.log(from, to)} />;
5}

Props

Project approval properties
Prop	Type	Default	Description
`project`	`ApprovalProject`	`built-in demo project`	Title, owner ({ name, initials }), initial status and comments.
`defaultStatus`	`"draft" \| "submitted" \| "approved" \| "completed"`	`project.status`	Overrides the project's status for the initial render.
`onStatusChange`	`(from: ProjectStatus, to: ProjectStatus, reason?: string) => void`	`undefined`	Called on every transition, with the dialog note or rejection reason when one was given.
`compact`	`boolean`	`false`	Track plus a single action button, for small previews.
`autoPlay`	`boolean`	`compact`	Idle loop that walks the track every 1.8s and wraps to Draft.
`contentClassName`	`string`	`undefined`	Class for the portalled confirm dialog and comments sheet.