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

package/src/stories/CreditUsageChart.stories.tsx

@@ -1,347 +0,0 @@
-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

@@ -1,287 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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' },
-  },
-};