[ONL-8213] Fix TS enums casing (#1839)

* [ONL-8213] chore: Enforce TS naming for enums. * [ONL-8213] fix: Updated icon names and button enums to match eslint rules. * [ONL-8213] fix: Updated all enum references. * 2.7.2
Ebury · Feb 5, 2024 · 6bca417 · 6bca417
1 parent 55140e1
commit 6bca417
Show file tree

Hide file tree

Showing 40 changed files with 277 additions and 278 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -159,6 +159,17 @@ module.exports = {
       rules: {
         'no-shadow': 'off',
         '@typescript-eslint/no-shadow': 'error',
+        '@typescript-eslint/naming-convention': ['error', {
+          selector: 'typeLike',
+          format: ['PascalCase'],
+        }, {
+          selector: 'enumMember',
+          format: ['UPPER_CASE'],
+        }, {
+          selector: 'typeParameter',
+          format: ['PascalCase'],
+          prefix: ['T'],
+        }],
       },
     },
   ],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

diff --git a/src/components/ec-alert/ec-alert.vue b/src/components/ec-alert/ec-alert.vue
@@ -20,7 +20,7 @@
       @click.stop.prevent="onDismiss"
     >
       <ec-icon
-        :name="IconName.SimpleClose"
+        :name="IconName.SIMPLE_CLOSE"
         :size="16"
       />
     </a>
@@ -101,12 +101,12 @@ const icon = computed(() => {
   switch (props.type) {
     case AlertType.ERROR:
     case AlertType.WARNING:
-      return IconName.SimpleError;
+      return IconName.SIMPLE_ERROR;
     case AlertType.SUCCESS:
-      return IconName.SimpleCheck;
+      return IconName.SIMPLE_CHECK;
     case AlertType.INFO:
     default:
-      return IconName.SimpleInfo;
+      return IconName.SIMPLE_INFO;
   }
 });
 

diff --git a/src/components/ec-btn/ec-btn.spec.ts b/src/components/ec-btn/ec-btn.spec.ts
@@ -26,8 +26,8 @@ describe('EcBtn', () => {
 
   describe(':props', () => {
     it.each([
-      ['ec-btn--sm', ButtonSize.Small],
-      ['ec-btn--md', ButtonSize.Medium],
+      ['ec-btn--sm', ButtonSize.SMALL],
+      ['ec-btn--md', ButtonSize.MEDIUM],
     ])('should render a <button> element with class "%s" when size is set to %s', (expectedClass, size) => {
       const wrapper = mountBtn({
         size,
@@ -90,7 +90,7 @@ describe('EcBtn', () => {
 
     it('should render a button with only an icon when the "icon" is defined but not the slots', () => {
       const wrapper = mountBtn({
-        icon: IconName.SimpleCheck,
+        icon: IconName.SIMPLE_CHECK,
       });
 
       expect(wrapper.classes('ec-btn--icon-only')).toBe(true);
@@ -134,13 +134,7 @@ describe('EcBtn', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it.each([
-      ButtonCategory.Primary,
-      ButtonCategory.Secondary,
-      ButtonCategory.Success,
-      ButtonCategory.Error,
-      ButtonCategory.Warning,
-    ])('should render a button with category "%s" when category "prop" is set', (category) => {
+    it.each(Object.values(ButtonCategory))('should render a button with category "%s" when category "prop" is set', (category) => {
       const wrapper = mountBtn({
         category,
       });
@@ -149,13 +143,7 @@ describe('EcBtn', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it.each([
-      ButtonCategory.Primary,
-      ButtonCategory.Secondary,
-      ButtonCategory.Success,
-      ButtonCategory.Error,
-      ButtonCategory.Warning,
-    ])('should render a reversed button for the "%s" category when "isReverse" prop is set to true', (category) => {
+    it.each(Object.values(ButtonCategory))('should render a reversed button for the "%s" category when "isReverse" prop is set to true', (category) => {
       const wrapper = mountBtn({
         isReverse: true,
         category,
@@ -223,7 +211,7 @@ describe('EcBtn', () => {
     it('should render a button with "Click me!" text and an icon', () => {
       const wrapper = mountBtn(
         {
-          icon: IconName.SimpleCheck,
+          icon: IconName.SIMPLE_CHECK,
         },
         {
           slots: {

diff --git a/src/components/ec-btn/ec-btn.story.ts b/src/components/ec-btn/ec-btn.story.ts
@@ -62,8 +62,8 @@ const Template: StoryFn<StoryArgs> = storyArgs => ({
 export const basic = Template.bind({});
 basic.args = {
   text: 'Click Me',
-  category: ButtonCategory.Primary,
-  size: ButtonSize.Medium,
+  category: ButtonCategory.PRIMARY,
+  size: ButtonSize.MEDIUM,
   isSubmit: false,
 };
 
@@ -173,7 +173,7 @@ all.argTypes = {
 
 all.args = {
   ...basic.args,
-  icon: IconName.SimpleCheck,
+  icon: IconName.SIMPLE_CHECK,
   loadingText: '',
 };
 

diff --git a/src/components/ec-btn/ec-btn.vue b/src/components/ec-btn/ec-btn.vue
@@ -87,7 +87,7 @@ interface ButtonProps {
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
-  size: ButtonSize.Medium,
+  size: ButtonSize.MEDIUM,
   isDisabled: false,
   isRounded: false,
   isOutline: false,
@@ -146,18 +146,18 @@ function hasDefaultSlot() {
 
 function getButtonClasses() {
   return {
-    'ec-btn--sm': props.size === ButtonSize.Small,
-    'ec-btn--md': props.size === ButtonSize.Medium,
+    'ec-btn--sm': props.size === ButtonSize.SMALL,
+    'ec-btn--md': props.size === ButtonSize.MEDIUM,
     'ec-btn--rounded': props.isRounded,
     'ec-btn--full-width': props.isFullWidth,
     'ec-btn--icon-only': props.icon && !hasDefaultSlot(),
     [`ec-btn--${props.category}`]: props.category,
     'ec-btn--outline': props.isOutline,
-    'ec-btn--primary-reverse': props.isReverse && props.category === ButtonCategory.Primary,
-    'ec-btn--secondary-reverse': props.isReverse && props.category === ButtonCategory.Secondary,
-    'ec-btn--success-reverse': props.isReverse && props.category === ButtonCategory.Success,
-    'ec-btn--error-reverse': props.isReverse && props.category === ButtonCategory.Error,
-    'ec-btn--warning-reverse': props.isReverse && props.category === ButtonCategory.Warning,
+    'ec-btn--primary-reverse': props.isReverse && props.category === ButtonCategory.PRIMARY,
+    'ec-btn--secondary-reverse': props.isReverse && props.category === ButtonCategory.SECONDARY,
+    'ec-btn--success-reverse': props.isReverse && props.category === ButtonCategory.SUCCESS,
+    'ec-btn--error-reverse': props.isReverse && props.category === ButtonCategory.ERROR,
+    'ec-btn--warning-reverse': props.isReverse && props.category === ButtonCategory.WARNING,
     'ec-btn--is-loading': isSpinnerLoaderVisible() || isTextLoaderVisible(),
   };
 }

diff --git a/src/components/ec-btn/types.ts b/src/components/ec-btn/types.ts
@@ -3,16 +3,16 @@ import type { RouteLocationRaw } from 'vue-router';
 import type { IconName } from '../ec-icon/icon-names';
 
 export enum ButtonSize {
-  Medium = 'md',
-  Small = 'sm',
+  MEDIUM = 'md',
+  SMALL = 'sm',
 }
 
 export enum ButtonCategory {
-  Primary = 'primary',
-  Secondary = 'secondary',
-  Success = 'success',
-  Error = 'error',
-  Warning = 'warning',
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  SUCCESS = 'success',
+  ERROR = 'error',
+  WARNING = 'warning',
 }
 
 export interface ButtonProps {

diff --git a/src/components/ec-button-group/ec-button-group.vue b/src/components/ec-button-group/ec-button-group.vue
@@ -10,7 +10,7 @@
       v-for="(item, index) in items"
       :key="item.id || index"
       :data-test="`ec-button-group__btn ec-button-group__btn-${index}`"
-      :category="ButtonCategory.Primary"
+      :category="ButtonCategory.PRIMARY"
       class="ec-btn-group__btn"
       :is-submit="false"
       :is-outline="modelValue !== item.value"

diff --git a/src/components/ec-checkbox/ec-checkbox.vue b/src/components/ec-checkbox/ec-checkbox.vue
@@ -53,7 +53,7 @@
           v-else-if="inputModel"
           class="ec-checkbox__check-icon"
           data-test="ec-checkbox__check-icon"
-          :name="IconName.SimpleCheck"
+          :name="IconName.SIMPLE_CHECK"
           :size="16"
         />
       </span>

diff --git a/src/components/ec-icon/ec-icon.spec.ts b/src/components/ec-icon/ec-icon.spec.ts
@@ -17,26 +17,26 @@ describe('EcIcon', () => {
   }
 
   it('should render properly when a name was given', () => {
-    const wrapper = mount(EcIcon, { props: { name: IconName.SimpleAdd } });
+    const wrapper = mount(EcIcon, { props: { name: IconName.SIMPLE_ADD } });
 
     expect(wrapper.element).toMatchSnapshot();
     expect(wrapper.classes('ec-icon')).toBe(true);
   });
 
   it('should use the given size prop', () => {
-    const wrapper = mountEcIcon({ name: IconName.SimpleAdd, size: 16 });
+    const wrapper = mountEcIcon({ name: IconName.SIMPLE_ADD, size: 16 });
     expect(wrapper.element).toMatchSnapshot();
   });
 
   it.each([undefined, IconType.ERROR, IconType.INFO, IconType.SUCCESS, IconType.WARNING])('should use the type "%s"', (type) => {
-    const wrapper = mountEcIcon({ name: IconName.SimpleAdd, type });
+    const wrapper = mountEcIcon({ name: IconName.SIMPLE_ADD, type });
     expect(wrapper.element).toMatchSnapshot();
     expect(wrapper.classes(`ec-icon--${type}`)).toBe(!!type);
   });
 
   it('should pass custom attributes', () => {
     const wrapper = mountEcIcon(
-      { name: IconName.SimpleAdd },
+      { name: IconName.SIMPLE_ADD },
       {
         attrs: {
           id: 'my-icon',
@@ -55,7 +55,7 @@ describe('EcIcon', () => {
     const clickSpy = vi.fn();
     const wrapper = mountEcIcon(
       {
-        name: IconName.SimpleAdd,
+        name: IconName.SIMPLE_ADD,
       },
       {
         attrs: {

diff --git a/src/components/ec-icon/ec-icon.story.ts b/src/components/ec-icon/ec-icon.story.ts
@@ -56,7 +56,7 @@ const Template: EcIconStory = args => ({
 export const basic = Template.bind({});
 
 basic.args = {
-  name: IconName.SimpleCheck,
+  name: IconName.SIMPLE_CHECK,
   size: 48,
 };
 
@@ -244,7 +244,7 @@ export const withinAText = () => ({
         duis labore proident reprehenderit pariatur ex quis incididunt ut ipsum.
       </p>
       <button class="ec-btn ec-btn--rounded ec-btn--md ec-btn--primary ec-btn--outline tw-mt-16">
-        <ec-icon name="${IconName.SimpleSignOut}" class="tw-fill-current tw-mr-8" :size="24" /><span>Icon inside of a button</span>
+        <ec-icon name="${IconName.SIMPLE_SIGN_OUT}" class="tw-fill-current tw-mr-8" :size="24" /><span>Icon inside of a button</span>
       </button>
     </div>
   `,