Configure prettier. (and static checks) (#4)

- Add prettier
- Format files with prettier
- add static check to verify formatting and typechecks
- configure dependabot

---------

Co-authored-by: Adrian Czerwiec <adrian.czerwiec@swmansion.com>

Author: mironiasty

.github/dependabot.yml

@@ -0,0 +1,13 @@
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    groups:
+      development-dependencies:
+        dependency-type: "development"

.github/pull_request_template.md

@@ -0,0 +1,3 @@
+## Description
+
+Describe your changes in detail

.github/workflows/docs.yaml

@@ -47,4 +47,4 @@ jobs:
           path: build
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v2

.github/workflows/static_check.yml

@@ -0,0 +1,15 @@
+name: Static checks
+on:
+  pull_request:
+jobs:
+  types_and_lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+      - name: Install node dependencies
+        run: yarn
+      - name: Check formatting
+        run: yarn format:check
+      - name: Check types
+        run: yarn typecheck

.prettierignore

@@ -0,0 +1,2 @@
+build/*
+node_modules/*

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
 };

blog/authors.yml

@@ -3,6 +3,3 @@ mironiasty:
   title: Fullstack Engineer @ Software Mansion
   url: https://github.com/mironiasty
   image_url: https://github.com/mironiasty.png
-
-
-

blog/tags.yml

@@ -7,4 +7,3 @@ sdk:
   label: SDK
   permalink: /sdk
   description: News about SDK
-

docs/tutorial-basics/create-a-document.md

@@ -30,7 +30,7 @@ Add metadata to customize the sidebar label and position:
 
 ```md title="docs/hello.md" {1-4}
 ---
-sidebar_label: 'Hi!'
+sidebar_label: "Hi!"
 sidebar_position: 3
 ---
 
@@ -44,13 +44,13 @@ It is also possible to create your sidebar explicitly in `sidebars.js`:
 ```js title="sidebars.js"
 export default {
   tutorialSidebar: [
-    'intro',
+    "intro",
     // highlight-next-line
-    'hello',
+    "hello",
     {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
+      type: "category",
+      label: "Tutorial",
+      items: ["tutorial-basics/create-a-document"],
     },
   ],
 };

docs/tutorial-basics/create-a-page.md

@@ -15,8 +15,8 @@ Add **Markdown or React** files to `src/pages` to create a **standalone page**:
 Create a file at `src/pages/my-react-page.js`:
 
 ```jsx title="src/pages/my-react-page.js"
-import React from 'react';
-import Layout from '@theme/Layout';
+import React from "react";
+import Layout from "@theme/Layout";
 
 export default function MyReactPage() {
   return (

docs/tutorial-basics/markdown-features.mdx

@@ -67,7 +67,7 @@ function HelloDocusaurus() {
   return <h1>Hello, Docusaurus!</h1>;
 }
 ```
-```` 
+````
 
 ```jsx title="src/components/HelloDocusaurus.js"
 function HelloDocusaurus() {
@@ -131,18 +131,19 @@ This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
 This is <Highlight color="#1877F2">Facebook blue</Highlight> !
 ```
 
-export const Highlight = ({children, color}) => (
+export const Highlight = ({ children, color }) => (
   <span
     style={{
       backgroundColor: color,
-      borderRadius: '20px',
-      color: '#fff',
-      padding: '10px',
-      cursor: 'pointer',
+      borderRadius: "20px",
+      color: "#fff",
+      padding: "10px",
+      cursor: "pointer",
     }}
     onClick={() => {
       alert(`You clicked the color ${color} with label ${children}`);
-    }}>
+    }}
+  >
     {children}
   </span>
 );

docs/tutorial-extras/manage-docs-versions.md

@@ -34,7 +34,7 @@ export default {
       items: [
         // highlight-start
         {
-          type: 'docsVersionDropdown',
+          type: "docsVersionDropdown",
         },
         // highlight-end
       ],

docs/tutorial-extras/translate-your-site.md

@@ -13,8 +13,8 @@ Modify `docusaurus.config.js` to add support for the `fr` locale:
 ```js title="docusaurus.config.js"
 export default {
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en', 'fr'],
+    defaultLocale: "en",
+    locales: ["en", "fr"],
   },
 };
 ```
@@ -60,7 +60,7 @@ export default {
       items: [
         // highlight-start
         {
-          type: 'localeDropdown',
+          type: "localeDropdown",
         },
         // highlight-end
       ],

docs/tutorial-react-native/_category_.json

@@ -5,4 +5,4 @@
     "type": "generated-index",
     "description": "How to integrate Fishjam Cloud into your React Nateive mobile app."
   }
-}
+}

docs/tutorial-react-native/connecting.mdx

@@ -17,25 +17,25 @@ This app comes with preconfigured test service called Room Manager. This is basi
 create Room, add your app as Room's Participant and return token required to use that Room.
 
 To use that simply call `fetch`:
+
 ```ts
 const response = await fetch(
   `https://fishjam.io/api/v1/connect/*YOUR_ID*/room-manager/*ROOM_NAME*/users/*USER_NAME*`,
 );
 
-const {url, token} = await response.json();
+const { url, token } = await response.json();
 ```
 
 ## Connecting
 
 In order to connect, you just need to call `connect` method with data from previous step:
 
 ```ts
-import { connect } from '@fishjam-cloud/react-native-client';
-
+import { connect } from "@fishjam-cloud/react-native-client";
 
 await connect(url, token);
 ```
 
 ## Disconnecting
 
-In order to close connection, you have to call `leaveRoom` method.
+In order to close connection, you have to call `leaveRoom` method.

docs/tutorial-react-native/list-other.mdx

@@ -4,12 +4,11 @@ sidebar_position: 4
 
 # List other participants
 
-In order see other streaming participants, you can use `useParticipants`. It will return all 
-other participants, together with track that they are streaming. 
+In order see other streaming participants, you can use `useParticipants`. It will return all
+other participants, together with track that they are streaming.
 
 ### Example code that show all videos
 
-
 ```ts
 import { useParticipants, VideoRendererView } from '@fishjam-cloud/react-native-client';
 
@@ -29,4 +28,4 @@ function Component() {
     </View>
   );
 }
-```
+```

docs/tutorial-react-native/start-streaming.mdx

@@ -8,13 +8,12 @@ How to stream your camera
 
 :::tip Enable devices before connecting
 
-You can enable your camera and microphone before calling connect method. 
+You can enable your camera and microphone before calling connect method.
 This way, you can show user camera preview. Once connect method is called,
 enabled camera and microphone will start streaming to Room.
 
 :::
 
-
 ## Enable your camera
 
 First, you have to enable your camera by calling `startCamera` method.
@@ -39,20 +38,20 @@ function Component() {
 To list all cameras available on device, you can use `cameraList` property from `useCamera` hook.
 This way, you can either automatically choose camera (front/back) or allow user to select camera type.
 
-To change camera, simply call `switchCamera` method. 
+To change camera, simply call `switchCamera` method.
 
 ```ts
-  const { cameraList, switchCamera, currentCamera } = useCamera();
-
-  const flipCamera = useCallback(() => {
-    const camera =
-      cameraList.find(
-        (camera) => camera.facingDirection !== currentCamera?.facingDirection,
-      ) || null;
-    if (camera) {
-      switchCamera(camera.id);
-    }
-  }, [camerasList, currentCamera?.facingDirection, switchCamera]);
+const { cameraList, switchCamera, currentCamera } = useCamera();
+
+const flipCamera = useCallback(() => {
+  const camera =
+    cameraList.find(
+      (camera) => camera.facingDirection !== currentCamera?.facingDirection,
+    ) || null;
+  if (camera) {
+    switchCamera(camera.id);
+  }
+}, [camerasList, currentCamera?.facingDirection, switchCamera]);
 ```
 
 ### Disabling/enabling camera
@@ -67,7 +66,6 @@ const { isCameraOn, toggleCamera } = useCamera();
 
 Microphone works similar to camera. In order to enable it, you have to call `toggleMicrophone` method.
 
-
 ```ts
 const { isMicrophoneOn, toggleMicrophone } = useMicrophone();
-```
+```

package.json

@@ -12,7 +12,9 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check"
   },
   "dependencies": {
     "@docusaurus/core": "3.5.2",
@@ -27,6 +29,7 @@
     "@docusaurus/module-type-aliases": "3.5.2",
     "@docusaurus/tsconfig": "3.5.2",
     "@docusaurus/types": "3.5.2",
+    "prettier": "^3.3.3",
     "typescript": "~5.5.2"
   },
   "browserslist": {

sidebars.ts

@@ -1,4 +1,4 @@
-import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
 
 /**
  * Creating a sidebar enables you to:
@@ -12,7 +12,7 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
  */
 const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+  tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
 
   // But you can create a sidebar manually
   /*

src/components/HomepageFeatures/index.tsx

@@ -14,8 +14,8 @@ const FeatureList: FeatureItem[] = [
     Svg: require("@site/static/img/fish-easy.svg").default,
     description: (
       <>
-        Fishjam Cloud was designed from the ground up to be easily installed and used to get Video Streaming in your app
-        up and running quickly.
+        Fishjam Cloud was designed from the ground up to be easily installed and
+        used to get Video Streaming in your app up and running quickly.
       </>
     ),
   },
@@ -24,8 +24,8 @@ const FeatureList: FeatureItem[] = [
     Svg: require("@site/static/img/fish-focus.svg").default,
     description: (
       <>
-        Fishjam Cloud lets you focus on your users, and we&apos;ll do all difficult work. Go ahead and check that
-        streaming can be easy.
+        Fishjam Cloud lets you focus on your users, and we&apos;ll do all
+        difficult work. Go ahead and check that streaming can be easy.
       </>
     ),
   },
@@ -34,7 +34,8 @@ const FeatureList: FeatureItem[] = [
     Svg: require("@site/static/img/fish-technology.svg").default,
     description: (
       <>
-        Move fast with integrationg streaming into your app by simple installation process in Expo and React Native Apps
+        Move fast with integrationg streaming into your app by simple
+        installation process in Expo and React Native Apps
       </>
     ),
   },

src/css/custom.css

@@ -18,7 +18,7 @@
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-primary: #25c2a0;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
@@ -29,14 +29,13 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
-
-html[data-theme='light'] footer.footer {
-  background-color: #FCF4E4;
+html[data-theme="light"] footer.footer {
+  background-color: #fcf4e4;
 }
-html[data-theme='light'] nav.navbar--fixed-top {
-  background-color: #FCF4E4;
+html[data-theme="light"] nav.navbar--fixed-top {
+  background-color: #fcf4e4;
 }
-html[data-theme='light'] header.heroBanner_src-pages-index-module{
-  background-color: #9BDCFB;
+html[data-theme="light"] header.heroBanner_src-pages-index-module {
+  background-color: #9bdcfb;
   color: #000;
-}
+}