diff --git a/.gitignore b/.gitignore index 4baa3495a98..7ebfe7e99f8 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 f0d991852b4..3503f4df034 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 00000000000..0ef1a11148f --- /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 00000000000..ebaa89b450c --- /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 00000000000..a2d06a97050 --- /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 00000000000..bd4a3dc3d4c --- /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 00000000000..99768536012 --- /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 00000000000..e5e0181c810 --- /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 00000000000..049eb54385f --- /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 00000000000..dc556b71303 --- /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 00000000000..8041aca6f8d --- /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 00000000000..bf1033c52a2 --- /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 00000000000..88463176ad2 --- /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 00000000000..a312439bd19 --- /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 00000000000..9d55076685b --- /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 00000000000..d9a68748c0f --- /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 00000000000..ec4894db2a7 --- /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 00000000000..735a6037bdc --- /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 00000000000..8ec4c149ca7 --- /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 00000000000..107dd1ed172 --- /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 00000000000..c0551f354b1 --- /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 00000000000..1e938ed4303 --- /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 00000000000..b1c80aab193 --- /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 00000000000..1e7920e5eca --- /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 00000000000..3791a83f5f0 --- /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 00000000000..ce8220e5f72 --- /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 00000000000..32233dc52e2 --- /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 00000000000..571f8b9241a --- /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 00000000000..222539ddf32 --- /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 00000000000..2756a436a3f --- /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 00000000000..284ac7ad1eb --- /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 00000000000..15ed428dde1 --- /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 00000000000..fc439e98c54 --- /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 00000000000..c8880377a84 --- /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 00000000000..213eb4052b9 --- /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 00000000000..70fc2f29661 --- /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 00000000000..547cd954025 --- /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 00000000000..e567857f7cb --- /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 00000000000..12ee94f410c --- /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 00000000000..ab2d1f3ec80 --- /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 00000000000..3168b6723d8 --- /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 00000000000..1d04eb2e5bf --- /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 00000000000..e394372e0f8 --- /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 00000000000..f3dfef1410f --- /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 00000000000..2b863659fad --- /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 00000000000..a2152ae53b1 --- /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 00000000000..095bbb71152 --- /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 00000000000..d1dc8823be1 --- /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 00000000000..ce215b7c3b0 --- /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 21ae65bac29..8857151f90f 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 4a2ff851120..bf305e41de2 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", diff --git a/packages/ui/src/popovers/popover-menu.stories.tsx b/packages/ui/src/popovers/popover-menu.stories.tsx index b868c9d01e9..4e8a56cda6b 100644 --- a/packages/ui/src/popovers/popover-menu.stories.tsx +++ b/packages/ui/src/popovers/popover-menu.stories.tsx @@ -1,5 +1,5 @@ -import React from "react"; import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; import { PopoverMenu } from "./popover-menu"; type TPopoverMenu = {