OHRM5X-2497: Bump storybook to latest minor version (#769)

orangehrm · Mar 11, 2024 · c44bc35 · c44bc35
1 parent 45d8ced
commit c44bc35
Show file tree

Hide file tree

Showing 31 changed files with 6,775 additions and 6,556 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,6 +1,5 @@
 /* eslint-env node */
 require('@rushstack/eslint-patch/modern-module-resolution');
-
 module.exports = {
   root: true,
   extends: [
@@ -10,6 +9,7 @@ module.exports = {
     'eslint:recommended',
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier',
+    'plugin:storybook/recommended',
   ],
   parserOptions: {
     ecmaVersion: 'latest',

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,6 @@
 const path = require('path');
 module.exports = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

diff --git a/.yarn/plugins/@yarnpkg/plugin-version.cjs b/.yarn/plugins/@yarnpkg/plugin-version.cjs
diff --git a/.yarn/releases/yarn-3.3.1.cjs b/.yarn/releases/yarn-3.3.1.cjs
diff --git a/.yarn/releases/yarn-4.1.1.cjs b/.yarn/releases/yarn-4.1.1.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,7 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: "@yarnpkg/plugin-version"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.1.1.cjs
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ohrm/oxd",
   "license": "GPL-3.0",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": true,
   "scripts": {
     "dev": "storybook dev -p 6006",
@@ -21,13 +21,13 @@
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.4",
-    "@storybook/addon-essentials": "^7.0.0-beta.21",
-    "@storybook/addon-interactions": "^7.0.0-beta.21",
-    "@storybook/addon-links": "^7.0.0-beta.21",
-    "@storybook/blocks": "^7.0.0-beta.21",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/vue3": "^7.0.0-beta.21",
-    "@storybook/vue3-vite": "^7.0.0-beta.21",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/vue3": "^7.6.17",
+    "@storybook/vue3-vite": "^7.6.17",
     "@types/jsdom": "^20.0.1",
     "@types/node": "^18.11.12",
     "@vitejs/plugin-vue": "^4.0.0",
@@ -37,14 +37,15 @@
     "@vue/test-utils": "^2.2.6",
     "@vue/tsconfig": "^0.1.3",
     "eslint": "^8.22.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.3.0",
     "jsdom": "^20.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",
-    "storybook": "^7.0.0-beta.21",
+    "storybook": "^7.6.17",
     "typescript": "~4.7.4",
     "vite": "^4.0.0",
     "vitest": "^0.25.6",
@@ -59,5 +60,5 @@
     "node": ">=18.12.1",
     "yarn": ">=3.3.1"
   },
-  "packageManager": "yarn@3.3.1"
+  "packageManager": "yarn@4.1.1"
 }
diff --git a/src/components/Alert/stories/Alert.stories.js b/src/components/Alert/stories/Alert.stories.js
@@ -27,7 +27,8 @@ export default {
   component: Alert,
   argTypes: {
     type: {
-      control: {type: 'select', options: TYPES},
+      options: TYPES,
+      control: {type: 'select'},
     },
     show: {
       control: {type: 'boolean'},

diff --git a/src/components/Button/stories/Button.stories.js b/src/components/Button/stories/Button.stories.js
@@ -40,12 +40,12 @@ export default {
   component: Button,
   argTypes: {
     size: {
-      control: {type: 'select', options: SIZES},
-      defaultValue: SIZE_MEDIUM,
+      options: SIZES,
+      control: {type: 'select'},
     },
     displayType: {
-      control: {type: 'select', options: TYPES},
-      defaultValue: TYPE_MAIN,
+      options: TYPES,
+      control: {type: 'select'},
     },
     style: {control: {type: 'object'}},
     disabled: {control: {type: 'boolean'}},
@@ -137,36 +137,42 @@ Small.args = {
 
 export const CustomColor = Template.bind({});
 CustomColor.args = {
+  size: SIZE_MEDIUM,
   label: 'Button',
   style: {backgroundColor: 'palegreen'},
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  size: SIZE_MEDIUM,
   label: 'Button',
   disabled: true,
 };
 
 export const ButtonWithIcon = Template.bind({});
 ButtonWithIcon.args = {
+  size: SIZE_MEDIUM,
   label: 'Button',
   iconName: 'trash',
 };
 
 export const ButtonWithIconRight = Template.bind({});
 ButtonWithIconRight.args = {
+  size: SIZE_MEDIUM,
   label: 'Button',
   iconRightName: 'arrow-right',
 };
 
 export const Text = Template.bind({});
 Text.args = {
+  size: SIZE_MEDIUM,
   label: 'Button',
   displayType: TYPE_TEXT,
 };
 
 export const Tool = Template.bind({});
 Tool.args = {
+  size: SIZE_MEDIUM,
   label: 'Button',
   iconName: 'person-plus',
   displayType: TYPE_TOOL,

diff --git a/src/components/Button/stories/GlassButton.stories.js b/src/components/Button/stories/GlassButton.stories.js
@@ -6,8 +6,8 @@ export default {
   component: GlassButton,
   argTypes: {
     icon: {
-      control: {type: 'select', options: GLASS_ICON_TYPES},
-      defaultValue: TYPE_GLASS_VIDEO,
+      options: GLASS_ICON_TYPES,
+      control: {type: 'select'},
     },
     style: {control: {type: 'object'}},
     disabled: {control: {type: 'boolean'}},
@@ -25,4 +25,5 @@ const Template = (args) => ({
 export const Default = Template.bind({});
 Default.args = {
   label: 'Share Video',
+  icon: TYPE_GLASS_VIDEO,
 };
diff --git a/src/components/Button/stories/Icon.stories.js b/src/components/Button/stories/Icon.stories.js
@@ -25,7 +25,8 @@ export default {
   component: IconButton,
   argTypes: {
     displayType: {
-      control: {type: 'select', options: ICON_TYPES},
+      options: ICON_TYPES,
+      control: {type: 'select'},
     },
     disabled: {control: {type: 'boolean'}},
   },

diff --git a/src/components/Calendar/stories/Calendar.stories.js b/src/components/Calendar/stories/Calendar.stories.js
@@ -28,18 +28,19 @@ export default {
 
 const argTypes = {
   firstDayOfWeek: {
-    control: {type: 'select', options: [0, 1, 2, 3, 4, 5, 6]},
+    options: [0, 1, 2, 3, 4, 5, 6],
+    control: {type: 'select'},
   },
   monthFormat: {
+    options: ['narrow', 'abbreviated', 'wide'],
     control: {
       type: 'select',
-      options: ['narrow', 'abbreviated', 'wide'],
     },
   },
   dayFormat: {
+    options: ['narrow', 'short', 'abbreviated', 'wide'],
     control: {
       type: 'select',
-      options: ['narrow', 'short', 'abbreviated', 'wide'],
     },
   },
   years: {control: {type: 'object'}, defaultValue: [2019, 2020, 2021]},

diff --git a/src/components/CardTable/stories/Table.stories.js b/src/components/CardTable/stories/Table.stories.js
@@ -51,7 +51,7 @@ export const SortableTable = () => SortableCardTable;
 export const JobTitleExample = () => CardTableJobs;
 export const LeaveListExample = () => CardTableLeavelist;
 export const LeaveListExample2 = () => CardTableLeavelistAlt;
-export const LanguagPackageEdit = () => CardTableLangStringList;
+export const LanguagePackageEdit = () => CardTableLangStringList;
 
 const RowOptionsTemplate = (args) => ({
   setup() {

diff --git a/src/components/Input/stories/AutocompleteInput.stories.js b/src/components/Input/stories/AutocompleteInput.stories.js
@@ -66,24 +66,24 @@ const options = [
   },
 ];
 
-const syncFunction = function (serachParam) {
-  const filter = new RegExp(serachParam, 'i');
+const syncFunction = function (searchParam) {
+  const filter = new RegExp(searchParam, 'i');
   return options.filter((item) => item.label.match(filter));
 };
 
-const asyncFunction = async function (serachParam) {
-  const filter = new RegExp(serachParam, 'i');
+const asyncFunction = async function (searchParam) {
+  const filter = new RegExp(searchParam, 'i');
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve(options.filter((item) => item.label.match(filter)));
     }, 2500);
   });
 };
 
-const callAPI = async function (serachParam) {
+const callAPI = async function (searchParam) {
   return new Promise((resolve) => {
-    if (serachParam.trim()) {
-      fetch(`https://api.github.com/search/users?q=${serachParam}`)
+    if (searchParam.trim()) {
+      fetch(`https://api.github.com/search/users?q=${searchParam}`)
         .then((response) => response.json())
         .then((json) => {
           const {items} = json;
@@ -119,11 +119,14 @@ const Template = (args) => ({
 });
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  createOptions: () => [],
+};
 
 export const Error = Template.bind({});
 Error.args = {
   value: 'Input',
+  createOptions: () => [],
   hasError: true,
 };
 

diff --git a/src/components/Input/stories/CheckboxInput.stories.js b/src/components/Input/stories/CheckboxInput.stories.js
@@ -27,7 +27,8 @@ export default {
     style: {control: {type: 'object'}},
     hasError: {control: {type: 'boolean'}},
     labelPosition: {
-      control: {type: 'select', options: LABEL_POSITIONS},
+      options: LABEL_POSITIONS,
+      control: {type: 'select'},
       defaultValue: RIGHT,
     },
   },

diff --git a/src/components/Input/stories/Input.stories.js b/src/components/Input/stories/Input.stories.js
@@ -18,6 +18,7 @@
  */
 
 import Input from '@/components/Input/Input.vue';
+import {h, ref} from 'vue';
 
 export default {
   title: 'Example/Input',
@@ -30,25 +31,29 @@ export default {
 
 const Template = (args) => ({
   setup() {
-    return {args};
+    const input = ref('Input');
+    return {args, input};
+  },
+  render() {
+    return h(Input, {
+      ...this.args,
+      modelValue: this.input,
+      'onUpdate:modelValue': (value) => {
+        this.input = value;
+      },
+    });
   },
-  components: {'oxd-input': Input},
-  template: '<oxd-input v-bind="args" />',
 });
 
 export const Default = Template.bind({});
-Default.args = {
-  value: 'Input',
-};
+Default.args = {};
 
 export const Colored = Template.bind({});
 Colored.args = {
-  value: 'Input',
   style: {backgroundColor: 'aliceblue'},
 };
 
 export const Error = Template.bind({});
 Error.args = {
-  value: 'Input',
   hasError: true,
 };
diff --git a/src/components/Input/stories/MultiSelectInput.stories.js b/src/components/Input/stories/MultiSelectInput.stories.js
@@ -104,6 +104,7 @@ Default.args = {
 
 export const Error = Template.bind({});
 Error.args = {
+  options: [],
   hasError: true,
 };
 

diff --git a/src/components/Input/stories/PasswordInput.stories.js b/src/components/Input/stories/PasswordInput.stories.js
@@ -18,6 +18,7 @@
  */
 
 import PasswordInput from '@/components/Input/PasswordInput.vue';
+import {ref, h} from 'vue';
 
 export default {
   title: 'Example/PasswordInput',
@@ -30,25 +31,29 @@ export default {
 
 const Template = (args) => ({
   setup() {
-    return {args};
+    const input = ref('Input');
+    return {args, input};
+  },
+  render() {
+    return h(PasswordInput, {
+      ...this.args,
+      modelValue: this.input,
+      'onUpdate:modelValue': (value) => {
+        this.input = value;
+      },
+    });
   },
-  components: {'oxd-password-input': PasswordInput},
-  template: '<oxd-password-input v-bind="args" />',
 });
 
 export const Default = Template.bind({});
-Default.args = {
-  value: 'Input',
-};
+Default.args = {};
 
 export const Colored = Template.bind({});
 Colored.args = {
-  value: 'Input',
   style: {backgroundColor: 'aliceblue'},
 };
 
 export const Error = Template.bind({});
 Error.args = {
-  value: 'Input',
   hasError: true,
 };
diff --git a/src/components/Input/stories/RadioInput.stories.js b/src/components/Input/stories/RadioInput.stories.js
@@ -27,7 +27,8 @@ export default {
     style: {control: {type: 'object'}},
     hasError: {control: {type: 'boolean'}},
     labelPosition: {
-      control: {type: 'select', options: LABEL_POSITIONS},
+      options: LABEL_POSITIONS,
+      control: {type: 'select'},
       defaultValue: RIGHT,
     },
   },