feat: path alias to electron and optimize src path (#342)

* feat: path alias to electron and optimize src path * fix: eslint errors
devhatt · Jan 23, 2024 · effa108 · effa108
1 parent e33fa95
commit effa108
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 85 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -331,7 +331,6 @@ module.exports = defineConfig({
     'import/no-extraneous-dependencies': 'warn',
     'import/no-named-as-default-member': 'warn',
     'import/no-self-import': 'warn',
-    'import/no-unresolved': 'warn',
     'import/no-unused-modules': 'warn',
     'import/order': 'off', // keep disable to not conflict with import-helpers/order-imports
     'jsx-a11y/alt-text': 'warn',

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
-  Route,
-  HashRouter as Router,
-  Routes,
   createRoutesFromChildren,
+  HashRouter as Router,
   matchRoutes,
+  Route,
+  Routes,
   useLocation,
   useNavigationType,
 } from 'react-router-dom';
 
 import * as Sentry from '@sentry/react';
-import ModuleProvider from 'contexts/ModuleContext';
+import ModuleProvider from '~contexts/ModuleContext';
 
 import Home from './pages/home/home';
 
@@ -32,21 +32,21 @@ Sentry.init({
       ),
     }),
   ],
-  tracesSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1,
   replaysSessionSampleRate: 0.1,
-  replaysOnErrorSampleRate: 1.0,
+  tracesSampleRate: 1,
 });
 
 const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
 
-function App() {
+function App(): ReactNode {
   return (
     <ModuleProvider>
       <div className={scss.app}>
         <Head />
         <Router>
           <SentryRoutes>
-            <Route path="/" element={<Home />} />
+            <Route element={<Home />} path="/" />
           </SentryRoutes>
         </Router>
       </div>

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -19,21 +19,21 @@ export const ButtonStories: Story = () => (
     </Button>
     <br />
     <Button circle icon={<Icon icon="at" />} />
-    <Button variant="container" circle icon={<Icon icon="pin" />} />
-    <Button variant="outlined" circle icon={<Icon icon="hashtag" />} />
+    <Button circle icon={<Icon icon="pin" />} variant="container" />
+    <Button circle icon={<Icon icon="hashtag" />} variant="outlined" />
     <br />
-    <Button color="secondary" circle icon={<Icon icon="error" />} />
+    <Button circle color="secondary" icon={<Icon icon="error" />} />
     <Button
-      color="secondary"
-      variant="container"
       circle
+      color="secondary"
       icon={<Icon icon="emote" />}
+      variant="container"
     />
     <Button
-      color="secondary"
-      variant="outlined"
       circle
+      color="secondary"
       icon={<Icon icon="canva" />}
+      variant="outlined"
     />
   </div>
 );
diff --git a/src/components/FeedbackError/FeedbackError.stories.tsx b/src/components/FeedbackError/FeedbackError.stories.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 
 import type { Story } from '@ladle/react';
-import { useError } from 'stores/useError/useError';
+
+import { useError } from '~stores/useError/useError';
 
 import FeedbackError from './FeedbackError';
 

diff --git a/src/components/FeedbackError/FeedbackError.tsx b/src/components/FeedbackError/FeedbackError.tsx
@@ -1,29 +1,34 @@
+import { ReactNode } from 'react';
+
 import { AnimatePresence, motion } from 'framer-motion';
-import { useError } from 'stores/useError/useError';
+
+import { useError } from '~stores/useError/useError';
 
 import Icon from '~components/Icon/Icon';
 
 import scss from './FeedbackError.module.scss';
 
 import { animationVariants } from './FeedbackError.data';
 
-function FeedbackError() {
+function FeedbackError(): ReactNode {
   const errorMessage = useError((state) => state.errorMessage);
 
-  const renderError = () => (
+  const renderError = (): ReactNode => (
     <motion.div
-      initial="hidden"
       animate="visible"
-      exit="hidden"
       className={scss.wrapper}
-      variants={animationVariants}
       data-testid="error-container"
+      exit="hidden"
+      initial="hidden"
+      variants={animationVariants}
     >
-      <Icon icon="error" size="large" className={scss.errorIcon} />
+      <Icon className={scss.errorIcon} icon="error" size="large" />
       <p className={scss.errorMessage}>{errorMessage}</p>
     </motion.div>
   );
-  return <AnimatePresence>{errorMessage && renderError()}</AnimatePresence>;
+  return (
+    <AnimatePresence>{errorMessage ? renderError() : null}</AnimatePresence>
+  );
 }
 
 export default FeedbackError;
diff --git a/src/components/Head/Head.tsx b/src/components/Head/Head.tsx
@@ -1,14 +1,15 @@
+import { ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 
-import { useModule } from 'contexts/ModuleContext';
+import { useModule } from '~contexts/ModuleContext';
 
-export function Head() {
+export function Head(): ReactNode {
   const { modulesURL } = useModule();
 
   return (
     <Helmet>
       {modulesURL.map((module) => (
-        <script key={module} src={module} type="module" defer />
+        <script defer key={module} src={module} type="module" />
       ))}
     </Helmet>
   );

diff --git a/src/components/Tabber/stores/useSocialNetworkStore.tsx b/src/components/Tabber/stores/useSocialNetworkStore.tsx
@@ -1,20 +1,17 @@
-import { post, reels, story } from 'modules/example-module1/postModes/story';
-import { nanoid } from 'nanoid';
+import { nanoid } from 'nanoid';
 import { create } from 'zustand';
 
 import { TSocialNetworksState } from './useSocialNetworkStore.types';
 
 export const useSocialNetworkStore = create<TSocialNetworksState>(() => ({
   socialNetworks: [
     {
-      id: nanoid(),
-      name: 'Facebook',
       icon: (
         <svg
-          width="24"
+          fill="none"
           height="24"
           viewBox="0 0 24 24"
-          fill="none"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -23,17 +20,17 @@ export const useSocialNetworkStore = create<TSocialNetworksState>(() => ({
           />
         </svg>
       ),
-      postModes: [story, post, reels],
+      id: nanoid(),
+      name: 'Facebook',
+      postModes: [],
     },
     {
-      id: nanoid(),
-      name: 'Instagram',
       icon: (
         <svg
-          width="24"
+          fill="none"
           height="24"
           viewBox="0 0 24 24"
-          fill="none"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -42,17 +39,17 @@ export const useSocialNetworkStore = create<TSocialNetworksState>(() => ({
           />
         </svg>
       ),
-      postModes: [reels, story, post],
+      id: nanoid(),
+      name: 'Instagram',
+      postModes: [],
     },
     {
-      id: nanoid(),
-      name: 'Xwitter',
       icon: (
         <svg
-          width="24"
+          fill="none"
           height="24"
           viewBox="0 0 24 24"
-          fill="none"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -61,17 +58,17 @@ export const useSocialNetworkStore = create<TSocialNetworksState>(() => ({
           />
         </svg>
       ),
-      postModes: [post],
+      id: nanoid(),
+      name: 'Xwitter',
+      postModes: [],
     },
     {
-      id: nanoid(),
-      name: 'TikTok',
       icon: (
         <svg
-          width="24"
+          fill="none"
           height="24"
           viewBox="0 0 24 24"
-          fill="none"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -80,7 +77,9 @@ export const useSocialNetworkStore = create<TSocialNetworksState>(() => ({
           />
         </svg>
       ),
-      postModes: [post, story],
+      id: nanoid(),
+      name: 'TikTok',
+      postModes: [],
     },
   ],
 }));
diff --git a/src/components/Testinho/Testinho.tsx b/src/components/Testinho/Testinho.tsx
@@ -1,19 +1,21 @@
-import React from 'react';
+import { ReactNode } from 'react';
 
-import { usePostsStore } from 'stores/usePostsStore';
+import { usePostsStore } from '~stores/usePostsStore';
 
-const Testinho = ({ name = 'World' }) => {
+function Testinho(props: { name?: string }): ReactNode {
   const posts = usePostsStore((state) => state.postsQuantity);
-
   const increaseValue = usePostsStore((state) => state.increase);
+  const increaseQuantity = 1;
 
   return (
     <>
-      <button onClick={() => increaseValue(1)}>Change value of posts</button>
+      <button onClick={() => increaseValue(increaseQuantity)} type="button">
+        Change value of posts
+      </button>
       <p>Number of posts: {posts}</p>
-      <h1>Hello, {name}!</h1>
+      <h1>Hello, {props.name ?? 'World'}!</h1>
     </>
   );
-};
+}
 
 export default Testinho;
diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx
@@ -1,4 +1,6 @@
-import { useModule } from 'contexts/ModuleContext';
+import { ReactNode } from 'react';
+
+import { useModule } from '~contexts/ModuleContext';
 
 import FeedbackError from '~components/FeedbackError/FeedbackError';
 import FirstComment from '~components/FirstComment/FirstComment';
@@ -10,7 +12,7 @@ import Sidebar from './components/Sidebar/Sidebar';
 
 import scss from './home.module.scss';
 
-const Home = () => {
+function Home(): ReactNode {
   const { modules } = useModule();
 
   return (
@@ -34,6 +36,6 @@ const Home = () => {
       </div>
     </>
   );
-};
+}
 
 export default Home;
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,22 +2,10 @@
   "compilerOptions": {
     "types": ["vitest/globals", "@testing-library/jest-dom"],
     "allowImportingTsExtensions": true,
-    "baseUrl": "src",
+    "baseUrl": ".",
     "paths": {
-      "~components/*": ["components/*"],
-      "~config/*": ["config/*"],
-      "~constants/*": ["constants/*"],
-      "~enums/*": ["enums/*"],
-      "~hooks/*": ["hooks/*"],
-      "~interfaces/*": ["interfaces/*"],
-      "~i18n": ["i18n/"],
-      "~pages/*": ["pages/*"],
-      "~services/*": ["services/*"],
-      "~snippets/*": ["snippets/*"],
-      "~store/*": ["store/*"],
-      "~styles/*": ["styles/*"],
-      "~types/*": ["types/*"],
-      "~utils/*": ["utils/*"]
+      "~*": ["src/*"],
+      "~electron/*": ["electron/*"],
     },
     "isolatedModules": true,
     "jsx": "react-jsx",
@@ -37,7 +25,7 @@
     /* Linting */
     "strict": true,
     "target": "ES2020",
-    "useDefineForClassFields": true
+    "useDefineForClassFields": true,
   },
   "exclude": ["node_modules", "dist"],
   "include": [
@@ -48,11 +36,11 @@
     "tests-examples/**/*",
     "playwright/**/*",
     "e2e-testing/**/*",
-    "module.js"
+    "module.js",
   ],
   "references": [
     {
-      "path": "./tsconfig.node.json"
-    }
-  ]
+      "path": "./tsconfig.node.json",
+    },
+  ],
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,10 +1,13 @@
 import react from '@vitejs/plugin-react-swc';
-import path from 'path';
+import path from 'node:path';
 import { defineConfig } from 'vite';
 import electron from 'vite-plugin-electron/simple';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
+  build: {
+    target: ['edge88', 'firefox85', 'chrome88', 'safari14', 'ios14'],
+  },
   plugins: [
     react(),
     tsconfigPaths(),
@@ -18,7 +21,4 @@ export default defineConfig({
       '~styles': path.join(__dirname, 'src/styles'),
     },
   },
-  build: {
-    target: ['edge88', 'firefox85', 'chrome88', 'safari14', 'ios14'],
-  },
 });