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

package/src/theme/Fonts.tsx

@@ -1,80 +0,0 @@
-import { Global, css } from '@emotion/react';
-
-export const Fonts = ({ externalFontUrl }: { externalFontUrl?: string }) => {
-  return (
-    <Global
-      styles={css`
-        ${externalFontUrl &&
-        `
-          @font-face {
-            font-family: 'custom-font';
-            font-style: normal;
-            font-weight: normal;
-            src: local('custom-font'), url(${externalFontUrl}) format('woff');
-          }
-        `}
-
-        /* latin-ext */
-        @font-face {
-          font-family: 'DM Sans';
-          font-style: normal;
-          font-weight: 400;
-          font-display: swap;
-          src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
-          unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
-            U+A720-A7FF;
-        }
-        /* latin */
-        @font-face {
-          font-family: 'DM Sans';
-          font-style: normal;
-          font-weight: 400;
-          font-display: swap;
-          src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
-          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
-            U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-        /* latin-ext */
-        @font-face {
-          font-family: 'DM Sans';
-          font-style: normal;
-          font-weight: 500;
-          font-display: swap;
-          src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBamC3YU-CnE6Q.woff2) format('woff2');
-          unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
-            U+A720-A7FF;
-        }
-        /* latin */
-        @font-face {
-          font-family: 'DM Sans';
-          font-style: normal;
-          font-weight: 500;
-          font-display: swap;
-          src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBimC3YU-Ck.woff2) format('woff2');
-          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
-            U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-        /* latin-ext */
-        @font-face {
-          font-family: 'DM Sans';
-          font-style: normal;
-          font-weight: 700;
-          font-display: swap;
-          src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBamC3YU-CnE6Q.woff2) format('woff2');
-          unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
-            U+A720-A7FF;
-        }
-        /* latin */
-        @font-face {
-          font-family: 'DM Sans';
-          font-style: normal;
-          font-weight: 700;
-          font-display: swap;
-          src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBimC3YU-Ck.woff2) format('woff2');
-          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
-            U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-      `}
-    />
-  );
-};

package/src/theme/Theme.tsx

@@ -1,64 +0,0 @@
-import merge from 'lodash/merge';
-import React, { PropsWithChildren } from 'react';
-import { css, ThemeProvider } from '@emotion/react';
-import styled from '@utils/style';
-import { createTheme, ThemeProvider as MuiThemeProvider, THEME_ID } from '@mui/material/styles';
-
-import { DeepPartial } from '../types';
-import { Fonts } from './Fonts';
-import { getResolvedTheme } from './getResolvedTheme';
-import { StiggTheme } from './types';
-import { useStiggContext } from '../hooks/useStiggContext';
-
-export type CustomizedTheme = DeepPartial<StiggTheme>;
-
-const CustomCssGlobal = styled.div<{ $customCss?: string }>`
-  ${({ $customCss }) =>
-    $customCss &&
-    css`
-      ${$customCss}
-    `}
-`;
-
-type SdkThemeProviderProps = {
-  componentTheme?: CustomizedTheme;
-};
-
-/*
-  This merge the theme from 3 places:
-  1. External theme that we got from the user in StiggProvider
-  2. Remote theme from api
-  3. Default theme
-*/
-export function useStiggTheme(remoteThemeOverride?: CustomizedTheme): StiggTheme {
-  const { theme: externalTheme } = useStiggContext();
-  const mergedTheme = merge(remoteThemeOverride, externalTheme);
-  const resolvedTheme = getResolvedTheme(mergedTheme);
-
-  return resolvedTheme;
-}
-
-const createMuiPalette = (theme: StiggTheme) => {
-  return {
-    primary: {
-      main: theme.palette.primary,
-    },
-  };
-};
-
-export const SdkThemeProvider: React.FC<PropsWithChildren<SdkThemeProviderProps>> = ({ children, componentTheme }) => {
-  const theme = useStiggTheme(componentTheme);
-  const muiPalette = createMuiPalette(theme);
-  const materialTheme = createTheme({ palette: muiPalette, stigg: theme });
-
-  return (
-    <MuiThemeProvider theme={{ [THEME_ID]: materialTheme }}>
-      <ThemeProvider theme={{ stigg: theme }}>
-        <CustomCssGlobal $customCss={theme.customCss}>
-          <Fonts externalFontUrl={theme.typography.fontFamilyUrl} />
-          {children}
-        </CustomCssGlobal>
-      </ThemeProvider>
-    </MuiThemeProvider>
-  );
-};

package/src/theme/emotion.d.ts

@@ -1,17 +0,0 @@
-import '@emotion/react';
-import { StiggTheme } from './types';
-
-declare module '@emotion/react' {
-  export interface Theme {
-    stigg: StiggTheme;
-  }
-}
-
-declare module '@mui/material/styles' {
-  interface ThemeOptions {
-    stigg: StiggTheme['stigg'];
-  }
-  interface Theme {
-    stigg: StiggTheme['stigg'];
-  }
-}

package/src/theme/getResolvedTheme.ts

@@ -1,135 +0,0 @@
-import Color from 'color';
-import merge from 'lodash/merge';
-import { HorizontalAlignment, StiggTheme } from './types';
-import { CustomizedTheme } from './Theme';
-
-export const flexLayoutMapper = (horizontalAlignment: HorizontalAlignment) => {
-  return {
-    left: 'flex-start',
-    center: 'center',
-    right: 'flex-end',
-  }[horizontalAlignment];
-};
-
-export const getResolvedTheme = (customizedTheme?: CustomizedTheme): StiggTheme => {
-  const primaryColor = Color(customizedTheme?.palette?.primary || '#327EEE');
-  const textColor = Color(customizedTheme?.palette?.text?.primary || '#001E6C');
-  const successColor = Color('#4CAF50');
-  const errorColor = Color('#f44336');
-  const warningColor = Color('#ff9800');
-  const infoColor = Color('#2196f3');
-  const neutralColor = Color('#9e9e9e');
-
-  const baseTheme: StiggTheme = {
-    palette: {
-      primary: primaryColor.hex(),
-      primaryDark: primaryColor.darken(0.3).hex(),
-      primaryLight: primaryColor.alpha(0.5).toString(),
-      backgroundPaper: '#FFFFFF',
-      backgroundHighlight: '#F5F6F9',
-      backgroundSection: primaryColor.alpha(0.1).toString(),
-      backgroundButton: primaryColor.alpha(0.08).toString(),
-      outlinedBorder: '#C4CBDD',
-      outlinedRestingBorder: primaryColor.alpha(0.5).toString(),
-      outlinedHoverBackground: primaryColor.lightness(95).hex(),
-      switchBorder: primaryColor.lighten(0.1).hex(),
-      switchFill: primaryColor.lighten(0.5).hex(),
-      switchHandle: primaryColor.hex(),
-      warning: '#ed6c02',
-      error: errorColor.hex(),
-      errorDark: errorColor.darken(0.3).hex(),
-      success: successColor.hex(),
-      successDark: successColor.darken(0.3).hex(),
-      white: '#FFFFFF',
-      text: {
-        primary: textColor.hex(),
-        secondary: textColor.alpha(0.75).toString(),
-        tertiary: textColor.alpha(0.5).toString(),
-        disabled: textColor.alpha(0.35).toString(),
-      },
-      statusChips: {
-        success: {
-          background: successColor.alpha(0.15).toString(),
-          text: successColor.darken(0.2).hex(),
-          border: 'transparent',
-        },
-        warning: {
-          background: warningColor.alpha(0.15).toString(),
-          text: warningColor.darken(0.2).hex(),
-          border: 'transparent',
-        },
-        error: {
-          background: errorColor.alpha(0.15).toString(),
-          text: errorColor.darken(0.1).hex(),
-          border: 'transparent',
-        },
-        info: {
-          background: infoColor.alpha(0.15).toString(),
-          text: infoColor.darken(0.2).hex(),
-          border: 'transparent',
-        },
-        neutral: {
-          background: neutralColor.alpha(0.15).toString(),
-          text: neutralColor.darken(0.2).hex(),
-          border: 'transparent',
-        },
-      },
-      progress: {
-        background: '#e0e0e0',
-        low: '#4caf50',
-        medium: '#ff9800',
-        high: '#f44336',
-      },
-    },
-    layout: {
-      planMinWidth: '330px',
-      planMaxWidth: '330px',
-      planMargin: '20px',
-      planPadding: '40px',
-      ctaAlignment: 'left',
-      headerAlignment: 'left',
-      descriptionAlignment: 'left',
-      descriptionMinHeight: '80px',
-      switchBottomSpacing: '40px',
-    },
-    shadows: {
-      light: '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12)',
-      popover:
-        '0px 4px 5px -2px rgba(0, 30, 108, 0.2), 0px 7px 10px 1px rgba(0, 30, 108, 0.14), 0px 2px 16px 1px rgba(0, 30, 108, 0.12)',
-    },
-    border: {
-      radius: '10px',
-    },
-    typography: {
-      fontFamily: 'custom-font, DM Sans, sans-serif',
-      h1: {
-        fontSize: '32px',
-        fontWeight: 'bold',
-        semanticElement: 'h1',
-      },
-      h2: {
-        fontSize: '24px',
-        fontWeight: 'normal',
-        semanticElement: 'h2',
-      },
-      h3: {
-        fontSize: '16px',
-        fontWeight: 'normal',
-        semanticElement: 'h3',
-      },
-      body: {
-        fontSize: '14px',
-        fontWeight: 'normal',
-        semanticElement: 'p',
-      },
-      caption: {
-        fontSize: '12px',
-        fontWeight: 'normal',
-        semanticElement: 'span',
-      },
-    },
-    customCss: '',
-  };
-
-  return merge(baseTheme, customizedTheme);
-};

package/src/theme/types.ts

@@ -1,85 +0,0 @@
-export type HorizontalAlignment = 'left' | 'center' | 'right';
-export type TextAlignment = 'left' | 'center' | 'right';
-export type FontVariant = {
-  fontSize: string;
-  fontWeight: 'bold' | 'normal';
-  semanticElement: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
-};
-export type StatusChipVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral';
-
-export type StatusChipColors = {
-  background: string;
-  text: string;
-  border: string;
-};
-
-export type StiggTheme = {
-  palette: {
-    primary: string;
-    primaryDark: string;
-    primaryLight: string;
-    backgroundPaper: string;
-    backgroundHighlight: string;
-    backgroundSection: string;
-    backgroundButton: string;
-    outlinedBorder: string;
-    outlinedRestingBorder: string;
-    outlinedHoverBackground: string;
-    switchBorder: string;
-    switchFill: string;
-    switchHandle: string;
-    warning: string;
-    error: string;
-    errorDark: string;
-    white: string;
-    success: string;
-    successDark: string;
-    text: {
-      primary: string;
-      secondary: string;
-      tertiary: string;
-      disabled: string;
-    };
-    statusChips: {
-      success: StatusChipColors;
-      warning: StatusChipColors;
-      error: StatusChipColors;
-      info: StatusChipColors;
-      neutral: StatusChipColors;
-    };
-    progress: {
-      background: string;
-      low: string;
-      medium: string;
-      high: string;
-    };
-  };
-  layout: {
-    planMinWidth: string;
-    planMaxWidth: string;
-    planMargin: string;
-    planPadding: string;
-    ctaAlignment: HorizontalAlignment;
-    headerAlignment: HorizontalAlignment;
-    descriptionAlignment: TextAlignment;
-    descriptionMinHeight: string;
-    switchBottomSpacing: string;
-  };
-  shadows: {
-    light: string;
-    popover: string;
-  };
-  border: {
-    radius: string;
-  };
-  typography: {
-    fontFamily: string;
-    fontFamilyUrl?: string;
-    h1: FontVariant;
-    h2: FontVariant;
-    h3: FontVariant;
-    body: FontVariant;
-    caption: FontVariant;
-  };
-  customCss?: string;
-};

package/src/types.ts

@@ -1,22 +0,0 @@
-import { BillingPeriod } from '@stigg/js-client-sdk';
-
-export type DeepPartial<T> = T extends object
-  ? {
-      [P in keyof T]?: DeepPartial<T[P]>;
-    }
-  : T;
-
-export type DowngradeChangeVariables = {
-  addonRefIds?: string;
-  billingPeriod?: BillingPeriod;
-  downgradePlanRefId: string;
-};
-
-export type BillingPeriodChangeVariables = {
-  billingPeriod?: BillingPeriod;
-};
-
-export type UnitAmountChangeVariables = {
-  newUnitAmount?: number;
-  featureId: string;
-};

package/src/utils/styledUtils.ts

@@ -1,64 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import baseStyled from '@emotion/styled';
-import React from 'react';
-
-/**
- * Configuration that filters out props starting with '$' to prevent
- * them from being forwarded to DOM elements, eliminating React warnings
- * about invalid HTML attributes.
- */
-const styledConfig = {
-  shouldForwardProp: (prop: string) => !prop.startsWith('$'),
-};
-
-/**
- * Wrapper around @emotion/styled that automatically filters out props starting with '$'.
- * Use this exactly like the regular styled but without worrying about prop forwarding.
- *
- * @example
- * import styled from '../utils/styledUtils';
- *
- * const MyComponent = styled.div<{ $active: boolean }>`
- *   color: ${({ $active }) => $active ? 'blue' : 'gray'};
- * `;
- *
- * const MyButton = styled(Button)<{ $variant: string }>`
- *   background: ${({ $variant }) => $variant === 'primary' ? 'blue' : 'gray'};
- * `;
- */
-const styled = <T extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(component: T) =>
-  baseStyled(component as any, styledConfig);
-
-// Add HTML element shortcuts (styled.div, styled.span, etc.)
-// This is necessary because the function approach above doesn't include these shortcuts
-const htmlElements = [
-  'div',
-  'span',
-  'button',
-  'input',
-  'form',
-  'p',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'a',
-  'img',
-  'ul',
-  'ol',
-  'li',
-  'table',
-  'thead',
-  'tbody',
-  'tr',
-  'td',
-  'th',
-] as const;
-
-htmlElements.forEach((element) => {
-  (styled as any)[element] = baseStyled(element, styledConfig);
-});
-
-export default styled as typeof baseStyled;