@icij/murmur-next 4.0.4 → 4.0.5

package/lib/components/Brand.vue

@@ -27,6 +27,7 @@
  */
 import { computed, ref } from 'vue'
 import isString from 'lodash/isString'
+import { CSSProperties } from 'vue';
 
 interface BrandProps {
   /**
@@ -36,11 +37,11 @@ interface BrandProps {
   /**
    * Monochromatic logo's color
    */
-  color?: string | null
+  color?: string | undefined
   /**
    * Logo's background color
    */
-  background?: string | null
+  background?: string | undefined
   /**
    * Logo's size
    */
@@ -51,16 +52,15 @@ interface BrandProps {
   square?: boolean
 }
 
-interface BrandStyle {
-  '--monochrome-color': string | null
-  color: string | null
-  background: string | null
-  width: string | number
+interface BrandStyle extends CSSProperties{
+  '--monochrome-color': string | undefined;
+  width: string | number;
 }
 
+
 const props = withDefaults(defineProps<BrandProps>(), {
-  color: null,
-  background: null,
+  color: undefined,
+  background: undefined,
   size: '70px'
 })
 const sizeAsNumber = ref(

package/lib/components/OrdinalLegend.vue

@@ -3,7 +3,7 @@ import { get, isFunction, kebabCase, uniqueId } from 'lodash'
 import * as d3 from 'd3'
 import { defineComponent, PropType, computed } from 'vue'
 
-type Datum = { id: string; color: string; path: string; label: string }
+type Datum = { id?: string; color: string; path?: string; label: string }
 type Category = 'id' | 'color' | 'path' | 'label'
 export default defineComponent({
   name: 'OrdinalLegend',

package/lib/components/RangePicker.vue

@@ -16,7 +16,8 @@ import { clamp, get, has, invoke, round } from 'lodash'
 import Fa, { library } from './Fa'
 
 import type { Variant } from '@/types'
-
+import isEqual from "lodash/isEqual";
+type DragDropValue = {detail:number}
 /**
  * A component to wrap an HTML element with a range picker overlay.
  */
@@ -39,7 +40,7 @@ export default defineComponent({
           name: string
           data?: any
         }) {
-          vnode.el.dispatchEvent(new CustomEvent(name, { detail: data }))
+          vnode.el?.dispatchEvent(new CustomEvent(name, { detail: data }))
           //const handlers = get(vnode, 'data.on') ?? get(vnode, 'componentOptions.listeners')
           /*if (has(handlers, name)) {
             invoke(handlers, `${name}.fns`, data)
@@ -216,19 +217,19 @@ export default defineComponent({
       }
     })
 
-    function toggleMoving(value) {
+    function toggleMoving(value:boolean) {
       moving.value = value ?? !moving.value
     }
-    function toggleResizing(value) {
+    function toggleResizing(value:boolean) {
       resizing.value = value ?? !resizing.value
     }
-    function snapValue(value): number {
+    function snapValue(value:number): number {
       return round(value / props.snap) * props.snap
     }
     function rangeWidth(): number {
       return rangePickerBounds.value?.getBoundingClientRect().width ?? 0
     }
-    function dragStartBound({ detail: dx }) {
+    function dragStartBound({ detail: dx }:DragDropValue) {
       const newValue = snapValue(dx / rangeWidth())
       // Ensure start value doesn't get too close to end value
       if (newValue < end.value - props.minDistance) {
@@ -241,7 +242,7 @@ export default defineComponent({
         emit('update:range', [start.value, end.value])
       }
     }
-    function dragEndBound({ detail: dx }) {
+    function dragEndBound({ detail: dx }:DragDropValue) {
       const newValue = snapValue(dx / rangeWidth())
       // Ensure end value doesn't get too close to start value
       if (newValue > start.value + props.minDistance) {
@@ -254,7 +255,7 @@ export default defineComponent({
         emit('update:range', [start.value, end.value])
       }
     }
-    function dragBounds({ detail: dx }) {
+    function dragBounds({ detail: dx }:DragDropValue) {
       const diff = snapValue(end.value - start.value)
       const newValue = snapValue(dx / rangeWidth())
       start.value = round(newValue, props.precision)
@@ -269,6 +270,12 @@ export default defineComponent({
     function valueWithUnit(value: number | string): string {
       return typeof value === 'number' ? `${value}px` : `${value}`
     }
+
+    watch(()=>props.range, (newRange) => {
+      start.value = newRange[0] ?? 0 ;
+      end.value = newRange[1] ?? 0;
+    })
+
     return {
       rangePickerBounds,
       start,

package/lib/composables/chart.ts

@@ -98,11 +98,11 @@ export function useChart(
   props: ChartProps,
   { emit }: ChartEmit,
   isLoaded: Ref<boolean>,
-  onResized?: Function,
+  onResized?: ()=>void,
   afterLoaded?: () => Promise<any>
 ): Chart {
   const { resizeRef, resizeState } = useResizeObserver(resizableRef)
-  const loadedData = ref([])
+  const loadedData = ref<unknown|unknown[]>([])
 
   onMounted(async () => {
     await document.fonts?.ready
@@ -110,7 +110,7 @@ export function useChart(
     watchEffect(async () => {
       if (!isLoaded.value) {
         if (isString(props.data)) {
-          // @ts-ignore
+          // @ts-expect-error introspection in typescript is tricky
           loadedData.value = await d3[props.dataUrlType](props.data)
         } else {
           loadedData.value = props.data as unknown as []
@@ -134,11 +134,14 @@ export function useChart(
     defaultWidth = null,
     defaultHeight = null
   } = {}) {
-    const elements = isLoaded.value
-      ? resizeRef.value?.querySelectorAll(selector)
-      : []
+    const returnDefault = { width: defaultWidth, height: defaultHeight }
+    if(!isLoaded.value || !resizeRef.value){
+      return returnDefault
+    }
+    const elements: NodeListOf<SVGGraphicsElement> = resizeRef.value.querySelectorAll(selector)
+
     if (elements.length == 0) {
-      return { width: defaultWidth, height: defaultHeight }
+      return returnDefault
     }
     const width = max(
       [...elements].map((l) => {

package/lib/composables/resizeObserver.ts

@@ -1,5 +1,5 @@
 import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
-import { Ref, nextTick } from 'vue'
+import { Ref } from 'vue'
 import ResizeObserver from 'resize-observer-polyfill'
 
 export const useResizeObserver = (resizableRef?: Ref) => {

package/lib/composables/sendEmail.ts

@@ -2,7 +2,6 @@ import jsonp from 'jsonp'
 import { computed, MaybeRefOrGetter, toValue } from 'vue'
 import flatten from 'lodash/flatten'
 import castArray from 'lodash/castArray'
-import { Ref } from 'react'
 
 type FormDataResult = { result: string; msg: string }
 // by convention, composable function names start with "use"

package/lib/config.ts

@@ -1,6 +1,6 @@
 import get from 'lodash/get'
 import each from 'lodash/each'
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
 import defaultValues from './config.default'
 import { Ref } from '@vue/runtime-core'
 
@@ -32,7 +32,7 @@ export class Config {
     }
     return value
   }
-  get(key: string, defaultValue?: Object | null) {
+  get(key: string, defaultValue?: NonNullable<unknown> | null) {
     return get(this._VALUES.value, key, defaultValue)
   }
   is(key: string) {

package/lib/locales/en.json

@@ -46,7 +46,7 @@
     "investigations": "Investigations",
     "follow-us": "Follow us",
     "all-rights": "All rights reserved",
-    "version": "Version %{version}"
+    "version": "Version {version}"
   },
   "donate-form": {
     "support": "Support us",

package/lib/locales/fr.json

@@ -30,7 +30,7 @@
     "investigations": "Enquêtes",
     "follow-us": "Suivez nous",
     "all-rights": "Tous droits réservés",
-    "version": "Version %{version}"
+    "version": "Version {version}"
   },
   "donate-form": {
     "support": "Soutenez nous",

package/lib/main.ts

@@ -4,7 +4,7 @@ import * as components from './components'
 import * as datavisualisations from './datavisualisations'
 import * as maps from './maps'
 import config from './config'
-import { type App } from 'vue'
+import { App,Component,DefineComponent } from 'vue'
 
 export { default as AccordionWrapper } from './components/AccordionWrapper.vue'
 export { default as AccordionStep } from './components/AccordionStep.vue'
@@ -46,6 +46,9 @@ export { default as StackedBarChart } from './datavisualisations/StackedBarChart
 export { default as ChoroplethMap } from './maps/ChoroplethMap.vue'
 export { default as SymbolMap } from './maps/SymbolMap.vue'
 
+type ComponentMap = {[name:string]:Component|DefineComponent}
+
+
 const Murmur = {
   get i18n() {
     return i18n
@@ -53,9 +56,15 @@ const Murmur = {
   get config() {
     return config
   },
-  get components() {
+  get components() :ComponentMap{
     return components
   },
+  get datavisualisations() : ComponentMap{
+    return datavisualisations
+  },
+  get maps() : ComponentMap{
+    return maps
+  },
   setLocaleMessage(lang: string, message: any) {
     return Murmur.i18n.global.setLocaleMessage(lang, message)
   },
@@ -63,11 +72,11 @@ const Murmur = {
     return Murmur.i18n.global.mergeLocaleMessage(lang, message)
   },
   setLocale(lang: 'fr' | 'en') {
-    // @ts-ignore
+    // @ts-expect-error not sure why typescript sees an error here
     return (Murmur.i18n.global.locale.value = lang)
   },
   getLocale() {
-    // @ts-ignore
+    // @ts-expect-error not sure why typescript sees an error here
     return Murmur.i18n.global.locale.value
   },
   install(app: App<Element>) {
@@ -75,16 +84,13 @@ const Murmur = {
     app.use(i18n)
 
     app.config.globalProperties.$config = Murmur.config
-    // @ts-ignore
-    Object.keys(components).forEach((key) =>
-      app.component(key, components[key])
+    Object.keys(this.components).forEach((key) =>
+      app.component(key, this.components[key])
     )
-    // @ts-ignore
-    Object.keys(datavisualisations).forEach((key) =>
-      app.component(key, datavisualisations[key])
+    Object.keys(this.datavisualisations).forEach((key) =>
+      app.component(key, this.datavisualisations[key])
     )
-    // @ts-ignore
-    Object.keys(maps).forEach((key) => app.component(key, maps[key]))
+    Object.keys(this.maps).forEach((key) => app.component(key, this.maps[key]))
   }
 }
 

package/lib/maps/ChoroplethMap.vue

@@ -16,7 +16,7 @@ import { geoRobinson } from 'd3-geo-projection'
 import type { GeoProjection } from 'd3-geo'
 import { geoGraticule } from 'd3-geo'
 import { feature } from 'topojson'
-import { GeometryCollection } from 'topojson-specification'
+import type { GeometryCollection } from 'topojson-specification'
 
 import {
   ComponentPublicInstance,

package/lib/maps/ChoroplethMapAnnotation.vue

@@ -142,11 +142,11 @@ export default defineComponent({
     })
 
     const position = computed(() => {
-      const [x, y] = projection.value(center.value)
+      const [x, y] = projection.value(center.value) || []
       return { x, y }
     })
 
-    const mapK = computed(() => {
+    const mapK = computed(():number => {
       return mapTransform.value.k
     })
 

package/lib/maps/SymbolMap.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import * as d3 from 'd3'
-import { GeoPermissibleObjects } from 'd3'
+import type { GeoPermissibleObjects } from 'd3'
 import { geoRobinson } from 'd3-geo-projection'
 import { feature } from 'topojson'
 import {
@@ -33,7 +33,8 @@ import {
   ref,
   watch
 } from 'vue'
-import { GeometryCollection } from 'topojson-specification'
+import type { GeometryCollection } from 'topojson-specification'
+import { PopoverPlacement } from 'bootstrap-vue-next'
 
 export default defineComponent({
   components: {
@@ -73,7 +74,7 @@ export default defineComponent({
       default: 15
     },
     markerObjectsPath: {
-      type: [String, Array],
+      type: [String, Array] as PropType<string | string[]>,
       default: 'id'
     },
     markerPath: {
@@ -97,7 +98,7 @@ export default defineComponent({
       default: null
     },
     tooltipPlacement: {
-      type: String,
+      type: String as PropType<PopoverPlacement>,
       default: 'top'
     },
     tooltipFallbackPlacement: {

package/lib/shims-pym.d.ts

@@ -0,0 +1,7 @@
+declare module 'pym.js' {
+  export class Child {
+    constructor(options: any)
+    sendHeight(): void
+  }
+}
+

package/lib/shims-vue.d.ts

@@ -9,6 +9,6 @@ declare module 'vue' {
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
+  const component: DefineComponent<NonNullable<unknown>, NonNullable<unknown>, any>
   export default component
 }

package/lib/types.ts

@@ -45,17 +45,17 @@ export type Variant =
   | 'light'
 
 export type MapTransform = {
-  k: number
-  x: number
-  y: number
-  rotateX: number
+  k: number,
+  x: number,
+  y: number,
+  rotateX: number,
   rotateY: number
 }
 
 export type ParentMap = {
   mapRect: Ref<DOMRect>
   mapTransform: Ref<MapTransform>
-  rotatingMapProjection: ComputedRef<GeoProjection | Function>
+  rotatingMapProjection: ComputedRef<GeoProjection | (()=>number[])>
 }
 export type ParentMapProvide = {
   [ParentKey]: ParentMap

package/lib/utils/iframe-resizer.ts

@@ -15,7 +15,7 @@ export default class IframeResizer {
   constructor() {
     this.initializer = injectAssets('//pym.nprapps.org/pym.v1.min.js').then(
       () => {
-        pymChild = pymChild || new window.pym.Child({ polling: 300 })
+        pymChild = pymChild || new (window as any).pym.Child({ polling: 300 })
         return pymChild
       }
     )

package/lib/utils/placeholder.ts

@@ -2,7 +2,6 @@ import {
   BoxStyle,
   ContentPlaceholderStyledRow,
   ContentPlaceholderRow,
-  ContentPlaceholderRowBoxes,
   ContentPlaceholderStyledRows,
   ContentPlaceholderRows
 } from '@/utils/placeholderTypes'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icij/murmur-next",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "private": false,
   "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
   "author": "promera@icij.org",
@@ -16,7 +16,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "lint": "eslint . --fix",
     "format": "prettier --write lib/ stories/ .storybook/ tests/",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -40,65 +40,72 @@
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/vue-fontawesome": "^3.0.6",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
     "@storybook/preset-scss": "^1.0.3",
+    "@storybook/test": "^8.1.4",
     "@types/topojson": "^3.2.6",
     "@types/vue-i18n": "^7.0.0",
-    "@vue/compat": "^3.4.19",
+    "@vue/compat": "^3.4.27",
     "bootstrap": "^5.3.3",
     "bootstrap-vue-next": "^0.16.6",
     "canvas": "^2.11.2",
     "clipboard": "^2.0.11",
-    "d3": "^7.8.5",
+    "d3": "^7.9.0",
     "d3-geo-projection": "^4.0.0",
+    "eslint-plugin-vitest": "^0.5.4",
     "jsonp": "^0.2.1",
     "lodash": "^4.17.21",
     "mutationobserver-shim": "^0.3.7",
     "querystring-es3": "^0.2.1",
     "resize-observer-polyfill": "^1.5.1",
     "topojson": "^3.0.2",
-    "vue": "^3.4.19",
-    "vue-i18n": "^9.9.1",
+    "vue": "^3.4.27",
+    "vue-i18n": "^9.13.1",
     "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "^2.0.0",
-    "@rushstack/eslint-patch": "^1.7.2",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
-    "@storybook/addon-themes": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^7.6.17",
-    "@storybook/vue3-vite": "^7.6.17",
+    "@chromatic-com/storybook": "^1",
+    "@eslint/js": "^9.3.0",
+    "@icij/eslint-config": "^2.0.0",
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-interactions": "^8.1.4",
+    "@storybook/addon-links": "^8.1.4",
+    "@storybook/addon-mdx-gfm": "^8.1.4",
+    "@storybook/addon-themes": "^8.1.4",
+    "@storybook/blocks": "^8.1.4",
+    "@storybook/vue3": "^8.1.4",
+    "@storybook/vue3-vite": "^8.1.4",
     "@types/d3": "^7.4.3",
     "@types/d3-geo": "^3.1.0",
+    "@types/eslint__js": "^8.42.3",
     "@types/jsonp": "^0.2.3",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/test-utils": "^2.4.4",
-    "eslint": "^8.56.0",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.3.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-vue": "^9.21.1",
-    "jsdom": "^24.0.0",
-    "msw": "^2.2.1",
-    "msw-storybook-addon": "^1.10.0",
+    "eslint-plugin-vue": "^9.26.0",
+    "jsdom": "^24.1.0",
+    "msw": "^2.2.12",
+    "msw-storybook-addon": "^2.0.2",
     "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.71.1",
-    "storybook": "^7.6.17",
-    "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.4",
-    "vite-plugin-dts": "^3.7.2",
-    "vitest": "^1.3.1",
-    "vue-docgen-cli": "^4.67.0",
+    "sass": "^1.77.2",
+    "storybook": "^8.1.4",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.11.0",
+    "unplugin-vue-components": "^0.27.0",
+    "vite": "^5.2.12",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.6.0",
+    "vue-docgen-cli": "^4.79.0",
     "vue-headroom": "github:caro3801/vue-headroom"
   },
   "peerDependencies": {
@@ -108,8 +115,5 @@
     "singleQuote": true,
     "semi": false,
     "trailingComma": "none"
-  },
-  "resolutions": {
-    "jackspeak": "2.1.1"
   }
 }

package/dist/lib/components/AccordionStep.vue.d.ts

@@ -1,79 +0,0 @@
-/// <reference types="@/shims-vue" />
-/// <reference types="vue-i18n" />
-import { PropType } from '../../node_modules/vue';
-import { Accordion, Step } from '../types';
-declare const _default: import('../../node_modules/vue').DefineComponent<{
-    /**
-     * Step name
-     */
-    step: {
-        type: (SymbolConstructor | StringConstructor | (() => Step))[];
-        required: true;
-    };
-    /**
-     * Title of the step card
-     */
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Content of the step card
-     */
-    content: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Force card expansion/collapse
-     */
-    active: {
-        type: PropType<boolean | undefined>;
-        default: boolean;
-    };
-}, {
-    isFirst: import('../../node_modules/vue').ComputedRef<boolean>;
-    isLast: import('../../node_modules/vue').ComputedRef<boolean>;
-    isActive: import('../../node_modules/vue').ComputedRef<boolean>;
-    isPrevious: import('../../node_modules/vue').ComputedRef<boolean>;
-    nextStep: () => void;
-    previousStep: () => void;
-    accordion: Accordion | undefined;
-}, unknown, {}, {}, import('../../node_modules/vue').ComponentOptionsMixin, import('../../node_modules/vue').ComponentOptionsMixin, ("next-step" | "previous-step")[], "next-step" | "previous-step", import('../../node_modules/vue').PublicProps, Readonly<import('../../node_modules/vue').ExtractPropTypes<{
-    /**
-     * Step name
-     */
-    step: {
-        type: (SymbolConstructor | StringConstructor | (() => Step))[];
-        required: true;
-    };
-    /**
-     * Title of the step card
-     */
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Content of the step card
-     */
-    content: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Force card expansion/collapse
-     */
-    active: {
-        type: PropType<boolean | undefined>;
-        default: boolean;
-    };
-}>> & {
-    "onNext-step"?: ((...args: any[]) => any) | undefined;
-    "onPrevious-step"?: ((...args: any[]) => any) | undefined;
-}, {
-    content: string;
-    title: string;
-    active: boolean | undefined;
-}, {}>;
-export default _default;