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

package/src/components/common/LongText.tsx

@@ -1,100 +0,0 @@
-import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
-import styled from '@utils/style';
-import { css } from '@emotion/react';
-import { TooltipProps } from '@mui/material/Tooltip';
-import { InformationTooltip } from './InformationTooltip';
-import { Typography, TypographyProps } from './Typography';
-
-const StyledText = styled(Typography)<{ $maxLines: number; $wordBreak?: boolean; $display: string; $bold?: boolean }>`
-  display: ${({ $display }) => $display};
-  -webkit-line-clamp: ${({ $maxLines }) => $maxLines};
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: normal;
-  ${({ $wordBreak }) =>
-    $wordBreak &&
-    css`
-      word-break: break-word;
-    `}
-
-  ${({ $bold }) =>
-    $bold &&
-    css`
-      font-weight: bold;
-    `}
-`;
-
-function checkTextClamped(element: HTMLDivElement) {
-  return element && (element.clientHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth);
-}
-
-export const LongText = ({
-  leaveDelay,
-  children,
-  variant,
-  color,
-  maxLines = 1,
-  wordBreak,
-  bold,
-  tooltipPlacement = 'top',
-  className,
-  display = '-webkit-box',
-  style,
-  'data-testid': dataTestId,
-}: {
-  children: ReactNode;
-  leaveDelay?: number;
-  variant?: TypographyProps['variant'];
-  color?: TypographyProps['color'];
-  maxLines?: number;
-  wordBreak?: boolean;
-  bold?: boolean;
-  tooltipPlacement?: TooltipProps['placement'];
-  className?: string;
-  display?: string;
-  style?: CSSProperties;
-  ['data-testid']?: string;
-}) => {
-  const [isTextClamped, setIsTextClamped] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-  const content = (
-    <StyledText
-      ref={ref}
-      variant={variant}
-      color={color}
-      $maxLines={maxLines}
-      $wordBreak={wordBreak}
-      $bold={bold}
-      className={className}
-      $display={display}
-      style={style}
-      data-testid={dataTestId}>
-      {children}
-    </StyledText>
-  );
-
-  // Trigger recalculate of text clamped since ref is not always exists on first render
-  useEffect(() => {
-    if (ref?.current) {
-      const textClamped = checkTextClamped(ref.current);
-      setIsTextClamped(textClamped);
-    }
-  }, [ref]);
-
-  const textClamped = ref?.current && checkTextClamped(ref.current);
-  return (
-    <span>
-      {isTextClamped || textClamped ? (
-        <InformationTooltip
-          placement={tooltipPlacement}
-          leaveDelay={leaveDelay}
-          title={<Typography variant="body1">{children}</Typography>}>
-          {content}
-        </InformationTooltip>
-      ) : (
-        content
-      )}
-    </span>
-  );
-};

package/src/components/common/PoweredByStigg.tsx

@@ -1,59 +0,0 @@
-import styled from '@utils/style';
-import PoweredByStiggSvg from '../../assets/powered-by-stigg.svg';
-
-export const STIGG_WATERMARK_CLASSNAME = 'stigg-watermark';
-
-export type PoweredByStiggSources = 'paywall' | 'customer_portal' | 'checkout' | 'grant_list' | 'credit_usage_chart';
-
-const PoweredByStiggThemedSvg = styled(PoweredByStiggSvg)`
-  * {
-    fill: ${({ theme }) => theme.stigg.palette.text.secondary};
-  }
-`;
-
-type PoweredByStiggProps = {
-  source: PoweredByStiggSources;
-  showWatermark?: boolean;
-  style?: React.CSSProperties;
-  align?: 'center' | 'end';
-  smallScreenAlign?: 'center' | 'end';
-};
-
-const StyledPoweredByStigg = styled.div<{ $alignSelf?: string; $smallScreenAlign?: string }>`
-  align-self: ${({ $alignSelf }) => $alignSelf || 'unset'};
-
-  @media (max-width: 1040px) {
-    ${({ $smallScreenAlign }) => $smallScreenAlign && `align-self: ${$smallScreenAlign};`}
-  }
-`;
-
-export function PoweredByStigg({
-  source,
-  showWatermark,
-  align,
-  smallScreenAlign = 'center',
-  style = {},
-}: PoweredByStiggProps) {
-  if (!showWatermark) {
-    return null;
-  }
-
-  const onWatermarkClick = () => {
-    const sourceDomain = window.location.hostname.replace('www.', '');
-    window.open(
-      `https://www.stigg.io/?utm_source=${sourceDomain}&utm_medium=referral&utm_campaign=${source}`,
-      '_blank',
-    );
-  };
-
-  return (
-    <StyledPoweredByStigg
-      $alignSelf={align}
-      $smallScreenAlign={smallScreenAlign}
-      className={STIGG_WATERMARK_CLASSNAME}
-      style={{ cursor: 'pointer', ...style }}
-      onClick={onWatermarkClick}>
-      <PoweredByStiggThemedSvg />
-    </StyledPoweredByStigg>
-  );
-}

package/src/components/common/ProgressBar.tsx

@@ -1,41 +0,0 @@
-import styled from '@utils/style';
-import { StiggTheme } from '@/theme/types';
-
-const getProgressColor = (percentage: number, theme: StiggTheme) => {
-  if (percentage >= 100) {
-    return theme.palette.progress.high;
-  } else if (percentage >= 75) {
-    return theme.palette.progress.medium;
-  } else {
-    return theme.palette.progress.low;
-  }
-};
-
-const ProgressBarContainer = styled.div`
-  width: 100%;
-  height: 8px;
-  background-color: ${({ theme }) => theme.stigg.palette.progress.background};
-  border-radius: 4px;
-  overflow: hidden;
-`;
-
-const ProgressBarFill = styled.div<{ percentage: number }>`
-  height: 100%;
-  width: ${({ percentage }) => Math.max(0, Math.min(100, percentage))}%;
-  background-color: ${({ theme, percentage }) => getProgressColor(percentage, theme.stigg)};
-  border-radius: 4px;
-  transition: width 0.3s ease-in-out;
-`;
-
-export interface ProgressBarProps {
-  percentage: number;
-  className?: string;
-}
-
-export function ProgressBar({ percentage, className }: ProgressBarProps) {
-  return (
-    <ProgressBarContainer className={className}>
-      <ProgressBarFill percentage={percentage} />
-    </ProgressBarContainer>
-  );
-}

package/src/components/common/StatusChip.tsx

@@ -1,29 +0,0 @@
-import styled from '@utils/style';
-import { Chip, ChipProps } from '@mui/material';
-import { StatusChipVariant } from '../../theme/types';
-
-interface StatusChipProps extends Omit<ChipProps, 'variant' | 'color'> {
-  variant: StatusChipVariant;
-  label: string;
-}
-
-const StyledChip = styled(Chip)<{ $variant: StatusChipVariant }>`
-  font-size: 0.75rem;
-  height: 24px;
-  border-radius: 4px;
-  border: none;
-  background-color: ${({ theme, $variant }) => theme?.stigg?.palette?.statusChips?.[$variant]?.background};
-  color: ${({ theme, $variant }) => theme?.stigg?.palette?.statusChips?.[$variant]?.text};
-`;
-
-/**
- * StatusChip component for displaying status indicators with consistent theming
- *
- * @param variant - The status variant (success, warning, error, info, neutral)
- * @param label - The text to display in the chip
- * @param className - Optional CSS class name
- * @param size - Size of the chip (defaults to 'small')
- */
-export function StatusChip({ variant, label, className, size = 'small', ...props }: StatusChipProps) {
-  return <StyledChip label={label} size={size} $variant={variant} className={className} {...props} />;
-}

package/src/components/common/TiersSelectContainer.tsx

@@ -1,39 +0,0 @@
-import { PriceTierFragment, TiersMode } from '@stigg/js-client-sdk';
-import styled from '@utils/style';
-import { hasTierWithUnitPrice } from '../utils/priceTierUtils';
-import { Typography } from './Typography';
-import { VolumePerUnitInput } from './VolumePerUnitInput';
-import { VolumeBulkSelect } from './VolumeBulkSelect';
-import { Box } from '@mui/material';
-
-export type TiersSelectContainerProps = {
-  componentId: string;
-  tiers?: PriceTierFragment[] | null;
-  tierUnits?: string;
-  tiersMode?: TiersMode | null;
-  errorMessage?: string;
-  handleChange: (quantity: number) => void;
-  value: number;
-  width?: number | string;
-};
-
-const TiersSelectLayout = styled(Typography)`
-  min-height: 46px;
-`;
-
-export function TiersSelectContainer(props: TiersSelectContainerProps) {
-  const { tiers, errorMessage } = props;
-
-  return (
-    <>
-      <Box display="flex" flexDirection="column" justifyContent="center" style={{ width: '100%' }}>
-        <TiersSelectLayout as="div" className="stigg-price-tier-select">
-          {hasTierWithUnitPrice(tiers) ? <VolumePerUnitInput {...props} /> : <VolumeBulkSelect {...props} />}
-        </TiersSelectLayout>
-        <Typography style={{ margin: '4px' }} variant="caption" color="error">
-          {errorMessage}
-        </Typography>
-      </Box>
-    </>
-  );
-}

package/src/components/common/Typography.tsx

@@ -1,117 +0,0 @@
-import React, { CSSProperties, forwardRef } from 'react';
-import styled from '@utils/style';
-import { Theme, useTheme } from '@emotion/react';
-
-type Colors =
-  | 'primary'
-  | 'primary.main'
-  | 'primary.main.light'
-  | 'secondary'
-  | 'tertiary'
-  | 'disabled'
-  | 'white'
-  | 'warning'
-  | 'error';
-
-export type TypographyProps = {
-  children: React.ReactNode;
-  variant?: 'h1' | 'h3' | 'h6' | 'body1' | 'caption';
-  style?: CSSProperties;
-  color?: Colors;
-  overrideColor?: string;
-  className?: string;
-  bold?: boolean;
-  as?: 'div' | 'p' | 'span';
-  lineHeight?: string;
-};
-
-function getColor(theme: Theme, colorName: Colors): string {
-  const palette = theme.stigg.palette;
-
-  switch (colorName) {
-    case 'white':
-      return 'white';
-    case 'primary.main':
-      return palette.primary;
-    case 'primary.main.light':
-      return palette.primaryLight;
-    case 'warning':
-      return palette.warning;
-    case 'error':
-      return palette.error;
-    default:
-      return palette.text[colorName] || palette.text.primary;
-  }
-}
-
-function getTypographyStyle(theme: Theme, variant: TypographyProps['variant'] = 'body1') {
-  const typography = theme.stigg.typography;
-
-  const variantMap = {
-    h1: typography.h1,
-    h3: typography.h2, // h3 variant uses h2 theme
-    h6: typography.h3, // h6 variant uses h3 theme
-    body1: typography.body,
-    caption: typography.caption,
-  };
-
-  return variantMap[variant] || variantMap.body1;
-}
-
-const StyledText = styled.div<{
-  $isInline: boolean;
-  $variant: TypographyProps['variant'];
-  $bold: boolean;
-  $color: string;
-  $lineHeight?: string;
-}>`
-  margin: 0;
-  ${({ $isInline }) => $isInline && `display: inline`};
-
-  /* Apply typography styles from theme */
-  font-family: ${({ theme }) => theme.stigg.typography.fontFamily};
-  color: ${({ $color }) => $color};
-  font-weight: ${({ $bold, theme, $variant }) => {
-    return $bold ? 'bold' : getTypographyStyle(theme, $variant).fontWeight;
-  }};
-  font-size: ${({ theme, $variant }) => getTypographyStyle(theme, $variant).fontSize};
-  ${({ $lineHeight }) => $lineHeight && `line-height: ${$lineHeight};`}
-`;
-
-export const Typography = forwardRef<HTMLDivElement, TypographyProps>((props, ref) => {
-  const {
-    children,
-    style,
-    variant = 'body1',
-    color = 'primary',
-    overrideColor,
-    bold = false,
-    as,
-    className,
-    lineHeight,
-    ...rest
-  } = props;
-  const theme = useTheme();
-
-  const typographyStyle = getTypographyStyle(theme, variant);
-  const elementType = as || typographyStyle.semanticElement;
-  const finalColor = overrideColor || getColor(theme, color);
-
-  return (
-    <StyledText
-      as={elementType}
-      ref={ref}
-      {...rest}
-      className={className}
-      style={style}
-      $variant={variant}
-      $bold={bold}
-      $color={finalColor}
-      $lineHeight={lineHeight}
-      $isInline={elementType === 'span'}>
-      {children}
-    </StyledText>
-  );
-});
-
-Typography.displayName = 'Typography';

package/src/components/common/VolumeBulkSelect.tsx

@@ -1,74 +0,0 @@
-import { PriceTierFragment } from '@stigg/js-client-sdk';
-import styled from '@utils/style';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import { map } from 'lodash';
-import { Typography } from './Typography';
-import { TiersSelectContainerProps } from './TiersSelectContainer';
-import { formatNumber } from '../utils/formatNumber';
-
-const TierSelect = styled(Select)`
-  border-radius: 10px;
-  min-height: 42px;
-  min-width: 120px;
-
-  &:hover .MuiOutlinedInput-notchedOutline {
-    border-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
-  }
-`;
-
-const TierInput = styled(OutlinedInput)`
-  & .MuiInputBase-input {
-    padding: 10px 12px;
-  }
-
-  &.Mui-focused .MuiOutlinedInput-notchedOutline {
-    border-color: ${({ theme }) => theme.stigg.palette.primary} !important;
-  }
-`;
-
-export function VolumeBulkSelect({
-  value,
-  componentId,
-  tierUnits,
-  tiers,
-  handleChange,
-  errorMessage,
-}: Pick<TiersSelectContainerProps, 'value' | 'componentId' | 'tiers' | 'tierUnits'> & {
-  errorMessage?: string;
-  handleChange: (quantity: number) => void;
-}) {
-  if (!tiers) {
-    return null;
-  }
-
-  return (
-    <TierSelect
-      value={value.toString()}
-      fullWidth
-      error={!!errorMessage}
-      onChange={(event) => {
-        const quantity = event?.target?.value ? Number(event?.target?.value) : null;
-        if (quantity) {
-          handleChange(quantity);
-        }
-      }}
-      id={componentId}
-      input={<TierInput />}
-      MenuProps={{
-        MenuListProps: { disablePadding: true },
-        PaperProps: {
-          sx: { marginTop: '4px', borderRadius: '10px' },
-        },
-      }}>
-      {map(tiers, (tier: PriceTierFragment) => (
-        <MenuItem className="stigg-price-tier-menu-item-text" key={tier.upTo} value={tier.upTo?.toString()}>
-          <Typography variant="body1" color="primary" style={{ lineHeight: 'unset' }}>
-            {formatNumber(tier.upTo)} {tierUnits}
-          </Typography>
-        </MenuItem>
-      ))}
-    </TierSelect>
-  );
-}

package/src/components/common/VolumePerUnitInput.tsx

@@ -1,42 +0,0 @@
-import InputAdornment from '@mui/material/InputAdornment';
-import { Typography } from './Typography';
-import { InputField } from '../checkout/components';
-import { TiersSelectContainerProps } from './TiersSelectContainer';
-import { ON_WHEEL_BLUR } from '../utils/onWheelBlur';
-
-export function VolumePerUnitInput({
-  width,
-  tierUnits,
-  value,
-  handleChange,
-  errorMessage,
-}: Pick<TiersSelectContainerProps, 'width' | 'tierUnits' | 'value'> & {
-  errorMessage?: string;
-  handleChange: (quantity: number) => void;
-}) {
-  return (
-    <InputField
-      type="number"
-      onWheel={ON_WHEEL_BLUR}
-      fullWidth
-      error={!!errorMessage}
-      sx={{ minHeight: '46px', width }}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment position="end">
-            <Typography variant="body1" color="primary">
-              {tierUnits}
-            </Typography>
-          </InputAdornment>
-        ),
-      }}
-      value={value}
-      onChange={(event) => {
-        const quantity = event?.target?.value ? Number(event?.target?.value) : null;
-        if (quantity) {
-          handleChange(quantity);
-        }
-      }}
-    />
-  );
-}

package/src/components/common/chart/chartjs.helpers.ts

@@ -1,17 +0,0 @@
-import { Chart, Plugin } from 'chart.js';
-
-// This is a workaround for data-labels plugin which runs the text formatter
-// function before the bar element is drawn, so we don't have the width yet.
-// So this small plugin update the chart before draw in order to re-run the formatter
-export const redrawBeforeFirstDrawPlugin: Plugin = {
-  id: 'redrawBeforeFirstDrawPlugin',
-
-  beforeDraw(chart: Chart) {
-    // @ts-ignore
-    if (!chart.$rendered) {
-      // @ts-ignore
-      chart.$rendered = true;
-      chart.update('none');
-    }
-  },
-};

package/src/components/common/chart/chartjs.plugins.ts

@@ -1,34 +0,0 @@
-import {
-  BarElement,
-  CategoryScale,
-  Chart as ChartJS,
-  Legend,
-  LinearScale,
-  Title,
-  Tooltip,
-  PointElement,
-  LineElement,
-  Filler,
-  ArcElement,
-} from 'chart.js';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import annotationPlugin from 'chartjs-plugin-annotation';
-import Gradient from 'chartjs-plugin-gradient';
-
-const PLUGINS = [
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  ChartDataLabels,
-  PointElement,
-  LineElement,
-  Filler,
-  ArcElement,
-  annotationPlugin,
-  Gradient,
-];
-
-ChartJS.register(...PLUGINS);

package/src/components/common/chart/chartjs.theme.ts

@@ -1,41 +0,0 @@
-import { StiggTheme } from '../../../theme/types';
-
-export const getOtherColor = (theme: StiggTheme) => theme.palette.backgroundSection;
-
-export const getLineColor = (theme: StiggTheme) => theme.palette.outlinedBorder;
-
-export const opacityColor = (color: string, opacity = 1) => {
-  const hex = Math.round(opacity * 255)
-    .toString(16)
-    .padStart(2, '0');
-  return `${color}${hex}`;
-};
-
-export const LEGEND_BOX_SIZE = 12;
-
-export const getLabelColor = (theme: StiggTheme) => theme.palette.text.secondary;
-
-export const getLabelFont = (theme: StiggTheme) => ({
-  family: theme.typography.fontFamily,
-  size: parseInt(theme.typography.body.fontSize),
-});
-
-export const getAxisTitleColor = (theme: StiggTheme) => theme.palette.text.primary;
-
-export const getAxisTitleFont = (theme: StiggTheme) => ({
-  family: theme.typography.fontFamily,
-  size: parseInt(theme.typography.body.fontSize),
-});
-
-export const getAxisTickColor = (theme: StiggTheme) => theme.palette.text.secondary;
-
-export const getAxisColor = (theme: StiggTheme) => theme.palette.outlinedBorder;
-
-export const getAxisTickFont = (theme: StiggTheme) => ({
-  family: theme.typography.fontFamily,
-  size: parseInt(theme.typography.body.fontSize),
-});
-
-export const GRID_BORDER_DASH = [8, 8];
-
-export const AXIS_TITLE_SPACING = 15;