103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import type { Preview } from "@storybook/nextjs-vite";
|
|
import { Geist, Geist_Mono, Inter, Manrope, Poppins } from "next/font/google";
|
|
import "../src/app/globals.css";
|
|
import React from "react";
|
|
import {
|
|
PaymentPlacementProvider,
|
|
TrialVariantSelectionProvider,
|
|
} from "../src/entities/session/payment";
|
|
import type { IFunnelPaymentPlacement } from "../src/entities/session/funnel/types";
|
|
import { Currency } from "../src/shared/types";
|
|
|
|
const geistSans = Geist({
|
|
variable: "--font-geist-sans",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const geistMono = Geist_Mono({
|
|
variable: "--font-geist-mono",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const manrope = Manrope({
|
|
variable: "--font-manrope",
|
|
subsets: ["latin", "cyrillic"],
|
|
weight: ["200", "300", "400", "500", "600", "700", "800"],
|
|
});
|
|
|
|
const inter = Inter({
|
|
variable: "--font-inter",
|
|
subsets: ["latin", "cyrillic"],
|
|
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
|
});
|
|
|
|
const poppins = Poppins({
|
|
variable: "--font-poppins",
|
|
subsets: ["latin"],
|
|
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
|
});
|
|
|
|
// Storybook mock placement to avoid network calls
|
|
const storybookPlacement: IFunnelPaymentPlacement = {
|
|
currency: Currency.USD,
|
|
billingPeriod: "WEEK",
|
|
billingInterval: 1,
|
|
trialPeriod: "DAY",
|
|
trialInterval: 7,
|
|
placementId: "plc_story",
|
|
paywallId: "pw_story",
|
|
paymentUrl: "https://example.com/pay",
|
|
variants: [
|
|
{ id: "v1", key: "basic", type: "subscription", price: 1499, trialPrice: 100, title: "Basic" },
|
|
{ id: "v2", key: "standard", type: "subscription", price: 1499, trialPrice: 499, title: "Standard" },
|
|
{ id: "v3", key: "popular", type: "subscription", price: 1499, trialPrice: 899, title: "Popular", accent: true },
|
|
{ id: "v4", key: "premium", type: "subscription", price: 1499, trialPrice: 1367, title: "Premium" },
|
|
],
|
|
};
|
|
|
|
const preview: Preview = {
|
|
parameters: {
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
|
|
a11y: {
|
|
// 'todo' - show a11y violations in the test UI only
|
|
// 'error' - fail CI on a11y violations
|
|
// 'off' - skip a11y checks entirely
|
|
test: "todo",
|
|
},
|
|
|
|
layout: "padded",
|
|
|
|
backgrounds: {
|
|
options: {
|
|
light: { name: "Light", value: "#fff" },
|
|
dark: { name: "Dark", value: "#333" },
|
|
},
|
|
},
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<PaymentPlacementProvider
|
|
initialCache={[
|
|
{ funnelKey: "storybook-funnel", paymentId: "main", placement: storybookPlacement },
|
|
]}
|
|
>
|
|
<TrialVariantSelectionProvider>
|
|
<div
|
|
className={`${geistSans.variable} ${geistMono.variable} ${manrope.variable} ${inter.variable} ${poppins.variable} flex items-center justify-center size-full max-w-[560px] min-w-xs mx-auto antialiased`}
|
|
>
|
|
<Story />
|
|
</div>
|
|
</TrialVariantSelectionProvider>
|
|
</PaymentPlacementProvider>
|
|
),
|
|
],
|
|
};
|
|
|
|
export default preview;
|