@agentiffai/design 1.5.5 → 1.5.6

package/dist/workflow/index.d.cts

@@ -211,4 +211,124 @@ interface WorkflowDiscoveryCardProps {
 }
 declare const WorkflowDiscoveryCard: React__default.FC<WorkflowDiscoveryCardProps>;
 
-export { type CustomIndicator, type PaidIntegrationInfo, type PopularityInfo, type ProvenanceSource, type SetupRequirement, type SetupRequirementType, type SupportPlacement, type VotesInfo, type VotesPlacement, WorkflowDiscoveryCard, type WorkflowDiscoveryCardProps, type WorkflowDiscoveryIntegration, type WorkflowReadiness };
+/**
+ * WorkflowDiscoveryPage — the page-level layout that hosts WorkflowDiscoveryCard instances.
+ *
+ * Linear: APP-263 — Design subtask: Workflow list search, filters, tags, and voting
+ * (note: this PR is the list-integration step that Nick asked for; search/filters/voting
+ *  themselves are a later piece of APP-263 — we just reserve the slot here)
+ *
+ * What this file ships:
+ *   1. `WorkflowDiscoveryPage`            — the page chrome (header, tabs, filter slot, footer slot)
+ *   2. `WorkflowDiscoverySection`         — a labelled section that lays out cards in a 1/2/3-col grid
+ *   3. `WorkflowDiscoveryEmptyState`      — empty state body
+ *   4. `WorkflowDiscoveryErrorState`      — error state body
+ *   5. `WorkflowDiscoveryLoadingState`    — skeleton state body (matches the new card shape)
+ *   6. `WorkflowDiscoveryUpgradeBanner`   — the "these need a higher plan" banner for Unavailable tab
+ *
+ * Layout decisions (settled in Step 2 planning):
+ *   - Tabs: Available / Unavailable (kept from current app for now; can become filter chips later)
+ *   - Sections by category (Trending → Social Media → Ops → CRM)
+ *   - Filter slot reserved above the list for the eventual APP-263 search/filter UI
+ *   - Responsive grid: 1-col mobile, 2-col tablet, 3-col desktop
+ *   - Expanded card spans the full row of the section's grid (handled in WorkflowDiscoveryCard via GridCell)
+ *
+ * The Page itself is "headless" in the sense that the BODY is a children slot — each story
+ * decides whether to render sections, an empty state, an error, or a loading skeleton. That
+ * makes the chrome reusable across all 5 states without prop-bloat.
+ */
+
+interface WorkflowDiscoveryPageTab {
+    /** Unique tab id, used as the controlled value */
+    id: string;
+    /** Visible label, e.g. "Available" */
+    label: string;
+    /** Optional count shown in parentheses */
+    count?: number;
+}
+interface WorkflowDiscoveryPageProps {
+    /** Page heading text (defaults to "Workflows") */
+    title?: string;
+    /**
+     * Optional subtitle / supporting copy under the title. Keep it short — the
+     * cards do the heavy lifting.
+     */
+    subtitle?: string;
+    /** Tabs to render in the segmented control. Pass 0–N tabs. */
+    tabs?: WorkflowDiscoveryPageTab[];
+    /** Currently selected tab id (controlled) */
+    activeTabId?: string;
+    /** Called when the user switches tabs */
+    onTabChange?: (id: string) => void;
+    /**
+     * Slot reserved for the eventual APP-263 filters / search bar. Pass any
+     * ReactNode and it renders between the header and the body. Pass nothing
+     * and the slot is collapsed — no empty space.
+     */
+    filterSlot?: React__default.ReactNode;
+    /**
+     * Slot rendered at the bottom of the page, AFTER the body. Used for the
+     * "Upgrade your plan" banner on the Unavailable tab.
+     */
+    footerSlot?: React__default.ReactNode;
+    /** Body content — sections, empty state, error state, etc. */
+    children?: React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+}
+interface WorkflowDiscoverySectionProps {
+    /** Section label (e.g. "Trending", "Social Media"). Pass undefined for an unlabelled section. */
+    label?: string;
+    /** Optional count shown next to the label */
+    count?: number;
+    /**
+     * Workflows to render inside this section. Each is rendered as a
+     * WorkflowDiscoveryCard inside a responsive grid cell. The expanded card
+     * (if any) spans the full grid row.
+     */
+    workflows: WorkflowDiscoveryCardProps[];
+    /** Which card id is currently expanded (controlled) */
+    expandedId?: string | null;
+    /** Called when a card toggles expansion */
+    onToggle?: (id: string, next: boolean) => void;
+}
+interface WorkflowDiscoveryEmptyStateProps {
+    /** Headline message */
+    title?: string;
+    /** Supporting text */
+    message?: string;
+    /** Optional CTA label */
+    ctaLabel?: string;
+    /** Optional CTA handler */
+    onCta?: () => void;
+}
+interface WorkflowDiscoveryErrorStateProps {
+    /** Headline */
+    title?: string;
+    /** Error message */
+    message?: string;
+    /** Retry handler */
+    onRetry?: () => void;
+}
+interface WorkflowDiscoveryLoadingStateProps {
+    /** How many skeleton cards to render (defaults to a sensible count) */
+    count?: number;
+}
+interface WorkflowDiscoveryUpgradeBannerProps {
+    /** Top line, e.g. "These workflows require a higher plan" */
+    title?: string;
+    /** Optional supporting copy */
+    message?: string;
+    /** CTA label */
+    ctaLabel?: string;
+    /** CTA handler */
+    onLearnMore?: () => void;
+}
+declare const WorkflowDiscoveryPage: React__default.FC<WorkflowDiscoveryPageProps>;
+declare const WorkflowDiscoverySection: React__default.FC<WorkflowDiscoverySectionProps>;
+declare const WorkflowDiscoveryEmptyState: React__default.FC<WorkflowDiscoveryEmptyStateProps>;
+declare const WorkflowDiscoveryErrorState: React__default.FC<WorkflowDiscoveryErrorStateProps>;
+declare const WorkflowDiscoveryLoadingState: React__default.FC<WorkflowDiscoveryLoadingStateProps>;
+declare const WorkflowDiscoveryUpgradeBanner: React__default.FC<WorkflowDiscoveryUpgradeBannerProps>;
+
+export { type CustomIndicator, type PaidIntegrationInfo, type PopularityInfo, type ProvenanceSource, type SetupRequirement, type SetupRequirementType, type SupportPlacement, type VotesInfo, type VotesPlacement, WorkflowDiscoveryCard, type WorkflowDiscoveryCardProps, WorkflowDiscoveryEmptyState, type WorkflowDiscoveryEmptyStateProps, WorkflowDiscoveryErrorState, type WorkflowDiscoveryErrorStateProps, type WorkflowDiscoveryIntegration, WorkflowDiscoveryLoadingState, type WorkflowDiscoveryLoadingStateProps, WorkflowDiscoveryPage, type WorkflowDiscoveryPageProps, type WorkflowDiscoveryPageTab, WorkflowDiscoverySection, type WorkflowDiscoverySectionProps, WorkflowDiscoveryUpgradeBanner, type WorkflowDiscoveryUpgradeBannerProps, type WorkflowReadiness };

package/dist/workflow/index.d.ts

@@ -211,4 +211,124 @@ interface WorkflowDiscoveryCardProps {
 }
 declare const WorkflowDiscoveryCard: React__default.FC<WorkflowDiscoveryCardProps>;
 
-export { type CustomIndicator, type PaidIntegrationInfo, type PopularityInfo, type ProvenanceSource, type SetupRequirement, type SetupRequirementType, type SupportPlacement, type VotesInfo, type VotesPlacement, WorkflowDiscoveryCard, type WorkflowDiscoveryCardProps, type WorkflowDiscoveryIntegration, type WorkflowReadiness };
+/**
+ * WorkflowDiscoveryPage — the page-level layout that hosts WorkflowDiscoveryCard instances.
+ *
+ * Linear: APP-263 — Design subtask: Workflow list search, filters, tags, and voting
+ * (note: this PR is the list-integration step that Nick asked for; search/filters/voting
+ *  themselves are a later piece of APP-263 — we just reserve the slot here)
+ *
+ * What this file ships:
+ *   1. `WorkflowDiscoveryPage`            — the page chrome (header, tabs, filter slot, footer slot)
+ *   2. `WorkflowDiscoverySection`         — a labelled section that lays out cards in a 1/2/3-col grid
+ *   3. `WorkflowDiscoveryEmptyState`      — empty state body
+ *   4. `WorkflowDiscoveryErrorState`      — error state body
+ *   5. `WorkflowDiscoveryLoadingState`    — skeleton state body (matches the new card shape)
+ *   6. `WorkflowDiscoveryUpgradeBanner`   — the "these need a higher plan" banner for Unavailable tab
+ *
+ * Layout decisions (settled in Step 2 planning):
+ *   - Tabs: Available / Unavailable (kept from current app for now; can become filter chips later)
+ *   - Sections by category (Trending → Social Media → Ops → CRM)
+ *   - Filter slot reserved above the list for the eventual APP-263 search/filter UI
+ *   - Responsive grid: 1-col mobile, 2-col tablet, 3-col desktop
+ *   - Expanded card spans the full row of the section's grid (handled in WorkflowDiscoveryCard via GridCell)
+ *
+ * The Page itself is "headless" in the sense that the BODY is a children slot — each story
+ * decides whether to render sections, an empty state, an error, or a loading skeleton. That
+ * makes the chrome reusable across all 5 states without prop-bloat.
+ */
+
+interface WorkflowDiscoveryPageTab {
+    /** Unique tab id, used as the controlled value */
+    id: string;
+    /** Visible label, e.g. "Available" */
+    label: string;
+    /** Optional count shown in parentheses */
+    count?: number;
+}
+interface WorkflowDiscoveryPageProps {
+    /** Page heading text (defaults to "Workflows") */
+    title?: string;
+    /**
+     * Optional subtitle / supporting copy under the title. Keep it short — the
+     * cards do the heavy lifting.
+     */
+    subtitle?: string;
+    /** Tabs to render in the segmented control. Pass 0–N tabs. */
+    tabs?: WorkflowDiscoveryPageTab[];
+    /** Currently selected tab id (controlled) */
+    activeTabId?: string;
+    /** Called when the user switches tabs */
+    onTabChange?: (id: string) => void;
+    /**
+     * Slot reserved for the eventual APP-263 filters / search bar. Pass any
+     * ReactNode and it renders between the header and the body. Pass nothing
+     * and the slot is collapsed — no empty space.
+     */
+    filterSlot?: React__default.ReactNode;
+    /**
+     * Slot rendered at the bottom of the page, AFTER the body. Used for the
+     * "Upgrade your plan" banner on the Unavailable tab.
+     */
+    footerSlot?: React__default.ReactNode;
+    /** Body content — sections, empty state, error state, etc. */
+    children?: React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+}
+interface WorkflowDiscoverySectionProps {
+    /** Section label (e.g. "Trending", "Social Media"). Pass undefined for an unlabelled section. */
+    label?: string;
+    /** Optional count shown next to the label */
+    count?: number;
+    /**
+     * Workflows to render inside this section. Each is rendered as a
+     * WorkflowDiscoveryCard inside a responsive grid cell. The expanded card
+     * (if any) spans the full grid row.
+     */
+    workflows: WorkflowDiscoveryCardProps[];
+    /** Which card id is currently expanded (controlled) */
+    expandedId?: string | null;
+    /** Called when a card toggles expansion */
+    onToggle?: (id: string, next: boolean) => void;
+}
+interface WorkflowDiscoveryEmptyStateProps {
+    /** Headline message */
+    title?: string;
+    /** Supporting text */
+    message?: string;
+    /** Optional CTA label */
+    ctaLabel?: string;
+    /** Optional CTA handler */
+    onCta?: () => void;
+}
+interface WorkflowDiscoveryErrorStateProps {
+    /** Headline */
+    title?: string;
+    /** Error message */
+    message?: string;
+    /** Retry handler */
+    onRetry?: () => void;
+}
+interface WorkflowDiscoveryLoadingStateProps {
+    /** How many skeleton cards to render (defaults to a sensible count) */
+    count?: number;
+}
+interface WorkflowDiscoveryUpgradeBannerProps {
+    /** Top line, e.g. "These workflows require a higher plan" */
+    title?: string;
+    /** Optional supporting copy */
+    message?: string;
+    /** CTA label */
+    ctaLabel?: string;
+    /** CTA handler */
+    onLearnMore?: () => void;
+}
+declare const WorkflowDiscoveryPage: React__default.FC<WorkflowDiscoveryPageProps>;
+declare const WorkflowDiscoverySection: React__default.FC<WorkflowDiscoverySectionProps>;
+declare const WorkflowDiscoveryEmptyState: React__default.FC<WorkflowDiscoveryEmptyStateProps>;
+declare const WorkflowDiscoveryErrorState: React__default.FC<WorkflowDiscoveryErrorStateProps>;
+declare const WorkflowDiscoveryLoadingState: React__default.FC<WorkflowDiscoveryLoadingStateProps>;
+declare const WorkflowDiscoveryUpgradeBanner: React__default.FC<WorkflowDiscoveryUpgradeBannerProps>;
+
+export { type CustomIndicator, type PaidIntegrationInfo, type PopularityInfo, type ProvenanceSource, type SetupRequirement, type SetupRequirementType, type SupportPlacement, type VotesInfo, type VotesPlacement, WorkflowDiscoveryCard, type WorkflowDiscoveryCardProps, WorkflowDiscoveryEmptyState, type WorkflowDiscoveryEmptyStateProps, WorkflowDiscoveryErrorState, type WorkflowDiscoveryErrorStateProps, type WorkflowDiscoveryIntegration, WorkflowDiscoveryLoadingState, type WorkflowDiscoveryLoadingStateProps, WorkflowDiscoveryPage, type WorkflowDiscoveryPageProps, type WorkflowDiscoveryPageTab, WorkflowDiscoverySection, type WorkflowDiscoverySectionProps, WorkflowDiscoveryUpgradeBanner, type WorkflowDiscoveryUpgradeBannerProps, type WorkflowReadiness };