refactor: move getCssNameBySize fn (#28)

src/components/input/Input.tsx

@@ -1,5 +1,6 @@
 import type { HTMLInputTypeAttribute } from 'react';
 import input from './input.module.scss';
+import { getCssNameBySize } from '@/utils/index';
 
 interface InputProps {
   type?: HTMLInputTypeAttribute;
@@ -13,17 +14,6 @@ interface InputProps {
   validationMessage?: string;
 }
 
-const getCssNameBySize = (size: 'sm' | 'md' | 'lg') => {
-  switch (size) {
-    case 'sm':
-      return '--small';
-    case 'md':
-      return '--medium';
-    case 'lg':
-      return '--large';
-  }
-};
-
 export const Input = ({
   type,
   minLength,

src/components/input/input.module.scss

@@ -13,6 +13,10 @@
   }
 }
 
+.kraken {
+  background-color: green;
+}
+
 .m_invalid {
   border: 1px solid rgb(255, 124, 124);
 

src/utils/index.ts

@@ -0,0 +1,10 @@
+export const getCssNameBySize = (size: 'sm' | 'md' | 'lg') => {
+  switch (size) {
+    case 'sm':
+      return '--small';
+    case 'md':
+      return '--medium';
+    case 'lg':
+      return '--large';
+  }
+};

tsconfig.json

@@ -16,7 +16,8 @@
     "paths": {
       "@/components/*": ["./src/components/*"],
       "@/services/*": ["./src/services/*"],
-      "@/pages/*": ["./src/pages/*"]
+      "@/pages/*": ["./src/pages/*"],
+      "@/utils/*": ["./src/utils/*"]
     },
 
     /* Linting */

vite.config.ts

@@ -18,6 +18,10 @@ export default defineConfig({
         find: '@/pages',
         replacement: '/src/pages',
       },
+      {
+        find: '@/utils',
+        replacement: '/src/utils',
+      },
     ],
   },
   optimizeDeps: {