@atlaskit/anonymous-assets 0.0.0

package/dist/es2019/common/utils/anonymous-assets.js

@@ -0,0 +1,543 @@
+import { messages } from '../../messages';
+import { Apple, Avocado, Badger, Bat, Bear, Beaver, Bee, Bison, Blossom, Blowfish, Blueberries, Boar, Broccoli, Butterfly, Cactus, Camel, Candy, Capsicum, Carrot, Cat, Caterpiller, Cherry, Chili, Clover, Coconut, Cookie, Corn, Cow, Crab, Crocodile, Deer, Dinosaur, Dodo, Dog, Dolphin, Donut, Dragon, Duck, Elephant, Fish, Flamingo, Fox, Frog, Giraffe, Gorilla, Grape, Hedgehog, Hippo, Kangaroo, Kiwi, Koala, Lemon, Lettuce, Lion, Lizard, Llama, Lobster, Mango, Melon, Monkey, Mouse, Octopus, Olive, Orange, Orangutan, Otter, Owl, Ox, Oyster, Panda, Parrot, Peacock, Pear, Penguin, Pig, Pineapple, Poodle, Rabbit, Raccoon, Rhino, Robot, Rose, Seal, Seedling, Shark, Shrimp, Skunk, Sloth, Snail, Snake, Snowman, Squid, Squirrel, Strawberry, Sunflower, Tiger, Tomato, Tree, Trex, TropicalFish, Turkey, Turtle, Watermelon, Whale, Wolf } from '../assets';
+export const ANONYMOUS_ASSETS = [{
+  id: 'alligator',
+  src: Crocodile,
+  messageDescriptor: messages.alligator
+}, {
+  id: 'alpaca',
+  src: Llama,
+  messageDescriptor: messages.alpaca
+}, {
+  id: 'ape',
+  src: Orangutan,
+  messageDescriptor: messages.ape
+}, {
+  id: 'apple',
+  src: Apple,
+  messageDescriptor: messages.apple
+}, {
+  id: 'avocado',
+  src: Avocado,
+  messageDescriptor: messages.avocado
+}, {
+  id: 'baboon',
+  src: Orangutan,
+  messageDescriptor: messages.baboon
+}, {
+  id: 'badger',
+  src: Badger,
+  messageDescriptor: messages.badger
+}, {
+  id: 'bat',
+  src: Bat,
+  messageDescriptor: messages.bat
+}, {
+  id: 'bear',
+  src: Bear,
+  messageDescriptor: messages.bear
+}, {
+  id: 'beaver',
+  src: Beaver,
+  messageDescriptor: messages.beaver
+}, {
+  id: 'bee',
+  src: Bee,
+  messageDescriptor: messages.bee
+}, {
+  id: 'bird',
+  src: Owl,
+  messageDescriptor: messages.bird
+}, {
+  id: 'bison',
+  src: Bison,
+  messageDescriptor: messages.bison
+}, {
+  id: 'blobfish',
+  src: Fish,
+  messageDescriptor: messages.blobfish
+}, {
+  id: 'blossom',
+  src: Blossom,
+  messageDescriptor: messages.blossom
+}, {
+  id: 'blowfish',
+  src: Blowfish,
+  messageDescriptor: messages.blowfish
+}, {
+  id: 'blueberries',
+  src: Blueberries,
+  messageDescriptor: messages.blueberries
+}, {
+  id: 'boar',
+  src: Boar,
+  messageDescriptor: messages.boar
+}, {
+  id: 'broccoli',
+  src: Broccoli,
+  messageDescriptor: messages.broccoli
+}, {
+  id: 'buffalo',
+  src: Bison,
+  messageDescriptor: messages.buffalo
+}, {
+  id: 'bug',
+  src: Butterfly,
+  messageDescriptor: messages.bug
+}, {
+  id: 'bull',
+  src: Cow,
+  messageDescriptor: messages.bull
+}, {
+  id: 'bunny',
+  src: Rabbit,
+  messageDescriptor: messages.bunny
+}, {
+  id: 'butterfly',
+  src: Butterfly,
+  messageDescriptor: messages.butterfly
+}, {
+  id: 'cactus',
+  src: Cactus,
+  messageDescriptor: messages.cactus
+}, {
+  id: 'camel',
+  src: Camel,
+  messageDescriptor: messages.camel
+}, {
+  id: 'candy',
+  src: Candy,
+  messageDescriptor: messages.candy
+}, {
+  id: 'cantaloupe',
+  src: Melon,
+  messageDescriptor: messages.cantaloupe
+}, {
+  id: 'capsicum',
+  src: Capsicum,
+  messageDescriptor: messages.capsicum
+}, {
+  id: 'carrot',
+  src: Carrot,
+  messageDescriptor: messages.carrot
+}, {
+  id: 'cat',
+  src: Cat,
+  messageDescriptor: messages.cat
+}, {
+  id: 'caterpiller',
+  src: Caterpiller,
+  messageDescriptor: messages.caterpiller
+}, {
+  id: 'chameleon',
+  src: Lizard,
+  messageDescriptor: messages.chameleon
+}, {
+  id: 'cherry',
+  src: Cherry,
+  messageDescriptor: messages.cherry
+}, {
+  id: 'chili',
+  src: Chili,
+  messageDescriptor: messages.chili
+}, {
+  id: 'chimp',
+  src: Monkey,
+  messageDescriptor: messages.chimp
+}, {
+  id: 'chimpanzee',
+  src: Monkey,
+  messageDescriptor: messages.chimpanzee
+}, {
+  id: 'clover',
+  src: Clover,
+  messageDescriptor: messages.clover
+}, {
+  id: 'clownfish',
+  src: TropicalFish,
+  messageDescriptor: messages.clownfish
+}, {
+  id: 'cobra',
+  src: Snake,
+  messageDescriptor: messages.cobra
+}, {
+  id: 'coconut',
+  src: Coconut,
+  messageDescriptor: messages.coconut
+}, {
+  id: 'cod',
+  src: Fish,
+  messageDescriptor: messages.cod
+}, {
+  id: 'cookie',
+  src: Cookie,
+  messageDescriptor: messages.cookie
+}, {
+  id: 'corn',
+  src: Corn,
+  messageDescriptor: messages.corn
+}, {
+  id: 'cow',
+  src: Cow,
+  messageDescriptor: messages.cow
+}, {
+  id: 'crab',
+  src: Crab,
+  messageDescriptor: messages.crab
+}, {
+  id: 'crocodile',
+  src: Crocodile,
+  messageDescriptor: messages.crocodile
+}, {
+  id: 'deer',
+  src: Deer,
+  messageDescriptor: messages.deer
+}, {
+  id: 'dinosaur',
+  src: Dinosaur,
+  messageDescriptor: messages.dinosaur
+}, {
+  id: 'dodo',
+  src: Dodo,
+  messageDescriptor: messages.dodo
+}, {
+  id: 'dog',
+  src: Dog,
+  messageDescriptor: messages.dog
+}, {
+  id: 'dolphin',
+  src: Dolphin,
+  messageDescriptor: messages.dolphin
+}, {
+  id: 'donut',
+  src: Donut,
+  messageDescriptor: messages.donut
+}, {
+  id: 'dragon',
+  src: Dragon,
+  messageDescriptor: messages.dragon
+}, {
+  id: 'duck',
+  src: Duck,
+  messageDescriptor: messages.duck
+}, {
+  id: 'elephant',
+  src: Elephant,
+  messageDescriptor: messages.elephant
+}, {
+  id: 'elk',
+  src: Deer,
+  messageDescriptor: messages.elk
+}, {
+  id: 'fish',
+  src: Fish,
+  messageDescriptor: messages.fish
+}, {
+  id: 'flamingo',
+  src: Flamingo,
+  messageDescriptor: messages.flamingo
+}, {
+  id: 'fox',
+  src: Fox,
+  messageDescriptor: messages.fox
+}, {
+  id: 'frog',
+  src: Frog,
+  messageDescriptor: messages.frog
+}, {
+  id: 'gecko',
+  src: Lizard,
+  messageDescriptor: messages.gecko
+}, {
+  id: 'giraffe',
+  src: Giraffe,
+  messageDescriptor: messages.giraffe
+}, {
+  id: 'gorilla',
+  src: Gorilla,
+  messageDescriptor: messages.gorilla
+}, {
+  id: 'grape',
+  src: Grape,
+  messageDescriptor: messages.grape
+}, {
+  id: 'hammerhead',
+  src: Shark,
+  messageDescriptor: messages.hammerhead
+}, {
+  id: 'hedgehog',
+  src: Hedgehog,
+  messageDescriptor: messages.hedgehog
+}, {
+  id: 'hippo',
+  src: Hippo,
+  messageDescriptor: messages.hippo
+}, {
+  id: 'kangaroo',
+  src: Kangaroo,
+  messageDescriptor: messages.kangaroo
+}, {
+  id: 'kitten',
+  src: Cat,
+  messageDescriptor: messages.kitten
+}, {
+  id: 'kiwi',
+  src: Kiwi,
+  messageDescriptor: messages.kiwi
+}, {
+  id: 'koala',
+  src: Koala,
+  messageDescriptor: messages.koala
+}, {
+  id: 'lemon',
+  src: Lemon,
+  messageDescriptor: messages.lemon
+}, {
+  id: 'leopard',
+  src: Tiger,
+  messageDescriptor: messages.leopard
+}, {
+  id: 'lettuce',
+  src: Lettuce,
+  messageDescriptor: messages.lettuce
+}, {
+  id: 'lion',
+  src: Lion,
+  messageDescriptor: messages.lion
+}, {
+  id: 'lizard',
+  src: Lizard,
+  messageDescriptor: messages.lizard
+}, {
+  id: 'llama',
+  src: Llama,
+  messageDescriptor: messages.llama
+}, {
+  id: 'lobster',
+  src: Lobster,
+  messageDescriptor: messages.lobster
+}, {
+  id: 'macaque',
+  src: Monkey,
+  messageDescriptor: messages.macaque
+}, {
+  id: 'mango',
+  src: Mango,
+  messageDescriptor: messages.mango
+}, {
+  id: 'melon',
+  src: Watermelon,
+  messageDescriptor: messages.melon
+}, {
+  id: 'millipede',
+  src: Caterpiller,
+  messageDescriptor: messages.millipede
+}, {
+  id: 'monkey',
+  src: Monkey,
+  messageDescriptor: messages.monkey
+}, {
+  id: 'mouse',
+  src: Mouse,
+  messageDescriptor: messages.mouse
+}, {
+  id: 'octopus',
+  src: Octopus,
+  messageDescriptor: messages.octopus
+}, {
+  id: 'olive',
+  src: Olive,
+  messageDescriptor: messages.olive
+}, {
+  id: 'orange',
+  src: Orange,
+  messageDescriptor: messages.orange
+}, {
+  id: 'orangutan',
+  src: Orangutan,
+  messageDescriptor: messages.orangutan
+}, {
+  id: 'otter',
+  src: Otter,
+  messageDescriptor: messages.otter
+}, {
+  id: 'owl',
+  src: Owl,
+  messageDescriptor: messages.owl
+}, {
+  id: 'ox',
+  src: Ox,
+  messageDescriptor: messages.ox
+}, {
+  id: 'oyster',
+  src: Oyster,
+  messageDescriptor: messages.oyster
+}, {
+  id: 'panda',
+  src: Panda,
+  messageDescriptor: messages.panda
+}, {
+  id: 'parrot',
+  src: Parrot,
+  messageDescriptor: messages.parrot
+}, {
+  id: 'peacock',
+  src: Peacock,
+  messageDescriptor: messages.peacock
+}, {
+  id: 'pear',
+  src: Pear,
+  messageDescriptor: messages.pear
+}, {
+  id: 'penguin',
+  src: Penguin,
+  messageDescriptor: messages.penguin
+}, {
+  id: 'pig',
+  src: Pig,
+  messageDescriptor: messages.pig
+}, {
+  id: 'pineapple',
+  src: Pineapple,
+  messageDescriptor: messages.pineapple
+}, {
+  id: 'poodle',
+  src: Poodle,
+  messageDescriptor: messages.poodle
+}, {
+  id: 'puppy',
+  src: Dog,
+  messageDescriptor: messages.puppy
+}, {
+  id: 'python',
+  src: Snake,
+  messageDescriptor: messages.python
+}, {
+  id: 'rabbit',
+  src: Rabbit,
+  messageDescriptor: messages.rabbit
+}, {
+  id: 'raccoon',
+  src: Raccoon,
+  messageDescriptor: messages.raccoon
+}, {
+  id: 'rat',
+  src: Mouse,
+  messageDescriptor: messages.rat
+}, {
+  id: 'rhino',
+  src: Rhino,
+  messageDescriptor: messages.rhino
+}, {
+  id: 'robot',
+  src: Robot,
+  messageDescriptor: messages.robot
+}, {
+  id: 'rose',
+  src: Rose,
+  messageDescriptor: messages.rose
+}, {
+  id: 'seal',
+  src: Seal,
+  messageDescriptor: messages.seal
+}, {
+  id: 'seedling',
+  src: Seedling,
+  messageDescriptor: messages.seedling
+}, {
+  id: 'shark',
+  src: Shark,
+  messageDescriptor: messages.shark
+}, {
+  id: 'shrimp',
+  src: Shrimp,
+  messageDescriptor: messages.shrimp
+}, {
+  id: 'skunk',
+  src: Skunk,
+  messageDescriptor: messages.skunk
+}, {
+  id: 'sloth',
+  src: Sloth,
+  messageDescriptor: messages.sloth
+}, {
+  id: 'snail',
+  src: Snail,
+  messageDescriptor: messages.snail
+}, {
+  id: 'snake',
+  src: Snake,
+  messageDescriptor: messages.snake
+}, {
+  id: 'snowman',
+  src: Snowman,
+  messageDescriptor: messages.snowman
+}, {
+  id: 'squid',
+  src: Squid,
+  messageDescriptor: messages.squid
+}, {
+  id: 'squirrel',
+  src: Squirrel,
+  messageDescriptor: messages.squirrel
+}, {
+  id: 'strawberry',
+  src: Strawberry,
+  messageDescriptor: messages.strawberry
+}, {
+  id: 'sunfish',
+  src: TropicalFish,
+  messageDescriptor: messages.sunfish
+}, {
+  id: 'sunflower',
+  src: Sunflower,
+  messageDescriptor: messages.sunflower
+}, {
+  id: 'tiger',
+  src: Tiger,
+  messageDescriptor: messages.tiger
+}, {
+  id: 'tomato',
+  src: Tomato,
+  messageDescriptor: messages.tomato
+}, {
+  id: 'tortoise',
+  src: Turtle,
+  messageDescriptor: messages.tortoise
+}, {
+  id: 'tree',
+  src: Tree,
+  messageDescriptor: messages.tree
+}, {
+  id: 'trex',
+  src: Trex,
+  messageDescriptor: messages.trex
+}, {
+  id: 'trout',
+  src: Fish,
+  messageDescriptor: messages.trout
+}, {
+  id: 'turkey',
+  src: Turkey,
+  messageDescriptor: messages.turkey
+}, {
+  id: 'turtle',
+  src: Turtle,
+  messageDescriptor: messages.turtle
+}, {
+  id: 'wasp',
+  src: Bee,
+  messageDescriptor: messages.wasp
+}, {
+  id: 'watermelon',
+  src: Watermelon,
+  messageDescriptor: messages.watermelon
+}, {
+  id: 'whale',
+  src: Whale,
+  messageDescriptor: messages.whale
+}, {
+  id: 'wolf',
+  src: Wolf,
+  messageDescriptor: messages.wolf
+}];

package/dist/es2019/common/utils/get-anonymous-asset.js

@@ -0,0 +1,101 @@
+import { ANONYMOUS_ASSETS } from './anonymous-assets';
+import { getIntl } from './intl';
+import { fetchWithRetry } from './retry';
+export const encodeSvgToDataUri = svgRoot => {
+  // by this point we have a safe SVG string: we can safely string interpolate to encode as a
+  // data:image to enable passing it to an <img> src attribute
+  return `data:image/svg+xml;base64,${btoa(new XMLSerializer().serializeToString(svgRoot))}`;
+};
+export const objectToStyleString = cssProperties => {
+  let styleString = '';
+  Object.keys(cssProperties).forEach(key => {
+    styleString += `${key}: ${cssProperties[key]}; `;
+  });
+  return styleString;
+};
+
+/**
+ * Applies additional styling to the SVG image by adding a style attribute to the SVG element
+ */
+export const addStyling = (svgRoot, cssProperties) => {
+  const styleRule = new CSSStyleSheet();
+  const styleString = objectToStyleString(cssProperties);
+
+  // even if styling is malicious, it will be sanitized by the CSSStyleSheet with the string being empty, ensuring safety
+  styleRule.insertRule(`svg { ${styleString} }`);
+  // we need to cast to CSSStyleRule to access the .style property
+  const styleRuleString = styleRule.cssRules[0].style.cssText;
+  svgRoot.setAttribute('style', styleRuleString);
+};
+export const getAssetIndex = index => {
+  return index !== undefined ? index % ANONYMOUS_ASSETS.length : Math.floor(Math.random() * ANONYMOUS_ASSETS.length);
+};
+export const svgStringToDomDocument = svgString => {
+  return new DOMParser().parseFromString(svgString, 'image/svg+xml');
+};
+/**
+ * Use this if custom styling needs to be applied to the svg element (such as background-color)
+ * Loads a svg -> converts to a svg dom element -> applies styling -> converts to base64 encoded image
+ * @param props
+ */
+export const getAnonymousAvatarWithStyling = async props => {
+  var _response$result;
+  const index = getAssetIndex(props === null || props === void 0 ? void 0 : props.index);
+  const {
+    id,
+    messageDescriptor,
+    src
+  } = ANONYMOUS_ASSETS[index];
+  const intl = await getIntl();
+  const response = await fetchWithRetry({
+    url: src,
+    shouldRetryOnApiError: true,
+    retries: 3 // Maximum 3 retries
+  });
+  const svgString = await ((_response$result = response.result) === null || _response$result === void 0 ? void 0 : _response$result.text());
+  if (!response.success) {
+    var _response$error, _props$onError;
+    const error = (_response$error = response.error) !== null && _response$error !== void 0 ? _response$error : new Error(`Error while fetching svg ${id} with src ${src}`);
+    (_props$onError = props.onError) === null || _props$onError === void 0 ? void 0 : _props$onError.call(props, error);
+    return undefined;
+  }
+  if (!svgString) {
+    var _props$onError2;
+    (_props$onError2 = props.onError) === null || _props$onError2 === void 0 ? void 0 : _props$onError2.call(props, new Error(`svg returned null with svg ${id} with src ${src}`));
+    return undefined;
+  }
+  const doc = svgStringToDomDocument(svgString);
+  const svg = doc.documentElement;
+  addStyling(svg, props.styleProperties);
+  return {
+    id,
+    name: intl.formatMessage(messageDescriptor),
+    src: encodeSvgToDataUri(svg)
+  };
+};
+
+/**
+ * Returns an anonymous asset. Use this if no additional svg modifications are needed
+ * @param props.index if none is provided, a random anonymous asset it returned
+ */
+export const getAnonymousAsset = async props => {
+  const index = getAssetIndex(props === null || props === void 0 ? void 0 : props.index);
+  const asset = ANONYMOUS_ASSETS[index];
+  const intl = await getIntl();
+  return {
+    ...asset,
+    name: intl.formatMessage(asset.messageDescriptor)
+  };
+};
+
+/**
+ * Returns all anonymous assets
+ */
+export const getAllAnonymousAssets = async () => {
+  const intl = await getIntl();
+  return ANONYMOUS_ASSETS.map(asset => ({
+    id: asset.id,
+    name: intl.formatMessage(asset.messageDescriptor),
+    src: asset.src
+  }));
+};

package/dist/es2019/common/utils/intl.js

@@ -0,0 +1,46 @@
+import { createIntl, createIntlCache } from 'react-intl-next';
+import { getDocument } from '@atlaskit/browser-apis';
+import { locales } from '../../i18n';
+import enMessages from '../../i18n/en';
+const localeMap = {
+  pt: 'pt-BR',
+  'pt-PT': 'pt-BR',
+  'en-AU': 'en-GB'
+};
+const intlCacheMap = new Map();
+export const getIntl = async () => {
+  var _getDocument, _getDocument$document;
+  const key = ((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : (_getDocument$document = _getDocument.documentElement) === null || _getDocument$document === void 0 ? void 0 : _getDocument$document.lang) || 'en-US';
+  if (!intlCacheMap.has(key)) {
+    const messages = await fetchMessages(key);
+    const cache = createIntlCache();
+    const intl = createIntl({
+      locale: key,
+      messages
+    }, cache);
+    intlCacheMap.set(key, intl);
+  }
+  return intlCacheMap.get(key);
+};
+const fetchMessages = async locale => {
+  try {
+    var _ref, _localeMap$locale;
+    const targetLocale = ((_ref = (_localeMap$locale = localeMap[locale]) !== null && _localeMap$locale !== void 0 ? _localeMap$locale : locale) !== null && _ref !== void 0 ? _ref : '').replace('-', '_');
+    if (targetLocale in locales) {
+      const messages = await locales[targetLocale]();
+      return messages.default;
+    }
+    const parentLocale = locale.split(/[-_]/)[0];
+    if (parentLocale in locales) {
+      const messages = await locales[parentLocale]();
+      return messages.default;
+    }
+  } catch (e) {
+    // ignore
+  }
+
+  /**
+   * English bundled by default as this is the majority of users
+   */
+  return enMessages;
+};