@stigg/react-sdk 7.7.1-beta.1 → 7.8.0

package/src/stories/CreditUsageChart.stories.tsx

@@ -0,0 +1,347 @@
+import styled from '@utils/style';
+import { mocked } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CreditUsageChart, CreditUsageChartProps } from '../components/credits';
+import { StiggProvider, StiggProviderProps } from '../components/StiggProvider';
+import { defaultArgsWithCustomer } from './baseArgs';
+import { customTheme } from './CustomTheme';
+import { useCreditUsage } from '../components/credits/hooks/useCreditUsage';
+import { CreditUsageTimeRange } from '@stigg/js-client-sdk';
+
+const Wrapper = styled.div`
+  padding: 20px;
+  width: 1000px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const meta = {
+  title: 'Stigg React SDK/Credits/Credit Usage Chart',
+  component: CreditUsageChart,
+  args: {
+    ...defaultArgsWithCustomer,
+    currencyId: 'cred-type-ai-tokens',
+    timeRange: CreditUsageTimeRange.LastMonth,
+  },
+  argTypes: {
+    apiKey: {
+      control: 'text',
+      description: 'Stigg API Key (shared across credit stories)',
+    },
+    baseUri: {
+      control: 'text',
+      description: 'Stigg API Base URI (shared across credit stories)',
+    },
+    enableEdge: {
+      control: 'boolean',
+      description: 'Whether to enable Edge (shared across credit stories)',
+    },
+    customerId: {
+      control: 'text',
+      description: 'Customer ID (can be overridden per story)',
+    },
+    currencyId: {
+      control: 'text',
+      description: 'Currency identifier for fetching balance',
+    },
+    timeRange: {
+      control: 'select',
+      options: Object.values(CreditUsageTimeRange),
+      description: 'Time range for fetching credit usage',
+    },
+  },
+  decorators: [
+    (Story, { args }) => (
+      <Wrapper>
+        <StiggProvider
+          apiKey={args.apiKey}
+          customerId={args.customerId}
+          theme={args.theme}
+          locale={args.locale}
+          baseUri={args.baseUri}
+          enableEdge={args.enableEdge}>
+          <Story />
+        </StiggProvider>
+      </Wrapper>
+    ),
+  ],
+} as Meta<StiggProviderProps & CreditUsageChartProps & { currentBalance?: number }>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const aiTokensCurrency = {
+  currencyId: 'cred-type-ai-tokens',
+  displayName: 'AI Tokens',
+  units: {
+    singular: 'AI Token',
+    plural: 'AI Tokens',
+  },
+};
+
+export const RealImplementation: Story = {
+  args: {
+    currencyId: 'cred-type-ai-tokens',
+  },
+};
+
+export const MockedImplementation: Story = {
+  beforeEach: () => {
+    // Cache for generated mock data to prevent regeneration on every call
+    const mockDataCache = new Map<CreditUsageTimeRange, any>();
+
+    // Create a function that generates mock data based on the current timeRange
+    const generateMockData = (timeRange: CreditUsageTimeRange): ReturnType<typeof useCreditUsage> => {
+      // Check if we already have cached data for this time range
+      const cached = mockDataCache.get(timeRange) as ReturnType<typeof useCreditUsage> | undefined;
+      if (cached) {
+        return cached;
+      }
+
+      // Generate data points based on the selected time range
+      const now = new Date();
+      let dataPoints: number;
+      let startDate: Date;
+      let timeIncrement: (date: Date, i: number) => void;
+
+      switch (timeRange) {
+        case CreditUsageTimeRange.LastDay: {
+          // Last 24 hours with hourly granularity (24 data points)
+          dataPoints = 24;
+          startDate = new Date(now);
+          startDate.setHours(startDate.getHours() - 23);
+          startDate.setMinutes(0, 0, 0); // Round to start of hour
+          timeIncrement = (date, i) => date.setHours(date.getHours() + i);
+          break;
+        }
+        case CreditUsageTimeRange.LastWeek: {
+          // Last 7 days with daily granularity (7 data points)
+          dataPoints = 7;
+          startDate = new Date(now);
+          startDate.setDate(startDate.getDate() - 6);
+          startDate.setHours(0, 0, 0, 0);
+          timeIncrement = (date, i) => date.setDate(date.getDate() + i);
+          break;
+        }
+        case CreditUsageTimeRange.LastYear: {
+          // Last 12 months with monthly granularity (12 data points)
+          dataPoints = 12;
+          startDate = new Date(now);
+          startDate.setMonth(startDate.getMonth() - 11);
+          startDate.setDate(1);
+          startDate.setHours(0, 0, 0, 0);
+          timeIncrement = (date, i) => date.setMonth(date.getMonth() + i);
+          break;
+        }
+        case CreditUsageTimeRange.LastMonth:
+        default: {
+          // Last 30 days with daily granularity (30 data points)
+          dataPoints = 30;
+          startDate = new Date(now);
+          startDate.setDate(startDate.getDate() - 29);
+          startDate.setHours(0, 0, 0, 0);
+          timeIncrement = (date, i) => date.setDate(date.getDate() + i);
+          break;
+        }
+      }
+
+      // Use a seeded random number generator for consistent data
+      let seed = 12345; // Fixed seed for consistent generation
+      const seededRandom = () => {
+        seed = (seed * 9301 + 49297) % 233280;
+        return seed / 233280;
+      };
+
+      // Generate points based on time range with more randomization
+      const generatePoints = (baseValue: number, variation: number = 0.8) => {
+        const points = [];
+        for (let i = 0; i < dataPoints; i++) {
+          const date = new Date(startDate);
+          timeIncrement(date, i);
+
+          // Add more randomization with different patterns using seeded random
+          const randomVariation = (seededRandom() - 0.5) * variation;
+          const spikeChance = seededRandom();
+          const zeroChance = seededRandom();
+
+          let value = baseValue * (1 + randomVariation);
+
+          // Occasionally add spikes (20% chance)
+          if (spikeChance < 0.2) {
+            value *= 2 + seededRandom() * 3; // 2-5x multiplier
+          }
+
+          // Occasionally have zero usage (15% chance)
+          if (zeroChance < 0.15) {
+            value = 0;
+          }
+
+          // Add some weekend/weekday patterns (only for daily granularity)
+          if (timeRange === CreditUsageTimeRange.LastMonth || timeRange === CreditUsageTimeRange.LastWeek) {
+            const dayOfWeek = date.getDay();
+            if (dayOfWeek === 0 || dayOfWeek === 6) {
+              value *= 0.3 + seededRandom() * 0.4; // 30-70% of normal on weekends
+            }
+          }
+
+          // Add hourly patterns for LastDay
+          if (timeRange === CreditUsageTimeRange.LastDay) {
+            const hour = date.getHours();
+            if (hour >= 22 || hour <= 6) {
+              value *= 0.2 + seededRandom() * 0.3; // 20-50% of normal during night hours
+            } else if (hour >= 9 && hour <= 17) {
+              value *= 1.2 + seededRandom() * 0.5; // 120-170% of normal during business hours
+            }
+          }
+
+          // Add monthly patterns for LastYear
+          if (timeRange === CreditUsageTimeRange.LastYear) {
+            const month = date.getMonth();
+            if (month === 11 || month === 0) {
+              // December and January
+              value *= 1.5 + seededRandom() * 0.5; // 150-200% during holiday season
+            } else if (month === 6 || month === 7) {
+              // July and August
+              value *= 0.7 + seededRandom() * 0.3; // 70-100% during summer
+            }
+          }
+
+          value = Math.max(0, Math.round(value));
+
+          points.push({
+            timestamp: date.toISOString(),
+            value: value,
+          });
+        }
+        return points;
+      };
+
+      // Calculate total credits for each feature with more varied base values
+      const feature1Points = generatePoints(6 + seededRandom() * 8, 1.2); // 6-14 base with high variation
+      const feature2Points = generatePoints(10 + seededRandom() * 15, 1.0); // 10-25 base with high variation
+      const feature3Points = generatePoints(20 + seededRandom() * 20, 0.9); // 20-40 base with high variation
+
+      const feature1Total = feature1Points.reduce((sum, point) => sum + point.value, 0);
+      const feature2Total = feature2Points.reduce((sum, point) => sum + point.value, 0);
+      const feature3Total = feature3Points.reduce((sum, point) => sum + point.value, 0);
+
+      const result = {
+        creditUsage: {
+          series: [
+            {
+              featureId: 'feature-1',
+              featureName: 'Feature 1',
+              totalCredits: feature1Total,
+              points: feature1Points,
+            },
+            {
+              featureId: 'feature-2',
+              featureName: 'Feature 2',
+              totalCredits: feature2Total,
+              points: feature2Points,
+            },
+            {
+              featureId: 'feature-3',
+              featureName: 'Feature 3',
+              totalCredits: feature3Total,
+              points: feature3Points,
+            },
+          ],
+          currency: aiTokensCurrency,
+        },
+        isLoading: false,
+        error: null,
+      };
+
+      // Cache the result for this time range
+      mockDataCache.set(timeRange, result);
+      return result;
+    };
+
+    // Mock the hook to call the function with the current timeRange parameter
+    mocked(useCreditUsage).mockImplementation((params) => {
+      return generateMockData(params.timeRange || CreditUsageTimeRange.LastMonth);
+    });
+  },
+};
+
+export const LoadingState: Story = {
+  beforeEach: () => {
+    mocked(useCreditUsage).mockReturnValue({
+      creditUsage: null,
+      isLoading: true,
+      error: null,
+    });
+  },
+};
+
+export const ErrorState: Story = {
+  beforeEach: () => {
+    mocked(useCreditUsage).mockReturnValue({
+      creditUsage: null,
+      isLoading: false,
+      error: new Error('Error loading credit usage'),
+    });
+  },
+};
+
+export const EmptyState: Story = {
+  beforeEach: () => {
+    mocked(useCreditUsage).mockReturnValue({
+      creditUsage: {
+        series: [],
+        currency: aiTokensCurrency,
+      },
+      isLoading: false,
+      error: null,
+    });
+  },
+};
+
+export const CustomThemedBalance: Story = {
+  args: {
+    currencyId: 'usd',
+    theme: customTheme,
+  },
+  beforeEach: () => {
+    // Generate realistic dates for the last month
+    const now = new Date();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const threeDaysAgo = new Date(now);
+    threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
+
+    mocked(useCreditUsage).mockReturnValue({
+      creditUsage: {
+        series: [
+          {
+            featureId: 'feature-1',
+            featureName: 'Feature 1',
+            totalCredits: 100,
+            points: [
+              {
+                timestamp: yesterday.toISOString(),
+                value: 10,
+              },
+            ],
+          },
+          {
+            featureId: 'feature-2',
+            featureName: 'Feature 2',
+            totalCredits: 200,
+            points: [
+              {
+                timestamp: threeDaysAgo.toISOString(),
+                value: 20,
+              },
+            ],
+          },
+        ],
+        currency: aiTokensCurrency,
+      },
+      isLoading: false,
+      error: null,
+    });
+  },
+};

package/src/stories/CreditUtilization.stories.tsx

@@ -0,0 +1,287 @@
+import styled from '@utils/style';
+import { mocked } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CreditUtilization, CreditUtilizationProps } from '../components/credits';
+import { StiggProvider, StiggProviderProps } from '../components/StiggProvider';
+import { defaultArgsWithCustomer } from './baseArgs';
+import { customTheme } from './CustomTheme';
+import { useCreditBalance } from '../components/credits/hooks/useCreditBalance';
+
+const Wrapper = styled.div`
+  padding: 20px;
+  width: 1024px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const meta = {
+  title: 'Stigg React SDK/Credits/Credit Utilization',
+  component: CreditUtilization,
+  args: {
+    ...defaultArgsWithCustomer,
+    consumed: 6000,
+    granted: 1250,
+    showUnits: true,
+    showSymbol: false,
+  },
+  argTypes: {
+    apiKey: {
+      control: 'text',
+      description: 'Stigg API Key (shared across credit stories)',
+    },
+    baseUri: {
+      control: 'text',
+      description: 'Stigg API Base URI (shared across credit stories)',
+    },
+    enableEdge: {
+      control: 'boolean',
+      description: 'Whether to enable Edge (shared across credit stories)',
+    },
+    customerId: {
+      control: 'text',
+      description: 'Customer ID (can be overridden per story)',
+    },
+    currencyId: {
+      control: 'text',
+      description: 'Currency identifier for fetching balance',
+    },
+    consumed: {
+      control: 'number',
+      description: 'Current usage amount',
+    },
+    granted: {
+      control: 'number',
+      description: 'Current remaining balance for mocked implementation',
+    },
+    localization: {
+      control: 'object',
+      description: 'Localization options (e.g., { title: "Credit Usage", remaining: "Left" })',
+    },
+    decimalPlaces: {
+      control: { type: 'number', min: 0, max: 8 },
+      description: 'Number of decimal places to display (null preserves full value)',
+    },
+    showUnits: {
+      control: 'boolean',
+      description: 'Whether to display units (e.g., tokens, dollars)',
+    },
+    showSymbol: {
+      control: 'boolean',
+      description: 'Whether to display currency symbol (e.g., $, €)',
+    },
+  },
+  decorators: [
+    (Story, { args }) => (
+      <Wrapper>
+        <StiggProvider
+          apiKey={args.apiKey}
+          customerId={args.customerId}
+          theme={args.theme}
+          locale={args.locale}
+          baseUri={args.baseUri}
+          enableEdge={args.enableEdge}>
+          <Story />
+        </StiggProvider>
+      </Wrapper>
+    ),
+  ],
+} as Meta<StiggProviderProps & CreditUtilizationProps & { granted?: number; consumed?: number }>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const RealImplementation: Story = {
+  args: {
+    currencyId: 'cred-type-ai-tokens',
+    consumed: 6000,
+    granted: 1250,
+  },
+};
+
+export const MockedImplementation: Story = {
+  args: {
+    currencyId: 'cred-type-ai-tokens',
+    consumed: 1250,
+    granted: 6000,
+  },
+  beforeEach: ({ args }) => {
+    mocked(useCreditBalance).mockReturnValue({
+      balance: {
+        currentBalance: (args?.granted ?? 6000) - (args?.consumed ?? 1250),
+        totalConsumed: args.consumed || 1250,
+        totalGranted: args.granted || 6000,
+        currencyId: 'cred-type-ai-tokens',
+        displayName: 'AI Tokens',
+        symbol: '✨',
+        units: { singular: 'AI Token', plural: 'AI Tokens' },
+      },
+      isLoading: false,
+      error: null,
+    });
+  },
+};
+
+export const LowUtilization: Story = {
+  args: {
+    currencyId: 'cred-type-ai-tokens',
+    consumed: 1000,
+    granted: 9000,
+  },
+  beforeEach: ({ args }) => {
+    mocked(useCreditBalance).mockReturnValue({
+      balance: {
+        currentBalance: (args?.granted ?? 9000) - (args?.consumed ?? 1000),
+        totalConsumed: args.consumed || 1000,
+        totalGranted: args.granted || 9000,
+        currencyId: 'cred-type-ai-tokens',
+        displayName: 'AI Tokens',
+        symbol: null,
+        units: { singular: 'AI Token', plural: 'AI Tokens' },
+      },
+      isLoading: false,
+      error: null,
+    });
+  },
+};
+
+export const HighUtilization: Story = {
+  args: {
+    currencyId: 'cred-type-ai-tokens',
+    consumed: 9000,
+    granted: 9500,
+  },
+  beforeEach: ({ args }) => {
+    mocked(useCreditBalance).mockReturnValue({
+      balance: {
+        currentBalance: (args?.granted ?? 9500) - (args?.consumed ?? 9000),
+        totalConsumed: args.consumed || 9000,
+        totalGranted: args.granted || 9500,
+        currencyId: 'cred-type-ai-tokens',
+        displayName: 'AI Tokens',
+        symbol: null,
+        units: { singular: 'AI Token', plural: 'AI Tokens' },
+      },
+      isLoading: false,
+      error: null,
+    });
+  },
+};
+
+export const FullUtilization: Story = {
+  args: {
+    currencyId: 'cred-type-ai-tokens',
+    consumed: 10000,
+    granted: 10000,
+  },
+  beforeEach: ({ args }) => {
+    mocked(useCreditBalance).mockReturnValue({
+      balance: {
+        currentBalance: (args?.granted ?? 10000) - (args?.consumed ?? 10000),
+        totalConsumed: args.consumed || 10000,
+        totalGranted: args.granted || 10000,
+        currencyId: 'cred-type-ai-tokens',
+        displayName: 'AI Tokens',
+        symbol: null,
+        units: { singular: 'AI Token', plural: 'AI Tokens' },
+      },
+      isLoading: false,
+      error: null,
+    });
+  },
+};
+
+export const CustomThemedUtilization: Story = {
+  args: {
+    currencyId: 'usd',
+    theme: customTheme,
+  },
+  beforeEach: ({ args }) => {
+    mocked(useCreditBalance).mockReturnValue({
+      balance: {
+        currentBalance: (args?.granted ?? 350.25) - (args?.consumed ?? 149.75),
+        totalConsumed: args.consumed || 149.75,
+        totalGranted: args.granted || 350.25,
+        currencyId: 'usd',
+        displayName: 'US Dollars',
+        symbol: '$',
+        units: { singular: 'dollar', plural: 'dollars' },
+      },
+      isLoading: false,
+      error: null,
+    });
+  },
+};
+
+export const ManyDecimalPoints: Story = {
+  args: {
+    currencyId: 'usd',
+    decimalPlaces: 8,
+  },
+  beforeEach: ({ args }) => {
+    mocked(useCreditBalance).mockReturnValue({
+      balance: {
+        currentBalance: (args?.granted ?? 350.258127982) - (args?.consumed ?? 149.89127481),
+        totalConsumed: args.consumed || 149.89127481,
+        totalGranted: args.granted || 350.258127982,
+        currencyId: 'usd',
+        displayName: 'Bitcoin',
+        symbol: '₿',
+        units: { singular: 'Bitcoin', plural: 'Bitcoins' },
+      },
+      isLoading: false,
+      error: null,
+    });
+  },
+};
+
+export const CustomLocalization: Story = {
+  args: {
+    currencyId: 'cred-type-ai-tokens',
+    localization: {
+      title: 'Token Usage',
+      remaining: 'Left',
+    },
+  },
+  beforeEach: ({ args }) => {
+    mocked(useCreditBalance).mockReturnValue({
+      balance: {
+        currentBalance: (args?.granted ?? 6000) - (args?.consumed ?? 1250),
+        totalConsumed: args.consumed || 1250,
+        totalGranted: args.granted || 6000,
+        currencyId: 'cred-type-ai-tokens',
+        displayName: 'AI Tokens',
+        symbol: '✨',
+        units: { singular: 'AI Token', plural: 'AI Tokens' },
+      },
+      isLoading: false,
+      error: null,
+    });
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    currencyId: 'cred-type-ai-tokens',
+  },
+  beforeEach: () => {
+    mocked(useCreditBalance).mockReturnValue({
+      balance: null,
+      isLoading: true,
+      error: null,
+    });
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    currencyId: 'invalid-currency',
+  },
+  beforeEach: () => {
+    mocked(useCreditBalance).mockReturnValue({
+      balance: null,
+      isLoading: false,
+      error: new Error('Currency not found'),
+    });
+  },
+};

package/src/stories/CustomTheme.ts

@@ -0,0 +1,57 @@
+import { CustomizedTheme } from '../theme/Theme';
+
+export const customTheme: CustomizedTheme = {
+  palette: {
+    primary: '#4CAF50',
+    primaryDark: '#2E7D32',
+    primaryLight: '#81C784',
+    backgroundPaper: '#F1F8E9',
+    backgroundHighlight: '#C8E6C9',
+    backgroundSection: '#F1F8E9',
+    backgroundButton: '#4CAF50',
+    outlinedBorder: '#81C784',
+    outlinedRestingBorder: '#A5D6A7',
+    outlinedHoverBackground: '#E8F5E8',
+    switchBorder: '#66BB6A',
+    switchFill: '#4CAF50',
+    switchHandle: '#2E7D32',
+    warning: '#FF9800',
+    error: '#F44336',
+    errorDark: '#D32F2F',
+    white: '#FFFFFF',
+    success: '#4CAF50',
+    successDark: '#2E7D32',
+    text: {
+      primary: '#1B5E20',
+      secondary: '#388E3C',
+      tertiary: '#66BB6A',
+      disabled: '#9E9E9E',
+    },
+  },
+  layout: {
+    planMinWidth: '300px',
+    planMaxWidth: '400px',
+    planMargin: '16px',
+    planPadding: '24px',
+    ctaAlignment: 'center',
+    headerAlignment: 'center',
+    descriptionAlignment: 'center',
+    descriptionMinHeight: '60px',
+    switchBottomSpacing: '16px',
+  },
+  shadows: {
+    light: '0 2px 4px rgba(0,0,0,0.1)',
+    popover: '0 4px 20px rgba(0,0,0,0.15)',
+  },
+  border: {
+    radius: '8px',
+  },
+  typography: {
+    fontFamily: 'Inter, sans-serif',
+    h1: { fontSize: '32px', fontWeight: 'bold' },
+    h2: { fontSize: '24px', fontWeight: 'bold' },
+    h3: { fontSize: '18px', fontWeight: 'bold' },
+    body: { fontSize: '14px', fontWeight: 'normal' },
+    caption: { fontSize: '12px', fontWeight: 'normal' },
+  },
+};