@icij/murmur-next 4.0.0

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@icij/murmur-next",
+  "version": "4.0.0",
+  "private": false,
+  "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
+  "author": "promera@icij.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ICIJ/murmur-next"
+  },
+  "bugs": {
+    "url": "https://github.com/ICIJ/murmur-next/issues"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "format": "prettier --write lib/",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "test:unit": "vitest run"
+  },
+  "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",
+    "@storybook/preset-scss": "^1.0.3",
+    "@types/topojson": "^3.2.6",
+    "@types/vue-i18n": "^7.0.0",
+    "@vue/compat": "^3.4.19",
+    "bootstrap": "^5.3.3",
+    "bootstrap-vue-next": "^0.16.6",
+    "canvas": "^2.11.2",
+    "clipboard": "^2.0.11",
+    "d3": "^7.8.5",
+    "d3-geo-projection": "^4.0.0",
+    "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-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",
+    "@types/d3": "^7.4.3",
+    "@types/d3-geo": "^3.1.0",
+    "@types/jsonp": "^0.2.3",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/test-utils": "^2.4.4",
+    "eslint": "^8.56.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",
+    "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",
+    "vue-headroom": "github:caro3801/vue-headroom"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.19"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+}

package/plugins/MdPluginTypes.ts

@@ -0,0 +1,10 @@
+export interface ReturnValue {
+  code?: string
+  meta?: object
+}
+export interface MdPluginTypes {
+  enforce: 'pre' | 'post' | undefined
+  name: string
+  transform: (_: string, id: string) => Promise<ReturnValue>
+}
+export type TokenMap = { [key: string]: { nesting: number; info: string; content: string } }

package/plugins/docs.ts

@@ -0,0 +1,50 @@
+import frontMatter from 'front-matter'
+import glob from 'fast-glob'
+import { promises as fs } from 'fs'
+import { dirname } from 'path'
+import sortBy from 'lodash/sortBy'
+
+export const ROUTE_SECTIONS = [
+  'getting-started',
+  'visual',
+  'structure',
+  'components',
+  'datavisualisation',
+  'maps',
+  'utilities'
+]
+  
+export default function myPlugin() {
+  const virtualModuleId = 'virtual:docs'
+  const resolvedVirtualModuleId = '\0' + virtualModuleId
+
+  return {
+    name: 'my-plugin', // required, will show up in warnings and errors
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId
+      }
+    },
+    async load(id) {
+      if (id === resolvedVirtualModuleId) {
+        const routes: object[] = []
+        const pages = await glob('./docs/pages/**/*.md')
+
+        for (const page of pages) {
+          const name = dirname(page).split('/').pop()
+          const section = dirname(page).split('/').slice(0, -1).pop()
+          const sectionId = ROUTE_SECTIONS.indexOf(<string>section)
+          const path = `/${section}/${name}`
+          const md = await fs.readFile(page, 'utf8')
+          const { attributes: frontMatterMeta } = <any>frontMatter(md)
+          const meta = { section, sectionId, order: 1, ...frontMatterMeta}
+          routes.push({ name, path, meta })
+        }
+
+        const sortedRoutes = sortBy(routes, ['meta.sectionId', 'meta.order'])
+
+        return `export default ${JSON.stringify(sortedRoutes)}`
+      }
+    }
+  }
+}

package/plugins/front-matter.ts

@@ -0,0 +1,36 @@
+import { dirname, extname } from 'path'
+import { promises as fs } from 'fs'
+import frontMatter from 'front-matter'
+import startCase from 'lodash/startCase'
+import url from 'url'
+
+import { MdPluginTypes, ReturnValue } from './MdPluginTypes'
+
+export default function (): MdPluginTypes {
+  return {
+    enforce: 'post',
+    name: 'vite-plugin-front-matter',
+    async transform(_: string, id: string): Promise<ReturnValue> {
+      const parsedId = url.parse(id, true)
+      const isFrontMatter = 'front-matter' in parsedId.query
+
+      if (!isFrontMatter || !parsedId.pathname) {
+        return {}
+      }
+
+      const title = startCase(dirname(parsedId.pathname).split('/').pop())
+
+      let metadata = { title }
+
+      if (extname(parsedId.pathname) === '.md') {
+        const raw = await fs.readFile(parsedId.pathname, 'utf8')
+        const { attributes: frontMatterMetadata } = <any>frontMatter(raw)
+        metadata = { ...metadata, ...frontMatterMetadata }
+      }
+
+      const json = JSON.stringify(metadata, null, 2)
+      const code = `export default ${json}`
+      return { code }
+    }
+  }
+}

package/plugins/highlight.ts

@@ -0,0 +1,27 @@
+import { promises as fs } from 'fs'
+import url from 'url'
+import hljs from 'highlight.js'
+
+import { MdPluginTypes, ReturnValue } from './MdPluginTypes'
+
+export default function (): MdPluginTypes {
+  return {
+    enforce: 'post',
+    name: 'vite-plugin-highlight',
+    async transform(_: string, id: string): Promise<ReturnValue> {
+      const parsedId = url.parse(id, true)
+      const isHighlight = 'highlight' in parsedId.query
+
+      if (!isHighlight || !parsedId.pathname) {
+        return {}
+      }
+
+      const raw = await fs.readFile(parsedId.pathname, 'utf8')
+      const language = String(parsedId.query.highlight)
+      const { value } = hljs.getLanguage(language) ? hljs.highlight(raw, { language }) : hljs.highlightAuto(raw)
+      const buff = Buffer.from(JSON.stringify(value))
+      const code = `export default ${buff}`
+      return { code }
+    }
+  }
+}

package/plugins/markdown-it/api-table.ts

@@ -0,0 +1,25 @@
+// @ts-ignore
+import container from 'markdown-it-container'
+
+import { TokenMap } from '../MdPluginTypes'
+
+export default function (name = 'api-table'): any[] {
+  return [
+    container,
+    name,
+    {
+      render(tokens: TokenMap, idx: string) {
+        if (tokens[idx].nesting === 1) {
+          const pathMatches = tokens[idx].info
+            .slice(name.length + 1)
+            .trim()
+            .match(/(.*\.vue)/)
+          const path = pathMatches?.[1] ?? ''
+          return `<api-table path="${path}" />`
+        } else {
+          return `\n`
+        }
+      }
+    }
+  ]
+}

package/plugins/markdown-it/sample-card.ts

@@ -0,0 +1,31 @@
+import hljs from 'highlight.js'
+// @ts-ignore
+import container from 'markdown-it-container'
+
+import { TokenMap } from '../MdPluginTypes'
+
+export default function (name = 'sample-card') {
+  return [
+    container,
+    name,
+    {
+      render(tokens: TokenMap, idx: string) {
+        if (tokens[idx].nesting === 1) {
+          const language = tokens[idx].info.slice(name.length + 1).trim() || 'html'
+          const rawCode = tokens[idx + 1].content
+          const code = hljs.highlight(rawCode, { language })
+          const sanitizedCode = code.value.replace(/{{/, '{<span></span>{')
+          return `<div class="d-flex flex-column-reverse">
+        <sample-card lang="${language}">
+          <template slot="code">
+            <pre><code class="${language}">${sanitizedCode}</code></pre>
+          </template>
+        </sample-card>
+        <div class="border bg-light">`
+        } else {
+          return `</div></div>`
+        }
+      }
+    }
+  ]
+}

package/plugins/plugin-delete.ts

@@ -0,0 +1,47 @@
+import { existsSync, readdirSync, statSync, unlinkSync, rmdirSync } from 'fs'
+import { resolve, join } from 'path'
+import type { Plugin } from 'vite'
+
+export interface ConfigOptions{
+    targetFiles?: string[]
+}
+
+function cleanFiles(dirPath) {
+    if (existsSync(dirPath)) {
+        let files = readdirSync(dirPath)
+
+        files.forEach(file => {
+            let path = join(dirPath, file);
+
+            if (statSync(path).isDirectory()) {
+                cleanFiles(path);
+                rmdirSync(path);
+            } else {
+                unlinkSync(path);
+            }
+        });
+    }
+}
+
+export function Delete(options: ConfigOptions = {}): Plugin {
+    const {targetFiles = ['dist']} = options;
+
+    return {
+        name: 'vite-plugin-clean',
+        enforce: 'pre',
+        apply: 'build',
+        buildStart: (_config) => {
+            const rootDirectory = process.cwd();
+
+            if (Array.isArray(targetFiles)) {
+                for (let i = 0; i < targetFiles.length; i++) {
+                    cleanFiles(resolve(rootDirectory, targetFiles[i]));
+                }
+            } else {
+                cleanFiles(resolve(rootDirectory, targetFiles));
+            }
+        }
+    }
+}
+
+export default Delete

package/plugins/plugin-docgen.ts

@@ -0,0 +1,23 @@
+import type { Plugin } from 'vite'
+
+export function VueDocgen(): Plugin {
+    return {
+        name: 'vue-docgen',
+        transform(_, id) {
+            // If vue file doesn't have a <docs> block, don't transform
+            if (!/vue&type=docs/.test(id)) {
+                return;
+            }
+
+            // If vue file has a <docs> block, ignore it in the output
+            return {
+                code: 'export default Comp => {Comp}',
+                map: {
+                    mappings: '',
+                },
+            };
+        },
+    }
+}
+
+export default VueDocgen

package/plugins/sass-vars.ts

@@ -0,0 +1,25 @@
+import { promises as fs } from 'fs'
+import url from 'url'
+import getSassVars from 'get-sass-vars'
+
+import { MdPluginTypes, ReturnValue } from './MdPluginTypes'
+
+export default function (): MdPluginTypes {
+  return {
+    enforce: 'post',
+    name: 'vite-plugin-sass-vars',
+    async transform(_: string, id: string): Promise<ReturnValue> {
+      const parsedId = url.parse(id, true)
+      const isSassVars = 'sass-vars' in parsedId.query
+
+      if (!isSassVars || !parsedId.pathname) {
+        return {}
+      }
+      const raw = await fs.readFile(parsedId.pathname, 'utf-8')
+      const vars = await getSassVars(raw)
+      const json = JSON.stringify(vars, null, 2)
+      const code = `export default ${json}`
+      return { code }
+    }
+  }
+}

package/plugins/vue-docgen.ts

@@ -0,0 +1,29 @@
+import url from 'url'
+import vueDocs from 'vue-docgen-api'
+
+import { MdPluginTypes, ReturnValue } from './MdPluginTypes'
+
+export default function (): MdPluginTypes {
+  return {
+    enforce: 'post',
+    name: 'vite-plugin-vue-docgen',
+    async transform(_: string, id: string): Promise<ReturnValue> {
+      const parsedId = url.parse(id, true)
+      const isVueDocgen = 'vue-docgen' in parsedId.query
+
+      if (!isVueDocgen || !parsedId.pathname) {
+        return {}
+      }
+
+      try {
+        const api = await vueDocs.parse(parsedId.pathname)
+        const buff = Buffer.from(JSON.stringify(api))
+        return { code: `export default ${buff}` }
+      } catch (_) {
+        const emptyApi = { props: {}, slots: {}, events: {}, methods: {} }
+        const buff = JSON.stringify(emptyApi)
+        return { code: `export default ${buff}` }
+      }
+    }
+  }
+}

package/public/assets/img/arrow-bottom.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 69.455734 78.168022">
+  <path d="M64.45646 2.4180002c-.057 4.408-1.813 8.3769998-3.195 12.4929998-1.263 3.76-2.235 7.518-3.838 11.167-3.221 7.336-8.306 13.747-13.931 19.382-5.459 5.469-12.055 9.641-18.719 13.468-5.95 3.418-12.781 4.88-18.7679997 8.123 1.17-2.008 2.954-3.843 4.2229997-5.561 2.24-3.032 3.152-6.826 5.495-9.805 1.97-2.504-1.543-6.068-3.536-3.536-2.6229997 3.335-3.9169997 7.332-6.2769997 10.817-2.096 3.095-5.31300005 5.914-5.86600005 9.787-.16 1.123.087 2.213 1.14900005 2.823 6.826 3.921 14.3579997 6.387 22.2619997 6.591 3.226.083 3.218-4.917 0-5-4.562-.118-8.955-1.114-13.138-2.743 5.951-2.921 12.569-4.646 18.372-7.979 7.55-4.337 14.594-9.447 20.6-15.774 5.41-5.699 9.89-12.237 13.048-19.429 1.565-3.564 2.653-7.274 3.745-11.002 1.37-4.682 3.309-8.8579998 3.373-13.8219998.043-3.22599997-4.957-3.22199997-4.999 0z"/>
+</svg>