style: run biome

.pre-commit-config.yaml

@@ -41,10 +41,13 @@ repos:
     rev: "v0.4.7"
     hooks:
       - id: ruff
+        name: Python lint
+        files: ^api/.*\.py$
+        args: ["--fix"]
+
+      - id: ruff-format
         name: Python format
         files: ^api/.*\.py$
-        args:
-          - --fix
 
   - repo: https://github.com/biomejs/pre-commit
     rev: v0.2.0

api/pyproject.toml

@@ -67,6 +67,7 @@ src = ["src"]
 target-version = "py311"
 line-length = 119
 
+[tool.ruff.lint]
 select = [
     "E",  # pycodestyle errors
     "W",  # pycodestyle warnings
@@ -77,14 +78,12 @@ select = [
     "B",  # flake8-bugbear
     "UP", # automatically upgrade syntax for newer versions of the language
 ]
-
-
 ignore = [
     "B904",  # TODO: Within an except clause, raise exceptions with `raise ... from err` or `raise ... from None` to distinguish them from errors in exception handling
     "B008",  # do not perform function calls in argument defaults. Ignored to allow dependencies in FastAPI
 ]
 
-[tool.ruff.per-file-ignores]
+[tool.ruff.lint.per-file-ignores]
 "__init__.py" = ["E402"]  # Ignore `E402` (import violations) in all `__init__.py` files
 "src/tests/*" = ["S101"]  # Allow the use of ´assert´ in tests
 

web/biome.json

@@ -7,7 +7,6 @@
     "formatter": {
       "indentStyle": "space",
       "indentWidth": 2,
-      "jsxQuoteStyle": "single",
       "quoteStyle": "single",
       "trailingCommas": "es5",
       "lineWidth": 119,

web/src/App.tsx

@@ -1,11 +1,11 @@
-import { router } from './router'
-import { RouterProvider } from 'react-router-dom'
-import Header from './common/components/Header'
-import { AuthContext } from 'react-oauth2-code-pkce'
-import { useContext } from 'react'
 import { Button, Progress, Typography } from '@equinor/eds-core-react'
+import { useContext } from 'react'
+import { AuthContext } from 'react-oauth2-code-pkce'
+import { RouterProvider } from 'react-router-dom'
 import styled from 'styled-components'
 import { OpenAPI } from './api/generated'
+import Header from './common/components/Header'
+import { router } from './router'
 
 const hasAuthConfig = import.meta.env.VITE_AUTH === '1'
 

web/src/auth.ts

@@ -1,4 +1,4 @@
-import { TAuthConfig } from 'react-oauth2-code-pkce'
+import type { TAuthConfig } from 'react-oauth2-code-pkce'
 
 export const authConfig: TAuthConfig = {
   clientId: import.meta.env.VITE_AUTH_CLIENT_ID || '',
@@ -14,8 +14,5 @@ export const authConfig: TAuthConfig = {
       `${window.location.pathname}${window.location.search}${window.location.hash}`
     ),
   postLogin: () =>
-    window.location.replace(
-      localStorage.getItem('preLoginPath') ??
-        (import.meta.env.VITE_AUTH_REDIRECT_URI || '')
-    ),
+    window.location.replace(localStorage.getItem('preLoginPath') ?? (import.meta.env.VITE_AUTH_REDIRECT_URI || '')),
 }

web/src/common/components/Header.tsx

@@ -27,20 +27,10 @@ const Header = () => {
         <TopBar.Actions style={{ gap: 8 }}>
           <Typography>{`Logged in as ${username}`}</Typography>
           <IconButton title={'Log out'} icon={log_out} onClick={logOut} />
-          <IconButton
-            title={'Application info'}
-            icon={info_circle}
-            onClick={togglePopover}
-            ref={aboutRef}
-          />
+          <IconButton title={'Application info'} icon={info_circle} onClick={togglePopover} ref={aboutRef} />
         </TopBar.Actions>
       </TopBar>
-      <Popover
-        title={'About'}
-        isOpen={isPopoverOpen}
-        toggle={togglePopover}
-        anchor={aboutRef.current}
-      >
+      <Popover title={'About'} isOpen={isPopoverOpen} toggle={togglePopover} anchor={aboutRef.current}>
         <VersionText />
         <p>Person of contact: Eirik Ola Aksnes ([email protected])</p>
       </Popover>

web/src/common/components/IconButton.tsx

@@ -1,26 +1,24 @@
 import { Button, Icon, Tooltip } from '@equinor/eds-core-react'
-import { IconData } from '@equinor/eds-icons'
-import { forwardRef, Ref } from 'react'
+import type { IconData } from '@equinor/eds-icons'
+import { type Ref, forwardRef } from 'react'
 
 interface IconButtonProps {
   title: string
   icon: IconData
   onClick: () => Promise<void> | void
 }
 
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  function IconButton(
-    { title, icon, onClick }: IconButtonProps,
-    ref: Ref<HTMLButtonElement>
-  ) {
-    return (
-      <Tooltip title={title}>
-        <Button variant="ghost_icon" onClick={onClick} ref={ref}>
-          <Icon data={icon} size={24} title={title} />
-        </Button>
-      </Tooltip>
-    )
-  }
-)
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  { title, icon, onClick }: IconButtonProps,
+  ref: Ref<HTMLButtonElement>
+) {
+  return (
+    <Tooltip title={title}>
+      <Button variant="ghost_icon" onClick={onClick} ref={ref}>
+        <Icon data={icon} size={24} title={title} />
+      </Button>
+    </Tooltip>
+  )
+})
 
 export default IconButton

web/src/common/components/VersionText.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@equinor/eds-core-react'
-import axios, { AxiosError, AxiosResponse } from 'axios'
+import axios, { type AxiosError, type AxiosResponse } from 'axios'
 import { useEffect, useState } from 'react'
 
 type CommitInfo = {
@@ -19,15 +19,9 @@ const useCommitInfo = () => {
     const fetchVersionFile = () =>
       axios
         .get('version.txt')
-        .then((res: AxiosResponse<string>) =>
-          Object.fromEntries(
-            res.data.split('\n').map((line) => line.split(': '))
-          )
-        )
+        .then((res: AxiosResponse<string>) => Object.fromEntries(res.data.split('\n').map((line) => line.split(': '))))
         .catch((error: AxiosError) => {
-          throw new Error(
-            `Could not read version file, ${error.response?.data ?? error}`
-          )
+          throw new Error(`Could not read version file, ${error.response?.data ?? error}`)
         })
     fetchVersionFile().then((commitInfo) => setCommitInfo(commitInfo))
   }, [])
@@ -42,10 +36,7 @@ export const VersionText = () => {
     <p>
       Version:{' '}
       <>
-        <Typography
-          link
-          href={`https://github.com/equinor/template-fastapi-react/commit/${commitInfo.hash}`}
-        >
+        <Typography link href={`https://github.com/equinor/template-fastapi-react/commit/${commitInfo.hash}`}>
           {commitInfo.refs === '' ? commitInfo.hash : commitInfo.refs}
         </Typography>{' '}
         {commitInfo.date}

web/src/contexts/TodoContext.tsx

@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useReducer } from 'react'
-import { AddTodoResponse } from '../api/generated'
+import type React from 'react'
+import { createContext, useContext, useReducer } from 'react'
+import type { AddTodoResponse } from '../api/generated'
 
 /**
  * Definitions of the types of actions an user can do,
@@ -14,9 +15,7 @@ type Dispatch = (action: Action) => void
 type State = { todos: AddTodoResponse[] }
 type TodoProviderProps = { children: React.ReactNode }
 
-const TodoContext = createContext<
-  { state: State; dispatch: Dispatch } | undefined
->(undefined)
+const TodoContext = createContext<{ state: State; dispatch: Dispatch } | undefined>(undefined)
 
 function TodoProvider({ children }: TodoProviderProps) {
   const [state, dispatch] = useReducer(todoReducer, { todos: [] })
@@ -49,9 +48,7 @@ function todoReducer(state: State, action: Action) {
       return {
         ...state,
         todos: state.todos.map((todo) =>
-          todo !== action.payload
-            ? todo
-            : { ...todo, is_completed: !todo.is_completed }
+          todo !== action.payload ? todo : { ...todo, is_completed: !todo.is_completed }
         ),
       }
     }

web/src/features/todos/todo-list/TodoItem.styled.tsx

@@ -1,7 +1,6 @@
-import styled from 'styled-components'
 import { Typography } from '@equinor/eds-core-react'
+import styled from 'styled-components'
 
 export const StyledTodoItemTitle = styled(Typography)`
-  text-decoration: ${(props: { isStruckThrough?: boolean }) =>
-    props.isStruckThrough ? 'line-through' : 'none'};
+  text-decoration: ${(props: { isStruckThrough?: boolean }) => (props.isStruckThrough ? 'line-through' : 'none')};
 `

web/src/features/todos/todo-list/TodoItem.tsx

@@ -1,6 +1,6 @@
 import { Card, Typography } from '@equinor/eds-core-react'
 import { done, remove_outlined, undo } from '@equinor/eds-icons'
-import { AddTodoResponse } from '../../../api/generated'
+import type { AddTodoResponse } from '../../../api/generated'
 import IconButton from '../../../common/components/IconButton'
 import { useTodos } from '../../../contexts/TodoContext'
 import { useTodoAPI } from '../../../hooks/useTodoAPI'
@@ -20,8 +20,7 @@ const TodoItem = ({ todo }: { todo: AddTodoResponse }) => {
     dispatch({ type: 'REMOVE_TODO', payload: todo })
   }
 
-  const statusOf = (isCompleted: boolean | undefined) =>
-    isCompleted ? 'Done' : 'Todo'
+  const statusOf = (isCompleted: boolean | undefined) => (isCompleted ? 'Done' : 'Todo')
 
   return (
     <Card>
@@ -30,20 +29,14 @@ const TodoItem = ({ todo }: { todo: AddTodoResponse }) => {
           <StyledTodoItemTitle variant="h5" isStruckThrough={todo.is_completed}>
             {todo.title}
           </StyledTodoItemTitle>
-          <Typography variant="body_short">
-            {statusOf(todo.is_completed)}
-          </Typography>
+          <Typography variant="body_short">{statusOf(todo.is_completed)}</Typography>
         </Card.HeaderTitle>
         <IconButton
           title={`Mark as ${statusOf(!todo.is_completed).toLowerCase()}`}
           icon={todo.is_completed ? undo : done}
           onClick={() => toggle(todo)}
         />
-        <IconButton
-          title={'Remove'}
-          icon={remove_outlined}
-          onClick={() => remove(todo)}
-        />
+        <IconButton title={'Remove'} icon={remove_outlined} onClick={() => remove(todo)} />
       </Card.Header>
     </Card>
   )

web/src/features/todos/todo-list/TodoList.tsx

@@ -1,6 +1,6 @@
 import { Button, Input } from '@equinor/eds-core-react'
-import { ChangeEvent, FormEventHandler, useEffect, useState } from 'react'
-import { AddTodoResponse } from '../../../api/generated'
+import { type ChangeEvent, type FormEventHandler, useEffect, useState } from 'react'
+import type { AddTodoResponse } from '../../../api/generated'
 import { useTodos } from '../../../contexts/TodoContext'
 import { useTodoAPI } from '../../../hooks/useTodoAPI'
 import TodoItem from './TodoItem'
@@ -14,9 +14,7 @@ const AddItem = () => {
   const add: FormEventHandler = (event) => {
     event.preventDefault()
     if (value) {
-      addTodo(value).then((todo) =>
-        dispatch({ type: 'ADD_TODO', payload: todo })
-      )
+      addTodo(value).then((todo) => dispatch({ type: 'ADD_TODO', payload: todo }))
     }
     setValue('')
   }
@@ -29,9 +27,7 @@ const AddItem = () => {
             value={value}
             className="input"
             placeholder="Add Task"
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              setValue(e.target.value)
-            }
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
           />
           <Button className="add-button" type="submit">
             Add
@@ -47,9 +43,7 @@ const TodoList = () => {
   const { state, dispatch } = useTodos()
 
   useEffect(() => {
-    getAllTodos().then((todos) =>
-      dispatch({ type: 'INITIALIZE', payload: todos })
-    )
+    getAllTodos().then((todos) => dispatch({ type: 'INITIALIZE', payload: todos }))
   }, [dispatch, getAllTodos])
 
   return (

web/src/hooks/useTodoAPI.tsx

@@ -1,10 +1,5 @@
 import { useCallback } from 'react'
-import {
-  AddTodoResponse,
-  ApiError,
-  ErrorResponse,
-  TodosService,
-} from '../api/generated'
+import { type AddTodoResponse, ApiError, type ErrorResponse, TodosService } from '../api/generated'
 
 export function useTodoAPI() {
   const addTodo = useCallback(async (title: string) => {

web/src/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App'
-import { authConfig } from './auth'
 import { AuthProvider } from 'react-oauth2-code-pkce'
+import App from './App'
 import { OpenAPI } from './api/generated'
+import { authConfig } from './auth'
 
 const hasAuthConfig = import.meta.env.VITE_AUTH === '1'
 

web/src/router.tsx

@@ -1,6 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom'
-import { TodoListPage } from './pages/TodoListPage'
 import InvalidUrl from './common/components/InvalidUrl'
+import { TodoListPage } from './pages/TodoListPage'
 
 export const router = createBrowserRouter([
   {