@pingux/astro 2.170.1-alpha.0 → 2.171.0-alpha.0

package/lib/cjs/components/Avatar/Avatar.js

@@ -21,8 +21,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
+var _constants = require("./constants");
+var _getColorFromUuid = _interopRequireDefault(require("./getColorFromUuid"));
 var _react2 = require("@emotion/react");
-var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
+var _excluded = ["alt", "defaultText", "color", "colorId", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -32,6 +34,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _props$defaultText = props.defaultText,
     defaultText = _props$defaultText === void 0 ? 'AA' : _props$defaultText,
     color = props.color,
+    colorId = props.colorId,
     className = props.className,
     _props$size = props.size,
     size = _props$size === void 0 ? 'sm' : _props$size,
@@ -41,7 +44,15 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isSquare = props.isSquare,
     isLogo = props.isLogo,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(color), color), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
+
+  // this will use color prop if provided,
+  // else will map colorId to a color, else defaults to 'green'
+  var finalColor = (0, _react.useMemo)(function () {
+    if (color) return color;
+    if (colorId) return (0, _getColorFromUuid["default"])(colorId, _constants.avatarColors);
+    return 'green';
+  }, [color, colorId, _constants.avatarColors]);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(finalColor), finalColor), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
     classNames = _useStatusClasses.classNames;
   if (src) {
     return (0, _react2.jsx)(_themeUi.Box, (0, _extends2["default"])({

package/lib/cjs/components/Avatar/Avatar.test.js

@@ -1,16 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _faker = require("@faker-js/faker");
+var _nodeCrypto = require("node:crypto");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _constants = require("./constants");
+var _getColorFromUuid = _interopRequireDefault(require("./getColorFromUuid"));
 var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var src = _faker.faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1');
+var datatestId = 'avatar-component';
 var defaultProps = {
-  src: src
+  src: src,
+  'data-testid': datatestId
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -43,4 +52,89 @@ test('an avatar is rendered with custom alt', function () {
   });
   var avatar = _testWrapper.screen.getByText('KL');
   expect(avatar).toBeInTheDocument();
+});
+describe('getColorFromUUID', function () {
+  test('returns a consistent color for the same UUID', function () {
+    var uuid = '123e4567-e89b-12d3-a456-426614174000';
+    var result1 = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+    var result2 = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+    expect(result1).toBe(result2);
+  });
+  test('returns a color from the provided array', function () {
+    var uuid = 'random-id';
+    var result = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+    expect(_constants.avatarColors).toContain(result);
+  });
+  test('distributes colors differently for different UUIDs', function () {
+    var colorA = (0, _getColorFromUuid["default"])('id-1', _constants.avatarColors);
+    var colorB = (0, _getColorFromUuid["default"])('id-2', _constants.avatarColors);
+
+    // While collisions are mathematically possible, for 2 items in a 10-item list,
+    // these specific IDs yield different results in FNV-1a.
+    expect(colorA).not.toBe(colorB);
+  });
+  test('throws error if color array is empty', function () {
+    expect(function () {
+      return (0, _getColorFromUuid["default"])('uuid', []);
+    }).toThrow('Color array cannot be empty.');
+  });
+  test('uses the specific color class when color prop is provided', function () {
+    getComponent({
+      color: 'blue',
+      colorId: 'some-id'
+    });
+    var avatar = _testWrapper.screen.getByTestId(datatestId);
+
+    // Checking for 'is-blue'
+    expect(avatar).toHaveClass('is-blue');
+  });
+  test('applies a hashed color class from colorId', function () {
+    var uuid = '550e8400-e29b-41d4-a716-446655440000';
+    getComponent({
+      colorId: uuid
+    });
+    var avatar = _testWrapper.screen.getByTestId(datatestId);
+
+    // We check that it has *a* class starting with 'is-'
+    // and specifically isn't the default 'is-green'
+    var classList = (0, _from["default"])(avatar.classList);
+    var colorClass = (0, _find["default"])(classList).call(classList, function (cls) {
+      return (0, _startsWith["default"])(cls).call(cls, 'is-');
+    });
+    expect(colorClass).toBeDefined();
+    expect(avatar).not.toHaveClass('is-green');
+  });
+  test('defaults to is-green when no color props are passed', function () {
+    getComponent();
+    var avatar = _testWrapper.screen.getByTestId(datatestId);
+    expect(avatar).toHaveClass('is-green');
+  });
+});
+describe('getColorFromUUID Distribution', function () {
+  test('distributes 10,000 UUIDs evenly across 10 colors', function () {
+    var iterations = 10000;
+    var distribution = {};
+
+    // Initialize counts
+    (0, _forEach["default"])(_constants.avatarColors).call(_constants.avatarColors, function (c) {
+      distribution[c] = 0;
+    });
+
+    // Generate and hash
+    for (var i = 0; i < iterations; i += 1) {
+      // Use the imported randomUUID function directly
+      var uuid = (0, _nodeCrypto.randomUUID)();
+      var selectedColor = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+      distribution[selectedColor] += 1;
+    }
+    var expectedMean = iterations / _constants.avatarColors.length;
+    // 15% variance is a safe threshold for 10k iterations
+    var allowedVariance = 0.15;
+    (0, _forEach["default"])(_constants.avatarColors).call(_constants.avatarColors, function (color) {
+      var count = distribution[color];
+      // Assert that each color is roughly 10% of the total
+      expect(count).toBeGreaterThan(expectedMean * (1 - allowedVariance));
+      expect(count).toBeLessThan(expectedMean * (1 + allowedVariance));
+    });
+  });
 });

package/lib/cjs/components/Avatar/constants.d.ts

@@ -0,0 +1,2 @@
+declare const avatarColors: string[];
+export { avatarColors };

package/lib/cjs/components/Avatar/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.avatarColors = void 0;
+var avatarColors = exports.avatarColors = ['green', 'purple', 'pink', 'red', 'orange', 'yellow', 'teal', 'cyan', 'blue', 'indigo'];

package/lib/cjs/components/Avatar/getColorFromUuid.d.ts

@@ -0,0 +1,2 @@
+declare const getColorFromUUID: <T>(uuid: string, colors: T[]) => T;
+export default getColorFromUUID;

package/lib/cjs/components/Avatar/getColorFromUuid.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _imul = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/math/imul"));
+// * Maps a UUID to a specific color from a provided array.
+//  * @param uuid - The unique identifier string.
+//  * @param colors - An array of color strings/objects.
+//  * @returns A single color from the array.
+
+var getColorFromUUID = function getColorFromUUID(uuid, colors) {
+  if (colors.length === 0) {
+    throw new Error('Color array cannot be empty.');
+  }
+
+  // FNV-1a Hash implementation
+  // This spreads the bits of the UUID string evenly across a 32-bit integer
+  var hash = 2166136261;
+  for (var i = 0; i < uuid.length; i += 1) {
+    /* eslint-disable no-bitwise */
+    hash ^= uuid.charCodeAt(i);
+    // Standard FNV prime (using Math.imul for 32-bit integer multiplication)
+
+    hash = (0, _imul["default"])(hash, 16777619);
+  }
+
+  // Convert to an unsigned index using the modulo operator
+  // The >>> 0 ensures we are dealing with an unsigned 32-bit integer
+  /* eslint-disable no-bitwise */
+  var index = (hash >>> 0) % colors.length;
+  return colors[index];
+};
+var _default = exports["default"] = getColorFromUUID;

package/lib/cjs/types/avatar.d.ts

@@ -10,6 +10,8 @@ export interface AvatarProps extends ThemeUIAvatarProps {
     defaultText?: string;
     size?: string;
     color?: string;
+    colorId?: string;
     isSquare?: boolean;
     isLogo?: boolean;
+    'data-testid'?: string;
 }

package/lib/components/Avatar/Avatar.js

@@ -9,12 +9,14 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
+var _excluded = ["alt", "defaultText", "color", "colorId", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { Avatar as ThemeUIAvatar, Box } from 'theme-ui';
 import { useStatusClasses } from '../../hooks';
+import { avatarColors } from './constants';
+import getColorFromUUID from './getColorFromUuid';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$alt = props.alt,
@@ -22,6 +24,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$defaultText = props.defaultText,
     defaultText = _props$defaultText === void 0 ? 'AA' : _props$defaultText,
     color = props.color,
+    colorId = props.colorId,
     className = props.className,
     _props$size = props.size,
     size = _props$size === void 0 ? 'sm' : _props$size,
@@ -31,7 +34,15 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
     isSquare = props.isSquare,
     isLogo = props.isLogo,
     others = _objectWithoutProperties(props, _excluded);
-  var _useStatusClasses = useStatusClasses(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "is-".concat(color), color), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
+
+  // this will use color prop if provided,
+  // else will map colorId to a color, else defaults to 'green'
+  var finalColor = useMemo(function () {
+    if (color) return color;
+    if (colorId) return getColorFromUUID(colorId, avatarColors);
+    return 'green';
+  }, [color, colorId, avatarColors]);
+  var _useStatusClasses = useStatusClasses(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "is-".concat(finalColor), finalColor), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
     classNames = _useStatusClasses.classNames;
   if (src) {
     return ___EmotionJSX(Box, _extends({

package/lib/components/Avatar/Avatar.test.js

@@ -1,13 +1,22 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React from 'react';
 import { faker } from '@faker-js/faker';
+import { randomUUID } from 'node:crypto';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { avatarColors as colors } from './constants';
+import getColorFromUUID from './getColorFromUuid';
 import Avatar from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var src = faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1');
+var datatestId = 'avatar-component';
 var defaultProps = {
-  src: src
+  src: src,
+  'data-testid': datatestId
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -40,4 +49,89 @@ test('an avatar is rendered with custom alt', function () {
   });
   var avatar = screen.getByText('KL');
   expect(avatar).toBeInTheDocument();
+});
+describe('getColorFromUUID', function () {
+  test('returns a consistent color for the same UUID', function () {
+    var uuid = '123e4567-e89b-12d3-a456-426614174000';
+    var result1 = getColorFromUUID(uuid, colors);
+    var result2 = getColorFromUUID(uuid, colors);
+    expect(result1).toBe(result2);
+  });
+  test('returns a color from the provided array', function () {
+    var uuid = 'random-id';
+    var result = getColorFromUUID(uuid, colors);
+    expect(colors).toContain(result);
+  });
+  test('distributes colors differently for different UUIDs', function () {
+    var colorA = getColorFromUUID('id-1', colors);
+    var colorB = getColorFromUUID('id-2', colors);
+
+    // While collisions are mathematically possible, for 2 items in a 10-item list,
+    // these specific IDs yield different results in FNV-1a.
+    expect(colorA).not.toBe(colorB);
+  });
+  test('throws error if color array is empty', function () {
+    expect(function () {
+      return getColorFromUUID('uuid', []);
+    }).toThrow('Color array cannot be empty.');
+  });
+  test('uses the specific color class when color prop is provided', function () {
+    getComponent({
+      color: 'blue',
+      colorId: 'some-id'
+    });
+    var avatar = screen.getByTestId(datatestId);
+
+    // Checking for 'is-blue'
+    expect(avatar).toHaveClass('is-blue');
+  });
+  test('applies a hashed color class from colorId', function () {
+    var uuid = '550e8400-e29b-41d4-a716-446655440000';
+    getComponent({
+      colorId: uuid
+    });
+    var avatar = screen.getByTestId(datatestId);
+
+    // We check that it has *a* class starting with 'is-'
+    // and specifically isn't the default 'is-green'
+    var classList = _Array$from(avatar.classList);
+    var colorClass = _findInstanceProperty(classList).call(classList, function (cls) {
+      return _startsWithInstanceProperty(cls).call(cls, 'is-');
+    });
+    expect(colorClass).toBeDefined();
+    expect(avatar).not.toHaveClass('is-green');
+  });
+  test('defaults to is-green when no color props are passed', function () {
+    getComponent();
+    var avatar = screen.getByTestId(datatestId);
+    expect(avatar).toHaveClass('is-green');
+  });
+});
+describe('getColorFromUUID Distribution', function () {
+  test('distributes 10,000 UUIDs evenly across 10 colors', function () {
+    var iterations = 10000;
+    var distribution = {};
+
+    // Initialize counts
+    _forEachInstanceProperty(colors).call(colors, function (c) {
+      distribution[c] = 0;
+    });
+
+    // Generate and hash
+    for (var i = 0; i < iterations; i += 1) {
+      // Use the imported randomUUID function directly
+      var uuid = randomUUID();
+      var selectedColor = getColorFromUUID(uuid, colors);
+      distribution[selectedColor] += 1;
+    }
+    var expectedMean = iterations / colors.length;
+    // 15% variance is a safe threshold for 10k iterations
+    var allowedVariance = 0.15;
+    _forEachInstanceProperty(colors).call(colors, function (color) {
+      var count = distribution[color];
+      // Assert that each color is roughly 10% of the total
+      expect(count).toBeGreaterThan(expectedMean * (1 - allowedVariance));
+      expect(count).toBeLessThan(expectedMean * (1 + allowedVariance));
+    });
+  });
 });

package/lib/components/Avatar/constants.js

@@ -0,0 +1,2 @@
+var avatarColors = ['green', 'purple', 'pink', 'red', 'orange', 'yellow', 'teal', 'cyan', 'blue', 'indigo'];
+export { avatarColors };

package/lib/components/Avatar/getColorFromUuid.js

@@ -0,0 +1,29 @@
+import _Math$imul from "@babel/runtime-corejs3/core-js-stable/math/imul";
+// * Maps a UUID to a specific color from a provided array.
+//  * @param uuid - The unique identifier string.
+//  * @param colors - An array of color strings/objects.
+//  * @returns A single color from the array.
+
+var getColorFromUUID = function getColorFromUUID(uuid, colors) {
+  if (colors.length === 0) {
+    throw new Error('Color array cannot be empty.');
+  }
+
+  // FNV-1a Hash implementation
+  // This spreads the bits of the UUID string evenly across a 32-bit integer
+  var hash = 2166136261;
+  for (var i = 0; i < uuid.length; i += 1) {
+    /* eslint-disable no-bitwise */
+    hash ^= uuid.charCodeAt(i);
+    // Standard FNV prime (using Math.imul for 32-bit integer multiplication)
+
+    hash = _Math$imul(hash, 16777619);
+  }
+
+  // Convert to an unsigned index using the modulo operator
+  // The >>> 0 ensures we are dealing with an unsigned 32-bit integer
+  /* eslint-disable no-bitwise */
+  var index = (hash >>> 0) % colors.length;
+  return colors[index];
+};
+export default getColorFromUUID;