refactor: sort interface keys

.eslintrc.json

@@ -21,6 +21,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:typescript-sort-keys/recommended",
     "plugin:import/recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
@@ -32,6 +33,7 @@
 
   "plugins": [
     "@typescript-eslint",
+    "typescript-sort-keys",
     "sort-keys-fix",
     "sort-destructure-keys",
     "prettier"

package.json

@@ -54,6 +54,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-sort-destructure-keys": "1.5.0",
     "eslint-plugin-sort-keys-fix": "1.1.2",
+    "eslint-plugin-typescript-sort-keys": "3.1.0",
     "husky": "8.0.3",
     "lint-staged": "14.0.1",
     "postcss-html": "1.5.0",

src/components/sound/sound.tsx

@@ -12,8 +12,8 @@ import styles from './sound.module.css';
 import type { Sound } from '@/data/types';
 
 interface SoundProps extends Sound {
-  hidden: boolean;
   functional: boolean;
+  hidden: boolean;
   selectHidden: (key: string) => void;
   unselectHidden: (key: string) => void;
 }

src/components/sounds/sounds.tsx

@@ -11,8 +11,8 @@ import styles from './sounds.module.css';
 import type { Sounds } from '@/data/types';
 
 interface SoundsProps {
-  id: string;
   functional: boolean;
+  id: string;
   sounds: Sounds;
 }
 

src/data/sounds.tsx

@@ -8,18 +8,10 @@ import { BsFire, BsAirplaneFill } from 'react-icons/bs/index';
 
 // const defaultIcon = <BsSoundwave />;
 
+import type { Categories } from './types';
+
 export const sounds: {
-  categories: Array<{
+  categories: Categories;
-    id: string;
-    title: string;
-    icon: React.ReactNode;
-    sounds: Array<{
-      label: string;
-      src: string;
-      icon: React.ReactNode;
-      id: string;
-    }>;
-  }>;
 } = {
   categories: [
     {

src/data/types.d.ts

@@ -1,17 +1,17 @@
 export interface Sound {
-  label: string;
-  src: string;
   icon: React.ReactNode;
   id: string;
+  label: string;
+  src: string;
 }
 
 export type Sounds = Array<Sound>;
 
 export interface Category {
-  id: string;
-  title: string;
   icon: React.ReactNode;
+  id: string;
   sounds: Sounds;
+  title: string;
 }
 
 export type Categories = Array<Category>;

src/hooks/use-sound.ts

@@ -4,7 +4,7 @@ import { useSSR } from './use-ssr';
 
 export function useSound(
   src: string,
-  options: { volume?: number; loop?: boolean } = {},
+  options: { loop?: boolean; volume?: number } = {},
 ): HTMLAudioElement | null {
   const { isBrowser } = useSSR();
   const sound = useMemo<HTMLAudioElement | null>(() => {

src/store/sound/sound.actions.ts

@@ -3,15 +3,15 @@ import type { StateCreator } from 'zustand';
 import type { SoundState } from './sound.state';
 
 export interface SoundActions {
-  select: (id: string) => void;
-  unselect: (id: string) => void;
-  setVolume: (id: string, volume: number) => void;
-  unselectAll: (pushToHistory?: boolean) => void;
-  restoreHistory: () => void;
-  toggleFavorite: (id: string) => void;
   pause: () => void;
   play: () => void;
+  restoreHistory: () => void;
+  select: (id: string) => void;
+  setVolume: (id: string, volume: number) => void;
+  toggleFavorite: (id: string) => void;
   togglePlay: () => void;
+  unselect: (id: string) => void;
+  unselectAll: (pushToHistory?: boolean) => void;
 }
 
 export const createActions: StateCreator<

src/store/sound/sound.state.ts

@@ -5,23 +5,23 @@ import type { SoundActions } from './sound.actions';
 import { sounds } from '@/data/sounds';
 
 export interface SoundState {
-  isPlaying: boolean;
+  getFavorites: () => Array<string>;
-  sounds: {
-    [id: string]: {
-      isSelected: boolean;
-      isFavorite: boolean;
-      volume: number;
-    };
-  };
   history: {
     [id: string]: {
-      isSelected: boolean;
       isFavorite: boolean;
+      isSelected: boolean;
       volume: number;
     };
   } | null;
+  isPlaying: boolean;
   noSelected: () => boolean;
-  getFavorites: () => Array<string>;
+  sounds: {
+    [id: string]: {
+      isFavorite: boolean;
+      isSelected: boolean;
+      volume: number;
+    };
+  };
 }
 
 export const createState: StateCreator<