@dynamic-mockups/design-system 0.1.2 → 0.2.3

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

@@ -0,0 +1,31 @@
+/**
+ * OnboardingArtwork Component
+ * Full-screen artwork display with gradient background and grid pattern
+ */
+import React from "react";
+import "./OnboardingArtwork.scss";
+export interface OnboardingArtworkProps {
+    /**
+     * Background gradient start color
+     * @default "#0292ff"
+     */
+    gradientStart?: string;
+    /**
+     * Background gradient end color
+     * @default "#cae8ff"
+     */
+    gradientEnd?: string;
+    /**
+     * Grid pattern image source
+     */
+    gridImageSrc?: string;
+    /**
+     * Main artwork image source
+     */
+    artworkImageSrc?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const OnboardingArtwork: React.ForwardRefExoticComponent<OnboardingArtworkProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,16 @@
+/**
+ * OnboardingArtwork Stories
+ */
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./OnboardingArtwork").OnboardingArtworkProps & import("react").RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CustomColors: Story;

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

@@ -0,0 +1,2 @@
+export { OnboardingArtwork } from "./OnboardingArtwork";
+export type { OnboardingArtworkProps } from "./OnboardingArtwork";

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

@@ -0,0 +1,34 @@
+/**
+ * OnboardingFlow Configuration
+ * Complete data structure with REAL data extracted from Figma
+ */
+import type { OnboardingFlowConfig } from "./OnboardingFlow.types";
+/**
+ * Complete onboarding flow configuration with real Figma data
+ * Implements dynamic conditional flows based on user's journey stage and subsequent selections:
+ *
+ * EXPLORER PATH (exploring):
+ *   1. Journey stage → 2. Explorer result (2 steps total)
+ *
+ * GETTING STARTED PATH (getting-started):
+ *   1. Journey stage → 2. Currently selling? → Branch:
+ *      - If "Yes": 3. Best sellers → 4. Personalization → 5. Active Seller result (5 steps)
+ *      - If "No": 3. Products to sell → 4. Launcher result (4 steps)
+ *
+ * ESTABLISHED STORE PATH (established):
+ *   1. Journey stage → 2. Where you sell → 3. Advertising (Yes/No + conditional) → Branch:
+ *      - If "Yes" + "Optimizing": Conversion Pro result (4 steps)
+ *      - If "Yes" + "Scaling": Growth Accelerator result (4 steps)
+ *      - If "Yes" + "Expanding": Empire Builder result (4 steps)
+ *      - If "No": Organic Grower result (4 steps)
+ *
+ * API & INFRASTRUCTURE PATH (api):
+ *   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 "Agency/Automation/Solopreneur": 3. Integration type → Branch:
+ *          * "Simple": Embed Builder result (4 steps)
+ *          * "Automations": Workflow Automator result (4 steps)
+ *          * "Custom": API Developer result (4 steps)
+ */
+export declare const fullOnboardingFlowConfig: OnboardingFlowConfig;

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

@@ -0,0 +1,218 @@
+/**
+ * OnboardingFlow Types
+ * Comprehensive type definitions for building complete onboarding flows
+ */
+import type { OnboardingRadioOption } from "./OnboardingTemplate";
+import type { CheckboxChipOption } from "../../molecules/CheckboxChip/CheckboxChipGroup";
+import type { OnboardingInfoItem } from "../../organisms/OnboardingInfoBox/OnboardingInfoBox";
+/**
+ * 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";
+/**
+ * Base step configuration shared across all step types
+ */
+export interface OnboardingStepBase {
+    /**
+     * Unique identifier for this step
+     */
+    id: string;
+    /**
+     * Step variation type
+     */
+    type: OnboardingStepType;
+    /**
+     * Welcome heading text
+     */
+    welcomeHeading?: string;
+    /**
+     * Welcome subtext
+     */
+    welcomeSubtext?: string;
+    /**
+     * Main headline question
+     */
+    headline?: string;
+    /**
+     * Optional validation function to determine if step is complete
+     */
+    validate?: (data: Record<string, any>) => boolean;
+    /**
+     * Optional callback when step is entered
+     */
+    onEnter?: () => void;
+    /**
+     * Optional callback when step is exited
+     */
+    onExit?: () => void;
+}
+/**
+ * Radio selection step configuration
+ */
+export interface OnboardingRadioStep extends OnboardingStepBase {
+    type: "radio" | "split-screen";
+    radioOptions: OnboardingRadioOption[];
+    /**
+     * Optional second question text (for multi-question screens)
+     */
+    secondQuestion?: string;
+    /**
+     * Key in the data object where the selected value is stored
+     */
+    dataKey: string;
+}
+/**
+ * Checkbox selection step configuration
+ */
+export interface OnboardingCheckboxStep extends OnboardingStepBase {
+    type: "checkbox-no-icon" | "checkbox-with-icon";
+    checkboxOptions: CheckboxChipOption[];
+    /**
+     * Key in the data object where the selected values array is stored
+     */
+    dataKey: string;
+}
+/**
+ * Yes/No with conditional radio step configuration
+ */
+export interface OnboardingButtonsPlusRadioStep extends OnboardingStepBase {
+    type: "buttons-plus-radio";
+    yesNoQuestion: string;
+    secondQuestion: string;
+    radioOptions: OnboardingRadioOption[];
+    /**
+     * Key in the data object where yes/no answer is stored
+     */
+    yesNoDataKey: string;
+    /**
+     * Key in the data object where radio selection is stored
+     */
+    radioDataKey: string;
+}
+/**
+ * Know your customer (two sections) step configuration
+ */
+export interface OnboardingKnowYourCustomerStep extends OnboardingStepBase {
+    type: "know-your-customer";
+    firstSectionQuestion: string;
+    firstSectionOptions: CheckboxChipOption[];
+    secondSectionQuestion: string;
+    secondSectionOptions: CheckboxChipOption[];
+    /**
+     * Key in the data object where first section value is stored
+     */
+    firstSectionDataKey: string;
+    /**
+     * Key in the data object where second section value is stored
+     */
+    secondSectionDataKey: string;
+}
+/**
+ * Double radio step configuration (two radio sections on one screen)
+ */
+export interface OnboardingDoubleRadioStep extends OnboardingStepBase {
+    type: "double-radio";
+    firstQuestion: string;
+    firstRadioOptions: OnboardingRadioOption[];
+    secondQuestion: string;
+    secondRadioOptions: OnboardingRadioOption[];
+    /**
+     * Key in the data object where first radio selection is stored
+     */
+    firstDataKey: string;
+    /**
+     * Key in the data object where second radio selection is stored
+     */
+    secondDataKey: string;
+}
+/**
+ * Launcher step configuration (informational with CTA)
+ */
+export interface OnboardingLauncherStep extends OnboardingStepBase {
+    type: "launcher";
+    launcherIcon: string;
+    launcherHeadline: string;
+    launcherText: string;
+    launcherSubtext: string;
+    infoBoxTitle: string;
+    infoBoxItems: OnboardingInfoItem[];
+    ctaLabel: string;
+    ctaHeading: string;
+    ctaDescription: string;
+    ctaButtonText: string;
+    /**
+     * Optional callback when CTA button is clicked
+     */
+    onCTAClick?: () => void;
+}
+/**
+ * Artwork step configuration (visual only)
+ */
+export interface OnboardingArtworkStep extends OnboardingStepBase {
+    type: "artwork";
+    artworkBackgroundImage?: string;
+    artworkImage?: string;
+}
+/**
+ * Union type of all possible step configurations
+ */
+export type OnboardingStep = OnboardingRadioStep | OnboardingCheckboxStep | OnboardingButtonsPlusRadioStep | OnboardingKnowYourCustomerStep | OnboardingDoubleRadioStep | OnboardingLauncherStep | OnboardingArtworkStep;
+/**
+ * Complete onboarding flow configuration
+ */
+export interface OnboardingFlowConfig {
+    /**
+     * Logo image source
+     */
+    logoSrc?: string;
+    /**
+     * Array of steps in the flow
+     */
+    steps: OnboardingStep[];
+    /**
+     * Initial data values
+     */
+    initialData?: Record<string, any>;
+    /**
+     * Artwork configuration for split-screen variation
+     */
+    artwork?: {
+        backgroundImage?: string;
+        artworkImage?: string;
+    };
+    /**
+     * Optional function to dynamically determine which steps to show based on collected data
+     * Returns array of step IDs to display
+     */
+    getFlowPath?: (data: Record<string, any>) => string[];
+}
+/**
+ * Collected data from the onboarding flow
+ */
+export interface OnboardingFlowData {
+    /**
+     * Dynamic key-value pairs collected from each step
+     */
+    [key: string]: any;
+}
+/**
+ * Event callbacks for the onboarding flow
+ */
+export interface OnboardingFlowCallbacks {
+    /**
+     * Called when the current step changes
+     */
+    onStepChange?: (stepIndex: number, stepId: string) => void;
+    /**
+     * Called when any data changes
+     */
+    onDataChange?: (data: OnboardingFlowData) => void;
+    /**
+     * Called when the entire flow is completed
+     */
+    onComplete?: (data: OnboardingFlowData) => void;
+    /**
+     * Called when user goes back from the first step
+     */
+    onCancel?: () => void;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * OnboardingFlowManager
+ * Manages complete multi-step onboarding flows
+ */
+import React from "react";
+import type { OnboardingFlowConfig, OnboardingFlowCallbacks } from "./OnboardingFlow.types";
+export interface OnboardingFlowManagerProps extends OnboardingFlowConfig, OnboardingFlowCallbacks {
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const OnboardingFlowManager: React.FC<OnboardingFlowManagerProps>;

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

@@ -8,7 +8,7 @@ import type { OnboardingInfoItem } from "../../organisms/OnboardingInfoBox/Onboa
 import "./OnboardingTemplate.scss";
 export interface OnboardingRadioOption {
     value: string;
-    icon: string;
+    icon?: string;
     title: string;
     description: string;
 }
@@ -16,7 +16,7 @@ export interface OnboardingTemplateProps {
     /**
      * Template variation type
      */
-    variation: "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "launcher" | "artwork";
+    variation: "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "double-radio" | "launcher" | "artwork" | "split-screen";
     /**
      * Current step (1-based)
      */
@@ -113,6 +113,34 @@ export interface OnboardingTemplateProps {
      * Second section option change handler
      */
     onSecondOptionChange?: (value: string) => void;
+    /**
+     * First question text (for double-radio)
+     */
+    firstQuestion?: string;
+    /**
+     * First radio options (for double-radio)
+     */
+    firstRadioOptions?: OnboardingRadioOption[];
+    /**
+     * Selected first radio option value
+     */
+    selectedFirstRadioOption?: string;
+    /**
+     * First radio option change handler
+     */
+    onFirstRadioChange?: (value: string) => void;
+    /**
+     * Second radio options (for double-radio)
+     */
+    secondRadioOptions?: OnboardingRadioOption[];
+    /**
+     * Selected second radio option value
+     */
+    selectedSecondRadioOption?: string;
+    /**
+     * Second radio option change handler
+     */
+    onSecondRadioChange?: (value: string) => void;
     /**
      * Icon name for launcher variation (Solar icon)
      */
@@ -181,5 +209,25 @@ export interface OnboardingTemplateProps {
      * Custom className
      */
     className?: string;
+    /**
+     * Called when step changes (before onContinue or onBack)
+     */
+    onStepChange?: (newStep: number) => void;
+    /**
+     * Called when any form data changes
+     */
+    onDataChange?: (data: Record<string, any>) => void;
+    /**
+     * Step identifier for tracking
+     */
+    stepId?: string;
+    /**
+     * Called when entering this step
+     */
+    onStepEnter?: () => void;
+    /**
+     * Called when exiting this step
+     */
+    onStepExit?: () => void;
 }
 export declare const OnboardingTemplate: React.ForwardRefExoticComponent<OnboardingTemplateProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -24,3 +24,14 @@ export declare const Variation5_NoSelection: Story;
 export declare const Variation5_PartialSelection: Story;
 export declare const Variation6_Launcher: Story;
 export declare const Variation7_Artwork: Story;
+export declare const Variation8_SplitScreen: Story;
+/**
+ * Full Version: Complete Onboarding Flow
+ * Demonstrates a fully working multi-step onboarding experience with:
+ * - Automatic step progression
+ * - Data collection across all steps
+ * - Event callbacks for tracking
+ * - Validation and error handling
+ * - Complete journey from start to finish
+ */
+export declare const Variation9_FullVersion: Story;

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

@@ -4,3 +4,7 @@
  */
 export { OnboardingTemplate } from "./OnboardingTemplate/OnboardingTemplate";
 export type { OnboardingTemplateProps, OnboardingRadioOption, } from "./OnboardingTemplate/OnboardingTemplate";
+export { OnboardingFlowManager } from "./OnboardingTemplate/OnboardingFlowManager";
+export type { OnboardingFlowManagerProps } from "./OnboardingTemplate/OnboardingFlowManager";
+export type { OnboardingStepType, OnboardingStepBase, OnboardingRadioStep, OnboardingCheckboxStep, OnboardingButtonsPlusRadioStep, OnboardingKnowYourCustomerStep, OnboardingLauncherStep, OnboardingArtworkStep, OnboardingStep, OnboardingFlowConfig, OnboardingFlowData, OnboardingFlowCallbacks, } from "./OnboardingTemplate/OnboardingFlow.types";
+export { fullOnboardingFlowConfig } from "./OnboardingTemplate/OnboardingFlow.config";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-mockups/design-system",
-  "version": "0.1.2",
+  "version": "0.2.3",
   "description": "A professional, scalable design system built with React 18, TypeScript, Radix UI, and Storybook",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,12 +16,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "git@gitlab.designcopilot.io:design-copilot/design-system.git"
+    "url": "https://dynamicmockups.com"
   },
   "bugs": {
-    "url": "https://gitlab.designcopilot.io/design-copilot/design-system/-/issues"
+    "url": "https://dynamicmockups.com"
   },
-  "homepage": "https://gitlab.designcopilot.io/design-copilot/design-system#readme",
+  "homepage": "https://dynamicmockups.com",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",