@dynamic-mockups/design-system 0.2.11 → 0.2.13

package/dist/src/components/organisms/FlagBadMockups/FlagBadMockups.d.ts

@@ -1,16 +1,100 @@
 /**
  * FlagBadMockups Organism
- * A multi-step modal flow for flagging bad mockups
- * Flow: Flag Modal → Form Modal (if "Something else") → Info Modal
+ * A configurable multi-step modal flow for collecting user feedback
+ * Flow: Selection Modal → Form Modal (conditional) → Confirmation Modal
  */
 import React from "react";
 import "./FlagBadMockups.scss";
 export type { ColorToken } from "../../../tokens";
+type ModalStep = "selection" | "form" | "confirmation";
+/**
+ * Radio option configuration
+ */
+export interface FlagOption {
+    /** Unique value identifier */
+    value: string;
+    /** Display label for the option */
+    label: string;
+}
+/**
+ * Selection step configuration (Step 1)
+ */
+export interface SelectionStepConfig {
+    /** Modal title */
+    title: string;
+    /** Modal description */
+    description: string;
+    /** Radio options to display */
+    options: FlagOption[];
+    /** Continue button text */
+    continueButtonText?: string;
+}
+/**
+ * Form step configuration (Step 2 - conditional)
+ */
+export interface FormStepConfig {
+    /** Modal title */
+    title: string;
+    /** Modal description */
+    description: string;
+    /** Textarea placeholder text */
+    placeholder?: string;
+    /** Back button text */
+    backButtonText?: string;
+    /** Submit button text */
+    submitButtonText?: string;
+}
+/**
+ * Confirmation step configuration (Step 3)
+ */
+export interface ConfirmationStepConfig {
+    /** Modal title */
+    title: string;
+    /** Modal description */
+    description: string;
+    /** Optional link text */
+    linkText?: string;
+    /** Optional link URL */
+    linkUrl?: string;
+    /** Optional link click handler (if no URL provided) */
+    onLinkClick?: () => void;
+    /** Close button text */
+    closeButtonText?: string;
+}
+/**
+ * Complete flow configuration
+ */
+export interface FlagBadMockupsConfig {
+    /** Configuration for the selection step */
+    selectionStep: SelectionStepConfig;
+    /** Configuration for the form step */
+    formStep: FormStepConfig;
+    /** Configuration for the confirmation step */
+    confirmationStep: ConfirmationStepConfig;
+    /**
+     * Value(s) that trigger the form step when selected
+     * Can be a single value or array of values
+     */
+    formTriggerValues: string | string[];
+}
 export interface FlagBadMockupsProps {
+    /**
+     * Flow configuration object
+     * If not provided, uses default flag mockup configuration
+     */
+    config?: FlagBadMockupsConfig;
     /**
      * Trigger button element (optional, defaults to "Flag this mockup" button)
      */
     trigger?: React.ReactNode;
+    /**
+     * Controlled open state
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
     /**
      * Callback when the flow is closed
      */
@@ -19,6 +103,13 @@ export interface FlagBadMockupsProps {
      * Callback when feedback is submitted with selected reason and optional feedback text
      */
     onSubmit?: (reason: string, feedback?: string) => void;
+    /**
+     * Callback when step changes
+     */
+    onStepChange?: (step: ModalStep, data: {
+        reason: string;
+        feedback?: string;
+    }) => void;
     /**
      * Custom className
      */

package/dist/src/components/organisms/FlagBadMockups/FlagBadMockups.stories.d.ts

@@ -8,6 +8,13 @@ declare const meta: {
     };
     tags: string[];
     argTypes: {
+        config: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
         trigger: {
             control: false;
             description: string;
@@ -15,6 +22,20 @@ declare const meta: {
                 category: string;
             };
         };
+        open: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onOpenChange: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
         onClose: {
             control: false;
             description: string;
@@ -29,6 +50,13 @@ declare const meta: {
                 category: string;
             };
         };
+        onStepChange: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
         className: {
             control: "text";
             description: string;
@@ -41,6 +69,10 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const CustomConfig: Story;
+export declare const ProductFeedback: Story;
 export declare const CustomTrigger: Story;
 export declare const InteractiveDemo: Story;
+export declare const ControlledState: Story;
 export declare const FlowExample: Story;
+export declare const MinimalOverride: Story;

package/dist/src/components/organisms/index.d.ts

@@ -7,4 +7,4 @@ export type { OnboardingInfoBoxProps, OnboardingInfoItem, } from "./OnboardingIn
 export { CTABox } from "./CTABox/CTABox";
 export type { CTABoxProps } from "./CTABox/CTABox";
 export { FlagBadMockups } from "./FlagBadMockups/FlagBadMockups";
-export type { FlagBadMockupsProps } from "./FlagBadMockups/FlagBadMockups";
+export type { FlagBadMockupsProps, FlagBadMockupsConfig, FlagOption, SelectionStepConfig, FormStepConfig, ConfirmationStepConfig, } from "./FlagBadMockups/FlagBadMockups";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-mockups/design-system",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "A professional, scalable design system built with React 18, TypeScript, Radix UI, and Storybook",
   "main": "dist/index.js",
   "module": "dist/index.mjs",