@eturnity/eturnity_reusable_components 7.33.6 → 7.35.0

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.33.6",
+  "version": "7.35.0",
+  "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,32 @@
+/* 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', () => {
+  it('button is rendered', async () => {
+    const wrapper = mount(MainButton, {
+      props: {
+        type: 'primary',
+        text: 'Click me',
+        isDisabled: false,
+        dataId: 'button_wrapper',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    await wrapper.vm.$nextTick()
+    const buttonWrapper = wrapper.find('[data-id="button_wrapper"]')
+
+    // check that the element exists
+    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/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',
   },
-};
+}

package/src/stories/Header.stories.js

@@ -1,4 +1,4 @@
-import MyHeader from './Header.vue';
+import MyHeader from './Header.vue'
 
 export default {
   title: 'Example/Header',
@@ -15,7 +15,7 @@ export default {
       // Story args can be spread into the returned object
       return {
         ...args,
-      };
+      }
     },
     // Then, the spread values can be accessed directly in the template
     template: '<my-header :user="user" />',
@@ -24,7 +24,7 @@ export default {
     // More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
-};
+}
 
 export const LoggedIn = {
   args: {
@@ -32,10 +32,10 @@ export const LoggedIn = {
       name: 'Jane Doe',
     },
   },
-};
+}
 
 export const LoggedOut = {
   args: {
     user: null,
   },
-};
+}

package/src/stories/Page.stories.js

@@ -1,5 +1,5 @@
-import { within, userEvent } from '@storybook/testing-library';
-import MyPage from './Page.vue';
+import { within, userEvent } from '@storybook/test'
+import MyPage from './Page.vue'
 
 export default {
   title: 'Example/Page',
@@ -8,9 +8,9 @@ export default {
     // More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
-};
+}
 
-export const LoggedOut = {};
+export const LoggedOut = {}
 
 // More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
 export const LoggedIn = {
@@ -21,10 +21,10 @@ export const LoggedIn = {
     template: '<my-page />',
   }),
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+    const canvas = within(canvasElement)
     const loginButton = await canvas.getByRole('button', {
       name: /Log in/i,
-    });
-    await userEvent.click(loginButton);
+    })
+    await userEvent.click(loginButton)
   },
-};
+}

package/.eslintrc.js

@@ -1,181 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    node: true,
-    es6: true,
-  },
-  extends: ['eslint:recommended', 'eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended', 'plugin:storybook/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',
-    'vue/no-reserved-component-names': 'warn',
-    'vue/no-deprecated-destroyed-lifecycle': '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,9 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 80,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "bracketSpacing": true,
-  "vueIndentScriptAndStyle": true
-}