@dynamic-mockups/design-system 0.2.14 → 0.2.17

package/dist/src/components/atoms/ui-components/TextField/TextField.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./TextField").TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;

package/dist/src/components/atoms/ui-components/TextField/index.d.ts

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

package/dist/src/components/atoms/ui-components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Tooltip as RadixTooltip } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Tooltip.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface TooltipProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTooltip>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+    className?: string;
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/ui-components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Tooltip").TooltipProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        content: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        textColorToken: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const OnIcon: Story;
+export declare const WithCustomColors: Story;

package/dist/src/components/templates/CancellationFlowTemplate/CancellationFlow.config.d.ts

@@ -0,0 +1,2 @@
+import { CancellationFlowData } from "./CancellationFlow.types";
+export declare const defaultCancellationFlowData: CancellationFlowData;

package/dist/src/components/templates/CancellationFlowTemplate/CancellationFlow.types.d.ts

@@ -0,0 +1,85 @@
+export type CancellationStep = "initial" | "reason-selection" | "too-expensive-offer" | "missing-mockups-offer" | "missing-features-request" | "seasonal-offer" | "technical-support" | "other-feedback" | "keep-account-success" | "confirm-cancellation";
+export type CancellationReason = "too-expensive" | "missing-mockups" | "missing-features" | "seasonal-business" | "technical-issues" | "other";
+export interface UserStats {
+    mockupsGenerated: number;
+    activeTemplates: number;
+    connectedStores: number;
+}
+export interface RecentCreation {
+    id: string;
+    imageUrl: string;
+    alt?: string;
+}
+export interface ReasonOption {
+    id: CancellationReason;
+    icon: string;
+    title: string;
+    description: string;
+}
+export interface DiscountOffer {
+    currentPrice: string;
+    discountedPrice: string;
+    discountPercentage: string;
+    duration: string;
+}
+export interface CreditsReward {
+    amount: number;
+    message?: string;
+}
+export interface TechnicalSupport {
+    availabilityStatus: string;
+    message: string;
+    responseTime: string;
+}
+export interface CancellationInfo {
+    accessUntilDate: string;
+    dataLossDate: string;
+    reactivationDate: string;
+    disclaimer: string;
+}
+export interface CancellationFlowData {
+    userStats: UserStats;
+    recentCreations: RecentCreation[];
+    reasonOptions: ReasonOption[];
+    discountOffer?: DiscountOffer;
+    creditsReward?: CreditsReward;
+    seasonalCreditsReward?: CreditsReward;
+    technicalSupport?: TechnicalSupport;
+    cancellationInfo?: CancellationInfo;
+    aiMockupGifUrl?: string;
+    roadmapUrl?: string;
+}
+export interface AcceptedOffer {
+    offerType: "discount" | "seasonal-discount";
+    reason: CancellationReason | null;
+    step: CancellationStep;
+    discountPercentage?: string;
+    discountedPrice?: string;
+}
+export interface CancellationFlowCallbacks {
+    onKeepAccount?: (step: CancellationStep, reason?: CancellationReason) => void;
+    onContinueToCancel?: (step: CancellationStep) => void;
+    onReasonSelected?: (reason: CancellationReason) => void;
+    onAcceptOffer?: (offer: AcceptedOffer) => void;
+    onDeclineOffer?: (offerType: string) => void;
+    onSubmitFeatureRequest?: (feature: string) => void;
+    onSubmitFeedback?: (feedback: string) => void;
+    onBookSupport?: () => void;
+    onConfirmCancellation?: (reason?: CancellationReason) => void;
+    onStepChange?: (newStep: CancellationStep, previousStep: CancellationStep) => void;
+    /** Fired when the user completes an action that closes the modal (accept offer, back to dashboard, etc.) */
+    onClose?: () => void;
+    /** Fired when the user dismisses the modal without completing (X button, backdrop click) */
+    onAbandon?: (step: CancellationStep, reason?: CancellationReason) => void;
+    onClaimCredits?: () => void;
+    onTryAI?: () => void;
+    onViewRoadmap?: () => void;
+    onBackToDashboard?: () => void;
+}
+export interface CancellationFlowTemplateProps {
+    open?: boolean;
+    data: CancellationFlowData;
+    callbacks: CancellationFlowCallbacks;
+    initialStep?: CancellationStep;
+    showClose?: boolean;
+}

package/dist/src/components/templates/CancellationFlowTemplate/CancellationFlowManager.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { CancellationStep, CancellationReason, CancellationFlowCallbacks, AcceptedOffer } from "./CancellationFlow.types";
+interface UseCancellationFlowManagerProps {
+    initialStep?: CancellationStep;
+    callbacks: CancellationFlowCallbacks;
+}
+export declare const useCancellationFlowManager: ({ initialStep, callbacks, }: UseCancellationFlowManagerProps) => {
+    currentStep: CancellationStep;
+    selectedReason: CancellationReason | null;
+    featureRequest: string;
+    setFeatureRequest: React.Dispatch<React.SetStateAction<string>>;
+    otherFeedback: string;
+    setOtherFeedback: React.Dispatch<React.SetStateAction<string>>;
+    handleKeepAccount: () => void;
+    handleContinueToCancel: () => void;
+    handleReasonSelected: (reason: CancellationReason) => void;
+    handleReasonContinue: () => void;
+    handleAcceptOffer: (offer: AcceptedOffer) => void;
+    handleDeclineOffer: (offerType: string) => void;
+    handleSubmitFeatureRequest: () => void;
+    handleSubmitFeedback: () => void;
+    handleBookSupport: () => void;
+    handleConfirmCancellation: () => void;
+    handleBack: () => void;
+    handleClaimCredits: () => void;
+    handleTryAI: () => void;
+    handleViewRoadmap: () => void;
+    handleBackToDashboard: () => void;
+};
+export {};

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { CancellationFlowTemplateProps } from "./CancellationFlow.types";
+import "./CancellationFlowTemplate.scss";
+export declare const CancellationFlowTemplate: React.ForwardRefExoticComponent<CancellationFlowTemplateProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,47 @@
+import type { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./CancellationFlow.types").CancellationFlowTemplateProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        open: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        showClose: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        initialStep: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InitialScreen: Story;
+export declare const ReasonSelection: Story;
+export declare const TooExpensiveOffer: Story;
+export declare const MissingMockupsOffer: Story;
+export declare const MissingFeaturesRequest: Story;
+export declare const SeasonalOffer: Story;
+export declare const TechnicalSupport: Story;
+export declare const OtherFeedback: Story;
+export declare const KeepAccountSuccess: Story;
+export declare const ConfirmCancellation: Story;
+export declare const CustomData: Story;
+export declare const WithoutCloseButton: Story;
+export declare const InteractiveFlow: Story;

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

@@ -0,0 +1,4 @@
+export { CancellationFlowTemplate } from "./CancellationFlowTemplate";
+export type { CancellationStep, CancellationReason, AcceptedOffer, UserStats, RecentCreation, ReasonOption, DiscountOffer, CreditsReward, TechnicalSupport, CancellationInfo, CancellationFlowData, CancellationFlowCallbacks, CancellationFlowTemplateProps, } from "./CancellationFlow.types";
+export { defaultCancellationFlowData } from "./CancellationFlow.config";
+export { useCancellationFlowManager } from "./CancellationFlowManager";

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

@@ -8,3 +8,7 @@ export { OnboardingFlowManager } from "./OnboardingTemplate/OnboardingFlowManage
 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";
+export { CancellationFlowTemplate } from "./CancellationFlowTemplate/CancellationFlowTemplate";
+export type { CancellationFlowTemplateProps, CancellationStep, CancellationReason, UserStats, RecentCreation, ReasonOption, DiscountOffer, CreditsReward, TechnicalSupport, CancellationInfo, CancellationFlowData, CancellationFlowCallbacks, } from "./CancellationFlowTemplate/CancellationFlow.types";
+export { useCancellationFlowManager } from "./CancellationFlowTemplate/CancellationFlowManager";
+export { defaultCancellationFlowData } from "./CancellationFlowTemplate/CancellationFlow.config";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-mockups/design-system",
-  "version": "0.2.14",
+  "version": "0.2.17",
   "description": "A professional, scalable design system built with React 18, TypeScript, Radix UI, and Storybook",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -65,7 +65,8 @@
   },
   "dependencies": {
     "@iconify-icon/react": "^3.0.3",
-    "@radix-ui/colors": "^3.0.0"
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-icons": "^1.3.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",

package/dist/src/components/atoms/Accordion/Accordion.d.ts

@@ -1,52 +0,0 @@
-/**
- * Accordion Component
- * An accordion component that extends Radix UI Accordion
- */
-import React from "react";
-import type { AccordionSingleProps, AccordionMultipleProps } from "@radix-ui/react-accordion";
-import { type ColorToken } from "../../../tokens";
-import "./Accordion.scss";
-export type { ColorToken } from "../../../tokens";
-export type AccordionType = "single" | "multiple";
-export interface AccordionItemData {
-    value: string;
-    trigger: React.ReactNode;
-    content: React.ReactNode;
-}
-export interface BaseAccordionProps {
-    /**
-     * Accordion type - single allows one item open, multiple allows many
-     * @default 'single'
-     */
-    type?: AccordionType;
-    /**
-     * Array of accordion items
-     */
-    items: AccordionItemData[];
-    /**
-     * Default open value(s)
-     */
-    defaultValue?: string | string[];
-    /**
-     * Color token for trigger text
-     */
-    triggerColorToken?: ColorToken;
-    /**
-     * Color token for content text
-     */
-    contentColorToken?: ColorToken;
-    /**
-     * Color token for border
-     */
-    borderColorToken?: ColorToken;
-    /**
-     * Color token for background
-     */
-    backgroundColorToken?: ColorToken;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-export type AccordionProps = BaseAccordionProps & (Omit<AccordionSingleProps, "type" | "children"> | Omit<AccordionMultipleProps, "type" | "children">);
-export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/Accordion/Accordion.stories.d.ts

@@ -1,109 +0,0 @@
-import React from "react";
-import type { StoryObj } from "@storybook/react-vite";
-import type { ColorToken } from "./Accordion";
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./Accordion").AccordionProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        type: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        items: {
-            control: "object";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        defaultValue: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        triggerColorToken: {
-            control: "select";
-            options: ColorToken[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        contentColorToken: {
-            control: "select";
-            options: ColorToken[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        borderColorToken: {
-            control: "select";
-            options: ColorToken[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        backgroundColorToken: {
-            control: "select";
-            options: ColorToken[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        m: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mx: {
-            table: {
-                disable: boolean;
-            };
-        };
-        my: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mt: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mr: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mb: {
-            table: {
-                disable: boolean;
-            };
-        };
-        ml: {
-            table: {
-                disable: boolean;
-            };
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Single: Story;
-export declare const Multiple: Story;
-export declare const FAQ: Story;
-export declare const RichContent: Story;
-export declare const InteractiveColorPicker: Story;

package/dist/src/components/atoms/Accordion/index.d.ts

@@ -1,2 +0,0 @@
-export { Accordion } from "./Accordion";
-export type { AccordionProps, AccordionType, AccordionItemData } from "./Accordion";

package/dist/src/components/atoms/AlertDialog/AlertDialog.d.ts

@@ -1,66 +0,0 @@
-/**
- * AlertDialog Component
- * An alert dialog component that extends Radix UI AlertDialog
- */
-import React from "react";
-import type { AlertDialogProps as RadixAlertDialogProps } from "@radix-ui/react-alert-dialog";
-import { type ColorToken } from "../../../tokens";
-import "./AlertDialog.scss";
-export type { ColorToken } from "../../../tokens";
-export interface AlertDialogProps extends Omit<RadixAlertDialogProps, "children"> {
-    /**
-     * Alert dialog trigger element
-     */
-    trigger?: React.ReactNode;
-    /**
-     * Alert dialog title
-     */
-    title: string;
-    /**
-     * Alert dialog description
-     */
-    description: string;
-    /**
-     * Cancel button text
-     * @default 'Cancel'
-     */
-    cancelText?: string;
-    /**
-     * Action button text
-     * @default 'Confirm'
-     */
-    actionText?: string;
-    /**
-     * Callback when action button is clicked
-     */
-    onAction?: () => void;
-    /**
-     * Callback when cancel button is clicked
-     */
-    onCancel?: () => void;
-    /**
-     * Color token for overlay background
-     */
-    overlayColorToken?: ColorToken;
-    /**
-     * Color token for dialog background
-     */
-    backgroundColorToken?: ColorToken;
-    /**
-     * Color token for title text
-     */
-    titleColorToken?: ColorToken;
-    /**
-     * Color token for description text
-     */
-    descriptionColorToken?: ColorToken;
-    /**
-     * Color token for action button background
-     */
-    actionColorToken?: ColorToken;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-export declare const AlertDialog: React.ForwardRefExoticComponent<AlertDialogProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/AlertDialog/AlertDialog.stories.d.ts

@@ -1,144 +0,0 @@
-import React from "react";
-import type { StoryObj } from "@storybook/react-vite";
-import type { ColorToken } from "./AlertDialog";
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./AlertDialog").AlertDialogProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        trigger: {
-            control: false;
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        title: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        description: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        cancelText: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        actionText: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        onAction: {
-            control: false;
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        onCancel: {
-            control: false;
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        overlayColorToken: {
-            control: "select";
-            options: ColorToken[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        backgroundColorToken: {
-            control: "select";
-            options: ColorToken[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        titleColorToken: {
-            control: "select";
-            options: ColorToken[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        descriptionColorToken: {
-            control: "select";
-            options: ColorToken[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        actionColorToken: {
-            control: "select";
-            options: ColorToken[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        m: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mx: {
-            table: {
-                disable: boolean;
-            };
-        };
-        my: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mt: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mr: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mb: {
-            table: {
-                disable: boolean;
-            };
-        };
-        ml: {
-            table: {
-                disable: boolean;
-            };
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const CustomText: Story;
-export declare const WithCallback: Story;
-export declare const DangerAction: Story;
-export declare const InteractiveColorPicker: Story;

package/dist/src/components/atoms/AlertDialog/index.d.ts

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