adata-ui 0.1.2 → 0.1.3

package/package.json

@@ -1,25 +1,41 @@
 {
   "name": "adata-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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"
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "node-sass": "^5.0.0",
     "user": "0.0.0",
-    "vue": "^2.6.11"
+    "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",
+    "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": {

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,61 @@
+<template>
+  <div :class="['note', {'note--error': error}]">
+    <svg class="note-svg" v-if="!error" width="14" height="14" fill="none"
+         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="note-svg">
+      <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"  width="14" height="14" 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;
+  }
+}
+</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,16 @@
+import BaseButton from './BaseButton.vue'
+
+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 v-bind="$props">button</base-button>'
+})
+
+export const Simple = Template.bind({})
+Simple.args = { size: 'lg' }

package/src/components/PasswordField/PasswordField.stories.js

@@ -0,0 +1,16 @@
+import PasswordField from "./PasswordField.vue";
+
+export default {
+    title: 'PasswordField',
+    component: PasswordField,
+    template: "<text-field label='Example'></text-field>>"
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { PasswordField },
+    props: Object.keys(argTypes),
+    template: '<password-field v-bind="$props"></password-field>'
+})
+
+export const BasePasswordField = Template.bind({});
+BasePasswordField.args = {label: 'Password'}

package/src/components/PasswordField/PasswordField.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="adt-text-block">
+    <div class="adt-text-block__field">
+      <input
+        ref="input"
+        :type="type"
+        :value="value"
+        required
+        @input="$emit('input', $event.target.value)"
+        class="adt-text-block__input"
+        :class="{ error: !!errorText }"
+      />
+      <label class="adt-text-block__label">{{ label }}</label>
+      <div v-if="showPassword" @click="showPassword = false" class="adt-text-block__icon desktop">
+        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.992 511.992" id="openedEye">
+          <path
+              d="M510.096 249.937c-4.032-5.867-100.928-143.275-254.101-143.275-131.435 0-248.555 136.619-253.483 142.443-3.349 3.968-3.349 9.792 0 13.781C7.44 268.71 124.56 405.329 255.995 405.329S504.549 268.71 509.477 262.886c3.094-3.669 3.371-8.981.619-12.949zM255.995 383.996c-105.365 0-205.547-100.48-230.997-128 25.408-27.541 125.483-128 230.997-128 123.285 0 210.304 100.331 231.552 127.424-24.534 26.645-125.291 128.576-231.552 128.576z"></path>
+          <path
+              d="M255.995 170.662c-47.061 0-85.333 38.272-85.333 85.333s38.272 85.333 85.333 85.333 85.333-38.272 85.333-85.333-38.272-85.333-85.333-85.333zm0 149.334c-35.285 0-64-28.715-64-64s28.715-64 64-64 64 28.715 64 64-28.715 64-64 64z"></path>
+        </svg>
+      </div>
+      <div v-else @click="showPassword = true" class="adt-text-block__icon desktop">
+        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" id="closedEye">
+          <path
+              d="M316.332 195.662c-4.16-4.16-10.923-4.16-15.083 0s-4.16 10.944 0 15.083c12.075 12.075 18.752 28.139 18.752 45.248 0 35.285-28.715 64-64 64-17.109 0-33.173-6.656-45.248-18.752-4.16-4.16-10.923-4.16-15.083 0-4.16 4.139-4.16 10.923 0 15.083 16.085 16.128 37.525 25.003 60.331 25.003 47.061 0 85.333-38.272 85.333-85.333 0-22.807-8.874-44.247-25.002-60.332zm-45.462-23.531c-4.843-.853-9.792-1.472-14.869-1.472-47.061 0-85.333 38.272-85.333 85.333 0 5.077.619 10.027 1.493 14.869.917 5.163 5.419 8.811 10.475 8.811.619 0 1.237-.043 1.877-.171 5.781-1.024 9.664-6.571 8.64-12.352-.661-3.627-1.152-7.317-1.152-11.157 0-35.285 28.715-64 64-64 3.84 0 7.531.491 11.157 1.131 5.675 1.152 11.328-2.859 12.352-8.64 1.024-5.781-2.858-11.328-8.64-12.352z"></path>
+          <path
+              d="M509.462 249.102c-2.411-2.859-60.117-70.208-139.712-111.445-5.163-2.709-11.669-.661-14.379 4.587-2.709 5.227-.661 11.669 4.587 14.379 61.312 31.744 110.293 81.28 127.04 99.371-25.429 27.541-125.504 128-230.997 128-35.797 0-71.872-8.64-107.264-25.707-5.248-2.581-11.669-.341-14.229 4.971-2.581 5.291-.341 11.669 4.971 14.229 38.293 18.496 77.504 27.84 116.523 27.84 131.435 0 248.555-136.619 253.483-142.443 3.369-3.969 3.348-9.793-.023-13.782zM325.996 118.947c-24.277-8.171-47.829-12.288-69.995-12.288-131.435 0-248.555 136.619-253.483 142.443-3.115 3.669-3.371 9.003-.597 12.992 1.472 2.112 36.736 52.181 97.856 92.779a10.48 10.48 0 005.888 1.792c3.435 0 6.827-1.664 8.875-4.8 3.264-4.885 1.92-11.52-2.987-14.763-44.885-29.845-75.605-65.877-87.104-80.533 24.555-26.667 125.291-128.576 231.552-128.576 19.861 0 41.131 3.755 63.189 11.157 5.589 2.005 11.648-1.088 13.504-6.699 1.878-5.589-1.109-11.626-6.698-13.504z"></path>
+          <path
+              d="M444.865 67.128c-4.16-4.16-10.923-4.16-15.083 0L67.116 429.795c-4.16 4.16-4.16 10.923 0 15.083a10.716 10.716 0 007.552 3.115c2.731 0 5.461-1.045 7.531-3.115L444.865 82.211c4.16-4.16 4.16-10.923 0-15.083z"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="adt-text-block__error" v-if="!!errorText">
+      {{ errorText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PasswordField",
+  props: {
+    errorText: {
+      type: String,
+      default: ""
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [String, null],
+      required: true,
+    }
+  },
+  data() {
+    return {
+      showPassword: false
+    }
+  },
+  computed: {
+    type() {
+      return this.showPassword ? "text" : "password";
+    }
+  }
+}
+</script>
+

package/src/components/TextField/TextField.stories.js

@@ -0,0 +1,16 @@
+import TextField from "./TextField.vue";
+
+export default {
+    title: 'TextField',
+    component: TextField,
+    template: "<text-field label='Example'></text-field>>"
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { TextField },
+    props: Object.keys(argTypes),
+    template: '<text-field v-bind="$props"></text-field>'
+})
+
+export const Clearable = Template.bind({});
+Clearable.args = {label: 'Clearable', clearable: true}