mediacube-ui 0.1.78 → 0.1.80

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

@@ -2,6 +2,10 @@
 
 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.80](https://github.com/MediaCubeCo/mcui/compare/v0.1.79...v0.1.80) (2023-07-21)
+
+### [0.1.79](https://github.com/MediaCubeCo/mcui/compare/v0.1.78...v0.1.79) (2023-07-20)
+
 ### [0.1.78](https://github.com/MediaCubeCo/mcui/compare/v0.1.77...v0.1.78) (2023-07-20)
 
 ### [0.1.77](https://github.com/MediaCubeCo/mcui/compare/v0.1.76...v0.1.77) (2023-07-20)

package/babel.config.js

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

package/createsvgsprite.js

@@ -0,0 +1,49 @@
+const fs = require('fs')
+const path = require('path')
+const svgstore = require('svgstore')
+
+// Конфигурация папок и спрайтов
+const icons_folders = ['icons']
+const spriteConfigs = icons_folders.map(i_folder => ({
+    iconsFolder: `./src/assets/${i_folder}`,
+    outputFolder: `./public/sprites/`,
+    spriteName: `${i_folder}.svg`,
+}))
+
+// Создание спрайтов из разных папок
+spriteConfigs.forEach(spriteConfig => {
+    const { iconsFolder, outputFolder, spriteName } = spriteConfig
+
+    // Создание экземпляра svgstore для каждого спрайта
+    const sprites = svgstore()
+
+    // Чтение файлов из папки с иконками
+    fs.readdir(iconsFolder, async (err, files) => {
+        if (err) {
+            console.error('Ошибка чтения папки:', err)
+            return
+        }
+
+        // Фильтрация файлов только с расширением .svg
+        const svgFiles = files.filter(file => path.extname(file) === '.svg')
+
+        // Добавление иконок в спрайт
+        svgFiles.forEach(svgFile => {
+            const filePath = path.join(iconsFolder, svgFile)
+            const iconName = path.basename(svgFile, '.svg')
+            const svgContent = fs.readFileSync(filePath, 'utf8')
+            sprites.add(iconName, svgContent)
+        })
+
+        // Генерация спрайта
+        const spriteContent = sprites.toString()
+
+        // Создание файла спрайта
+        const outputFilePath = path.join(outputFolder, spriteName)
+
+        if (!fs.existsSync(outputFolder)) await fs.mkdirSync(outputFolder, { recursive: true })
+        fs.writeFileSync(outputFilePath, spriteContent)
+
+        console.log('Спрайт успешно создан:', outputFilePath)
+    })
+})

package/dist/demo.html

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