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

package/src/theme/Fonts.tsx

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

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

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

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

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

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

@@ -0,0 +1,64 @@
+// 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;