feat: sonarqube refactoring (#61)

Author: joaltoroc

.github/workflows/chromatic.yml

@@ -18,7 +18,7 @@ jobs:
 
       - name: Install dependencies
         # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
-        run: npm ci
+        run: npm ci --ignore-scripts
         # 👇 Adds Chromatic as a step in the workflow
 
       - name: Publish to Chromatic

.github/workflows/npm-build.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Clean and Install
-        run: npm ci
+        run: npm ci --ignore-scripts
 
       - name: Build
         run: npm run build

.github/workflows/publish.yml

@@ -18,7 +18,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - name: Clean and Install
-        run: npm ci
+        run: npm ci --ignore-scripts
 
       - name: Configure git
         run: |

Changelog.md

@@ -2,6 +2,15 @@
 
 # Changelog
 
+## v2.1.1 - SonarQube Refactoring
+
+### 👾 Fix
+
+- Fix multiple code smells and bugs reported by SonarQube
+- Improve Dropdown keyboard accessibility and semantic HTML
+- Order CSS imports and fix duplicate type imports
+- Parametrize string utility tests
+
 ## v2.1.0 - Update Libraries
 
 ### ☝🏻 Upgrade

package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "2.1.0",
+  "version": "2.1.1",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",

src/theme/main.css

@@ -1,6 +1,4 @@
 @import 'tailwindcss';
-@plugin "daisyui";
-
 @import './accordion.css';
 @import './avatar.css';
 @import './badge.css';
@@ -9,3 +7,5 @@
 @import './radio.css';
 @import './span.css';
 @import './textbox.css';
+
+@plugin "daisyui";

src/types/ui/components/accordion.types.ts

@@ -8,6 +8,7 @@ export interface AccordionType {
 }
 
 export interface AccordionOption {
+  key?: string;
   header: React.ReactElement;
   body: React.ReactElement;
 }

src/types/ui/components/badge.types.ts

@@ -1,6 +1,5 @@
-import type { ColorType, SizeType } from '@/types';
+import type { ColorType, PositionType, SizeType } from '@/types';
 import type { IconType } from 'react-icons';
-import type { PositionType } from '@/types';
 
 export interface BadgeType {
   children: React.ReactNode;

src/types/ui/components/button.types.ts

@@ -1,6 +1,10 @@
-import type { BadgeType, ColorButtonType, SizeType } from '@/types';
+import type {
+  BadgeType,
+  ColorButtonType,
+  PositionType,
+  SizeType
+} from '@/types';
 import type { IconType } from 'react-icons';
-import type { PositionType } from '@/types';
 
 export interface ButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   isLink?: boolean;

src/ui/components/accordion/accordion.component.tsx

@@ -1,6 +1,10 @@
 import cls from 'classnames';
 
-import type { AccordionType } from '@/types';
+import type { AccordionOption, AccordionType } from '@/types';
+
+const getOptionKey = (option: AccordionOption, index: number): string => {
+  return option.key || `accordion-item-${index}`;
+};
 
 const Accordion = ({
   name,
@@ -16,17 +20,19 @@ const Accordion = ({
         'gap-2': !join
       })}
     >
-      {options.map(({ header, body }, index) => (
+      {options.map((option, index) => (
         <div
-          key={index}
+          key={getOptionKey(option, index)}
           className={cls('collapse bg-base-200', {
             [`accordion-type-${iconType}`]: iconType,
             'join-item border border-base-300': join
           })}
         >
           <input type={multiple ? 'checkbox' : 'radio'} name={name} />
-          <div className='collapse-title text-xl font-medium'>{header}</div>
-          <div className='collapse-content'>{body}</div>
+          <div className='collapse-title text-xl font-medium'>
+            {option.header}
+          </div>
+          <div className='collapse-content'>{option.body}</div>
         </div>
       ))}
     </div>