Merge pull request #831 from GetStream/update-prettier-width

Update prettier print width

Author: DanC5

.eslintrc.json

@@ -52,10 +52,7 @@
     "react/prop-types": 0,
     "require-await": 2,
     "semi": [1, "always"],
-    "sort-destructure-keys/sort-destructure-keys": [
-      2,
-      { "caseSensitive": false }
-    ],
+    "sort-destructure-keys/sort-destructure-keys": [2, { "caseSensitive": false }],
     "sort-imports": [
       "error",
       {
@@ -66,11 +63,7 @@
         "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
       }
     ],
-    "sort-keys": [
-      "error",
-      "asc",
-      { "caseSensitive": false, "minKeys": 2, "natural": false }
-    ],
+    "sort-keys": ["error", "asc", { "caseSensitive": false, "minKeys": 2, "natural": false }],
     "valid-typeof": 2,
     "import/prefer-default-export": 0,
     "import/extensions": [0],
@@ -198,10 +191,7 @@
         "react/prop-types": 0,
         "require-await": 2,
         "semi": [1, "always"],
-        "sort-destructure-keys/sort-destructure-keys": [
-          2,
-          { "caseSensitive": false }
-        ],
+        "sort-destructure-keys/sort-destructure-keys": [2, { "caseSensitive": false }],
         "sort-imports": [
           "error",
           {
@@ -212,11 +202,7 @@
             "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
           }
         ],
-        "sort-keys": [
-          "error",
-          "asc",
-          { "caseSensitive": false, "minKeys": 2, "natural": false }
-        ],
+        "sort-keys": ["error", "asc", { "caseSensitive": false, "minKeys": 2, "natural": false }],
         "typescript-sort-keys/interface": [
           "error",
           "asc",

.prettierrc

@@ -1,6 +1,7 @@
 {
   "arrowParens": "always",
   "jsxSingleQuote": true,
+  "printWidth": 100,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all"

emojiMartDataParser.js

@@ -24,7 +24,4 @@ Object.keys(dataSet.emojis).map(removeSkinTonesInfo);
 
 const newDataSetJson = JSON.stringify(dataSet);
 
-fs.writeFileSync(
-  path.join(__dirname, 'src', 'stream-emoji.json'),
-  newDataSetJson,
-);
+fs.writeFileSync(path.join(__dirname, 'src', 'stream-emoji.json'), newDataSetJson);

examples/typescript-app/src/serviceWorker.ts

@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
-    ),
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
 );
 
 type Config = {
@@ -127,9 +125,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.',
-      );
+      console.log('No internet connection found. App is running in offline mode.');
     });
 }
 

scripts/validate-translations.js

@@ -17,10 +17,7 @@ fs.readdir(directoryPath, function (err, files) {
     keys.forEach((key) => {
       if (!data[key] || data[key] === '') {
         countMissingTranslations = countMissingTranslations + 1;
-        console.error(
-          '\\033[91m',
-          'Missing translation for key "' + key + '" in "' + file + '"',
-        );
+        console.error('\\033[91m', 'Missing translation for key "' + key + '" in "' + file + '"');
       }
     });
   });

src/components/Attachment/Attachment.tsx

@@ -7,10 +7,7 @@ import {
 } from './AttachmentActions';
 import { AudioProps, Audio as DefaultAudio } from './Audio';
 import { CardProps, Card as DefaultCard } from './Card';
-import {
-  FileAttachment as DefaultFile,
-  FileAttachmentProps,
-} from './FileAttachment';
+import { FileAttachment as DefaultFile, FileAttachmentProps } from './FileAttachment';
 import {
   isAudioAttachment,
   isFileAttachment,
@@ -38,9 +35,7 @@ import type { ActionHandlerReturnType } from '../Message';
 
 import type { DefaultAttachmentType } from '../../../types/types';
 
-export type AttachmentProps<
-  At extends DefaultAttachmentType = DefaultAttachmentType
-> = {
+export type AttachmentProps<At extends DefaultAttachmentType = DefaultAttachmentType> = {
   /**
    * The attachment to render.
    * See [Attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript)
@@ -93,13 +88,7 @@ export type DefaultAttachmentProps<
 > = Required<
   Pick<
     InnerAttachmentUIComponentProps,
-    | 'AttachmentActions'
-    | 'Audio'
-    | 'Card'
-    | 'File'
-    | 'Gallery'
-    | 'Image'
-    | 'Media'
+    'AttachmentActions' | 'Audio' | 'Card' | 'File' | 'Gallery' | 'Image' | 'Media'
   >
 > & {
   attachment: ExtendedAttachment<At>;
@@ -137,9 +126,7 @@ export type InnerAttachmentUIComponentProps<
  *
  * @example ./Attachment.md
  */
-export const Attachment = <
-  At extends DefaultAttachmentType = DefaultAttachmentType
->(
+export const Attachment = <At extends DefaultAttachmentType = DefaultAttachmentType>(
   props: AttachmentProps<At>,
 ) => {
   const {
@@ -157,8 +144,7 @@ export const Attachment = <
   const gallery = {
     images: attachments?.filter(
       (attachment) =>
-        attachment.type === 'image' &&
-        !(attachment.og_scrape_url || attachment.title_link),
+        attachment.type === 'image' && !(attachment.og_scrape_url || attachment.title_link),
     ),
     type: 'gallery',
   };
@@ -169,10 +155,7 @@ export const Attachment = <
     newAttachments = [
       ...attachments.filter(
         (attachment) =>
-          !(
-            attachment.type === 'image' &&
-            !(attachment.og_scrape_url || attachment.title_link)
-          ),
+          !(attachment.type === 'image' && !(attachment.og_scrape_url || attachment.title_link)),
       ),
       gallery,
     ];

src/components/Attachment/AttachmentActions.tsx

@@ -17,9 +17,7 @@ export type AttachmentActionsProps = {
   ) => void;
 };
 
-const UnMemoizedAttachmentActions: React.FC<AttachmentActionsProps> = (
-  props,
-) => {
+const UnMemoizedAttachmentActions: React.FC<AttachmentActionsProps> = (props) => {
   const { actionHandler, actions, id, text } = props;
 
   const handleActionClick = (
@@ -42,9 +40,7 @@ const UnMemoizedAttachmentActions: React.FC<AttachmentActionsProps> = (
             data-testid={`${action.name}`}
             data-value={action.value}
             key={`${id}-${action.value}`}
-            onClick={(event) =>
-              handleActionClick(event, action.name, action.value)
-            }
+            onClick={(event) => handleActionClick(event, action.name, action.value)}
           >
             {action.text}
           </button>

src/components/Attachment/Audio.tsx

@@ -8,15 +8,11 @@ const progressUpdateInterval = 500;
 /**
  * Audio attachment with play/pause button and progress bar
  */
-export type AudioProps<
-  At extends DefaultAttachmentType = DefaultAttachmentType
-> = {
+export type AudioProps<At extends DefaultAttachmentType = DefaultAttachmentType> = {
   og: Attachment<At>;
 };
 
-const UnMemoizedAudio = <
-  At extends DefaultAttachmentType = DefaultAttachmentType
->(
+const UnMemoizedAudio = <At extends DefaultAttachmentType = DefaultAttachmentType>(
   props: AudioProps<At>,
 ) => {
   const { og } = props;
@@ -66,12 +62,7 @@ const UnMemoizedAudio = <
                 data-testid='play-audio'
                 onClick={() => setIsPlaying(true)}
               >
-                <svg
-                  height='40'
-                  viewBox='0 0 64 64'
-                  width='40'
-                  xmlns='http://www.w3.org/2000/svg'
-                >
+                <svg height='40' viewBox='0 0 64 64' width='40' xmlns='http://www.w3.org/2000/svg'>
                   <path
                     d='M32 58c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26zm0 6C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm13.237-28.412L26.135 45.625a3.27 3.27 0 0 1-4.426-1.4 3.319 3.319 0 0 1-.372-1.47L21 23.36c-.032-1.823 1.41-3.327 3.222-3.358a3.263 3.263 0 0 1 1.473.322l19.438 9.36a3.311 3.311 0 0 1 .103 5.905z'
                     fillRule='nonzero'
@@ -84,12 +75,7 @@ const UnMemoizedAudio = <
                 data-testid='pause-audio'
                 onClick={() => setIsPlaying(false)}
               >
-                <svg
-                  height='40'
-                  viewBox='0 0 64 64'
-                  width='40'
-                  xmlns='http://www.w3.org/2000/svg'
-                >
+                <svg height='40' viewBox='0 0 64 64' width='40' xmlns='http://www.w3.org/2000/svg'>
                   <path
                     d='M32 58.215c14.478 0 26.215-11.737 26.215-26.215S46.478 5.785 32 5.785 5.785 17.522 5.785 32 17.522 58.215 32 58.215zM32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm-7.412-45.56h2.892a2.17 2.17 0 0 1 2.17 2.17v23.865a2.17 2.17 0 0 1-2.17 2.17h-2.892a2.17 2.17 0 0 1-2.17-2.17V20.61a2.17 2.17 0 0 1 2.17-2.17zm12.293 0h2.893a2.17 2.17 0 0 1 2.17 2.17v23.865a2.17 2.17 0 0 1-2.17 2.17h-2.893a2.17 2.17 0 0 1-2.17-2.17V20.61a2.17 2.17 0 0 1 2.17-2.17z'
                     fillRule='nonzero'
@@ -106,10 +92,7 @@ const UnMemoizedAudio = <
           </span>
           <span className='str-chat__audio__content--subtitle'>{text}</span>
           <div className='str-chat__audio__content--progress'>
-            <div
-              data-testid='audio-progress'
-              style={{ width: `${progress}%` }}
-            />
+            <div data-testid='audio-progress' style={{ width: `${progress}%` }} />
           </div>
         </div>
       </div>

src/components/Attachment/Card.tsx

@@ -24,25 +24,15 @@ export type CardProps = {
 };
 
 const UnMemoizedCard: React.FC<CardProps> = (props) => {
-  const {
-    image_url,
-    og_scrape_url,
-    text,
-    thumb_url,
-    title,
-    title_link,
-    type,
-  } = props;
+  const { image_url, og_scrape_url, text, thumb_url, title, title_link, type } = props;
 
   const { t } = useTranslationContext();
 
   const image = thumb_url || image_url;
 
   const trimUrl = (url?: string | null) => {
     if (url !== undefined && url !== null) {
-      const [trimmedUrl] = url
-        .replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
-        .split('/');
+      const [trimmedUrl] = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '').split('/');
 
       return trimmedUrl;
     }
@@ -68,26 +58,16 @@ const UnMemoizedCard: React.FC<CardProps> = (props) => {
   }
 
   return (
-    <div
-      className={`str-chat__message-attachment-card str-chat__message-attachment-card--${type}`}
-    >
+    <div className={`str-chat__message-attachment-card str-chat__message-attachment-card--${type}`}>
       {image && (
         <div className='str-chat__message-attachment-card--header'>
           <img alt={image} src={image} />
         </div>
       )}
       <div className='str-chat__message-attachment-card--content'>
         <div className='str-chat__message-attachment-card--flex'>
-          {title && (
-            <div className='str-chat__message-attachment-card--title'>
-              {title}
-            </div>
-          )}
-          {text && (
-            <div className='str-chat__message-attachment-card--text'>
-              {text}
-            </div>
-          )}
+          {title && <div className='str-chat__message-attachment-card--title'>{title}</div>}
+          {text && <div className='str-chat__message-attachment-card--text'>{text}</div>}
           {(title_link || og_scrape_url) && (
             <SafeAnchor
               className='str-chat__message-attachment-card--url'

src/components/Attachment/FileAttachment.tsx

@@ -8,38 +8,25 @@ import type { Attachment } from 'stream-chat';
 
 import type { DefaultAttachmentType } from '../../../types/types';
 
-export type FileAttachmentProps<
-  At extends DefaultAttachmentType = DefaultAttachmentType
-> = {
+export type FileAttachmentProps<At extends DefaultAttachmentType = DefaultAttachmentType> = {
   attachment: Attachment<At>;
 };
 
-const UnMemoizedFileAttachment = <
-  At extends DefaultAttachmentType = DefaultAttachmentType
->(
+const UnMemoizedFileAttachment = <At extends DefaultAttachmentType = DefaultAttachmentType>(
   props: FileAttachmentProps<At>,
 ) => {
   const { attachment } = props;
 
   return (
-    <div
-      className='str-chat__message-attachment-file--item'
-      data-testid='attachment-file'
-    >
-      <FileIcon
-        big={true}
-        filename={attachment.title}
-        mimeType={attachment.mime_type}
-        size={30}
-      />
+    <div className='str-chat__message-attachment-file--item' data-testid='attachment-file'>
+      <FileIcon big={true} filename={attachment.title} mimeType={attachment.mime_type} size={30} />
       <div className='str-chat__message-attachment-file--item-text'>
         <SafeAnchor download href={attachment.asset_url} target='_blank'>
           {attachment.title}
         </SafeAnchor>
-        {attachment.file_size &&
-          Number.isFinite(Number(attachment.file_size)) && (
-            <span>{prettybytes(attachment.file_size)}</span>
-          )}
+        {attachment.file_size && Number.isFinite(Number(attachment.file_size)) && (
+          <span>{prettybytes(attachment.file_size)}</span>
+        )}
       </div>
     </div>
   );