chore: install prettier, eslint, sass for docs

docs/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: ['prettier'],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: ['src'],
+      },
+    },
+  },
+};

docs/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

docs/.lintstagedrc

@@ -0,0 +1,6 @@
+{
+  "*.{js,jsx,tsx,html,css,scss,md}": "prettier --write",
+  "*.{js,jsx,tsx}": "eslint --cache --fix",
+  "*.{css,sass,scss,md,html}": "stylelint --cache --fix --ignore-path .gitignore",
+  "*.{md}": "markdownlint --fix --ignore-path .gitignore"
+}

docs/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

docs/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

docs/.stylelintrc

@@ -0,0 +1,18 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recommended-scss",
+    "stylelint-config-css-modules",
+    "stylelint-config-recess-order"
+  ],
+  "rules": {
+    "no-descending-specificity": null,
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["value"]
+      }
+    ]
+  }
+}

docs/docs/community/code-conduct.md

@@ -18,21 +18,21 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
+- The use of sexualized language or imagery and unwelcome sexual attention or
   advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Our Responsibilities

docs/docs/community/create-provider.md

@@ -3,6 +3,7 @@ sidebar_position: 4
 ---
 
 # How to Create Provider?
+
 All of our providers need to implement one or more of our provider interfaces, based on provider feature, from Email, and SMS through Direct, In-app, and push.
 
 For a provider template you can copy one of our existing provider in the `providers` folder in the novu project, make the relevant changes and create a PR against the monorepo.
@@ -38,7 +39,7 @@ Choose the provider type.
 ```zsh
 yarn run v1.22.17
 $ npx hygen provider new
-? What type of provider is this? … 
+? What type of provider is this? …
 ❯ EMAIL
   SMS
 ```
@@ -66,17 +67,12 @@ export class ExampleProviderEmailProvider implements IEmailProvider {
     private config: {
       apiKey: string;
     }
-  ) {
-  }
-
-  async sendMessage(
-    options: IEmailOptions
-  ): Promise<ISendMessageSuccessResponse> {
-
+  ) {}
 
+  async sendMessage(options: IEmailOptions): Promise<ISendMessageSuccessResponse> {
     return {
       id: 'PLACEHOLDER',
-      date: 'PLACEHOLDER'
+      date: 'PLACEHOLDER',
     };
   }
 }
@@ -87,22 +83,20 @@ Template test case for `emailProvider`.
 ```ts
 import { ExampleProviderEmailProvider } from './exampleProvider.provider';
 
-test('should trigger exampleProvider library correctly', async () => {
-
-});
+test('should trigger exampleProvider library correctly', async () => {});
 ```
 
 ## Email Provider
 
-This is a code example of a basic email provider, with minimal fields required by our ``` IEmailProvider ``` interface.
+This is a code example of a basic email provider, with minimal fields required by our `IEmailProvider` interface.
 
- ```ts
-import { ChannelTypeEnum, IEmailProvider, IEmailOptions } from "@novu/stateless";
+```ts
+import { ChannelTypeEnum, IEmailProvider, IEmailOptions } from '@novu/stateless';
 
-import sendgridMail from "@sendgrid/mail";
+import sendgridMail from '@sendgrid/mail';
 
 export class SendgridEmailProvider implements IEmailProvider {
-  id = "sendgrid";
+  id = 'sendgrid';
   channelType = ChannelTypeEnum.EMAIL as ChannelTypeEnum.EMAIL;
 
   constructor(
@@ -123,25 +117,22 @@ export class SendgridEmailProvider implements IEmailProvider {
     });
   }
 }
- ```
+```
 
 ## SMS Provider
 
-This is a code example of a basic email provider, with minimal fields required by our ``` ISmsProvider ``` interface.
+This is a code example of a basic email provider, with minimal fields required by our `ISmsProvider` interface.
 
 ```typescript
-import { ChannelTypeEnum, ISmsOptions, ISmsProvider } from "@novu/stateless";
+import { ChannelTypeEnum, ISmsOptions, ISmsProvider } from '@novu/stateless';
 
-import { Twilio } from "twilio";
+import { Twilio } from 'twilio';
 
 export class TwilioSmsProvider implements ISmsProvider {
-  id = "twilio";
+  id = 'twilio';
   channelType = ChannelTypeEnum.SMS as ChannelTypeEnum.SMS;
 
-  private twilioClient = new Twilio(
-    this.config.accountSid,
-    this.config.authToken
-  );
+  private twilioClient = new Twilio(this.config.accountSid, this.config.authToken);
   constructor(
     private config: {
       accountSid: string;

docs/docs/notification-center/getting-started.md

@@ -1,6 +1,7 @@
 ---
 position: 1
 ---
+
 # Getting Started
 
 Novu provides you a set of API's and components to create rich customized notification center experiences. You can either choose to work headless with our notification feed API. And create your own custom notification center user-interface, or user our ready-to-use UI and customize partially.
@@ -18,7 +19,11 @@ npm install @novu/notification-center
 And in the appropriate place withing your app add the `PopoverNotificationCenter` component with the `NovuProvider`
 
 ```tsx
-import { NovuProvider, PopoverNotificationCenter, NotificationBell } from '@novu/notification-center';
+import {
+  NovuProvider,
+  PopoverNotificationCenter,
+  NotificationBell,
+} from '@novu/notification-center';
 
 function Header() {
   return (
@@ -33,5 +38,4 @@ function Header() {
 
 That's it! Now you're ready to send your first notifications using Novu.
 
-
 Not using React? Checkout the [iFrame Embed docs](/docs/notification-center/iframe-embed)

docs/docs/notification-center/iframe-embed.md

@@ -5,33 +5,48 @@ You can find the embed code in the `Settings` page within the Admin Panel. It wi
 
 ```html
 <script>
-  (function(n,o,t,i,f) {
-    n[i] = {}, m = ['init']; n[i]._c = [];m.forEach(me => n[i][me] = function() {n[i]._c.push([me, arguments])});
-    var elt = o.createElement(f); elt.type = "text/javascript"; elt.async = true; elt.src = t;
-    var before = o.getElementsByTagName(f)[0]; before.parentNode.insertBefore(elt, before);
+  (function (n, o, t, i, f) {
+    (n[i] = {}), (m = ['init']);
+    n[i]._c = [];
+    m.forEach(
+      (me) =>
+        (n[i][me] = function () {
+          n[i]._c.push([me, arguments]);
+        })
+    );
+    var elt = o.createElement(f);
+    elt.type = 'text/javascript';
+    elt.async = true;
+    elt.src = t;
+    var before = o.getElementsByTagName(f)[0];
+    before.parentNode.insertBefore(elt, before);
   })(window, document, 'https://embed.novu.co/embed.umd.min.js', 'novu', 'script');
 
-  novu.init('<REPLACE_APPLICATION_ID>', { 
-    unseenBadgeSelector: '#unseen-badge', 
-    bellSelector: '#notification-bell' 
-  }, {
-    subscriberId: "<REPLACE_WITH_USER_UNIQUE_IDENTIFIER>",
-    email: "<REPLACE_WITH_USER_EMAIL>",
-    first_name: "<REPLACE_WITH_USER_NAME>",
-    last_name: "<REPLACE_WITH_USER_LAST_NAME>",
-  });
+  novu.init(
+    '<REPLACE_APPLICATION_ID>',
+    {
+      unseenBadgeSelector: '#unseen-badge',
+      bellSelector: '#notification-bell',
+    },
+    {
+      subscriberId: '<REPLACE_WITH_USER_UNIQUE_IDENTIFIER>',
+      email: '<REPLACE_WITH_USER_EMAIL>',
+      first_name: '<REPLACE_WITH_USER_NAME>',
+      last_name: '<REPLACE_WITH_USER_LAST_NAME>',
+    }
+  );
 </script>
 ```
 
 Replace the selectors for the bell icon and the unseen badge withing your code. Let's take a look at this example code:
 
 ```html
-  <nav>
-    <div id="notification-bell">
-      <i class="fa fa-bell"></i>
-      <span id="unseen-badge"></span>
-    </div>
-  </nav>
+<nav>
+  <div id="notification-bell">
+    <i class="fa fa-bell"></i>
+    <span id="unseen-badge"></span>
+  </div>
+</nav>
 ```
 
 ## Customizing the dropdown position
@@ -40,15 +55,19 @@ Optionally the embed init script receives a position object, you can use it to s
 
 ```html
 <script>
-  novu.init('<REPLACE_APPLICATION_ID>', {
-    unseenBadgeSelector: '#unseen-badge',
-    bellSelector: '#notification-bell',
-    position: {
-      top: '50px',
-      left: '100px'
+  novu.init(
+    '<REPLACE_APPLICATION_ID>',
+    {
+      unseenBadgeSelector: '#unseen-badge',
+      bellSelector: '#notification-bell',
+      position: {
+        top: '50px',
+        left: '100px',
+      },
+    },
+    {
+      ...subscriberProps,
     }
-  }, {
-    ...subscriberProps
-  });
+  );
 </script>
 ```