chore: Added storybook, removed vue-i18n (was not in use)

.eslintignore

@@ -1,4 +1,5 @@
-dist/*
-test/*
-coverage/*
 /.cache
+coverage/*
+dist/*
+storybook/config/*
+test/*

.eslintrc.js

@@ -53,5 +53,10 @@ module.exports = {
             '@typescript-eslint/no-empty-interface': 'off',
             '@typescript-eslint/no-unused-vars': 'off',
         },
+    }, {
+        files: ['*.js', '*.tale.vue'],
+        rules: {
+            '@typescript-eslint/explicit-function-return-type': 'off',
+        }
     }],
 }

package.json

@@ -4,12 +4,14 @@
     "author": "RetailDriverLLC <integration@retailcrm.ru>",
     "scripts": {
         "build": "npm run build:esm & npm run build:umd & npm run build:iife & wait && echo \"Build complete:\nesm: $(gzip -c dist/formulario.esm.js | wc -c)b gzip\numd: $(gzip -c dist/formulario.umd.js | wc -c)b gzip\nmin: $(gzip -c dist/formulario.min.js | wc -c)b gzip\"",
-        "test": "NODE_ENV=test jest --config test/jest.conf.js",
-        "lint": "vue-cli-service lint",
         "build:esm": "rollup --config build/rollup.config.js --format es --file dist/formulario.esm.js",
         "build:iife": "rollup --config build/rollup.iife.config.js --format iife --file dist/formulario.min.js",
         "build:size": "gzip -c dist/formulario.esm.js | wc -c",
         "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/formulario.umd.js",
+        "lint": "vue-cli-service lint",
+        "storybook:build": "vue-cli-service storybook:build -c storybook/config",
+        "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c storybook/config",
+        "test": "NODE_ENV=test jest --config test/jest.conf.js",
         "test:coverage": "NODE_ENV=test jest --config test/jest.conf.js --coverage",
         "test:watch": "NODE_ENV=test jest --config test/jest.conf.js --watch"
     },
@@ -24,7 +26,6 @@
         "is-url": "^1.2.4",
         "nanoid": "^2.1.11",
         "vue-class-component": "^7.2.3",
-        "vue-i18n": "^8.17.7",
         "vue-property-decorator": "^8.4.2"
     },
     "devDependencies": {
@@ -35,6 +36,11 @@
         "@rollup/plugin-buble": "^0.21.3",
         "@rollup/plugin-commonjs": "^11.1.0",
         "@rollup/plugin-node-resolve": "^7.1.3",
+        "@storybook/addon-actions": "^6.0.26",
+        "@storybook/addon-knobs": "^6.0.26",
+        "@storybook/addon-links": "^6.0.26",
+        "@storybook/addon-notes": "^5.3.21",
+        "@storybook/vue": "^6.0.26",
         "@types/is-url": "^1.2.28",
         "@types/jest": "^26.0.14",
         "@types/nanoid": "^2.1.0",
@@ -72,6 +78,7 @@
         "ts-jest": "^26.4.1",
         "typescript": "~3.9.3",
         "vue": "^2.6.11",
+        "vue-cli-plugin-storybook": "^1.3.0",
         "vue-jest": "^3.0.5",
         "vue-runtime-helpers": "^1.1.2",
         "vue-template-compiler": "^2.6.11",

src/FormularioInput.vue

@@ -113,6 +113,8 @@ export default class FormularioInput extends Vue {
 
     get context (): Record<string, any> {
         return this.defineModel({
+            id: this.id || this.defaultId,
+            name: this.nameOrFallback,
             attributes: this.elementAttributes,
             blurHandler: this.blurHandler.bind(this),
             disableErrors: this.disableErrors,
@@ -123,10 +125,8 @@ export default class FormularioInput extends Vue {
             hasGivenName: this.hasGivenName,
             hasValidationErrors: this.hasValidationErrors.bind(this),
             help: this.help,
-            id: this.id || this.defaultId,
             imageBehavior: this.imageBehavior,
             limit: this.limit,
-            name: this.nameOrFallback,
             performValidation: this.performValidation.bind(this),
             preventWindowDrops: this.preventWindowDrops,
             repeatable: this.repeatable,
@@ -149,7 +149,7 @@ export default class FormularioInput extends Vue {
         return parsedValidationRules
     }
 
-    get messages () {
+    get messages (): Record<string, any> {
         const messages = {}
         Object.keys(this.validationMessages).forEach((key) => {
             messages[snakeToCamel(key)] = this.validationMessages[key]
@@ -252,7 +252,6 @@ export default class FormularioInput extends Vue {
         return [
             ...arrayify(this.errors),
             ...this.localErrors,
-            ...arrayify(this.error),
         ].map(message => ({ rule: null, context: null, message }))
     }
 
@@ -460,7 +459,7 @@ export default class FormularioInput extends Vue {
         }
     }
 
-    getMessageFunc (ruleName: string) {
+    getMessageFunc (ruleName: string): Function {
         ruleName = snakeToCamel(ruleName)
         if (this.messages && typeof this.messages[ruleName] !== 'undefined') {
             switch (typeof this.messages[ruleName]) {

storybook/config/addons.js

@@ -0,0 +1,4 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-notes/register'

storybook/config/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@storybook/vue'
+
+const req = require.context('../stories/', true, /.stories.js$/)
+
+configure(() => {
+    req.keys().forEach(filename => req(filename))
+}, module)

storybook/config/webpack.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    devServer: {
+        watchOptions: {
+            aggregateTimeout: 300,
+            poll: true,
+        },
+    },
+}

storybook/stories/FormularioInput.stories.js

@@ -0,0 +1,6 @@
+import { storiesOf } from '@storybook/vue'
+
+import FormularioInputTale from './FormularioInput.tale'
+
+storiesOf('FormularioInput', module)
+    .add('Default', () => FormularioInputTale)

storybook/stories/FormularioInput.tale.vue

@@ -0,0 +1,44 @@
+<template>
+    <FormularioForm v-model="values">
+        <FormularioInput
+            v-slot="{ context }"
+            name="text"
+            validation="number|required"
+        >
+            <label for="text-field">Text field</label>
+
+            <div>
+                <input
+                    id="text-field"
+                    v-model="context.model"
+                    type="text"
+                >
+            </div>
+
+            <div
+                v-for="(error, index) in context.allErrors"
+                :key="index"
+            >
+                {{ error.message }}
+            </div>
+        </FormularioInput>
+    </FormularioForm>
+</template>
+
+<script>
+import FormularioForm from '@/FormularioForm'
+import FormularioInput from '@/FormularioInput'
+
+export default {
+    name: 'FormularioInputTale',
+
+    components: {
+        FormularioForm,
+        FormularioInput,
+    },
+
+    data: () => ({
+        values: {},
+    })
+}
+</script>

storybook/stories/index.stories.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Formulario from '@/Formulario.ts'
+
+Vue.mixin({
+    methods: {
+        $t (text) {
+            return text
+        }
+    }
+})
+Vue.use(new Formulario())