@eturnity/eturnity_reusable_components 7.33.2 → 7.33.4-EPDM-11766.0

package/package.json

@@ -1,27 +1,36 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.33.2",
+  "version": "7.33.4-EPDM-11766.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": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "prettier": "prettier --write 'src/**/*.{js,vue}'",
     "test": "jest",
+    "test-coverage": "jest --coverage",
     "prepublishOnly": "npm run test"
   },
   "dependencies": {
-    "@storybook/vue3": "7.0.18",
+    "@originjs/vite-plugin-commonjs": "1.0.3",
+    "@storybook/vue3": "8.2.8",
     "@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",
+    "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"
   },
@@ -29,7 +38,16 @@
     "@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/blocks": "^8.2.8",
+    "@storybook/test": "^8.2.8",
+    "@storybook/testing-library": "^0.2.1",
     "@types/node": "^22.1.0",
+    "@vitejs/plugin-vue": "2.0.1",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "^5.0.8",
@@ -40,34 +58,14 @@
     "eslint": "8.0.1",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "9.14.1",
     "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/**"
-    ]
+    "storybook": "^8.2.8",
+    "vite": "2.7.2",
+    "vue-jest": "^5.0.0-alpha.10",
+    "vue-loader": "^17.4.2"
   },
   "browserslist": [
     "> 1%",
@@ -75,7 +73,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,13 @@
 <template>
   <PageContainer>
+    <ToggleComponent
+      :disabled="false"
+      info-text-message="My info message"
+      :is-checked="true"
+      label="My Label Text"
+      label-align="right"
+      toggle-color="red"
+    />
     <br />
     <InputNumber
       background-color="transparent"
@@ -55,6 +63,7 @@
 <script>
   import styled from 'vue3-styled-components'
   import InputNumber from '@/components/inputs/inputNumber'
+  import ToggleComponent from '@/components/inputs/toggle'
 
   const PageContainer = styled.div`
     padding: 40px;
@@ -65,6 +74,7 @@
     components: {
       PageContainer,
       InputNumber,
+      ToggleComponent,
     },
     data() {
       return {

package/src/components/buttons/closeButton/CloseButton.stories.js

@@ -3,27 +3,24 @@ import CloseButton from './index.vue'
 export default {
   title: 'CloseButton',
   component: CloseButton,
-  // argTypes: {},
+  tags: ['autodocs'],
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { CloseButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<close-button v-bind="$props" />',
+//   // To use:
+//   // import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
+//   // <close-button
+//   //   color="#fff"
+//   // />
+// })
 
-  // To use:
-  // import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
-  // <close-button
-  //   color="#fff"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {}
+export const Default = {
+  args: {
+    color: 'red',
+  },
+}
 
-export const ColorButton = Template.bind({})
-ColorButton.args = {
-  color: 'orange',
+export const ColorButton = {
+  args: {
+    color: 'blue',
+  },
 }

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

@@ -55,6 +55,7 @@
     props: {
       color: {
         required: false,
+        default: '',
       },
     },
   }

package/src/components/icon/index.vue

@@ -26,7 +26,7 @@
 
   import { onMounted, reactive, watch } from 'vue'
   import styled from 'vue3-styled-components'
-  import { fetchIcon } from './iconCache'
+  import { fetchIcon } from './iconCache.mjs'
 
   const props = defineProps({
     disabled: {

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

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils'
 import RCToggle from '@/components/inputs/toggle'
 import theme from '@/assets/theme'
 
-jest.mock('@/components/icon/iconCache', () => ({
+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')),
 }))

package/src/components/modals/modal/modal.stories.js

@@ -1,7 +1,7 @@
 import Modal from './index.vue'
 
 export default {
-  title: 'Modal',
+  title: 'Components/Modal',
   component: Modal,
   // argTypes: {},
 }
@@ -21,11 +21,11 @@ const Template = (args, { argTypes }) => ({
   // </modal>
 })
 
-export const Default = Template.bind({
+export const Default = Template.bind({})
+Default.args = {
   isOpen: true,
   preventOutsideClose: true,
   isLoading: false,
   hideClose: false,
   backdrop: 'dark',
-})
-Default.args = {}
+}

package/src/stories/Button.stories.js

@@ -0,0 +1,48 @@
+import MyButton from './Button.vue';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+    },
+    onClick: {},
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args
+export const Primary = {
+  args: {
+    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/Button.vue

@@ -0,0 +1,52 @@
+<template>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+</template>
+
+<script>
+import './button.css';
+import { reactive, computed } from 'vue';
+
+export default {
+  name: 'my-button',
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['small', 'medium', 'large'].indexOf(value) !== -1;
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    props = reactive(props);
+    return {
+      classes: computed(() => ({
+        'storybook-button': true,
+        'storybook-button--primary': props.primary,
+        'storybook-button--secondary': !props.primary,
+        [`storybook-button--${props.size || 'medium'}`]: true,
+      })),
+      style: computed(() => ({
+        backgroundColor: props.backgroundColor,
+      })),
+      onClick() {
+        emit('click');
+      },
+    };
+  },
+};
+</script>