@eturnity/eturnity_reusable_components 7.32.1 → 7.33.1

package/.eslintrc.js

@@ -152,6 +152,8 @@ module.exports = {
     'no-multi-spaces': 'warn',
     'no-mixed-spaces-and-tabs': 'warn',
     'no-redeclare': 'warn',
+    'vue/no-reserved-component-names': 'warn',
+    'vue/no-deprecated-destroyed-lifecycle': 'warn',
     'no-prototype-builtins': 'warn',
     'no-unsafe-finally': 'warn',
     'max-len': [

package/babel.config.js

@@ -1,5 +1,7 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+  presets: ['@vue/cli-plugin-babel/preset', '@babel/preset-env'],
+  plugins: [
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-transform-runtime',
+  ],
 }

package/jest.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.js$': 'babel-jest',
+  },
+  moduleFileExtensions: ['js', 'json', 'vue'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  testMatch: ['**/src/**/*.spec.js'],
+  collectCoverageFrom: [
+    'src/**/*.{js,vue}',
+    '!src/main.js',
+    '!src/router/index.js',
+    '!**/node_modules/**',
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^@/components/icon/iconCache$': '<rootDir>/tests/__mocks__/iconCache.js',
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.32.1",
+  "version": "7.33.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -8,7 +8,9 @@
     "lint": "vue-cli-service lint",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "prettier": "prettier --write 'src/**/*.{js,vue}'"
+    "prettier": "prettier --write 'src/**/*.{js,vue}'",
+    "test": "jest",
+    "prepublishOnly": "npm run test"
   },
   "dependencies": {
     "@storybook/vue3": "7.0.18",
@@ -19,19 +21,53 @@
     "html-loader": "0.5.5",
     "postcss": "8.4.25",
     "vue": "3.3.4",
+    "vue-router": "^4.4.2",
     "vue3-styled-components": "1.2.1",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-    "babel-eslint": "10.1.0",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/preset-env": "^7.25.3",
+    "@types/node": "^22.1.0",
+    "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
-    "@vue/cli-service": "5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "@vue/compiler-sfc": "3.3.4",
+    "@vue/test-utils": "^2.4.6",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "^26.6.3",
     "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"
+    "jest": "^26.6.3",
+    "prettier": "2.8.4",
+    "vue-jest": "^5.0.0-alpha.10"
+  },
+  "jest": {
+    "preset": "@vue/cli-plugin-unit-jest",
+    "transform": {
+      "^.+\\.vue$": "vue-jest",
+      "^.+\\.js$": "babel-jest"
+    },
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "transformIgnorePatterns": [
+      "<rootDir>/node_modules/"
+    ],
+    "testMatch": [
+      "**/tests/unit/**/*.spec.js"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,vue}",
+      "!src/main.js",
+      "!src/router/index.js",
+      "!**/node_modules/**"
+    ]
   },
   "browserslist": [
     "> 1%",

package/src/App.vue

@@ -1,99 +1,19 @@
 <template>
   <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
-    <PageContainer>
-      <br />
-      <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"
-        @input-blur="blurHandler"
-        @input-change="changeHandler"
-        @input-focus="focusHandler"
-        @on-input="inputHandler"
-      >
-        <template #label>
-          <div>Interactive Label 1</div>
-        </template>
-      </InputNumber>
-
-      <hr />
-
-      <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"
-        @input-blur="blurHandler"
-        @input-change="changeHandler"
-        @input-focus="focusHandler"
-        @on-input="inputHandler"
-      >
-        <template #label>
-          <div>Interactive Label 2</div>
-        </template>
-      </InputNumber>
-
-      <hr />
-      <button @click="value = 42">Click to set at 42</button>
-    </PageContainer>
+    <RouterView />
   </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'
-
-  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)
-      },
-      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
       },

package/src/Test.vue

@@ -0,0 +1,102 @@
+<template>
+  <PageContainer>
+    <br />
+    <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"
+      @input-blur="blurHandler"
+      @input-change="changeHandler"
+      @input-focus="focusHandler"
+      @on-input="inputHandler"
+    >
+      <template #label>
+        <div>Interactive Label 1</div>
+      </template>
+    </InputNumber>
+
+    <hr />
+
+    <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"
+      @input-blur="blurHandler"
+      @input-change="changeHandler"
+      @input-focus="focusHandler"
+      @on-input="inputHandler"
+    >
+      <template #label>
+        <div>Interactive Label 2</div>
+      </template>
+    </InputNumber>
+
+    <hr />
+    <button @click="value = 42">Click to set at 42</button>
+  </PageContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import InputNumber from '@/components/inputs/inputNumber'
+
+  const PageContainer = styled.div`
+    padding: 40px;
+  `
+
+  export default {
+    name: 'App',
+    components: {
+      PageContainer,
+      InputNumber,
+    },
+    data() {
+      return {
+        value: 42,
+      }
+    },
+    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)
+      },
+    },
+  }
+</script>
+
+<style>
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+  }
+</style>

package/src/assets/tests/__mocks__/iconCache.js

@@ -0,0 +1 @@
+export const fetchIcon = jest.fn(() => Promise.resolve('mocked-icon-url.svg'))

package/src/assets/tests/helpers.js

@@ -0,0 +1,12 @@
+export function convertHexToRGB(hex) {
+  // Remove the '#' if it's included in the input
+  hex = hex.replace(/^#/, '')
+
+  // Parse the hex values into separate R, G, and B values
+  const red = parseInt(hex.substring(0, 2), 16)
+  const green = parseInt(hex.substring(2, 4), 16)
+  const blue = parseInt(hex.substring(4, 6), 16)
+
+  // Return the RGB values as a string
+  return `rgb(${red}, ${green}, ${blue})`
+}

package/src/components/inputs/inputNumber/index.vue

@@ -72,7 +72,12 @@
       </IconWrapper>
       <SelectWrapper v-if="showSelect">
         <Divider />
+<<<<<<< HEAD
+        <RCSelect
+=======
         <Select
+          :disabled="isSelectDisabled"
+>>>>>>> f7f274d10df532971e44249a355b2a458d105e1c
           :select-width="`${selectWidth}px`"
           :show-border="false"
           @input-change="$emit('select-change', $event)"
@@ -81,15 +86,15 @@
             <SelectText>{{ getSelectValue }}</SelectText>
           </template>
           <template #dropdown>
-            <Option
+            <RCOption
               v-for="item in selectOptions"
               :key="item.value"
               :value="item.value"
             >
               {{ item.label }}
-            </Option>
+            </RCOption>
           </template>
-        </Select>
+        </RCSelect>
       </SelectWrapper>
     </InputWrapper>
     <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
@@ -132,8 +137,8 @@
   } from '../../../helpers/numberConverter'
   import InfoText from '../../infoText'
   import ErrorMessage from '../../errorMessage'
-  import Select from '../select'
-  import Option from '../select/option'
+  import RCSelect from '../select'
+  import RCOption from '../select/option'
   import warningIcon from '../../../assets/icons/error_icon.png'
   import Icon from '../../icon'
 
@@ -353,8 +358,8 @@
       Icon,
       SlotContainer,
       IconWrapper,
-      Select,
-      Option,
+      RCSelect,
+      RCOption,
       SelectWrapper,
       SelectText,
       Divider,
@@ -511,6 +516,10 @@
         type: [String, Number],
         default: null,
       },
+      isSelectDisabled: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

package/src/components/inputs/select/index.vue

@@ -13,7 +13,7 @@
       <LabelWrapper
         v-if="label"
         :data-id="labelDataId"
-        :info-text-message="!!infoTextMessage"
+        :info-text-message="!!infoTextMessage || !!$slots.infoText"
       >
         <InputLabel
           :font-color="
@@ -181,6 +181,7 @@
   import Icon from '../../icon'
   import InputText from '../inputText'
   import DraggableInputHandle from '../../draggableInputHandle'
+  import { debounce } from '../../../utils'
 
   const CARET_WIDTH = '30px'
   const BORDER_WIDTH = '1px'
@@ -733,9 +734,9 @@
         this.blur()
         this.$emit('input-change', e)
       },
-      optionHovered(e) {
+      optionHovered: debounce(function (e) {
         this.hoveredValue = e
-      },
+      }, 300),
       mouseEnterHandler() {
         if (this.hoverDropdown) {
           this.focus()

package/src/components/inputs/toggle/index.vue

@@ -2,15 +2,21 @@
   <Container>
     <FlexWrapper
       :data-id="dataId"
+      data-test-id="page_wrapper"
       :disabled="disabled"
       :size="size"
       @click="onToggleChange"
     >
       <LabelContainer
         v-if="label && labelAlign === 'left'"
+        data-test-id="label_left_container"
         :has-info-message="!!infoTextMessage"
       >
-        <LabelText :font-color="fontColor" :size="size">
+        <LabelText
+          data-test-id="label_left_text"
+          :font-color="fontColor"
+          :size="size"
+        >
           {{ label }}
         </LabelText>
         <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
@@ -18,6 +24,7 @@
       <ToggleWrapper
         :background-color="backgroundColor"
         :checked="isChecked"
+        data-test-id="toggle_wrapper"
         :disabled="disabled"
         :is-checked="isChecked"
         role="checkbox"
@@ -27,10 +34,12 @@
       >
         <ToggleBackground
           :background-color="backgroundColor"
+          data-test-id="toggle_background"
           :disabled="disabled"
           :is-checked="isChecked"
         />
         <ToggleDot
+          data-test-id="toggle_dot"
           :disabled="disabled"
           :is-checked="isChecked"
           :size="size"
@@ -39,12 +48,22 @@
       </ToggleWrapper>
       <LabelContainer
         v-if="label && labelAlign === 'right'"
+        data-test-id="label_right_container"
         :has-info-message="!!infoTextMessage"
       >
-        <LabelText :font-color="fontColor" :size="size">
+        <LabelText
+          data-test-id="label_left_text"
+          :font-color="fontColor"
+          :size="size"
+        >
           {{ label }}
         </LabelText>
-        <InfoText v-if="infoTextMessage" :text="infoTextMessage" @click.stop />
+        <InfoText
+          v-if="infoTextMessage"
+          data-test-id="info_text"
+          :text="infoTextMessage"
+          @click.stop
+        />
       </LabelContainer>
     </FlexWrapper>
   </Container>
@@ -239,34 +258,47 @@
       label: {
         required: false,
         default: '',
+        type: String,
       },
       isChecked: {
         required: true,
         default: false,
+        type: Boolean,
       },
       toggleColor: {
         required: false,
+        default: '',
+        type: String,
       },
       backgroundColor: {
         required: false,
+        default: '',
+        type: String,
       },
       size: {
         required: false,
         default: 'small',
+        type: String,
       },
       labelAlign: {
         required: false,
         default: 'right',
+        type: String,
       },
       fontColor: {
         required: false,
+        default: '',
+        type: String,
       },
       disabled: {
         required: false,
         default: false,
+        type: Boolean,
       },
       infoTextMessage: {
         required: false,
+        default: '',
+        type: String,
       },
       dataId: {
         type: String,

package/src/components/inputs/toggle/toggle.spec.js

@@ -0,0 +1,102 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import RCToggle from '@/components/inputs/toggle'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('RCToggle.vue', () => {
+  it('checkbox is rendered and emits correct payload on change', async () => {
+    const wrapper = mount(RCToggle, {
+      props: { isChecked: true, label: 'Test label', disabled: false },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
+
+    // check that the element exists
+    expect(toggleWrapper.exists()).toBe(true)
+    expect(toggleWrapper.attributes('checked')).toBe('true')
+
+    // Log attributes to see what is rendered (commented out just for reference)
+    // console.log('attributes', toggleWrapper.attributes())
+    // console.log('All of the Toggles' attributes', wrapper.vm)
+
+    // Test the label
+    expect(wrapper.text()).toContain('Test label')
+
+    // Test the click
+    const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
+    await pageWrapper.trigger('click')
+    expect(wrapper.emitted('on-toggle-change')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-toggle-change')
+    // To inspect emitted events:
+    // console.log('Emitted events', wrapper.emitted())
+    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[0]).toEqual([false])
+  }),
+    it('checkbox disabled does not emit anything', async () => {
+      const wrapper = mount(RCToggle, {
+        props: { isChecked: false, disabled: true },
+        global: {
+          provide: {
+            theme,
+          },
+        },
+      })
+      const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
+      expect(toggleWrapper.attributes('checked')).toBe('false')
+
+      // Test the click
+      const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
+      await pageWrapper.trigger('click')
+
+      // Inspect emitted events
+      const emittedEvents = wrapper.emitted('on-toggle-change')
+
+      // Verify that no events were emitted
+      expect(emittedEvents).toBeUndefined() // No event should be emitted
+    }),
+    it('should toggle back and forth on multiple clicks', async () => {
+      const wrapper = mount(RCToggle, {
+        props: { isChecked: false, disabled: false },
+        global: {
+          provide: {
+            theme,
+          },
+        },
+      })
+      const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
+      // Initial state
+      expect(toggleWrapper.attributes('checked')).toBe('false')
+
+      // Trigger click and check events
+      const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
+      await pageWrapper.trigger('click')
+      let emittedEvent = wrapper.emitted('on-toggle-change')
+      expect(emittedEvent).toBeTruthy() // Ensure that the event was emitted
+      expect(emittedEvent).toHaveLength(1) // Ensure that only one event was emitted
+      expect(emittedEvent[0]).toEqual([true]) // Check the payload of the first click
+      await wrapper.setProps({ isChecked: true }) // manually update the props
+
+      // Trigger click again and check events
+      await pageWrapper.trigger('click')
+      emittedEvent = wrapper.emitted('on-toggle-change')
+      expect(emittedEvent).toHaveLength(2) // Ensure that the event count has increased
+      expect(emittedEvent[1]).toEqual([false]) // Check the payload of the second click
+      await wrapper.setProps({ isChecked: false }) // manually update the props
+
+      // Trigger click again and check events
+      await pageWrapper.trigger('click')
+      emittedEvent = wrapper.emitted('on-toggle-change')
+      expect(emittedEvent).toHaveLength(3) // Ensure that the event count has increased
+      expect(emittedEvent[2]).toEqual([true]) // Check the payload of the third click
+    })
+})

package/src/main.js

@@ -1,6 +1,7 @@
 import App from './App.vue'
 import { createApp } from 'vue'
+import router from './router/dynamicRoutes'
 
 const app = createApp(App)
-
+app.use(router)
 app.mount('#app')

package/src/router/dynamicRoutes.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Test from '@/Test.vue'
+import Toggle from '@/components/inputs/toggle/index.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Test',
+    component: Test,
+  },
+  {
+    path: '/toggle',
+    name: 'Toggle',
+    component: Toggle,
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router

package/src/utils/index.js

@@ -0,0 +1,12 @@
+export function debounce(fn, wait) {
+  let timer
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    const context = this
+    timer = setTimeout(() => {
+      fn.apply(context, args)
+    }, wait)
+  }
+}