@reuters-graphics/graphics-components 3.0.14 → 3.0.16

package/dist/components/Functions/Utils.mdx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/blocks';
+
+import * as UtilFunctionStories from './Utils.stories.svelte';
+
+<Meta of={UtilFunctionStories} />
+
+# Util functions
+
+This library provides utility functions that can be used across various components and applications.
+
+## Prettify date in the Reuters format
+
+The function `prettifyDate` formats the input string, which is expected to be in English, to format the month and time designator (AM/PM) according to the Reuters style guide. The function is case agnostic and will format both full month names and their 3-letter abbreviations (i.e. `Mar` or `Jun`) correctly.
+
+```javascript
+import { prettifyDate } from '@reuters-graphics/graphics-components';
+
+// Example usage
+prettifyDate('January 1, 2023, 10:00 AM'); // returns 'Jan. 1, 2023, 10:00 a.m.'
+prettifyDate('Jan 1, 2023, 10:00 PM'); // returns 'Jan. 1, 2023, 10:00 p.m.'
+prettifyDate('MAR. 2025'); // returns 'March 2025'
+prettifyDate('sep. 1, 2023, 10:00PM'); // returns 'Sept. 1, 2023, 10:00 p.m.'
+```

package/dist/components/Functions/Utils.stories.svelte

@@ -0,0 +1,9 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    title: 'Components/Utilities/Functions',
+  });
+</script>
+
+<Story name="Demo" tags={['!autodocs', '!dev']} />

package/dist/components/Functions/Utils.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Utils: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Utils = InstanceType<typeof Utils>;
+export default Utils;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as cssVariables } from './actions/cssVariables/index';
 export { default as resizeObserver } from './actions/resizeObserver/index';
+export { prettifyDate } from './utils/index';
 export { default as Analytics, registerPageview, } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
 export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';

package/dist/index.js

@@ -1,6 +1,8 @@
 // Actions
 export { default as cssVariables } from './actions/cssVariables/index';
 export { default as resizeObserver } from './actions/resizeObserver/index';
+// Utils
+export { prettifyDate } from './utils/index';
 // Components
 export { default as Analytics, registerPageview, } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';

package/dist/test/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/utils.test.js

@@ -0,0 +1,141 @@
+import { prettifyDate } from '../utils/index';
+import { describe, it, expect } from 'vitest';
+process.env.TESTING = 'true';
+describe('Utils tests', () => {
+    it('should format full month correctly', () => {
+        const unformatted = 'January 1, 2023, 10:00 AM';
+        const formatted = 'Jan. 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformatted)).toBe(formatted);
+    });
+    it('should format 3-letter abbreviated month correctly', () => {
+        const unformatted = 'Jan 1, 2023, 10:00 AM';
+        const formatted = 'Jan. 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformatted)).toBe(formatted);
+    });
+    it('should format March, April, June, July correctly', () => {
+        const unformattedMarch = 'Mar 1, 2023, 10:00 AM';
+        const formattedMarch = 'March 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedMarch)).toBe(formattedMarch);
+        const unformattedApril = 'Apr 1, 2023, 10:00 AM';
+        const formattedApril = 'April 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedApril)).toBe(formattedApril);
+        const unformattedJune = 'Jun 1, 2023, 10:00 AM';
+        const formattedJune = 'June 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedJune)).toBe(formattedJune);
+        const unformattedJuly = 'Jul 1, 2023, 10:00 am';
+        const formattedJuly = 'July 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedJuly)).toBe(formattedJuly);
+        const unformattedSept = 'Sep 1, 2023, 10:00 AM';
+        const formattedSept = 'Sept. 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedSept)).toBe(formattedSept);
+    });
+    it('should format months with periods correctly', () => {
+        const unformattedMarch = 'Mar. 1, 2023, 10:00 pm';
+        const formattedMarch = 'March 1, 2023, 10:00 p.m.';
+        expect(prettifyDate(unformattedMarch)).toBe(formattedMarch);
+        const unformattedApril = 'Apr. 1, 2023, 10:00 AM';
+        const formattedApril = 'April 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedApril)).toBe(formattedApril);
+        const unformattedMay = 'May. 1, 2023, 10:00 am';
+        const formattedMay = 'May 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedMay)).toBe(formattedMay);
+        const unformattedJune = 'Jun. 1, 2023, 10:00 PM';
+        const formattedJune = 'June 1, 2023, 10:00 p.m.';
+        expect(prettifyDate(unformattedJune)).toBe(formattedJune);
+        const unformattedJuly = 'Jul. 1, 2023, 10:00 PM';
+        const formattedJuly = 'July 1, 2023, 10:00 p.m.';
+        expect(prettifyDate(unformattedJuly)).toBe(formattedJuly);
+        const unformattedSept = 'Sep. 1, 2023, 10:00 PM';
+        const formattedSept = 'Sept. 1, 2023, 10:00 p.m.';
+        expect(prettifyDate(unformattedSept)).toBe(formattedSept);
+    });
+    it('should format months on their own properly', () => {
+        const unformattedMarch = 'Mar.';
+        const formattedMarch = 'March';
+        expect(prettifyDate(unformattedMarch)).toBe(formattedMarch);
+        const unformattedApril = 'Apr.';
+        const formattedApril = 'April';
+        expect(prettifyDate(unformattedApril)).toBe(formattedApril);
+        const unformattedMay = 'May.';
+        const formattedMay = 'May';
+        expect(prettifyDate(unformattedMay)).toBe(formattedMay);
+        const unformattedJune = 'JUN.';
+        const formattedJune = 'June';
+        expect(prettifyDate(unformattedJune)).toBe(formattedJune);
+        const unformattedJuly = 'Jul.';
+        const formattedJuly = 'July';
+        expect(prettifyDate(unformattedJuly)).toBe(formattedJuly);
+        const unformattedSept = 'sep.';
+        const formattedSept = 'Sept.';
+        expect(prettifyDate(unformattedSept)).toBe(formattedSept);
+    });
+    it('should format months with year properly', () => {
+        const unformattedMarch = 'MAR. 2025';
+        const formattedMarch = 'March 2025';
+        expect(prettifyDate(unformattedMarch)).toBe(formattedMarch);
+        const unformattedApril = 'apr. 2025';
+        const formattedApril = 'April 2025';
+        expect(prettifyDate(unformattedApril)).toBe(formattedApril);
+        const unformattedMay = 'May. 2025';
+        const formattedMay = 'May 2025';
+        expect(prettifyDate(unformattedMay)).toBe(formattedMay);
+        const unformattedJune = 'Jun. 2025';
+        const formattedJune = 'June 2025';
+        expect(prettifyDate(unformattedJune)).toBe(formattedJune);
+        const unformattedJuly = 'Jul. 2025';
+        const formattedJuly = 'July 2025';
+        expect(prettifyDate(unformattedJuly)).toBe(formattedJuly);
+        const unformattedSept = 'Sep. 2025';
+        const formattedSept = 'Sept. 2025';
+        expect(prettifyDate(unformattedSept)).toBe(formattedSept);
+        const unformattedOct = 'Oct. 2025';
+        const formattedOct = 'Oct. 2025';
+        expect(prettifyDate(unformattedOct)).toBe(formattedOct);
+        const unformattedNov = 'Nov 2025';
+        const formattedNov = 'Nov. 2025';
+        expect(prettifyDate(unformattedNov)).toBe(formattedNov);
+        const unformattedDec = 'DEC 2025';
+        const formattedDec = 'Dec. 2025';
+        expect(prettifyDate(unformattedDec)).toBe(formattedDec);
+    });
+    it('should fix spacing between time and am/pm', () => {
+        const unformattedMarch = 'Mar. 1, 2023, 10:00pm';
+        const formattedMarch = 'March 1, 2023, 10:00 p.m.';
+        expect(prettifyDate(unformattedMarch)).toBe(formattedMarch);
+        const unformattedApril = 'Apr. 1, 2023, 10:00AM';
+        const formattedApril = 'April 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedApril)).toBe(formattedApril);
+        const unformattedMay = 'May. 1, 2023, 10:00am';
+        const formattedMay = 'May 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedMay)).toBe(formattedMay);
+        const unformattedJune = 'Jun. 1, 2023, 10:00AM';
+        const formattedJune = 'June 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedJune)).toBe(formattedJune);
+        const unformattedAug = 'aug 1, 2023, 10:00PM';
+        const formattedAug = 'Aug. 1, 2023, 10:00 p.m.';
+        expect(prettifyDate(unformattedAug)).toBe(formattedAug);
+        const unformattedSept = 'sep. 1, 2023, 10:00PM';
+        const formattedSept = 'Sept. 1, 2023, 10:00 p.m.';
+        expect(prettifyDate(unformattedSept)).toBe(formattedSept);
+        const unformattedOct = 'oct 1, 2023, 10:00PM';
+        const formattedOct = 'Oct. 1, 2023, 10:00 p.m.';
+        expect(prettifyDate(unformattedOct)).toBe(formattedOct);
+    });
+    it('should work with lower or upper case', () => {
+        const unformattedMarch = 'MAR. 1, 2023, 10:00pm';
+        const formattedMarch = 'March 1, 2023, 10:00 p.m.';
+        expect(prettifyDate(unformattedMarch)).toBe(formattedMarch);
+        const unformattedApril = 'APR. 1, 2023, 10:00AM';
+        const formattedApril = 'April 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedApril)).toBe(formattedApril);
+        const unformattedMay = 'may. 1, 2023, 10:00am';
+        const formattedMay = 'May 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedMay)).toBe(formattedMay);
+        const unformattedJune = 'JUN. 1, 2023, 10:00AM';
+        const formattedJune = 'June 1, 2023, 10:00 a.m.';
+        expect(prettifyDate(unformattedJune)).toBe(formattedJune);
+        const unformattedAug = 'AUG. 1, 2023, 10:00PM';
+        const formattedAug = 'Aug. 1, 2023, 10:00 p.m.';
+        expect(prettifyDate(unformattedAug)).toBe(formattedAug);
+    });
+});

package/dist/utils/index.d.ts

@@ -4,3 +4,23 @@ export declare const random4: () => string;
  * Custom function that returns an author page URL.
  */
 export declare const getAuthorPageUrl: (author: string) => string;
+/** Formats a string containing a full or 3-letter abbreviated month, AM/PM, and am/pm to match the Reuters style.
+ *
+ * All months, full or abbreviated to 3 letters, are formatted to:
+ * - Jan.
+ * - Feb.
+ * - March
+ * - April]
+ * - May
+ * - June
+ * - July
+ * - Aug.
+ * - Sept.
+ * - Oct.
+ * - Nov.
+ * - Dec.
+ *
+ * AM and PM are formatted as lowercase.
+ *
+ */
+export declare const prettifyDate: (input: string) => string;

package/dist/utils/index.js

@@ -10,3 +10,72 @@ export const getAuthorPageUrl = (author) => {
     const authorSlug = slugify(author.trim(), { lower: true });
     return `https://www.reuters.com/authors/${authorSlug}/`;
 };
+/** Formats a string containing a full or 3-letter abbreviated month, AM/PM, and am/pm to match the Reuters style.
+ *
+ * All months, full or abbreviated to 3 letters, are formatted to:
+ * - Jan.
+ * - Feb.
+ * - March
+ * - April]
+ * - May
+ * - June
+ * - July
+ * - Aug.
+ * - Sept.
+ * - Oct.
+ * - Nov.
+ * - Dec.
+ *
+ * AM and PM are formatted as lowercase.
+ *
+ */
+export const prettifyDate = (input) => {
+    // Define an object to map full month names to their Reuters style equivalents
+    const conversions = {
+        // full months
+        january: 'Jan.',
+        february: 'Feb.',
+        august: 'Aug.',
+        september: 'Sept.',
+        october: 'Oct.',
+        november: 'Nov.',
+        december: 'Dec.',
+        // 3-letter abbreviations that need fixing
+        jan: 'Jan.',
+        feb: 'Feb.',
+        mar: 'March',
+        apr: 'April',
+        jun: 'June',
+        jul: 'July',
+        aug: 'Aug.',
+        sep: 'Sept.',
+        oct: 'Oct.',
+        nov: 'Nov.',
+        dec: 'Dec.',
+    };
+    // If the key in conversions is found in the input (case insensitive), replace it with the corresponding value
+    const formatted = Object.keys(conversions).reduce((acc, key) => {
+        const regex = new RegExp(`\\b${key}\\b`, 'gi'); // Added 'i' flag for case insensitive
+        return acc.replace(regex, conversions[key]);
+    }, input);
+    // Fix rogue periods in abbreviations (case insensitive)
+    const fixedAbbr = formatted
+        .replace(/\bmar\./gi, 'March')
+        .replace(/\bmarch\./gi, 'March')
+        .replace(/\bapr\./gi, 'April')
+        .replace(/\bapril\./gi, 'April')
+        .replace(/\bmay\./gi, 'May')
+        .replace(/\bjune\./gi, 'June')
+        .replace(/\bjuly\./gi, 'July')
+        .replace(/\bsep\./gi, 'Sept.');
+    // Replace double periods with a single period
+    const fixedPeriods = fixedAbbr.replace(/\.{2,}/g, '.');
+    // Fix am/pm formatting
+    return prettifyAmPm(fixedPeriods);
+};
+const prettifyAmPm = (text) => {
+    return text.replace(/(\d)\s*(am|AM|pm|PM)\b/g, (_match, digit, timeDesignator) => {
+        const formattedDesignator = timeDesignator.toLowerCase() === 'am' ? 'a.m.' : 'p.m.';
+        return `${digit} ${formattedDesignator}`;
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.14",
+  "version": "3.0.16",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -89,14 +89,15 @@
     "dayjs": "^1.11.13",
     "es-toolkit": "^1.35.0",
     "journalize": "^2.6.0",
+    "mp4box": "^0.5.4",
     "proper-url-join": "^2.1.2",
     "pym.js": "^1.3.2",
     "slugify": "^1.6.6",
     "storybook-addon-rtl": "^1.1.0",
     "svelte-fa": "^4.0.3",
     "svelte-intersection-observer": "^1.0.0",
-    "mp4box": "^0.5.4",
-    "ua-parser-js": "^2.0.3"
+    "ua-parser-js": "^2.0.3",
+    "vitest": "^3.2.4"
   },
   "exports": {
     ".": {
@@ -121,6 +122,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "changeset:version": "changeset version",
     "changeset:publish": "git add --all && changeset publish",
-    "knip": "knip"
+    "knip": "knip",
+    "test": "vitest"
   }
 }