@icij/murmur-next 4.0.0

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

@@ -0,0 +1,50 @@
+# 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

@@ -0,0 +1,14 @@
+@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

@@ -0,0 +1,20 @@
+@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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,2 @@
+<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

@@ -0,0 +1,32 @@
+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/README.md

@@ -0,0 +1,71 @@
+<p align="center">
+<a href="https://icij.github.io/murmur/">
+  <img src="https://github.com/ICIJ/murmur/raw/master/lib/assets/images/murmur-dark.png" width="158px">
+</a>
+<br>
+Murmur is <a href="https://icij.org">ICIJ</a>'s Design System for Bootstrap 4 and Vue.js
+</p>
+
+<div align="center">
+
+| | Status |
+| --: | :-- |
+| **CI checks** | [![CircleCI](https://circleci.com/gh/ICIJ/murmur.svg?style=shield)](https://circleci.com/gh/ICIJ/murmur) |
+| **Code Climate** | [![Code Climate](https://api.codeclimate.com/v1/badges/e487295b939be72d5f15/maintainability)](ttps://codeclimate.com/github/ICIJ/murmur/maintainability) |
+| **NPM version** | [![NPM version](https://img.shields.io/npm/v/@icij/murmur)](https://www.npmjs.com/package/@icij/murmur) |
+| **NPM downloads** | [![NPM download](https://img.shields.io/npm/dm/@icij/murmur)](https://www.npmjs.com/package/@icij/murmur) |
+
+</div>
+
+
+## Installation guide
+
+If you are using module bundlers such as Webpack or Rollup, you might need to include the package into your project.
+To get started, use NPM or Yarn to get latest version of **@icij/murmur**.
+
+```bash
+# with NPM:
+npm i @icij/murmur
+
+# or with Yarn:
+yarn add @icij/murmur
+```
+Then, register Murmur as a pluggin in your app entry point:
+
+```js
+import Vue from 'vue'
+import Murmur from '@icij/murmur'
+
+Vue.use(Murmur)
+```
+
+Now all components will be globally available in your app.
+[Read the documentation](https://icij.github.io/murmur/) to know how to use them.
+
+## Build Setup
+
+``` bash
+# install dependencies
+yarn
+
+# serve documentation with hot reload at localhost:8080
+yarn serve
+
+# build library and documentation for production with minification
+yarn build
+
+# build library for production with minification
+yarn build:lib
+
+# build documentation for production with minification
+yarn build:docs
+
+# deploy the doc on Github Pages
+yarn deploy
+
+# publish a version of the package on NPM registry
+yarn publish
+
+# run unit tests
+yarn test:unit
+```

package/deploy.js

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,171 @@
+<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

@@ -0,0 +1,146 @@
+<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>

package/docs/components/CollapsibleBlock.vue

@@ -0,0 +1,122 @@
+<template>
+  <component :is="tag" class="collapsible-block card mb-5" :class="{ 'collapsible-block--visible': visible }">
+    <div class="d-flex">
+      <a class="py-3 px-4 d-block collapsible-block__caret" @click="toggle">
+        <fa icon="caret-right" :rotation="show ? 90 : null" />
+      </a>
+      <div class="flex-grow-1">
+        <slot name="label" v-bind:label="label">
+          <a v-if="label" class="py-3 pe-4 collapsible-block__label d-block" @click="toggle">
+            {{ label }}
+          </a>
+        </slot>
+      </div>
+    </div>
+    <b-collapse :visible="show" class="collapsible-block__body">
+      <slot v-if="useSlot" />
+      <pre v-else-if="json"><code class="hljs language-json" v-html="formattedJson"></code></pre>
+    </b-collapse>
+  </component>
+</template>
+
+<script>
+  import hljs from 'highlight.js'
+  import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight'
+
+  import { library, default as Fa } from '@/components/Fa'
+
+  export default {
+    name: 'CollapsibleBlock',
+    components: {
+      Fa
+    },
+    beforeMount () {
+      library.add(faCaretRight)
+    },
+    model: {
+      prop: 'visible',
+      event: 'input'
+    },
+    props: {
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      tag: {
+        type: [String, Object],
+        default: 'div'
+      },
+      label: {
+        type: String,
+        default: null
+      },
+      json: {
+        default: null
+      }
+    },
+    data() {
+      return {
+        show: this.visible
+      }
+    },
+    watch: {
+      visible (value) {
+        if (value !== this.show) {
+          this.show = value
+        }
+      },
+      show (value, oldValue) {
+        if (value !== oldValue) {
+          this.$emit('input', this.show)
+        }
+      }
+    },
+    created() {
+      this.show = this.visible
+    },
+    mounted() {
+      this.show = this.visible
+    },
+    beforeDestroy() {
+      this.show = false
+    },
+    methods: {
+      toggle() {
+        this.show = !this.show
+      }
+    },
+    computed: {
+      useSlot() {
+        return !!this.$slots.default && !!this.$slots.default.length
+      },
+      stringifiedJson() {
+        return JSON.stringify(this.json, null, 2)
+      },
+      formattedJson() {
+        const language = 'json'
+        const { value } = hljs.highlight(this.stringifiedJson, { language })
+        return value
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .collapsible-block {
+
+    &__caret, &__label {
+      cursor: pointer;
+    }
+
+    &__caret .svg-inline--fa{
+      transition: transform 300ms;
+    }
+
+    &__body {
+      // Exception for code block
+      & *[class^=language-] pre {
+        margin-bottom: 0;
+      }
+    }
+  }
+</style>