feat: Implement eslint, build and prettier for github actions (#28)

* feat: Implement eslint for github-actions

* fix: Upgrade eslint-action.yml

* feat: Upgrade eslint-action.yml

* fix: Test eslint actions

* feat: Finish implement eslint for github actions

* feat: Implement prettier for github actions

* feat: Implement build project for github actions

* refactor: Refactor files with prettier

* feat: Upgrade eslint-action for use yarn

* feat: Improve build and prettier actions

* fix: Fix unnecessary code

.github/workflows/build.yml

@@ -0,0 +1,17 @@
+name: Build Project
+
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Build
+        run: yarn build

.github/workflows/eslint-action.yml

@@ -0,0 +1,16 @@
+name: Lint
+
+on: [pull_request]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Install Dependencies
+      run: yarn install
+
+    - name: Run ESLint
+      run: npx eslint . --ext .js,.jsx,.ts,.tsx

.github/workflows/prettier.yml

@@ -0,0 +1,17 @@
+name: Prettier Code Formatter
+
+on: [pull_request]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Check Code Format
+        run: npx prettier --check .

.prettierrc

@@ -6,5 +6,6 @@
   "bracketSameLine": true,
   "arrowParens": "avoid",
   "quoteProps": "consistent",
+  "endOfLine": "auto",
   "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/comProp.code-snippets

@@ -16,8 +16,8 @@
       "  )",
       "}",
       "",
-      "export default $1"
+      "export default $1",
     ],
-    "description": "Snippet for a React functional component with customizable props"
-  }
+    "description": "Snippet for a React functional component with customizable props",
+  },
 }

.vscode/comp.code-snippets

@@ -12,8 +12,8 @@
       "  )",
       "}",
       "",
-      "export default $1"
+      "export default $1",
     ],
-    "description": "Snippet for a React functional component without props"
-  }
+    "description": "Snippet for a React functional component without props",
+  },
 }

.vscode/settings.json

@@ -6,9 +6,6 @@
   "editor.formatOnSave": true,
   "files.autoSave": "afterDelay",
   "files.trimFinalNewlines": true,
-  "[sass]": {
-    "editor.defaultFormatter": "syler.sass-indented"
-  },
   "todo-tree.highlights.customHighlight": {
     "FIXME": {
       "foreground": "#000000",
@@ -20,5 +17,5 @@
     "FIXME": ["FIXME", "FIXIT", "FIX"]
   },
   "eslint.enable": true,
-  "eslint.validate": ["html"],
+  "eslint.validate": ["html"]
 }

.vscode/storyTemp.code-snippets

@@ -22,8 +22,8 @@
       "  args: {},",
       "}",
       "",
-      "export default meta"
+      "export default meta",
     ],
-    "description": "Snippet for creating a Storybook story for a React component"
-  }
+    "description": "Snippet for creating a Storybook story for a React component",
+  },
 }

.vscode/storyTempProps.code-snippets

@@ -18,8 +18,8 @@
       "  args: {},",
       "}",
       "",
-      "export default meta"
+      "export default meta",
     ],
-    "description": "Snippet for creating a Storybook story for a React component without props"
-  }
+    "description": "Snippet for creating a Storybook story for a React component without props",
+  },
 }

src/components/RadioButton.tsx

@@ -25,9 +25,8 @@ const RadioButton: FC<RadioButtonProps> = ({
         onClick={onClick}
         className="size-4 cursor-pointer accent-purple-500"
       />
-      
+
       <span className="px-1.5">{label}</span>
-
     </label>
   )
 }

src/components/WelcomChatContainer.tsx → src/components/WelcomeChatContainer.tsx

@@ -1,21 +1,21 @@
-import {type FC} from "react"
-import Typography, {TypographyVariant} from "./Typography"
-import {ReactSVG} from "react-svg"
-import {StaticAssetPath} from "@/utils/util"
-
-const WelcomChatContainer: FC = () => {
-  return (
-    <div className="flex size-full flex-col items-center justify-center gap-4">
-      <ReactSVG src={StaticAssetPath.AppLogo} />
-      
-      <Typography variant={TypographyVariant.H1}>Welcome to Mirage</Typography>
-      
-      <Typography className="text-center" variant={TypographyVariant.Span}>
-        Chat with friends, family, the whole world, select a Room or a direct
-        chat and start a conversation
-      </Typography>
-    </div>
-  )
-}
-
-export default WelcomChatContainer
+import {type FC} from "react"
+import Typography, {TypographyVariant} from "./Typography"
+import {ReactSVG} from "react-svg"
+import {StaticAssetPath} from "@/utils/util"
+
+const WelcomeChatContainer: FC = () => {
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-4">
+      <ReactSVG src={StaticAssetPath.AppLogo} />
+
+      <Typography variant={TypographyVariant.H1}>Welcome to Mirage</Typography>
+
+      <Typography className="text-center" variant={TypographyVariant.Span}>
+        Chat with friends, family, the whole world, select a Room or a direct
+        chat and start a conversation
+      </Typography>
+    </div>
+  )
+}
+
+export default WelcomeChatContainer

src/hooks/util/useSelection.ts

@@ -1,7 +1,7 @@
 import {useCallback, useState} from "react"
 
 const useSelection = <T>(items: T[], predicate: (item: T) => boolean) => {
-  const initialSelectedItem = items.find((element) => predicate(element))
+  const initialSelectedItem = items.find(element => predicate(element))
 
   const [selectedItem, setSelectedItem] = useState<T | undefined>(
     initialSelectedItem

src/stories/checkBox.stories.tsx

@@ -1,5 +1,7 @@
 import {type Meta, type StoryObj} from "@storybook/react"
-import Checkbox, {type CheckboxProps as CheckboxProperties} from "../components/Checkbox"
+import Checkbox, {
+  type CheckboxProps as CheckboxProperties,
+} from "../components/Checkbox"
 
 type Story = StoryObj<typeof Checkbox>
 

src/stories/eventMessage.stories.tsx

@@ -1,10 +1,15 @@
 import {type Meta, type StoryObj} from "@storybook/react"
-import EventMessage, {type EventMessageProps as EventMessageProperties} from "../components/EventMessage"
+import EventMessage, {
+  type EventMessageProps as EventMessageProperties,
+} from "../components/EventMessage"
+import React from "react"
 
 type Story = StoryObj<typeof EventMessage>
 
 const meta: Meta<typeof EventMessage> = {component: EventMessage}
-const render = (arguments_: EventMessageProperties) => <EventMessage {...arguments_} />
+const render = (arguments_: EventMessageProperties) => (
+  <EventMessage {...arguments_} />
+)
 
 export const Default: Story = {
   render,

src/stories/keyCue.stories.tsx

@@ -1,5 +1,8 @@
 import {type Meta, type StoryObj} from "@storybook/react"
-import KeyCue, {type KeyCueProps as KeyCueProperties} from "../components/KeyCue"
+import KeyCue, {
+  type KeyCueProps as KeyCueProperties,
+} from "../components/KeyCue"
+import React from "react"
 
 type Story = StoryObj<typeof KeyCue>
 

src/stories/messageContainer.stories.tsx

@@ -6,7 +6,9 @@ import MessageContainer, {
 type Story = StoryObj<typeof MessageContainer>
 
 const meta: Meta<typeof MessageContainer> = {component: MessageContainer}
-const render = (arguments_: MessageContainerProperties) => <MessageContainer {...arguments_} />
+const render = (arguments_: MessageContainerProperties) => (
+  <MessageContainer {...arguments_} />
+)
 
 export const Default: Story = {
   render,

src/stories/room.stories.tsx

@@ -1,5 +1,8 @@
 import {type Meta, type StoryObj} from "@storybook/react"
-import Room, {type RoomProps as RoomProperties, RoomType} from "../components/Room"
+import Room, {
+  type RoomProps as RoomProperties,
+  RoomType,
+} from "../components/Room"
 
 type Story = StoryObj<typeof Room>
 

src/stories/searchBar.stories.tsx

@@ -1,5 +1,7 @@
 import {type Meta, type StoryObj} from "@storybook/react"
-import SearchBar, {type SearchBarProps as SearchBarProperties} from "../components/SearchBar"
+import SearchBar, {
+  type SearchBarProps as SearchBarProperties,
+} from "../components/SearchBar"
 
 type Story = StoryObj<typeof SearchBar>
 

src/stories/serverListItem.stories.tsx

@@ -6,7 +6,9 @@ import ServerListItem, {
 type Story = StoryObj<typeof ServerListItem>
 
 const meta: Meta<typeof ServerListItem> = {component: ServerListItem}
-const render = (arguments_: ServerListItemProperties) => <ServerListItem {...arguments_} />
+const render = (arguments_: ServerListItemProperties) => (
+  <ServerListItem {...arguments_} />
+)
 
 export const Default: Story = {
   render,

src/stories/switchButton.stories.tsx

@@ -1,12 +1,16 @@
 import {type Meta, type StoryObj} from "@storybook/react"
-import SwitchButton, {type SwitchButtonProps as SwitchButtonProperties} from "../components/SwitchButton"
+import SwitchButton, {
+  type SwitchButtonProps as SwitchButtonProperties,
+} from "../components/SwitchButton"
 
 type Story = StoryObj<typeof SwitchButton>
 
 const meta: Meta<typeof SwitchButton> = {
   component: SwitchButton,
 }
-const render = (arguments_: SwitchButtonProperties) => <SwitchButton {...arguments_} />
+const render = (arguments_: SwitchButtonProperties) => (
+  <SwitchButton {...arguments_} />
+)
 
 export const Default: Story = {
   render,

src/stories/typingIndicator.stories.tsx

@@ -6,7 +6,9 @@ import TypingIndicator, {
 type Story = StoryObj<typeof TypingIndicator>
 
 const meta: Meta<typeof TypingIndicator> = {component: TypingIndicator}
-const render = (arguments_: TypingIndicatorProperties) => <TypingIndicator {...arguments_} />
+const render = (arguments_: TypingIndicatorProperties) => (
+  <TypingIndicator {...arguments_} />
+)
 
 const defaultAvatarUrl =
   "https://images.unsplash.com/photo-1706285644467-45769812f872?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

src/stories/userCard.stories.tsx

@@ -1,5 +1,7 @@
 import {type Meta, type StoryObj} from "@storybook/react"
-import UserCard, {type UserCardProps as UserCardProperties} from "../components/UserCard"
+import UserCard, {
+  type UserCardProps as UserCardProperties,
+} from "../components/UserCard"
 import {UserStatus} from "../components/UserProfile"
 
 type Story = StoryObj<typeof UserCard>

src/stories/userProfileGhost.stories.tsx

@@ -6,7 +6,9 @@ import UserProfileGhost, {
 type Story = StoryObj<typeof UserProfileGhost>
 
 const meta: Meta<typeof UserProfileGhost> = {component: UserProfileGhost}
-const render = (arguments_: UserProfileGhostProperties) => <UserProfileGhost {...arguments_} />
+const render = (arguments_: UserProfileGhostProperties) => (
+  <UserProfileGhost {...arguments_} />
+)
 
 export const Default: Story = {
   render,

src/stories/welcomChatContainer.stories.tsx

@@ -1,5 +1,5 @@
 import {type Meta, type StoryObj} from "@storybook/react"
-import WelcomChatContainer from "../components/WelcomChatContainer"
+import WelcomChatContainer from "../components/WelcomeChatContainer"
 
 type Story = StoryObj<typeof WelcomChatContainer>
 

src/styles/tailwind.css

@@ -18,14 +18,14 @@ input {
 }
 
 body {
-  @apply relative m-0  antialiased select-none overflow-hidden;
+  @apply relative m-0  select-none overflow-hidden antialiased;
   @apply font-noto font-normal text-stone-600;
 }
 
 button:disabled,
 input:disabled,
 textarea:disabled {
-  @apply opacity-50 cursor-not-allowed;
+  @apply cursor-not-allowed opacity-50;
 }
 
 ::selection {

src/utils/util.ts

@@ -1,11 +1,7 @@
 import {type RosterUserProps, UserPowerLevel} from "@/components/RosterUser"
 import {UserStatus} from "@/components/UserProfile"
 import dayjs from "dayjs"
-import {
-  type Room,
-  type MatrixClient,
-  EventTimeline,
-} from "matrix-js-sdk"
+import {type Room, type MatrixClient, EventTimeline} from "matrix-js-sdk"
 import {type FileContent} from "use-file-picker/dist/interfaces"
 
 export enum ViewPath {
@@ -348,7 +344,7 @@ export function stringToColor(string_: string): string {
     // When index = 0 is green, index = 1 is blue, index = 2 is red
     // Move hash index * 8 digits to the right for extract the color.
     // 0xff is equal to 255 and the AND operator (&) is limiting to 8 bits.
-    const value = (hash >> (index * 8)) & 0xFF
+    const value = (hash >> (index * 8)) & 0xff
 
     // value.toString(16) convert value to hex string.
     // 00 if the hexadecimal string is less than two characters ensuring consistent formatting.