[Closes #183] Switch to neostandard for code formatting (#186)

* Remove prettier, use neostandard formatting * Update dependencies * npm install * Remove references to format/format:check
sfbrigade · Jan 28, 2025 · 8daa1e7 · 8daa1e7
1 parent 17ed939
commit 8daa1e7
Show file tree

Hide file tree

Showing 112 changed files with 915 additions and 1,812 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -34,10 +34,8 @@ jobs:
           cache: 'npm'
       - name: Install Dependencies
         run: npm ci
-      - name: Check Formatting
-        run: npm run format:check
       - name: Run ESLint
-        run: npm run lint --workspaces
+        run: npm run lint
       - name: Initialize database, set up .env, generate Prisma client
         run: cd server; cp example.env .env; npm run test:db:reset
         env:

diff --git a/client/.storybook/main.js b/client/.storybook/main.js
@@ -4,7 +4,7 @@ import { join, dirname } from 'path';
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value) {
+function getAbsolutePath (value) {
   return dirname(require.resolve(join(value, 'package.json')));
 }
 

diff --git a/client/eslint.config.js b/client/eslint.config.js
@@ -2,6 +2,5 @@ import neostandard from 'neostandard';
 
 export default neostandard({
   env: ['browser'],
-  noStyle: true,
   semi: true,
 });
diff --git a/client/package.json b/client/package.json
@@ -6,9 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "format": "prettier --write --ignore-unknown .",
-    "format:check": "prettier --check --ignore-unknown .",
-    "lint": "eslint . -c eslint.config.js --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint --fix",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
@@ -47,44 +45,38 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jsdoc": "^50.6.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.8.0",
     "neostandard": "^0.12.0",
-    "prettier": "^3.4.2",
     "prop-types": "^15.8.1",
     "storybook": "^8.4.7",
     "storybook-dark-mode": "^4.0.2",
     "vite": "^6.0.3"
   },
   "optionalDependencies": {
-    "@esbuild/aix-ppc64": "0.24.0",
-    "@esbuild/android-arm": "0.24.0",
-    "@esbuild/android-arm64": "0.24.0",
-    "@esbuild/android-x64": "0.24.0",
-    "@esbuild/darwin-arm64": "0.24.0",
-    "@esbuild/darwin-x64": "0.24.0",
-    "@esbuild/freebsd-arm64": "0.24.0",
-    "@esbuild/freebsd-x64": "0.24.0",
-    "@esbuild/linux-arm": "0.24.0",
-    "@esbuild/linux-arm64": "0.24.0",
-    "@esbuild/linux-ia32": "0.24.0",
-    "@esbuild/linux-loong64": "0.24.0",
-    "@esbuild/linux-mips64el": "0.24.0",
-    "@esbuild/linux-ppc64": "0.24.0",
-    "@esbuild/linux-riscv64": "0.24.0",
-    "@esbuild/linux-s390x": "0.24.0",
-    "@esbuild/linux-x64": "0.24.0",
-    "@esbuild/netbsd-x64": "0.24.0",
-    "@esbuild/openbsd-arm64": "0.24.0",
-    "@esbuild/openbsd-x64": "0.24.0",
-    "@esbuild/sunos-x64": "0.24.0",
-    "@esbuild/win32-arm64": "0.24.0",
-    "@esbuild/win32-ia32": "0.24.0",
-    "@esbuild/win32-x64": "0.24.0",
+    "@esbuild/aix-ppc64": "0.24.2",
+    "@esbuild/android-arm": "0.24.2",
+    "@esbuild/android-arm64": "0.24.2",
+    "@esbuild/android-x64": "0.24.2",
+    "@esbuild/darwin-arm64": "0.24.2",
+    "@esbuild/darwin-x64": "0.24.2",
+    "@esbuild/freebsd-arm64": "0.24.2",
+    "@esbuild/freebsd-x64": "0.24.2",
+    "@esbuild/linux-arm": "0.24.2",
+    "@esbuild/linux-arm64": "0.24.2",
+    "@esbuild/linux-ia32": "0.24.2",
+    "@esbuild/linux-loong64": "0.24.2",
+    "@esbuild/linux-mips64el": "0.24.2",
+    "@esbuild/linux-ppc64": "0.24.2",
+    "@esbuild/linux-riscv64": "0.24.2",
+    "@esbuild/linux-s390x": "0.24.2",
+    "@esbuild/linux-x64": "0.24.2",
+    "@esbuild/netbsd-arm64": "0.24.2",
+    "@esbuild/netbsd-x64": "0.24.2",
+    "@esbuild/openbsd-arm64": "0.24.2",
+    "@esbuild/openbsd-x64": "0.24.2",
+    "@esbuild/sunos-x64": "0.24.2",
+    "@esbuild/win32-arm64": "0.24.2",
+    "@esbuild/win32-ia32": "0.24.2",
+    "@esbuild/win32-x64": "0.24.2",
     "@rollup/rollup-android-arm-eabi": "4.28.0",
     "@rollup/rollup-android-arm64": "4.28.0",
     "@rollup/rollup-darwin-arm64": "4.28.0",

diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -14,7 +14,7 @@ import { useAuthorization } from './hooks/useAuthorization';
  * @param  {PropTypes.func} handleRedirects
  * @returns {React.ReactElement}
  */
-function App({ handleRedirects }) {
+function App ({ handleRedirects }) {
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -36,23 +36,25 @@ function App({ handleRedirects }) {
   useEffect(() => {
     try {
       handleRedirects(user, location, (to, options) =>
-        navigate(to, { ...options, replace: true }),
+        navigate(to, { ...options, replace: true })
       );
     } catch {
       handleLogout();
     }
   }, [handleRedirects, handleLogout, user, location, navigate]);
 
-  return isLoading ? (
-    <Center w="100vw" h="100vh">
-      <Loader />
-    </Center>
-  ) : (
-    <>
-      <Outlet />
-      <Notifications position="bottom-right" />
-    </>
-  );
+  return isLoading
+    ? (
+      <Center w='100vw' h='100vh'>
+        <Loader />
+      </Center>
+      )
+    : (
+      <>
+        <Outlet />
+        <Notifications position='bottom-right' />
+      </>
+      );
 }
 
 App.propTypes = {

diff --git a/client/src/Context.jsx b/client/src/Context.jsx
@@ -28,7 +28,7 @@ const contextProviderProps = {
  *
  * @param {PropTypes.InferProps<typeof contextProviderProps>} props
  */
-function ContextProvider({ children, initialUser }) {
+function ContextProvider ({ children, initialUser }) {
   const [user, setUser] = useState(initialUser);
 
   const contextValue = {

diff --git a/client/src/components/Sidebar/Sidebar.jsx b/client/src/components/Sidebar/Sidebar.jsx
@@ -75,13 +75,13 @@ const SidebarProps = {
  * Collapsible sidebar
  * @param {PropTypes.InferProps<typeof SidebarProps>} props
  */
-export function Sidebar({ toggleSidebar }) {
+export function Sidebar ({ toggleSidebar }) {
   const { user, handleLogout } = useAuthorization();
 
   /**
    * @param {Event} event
    */
-  async function onLogout(event) {
+  async function onLogout (event) {
     event.preventDefault();
     await handleLogout();
   }
@@ -90,25 +90,25 @@ export function Sidebar({ toggleSidebar }) {
     <>
       <Stack
         className={classes.navbar}
-        justify="space-between"
-        px="md"
-        py="xl"
-        w="100%"
-        h="100%"
+        justify='space-between'
+        px='md'
+        py='xl'
+        w='100%'
+        h='100%'
       >
         <Box>
-          <Group align="center" gap="sm" mb="lg">
+          <Group align='center' gap='sm' mb='lg'>
             <img
-              src="/logo.svg"
-              alt="SF Lifeline Logo"
-              width={'32rem'}
-              height={'32rem'}
+              src='/logo.svg'
+              alt='SF Lifeline Logo'
+              width='32rem'
+              height='32rem'
             />
             <Title order={4}>SF Life Line</Title>
           </Group>
           {sections.map((section) => (
-            <Box key={section.label} mb="lg">
-              <Title fw="normal" pl="sm" order={6}>
+            <Box key={section.label} mb='lg'>
+              <Title fw='normal' pl='sm' order={6}>
                 {section.label}
               </Title>
               {section.links?.map((link) => (
@@ -117,7 +117,7 @@ export function Sidebar({ toggleSidebar }) {
                   component={RouterNavLink}
                   to={link.href}
                   label={
-                    <Text fz="md" fw="600">
+                    <Text fz='md' fw='600'>
                       {link.label}
                     </Text>
                   }
@@ -131,21 +131,21 @@ export function Sidebar({ toggleSidebar }) {
         </Box>
         <Group
           className={classes.footer}
-          justify="space-between"
-          align="top"
-          wrap="nowrap"
+          justify='space-between'
+          align='top'
+          wrap='nowrap'
         >
-          <Box fz="sm">
+          <Box fz='sm'>
             {user && (
               <>
-                <Box fw="600">{`${user?.firstName} ${user?.lastName}`}</Box>
-                <Box c="gray.7">{user?.email}</Box>
+                <Box fw='600'>{`${user?.firstName} ${user?.lastName}`}</Box>
+                <Box c='gray.7'>{user?.email}</Box>
               </>
             )}
           </Box>
           <a
             className={classes.footer__logout}
-            href="/logout"
+            href='/logout'
             onClick={onLogout}
           >
             <FiLogOut />

diff --git a/client/src/components/UsersDataTable/DataTableMenu.jsx b/client/src/components/UsersDataTable/DataTableMenu.jsx
@@ -11,11 +11,11 @@ import {
 /**
  *
  */
-export function DataTableMenu() {
+export function DataTableMenu () {
   return (
-    <Menu shadow="md" width={200}>
+    <Menu shadow='md' width={200}>
       <Menu.Target>
-        <ActionIcon variant="default">
+        <ActionIcon variant='default'>
           <IconDotsVertical />
         </ActionIcon>
       </Menu.Target>
@@ -48,7 +48,7 @@ export function DataTableMenu() {
           Update role
         </Menu.Item>
         <Menu.Item
-          color="red"
+          color='red'
           leftSection={
             <IconTrash style={{ width: rem(14), height: rem(14) }} />
           }

diff --git a/client/src/components/UsersDataTable/UserDataTableCell.jsx b/client/src/components/UsersDataTable/UserDataTableCell.jsx
@@ -84,7 +84,7 @@ const UserRoleBadge = ({ value }) => {
   }
   return (
     <Badge color={color}>
-      <Text fw={700} tt="capitalize" size="sm">
+      <Text fw={700} tt='capitalize' size='sm'>
         {value.toLocaleLowerCase().replace('_', ' ')}
       </Text>
     </Badge>

diff --git a/client/src/components/UsersDataTable/UsersDataTable.jsx b/client/src/components/UsersDataTable/UsersDataTable.jsx
@@ -11,13 +11,13 @@ const userDataTableProps = {
   rows: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
-    }),
+    })
   ),
   headers: PropTypes.arrayOf(
     PropTypes.shape({
       key: PropTypes.string.isRequired,
       text: PropTypes.node,
-    }),
+    })
   ),
 };
 

diff --git a/client/src/hooks/useAuthorization.jsx b/client/src/hooks/useAuthorization.jsx
@@ -14,7 +14,7 @@ import Context from '../Context';
  *  handleLogout: () => Promise<void>,
  * }}
  */
-export function useAuthorization() {
+export function useAuthorization () {
   const { user, setUser } = useContext(Context);
   const [error, setError] = useState(null);
 

diff --git a/client/src/main.jsx b/client/src/main.jsx
@@ -26,5 +26,5 @@ ReactDOM.createRoot(document.getElementById('root')).render(
         </MantineProvider>
       </QueryClientProvider>
     </ContextProvider>
-  </React.StrictMode>,
+  </React.StrictMode>
 );
diff --git a/client/src/pages/auth/login/LoginForm.jsx b/client/src/pages/auth/login/LoginForm.jsx
@@ -26,7 +26,7 @@ const loginFormProps = {
  * Login page component.
  * @param {PropTypes.InferProps<typeof loginFormProps>} props
  */
-export function LoginForm({
+export function LoginForm ({
   email,
   password,
   onEmailChange,
@@ -41,47 +41,47 @@ export function LoginForm({
    *
    * @param {Event} event
    */
-  function onSubmit(event) {
+  function onSubmit (event) {
     event.preventDefault();
     onLogin();
   }
 
   return (
     <>
       <form onSubmit={onSubmit}>
-        <Container size="25rem">
+        <Container size='25rem'>
           <TextInput
             className={classes.email}
-            type="email"
-            label="Email"
-            placeholder="[email protected]"
+            type='email'
+            label='Email'
+            placeholder='[email protected]'
             value={email}
             onChange={onEmailChange}
             error={emailError}
           />
           <PasswordInput
             className={classes.password}
-            label="Password"
-            placeholder="password"
+            label='Password'
+            placeholder='password'
             value={password}
             onChange={onPasswordChange}
             visible={visible}
             onVisibilityChange={toggle}
             error={passwordError}
           />
         </Container>
-        <Container size="25rem">
+        <Container size='25rem'>
           <Button
             disabled={!email.length || !password.length}
             className={classes.loginBtn}
-            variant="filled"
+            variant='filled'
             fullWidth
-            type="submit"
+            type='submit'
           >
             Log in
           </Button>
           <div className={classes.anchor}>
-            <Anchor component={Link} to="/password/forgot">
+            <Anchor component={Link} to='/password/forgot'>
               Forgot password
             </Anchor>
           </div>

diff --git a/client/src/pages/auth/login/login.jsx b/client/src/pages/auth/login/login.jsx
@@ -11,7 +11,7 @@ import Context from '../../../Context';
 /**
  * Login page component.
  */
-function Login() {
+function Login () {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [emailError, setEmailError] = useState(null);