@eturnity/eturnity_reusable_components 7.30.3 → 7.32.0

package/.eslintrc.js

@@ -0,0 +1,184 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier/recommended',
+  ],
+  plugins: ['vue', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  rules: {
+    'vue/component-name-in-template-casing': [
+      'warn',
+      'PascalCase',
+      {
+        registeredComponentsOnly: false,
+        ignores: [],
+      },
+    ],
+    'vue/multi-word-component-names': [
+      'warn',
+      {
+        ignores: [],
+      },
+    ],
+    'vue/html-closing-bracket-newline': [
+      'warn',
+      {
+        singleline: 'never',
+        multiline: 'always',
+      },
+    ],
+    'vue/html-closing-bracket-spacing': [
+      'warn',
+      {
+        startTag: 'never',
+        endTag: 'never',
+        selfClosingTag: 'always',
+      },
+    ],
+    'vue/no-multi-spaces': [
+      'warn',
+      {
+        ignoreProperties: false,
+      },
+    ],
+    'vue/html-end-tags': 'warn',
+    'keyword-spacing': [
+      'warn',
+      {
+        before: true, // Require a space before keywords
+        after: true, // Require a space after keywords
+      },
+    ],
+    // Enforce one space after comma
+    'comma-spacing': [
+      'warn',
+      {
+        before: false, // No space before comma
+        after: true, // Require a space after comma
+      },
+    ],
+    'func-call-spacing': ['warn', 'never'],
+    // Enforce one space around binary operators (+, -, *, /, etc.)
+    'space-infix-ops': 'warn',
+    // Enforce no space inside parentheses
+    'space-in-parens': ['warn', 'never'],
+    // Enforce one space before block statements (if, else, for, etc.)
+    'space-before-blocks': 'warn',
+    // Enforce no spaces inside square brackets
+    'array-bracket-spacing': ['warn', 'never'],
+    // Enforce one space before function parentheses
+    'space-before-function-paren': ['warn', 'never'],
+    // Enforce one space inside braces of object literals
+    'object-curly-spacing': ['warn', 'always'],
+    // Enforce one space before and after arrow functions (optional)
+    'arrow-spacing': ['warn', { before: true, after: true }],
+    // Enforce one space after colon in object literals
+    'key-spacing': [
+      'warn',
+      {
+        beforeColon: false, // No space before colon
+        afterColon: true, // Require one space after colon
+        mode: 'strict', // Enforce spacing between key and value
+      },
+    ],
+    'vue/html-indent': 'off',
+    'vue/html-quotes': ['warn', 'double'],
+    'vue/html-self-closing': [
+      'warn',
+      {
+        html: {
+          void: 'always',
+          normal: 'never',
+          component: 'always',
+        },
+        svg: 'always',
+        math: 'always',
+      },
+    ],
+    'vue/require-default-prop': 'warn',
+    'vue/require-prop-types': 'warn',
+    'vue/v-on-event-hyphenation': [
+      'warn',
+      'always',
+      {
+        autofix: true,
+        ignore: [],
+      },
+    ],
+    'vue/prop-name-casing': ['warn', 'camelCase'],
+    'vue/order-in-components': 'warn',
+    'vue/this-in-template': ['warn', 'never'],
+    'vue/attributes-order': [
+      'warn',
+      {
+        order: [
+          'DEFINITION',
+          'LIST_RENDERING',
+          'CONDITIONALS',
+          'RENDER_MODIFIERS',
+          'GLOBAL',
+          ['UNIQUE', 'SLOT'],
+          'TWO_WAY_BINDING',
+          'OTHER_DIRECTIVES',
+          'OTHER_ATTR',
+          'EVENTS',
+          'CONTENT',
+        ],
+        alphabetical: true,
+      },
+    ],
+    'vue/no-unused-vars': 'warn',
+    'vue/no-use-v-if-with-v-for': [
+      'warn',
+      {
+        allowUsingIterationVar: false,
+      },
+    ],
+    'no-unused-vars': 'warn',
+    'no-undef': 'warn',
+    'no-console': 'warn',
+    'no-debugger': 'warn',
+    'no-multi-spaces': 'warn',
+    'no-mixed-spaces-and-tabs': 'warn',
+    'no-redeclare': 'warn',
+    'no-prototype-builtins': 'warn',
+    'no-unsafe-finally': 'warn',
+    'max-len': [
+      'warn',
+      {
+        code: 120,
+        tabWidth: 2,
+        ignoreUrls: true,
+        ignoreComments: true,
+        ignoreTrailingComments: true,
+        ignorePattern: '^import\\s.+\\sfrom\\s.+;$',
+      },
+    ],
+    'prettier/prettier': [
+      'warn',
+      {
+        semi: false,
+        singleQuote: true,
+        trailingComma: 'es5',
+        printWidth: 80,
+        tabWidth: 2,
+        useTabs: false,
+        endOfLine: 'auto',
+      },
+    ],
+  },
+  globals: {
+    _: true,
+  },
+}

package/.prettierrc

@@ -1,7 +1,9 @@
 {
-    "semi": false,
-    "singleQuote": true,
-    "useTabs": false,
-    "trailingComma": "none",
-    "printWidth": 80
-  }
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "vueIndentScriptAndStyle": true
+}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.30.3",
+  "version": "7.32.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "prettier": "prettier --write 'src/**/*.{js,vue}'"
   },
   "dependencies": {
     "@storybook/vue3": "7.0.18",
@@ -22,28 +23,15 @@
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.12.16",
-    "@babel/eslint-parser": "7.12.16",
-    "@vue/cli-plugin-babel": "5.0.8",
+    "babel-eslint": "10.1.0",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
     "@vue/compiler-sfc": "3.3.4",
-    "eslint": "7.32.0",
-    "eslint-plugin-vue": "8.0.3"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "@babel/eslint-parser"
-    },
-    "rules": {}
+    "eslint": "8.0.1",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "9.14.1",
+    "prettier": "2.8.4"
   },
   "browserslist": [
     "> 1%",

package/src/App.vue

@@ -1,109 +1,110 @@
 <template>
-  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
-    <page-container>
+  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
+    <PageContainer>
       <br />
-      <input-number
+      <InputNumber
+        background-color="transparent"
+        border-color="eturnityGrey"
+        input-height="34px"
+        input-width="420px"
+        :interaction-step="1"
+        :is-interactive="true"
+        :min-number="0"
+        :number-precision="0"
+        text-align="left"
+        unit-name="mm"
         :value="value"
-        :minNumber="0"
-        unitName="mm"
-        :numberPrecision="0"
-        backgroundColor="transparent"
-        borderColor="eturnityGrey"
-        inputHeight="34px"
-        inputWidth="420px"
-        textAlign="left"
-        :isInteractive="true"
-        :interactionStep="1"
-        @on-input="inputHandler"
+        @input-blur="blurHandler"
         @input-change="changeHandler"
         @input-focus="focusHandler"
-        @input-blur="blurHandler"
+        @on-input="inputHandler"
       >
-        <template v-slot:label>
+        <template #label>
           <div>Interactive Label 1</div>
         </template>
-      </input-number>
+      </InputNumber>
 
-      <hr>
+      <hr />
 
-      <input-number
+      <InputNumber
+        background-color="transparent"
+        border-color="eturnityGrey"
+        input-height="34px"
+        input-width="420px"
+        :interaction-step="1"
+        :is-interactive="true"
+        :min-number="0"
+        :number-precision="0"
+        text-align="left"
+        unit-name="mm"
         :value="value"
-        :minNumber="0"
-        unitName="mm"
-        :numberPrecision="0"
-        backgroundColor="transparent"
-        borderColor="eturnityGrey"
-        inputHeight="34px"
-        inputWidth="420px"
-        textAlign="left"
-        :isInteractive="true"
-        :interactionStep="1"
-        @on-input="inputHandler"
+        @input-blur="blurHandler"
         @input-change="changeHandler"
         @input-focus="focusHandler"
-        @input-blur="blurHandler"
+        @on-input="inputHandler"
       >
-        <template v-slot:label>
+        <template #label>
           <div>Interactive Label 2</div>
         </template>
-      </input-number>
+      </InputNumber>
 
-      <hr>
-      <button @click="value=42">Click to set at 42</button>
-    </page-container>
+      <hr />
+      <button @click="value = 42">Click to set at 42</button>
+    </PageContainer>
   </ThemeProvider>
 </template>
 
 <script>
-import { ThemeProvider } from 'vue3-styled-components'
-import theme from './assets/theme'
-import styled from 'vue3-styled-components'
-import InputNumber from '@/components/inputs/inputNumber'
+  import { ThemeProvider } from 'vue3-styled-components'
+  import theme from './assets/theme'
+  import styled from 'vue3-styled-components'
+  import InputNumber from '@/components/inputs/inputNumber'
 
-const PageContainer = styled.div`
-  padding: 40px;
-`
+  const PageContainer = styled.div`
+    padding: 40px;
+  `
 
-export default {
-  name: 'App',
-  components: {
-    ThemeProvider,
-    PageContainer,
-    InputNumber,
-  },
-  data() {
-    return {
-      value: 42,
-    }
-  },
-  computed: {
-  },
-  methods: {
-    blurHandler(e) {
-      console.log('blur', e)
+  export default {
+    name: 'App',
+    components: {
+      ThemeProvider,
+      PageContainer,
+      InputNumber,
     },
-    changeHandler(e) {
-      console.log('change', e)
+    data() {
+      return {
+        value: 42,
+      }
     },
-    focusHandler(e) {
-      console.log('focus', e)
+    computed: {},
+    methods: {
+      blurHandler(e) {
+        console.log('blur', e)
+      },
+      changeHandler(e) {
+        console.log('change', e)
+      },
+      focusHandler(e) {
+        console.log('focus', e)
+      },
+      inputHandler(e) {
+        console.log('input', e)
+        //this.value = e
+        setTimeout(() => {
+          this.value = e
+        }, 1000)
+      },
+      getTheme() {
+        return theme
+      },
     },
-    inputHandler(e) {
-      console.log('input', e)
-      //this.value = e
-      setTimeout(()=>{this.value = e},1000)
-    },
-    getTheme() {
-      return theme
-    }
   }
-}
 </script>
 
 <style>
-html,
-body {
-  height: 100%;
-  margin: 0;
-}
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+  }
 </style>

package/src/assets/theme.js

@@ -26,16 +26,16 @@ const theme = {
     transparentWhite3: '#ffffff48',
     transparentBlack1: '#263238e6',
     disabled: '#dfe1e1',
-    eturnityGrey: '#263238'
+    eturnityGrey: '#263238',
   },
   screen: {
     mobileSmall: '345px',
     mobile: '425px',
     mobileLarge: '530px',
     tablet: '768px',
-    tabletLarge: '950px'
+    tabletLarge: '950px',
   },
-  borderRadius: '4px'
+  borderRadius: '4px',
 }
 
 export default theme

package/src/components/addNewButton/AddNewButton.stories.js

@@ -1,7 +1,7 @@
-import AddNewButton from "./index.vue"
+import AddNewButton from './index.vue'
 
 export default {
-  title: "AddNewButton",
+  title: 'AddNewButton',
   component: AddNewButton,
   // argTypes: {},
 }

package/src/components/addNewButton/index.vue

@@ -1,64 +1,61 @@
 <template>
-  <page-container :shouldPosition="shouldPosition">
-    <button-container :data-id="dataId">
+  <PageContainer :should-position="shouldPosition">
+    <ButtonContainer :data-id="dataId">
       <PlusButtonSvg />
-    </button-container>
-  </page-container>
+    </ButtonContainer>
+  </PageContainer>
 </template>
 
 <script>
-// import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-import styled from 'vue3-styled-components'
-import PlusButtonSvg from '../../assets/icons/plus_button.svg'
+  // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
+  import styled from 'vue3-styled-components'
+  import PlusButtonSvg from '../../assets/icons/plus_button.svg'
 
-const pageAttrs = { shouldPosition: Boolean }
-const PageContainer = styled('div', pageAttrs)`
-  position: ${(props) => (props.shouldPosition ? 'fixed' : 'unset')};
-  bottom: 30px;
-  right: 30px;
-`
+  const pageAttrs = { shouldPosition: Boolean }
+  const PageContainer = styled('div', pageAttrs)`
+    position: ${(props) => (props.shouldPosition ? 'fixed' : 'unset')};
+    bottom: 30px;
+    right: 30px;
+  `
 
-const ButtonContainer = styled.div`
-  height: 60px;
-  width: 60px;
-  background-color: ${(props) => props.theme.colors.green};
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 100%;
-  cursor: pointer;
-  display: grid;
-  align-items: center;
-  justify-items: center;
+  const ButtonContainer = styled.div`
+    height: 60px;
+    width: 60px;
+    background-color: ${(props) => props.theme.colors.green};
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 100%;
+    cursor: pointer;
+    display: grid;
+    align-items: center;
+    justify-items: center;
 
-  &:hover {
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-      ${(props) => props.theme.colors.green};
-  }
-
-  &:active,
-  &:focus {
-    background: ${(props) => props.theme.colors.green};
-  }
-`
+    &:hover {
+      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+        ${(props) => props.theme.colors.green};
+    }
 
-const PlusButton = styled.img``
+    &:active,
+    &:focus {
+      background: ${(props) => props.theme.colors.green};
+    }
+  `
 
-export default {
-  name: 'add-new-button',
-  components: {
-    PageContainer,
-    ButtonContainer,
-    PlusButton,
-    PlusButtonSvg
-  },
-  props: {
-    shouldPosition: {
-      required: false,
-      default: true
+  export default {
+    name: 'AddNewButton',
+    components: {
+      PageContainer,
+      ButtonContainer,
+      PlusButtonSvg,
+    },
+    props: {
+      shouldPosition: {
+        required: false,
+        default: true,
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
     },
-    dataId: {
-      type: String,
-      default: ''
-    }
   }
-}
 </script>