@dynamic-mockups/design-system 0.2.10 → 0.2.12

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/dist/src/components/templates/OnboardingTemplate/OnboardingFlow.config.d.ts

@@ -24,8 +24,8 @@ import type { OnboardingFlowConfig } from "./OnboardingFlow.types";
  *
  * BUILDING PRODUCT/WORKFLOW PATH (building-product):
  *   1. Journey stage → 2. Business type → Branch:
- *      - If "Startup": 3. Role & Team size (combined) → 4. Startup Builder result (4 steps)
- *      - If "Established Company": 3. Role & Team size (combined) → 4. Enterprise Partner result (4 steps)
+ *      - If "Startup": 3. Role & Team size (combined) → 4. Website → 5. Startup Builder result (5 steps)
+ *      - If "Established Company": 3. Role & Team size (combined) → 4. Website → 5. Enterprise Partner result (5 steps)
  *      - If "Agency/Automation/Solopreneur": 3. Integration type → Branch:
  *          * "Simple": Embed Builder result (4 steps)
  *          * "Automations": Workflow Automator result (4 steps)

package/dist/src/components/templates/OnboardingTemplate/OnboardingFlow.types.d.ts

@@ -8,7 +8,7 @@ import type { OnboardingInfoItem } from "../../organisms/OnboardingInfoBox/Onboa
 /**
  * Type of onboarding step variation
  */
-export type OnboardingStepType = "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "double-radio" | "launcher" | "artwork" | "split-screen";
+export type OnboardingStepType = "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "double-radio" | "text-input" | "launcher" | "artwork" | "split-screen";
 /**
  * Base step configuration shared across all step types
  */
@@ -117,6 +117,20 @@ export interface OnboardingDoubleRadioStep extends OnboardingStepBase {
      */
     secondDataKey: string;
 }
+/**
+ * Text input step configuration
+ */
+export interface OnboardingTextInputStep extends OnboardingStepBase {
+    type: "text-input";
+    /**
+     * Placeholder text for the input field
+     */
+    placeholder?: string;
+    /**
+     * Key in the data object where the text value is stored
+     */
+    dataKey: string;
+}
 /**
  * Launcher step configuration (informational with CTA)
  */
@@ -152,7 +166,7 @@ export interface OnboardingArtworkStep extends OnboardingStepBase {
 /**
  * Union type of all possible step configurations
  */
-export type OnboardingStep = OnboardingRadioStep | OnboardingCheckboxStep | OnboardingButtonsPlusRadioStep | OnboardingKnowYourCustomerStep | OnboardingDoubleRadioStep | OnboardingLauncherStep | OnboardingArtworkStep;
+export type OnboardingStep = OnboardingRadioStep | OnboardingCheckboxStep | OnboardingButtonsPlusRadioStep | OnboardingKnowYourCustomerStep | OnboardingDoubleRadioStep | OnboardingTextInputStep | OnboardingLauncherStep | OnboardingArtworkStep;
 /**
  * Complete onboarding flow configuration
  */

package/dist/src/components/templates/OnboardingTemplate/OnboardingTemplate.d.ts

@@ -16,7 +16,7 @@ export interface OnboardingTemplateProps {
     /**
      * Template variation type
      */
-    variation: "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "double-radio" | "launcher" | "artwork" | "split-screen";
+    variation: "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "double-radio" | "text-input" | "launcher" | "artwork" | "split-screen";
     /**
      * Current step (1-based)
      */
@@ -129,6 +129,18 @@ export interface OnboardingTemplateProps {
      * Second radio option change handler
      */
     onSecondRadioChange?: (value: string) => void;
+    /**
+     * Text input value
+     */
+    textInputValue?: string;
+    /**
+     * Text input change handler
+     */
+    onTextInputChange?: (value: string) => void;
+    /**
+     * Text input placeholder
+     */
+    textInputPlaceholder?: string;
     /**
      * Icon name for launcher variation (Solar icon)
      */

package/package.json

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