mediacube-ui 0.1.10 → 0.1.11

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Design system for MediaCube services",
   "author": "MediaCube",
   "private": false,
   "homepage": "https://mediacube.co",
   "license": "MIT",
   "main": "dist/mediacube-ui.common.js",
+  "files": ["dist/*", "src/styles/*", "src/assets/*"],
   "scripts": {
     "start": "yarn scss-export && start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
+    "build-library" : "yarn scss-export && vue-cli-service build --target lib --name mediacube-ui ./src/install.js",
     "serve": "yarn scss-export && vue-cli-service serve",
     "build": "yarn scss-export && vue-cli-service build --target lib --inline-vue",
     "test:unit": "vue-cli-service test:unit",

package/.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead

package/.eslintrc.js

@@ -1,34 +0,0 @@
-module.exports = {
-    root: true,
-    env: {
-        node: true,
-        browser: true
-    },
-    extends: [
-        "plugin:vue/recommended",
-        "eslint:recommended",
-        "prettier/vue",
-        "plugin:prettier/recommended"
-    ],
-    rules: {
-        "vue/component-name-in-template-casing": ["error", "kebab-case"],
-        "no-console": "off",
-        "no-debugger": "off",
-        "no-undef": "off",
-        "vue/no-v-html": "off",
-        'semi': [2, 'never'],
-        'vue/max-attributes-per-line': 'off',
-        'prettier/prettier': ['error', { 'semi': false }],
-        'vue/require-default-prop': "off",
-        "vue/require-valid-default-prop": "off",
-    },
-    plugins: [
-        'vue'
-    ],
-    globals: {
-        $nuxt: true
-    },
-    parserOptions: {
-        parser: "babel-eslint"
-    }
-};

package/.prettierrc.js

@@ -1,9 +0,0 @@
-module.exports = {
-    bracketSpacing: true,
-    jsxBracketSameLine: true,
-    singleQuote: true,
-    trailingComma: 'all',
-    printWidth: 120,
-    tabWidth: 4,
-    // Override any other rules you want
-};

package/.storybook/components.js

@@ -1,6 +0,0 @@
-import Vue from "vue"
-import TmDrawerWrapper from "../src/examples/templates/TmDrawerWrapper/TmDrawerWrapper"
-import McChat from "../src/patterns/McChat/McChat"
-
-Vue.component('McChat', McChat)
-Vue.component('TmDrawerWrapper', TmDrawerWrapper)

package/.storybook/decorators.js

@@ -1,5 +0,0 @@
-export const PaddingDecorator = () => {
-  return {
-    template: '<div style="padding: 3rem;"><story/></div>',
-  };
-}

package/.storybook/main.js

@@ -1,51 +0,0 @@
-const path = require('path')
-
-module.exports = {
-  stories: ['../src/**/*.stories.js'],
-  addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    'storybook-design-token',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-storysource',
-    '@storybook/addon-docs',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-backgrounds/register',
-    'storybook-addon-designs',
-    '@storybook/addon-a11y/register',
-  ],
-  webpackFinal: async (config, { configType }) => {
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'sass-loader',
-        {
-          loader: 'sass-resources-loader',
-          options: {
-            resources: './src/styles/main.scss',
-          },
-        },
-      ],
-      include: path.resolve(__dirname, '../'),
-    });
-
-    config.module.rules.push({
-      test: /\.stories\.jsx?$/,
-      loaders: [
-        {
-          loader: require.resolve('@storybook/source-loader'),
-          options: {
-            prettierConfig: {
-              printWidth: 100,
-              singleQuote: false,
-            },
-          },
-        },
-      ],
-      enforce: 'pre',
-    });
-
-    config.resolve.alias["scss-loader"] = "sass-loader"
-
-    return config;
-  },
-};

package/.storybook/plugins.js

@@ -1,28 +0,0 @@
-import Vue from "vue"
-import VueLazyload from 'vue-lazyload'
-import "xe-utils"
-import VXETable from "vxe-table"
-import VueSlideoutPanel from 'vue2-slideout-panel'
-import VueBus from 'vue-bus'
-import VueMoment from "vue-moment"
-import Toasted from 'vue-toasted'
-import PortalVue from 'portal-vue'
-import VueJSModal from "vue-js-modal";
-// for fix error: `Property or method "toJSON" is not defined on the instance but referenced during render`
-Vue.prototype.toJSON = function () {
-  return this
-}
-Vue.use(VueLazyload)
-Vue.use(VXETable)
-Vue.use(VueJSModal)
-Vue.use(VueSlideoutPanel)
-Vue.use(VueBus)
-Vue.use(VueMoment)
-Vue.use(Toasted, {
-  theme: 'toasted-primary',
-  position: 'bottom-center',
-  duration : 3000,
-  className : ['mc-toast', 'mc-toast--primary'],
-  keepOnHover : true,
-})
-Vue.use(PortalVue)

package/.storybook/preview-body.html

@@ -1,9 +0,0 @@
-<style>
-    /*custom classes and styles for preview*/
-    .element--indent-right-8px:not(:last-child) {
-        margin-right: 8px;
-    }
-    .element--background-yellow {
-        background-color: yellow;
-    }
-</style>

package/.storybook/preview.js

@@ -1,59 +0,0 @@
-import WebFontLoader from "../src/utils/webFontLoader"
-import "normalize.css/normalize.css"
-import '../src/styles/main.scss'
-
-import "./plugins"
-import "./components"
-
-import { addDecorator, addParameters } from '@storybook/vue';
-import { withA11y } from '@storybook/addon-a11y';
-import { PaddingDecorator } from './decorators';
-import { withKnobs } from '@storybook/addon-knobs';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { setConsoleOptions } from '@storybook/addon-console';
-
-const cssReq = require.context('!!raw-loader!../src', true, /.\.css$/);
-const cssTokenFiles = cssReq
-  .keys()
-  .map(filename => ({ filename, content: cssReq(filename).default }));
-
-const scssReq = require.context('!!raw-loader!../src', true, /.\.scss$/);
-const scssTokenFiles = scssReq
-  .keys()
-  .map(filename => ({ filename, content: scssReq(filename).default }));
-
-const svgIconsReq = require.context('!!raw-loader!../src', true, /.\.svg$/);
-const svgIconTokenFiles = svgIconsReq
-  .keys()
-  .map(filename => ({ filename, content: svgIconsReq(filename).default }));
-
-addDecorator(withKnobs);
-addDecorator(withA11y);
-addDecorator(PaddingDecorator);
-
-const panelExclude = setConsoleOptions({}).panelExclude;
-setConsoleOptions({
-  panelExclude: [...panelExclude, /deprecated/],
-});
-
-addParameters({
-  designToken: {
-    files: {
-      css: cssTokenFiles,
-      scss: scssTokenFiles,
-      svgIcons: svgIconTokenFiles
-    }
-  },
-  options: {
-    panelPosition: 'right',
-  },
-  viewport: {
-    viewports: INITIAL_VIEWPORTS,
-  },
-  backgrounds: [
-    { name: 'white', value: '#ffffff', default: true },
-    { name: 'gray', value: '#cccccc' },
-    { name: 'twitter', value: '#00aced' },
-    { name: 'facebook', value: '#3b5998' },
-  ],
-});

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};

package/jest.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  preset: "@vue/cli-plugin-unit-jest",
-  transformIgnorePatterns: ["/node_modules/(?!(@storybook/.*\\.vue$))"],
-};

package/public/img/mc_dashboard.svg

@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.5942 2H10.4058C5.76813 2 2 5.76813 2 10.4058V20.7163C2 21.4202 2.5797 22 3.28363 22H13.5942C18.2319 22 22 18.2319 22 13.5942V10.4058C22 5.76813 18.2733 2 13.5942 2Z" fill="url(#paint0_linear)"/>
-<path d="M12 7C12 6.44772 12.4477 6 13 6H15.5C16.0523 6 16.5 6.44772 16.5 7V17C16.5 17.5523 16.0523 18 15.5 18H12V7Z" fill="white"/>
-<path d="M6 12C6 11.4477 6.44772 11 7 11H10.5V18H7C6.44772 18 6 17.5523 6 17V12Z" fill="white"/>
-<defs>
-<linearGradient id="paint0_linear" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF3231"/>
-<stop offset="1" stop-color="#E3004C"/>
-</linearGradient>
-</defs>
-</svg>

package/src/App.vue

@@ -1,30 +0,0 @@
-<template>
-    <div id="app">
-        <img alt="MediaCube logo" src="./assets/logo.png" />
-        <hello-world msg="Welcome to Your Vue.js App" />
-    </div>
-</template>
-
-<script>
-import HelloWorld from './service/HelloWorld.vue'
-
-export default {
-    name: 'App',
-    components: {
-        HelloWorld,
-    },
-}
-</script>
-
-<style>
-body,
-html {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-#app {
-    height: 100%;
-}
-</style>

package/src/elements/McAvatar/McAvatar.stories.js

@@ -1,122 +0,0 @@
-import { text, select, boolean } from '@storybook/addon-knobs'
-import { withDesign } from 'storybook-addon-designs'
-
-import McAvatar from './McAvatar'
-import {getTokenGroup, getTokensByType} from "../../utils/getTokens"
-
-export default {
-  title: 'Elements/McAvatar',
-  component: McAvatar,
-  decorators: [withDesign],
-  parameters: {
-    componentSubtitle: 'Status: Ready',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=127%3A1390',
-    },
-  },
-};
-
-const avatarSizes = getTokenGroup('avatar-sizes')
-const colors = getTokensByType('color')
-
-const getUniqueProps = key => {
-  return {
-    src: {
-      default: text('src', 'https://avatars3.githubusercontent.com/u/43079603?s=460&v=4', key),
-    },
-    alt: {
-      default: text('alt', 'alt text', key),
-    },
-    size: {
-      default: select('size', avatarSizes, '600', key)
-    },
-    shadow: {
-      default: boolean('shadow', true, key)
-    },
-    draggable: {
-      default: boolean('draggable', true, key)
-    },
-  }
-}
-
-const getCommonTags = ctx => {
-  return {
-    src: ctx.src,
-    alt: ctx.alt,
-    size: ctx.size,
-    rounded: ctx.rounded,
-    lazy: ctx.lazy,
-    shadow: ctx.shadow,
-    draggable: ctx.draggable,
-  }
-}
-
-
-export const Default = () => ({
-  components: { McAvatar },
-  computed: {
-    tagBind() {
-      return getCommonTags(this)
-    }
-  },
-  props: {
-    ...getUniqueProps('default'),
-    rounded: {
-      default: boolean('rounded', false, 'default')
-    },
-    lazy: {
-      default: boolean('lazy', false, 'default')
-    },
-  },
-  template: '<mc-avatar v-bind="tagBind" />',
-})
-
-export const Lazy = () => ({
-  components: { McAvatar },
-  computed: {
-    tagBind() {
-      return getCommonTags(this)
-    }
-  },
-  props: {
-    ...getUniqueProps('lazy'),
-    rounded: {
-      default: boolean('rounded', true, 'lazy')
-    },
-    lazy: {
-      default: boolean('lazy', true, 'lazy')
-    },
-  },
-  template: `<div>
-      <div style="height: 2000px">&#11015; &#11015; &#11015; Scroll to bottom &#11015; &#11015; &#11015;</div>
-      <mc-avatar v-bind="tagBind" /> 
-  </div>`,
-})
-
-export const Status = () => ({
-  components: { McAvatar },
-  computed: {
-    tagBind() {
-      return {
-        ...getCommonTags(this),
-        'border-color': this.borderColor,
-        'dot-color': this.dotColor,
-        rounded: true,
-      }
-    }
-  },
-  props: {
-    ...getUniqueProps('status'),
-    lazy: {
-      default: boolean('lazy', true, 'status'),
-    },
-    borderColor: {
-      default: select('borderColor', colors, 'light-green', 'status')
-    },
-    dotColor: {
-      default: select('dotColor', colors, 'orange', 'status')
-    },
-  },
-  template: `<mc-avatar v-bind="tagBind" />`,
-})