adata-ui 0.1.0 → 0.1.4

package/package.json

@@ -1,52 +1,70 @@
-{
-  "name": "adata-ui",
-  "version": "0.1.0",
-  "private": false,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build-bundle": "vue-cli-service build --target lib --name adata-ui ./src/components/index.js",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "user": "0.0.0",
-    "vue": "^2.6.11"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "main": "./dist/adata-ui.common.js",
-  "files": [
-    "dist/*",
-    "src/*",
-    "public/*",
-    "*.json",
-    "*.js"
-  ]
-}
+{
+  "name": "adata-ui",
+  "version": "0.1.4",
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "build-bundle": "vue-cli-service build --target lib --name adata-ui ./src/components/index.js",
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "test": "jest"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "node-sass": "^5.0.0",
+    "user": "0.0.0",
+    "vue": "^2.6.11",
+    "vue-the-mask": "^0.11.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.7",
+    "@storybook/addon-actions": "^6.4.13",
+    "@storybook/addon-essentials": "^6.4.13",
+    "@storybook/addon-links": "^6.4.13",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/vue": "^6.4.13",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^5.2.7",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "jest": "^27.4.7",
+    "sass": "^1.48.0",
+    "sass-loader": "^10.1.1",
+    "style-loader": "^2.0.0",
+    "vue-loader": "^15.9.8",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "main": "./dist/adata-ui.common.js",
+  "files": [
+    "dist/*",
+    "src/*",
+    "public/*",
+    "*.json",
+    "*.js"
+  ]
+}

package/src/App.vue

@@ -1,18 +1,13 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'App',
-  components: {
-    HelloWorld
-  }
+  components: {}
 }
 </script>
 

package/src/components/Alert/Alert.stories.js

@@ -0,0 +1,17 @@
+import Alert from './Alert.vue'
+
+export default {
+    title: 'Alert',
+    component: Alert,
+    template: '<alert>button</alert>'
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { Alert },
+    props: Object.keys(argTypes),
+    template: '<alert v-bind="$props">Alert</alert>'
+})
+
+export const Info = Template.bind({})
+export const Error = Template.bind({})
+Error.args = {error: true}

package/src/components/Alert/Alert.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="['note', {'note--error': error}]">
+    <svg class="note-svg" v-if="!error" fill="none"
+         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <circle cx="8" cy="8" r="6.5" stroke="#007AFF"></circle>
+      <path
+          d="M9.661 11.137l-.111.457c-.336.132-.604.233-.803.302-.2.07-.432.104-.696.104-.406 0-.722-.1-.947-.297a.961.961 0 01-.338-.755c0-.117.008-.239.025-.363.017-.123.045-.263.082-.419l.419-1.483c.037-.142.069-.277.094-.404.026-.126.038-.243.038-.348 0-.189-.039-.321-.117-.396-.078-.074-.227-.112-.448-.112-.108 0-.22.017-.333.051a4.649 4.649 0 00-.294.096l.112-.457c.275-.112.537-.207.788-.287.251-.08.489-.12.713-.12.403 0 .714.098.933.293a.97.97 0 01.327.76c0 .064-.007.177-.022.34a2.277 2.277 0 01-.084.447l-.417 1.478a3.921 3.921 0 00-.133.752c0 .196.044.33.132.401.088.071.24.107.456.107.102 0 .217-.018.345-.054.128-.035.221-.066.28-.093zm.106-6.203a.865.865 0 01-.292.658.994.994 0 01-.703.272 1 1 0 01-.706-.272.863.863 0 01-.295-.658c0-.257.098-.477.295-.66A1 1 0 018.772 4a.99.99 0 01.703.274.873.873 0 01.292.66z"
+          fill="#007AFF"
+      ></path>
+    </svg>
+    <svg class="note-svg" v-else fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="note-error-svg">
+      <circle cx="8" cy="8" r="6.5" stroke="#e60000"></circle>
+      <path
+          d="M9.661 11.137l-.111.457c-.336.132-.604.233-.803.302-.2.07-.432.104-.696.104-.406 0-.722-.1-.947-.297a.961.961 0 01-.338-.755c0-.117.008-.239.025-.363.017-.123.045-.263.082-.419l.419-1.483c.037-.142.069-.277.094-.404.026-.126.038-.243.038-.348 0-.189-.039-.321-.117-.396-.078-.074-.227-.112-.448-.112-.108 0-.22.017-.333.051a4.649 4.649 0 00-.294.096l.112-.457c.275-.112.537-.207.788-.287.251-.08.489-.12.713-.12.403 0 .714.098.933.293a.97.97 0 01.327.76c0 .064-.007.177-.022.34a2.277 2.277 0 01-.084.447l-.417 1.478a3.921 3.921 0 00-.133.752c0 .196.044.33.132.401.088.071.24.107.456.107.102 0 .217-.018.345-.054.128-.035.221-.066.28-.093zm.106-6.203a.865.865 0 01-.292.658.994.994 0 01-.703.272 1 1 0 01-.706-.272.863.863 0 01-.295-.658c0-.257.098-.477.295-.66A1 1 0 018.772 4a.99.99 0 01.703.274.873.873 0 01.292.66z"
+          fill="#e60000"></path>
+    </svg>
+    <span class="text">
+      <slot></slot>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    error: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.note {
+  font-weight: 400;
+  font-style: italic;
+  font-size: 12px;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  color: #007aff;
+  padding: 8px 16px;
+  background: #007AFF19;
+  border-radius: 2px;
+
+  &--error {
+    background: rgba(220, 88, 88, 0.2);
+    color: #e60000;
+  }
+
+  @media(max-width: 1025px) {
+    width: 100%;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 16px;
+    margin: 0 0 16px;
+  }
+  &-svg {
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>

package/src/components/Button/BaseButton.vue

@@ -0,0 +1,241 @@
+<template>
+  <component
+    :class="[
+      'btn',
+      {'full-width': fullwidth},
+      `btn-${variant}`,
+      `size size-${size}`,
+      `size-fz-${fontSize}`,
+    ]"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :is="url ? 'nuxt-link' : 'button'"
+    :to="url"
+    :event="event ? 'click' : ''"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+
+<script>
+export default {
+  name: "BaseButton",
+  props: {
+    variant: {
+      type: String,
+      default: "yellow",
+      validator: function (value) {
+        return (
+          [
+            'white',
+            'grey',
+            'yellow',
+            'danger',
+            'success',
+            'primary-outlined',
+            'primary'
+          ].includes(value)
+        );
+      },
+    },
+    fontSize: {
+      type: String,
+      validator: function (value) {
+        return (
+          [
+            'sm',
+          ].includes(value)
+        );
+      },
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: function (value) {
+        return (
+          [
+            'sm',
+            'md',
+            'md-short',
+            'lg',
+          ].includes(value)
+        );
+      },
+    },
+    tag: {
+      type: String,
+      default: "button",
+    },
+    url: {
+      type: [String, Boolean],
+      default: false
+    },
+    event: {
+      type: Boolean,
+      default: true
+    },
+    fullwidth: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.btn {
+  cursor: pointer;
+  border: none;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &.size {
+    box-sizing: border-box;
+
+    &-sm {
+      padding: 6px 16px;
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    &-md {
+      padding: 8px 36px;
+      font-size: 14px;
+      line-height: 24px;
+
+      &-short {
+        padding: 8px 16px;
+        font-size: 14px;
+        line-height: 24px;
+      }
+    }
+
+    &-lg {
+      padding: 8px 40px;
+      font-size: 14px;
+      line-height: 24px;
+    }
+
+    &-fz-sm {
+      font-size: 12px;
+      line-height: 20px;
+    }
+  }
+
+  &-grey {
+    color: var(--newGray);
+    border: 1px solid #9da3ac;
+    background: #fff;
+
+    &:hover {
+      background: #eef0f5;
+    }
+
+    &:active {
+      background: #eef0f5;
+    }
+  }
+
+  &-white {
+    background: #FFFFFF;
+    color: #007AFF;
+
+    &:hover {
+      background: #eef0f5;
+    }
+
+    &:active {
+      background: #d6d6d7;
+    }
+  }
+
+  &-yellow {
+    background: #FFCD33;
+    color: #333333;
+
+    &:hover {
+      background: rgba(255, 205, 51, 0.7);
+    }
+
+    &:active {
+      background: #fab619;
+    }
+  }
+
+  &-danger {
+    border: 1px solid #FF2E43;
+    color: #FF2E43;
+
+    &:hover {
+      background: #FF2E43;
+      color: #fff;
+    }
+
+    &:active {
+      background: #FF2E43;
+      color: #fff;
+    }
+  }
+
+  &-success {
+    background: #00B92D;
+    color: #fff;
+
+    &:hover {
+      background: #008621;
+    }
+
+    &:active {
+      background: #008621;
+    }
+  }
+
+  &-primary-outlined {
+    border: 1px solid #007AFF;
+    color: #007AFF;
+
+    &:hover {
+      background: #007AFF;
+      color: #fff;
+    }
+
+    &:active {
+      background: #0055BB;
+      color: #fff;
+    }
+  }
+
+  &-primary {
+    background: #1E88E5;
+    color: #FFF;
+
+    &:hover {
+      background: #007AFF;
+      color: #fff;
+    }
+
+    &:active {
+      background: #0055BB;
+      color: #fff;
+    }
+  }
+
+  box-sizing: border-box;
+}
+</style>

package/src/components/Button/Button.stories.js

@@ -0,0 +1,23 @@
+import BaseButton from './BaseButton.vue'
+import { action } from "@storybook/addon-actions"
+
+export default {
+    title: 'BaseButton',
+    component: BaseButton,
+    template: '<base-button>Button</base-button>'
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { BaseButton },
+    props: Object.keys(argTypes),
+    template: '<base-button @click="action" v-bind="$props">Button</base-button>',
+    methods: {
+        action: action('click')
+    }
+})
+
+export const Simple = Template.bind({})
+Simple.args = {
+    size: 'lg',
+    variant: 'yellow'
+}

package/src/components/Footer/Footer.stories.js

@@ -0,0 +1,20 @@
+import Footer from './Footer.vue'
+
+export default {
+    title: 'Footer',
+    component: Footer,
+    template: '<Footer></Footer>'
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { Footer },
+    props: Object.keys(argTypes),
+    template: '<Footer v-bind="$props"></Footer>'
+});
+
+export const MainFooter = Template.bind({});
+
+export const WithBottomMenu = Template.bind({});
+WithBottomMenu.args = {
+    hasBottomMenu: true
+}