Organize props alphabetically

packages/app/src/App.tsx

@@ -25,10 +25,10 @@ export default function App(): JSX.Element {
           <Routes>
             <Route path={'/'} element={<Version />} />;
             <Route element={<PatientProvider />}>
-              <Route path={'/registration'} element={<ProviderRegistration />} />;
               <Route path={'/checkin'} element={<PatientCheckIn />} />;
               <Route path={'/checkin-permission'} element={<CheckInPermission />} />;
               <Route path={'/post-call'} element={<PostCall />} />;
+              <Route path={'/registration'} element={<ProviderRegistration />} />;
               <Route path={'/waiting-room'} element={<WaitingRoom />} />;
             </Route>
             <Route path={'/dashboard'} element={<ProviderDashboard />} />;

packages/app/src/OttEHRThemeProvider.tsx

@@ -51,76 +51,76 @@ export const typography: TypographyOptions = {
   fontFamily: textFonts.join(','),
   fontWeightMedium: 600,
   h1: {
+    fontFamily: headerFonts.join(','),
     fontSize: 34,
     fontWeight: '500 !important',
-    fontFamily: headerFonts.join(','),
     lineHeight: '140%',
   },
   h2: {
+    fontFamily: headerFonts.join(','),
     fontSize: 26,
     fontWeight: '500 !important',
-    fontFamily: headerFonts.join(','),
     lineHeight: '140%',
   },
   h3: {
+    fontFamily: headerFonts.join(','),
     fontSize: 20,
     fontWeight: '600 !important',
-    fontFamily: headerFonts.join(','),
     lineHeight: '140%',
   },
   h4: {
+    fontFamily: headerFonts.join(','),
     fontSize: 34,
     fontWeight: '500 !important',
-    fontFamily: headerFonts.join(','),
     lineHeight: '140%',
   },
   h5: {
+    fontFamily: headerFonts.join(','),
     fontSize: 24,
     fontWeight: '500 !important',
-    fontFamily: headerFonts.join(','),
     lineHeight: '140%',
   },
   h6: {
+    fontFamily: headerFonts.join(','),
     fontSize: 16,
     fontWeight: '500 !important',
-    fontFamily: headerFonts.join(','),
     lineHeight: '140%',
   },
   subtitle1: {
+    fontFamily: textFonts.join(','),
     fontSize: 16,
     fontWeight: 700,
-    fontFamily: textFonts.join(','),
     lineHeight: '140%',
   },
   subtitle2: {
+    fontFamily: textFonts.join(','),
     fontSize: 14,
     fontWeight: 600,
-    fontFamily: textFonts.join(','),
     lineHeight: '140%',
   },
   body1: {
+    fontFamily: textFonts.join(','),
     fontSize: 16,
     fontWeight: 400,
-    fontFamily: textFonts.join(','),
     lineHeight: '140%',
   },
   body2: {
+    fontFamily: textFonts.join(','),
     fontSize: 14,
     fontWeight: 400,
-    fontFamily: textFonts.join(','),
     lineHeight: '140%',
   },
   button: {},
   caption: {
+    fontFamily: textFonts.join(','),
     fontSize: 14,
     fontWeight: 400,
-    fontFamily: textFonts.join(','),
     lineHeight: '140%',
   },
   overline: {
+    fontFamily: textFonts.join(','),
     fontSize: 16,
     fontWeight: 700,
-    fontFamily: textFonts.join(','),
     lineHeight: '140%',
   },
 };
@@ -137,19 +137,19 @@ declare module '@mui/material/styles' {
 const { palette: p } = createTheme(); // TODO: once https://github.com/mui/material-ui/issues/17410 is resolved, export directly from mui
 export const palette = {
   text: {
+    disabled: '#C3C9D2',
+    light: '#323F53DE',
     primary: '#212130',
     secondary: '#4F4F4F',
-    light: '#323F53DE',
-    disabled: '#C3C9D2',
   },
   primary: {
-    main: '#2896C6',
     contrast: '#FFFFFF',
     light: '#4AC0F2',
+    main: '#2896C6',
   },
   secondary: {
-    main: '#301367',
     contrast: '#FFFFFF',
+    main: '#301367',
   },
   tertiary: p.augmentColor({ color: { main: '#ECE4FB' } }),
   step: {
@@ -169,11 +169,11 @@ export const palette = {
   },
   action: {
     active: 'rgba(0, 0, 0, 0.54)',
-    hover: 'rgba(0, 0, 0, 0.04)',
-    selected: 'rgba(0, 0, 0, 0.08)',
     disabled: 'rgba(0, 0, 0, 0.26)',
     disabledBackground: 'rgba(0, 0, 0, 0.12)',
     focus: 'rgba(0, 0, 0, 0.12)',
+    hover: 'rgba(0, 0, 0, 0.04)',
+    selected: 'rgba(0, 0, 0, 0.08)',
   },
   background: {
     default: '#FFFFFF',
@@ -186,11 +186,11 @@ export const components: Components = {
   MuiButton: {
     styleOverrides: {
       root: {
+        fontFamily: textFonts.join(','),
         fontSize: 14,
         fontWeight: 600,
-        fontFamily: textFonts.join(','),
-        textTransform: 'uppercase',
         lineHeight: '140%',
+        textTransform: 'uppercase',
         '&:not($sizeLarge):not($sizeSmall) $label': {
           fontSize: 16,
         },
@@ -212,12 +212,12 @@ export const components: Components = {
       root: {
         '&.MuiPickersDay-root': {
           fontSize: 16,
-          '&.MuiPickersDay-today': {
-            borderColor: palette.secondary.main,
-          },
           '&.Mui-selected': {
             backgroundColor: palette.secondary.main,
           },
+          '&.MuiPickersDay-today': {
+            borderColor: palette.secondary.main,
+          },
         },
       },
     },
@@ -263,8 +263,8 @@ export const components: Components = {
   MuiTab: {
     styleOverrides: {
       root: {
-        textTransform: 'capitalize',
         fontSize: 16,
+        textTransform: 'capitalize',
       },
     },
   },
@@ -280,8 +280,8 @@ export const components: Components = {
     styleOverrides: {
       root: {
         '&.MuiDayPicker-weekDayLabel': {
-          fontSize: 16,
           color: otherColors.scheduleBorder,
+          fontSize: 16,
         },
         '&.PrivatePickersMonth-root:disabled': {
           color: palette.text.disabled,
@@ -297,10 +297,10 @@ interface OttEHRThemeProviderProps {
 
 export const OttEHRThemeProvider: FC<OttEHRThemeProviderProps> = ({ children }) => {
   const theme = createTheme({
-    palette: palette,
+    breakpoints: breakpoints,
     components: components,
     direction: 'ltr',
-    breakpoints: breakpoints,
+    palette: palette,
     typography: typography,
   });
 

packages/app/src/api/BaseClient.ts

@@ -1,20 +1,20 @@
 export interface ClientConfig {
+  readonly accessToken?: string;
   readonly apiUrl?: string;
   readonly projectId?: string;
-  readonly accessToken?: string;
 }
 
 export abstract class BaseClient {
+  readonly accessToken?: string;
   readonly apiUrl: string;
   readonly projectId?: string;
-  readonly accessToken?: string;
 
   constructor(config: ClientConfig) {
     if (!config.apiUrl) {
       throw new Error('apiUrl is required');
     }
+    this.accessToken = config.accessToken;
     this.apiUrl = config.apiUrl;
     this.projectId = config.projectId;
-    this.accessToken = config.accessToken;
   }
 }

packages/app/src/api/zapehrApi.ts

@@ -1,14 +1,14 @@
-import { apiErrorToThrow } from './apiErrorToThrow';
 import { ZambdaClient } from '@zapehr/sdk';
+import { apiErrorToThrow } from './apiErrorToThrow';
 
 export interface ZapehrSearchParameter {
   key: string;
   value: string;
 }
 
 const CHECK_IN_ZAMBDA_ID = import.meta.env.VITE_CHECK_IN_ZAMBDA_ID;
-const GET_PATIENTS_ZAMBDA_ID = import.meta.env.VITE_GET_PATIENTS_ZAMBDA_ID;
 const GET_APPOINTMENTS_ZAMBDA_ID = import.meta.env.VITE_GET_APPOINTMENTS_ZAMBDA_ID;
+const GET_PATIENTS_ZAMBDA_ID = import.meta.env.VITE_GET_PATIENTS_ZAMBDA_ID;
 
 class API {
   async checkIn(zambdaClient: ZambdaClient, appointmentId: string): Promise<any> {

packages/app/src/components/BoldPrimaryInputLabel.tsx

@@ -1,8 +1,8 @@
 import { InputLabel, styled } from '@mui/material';
 
 export const BoldPrimaryInputLabel = styled(InputLabel)(({ theme }) => ({
-  fontWeight: 700,
+  color: theme.palette.secondary.main,
   fontSize: 16,
+  fontWeight: 700,
   transform: 'translate(0, -9px) scale(1)',
-  color: theme.palette.secondary.main,
 }));

packages/app/src/components/CardComponent.tsx

@@ -5,20 +5,20 @@ import { otherColors } from '../OttEHRThemeProvider';
 
 interface CardComponentProps {
   name: string;
-  previewUrl: string;
   objectName: string;
-  setPreviewUrl: (previewUrl: string | null) => void;
-  setFileUrl: (fileUrl: string | undefined) => void;
   onClear: () => void;
+  previewUrl: string;
+  setFileUrl: (fileUrl: string | undefined) => void;
+  setPreviewUrl: (previewUrl: string | null) => void;
 }
 
 export const CardComponent: FC<CardComponentProps> = ({
   name,
-  previewUrl,
   objectName,
-  setPreviewUrl,
-  setFileUrl,
   onClear,
+  previewUrl,
+  setFileUrl,
+  setPreviewUrl,
 }): JSX.Element => {
   const theme = useTheme();
   const { setValue } = useFormContext();
@@ -27,26 +27,26 @@ export const CardComponent: FC<CardComponentProps> = ({
     <Box sx={{ mb: 2 }}>
       <Box
         sx={{
-          height: 260,
           border: `1px dashed ${theme.palette.primary.main}`,
           borderRadius: 2,
+          height: 260,
         }}
       >
-        <img src={previewUrl} alt={objectName} width="100%" height="260" style={{ objectFit: 'contain' }} />
+        <img alt={objectName} height="260" src={previewUrl} style={{ objectFit: 'contain' }} width="100%" />
       </Box>
       <Button
-        variant="text"
         onClick={() => {
-          setValue(name, '');
-          setPreviewUrl(null);
           setFileUrl(undefined);
+          setPreviewUrl(null);
+          setValue(name, '');
           onClear();
         }}
+        variant="text"
         sx={{
           color: otherColors.clearImage,
           justifyContent: 'start',
-          px: 0,
           mt: 2,
+          px: 0,
           '&:hover': { backgroundColor: 'transparent' },
         }}
       >

packages/app/src/components/CardWithDescription.tsx

@@ -2,35 +2,35 @@ import { Box, Card, Grid, Typography, useTheme } from '@mui/material';
 import { FC } from 'react';
 
 interface CardWithDescriptionProps {
+  bgColor: string;
+  descText: string;
   icon: string;
   iconAlt: string;
   iconHeight: string;
   mainText: string;
-  descText: string;
-  bgColor: string;
 }
 
 export const CardWithDescription: FC<CardWithDescriptionProps> = ({
+  bgColor,
+  descText,
   icon,
   iconAlt,
   iconHeight,
   mainText,
-  descText,
-  bgColor,
 }) => {
   const theme = useTheme();
   return (
-    <Card sx={{ mt: 2, borderRadius: 2, backgroundColor: bgColor, [theme.breakpoints.down('md')]: { mx: 2 } }}>
+    <Card sx={{ backgroundColor: bgColor, borderRadius: 2, mt: 2, [theme.breakpoints.down('md')]: { mx: 2 } }}>
       <Box sx={{ m: 0, px: { xs: 3, md: 5 }, py: 2 }}>
-        <Grid container direction="row" alignItems="center">
-          <Grid item xs={12} md={2} textAlign={{ xs: 'center', md: 'start' }} sx={{ marginTop: '0 !important' }}>
-            <img src={icon} alt={iconAlt} height={iconHeight} />
+        <Grid alignItems="center" container direction="row">
+          <Grid item textAlign={{ xs: 'center', md: 'start' }} xs={12} md={2} sx={{ mt: '0 !important' }}>
+            <img alt={iconAlt} height={iconHeight} src={icon} />
           </Grid>
-          <Grid item xs={12} md={8} textAlign={{ xs: 'center', md: 'start' }} sx={{ marginTop: '0 !important' }}>
-            <Typography sx={{ fontSize: '16px', fontWeight: '700' }} color={theme.palette.secondary.main}>
+          <Grid item textAlign={{ xs: 'center', md: 'start' }} xs={12} md={8} sx={{ mt: '0 !important' }}>
+            <Typography color={theme.palette.secondary.main} sx={{ fontSize: '16px', fontWeight: '700' }}>
               {mainText}
             </Typography>
-            <Typography sx={{ fontSize: '16px' }} color={theme.palette.secondary.main}>
+            <Typography color={theme.palette.secondary.main} sx={{ fontSize: '16px' }}>
               {descText}
             </Typography>
           </Grid>