@eturnity/eturnity_reusable_components 7.33.6 → 7.35.1

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.33.6",
+  "version": "7.35.1",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/main.umd.js",
+  "module": "./dist/main.es.js",
   "private": false,
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "dev": "vite",
+    "build": "vite build",
     "lint": "vue-cli-service lint",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -14,52 +20,54 @@
     "prepublishOnly": "npm run test"
   },
   "dependencies": {
-    "@storybook/vue3": "8.2.8",
+    "@originjs/vite-plugin-commonjs": "1.0.3",
     "@vue/compat": "3.3.4",
     "@vueform/slider": "2.1.10",
     "@vuepic/vue-datepicker": "6.1.0",
     "click-outside-vue3": "4.0.1",
-    "html-loader": "0.5.5",
-    "postcss": "8.4.25",
+    "storybook": "8.2.9",
+    "vite-plugin-require": "1.1.14",
     "vue": "3.3.4",
-    "vue-router": "^4.4.2",
+    "vue-router": "4.2.2",
     "vue3-styled-components": "1.2.1",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.25.3",
-    "@chromatic-com/storybook": "^1.6.1",
-    "@storybook/addon-essentials": "^8.2.8",
-    "@storybook/addon-interactions": "^8.2.8",
-    "@storybook/addon-links": "^8.2.8",
-    "@storybook/addon-onboarding": "^8.2.8",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.2.8",
-    "@storybook/test": "^8.2.8",
-    "@storybook/testing-library": "^0.2.1",
-    "@storybook/vue3-webpack5": "^8.2.8",
-    "@types/node": "^22.1.0",
-    "@vue/cli-plugin-babel": "^5.0.8",
+    "@babel/core": "7.25.2",
+    "@babel/plugin-syntax-import-meta": "7.10.4",
+    "@babel/preset-env": "7.25.3",
+    "@chromatic-com/storybook": "1.6.1",
+    "@storybook/addon-essentials": "8.2.9",
+    "@storybook/addon-interactions": "8.2.9",
+    "@storybook/addon-links": "8.2.9",
+    "@storybook/addon-onboarding": "8.2.8",
+    "@storybook/blocks": "8.2.8",
+    "@storybook/test": "8.2.8",
+    "@storybook/vue3-vite": "8.2.9",
+    "@types/node": "22.1.0",
+    "@vitejs/plugin-vue": "4.0.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",
+    "@vue/test-utils": "2.4.6",
     "babel-eslint": "10.1.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "26.6.3",
     "eslint": "8.0.1",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-vue": "9.14.1",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "26.6.3",
+    "jest-styled-components": "7.2.0",
+    "jsdom": "24.1.1",
     "prettier": "2.8.4",
-    "storybook": "^8.2.8",
-    "vue-jest": "^5.0.0-alpha.10",
-    "vue-loader": "^17.4.2",
-    "vue-svg-loader": "^0.16.0"
+    "vite": "4.0.0",
+    "vite-svg-loader": "5.1.0",
+    "vue-jest": "5.0.0-alpha.10",
+    "vue-loader": "17.4.2",
+    "vue-svg-loader": "0.16.0"
   },
   "browserslist": [
     "> 1%",
@@ -67,7 +75,6 @@
     "not dead"
   ],
   "description": "## Project setup ``` npm install ```",
-  "main": "babel.config.js",
   "repository": {
     "type": "git",
     "url": "git+https://aaronenser@bitbucket.org/eturnitydevs/eturnity_reusable_components.git"

package/src/Test.vue

@@ -1,5 +1,7 @@
 <template>
   <PageContainer>
+    <IconComponent color="red" cursor="pointer" name="House" size="30px" />
+    <MainButton icon="bell" text="Click ME" type="secondary" />
     <AddNewButton />
     <ToggleComponent
       :disabled="false"
@@ -58,6 +60,8 @@
 
     <hr />
     <button @click="value = 42">Click to set at 42</button>
+    <br />
+    <IconCollection />
   </PageContainer>
 </template>
 
@@ -65,7 +69,10 @@
   import styled from 'vue3-styled-components'
   import InputNumber from '@/components/inputs/inputNumber'
   import ToggleComponent from '@/components/inputs/toggle'
+  import IconCollection from '@/components/icon/iconCollection'
   import AddNewButton from '@/components/addNewButton'
+  import MainButton from '@/components/buttons/mainButton'
+  import IconComponent from '@/components/icon'
 
   const PageContainer = styled.div`
     padding: 40px;
@@ -77,7 +84,10 @@
       PageContainer,
       InputNumber,
       ToggleComponent,
+      IconCollection,
       AddNewButton,
+      MainButton,
+      IconComponent,
     },
     data() {
       return {

package/src/assets/svgIcons/obstacle_tool.svg

@@ -5,5 +5,5 @@
     </pattern>
 </defs>
 <rect width="16" height="16" fill="url(#pattern_Z6wSY)" :opacity="1" />
-</g>
 </svg>
+ 

package/src/components/buttons/mainButton/MainButton.stories.js

@@ -0,0 +1,51 @@
+import MainButton from './index.vue'
+
+export default {
+  title: 'MainButton',
+  component: MainButton,
+  tags: ['autodocs'],
+}
+
+export const DefaultButton = {
+  args: {
+    type: 'primary',
+    text: 'Click me',
+  },
+}
+
+export const SecondaryButton = {
+  args: {
+    type: 'secondary',
+    text: 'Click me',
+  },
+}
+
+export const CancelButton = {
+  args: {
+    type: 'cancel',
+    text: 'Click me',
+  },
+}
+
+export const DisabledButton = {
+  args: {
+    text: 'Click me',
+    isDisabled: true,
+  },
+}
+
+export const CustomColorButton = {
+  args: {
+    text: 'Click me',
+    customColor: '#0068DE',
+    fontColor: '#fdb813',
+  },
+}
+
+export const IconButton = {
+  args: {
+    text: 'Click me',
+    icon: 'bell',
+    customColor: '#fdb813',
+  },
+}

package/src/components/buttons/mainButton/index.vue

@@ -10,26 +10,26 @@
       :no-wrap="noWrap"
       :type="type"
     >
-      <Label :has-icon="Boolean(icon)">
+      <LabelComponent :has-icon="Boolean(icon)">
         <Icon v-if="icon" :name="icon" size="14px" />
         {{ text }}
-      </Label>
+      </LabelComponent>
     </ButtonContainer>
   </PageContainer>
 </template>
 
 <script>
-// To use:
-// import RCMainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
-// <RCMainButton
-//   text="Click Me"
-//   customColor="#ab5348"
-//   type="secondary" // primary, secondary, cancel
-//   icon="icon-name" // icon name from icon component
-//   :isDisabled="true"
-//   :minWidth="minWidth"
-//   :data-id="test_data_id"
-// />
+  // To use:
+  // import RCMainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
+  // <RCMainButton
+  //   text="Click Me"
+  //   customColor="#ab5348"
+  //   type="secondary" // primary, secondary, cancel
+  //   icon="icon-name" // icon name from icon component
+  //   :isDisabled="true"
+  //   :minWidth="minWidth"
+  //   :data-id="test_data_id"
+  // />
 
   import styled from 'vue3-styled-components'
   import Icon from '../../icon'
@@ -81,7 +81,7 @@
     hasIcon: Boolean,
   }
 
-  const Label = styled('span', LabelAttrs)`
+  const LabelComponent = styled('span', LabelAttrs)`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -92,7 +92,7 @@
     name: 'MainButton',
     components: {
       Icon,
-      Label,
+      LabelComponent,
       PageContainer,
       ButtonContainer,
     },
@@ -100,36 +100,46 @@
       type: {
         required: false,
         default: 'primary',
+        type: String,
       },
       isDisabled: {
         required: false,
         default: false,
+        type: Boolean,
       },
       icon: {
         required: false,
         default: null,
+        type: String,
       },
       text: {
         required: true,
+        type: String,
       },
       customColor: {
         required: false,
         default: null,
+        type: String,
       },
       fontColor: {
         required: false,
+        default: '',
+        type: String,
       },
       noWrap: {
         required: false,
         default: false,
+        type: Boolean,
       },
       minWidth: {
         required: false,
         default: null,
+        type: String,
       },
       id: {
         required: false,
         default: null,
+        type: String,
       },
       dataId: {
         type: String,

package/src/components/buttons/mainButton/mainButton.spec.js

@@ -0,0 +1,35 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import MainButton from '@/components/buttons/mainButton'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('MainButton.vue', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(MainButton, {
+      props: {
+        type: 'primary',
+        text: 'Click me',
+        isDisabled: false,
+        dataId: 'button_wrapper',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  it('button is rendered with correct props', async () => {
+    await wrapper.vm.$nextTick()
+    const buttonWrapper = wrapper.find('[data-id="button_wrapper"]')
+    expect(buttonWrapper.exists()).toBe(true)
+  })
+})

package/src/components/icon/iconCollection.vue

@@ -49,8 +49,22 @@
       }
     },
 
-    mounted() {
-      this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
+    // mounted() {
+    //   this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
+    // },
+    async mounted() {
+      // Use import.meta.glob to import SVGs dynamically
+      const icons = import.meta.glob('../../assets/svgIcons/*.svg')
+
+      for (const path in icons) {
+        const module = await icons[path]()
+
+        this.iconList.push({
+          pathLong: module.default,
+          pathShort: path,
+          name: path.replace('.svg', '').replace('../../assets/svgIcons/', ''),
+        })
+      }
     },
 
     methods: {

package/src/components/inputs/checkbox/Checkbox.stories.js

@@ -3,55 +3,61 @@ import Checkbox from './index.vue'
 export default {
   title: 'Checkbox',
   component: Checkbox,
-  // argTypes: {},
+  tags: ['autodocs'],
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Checkbox },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<checkbox v-bind="$props" />',
-
-  // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
-  //To use:
-  // <checkbox
-  //     label="Do you accept the Terms?"
-  //     :isChecked="isChecked" //required
-  //     @on-event-handler="onInputChange($event)" //required
-  //     checkColor="blue"
-  //     size="small"
-  //     backgroundColor="red"
-  //     :isDisabled="true"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  isChecked: true,
-  size: 'medium', // "small" or "medium"
-  isDisabled: false,
+// <checkbox
+//     label="Do you accept the Terms?"
+//     :isChecked="isChecked" //required
+//     @on-event-handler="onInputChange($event)" //required
+//     checkColor="blue"
+//     size="small"
+//     backgroundColor="red"
+//     :isDisabled="true"
+//     cursorType="default"
+// />
+
+export const DefaultCheckbox = {
+  args: {
+    isChecked: 'false',
+  },
+}
+
+export const IsChecked = {
+  args: {
+    isChecked: 'true',
+  },
+}
+
+export const CheckboxLabel = {
+  args: {
+    isChecked: 'false',
+    label: 'Click me',
+  },
 }
 
-export const Small = Template.bind({})
-Small.args = {
-  isChecked: true,
-  size: 'small', // "small" or "medium"
-  isDisabled: false,
+export const SmallCheckbox = {
+  args: {
+    isChecked: 'false',
+    label: 'Click me',
+    size: 'small',
+  },
 }
 
-export const CustomColor = Template.bind({})
-CustomColor.args = {
-  isChecked: true,
-  size: 'medium', // "small" or "medium"
-  checkColor: 'blue',
-  backgroundColor: 'red',
-  isDisabled: false,
+export const DisabledCheckbox = {
+  args: {
+    isChecked: false,
+    label: 'Click me',
+    size: 'small',
+    isDisabled: 'true',
+  },
 }
 
-export const Disabled = Template.bind({})
-Disabled.args = {
-  isChecked: false,
-  size: 'medium', // "small" or "medium"
-  isDisabled: true,
+export const CustomColor = {
+  args: {
+    isChecked: 'false',
+    size: 'medium',
+    checkColor: 'blue',
+    backgroundColor: 'yellow',
+  },
 }

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

@@ -0,0 +1,109 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Checkbox from '@/components/inputs/checkbox'
+import theme from '@/assets/theme'
+
+describe('Checkbox Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(Checkbox, {
+      props: {
+        isChecked: false,
+        label: 'Click me',
+        isDisabled: false,
+        dataId: 'checkbox_wrapper',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+  it('checkbox is rendered and emits correct payload on change', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isChecked).toBe(false)
+    expect(wrapper.vm.label).toBe('Click me')
+    expect(wrapper.vm.size).toBe('medium')
+    expect(wrapper.vm.isDisabled).toBe(false)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-event-handler')
+    // To inspect emitted events:
+    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[0]).toEqual([true])
+  })
+  it('disabled should not emit anything', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ isDisabled: true })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isDisabled).toBe(true)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    // expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvents = wrapper.emitted('on-event-handler')
+    // To inspect emitted events:
+    expect(emittedEvents).toBeUndefined() // No event should be emitted
+  })
+  it('checkbox can handle multiple clicks', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isChecked).toBe(false)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-event-handler')
+    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[0]).toEqual([true])
+    await wrapper.setProps({ isChecked: true }) // manually update the props
+
+    // test the 2nd click
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    expect(emittedEvent).toHaveLength(2) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[1]).toEqual([false])
+    await wrapper.setProps({ isChecked: false }) // manually update the props
+
+    // test the 3rd click
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    expect(emittedEvent).toHaveLength(3) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[2]).toEqual([true])
+    await wrapper.setProps({ isChecked: true }) // manually update the props
+  })
+  it('should have a custom background color', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ backgroundColor: theme.colors.red })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.backgroundColor).toBe(theme.colors.red)
+  })
+  it('should have a custom checkbox color', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ checkColor: theme.colors.brightBlue })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.checkColor).toBe(theme.colors.brightBlue)
+  })
+})

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

@@ -4,6 +4,7 @@
       :background-color="backgroundColor"
       :check-color="checkColor"
       :cursor-type="cursorType"
+      :data-test-id="dataId"
       :has-label="hasLabel"
       :is-checked="isChecked"
       :is-disabled="isDisabled"

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

@@ -9,7 +9,7 @@ jest.mock('@/components/icon/iconCache.mjs', () => ({
 }))
 
 describe('RCToggle.vue', () => {
-  it('checkbox is rendered and emits correct payload on change', async () => {
+  it('toggle is rendered and emits correct payload on change', async () => {
     const wrapper = mount(RCToggle, {
       props: { isChecked: true, label: 'Test label', disabled: false },
       global: {
@@ -42,7 +42,7 @@ describe('RCToggle.vue', () => {
     // Check the payload of the event
     expect(emittedEvent[0]).toEqual([false])
   }),
-    it('checkbox disabled does not emit anything', async () => {
+    it('toggle disabled does not emit anything', async () => {
       const wrapper = mount(RCToggle, {
         props: { isChecked: false, disabled: true },
         global: {

package/src/stories/Button.stories.js

@@ -1,4 +1,4 @@
-import MyButton from './Button.vue';
+import MyButton from './Button.vue'
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 export default {
@@ -17,7 +17,7 @@ export default {
       options: ['small', 'medium', 'large'],
     },
   },
-};
+}
 
 // More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args
 export const Primary = {
@@ -25,24 +25,24 @@ export const Primary = {
     primary: true,
     label: 'Button',
   },
-};
+}
 
 export const Secondary = {
   args: {
     label: 'Button',
   },
-};
+}
 
 export const Large = {
   args: {
     size: 'large',
     label: 'Button',
   },
-};
+}
 
 export const Small = {
   args: {
     size: 'small',
     label: 'Button',
   },
-};
+}