mediacube-ui 0.1.7

package/.browserslistrc

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

package/.eslintrc.js

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

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

package/.storybook/components.js

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

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

package/.storybook/main.js

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

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

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

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

@@ -0,0 +1,13 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [0.1.6](https://github.com/MediaCubeCo/mcui/compare/v0.1.4...v0.1.6) (2020-08-28)
+
+### [0.1.4](https://github.com/MediaCubeCo/mcui/compare/v0.1.3...v0.1.4) (2020-08-28)
+
+### [0.1.3](https://github.com/MediaCubeCo/mcui/compare/v0.1.2...v0.1.3) (2020-08-28)
+
+### [0.1.2](https://github.com/MediaCubeCo/mcui/compare/v0.1.1...v0.1.2) (2020-08-28)
+
+### 0.1.1 (2020-08-28)

package/README.md

@@ -0,0 +1,138 @@
+# MediaCube UI
+
+This design system based on [Storybook](https://storybook.js.org/) and [Storybook Design Token Addon](https://github.com/UX-and-I/storybook-design-token).
+**Storybook** is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
+
+**Storybook** is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.
+
+**Storybook** runs outside of the main app so users can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+[![Screenshot](./public/img/preview.png)](https://storybook.js.org/)
+
+## Project setup
+```
+yarn install
+```
+
+### Start design system
+```
+yarn start
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Run your unit tests
+```
+yarn test:unit
+```
+
+### Compiles and hot-reloads for development (see that vue-cli service also works)
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
+
+## Usage
+
+The [plugin](https://github.com/UX-and-I/storybook-design-token) tries to organize your tokens into token groups. You can annotate token groups by adding specific comment blocks to your stylesheets. Only annotated tokens will be listed by the plugin. The specified presenter is used to render examples of your tokens. See [Presenters](#presenters) for further information.
+
+**CSS example:**
+
+```css
+/**
+ * @tokens Colors
+ * @presenter Color
+ */
+
+:root {
+  --n0: #fff; /* Token Description */
+  --n100: #fbfbfb;
+  --n200: #edeeef;
+  --n300: #e4e5e7;
+  --primary: var(--n300);
+}
+
+/**
+ * @tokens Border Radius
+ * @presenter BorderRadius
+ */
+
+:root {
+  --border-radius-m: 4px;
+  --border-radius-l: 8px;
+}
+```
+
+**SCSS example:**
+
+```scss
+/**
+ * @tokens Colors
+ * @presenter Color
+ */
+
+$n0: #fff; /* Token Description */
+$n100: #fbfbfb;
+$n200: #edeeef;
+$n300: #e4e5e7;
+$primary: $n300;
+
+/**
+ * @tokens Border Radius
+ * @presenter BorderRadius
+ */
+
+$border-radius-m: 4px;
+$border-radius-l: 8px;
+```
+
+**SVG example:**
+
+```html
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  data-token-name="check"
+  width="24px"
+  height="24px"
+  viewBox="0 0 24 24"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <path
+    d="M9.35221912,16.3536125 L19.5004166,5.34255149 C19.9029667,4.90884428 20.5808871,4.88358644 21.0145944,5.28613652 C21.4483016,5.6886866 21.4735594,6.36660707 21.0710093,6.80031428 L10.1375155,18.6574532 C9.71359736,19.1141823 8.99084087,19.1141823 8.56692275,18.6574532 L3.28613652,12.890538 C2.88358644,12.4568308 2.90884428,11.7789103 3.34255149,11.3763602 C3.77625869,10.9738101 4.45417917,10.999068 4.85672925,11.4327752 L9.35221912,16.3536125 Z"
+    fill="currentColor"
+  ></path>
+</svg>
+```
+
+Make sure to specify the `data-token-name` attribute.
+
+## Presenters
+
+Presenters are used to render examples for your design tokens. The following presenters are available:
+
+- Animation
+- BorderRadius
+- Border
+- Color
+- Easing
+- FontFamily
+- FontSize
+- FontWeight
+- Gradient
+- LineHeight
+- Opacity
+- Shadow
+- Spacing
+- Svg

package/babel.config.js

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

package/dist/demo.html

@@ -0,0 +1,19 @@
+<meta charset="utf-8">
+<title>mcui demo</title>
+<script src="https://unpkg.com/vue"></script>
+<script src="./mcui.umd.js"></script>
+
+<link rel="stylesheet" href="./mcui.css">
+
+
+<div id="app">
+  <demo></demo>
+</div>
+
+<script>
+new Vue({
+  components: {
+    demo: mcui
+  }
+}).$mount('#app')
+</script>