diff --git a/.gitignore b/.gitignore index 4baa3495a..7ebfe7e99 100644 --- a/.gitignore +++ b/.gitignore @@ -99,3 +99,5 @@ dev-editor *.rdb.gz storybook-static + +CLAUDE.md diff --git a/packages/propel/package.json b/packages/propel/package.json index be0be893d..ad335f109 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -96,6 +96,10 @@ "import": "./dist/emoji-reaction/index.mjs", "require": "./dist/emoji-reaction/index.js" }, + "./empty-state": { + "import": "./dist/empty-state/index.mjs", + "require": "./dist/empty-state/index.js" + }, "./icons": { "import": "./dist/icons/index.mjs", "require": "./dist/icons/index.js" diff --git a/packages/propel/src/empty-state/assets/helper.tsx b/packages/propel/src/empty-state/assets/helper.tsx new file mode 100644 index 000000000..0ef1a1114 --- /dev/null +++ b/packages/propel/src/empty-state/assets/helper.tsx @@ -0,0 +1,15 @@ +export const ILLUSTRATION_COLOR_TOKEN_MAP = { + fill: { + primary: "rgba(var(--color-background-100))", // white or #fff, + secondary: "rgba(var(--color-background-90))", // #F4F5F5 + tertiary: "rgba(var(--color-background-80))", // #E5E7E8 + }, + stroke: { + primary: "rgba(var(--color-text-200))", // #1D1F20 + secondary: "rgba(var(--color-border-400))", // #7A8185 or #CFD2D3 + }, +}; + +export type TIllustrationAssetProps = { + className?: string; +}; diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx new file mode 100644 index 000000000..ebaa89b45 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx @@ -0,0 +1,100 @@ +import { + CustomerHorizontalStackIllustration, + EpicHorizontalStackIllustration, + EstimateHorizontalStackIllustration, + ExportHorizontalStackIllustration, + IntakeHorizontalStackIllustration, + LabelHorizontalStackIllustration, + LinkHorizontalStackIllustration, + MembersHorizontalStackIllustration, + NoteHorizontalStackIllustration, + PriorityHorizontalStackIllustration, + SettingsHorizontalStackIllustration, + StateHorizontalStackIllustration, + TemplateHorizontalStackIllustration, + TokenHorizontalStackIllustration, + UnknownHorizontalStackIllustration, + UpdateHorizontalStackIllustration, + WebhookHorizontalStackIllustration, + WorkItemHorizontalStackIllustration, + WorklogHorizontalStackIllustration, +} from "./"; + +export const HorizontalStackAssetsMap = [ + { + asset: , + title: "Customer", + }, + { + asset: , + title: "Epic", + }, + { + asset: , + title: "Estimate", + }, + { + asset: , + title: "Export", + }, + { + asset: , + title: "Intake", + }, + { + asset: , + title: "Label", + }, + { + asset: , + title: "Link", + }, + { + asset: , + title: "Members", + }, + { + asset: , + title: "Note", + }, + { + asset: , + title: "Priority", + }, + { + asset: , + title: "Settings", + }, + { + asset: , + title: "State", + }, + { + asset: , + title: "Template", + }, + { + asset: , + title: "Token", + }, + { + asset: , + title: "Unknown", + }, + { + asset: , + title: "Update", + }, + { + asset: , + title: "Webhook", + }, + { + asset: , + title: "WorkItem", + }, + { + asset: , + title: "Worklog", + }, +]; diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx new file mode 100644 index 000000000..a2d06a970 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx @@ -0,0 +1,64 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const CustomerHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx new file mode 100644 index 000000000..bd4a3dc3d --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx @@ -0,0 +1,62 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const EpicHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx new file mode 100644 index 000000000..997685360 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx @@ -0,0 +1,64 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const EstimateHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx new file mode 100644 index 000000000..e5e0181c8 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx @@ -0,0 +1,70 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const ExportHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/index.ts b/packages/propel/src/empty-state/assets/horizontal-stack/index.ts new file mode 100644 index 000000000..049eb5438 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/index.ts @@ -0,0 +1,19 @@ +export * from "./customer"; +export * from "./epic"; +export * from "./estimate"; +export * from "./export"; +export * from "./intake"; +export * from "./label"; +export * from "./link"; +export * from "./members"; +export * from "./note"; +export * from "./priority"; +export * from "./settings"; +export * from "./state"; +export * from "./template"; +export * from "./token"; +export * from "./unknown"; +export * from "./update"; +export * from "./webhook"; +export * from "./work-item"; +export * from "./worklog"; diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx new file mode 100644 index 000000000..dc556b713 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx @@ -0,0 +1,82 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const IntakeHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx new file mode 100644 index 000000000..8041aca6f --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx @@ -0,0 +1,68 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const LabelHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx new file mode 100644 index 000000000..bf1033c52 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx @@ -0,0 +1,76 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const LinkHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx new file mode 100644 index 000000000..88463176a --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx @@ -0,0 +1,82 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const MembersHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx new file mode 100644 index 000000000..a312439bd --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx @@ -0,0 +1,62 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const NoteHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx new file mode 100644 index 000000000..9d5507668 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx @@ -0,0 +1,74 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const PriorityHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx new file mode 100644 index 000000000..d9a68748c --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx @@ -0,0 +1,66 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const SettingsHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx new file mode 100644 index 000000000..ec4894db2 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx @@ -0,0 +1,62 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const StateHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx new file mode 100644 index 000000000..735a6037b --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx @@ -0,0 +1,76 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const TemplateHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx new file mode 100644 index 000000000..8ec4c149c --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx @@ -0,0 +1,70 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const TokenHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx new file mode 100644 index 000000000..107dd1ed1 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx @@ -0,0 +1,77 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const UnknownHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx new file mode 100644 index 000000000..c0551f354 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx @@ -0,0 +1,68 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const UpdateHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx new file mode 100644 index 000000000..1e938ed43 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx @@ -0,0 +1,62 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const WebhookHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx new file mode 100644 index 000000000..b1c80aab1 --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx @@ -0,0 +1,76 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const WorkItemHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx new file mode 100644 index 000000000..1e7920e5e --- /dev/null +++ b/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx @@ -0,0 +1,70 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const WorklogHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/index.ts b/packages/propel/src/empty-state/assets/index.ts new file mode 100644 index 000000000..3791a83f5 --- /dev/null +++ b/packages/propel/src/empty-state/assets/index.ts @@ -0,0 +1,3 @@ +export * from "./horizontal-stack"; +export * from "./vertical-stack"; +export * from "./helper"; diff --git a/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx b/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx new file mode 100644 index 000000000..ce8220e5f --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx @@ -0,0 +1,285 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const Error404VerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx b/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx new file mode 100644 index 000000000..32233dc52 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx @@ -0,0 +1,356 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const ArchivedCycleVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx b/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx new file mode 100644 index 000000000..571f8b924 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx @@ -0,0 +1,293 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const ArchivedModuleVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx b/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx new file mode 100644 index 000000000..222539ddf --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx @@ -0,0 +1,328 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const ArchivedWorkItemVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx b/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx new file mode 100644 index 000000000..2756a436a --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx @@ -0,0 +1,95 @@ +import { + ArchivedCycleVerticalStackIllustration, + ArchivedModuleVerticalStackIllustration, + ArchivedWorkItemVerticalStackIllustration, + CustomerVerticalStackIllustration, + CycleVerticalStackIllustration, + DashboardVerticalStackIllustration, + DraftVerticalStackIllustration, + EpicVerticalStackIllustration, + Error404VerticalStackIllustration, + InvalidLinkVerticalStackIllustration, + ModuleVerticalStackIllustration, + NoAccessVerticalStackIllustration, + PageVerticalStackIllustration, + ProjectVerticalStackIllustration, + ServerErrorVerticalStackIllustration, + TeamspaceVerticalStackIllustration, + ViewVerticalStackIllustration, + WorkItemVerticalStackIllustration, +} from "."; + +export const VerticalStackAssetsMap = [ + { + asset: , + title: "ArchivedCycleVerticalStackIllustration", + }, + { + asset: , + title: "ArchivedModuleVerticalStackIllustration", + }, + { + asset: , + title: "ArchivedWorkItemVerticalStackIllustration", + }, + { + asset: , + title: "CustomerVerticalStackIllustration", + }, + { + asset: , + title: "CycleVerticalStackIllustration", + }, + { + asset: , + title: "DashboardVerticalStackIllustration", + }, + { + asset: , + title: "DraftVerticalStackIllustration", + }, + { + asset: , + title: "EpicVerticalStackIllustration", + }, + { + asset: , + title: "Error404VerticalStackIllustration", + }, + { + asset: , + title: "InvalidLinkVerticalStackIllustration", + }, + { + asset: , + title: "ModuleVerticalStackIllustration", + }, + { + asset: , + title: "NoAccessVerticalStackIllustration", + }, + { + asset: , + title: "PageVerticalStackIllustration", + }, + { + asset: , + title: "ProjectVerticalStackIllustration", + }, + { + asset: , + title: "ServerErrorVerticalStackIllustration", + }, + { + asset: , + title: "TeamspaceVerticalStackIllustration", + }, + { + asset: , + title: "ViewVerticalStackIllustration", + }, + { + asset: , + title: "WorkItemVerticalStackIllustration", + }, +]; diff --git a/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx b/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx new file mode 100644 index 000000000..284ac7ad1 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx @@ -0,0 +1,373 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const CustomerVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx b/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx new file mode 100644 index 000000000..15ed428dd --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx @@ -0,0 +1,242 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const CycleVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx b/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx new file mode 100644 index 000000000..fc439e98c --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx @@ -0,0 +1,317 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const DashboardVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx b/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx new file mode 100644 index 000000000..c8880377a --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx @@ -0,0 +1,265 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const DraftVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx b/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx new file mode 100644 index 000000000..213eb4052 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx @@ -0,0 +1,223 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const EpicVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/index.ts b/packages/propel/src/empty-state/assets/vertical-stack/index.ts new file mode 100644 index 000000000..70fc2f296 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/index.ts @@ -0,0 +1,19 @@ +export * from "./404-error"; +export * from "./archived-cycle"; +export * from "./archived-module"; +export * from "./archived-work-item"; +export * from "./customer"; +export * from "./cycle"; +export * from "./dashboard"; +export * from "./draft"; +export * from "./epic"; +export * from "./initiative"; +export * from "./invalid-link"; +export * from "./module"; +export * from "./no-access"; +export * from "./page"; +export * from "./project"; +export * from "./server-error"; +export * from "./teamspace"; +export * from "./view"; +export * from "./work-item"; diff --git a/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx b/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx new file mode 100644 index 000000000..547cd9540 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx @@ -0,0 +1,247 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const InitiativeVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx b/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx new file mode 100644 index 000000000..e567857f7 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx @@ -0,0 +1,177 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const InvalidLinkVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/module.tsx b/packages/propel/src/empty-state/assets/vertical-stack/module.tsx new file mode 100644 index 000000000..12ee94f41 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/module.tsx @@ -0,0 +1,373 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const ModuleVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx b/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx new file mode 100644 index 000000000..ab2d1f3ec --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx @@ -0,0 +1,163 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const NoAccessVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/page.tsx b/packages/propel/src/empty-state/assets/vertical-stack/page.tsx new file mode 100644 index 000000000..3168b6723 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/page.tsx @@ -0,0 +1,256 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const PageVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/project.tsx b/packages/propel/src/empty-state/assets/vertical-stack/project.tsx new file mode 100644 index 000000000..1d04eb2e5 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/project.tsx @@ -0,0 +1,247 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const ProjectVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx b/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx new file mode 100644 index 000000000..e394372e0 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx @@ -0,0 +1,329 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const ServerErrorVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx b/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx new file mode 100644 index 000000000..f3dfef141 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx @@ -0,0 +1,351 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const TeamspaceVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/view.tsx b/packages/propel/src/empty-state/assets/vertical-stack/view.tsx new file mode 100644 index 000000000..2b863659f --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/view.tsx @@ -0,0 +1,317 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const ViewVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx b/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx new file mode 100644 index 000000000..a2152ae53 --- /dev/null +++ b/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx @@ -0,0 +1,245 @@ +import { type TIllustrationAssetProps, ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper"; + +export const WorkItemVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/propel/src/empty-state/empty-state.stories.tsx b/packages/propel/src/empty-state/empty-state.stories.tsx new file mode 100644 index 000000000..095bbb711 --- /dev/null +++ b/packages/propel/src/empty-state/empty-state.stories.tsx @@ -0,0 +1,100 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { WorkItemHorizontalStackIllustration } from "./assets/horizontal-stack"; +import { HorizontalStackAssetsMap } from "./assets/horizontal-stack/constant"; +import { WorkItemVerticalStackIllustration } from "./assets/vertical-stack"; +import { VerticalStackAssetsMap } from "./assets/vertical-stack/constant"; +import { EmptyState, type EmptyStateProps } from "./empty-state"; + +const meta: Meta = { + title: "Components/EmptyState", + component: EmptyState, + parameters: { + layout: "centered", + docs: { + description: { + component: + "A flexible empty state component that can display an asset, title, description, and action buttons.", + }, + }, + }, + argTypes: { + title: { + control: "text", + description: "The main title text for the empty state", + }, + description: { + control: "text", + description: "Optional description text that appears below the title", + }, + className: { + control: "text", + description: "Additional CSS classes to apply to the root element", + }, + type: { + control: "select", + options: ["detailed", "simple"], + description: "The layout type of the empty state", + }, + asset: { + control: false, + description: "React node to display as the visual asset (icon, illustration, etc.)", + }, + actions: { + control: false, + description: "Array of action buttons to display", + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + asset: , + title: "Create an epic and split work into smaller goals", + description: "For larger bodies of work that span several cycles and can live across modules, create an epic.", + actions: [ + { + label: "Create an Epic", + onClick: () => console.log("primary-action-clicked"), + variant: "primary", + }, + ], + }, +}; + +export const Simple: Story = { + args: { + asset: , + title: "There're no progress metrics to show yet.", + description: "For larger bodies of work that span several cycles and can live across modules, create an epic.", + type: "simple", + }, +}; + +export const HorizontalStackAssets: Story = { + render: () => ( +
+ {HorizontalStackAssetsMap.map((item) => ( +
+ {item.asset} +

{item.title}

+
+ ))} +
+ ), +}; + +export const VerticalStackAssets: Story = { + render: () => ( +
+ {VerticalStackAssetsMap.map((item) => ( +
+ {item.asset} +

{item.title}

+
+ ))} +
+ ), +}; diff --git a/packages/propel/src/empty-state/empty-state.tsx b/packages/propel/src/empty-state/empty-state.tsx new file mode 100644 index 000000000..d1dc8823b --- /dev/null +++ b/packages/propel/src/empty-state/empty-state.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import { Button } from "../button/button"; +import { TButtonVariant } from "../button/helper"; + +export interface ActionButton { + label: string; + onClick: () => void; + variant?: TButtonVariant; + disabled?: boolean; +} + +type TEmptyStateType = "detailed" | "simple"; + +export interface EmptyStateProps { + asset?: React.ReactNode; + title: string; + description?: string; + actions?: ActionButton[]; + className?: string; + type?: TEmptyStateType; +} + +const EmptyStateContent: React.FC<{ + title: string; + description?: string; + actions?: ActionButton[]; +}> = ({ title, description, actions }) => ( +
+
+

{title}

+ {description &&

{description}

} +
+ + {actions && actions.length > 0 && ( +
+ {actions.map((action, index) => ( + + ))} +
+ )} +
+); + +export const EmptyState: React.FC = ({ + asset, + title, + description, + actions, + className = "", + type = "detailed", +}) => { + const alignmentClass = type === "simple" ? "items-center text-center" : "text-left"; + + return ( +
+ {asset &&
{asset}
} + +
+ ); +}; diff --git a/packages/propel/src/empty-state/index.ts b/packages/propel/src/empty-state/index.ts new file mode 100644 index 000000000..ce215b7c3 --- /dev/null +++ b/packages/propel/src/empty-state/index.ts @@ -0,0 +1 @@ +export * from "./empty-state"; diff --git a/packages/propel/src/icons/brand/zerodha-logo.tsx b/packages/propel/src/icons/brand/zerodha-logo.tsx index 21ae65bac..8857151f9 100644 --- a/packages/propel/src/icons/brand/zerodha-logo.tsx +++ b/packages/propel/src/icons/brand/zerodha-logo.tsx @@ -17,8 +17,8 @@ export const ZerodhaLogo: React.FC = ({ className={className} > diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts index 162bea546..677fea529 100644 --- a/packages/propel/tsdown.config.ts +++ b/packages/propel/tsdown.config.ts @@ -14,6 +14,7 @@ export default defineConfig({ "src/command/index.ts", "src/context-menu/index.ts", "src/dialog/index.ts", + "src/empty-state/index.ts", "src/emoji-icon-picker/index.ts", "src/emoji-reaction/index.ts", "src/emoji-reaction-picker/index.ts",