@codecademy/gamut 68.0.2-alpha.f8c3b5.0 → 68.1.0-alpha.46f13d.0

package/dist/BarChart/utils/hooks.js

@@ -1,291 +0,0 @@
-import { useColorModes } from '@codecademy/gamut-styles';
-import { getContrast } from 'polished';
-import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { BarChartContext, defaultStyleConfig } from '../BarChartProvider';
-import { calculatePositionPercent, getLabel, sortBars } from './index';
-/**
- * Hook that calculates label positions for a given range and count
- * Returns an array of { value, positionPercent } objects
- */
-export const useLabelPositions = ({
-  min,
-  max,
-  count
-}) => {
-  return useMemo(() => Array.from({
-    length: count
-  }, (_, i) => {
-    const value = getLabel({
-      labelCount: count,
-      labelIndex: i,
-      min,
-      max
-    });
-    const positionPercent = calculatePositionPercent({
-      value,
-      min,
-      max
-    });
-    return {
-      value,
-      positionPercent
-    };
-  }), [min, max, count]);
-};
-export const useBarChartContext = () => {
-  return useContext(BarChartContext);
-};
-const MIN_RANGE = 0;
-export const useBarChart = ({
-  maxRange,
-  xScale,
-  unit = '',
-  styleConfig,
-  animate = false,
-  barCount = 0,
-  translations
-}) => {
-  const [widestLeftLabelWidth, setWidestLeftLabelWidthState] = useState(null);
-  const [widestRightLabelWidth, setWidestRightLabelWidthState] = useState(null);
-  const [isMeasuring, setIsMeasuring] = useState(true);
-  const measuredCountRef = useRef(0);
-  const maxLeftWidthRef = useRef(0);
-  const maxRightWidthRef = useRef(0);
-  const setWidestLeftLabelWidth = useCallback(width => {
-    if (width > maxLeftWidthRef.current) {
-      maxLeftWidthRef.current = width;
-      setWidestLeftLabelWidthState(width);
-    }
-    measuredCountRef.current += 1;
-    // Only stop measuring when we've received measurements from all bars
-    if (measuredCountRef.current >= barCount * 2 && barCount > 0) {
-      setIsMeasuring(false);
-    }
-  }, [barCount]);
-  const setWidestRightLabelWidth = useCallback(width => {
-    if (width > maxRightWidthRef.current) {
-      maxRightWidthRef.current = width;
-      setWidestRightLabelWidthState(width);
-    }
-    measuredCountRef.current += 1;
-    // Only stop measuring when we've received measurements from all bars (left + right)
-    if (measuredCountRef.current >= barCount * 2 && barCount > 0) {
-      setIsMeasuring(false);
-    }
-  }, [barCount]);
-  useEffect(() => {
-    if (barCount > 0) {
-      measuredCountRef.current = 0;
-      maxLeftWidthRef.current = 0;
-      maxRightWidthRef.current = 0;
-      setIsMeasuring(true);
-    }
-  }, [barCount]);
-  return useMemo(() => ({
-    minRange: MIN_RANGE,
-    maxRange,
-    xScale: xScale ?? Math.ceil(maxRange / 5),
-    unit,
-    styleConfig: {
-      ...defaultStyleConfig,
-      ...styleConfig
-    },
-    animate,
-    widestLeftLabelWidth,
-    setWidestLeftLabelWidth,
-    widestRightLabelWidth,
-    setWidestRightLabelWidth,
-    isMeasuring,
-    translations
-  }), [maxRange, xScale, unit, styleConfig, animate, widestLeftLabelWidth, setWidestLeftLabelWidth, widestRightLabelWidth, setWidestRightLabelWidth, isMeasuring, translations]);
-};
-
-/**
- * Checks if a color is a color alias (exists in the color mode shape)
- */
-const isColorAlias = (mode, color) => Object.keys(mode).includes(color);
-
-/**
- * Hook that returns a function to get the highest contrast border color
- * (white or navy-900) for a given background color.
- *
- * Similar to the Background component, this resolves color aliases and
- * compares contrast ratios to determine the best border color.
- *
- * @returns A function that takes a background color and returns either 'white' or 'navy-900'
- */
-export const useBarBorderColor = () => {
-  const [, activeColors,, getColorValue] = useColorModes();
-  const getBorderColor = useCallback(bg => {
-    /** If a color alias was used then look up the true color key from the active mode */
-    const trueColor = isColorAlias(activeColors, bg) ? activeColors[bg] : bg;
-    const backgroundColor = getColorValue(trueColor);
-    const whiteContrast = getContrast(getColorValue('white'), backgroundColor);
-    const navyContrast = getContrast(getColorValue('navy-900'), backgroundColor);
-    return whiteContrast > navyContrast ? 'white' : 'navy-900';
-  }, [activeColors, getColorValue]);
-  return getBorderColor;
-};
-
-/**
- * Generic hook for measuring element width and reporting to a callback.
- * Used internally by useMeasureLeftLabelWidth and useMeasureRightLabelWidth.
- */
-const useMeasureWidth = ({
-  ref,
-  onMeasure,
-  isMeasuring
-}) => {
-  const hasMeasuredRef = useRef(false);
-
-  // Reset measurement flag when a new measurement cycle starts
-  const prevIsMeasuringRef = useRef(isMeasuring);
-  useEffect(() => {
-    if (isMeasuring && !prevIsMeasuringRef.current) {
-      // New measurement cycle started
-      hasMeasuredRef.current = false;
-    }
-    prevIsMeasuringRef.current = isMeasuring;
-  }, [isMeasuring]);
-  useLayoutEffect(() => {
-    if (!ref.current || hasMeasuredRef.current || !isMeasuring) {
-      return;
-    }
-    const element = ref.current;
-    const width = element?.getBoundingClientRect()?.width;
-    if (width > 0) {
-      onMeasure(width);
-      hasMeasuredRef.current = true;
-    }
-  }, [ref, onMeasure, isMeasuring]);
-};
-export const useMeasureLeftLabelWidth = ({
-  ref
-}) => {
-  const {
-    setWidestLeftLabelWidth,
-    isMeasuring
-  } = useBarChartContext();
-  useMeasureWidth({
-    ref,
-    onMeasure: setWidestLeftLabelWidth,
-    isMeasuring
-  });
-};
-export const useMeasureRightLabelWidth = ({
-  ref
-}) => {
-  const {
-    setWidestRightLabelWidth,
-    isMeasuring
-  } = useBarChartContext();
-  useMeasureWidth({
-    ref,
-    onMeasure: setWidestRightLabelWidth,
-    isMeasuring
-  });
-};
-/**
- * Hook that manages bar sorting state and provides memoized sorted bars.
- * Supports predefined sort options (via string literals) and custom sort functions.
- * Only returns selectProps if sortFns is provided.
- */
-export const useBarChartSort = ({
-  bars,
-  sortFns,
-  translations
-}) => {
-  // Build options map and custom sort map from sortFns array
-  const {
-    allSortOptions,
-    customSortMap,
-    defaultSortValue
-  } = useMemo(() => {
-    if (!sortFns || sortFns.length === 0) {
-      return {
-        allSortOptions: null,
-        customSortMap: new Map(),
-        defaultSortValue: 'none'
-      };
-    }
-    const options = {};
-    const customMap = new Map();
-    const availableValues = [];
-    sortFns.forEach(item => {
-      if (typeof item === 'string') {
-        if (item === 'alphabetically') {
-          options['label-asc'] = translations.sortOptions.labelAsc;
-          options['label-desc'] = translations.sortOptions.labelDesc;
-          availableValues.push('label-asc', 'label-desc');
-        } else if (item === 'numerically') {
-          options['value-asc'] = translations.sortOptions.valueAsc;
-          options['value-desc'] = translations.sortOptions.valueDesc;
-          availableValues.push('value-asc', 'value-desc');
-        } else if (item === 'none') {
-          options.none = translations.sortOptions.none;
-          availableValues.push('none');
-        }
-      } else {
-        // CustomSortOption
-        options[item.value] = item.label;
-        customMap.set(item.value, item.sortFn);
-        availableValues.push(item.value);
-      }
-    });
-
-    // Default to "none" if available, otherwise first option
-    const defaultVal = availableValues.includes('none') ? 'none' : availableValues[0] || 'none';
-    return {
-      allSortOptions: options,
-      customSortMap: customMap,
-      defaultSortValue: defaultVal
-    };
-  }, [sortFns, translations]);
-  const [sortValue, setSortValue] = useState(defaultSortValue);
-
-  // Update sortValue when defaultSortValue changes (e.g., when sortFns changes)
-  useEffect(() => {
-    setSortValue(defaultSortValue);
-  }, [defaultSortValue]);
-  const sortedBars = useMemo(() => {
-    // Check if current selection is a custom sort function
-    const customSortFn = customSortMap.get(sortValue);
-    if (customSortFn) {
-      return customSortFn([...bars]);
-    }
-
-    // Otherwise use predefined sort options
-    if (sortValue === 'none') {
-      return bars;
-    }
-    const [sortBy, order] = sortValue.split('-');
-    const sortByValue = sortBy;
-    const orderValue = order === 'desc' ? 'descending' : 'ascending';
-    return sortBars({
-      bars: bars,
-      sortBy: sortByValue,
-      order: orderValue
-    });
-  }, [bars, sortValue, customSortMap]);
-  const onSortChange = useCallback(value => {
-    setSortValue(value);
-  }, []);
-  const selectProps = useMemo(() => {
-    if (!allSortOptions) {
-      return null;
-    }
-    return {
-      options: allSortOptions,
-      value: sortValue,
-      onChange: e => {
-        onSortChange(e.target.value);
-      }
-    };
-  }, [sortValue, onSortChange, allSortOptions]);
-  return {
-    sortedBars,
-    sortValue,
-    onSortChange,
-    selectProps
-  };
-};

package/dist/BarChart/utils/index.d.ts

@@ -1,100 +0,0 @@
-import { BarChartTranslations } from '../shared/translations';
-import { BarChartRange, BarChartUnit, BarProps } from '../shared/types';
-export declare const numDigits: ({ num }: {
-    num: number;
-}) => number;
-export declare const columnBaseSize: ({ experience }: {
-    experience?: number | undefined;
-}) => {
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-};
-export declare const calculatePercent: ({ value, total, }: {
-    value: number;
-    total: number;
-}) => number;
-export declare const calculateBarWidth: ({ value, minRange, maxRange, }: {
-    value: number;
-} & BarChartRange) => number;
-/**
- * Calculate tick spacing and nice minimum and maximum data points on the axis.
- */
-export declare const calculateTicksAndRange: ({ maxTicks, min, max, }: {
-    maxTicks: number;
-} & {
-    min: BarChartRange['minRange'];
-    max: BarChartRange['maxRange'];
-}) => [number, number, number];
-/**
- * Returns a "nice" number approximately equal to range
- * Rounds the number if round = true
- * Takes the ceiling if round = false.
- * A nice number is a simple decimal number, for example if a number is 1234, a nice number would be 1000 or 2000.
- */
-export declare const niceNum: ({ range, roundDown, }: {
-    range: number;
-    roundDown: boolean;
-}) => number;
-export declare const getPercentDiff: ({ v1, v2 }: {
-    v1: number;
-    v2: number;
-}) => number;
-export declare const formatNumberUS: ({ num, locale, }: {
-    num: number;
-    locale?: string | undefined;
-}) => string;
-/**
- * Formats a numeric value with optional unit for bar chart labels.
- */
-export declare const formatValueWithUnit: ({ value, unit, locale, }: {
-    value: number;
-    unit: string;
-    locale?: string | undefined;
-}) => string;
-export declare const formatNumberUSCompact: ({ num, locale, }: {
-    num: number;
-    locale?: string | undefined;
-}) => string;
-/**
- * Sort bars based on sortBy and order configuration
- */
-export declare const sortBars: <T extends BarProps>({ bars, sortBy, order, }: {
-    bars: T[];
-    sortBy: 'label' | 'value' | 'none';
-    order: 'ascending' | 'descending';
-}) => T[];
-/**
- * Generates an accessible summary of the bar values for aria-label / screen reader.
- * When translations.accessibility keys are functions, they are called with scoped
- * context (values, label, unit, locale) and their return value is used as the full summary.
- */
-export declare const getValuesSummary: ({ isInteractive, seriesOneValue, seriesTwoValue, unit, yLabel, translations, }: Pick<BarProps, "yLabel" | "seriesOneValue" | "seriesTwoValue"> & Required<Pick<BarChartUnit, "unit">> & {
-    isInteractive: boolean;
-    translations: BarChartTranslations;
-}) => string;
-/**
- * Calculates the value for a given label position
- */
-export declare const getLabel: ({ labelCount, labelIndex, min, max, }: {
-    labelCount: number;
-    labelIndex: number;
-} & {
-    min: BarChartRange['minRange'];
-    max: BarChartRange['maxRange'];
-}) => number;
-/**
- * Calculates the percentage position for a given value within a range
- * Returns a value between 0 and 100 representing the position percentage
- */
-export declare const calculatePositionPercent: ({ value, min, max, }: {
-    value: number;
-} & {
-    min: BarChartRange['minRange'];
-    max: BarChartRange['maxRange'];
-}) => number;
-/**
- * Generates a stable key for a bar row (for React list keys).
- */
-export declare const getBarRowKey: (bar: Pick<BarProps, 'yLabel' | 'seriesOneValue' | 'seriesTwoValue'>, index: number) => string;

package/dist/BarChart/utils/index.js

@@ -1,224 +0,0 @@
-export const numDigits = ({
-  num
-}) => {
-  return Math.max(Math.floor(Math.log10(Math.abs(num))), 0) + 1;
-};
-export const columnBaseSize = ({
-  experience = 3
-}) => {
-  const digits = numDigits({
-    num: experience
-  });
-  return {
-    sm: digits > 4 ? 5 : 4,
-    md: digits > 4 ? 5 : 4,
-    lg: digits > 4 ? 4 : 5,
-    xl: digits > 4 ? 5 : 4
-  };
-};
-export const calculatePercent = ({
-  value,
-  total
-}) => {
-  return value / total * 100;
-};
-export const calculateBarWidth = ({
-  value,
-  minRange,
-  maxRange
-}) => {
-  const range = maxRange - minRange;
-  const adjustedValue = Math.max(0, Math.min(range, value - minRange));
-  return Math.floor(calculatePercent({
-    value: adjustedValue,
-    total: range
-  }));
-};
-
-/**
- * Calculate tick spacing and nice minimum and maximum data points on the axis.
- */
-export const calculateTicksAndRange = ({
-  maxTicks,
-  min,
-  max
-}) => {
-  const range = niceNum({
-    range: max - min,
-    roundDown: false
-  });
-  const tickSpacing = niceNum({
-    range: range / (maxTicks - 1),
-    roundDown: true
-  });
-  const niceMin = Math.floor(min / tickSpacing) * tickSpacing;
-  const niceMax = Math.ceil(max / tickSpacing) * tickSpacing;
-  const tickCount = range / tickSpacing;
-  return [tickCount, niceMin, niceMax];
-};
-
-/**
- * Returns a "nice" number approximately equal to range
- * Rounds the number if round = true
- * Takes the ceiling if round = false.
- * A nice number is a simple decimal number, for example if a number is 1234, a nice number would be 1000 or 2000.
- */
-export const niceNum = ({
-  range,
-  roundDown
-}) => {
-  const exponent = Math.floor(Math.log10(range));
-  const fraction = range / 10 ** exponent;
-  let niceFraction;
-  if (roundDown) {
-    if (fraction >= 10) niceFraction = 10;else if (fraction >= 5) niceFraction = 5;else if (fraction >= 2) niceFraction = 2;else if (fraction >= 1) niceFraction = 1;else niceFraction = 1;
-  } else if (fraction <= 1) niceFraction = 1;else if (fraction <= 2) niceFraction = 2;else if (fraction <= 5) niceFraction = 5;else niceFraction = 10;
-  return niceFraction * 10 ** exponent;
-};
-export const getPercentDiff = ({
-  v1,
-  v2
-}) => {
-  return Math.abs(v1 - v2) / ((v1 + v2) / 2) * 100;
-};
-export const formatNumberUS = ({
-  num,
-  locale = 'en'
-}) => Intl.NumberFormat(locale).format(num);
-
-/**
- * Formats a numeric value with optional unit for bar chart labels.
- */
-export const formatValueWithUnit = ({
-  value,
-  unit,
-  locale = 'en'
-}) => {
-  const formatted = Intl.NumberFormat(locale).format(value);
-  return unit ? `${formatted} ${unit}` : formatted;
-};
-export const formatNumberUSCompact = ({
-  num,
-  locale = 'en'
-}) => Intl.NumberFormat(locale, {
-  notation: 'compact',
-  compactDisplay: 'short'
-}).format(num);
-
-/**
- * Sort bars based on sortBy and order configuration
- */
-export const sortBars = ({
-  bars,
-  sortBy,
-  order
-}) => {
-  if (sortBy === 'none' || !sortBy) {
-    return bars;
-  }
-  const sorted = [...bars].sort((a, b) => {
-    if (sortBy === 'label') {
-      return a.yLabel.localeCompare(b.yLabel);
-    }
-    // sortBy === 'value' - use seriesTwoValue if available, otherwise seriesOneValue
-    const aValue = a.seriesTwoValue ?? a.seriesOneValue;
-    const bValue = b.seriesTwoValue ?? b.seriesOneValue;
-    return aValue - bValue;
-  });
-  return order === 'descending' ? sorted.reverse() : sorted;
-};
-
-/**
- * Generates an accessible summary of the bar values for aria-label / screen reader.
- * When translations.accessibility keys are functions, they are called with scoped
- * context (values, label, unit, locale) and their return value is used as the full summary.
- */
-export const getValuesSummary = ({
-  isInteractive,
-  seriesOneValue,
-  seriesTwoValue,
-  unit,
-  yLabel,
-  translations
-}) => {
-  const unitText = unit ? ` ${unit}` : '';
-  const {
-    locale
-  } = translations;
-  if (seriesTwoValue !== undefined) {
-    const {
-      gainedNowAt,
-      inLabel
-    } = translations.accessibility;
-    if (typeof gainedNowAt === 'function') {
-      return gainedNowAt({
-        yLabel,
-        seriesOneValue,
-        seriesTwoValue,
-        unit,
-        locale
-      });
-    }
-    const gained = seriesOneValue;
-    return `${gained}${unitText} ${gainedNowAt} ${seriesTwoValue}${unitText} ${inLabel} ${yLabel}`;
-  }
-  if (isInteractive) {
-    const {
-      inLabel
-    } = translations.accessibility;
-    if (typeof inLabel === 'function') {
-      return inLabel({
-        yLabel,
-        value: seriesOneValue,
-        unit,
-        locale
-      });
-    }
-    return `${seriesOneValue}${unitText} ${inLabel} ${yLabel}`;
-  }
-  const {
-    inOnly
-  } = translations.accessibility;
-  if (typeof inOnly === 'function') {
-    return inOnly({
-      value: seriesOneValue,
-      unit,
-      locale
-    });
-  }
-  return `${seriesOneValue}${unitText} ${inOnly}`;
-};
-
-/**
- * Calculates the value for a given label position
- */
-export const getLabel = ({
-  labelCount,
-  labelIndex,
-  min,
-  max
-}) => {
-  if (labelCount <= 1) return max;
-  const incrementalDecimal = labelIndex / (labelCount - 1);
-  return Math.floor(min + incrementalDecimal * (max - min));
-};
-
-/**
- * Calculates the percentage position for a given value within a range
- * Returns a value between 0 and 100 representing the position percentage
- */
-export const calculatePositionPercent = ({
-  value,
-  min,
-  max
-}) => {
-  if (max === min) return 0;
-  const range = max - min;
-  const adjustedValue = value - min;
-  return adjustedValue / range * 100;
-};
-
-/**
- * Generates a stable key for a bar row (for React list keys).
- */
-export const getBarRowKey = (bar, index) => bar.yLabel && bar.seriesOneValue ? `${bar.yLabel}-${bar.seriesOneValue}-${bar.seriesTwoValue ?? ''}-${index}` : String(index);