[Storybook] Add intro to storybook

README.md

@@ -6,7 +6,7 @@
 <!--BADGES-->
 <span class="badge-shields"><a href="https://qvant-lab.github.io/qui" title="storybook"><img src="https://img.shields.io/badge/storybook-yes-green.svg" alt="storybook" /></a></span> <span class="badge-shields"><img src="https://img.shields.io/badge/responsive-yes-green.svg" /></span> <span class="badge-npmversion"><a href="https://npmjs.org/package/@qvant/qui" title="View this project on NPM"><img src="https://img.shields.io/npm/v/@qvant/qui.svg" alt="NPM version" /></a></span> <span class="badge-npmdownloads"><a href="https://npmjs.org/package/@qvant/qui" title="View this project on NPM"><img src="https://img.shields.io/npm/dm/@qvant/qui.svg" alt="NPM downloads" /></a></span></br><span class="badge-daviddm"><a href="https://david-dm.org/Qvant-lab/qui" title="View the status of this project's dependencies on DavidDM"><img src="https://img.shields.io/david/Qvant-lab/qui.svg" alt="Dependency Status" /></a></span> <span class="badge-daviddmdev"><a href="https://david-dm.org/Qvant-lab/qui#info=devDependencies" title="View the status of this project's development dependencies on DavidDM"><img src="https://img.shields.io/david/dev/Qvant-lab/qui.svg" alt="Dev Dependency Status" /></a></span><!--/BADGES--></p>
 
-# A Vue.js Design System for Web.
+# A Vue.js Design System for Web
 
 Responsive, user-friendly and lightweight library helping us build great products for our customers. This library for Vue 2.x, Qui for Vue 3 in our roadmap
 

stories/intro.stories.mdx

@@ -0,0 +1,321 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+<Meta title="Intro" />
+
+<div
+  style={{
+    margin: '0 auto 40px',
+    maxWidth: '600px',
+    textAlign: 'center'
+  }}
+>
+  <img src="https://github.com/Qvant-lab/qui/raw/master/.readme-assets/qui-logo.svg" />
+
+<div style={{ marginTop: '16px' }}>
+  <span class="badge-shields">
+    <a href="https://qvant-lab.github.io/qui" title="storybook">
+      <img
+        src="https://img.shields.io/badge/storybook-yes-green.svg"
+        alt="storybook"
+      />
+    </a>
+  </span>
+  <span class="badge-shields">
+    <img src="https://img.shields.io/badge/responsive-yes-green.svg" />
+  </span>
+  <span class="badge-npmversion">
+    <a
+      href="https://npmjs.org/package/@qvant/qui"
+      title="View this project on NPM"
+    >
+      <img
+        src="https://img.shields.io/npm/v/@qvant/qui.svg"
+        alt="NPM version"
+      />
+    </a>
+  </span>
+  <span class="badge-npmdownloads">
+    <a
+      href="https://npmjs.org/package/@qvant/qui"
+      title="View this project on NPM"
+    >
+      <img
+        src="https://img.shields.io/npm/dm/@qvant/qui.svg"
+        alt="NPM downloads"
+      />
+    </a>
+  </span>
+</div>
+
+<span class="badge-daviddm">
+  <a
+    href="https://david-dm.org/Qvant-lab/qui"
+    title="View the status of this project's dependencies on DavidDM"
+  >
+    <img
+      src="https://img.shields.io/david/Qvant-lab/qui.svg"
+      alt="Dependency Status"
+    />
+  </a>
+</span>
+<span class="badge-daviddmdev">
+  <a
+    href="https://david-dm.org/Qvant-lab/qui#info=devDependencies"
+    title="View the status of this project's development dependencies on DavidDM"
+  >
+    <img
+      src="https://img.shields.io/david/dev/Qvant-lab/qui.svg"
+      alt="Dev Dependency Status"
+    />
+  </a>
+</span>
+
+</div>
+
+# A Vue.js Design System for Web
+
+Responsive, user-friendly and lightweight library helping us build great products for our customers.
+This library for Vue 2.x, Qui for Vue 3 in our roadmap.
+
+What is it?
+
+- 🔩 30+ Vue components
+- 📦 icons pack
+- 🏳️‍🌈 colors & grid
+- 🥷 neumorphism styles
+- 📚 storybook sandbox
+
+Some examples below:
+
+![buttons](https://github.com/Qvant-lab/qui/raw/master/.readme-assets/buttons.jpg)
+![buttons](https://github.com/Qvant-lab/qui/raw/master/.readme-assets/buttons.jpg)
+![inputs](https://github.com/Qvant-lab/qui/raw/master/.readme-assets/inputs.gif)
+![icons](https://github.com/Qvant-lab/qui/raw/master/.readme-assets/icons.gif)
+![tables](https://github.com/Qvant-lab/qui/raw/master/.readme-assets/tables.jpg)
+![datepicker](https://github.com/Qvant-lab/qui/raw/master/.readme-assets/datepicker.jpg)
+![other](https://github.com/Qvant-lab/qui/raw/master/.readme-assets/other.jpg)
+
+## Install
+
+```bash
+npm install @qvant/qui -S
+yarn add @qvant/qui
+```
+
+You can import Qui entirely, or just import what you need. Let's start with fully import.
+
+## Quick setup
+
+In main.js:
+
+```js
+import Vue from 'vue';
+import Qui from '@qvant/qui';
+import '@qvant/qui/dist/qui.css';
+
+// Setup all components
+Vue.use(Qui);
+// that's it! All components will be imported with styles
+```
+
+in YourComponent.vue: (Example)
+
+```vue
+<template>
+  <q-input v-model="value" />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      value: ''
+    };
+  },
+  mounted() {
+    // the modals have shortcuts in your components:
+    this.$notify({ ... }) // calls QNotification
+    this.$message({ ... }) // calls QMessageBox
+    this.$dialog({ ... }) // calls QDialog
+  }
+};
+</script>
+```
+
+...or configure quick setup
+
+In main.js:
+
+```js
+import Vue from 'vue';
+import Qui from '@qvant/qui';
+import '@qvant/qui/dist/qui.css';
+
+Vue.use(Qui, {
+  localization: {
+    locale: 'en', // Russian language by default, you can set `en` for English
+    customI18nMessages: {
+      // rewrite default texts, see the source: src/qComponents/constants/locales
+      en: {
+        QDatepicker: {
+          placeholder: 'Pick your birthday!'
+        }
+      }
+    },
+    zIndexCounter: 3000, // zIndexCounter is being used by some components, (e.g QPopover, QSelect, QDialog ...etc), 2000 by default
+    prefix: 'yo' // you can change component's prefix, e.g. must be used <yo-input /> instead of <q-input />
+  }
+});
+```
+
+in YourComponent.vue: (Example)
+
+```vue
+<template>
+  <!-- placeholder is changed on 'Pick your birthday!' -->
+  <yo-datepicker v-model="value" type="date" />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      value: null
+    };
+  }
+};
+</script>
+```
+
+Now you have implemented Vue and Qui to your project, and it's time to write your code.
+Please refer to each component's [Stories](https://qvant-lab.github.io/qui/) to learn how to use them.
+
+## Not quick setup
+
+If you have a module bundler (e.g webpack), you can import components separately and take care about your bundle size
+
+In main.js:
+
+```js
+// import the main plugin from another place (it ensures Qui will be installed without any components, but instance will set required properties and directives)
+import Qui from '@qvant/qui/src/onDemand';
+
+// import the component you want
+import QButton from '@qvant/qui/src/qComponents/QButton';
+// ...or in async way
+Vue.component('q-button', () =>
+  import(/* webpackChunkName: "qui" */ '@qvant/qui/src/qComponents/QButton')
+);
+
+// init
+Vue.use(Qui);
+Vue.use(QButton);
+```
+
+In main.scss:
+
+```scss
+// need to set the path for files with statics
+$--base-path: '~@qvant/qui/src';
+// set main styles
+@import '~@qvant/qui/src/main.scss';
+// notice that you must use `fonts` and `icons` styles for some of components:
+@import '~@qvant/qui/src/fonts/index.scss';
+@import '~@qvant/qui/src/icons/index.scss';
+```
+
+Import all styles:
+
+```scss
+@import '~@qvant/qui/src/components.scss';
+```
+
+...or components separately:
+
+```scss
+@import '~@qvant/qui/src/qComponents/QBreadcrumbs/src/q-breadcrumbs.scss';
+@import '~@qvant/qui/src/qComponents/QButton/src/q-button.scss';
+// ...etc
+```
+
+## Optional
+
+- if you want use modals inside your components as property of 'this':
+
+```js
+import { QMessageBox, QDialog, QNotification } from '@qvant/qui';
+// or import separately
+import QMessageBox from '@qvant/qui/src/qComponents/QMessageBox';
+import QDialog from '@qvant/qui/src/qComponents/QDialog';
+import QNotification from '@qvant/qui/src/qComponents/QNotification';
+
+Vue.prototype.$message = QMessageBox;
+Vue.prototype.$dialog = QDialog;
+Vue.prototype.$notify = options =>
+  QNotification({
+    duration: 3000, // - ms
+    ...options
+  });
+```
+
+- if you use VueI18n, you need to merge messages:
+
+```js
+import VueI18n from 'vue-i18n';
+import { en, ru } from '@qvant/qui/src/qComponents/constants/locales';
+
+Vue.use(VueI18n);
+
+const messages = {
+  en: {
+    message: {
+      hello: 'hello world'
+    },
+    ...en
+  },
+  ru: {
+    message: {
+      hello: 'привет, мир'
+    },
+    ...ru
+  }
+};
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+});
+
+new Vue({
+  i18n
+}).$mount('#your-app');
+```
+
+## Supported languages
+
+- Russian ✅
+- English ✅
+- Also you can use any language by setting texts for components via 'customI18nMessages' property in the Qui instance. See the example above.
+
+## Browser Support
+
+Modern browsers are recomended
+
+- safari: >11
+- chrome: >=61
+- firefox: >=58
+- opera: >=62
+- edge: >=16
+- yandex: >=18
+- ie: ? (we don't know :) and will not support it)
+
+## Development
+
+Clone repository and run storybook
+
+```bash
+yarn storybook
+npm run storybook
+```
+
+## LICENSE
+
+MIT