M2-4835: Change bracketSameLine to false based on admin feedback

.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
  arrowParens: 'always',
- bracketSameLine: true,
+ bracketSameLine: false,
  bracketSpacing: true,
  singleQuote: true,
  jsxSingleQuote: false,

src/entities/activity/ui/ActivityCardItem.tsx

@@ -47,14 +47,16 @@ export const ActivityCardItem = ({
  <CardItem
  markdown={questionText}
  watermark={watermark}
- isOptional={!isOptionalFlagHidden && (item.config.skippableItem || allowToSkipAllItems)}>
+ isOptional={!isOptionalFlagHidden && (item.config.skippableItem || allowToSkipAllItems)}
+ >
  <ItemPicker item={item} onValueChange={onValueChange} isDisabled={false} replaceText={replaceText} />
  </CardItem>
  {hasAdditionalResponse(item) && (
  <CardItem
  markdown={t('additional.additional_text')}
  watermark={watermark}
- isOptional={!requiresAdditionalResponse(item)}>
+ isOptional={!requiresAdditionalResponse(item)}
+ >
  <AdditionalTextResponse value={item.additionalText || ''} onValueChange={onItemAdditionalTextChange} />
  </CardItem>
  )}

src/entities/activity/ui/ItemCardButtons.tsx

@@ -33,7 +33,8 @@ export const ItemCardButton = ({
  alignItems="center"
  margin="0 auto"
  padding={greaterThanSM ? '0px 24px' : '0px 16px'}
- maxWidth="900px">
+ maxWidth="900px"
+ >
  {(isBackShown && (
  <Box width={greaterThanSM ? '200px' : '120px'} data-testid="assessment-back-button">
  <BaseButton

src/features/ForgotPassword/ui/ForgotPasswordForm.tsx

@@ -45,7 +45,8 @@ export const ForgotPasswordForm = () => {
  type="submit"
  variant="contained"
  disabled={isLoading}
- sx={{ borderRadius: '100px', maxWidth: '400px', width: '100%', padding: '10px 24px' }}>
+ sx={{ borderRadius: '100px', maxWidth: '400px', width: '100%', padding: '10px 24px' }}
+ >
  {isLoading ? (
  <CircularProgress size={25} sx={{ color: Theme.colors.light.onPrimary }} />
  ) : (
@@ -56,7 +57,8 @@ export const ForgotPasswordForm = () => {
  fontStyle="normal"
  lineHeight="20px"
  letterSpacing="0.1px"
- textTransform="none">
+ textTransform="none"
+ >
  {t('button')}
  </Typography>
  )}

src/features/InvitationAccept/ui/InvitationAcceptButton.tsx

@@ -35,7 +35,8 @@ export const InvitationAcceptButton = ({ invitationKey }: InvitationAcceptButton
  color="success"
  onClick={onInviteAccept}
  isLoading={isAcceptLoading}
- text={t('buttons.acceptInvitation')}></BaseButton>
+ text={t('buttons.acceptInvitation')}
+ ></BaseButton>
  </Box>
  );
 };

src/features/InvitationDecline/ui/InvitationDeclineButton.tsx

@@ -34,7 +34,8 @@ export const InvitationDeclineButton = ({ invitationKey }: InvitationDeclineButt
  color="error"
  onClick={onInviteDecline}
  isLoading={isDeclineLoading}
- text={t('buttons.declineInvitation')}></BaseButton>
+ text={t('buttons.declineInvitation')}
+ ></BaseButton>
  </Box>
  );
 };

src/features/Login/ui/LoginForm.tsx

@@ -85,7 +85,8 @@ export const LoginForm = ({ locationState }: LoginFormProps) => {
  fontStyle="normal"
  lineHeight="20px"
  letterSpacing="0.1px"
- sx={{ textDecoration: 'underline' }}>
+ sx={{ textDecoration: 'underline' }}
+ >
  {t('forgotPassword')}
  </Typography>
  </Link>

src/features/SaveAssessmentAndExit/index.tsx

@@ -22,7 +22,8 @@ export const SaveAndExitButton = ({ onClick }: Props) => {
  '&:hover': { backgroundColor: Theme.colors.light.primary008 },
  '&:focus': { backgroundColor: Theme.colors.light.primary012 },
  '&:active': { backgroundColor: Theme.colors.light.primary012 },
- }}>
+ }}
+ >
  <Text variant="body1" color={Theme.colors.light.primary} fontSize="16px">
  {t('save_and_exit')}
  </Text>

src/features/TransferOwnershipAccept/ui/TransferOwnershipAccept.tsx

@@ -42,7 +42,8 @@ export const TransferOwnershipAccept = ({ appletId, keyParam }: TransferOwnershi
  justifyContent="center"
  alignItems="center"
  textAlign="center"
- data-testid="transfer-ownership-accepted">
+ data-testid="transfer-ownership-accepted"
+ >
  <Typography variant="body1" fontSize="30px" margin="16px 0px" data-testid="transfer-ownership-accepted-title">
  {t('accepted.title')}
  </Typography>

src/features/TransferOwnershipDecline/ui/TransfetOwnershipDecline.tsx

@@ -40,7 +40,8 @@ export const TransferOwnershipDecline = ({ appletId, keyParam }: TransferOwnersh
  justifyContent="center"
  alignItems="center"
  textAlign="center"
- data-testid="transfer-ownership-declined">
+ data-testid="transfer-ownership-declined"
+ >
  <Typography variant="body1" fontSize="30px" margin="16px 0px" data-testid="transfer-ownership-declined-title">
  {t('declined.title')}
  </Typography>

src/pages/Login/index.tsx

@@ -33,7 +33,8 @@ function LoginPage() {
  fontStyle="normal"
  fontWeight={700}
  lineHeight="28px"
- marginBottom="24px">
+ marginBottom="24px"
+ >
  {t('title')}
  </Typography>
 
@@ -48,7 +49,8 @@ function LoginPage() {
  fontWeight={400}
  fontStyle="normal"
  lineHeight="20px"
- letterSpacing="0.1px">
+ letterSpacing="0.1px"
+ >
  {t('or')},
  </Typography>
  &nbsp;
@@ -60,7 +62,8 @@ function LoginPage() {
  fontStyle="normal"
  lineHeight="20px"
  letterSpacing="0.1px"
- sx={{ textDecoration: 'underline' }}>
+ sx={{ textDecoration: 'underline' }}
+ >
  <Link to={ROUTES.signup.path} relative="path" onClick={onCreateAccountClick}>
  {t('create')}
  </Link>

src/pages/Signup/index.tsx

@@ -27,7 +27,8 @@ function SignupPage() {
  fontStyle="normal"
  fontWeight={700}
  lineHeight="28px"
- marginBottom="24px">
+ marginBottom="24px"
+ >
  {t('title')}
  </Typography>
 
@@ -42,7 +43,8 @@ function SignupPage() {
  fontWeight={400}
  fontStyle="normal"
  lineHeight="20px"
- letterSpacing="0.1px">
+ letterSpacing="0.1px"
+ >
  {t('or')},
  </Typography>
  &nbsp;
@@ -54,7 +56,8 @@ function SignupPage() {
  fontStyle="normal"
  lineHeight="20px"
  letterSpacing="0.1px"
- sx={{ textDecoration: 'underline' }}>
+ sx={{ textDecoration: 'underline' }}
+ >
  <Link to={ROUTES.login.path} relative="path">
  {t('logIn')}
  </Link>

src/shared/ui/BaseButton/index.tsx

@@ -38,7 +38,8 @@ const ButtonTextComponent = (props: ButtonTextComponentProps): JSX.Element => {
  fontStyle="normal"
  lineHeight="20px"
  letterSpacing="0.1px"
- textTransform="none">
+ textTransform="none"
+ >
  {props.text}
  </Typography>
  );
@@ -64,7 +65,8 @@ export const BaseButton = forwardRef<HTMLButtonElement, Props>((props, ref) => {
  border: `1px solid ${props.borderColor}`,
  },
  ...props.sx,
- }}>
+ }}
+ >
  {props.isLoading ? (
  <CircularProgress size={25} sx={{ color: Theme.colors.light.primary }} />
  ) : (

src/shared/ui/BootstrapModal/index.tsx

@@ -49,7 +49,8 @@ export const BootstrapModal = (props: Props) => {
  '& .MuiDialogActions-root': {
  padding: 1,
  },
- }}>
+ }}
+ >
  {title && (
  <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
  {title}
@@ -63,7 +64,8 @@ export const BootstrapModal = (props: Props) => {
  right: 8,
  top: 8,
  color: (theme) => theme.palette.grey[500],
- }}>
+ }}
+ >
  <CloseIcon />
  </IconButton>
  {label && (

src/shared/ui/Card/index.tsx

@@ -26,7 +26,8 @@ export const CustomCard = ({ id, title, description, imageSrc, onClick }: CardPr
  margin: '20px',
  cursor: 'pointer',
  boxShadow: '0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)',
- }}>
+ }}
+ >
  <Box width={280} height={280} data-testid="custom-card-media-block">
  {imageSrc ? (
  <CardMedia
@@ -47,7 +48,8 @@ export const CustomCard = ({ id, title, description, imageSrc, onClick }: CardPr
  height={280}
  color="white"
  data-testid="custom-card-image-replacement"
- bgcolor="rgb(119, 119, 119)">
+ bgcolor="rgb(119, 119, 119)"
+ >
  {getFirstLetters(title)}
  </Box>
  )}
@@ -58,7 +60,8 @@ export const CustomCard = ({ id, title, description, imageSrc, onClick }: CardPr
  component="div"
  fontSize="20px"
  sx={{ '&:hover': { textDecoration: 'underline' } }}
- data-testid="custom-card-title">
+ data-testid="custom-card-title"
+ >
  {title}
  </Typography>
  <Typography variant="body2" color="text.secondary" data-testid="custom-card-description">

src/shared/ui/CardItem/CardItem.tsx

@@ -30,15 +30,17 @@ export const CardItem = ({ children, markdown, isOptional }: CardItemProps) => {
  padding={greaterThanSM ? '72px 48px' : '36px 16px'}
  flexDirection="column"
  gap="48px"
- sx={{ fontFamily: 'Atkinson', fontWeight: '400', fontSize: '18px', lineHeight: '28px' }}>
+ sx={{ fontFamily: 'Atkinson', fontWeight: '400', fontSize: '18px', lineHeight: '28px' }}
+ >
  <Box>
  <Markdown markdown={markdown} />
  {isOptional && (
  <Typography
  variant="body1"
  color={Theme.colors.light.outline}
  data-testid={'optional-item-label'}
- sx={{ fontFamily: 'Atkinson', fontWeight: '400', fontSize: '18px', lineHeight: '28px' }}>
+ sx={{ fontFamily: 'Atkinson', fontWeight: '400', fontSize: '18px', lineHeight: '28px' }}
+ >
  {`(${t('optional')})`}
  </Typography>
  )}

src/shared/ui/Dropdown/ui/index.tsx

@@ -37,7 +37,8 @@ const BaseDropdown = ({ title, options, beforeIndexDivider }: BaseDropdownProps)
  disableElevation
  sx={{ textTransform: 'none', fontSize: '16px' }}
  onClick={handleClick}
- endIcon={<KeyboardArrowDownIcon />}>
+ endIcon={<KeyboardArrowDownIcon />}
+ >
  {title}
  </Button>
 
@@ -64,7 +65,8 @@ const BaseDropdown = ({ title, options, beforeIndexDivider }: BaseDropdownProps)
  marginTop: 1,
  minWidth: 180,
  },
- }}>
+ }}
+ >
  {options.map((option, index) => {
  const beforeThisElement = index === beforeIndexDivider;
 

src/shared/ui/Items/AudioPlayer/ui/AudioPlayerBase.tsx

@@ -62,7 +62,8 @@ export const AudioPlayerItemBase = ({ src, playOnce }: Props) => {
  display="flex"
  alignItems="center"
  gap={mediaQuery.lessThanSM ? 0.5 : 1}
- sx={{ padding: mediaQuery.lessThanSM ? '6px 12px' : '12px', borderRadius: '50px', backgroundColor: '#F0F3F4' }}>
+ sx={{ padding: mediaQuery.lessThanSM ? '6px 12px' : '12px', borderRadius: '50px', backgroundColor: '#F0F3F4' }}
+ >
  <AudioPlayerControls
  isPlaying={isPlaying}
  onClick={isPlaying ? onHandlePause : play}

src/shared/ui/Items/AudioPlayer/ui/AudioPlayerDuration.tsx

@@ -21,7 +21,8 @@ export const AudioPlayerDuration = ({ currentDuration, totalDuration }: Props) =
  <Text
  variant="body1"
  fontSize={fontSize}
- sx={{ cursor: 'default' }}>{`${currentDuration} / ${totalDuration}`}</Text>
+ sx={{ cursor: 'default' }}
+ >{`${currentDuration} / ${totalDuration}`}</Text>
  </Box>
  );
 };

src/shared/ui/Items/Checkbox/BaseCheckboxActiveIcon.tsx

@@ -34,6 +34,7 @@ export const BaseCheckboxActiveIcon = () => {
  'input:hover ~ &': {
  backgroundColor: Theme.colors.light.primary,
  },
- }}></Box>
+ }}
+ ></Box>
  );
 };

src/shared/ui/Items/Checkbox/BaseCheckboxIcon.tsx

@@ -19,6 +19,7 @@ export const BaseCheckboxIcon = () => {
  boxShadow: 'none',
  background: 'rgba(206,217,224,.5)',
  },
- }}></Box>
+ }}
+ ></Box>
  );
 };

src/shared/ui/Items/Radio/BaseRadioActiveIcon.tsx

@@ -30,6 +30,7 @@ export const BaseRadioActiveIcon = () => {
  'input:hover ~ &': {
  backgroundColor: Theme.colors.light.primary,
  },
- }}></Box>
+ }}
+ ></Box>
  );
 };

src/shared/ui/Items/Radio/BaseRadioIcon.tsx

@@ -19,6 +19,7 @@ export const BaseRadioIcon = () => {
  boxShadow: 'none',
  background: 'rgba(206,217,224,.5)',
  },
- }}></Box>
+ }}
+ ></Box>
  );
 };

src/shared/ui/Items/SelectBase/SelectBaseBox.tsx

@@ -41,7 +41,8 @@ export const SelectBaseBox = (props: Props) => {
  '&:active': {
  background: activeBackgroundColor,
  },
- }}>
+ }}
+ >
  {props.children}
  </Box>
  );

src/shared/ui/Items/SelectBase/SelectBaseText.tsx

@@ -17,7 +17,8 @@ export const SelectBaseText = (props: Props) => {
  fontWeight={400}
  lineHeight="28px"
  data-testid="select-text"
- sx={{ cursor: 'pointer' }}>
+ sx={{ cursor: 'pointer' }}
+ >
  {props.text}
  </Typography>
  );

src/shared/ui/Items/Selector/index.tsx

@@ -24,7 +24,8 @@ export const SelectorItem = ({ value, onValueChange, valueLabelList, disabled }:
  labelId="select-with-label"
  value={value ?? ''}
  label={defaultValue}
- onChange={(e) => onValueChange(e.target.value)}>
+ onChange={(e) => onValueChange(e.target.value)}
+ >
  {valueLabelList.map((item) => {
  return (
  <MenuItem key={item.value} value={item.value}>

src/shared/ui/Items/Splash/index.tsx

@@ -12,7 +12,8 @@ export const SplashScreenItem = ({ imageSrc }: SplashScreenItemProps) => {
  alignItems="center"
  width="90%"
  margin="auto"
- data-testid="splash-screen-item">
+ data-testid="splash-screen-item"
+ >
  <img src={imageSrc} style={{ maxWidth: '100%' }} />
  </Box>
  );