@icij/murmur-next 4.0.0 → 4.0.1

package/dist/lib/types.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="@/shims-vue" />
+/// <reference types="node_modules/vue-i18n/dist/vue-i18n" />
+import type { StyleValue } from '../node_modules/vue';
+import { AccordionKey, ParentKey } from './keys';
+import { ComputedRef } from '../node_modules/vue';
+import type { GeoProjection } from 'd3-geo';
+import { Ref } from '../node_modules/vue';
+export type Step = symbol | string;
+export type Accordion = {
+    emitAccordionNextStepEvent: () => void;
+    emitAccordionPreviousStepEvent: () => void;
+    isActiveStep: (step: Step) => boolean;
+    isPreviousStep: (step: Step) => boolean;
+    isFirstStep: (step: Step) => boolean;
+    isLastStep: (step: Step) => boolean;
+    step: Step;
+    steps: Step[];
+};
+export type AccordionProvide = {
+    [AccordionKey]: Accordion;
+};
+export type BrandStyle = StyleValue & {
+    '--monochrome-color': string;
+    color: string;
+    background: string;
+    width: string;
+};
+export type BrandExpansionStyle = Pick<BrandStyle, '--monochrome-color' | 'background'>;
+export type Variant = 'primary' | 'secondary' | 'danger' | 'info' | 'warning' | 'success' | 'dark' | 'light';
+export type MapTransform = {
+    k: number;
+    x: number;
+    y: number;
+    rotateX: number;
+    rotateY: number;
+};
+export type ParentMap = {
+    mapRect: Ref<DOMRect>;
+    mapTransform: Ref<MapTransform>;
+    rotatingMapProjection: ComputedRef<GeoProjection | Function>;
+};
+export type ParentMapProvide = {
+    [ParentKey]: ParentMap;
+};

package/dist/lib/utils/animation.d.ts

@@ -0,0 +1,8 @@
+export declare class RequestAnimationFrameWrapper {
+    live: boolean;
+    callback: () => void;
+    constructor();
+    start(callback: () => void): void;
+    stop(): void;
+    schedule(): void;
+}

package/dist/lib/utils/assets.d.ts

@@ -0,0 +1,2 @@
+export declare const injectAsset: ((file: string, id?: string) => Promise<unknown>) & import("lodash").MemoizedFunction;
+export declare const injectAssets: (...args: string[]) => Promise<void>;

package/dist/lib/utils/clipboard.d.ts

@@ -0,0 +1,2 @@
+export declare function copyText(text: string, container: Element): Promise<void>;
+export declare function copyHtml(html: string, plain: string): void;

package/dist/lib/utils/iframe-resizer.d.ts

@@ -0,0 +1,10 @@
+import { Child as PymChild } from 'pym.js';
+export default class IframeResizer {
+    initializer: Promise<PymChild>;
+    constructor();
+    sendHeight(): Promise<void>;
+    static create(): IframeResizer;
+    static template(url: string, id?: string): string;
+    static deletePymParams(href?: string): string;
+    static isEmbedded(href?: string): boolean;
+}

package/dist/lib/utils/placeholder.d.ts

@@ -0,0 +1,12 @@
+import { BoxStyle, ContentPlaceholderStyledRows, ContentPlaceholderRows } from './placeholderTypes';
+export declare function isFlexBasis(value: string | number): boolean;
+export declare function isWidth(value: string | number): boolean;
+export declare function getBoxStyle(left: number, width: number, isLast: boolean, subClass?: string): BoxStyle[];
+export declare function formatRows(rows: ContentPlaceholderRows, subClass?: string): ContentPlaceholderStyledRows;
+declare const _default: {
+    isFlexBasis: typeof isFlexBasis;
+    isWidth: typeof isWidth;
+    getBoxStyle: typeof getBoxStyle;
+    formatRows: typeof formatRows;
+};
+export default _default;

package/dist/lib/utils/placeholderTypes.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="@/shims-vue" />
+/// <reference types="vue-i18n" />
+import type { StyleValue } from '../../node_modules/vue';
+export interface BoxStyle {
+    style: StyleValue;
+    subClass?: string;
+}
+export type ContentPlaceholderRowBoxes = Array<Array<number | string>>;
+export interface ContentPlaceholderRow {
+    height: number | string;
+    boxes: ContentPlaceholderRowBoxes;
+}
+export interface ContentPlaceholderStyledRow {
+    height: number | string;
+    boxes: Array<BoxStyle>;
+}
+export type ContentPlaceholderStyledRows = Array<ContentPlaceholderStyledRow>;
+export type ContentPlaceholderRows = Array<ContentPlaceholderRow>;

package/dist/lib/utils/strings.d.ts

@@ -0,0 +1 @@
+export declare function isUrl(value: string): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icij/murmur-next",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "private": false,
   "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
   "author": "promera@icij.org",
@@ -23,6 +23,20 @@
     "test": "vitest",
     "test:unit": "vitest run"
   },
+  "main": "./dist/lib/murmur.umd.cjs",
+  "module": "./dist/lib/murmur.js",
+  "files": [
+    "lib/**/*",
+    "dist/lib/**/*"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/lib/murmur.js",
+      "require": "./dist/lib/murmur.umd.cjs"
+    },
+    "./lib/": "./lib/",
+    "./dist/": "./dist/"
+  },
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",

package/.github/workflows/deploy-github-pages.yaml

@@ -1,50 +0,0 @@
-# Workflow name
-name: Build and Publish Storybook to GitHub Pages
-
-on:
-  # Event for the workflow to run on
-  push:
-    branches:
-      - 'main' # Replace with the branch you want to deploy from
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# List of jobs
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    # Job steps
-    steps:
-      # Manual Checkout
-      - uses: actions/checkout@v3
-
-      # Set up Node
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '18.x'
-          cache: 'yarn'
-
-      - name: Install Node dependencies
-        run: yarn --frozen-lockfile
-
-      - name: Run tests
-        run: yarn test
-
-      - name: Build Murmur
-        run: yarn build
-
-      - name: Build storybook artifacts
-        run: yarn build-storybook
-
-      # Upload storybook to repository's artifacts
-      - name: Upload storybook artifacts
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: storybook-static
-
-      - uses: actions/deploy-pages@v4
-
-

package/.storybook/app.scss

@@ -1,14 +0,0 @@
-@import './doc_variables.scss';
-@import '../lib/styles/lib';
-@import 'node_modules/bootstrap/scss/bootstrap';
-@import 'node_modules/bootstrap-vue-next/dist/bootstrap-vue-next';
-.bg-striped {
-  background: repeating-linear-gradient(45deg, #dfdddd, #dfdddd 10px, #cfcccc 10px, #cfcccc 20px);
-  width:500px
-}
-@include color-mode(dark) {
-  .bg-striped  {
-    background: repeating-linear-gradient(45deg, #222, #333 10px, #444 10px, #444 20px);
-
-  }
-}

package/.storybook/doc_variables.scss

@@ -1,20 +0,0 @@
-@import '@/styles/variables.scss';
-
-$docs-menu-bg: #000;
-$docs-menu-color: #fff;
-$docs-menu-muted: mix($docs-menu-bg, $docs-menu-color, 50%);
-
-$docs-header-bg: $jumbotron-bg;
-$docs-header-border-color: darken($docs-header-bg, 10%);
-
-$pre-color: $light;
-$app-menu-max-width: 300px;
-$app-main-max-width: 770px;
-
-$modal-backdrop-bg: rgba(darken($dark, 10%), .5);
-$code-color: $info;
-
-$link-color: #000;
-$link-decoration: none;
-$link-hover-color: $primary;
-$link-hover-decoration: none;

package/.storybook/main.ts

@@ -1,35 +0,0 @@
-import type { StorybookConfig } from "@storybook/vue3-vite";
-import { mergeConfig } from "vite";
-
-const config:StorybookConfig = {
-  core: {
-    disableTelemetry: true, // 👈 Disables telemetry
-  },
-  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
-  staticDirs: ["../public"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-mdx-gfm",
-    "@storybook/preset-scss",
-    "@storybook/addon-themes"
-  ],
-  framework: {
-    name: "@storybook/vue3-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-  viteFinal: (config, options) => {
-    return mergeConfig(config, {
-      // This is needed because the copy plugin can't copy files outside of the root directory
-      // The files are copied back to the root by the post script
-      build: {
-        outDir: 'storybook-static'
-      }
-    });
-  }
-};
-export default config;

package/.storybook/preview-head.html

@@ -1,2 +0,0 @@
-<link rel="preload" href="https://fonts.googleapis.com/css?family=Poppins:400,700,800|Anton:300,400,400italic&display=swap" as="style">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,700,800|Anton:300,400,400italic&display=swap">

package/.storybook/preview.ts

@@ -1,32 +0,0 @@
-import {setup, Preview} from '@storybook/vue3'
-import './app.scss';
-import Murmur from "@/main";
-import { withThemeByDataAttribute } from '@storybook/addon-themes';
-
-setup((app)=>{
-  app.use(Murmur)
-})
-export const decorators = [
-  withThemeByDataAttribute({
-    themes: {
-      light: 'light',
-      dark: 'dark',
-    },
-    defaultTheme: 'light',
-    attributeName: 'data-bs-theme',
-  }),
-];
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-const preview: Preview = {
-  parameters
-};
-export default preview;

package/deploy.js

@@ -1,15 +0,0 @@
-import gh from 'gh-pages'
-import path from 'path'
-import ora from 'ora'
-import chalk from 'chalk'
-
-process.env.NODE_ENV = 'production'
-
-const spinner = ora('push dist folder to gh-pages branch...')
-const message = 'Updates [ci skip]'
-spinner.start()
-
-gh.publish(path.join(process.cwd(), 'dist', 'docs'), { message }, () => {
-  spinner.stop()
-  console.log(chalk.cyan('  Push complete.\n'))
-});

package/docs/components/ApiTable.vue

@@ -1,171 +0,0 @@
-<template>
-  <section class="api-table">
-    <h3 class="api-table__heading mb-3">
-      API 
-    </h3>
-    <div :key="docgen.title" class="api-table__component">
-      <b-tabs class="api-table__component__tabs">
-        <b-tab v-if="hasItems(docgen.props)" title="Properties" class="api-table__component__tabs__container">
-          <b-table :items="toItems(docgen.props)" :fields="propsFields" small class="m-0 small">
-            <template v-for="{ key } in propsFields" v-slot:[`cell(${key})`]="{ value }">
-              <span v-html="value" :key="key"></span>
-            </template>
-          </b-table>
-        </b-tab>
-
-        <b-tab v-if="hasItems(docgen.slots)" title="Slots" class="api-table__component__tabs__container">
-          <b-table :items="toItems(docgen.slots)" :fields="slotsFields" small class="m-0 small">
-            <template v-for="{ key } in slotsFields" v-slot:[`cell(${key})`]="{ value }">
-              <span v-html="value" :key="key"></span>
-            </template>
-          </b-table>
-        </b-tab>
-
-        <b-tab v-if="hasItems(docgen.events)" title="Events" class="api-table__component__tabs__container">
-          <b-table :items="toItems(docgen.events)" :fields="eventsFields" small class="m-0 small">
-            <template v-for="{ key } in eventsFields" v-slot:[`cell(${key})`]="{ value }">
-              <span v-html="value" :key="key"></span>
-            </template>
-          </b-table>
-        </b-tab>
-
-        <b-tab v-if="hasItems(docgen.methods)" title="Methods" class="api-table__component__tabs__container">
-          <b-table :items="toItems(docgen.methods)" :fields="methodsFields" small class="m-0 small">
-            <template v-for="{ key } in methodsFields" v-slot:[`cell(${key})`]="{ value }">
-              <span v-html="value" :key="key"></span>
-            </template>
-          </b-table>
-        </b-tab>
-      </b-tabs>
-    </div>
-  </section>
-</template>
-
-<script>
-  import reduce from 'lodash/reduce'
-  import sortBy from 'lodash/sortBy'
-  import keys from 'lodash/keys'
-  import isObject from 'lodash/isObject'
-
-  import { BTabs } from 'bootstrap-vue/esm/components/tabs/tabs'
-  import { BTab } from 'bootstrap-vue/esm/components/tabs/tab'
-  import { BTable } from 'bootstrap-vue/esm/components/table/table'
-
-  export default {
-    components: {
-      BTabs,
-      BTab,
-      BTable,
-    },
-    props: {
-      api: {
-        type: [Object, String],
-        default: () => {}
-      },
-      path: {
-        type: String,
-        default: null
-      }
-    },
-    methods: {
-      toItems(docgen = {}) {
-        return sortBy(reduce(keys(docgen), (items, name) => {
-          items.push({ name, ...docgen[name] })
-          return items
-        }, []), 'name')
-      },
-      hasItems(docgen = {}) {
-        return !!keys(docgen).length
-      },
-      codeFormatter (v = '—') {
-        return `<code>${v}</code>`
-      },
-      varFormatter (v = '—') {
-        if (v && (v.indexOf('function() {') === 0 || v.indexOf('() =>') === 0)) {
-          return '<span class="text-muted">computed</span>'
-        }
-        return `<var>${v}</var>`
-      }
-    },
-    async mounted () {
-      if (this.path) {
-        const path = this.path.replace(/\.vue$/i, '')
-        const docgens = import.meta.glob('@/**/*.vue', { as: 'vue-docgen' })
-        this.docgen = (await docgens[`/lib/${path}.vue`]()).default
-      } else if (this.api) {
-        this.docgen = isObject(this.api) ? this.api : JSON.parse(this.api)
-      }
-    },
-    data () {
-      return {
-        docgen: {},
-        propsFields: [
-          { label: 'Name', key: 'name', formatter: this.codeFormatter },
-          { label: 'Description', key: 'description', class: 'description' },
-          { label: 'Type', key: 'type.name' },
-          { label: 'Default', key: 'defaultValue.value', formatter: this.varFormatter }
-        ],
-        slotsFields: [
-          { label: 'Slot name', key: 'name', slot: 'cell(name)', formatter: this.codeFormatter },
-          { label: 'Description', key: 'description', class: 'description' }
-        ],
-        eventsFields: [
-          { label: 'Name', key: 'name', slot: 'cell(name)', formatter: this.codeFormatter },
-          { label: 'Description', key: 'description' , class: 'description'},
-          { label: 'Parameters', key: 'type.names', formatter: this.varFormatter }
-        ],
-        methodsFields: [
-          { label: 'Name', key: 'name', slot: 'cell(name)', formatter: this.codeFormatter },
-          { label: 'Description', key: 'description', class: 'description' },
-          { label: 'Return', key: 'return', formatter: this.varFormatter }
-        ]
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-  @import '../../lib/styles/lib.scss';
-
-  .api-table {
-
-    &__component {
-
-      &__tabs {
-
-        .nav-item {
-          text-transform: uppercase;
-          font-size: 0.9rem;
-
-          .active {
-            font-weight: bolder;
-          }
-        }
-
-        &__container {
-          padding: $spacer * 0.5;
-          overflow: auto;
-          width: 100%;
-          border: 1px solid $table-border-color;
-          border-top: 0;
-
-          .table {
-            white-space: nowrap;
-            thead th {
-              border-top: 0;
-
-              &.description {
-                min-width: 330px;
-                max-width: 450px;
-              }
-            }
-
-            td > span > code {
-              white-space: nowrap;
-            }
-          }
-        }
-      }
-    }
-  }
-</style>

package/docs/components/App.vue

@@ -1,146 +0,0 @@
-<template>
-  <div id="app" class="app">
-    <div class="app__navbar d-block d-lg-none bg-dark p-3 clearfix">
-      <router-link to="/">
-        <img
-          src="@/assets/images/murmur-white.svg"
-          alt="ICIJ"
-          class="border border-primary d-inline-block"
-          height="30px"
-        />
-      </router-link>
-      <button class="btn btn-link text-white float-end" @click="toggleMenu">
-        <fa icon="bars" />
-      </button>
-    </div>
-    <transition name="fade">
-      <div v-if="!collapseMenu" class="app__overlay" @click="toggleMenu"></div>
-    </transition>
-    <div class="row no-gutters flex-nowrap">
-      <div class="col app__menu" :class="{ 'app__menu--collapse': collapseMenu }">
-        <docs-menu></docs-menu>
-      </div>
-      <div class="col">
-        <div class="app__main">
-          <docs-header></docs-header>
-          <router-view class="app__main__view py-4"></router-view>
-          <edit-link></edit-link>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { faBars } from '@fortawesome/free-solid-svg-icons/faBars'
-import { mapState } from 'vuex'
-
-import DocsHeader from './DocsHeader.vue'
-import DocsMenu from './DocsMenu.vue'
-import EditLink from './EditLink.vue'
-
-import { library } from '@/components/Fa'
-
-export default {
-  name: 'App',
-  components: {
-    DocsHeader,
-    DocsMenu,
-    EditLink
-  },
-  watch: {
-    '$route.name': function () {
-      this.$store.commit('collapseMenu')
-    },
-    collapseMenu: function () {
-      // Use bootstrap's class to disable scrolling on the body
-      document.body.classList.toggle('modal-open', !this.collapseMenu)
-    }
-  },
-  beforeCreate() {
-    library.add(faBars)
-  },
-  computed: {
-    ...mapState(['collapseMenu'])
-  },
-  methods: {
-    toggleMenu() {
-      this.$store.commit('toggleMenu')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../styles/variables.scss';
-@import 'node_modules/bootstrap/scss/_mixins.scss';
-
-.app {
-  &:deep(.hljs) {
-    background: $dark;
-    padding: $spacer;
-    display: block;
-  }
-
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 300ms;
-  }
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0;
-  }
-
-  @include media-breakpoint-down(md) {
-    &__overlay {
-      z-index: $zindex-modal-backdrop;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: $modal-backdrop-bg;
-    }
-  }
-
-  &__menu {
-    max-width: $app-menu-max-width;
-    min-width: $app-menu-max-width;
-    background: $docs-menu-bg;
-
-    @include media-breakpoint-down(md) {
-      z-index: $zindex-modal;
-      position: fixed;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: auto;
-      overflow: auto;
-      transform: translateX(0%);
-      transition: transform 300ms;
-
-      &--collapse {
-        pointer-events: none;
-        transform: translateX(-100%);
-      }
-    }
-  }
-
-  &__main {
-    min-height: 100%;
-    border: $spacer solid $docs-menu-bg;
-    border-left: 0;
-
-    @include media-breakpoint-down(md) {
-      min-height: auto;
-      border: 0;
-    }
-
-    &__view {
-      max-width: $app-main-max-width;
-      padding: 0 $spacer;
-      margin: auto;
-    }
-  }
-}
-</style>