chore(docs): added eslint to lint documentation code blocks

.github/workflows/docs-test.yml

@@ -63,4 +63,25 @@ jobs:
           fail_on_error: true
           vale_flags: '--minAlertLevel=error'
         env:
-          GITHUB_TOKEN: ${{ github.token }}
+          GITHUB_TOKEN: ${{ github.token }}
+
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.9.1
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Checkout
+        uses: actions/checkout@v2.3.5
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        uses: ./.github/actions/cache-deps
+        with:
+          extension: eslint-docs
+
+      - name: Run Eslint
+        run: yarn lint:docs

docs/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+      "@babel/preset-react"
+  ]
+}

docs/.eslintignore

@@ -0,0 +1 @@
+!docs/content

docs/.eslintrc.js

@@ -0,0 +1,121 @@
+module.exports = {
+  root: true,
+  parser: "@babel/eslint-parser",
+  parserOptions: {
+    requireConfigFile: false,
+    ecmaFeatures: {
+      experimentalDecorators: true,
+    },
+  },
+  plugins: ["prettier", "markdown"],
+  extends: [
+    "eslint:recommended",
+    "google",
+    "plugin:prettier/recommended",
+    "plugin:markdown/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+  ],
+  settings: {
+    react: {
+        version: "detect"
+    }
+  },
+  rules: {
+    "no-undef": "off",
+    "no-unused-expressions": "off",
+    "no-unused-vars": "off",
+    "no-unused-labels": "off",
+    "no-console": "off",
+    curly: ["error", "all"],
+    "new-cap": "off",
+    "require-jsdoc": "off",
+    "no-unused-expressions": "off",
+    "no-unused-vars": "off",
+    camelcase: "off",
+    "no-invalid-this": "off",
+    "max-len": [
+      "error",
+      {
+        code: 75,
+      },
+    ],
+    semi: ["error", "never"],
+    quotes: [
+      "error",
+      "double",
+      {
+        allowTemplateLiterals: true,
+      },
+    ],
+    "comma-dangle": [
+      "error",
+      {
+        arrays: "always-multiline",
+        objects: "always-multiline",
+        imports: "always-multiline",
+        exports: "always-multiline",
+        functions: "never",
+      },
+    ],
+    "object-curly-spacing": ["error", "always"],
+    "arrow-parens": ["error", "always"],
+    "linebreak-style": 0,
+    "no-confusing-arrow": [
+      "error",
+      {
+        allowParens: false,
+      },
+    ],
+    "space-before-function-paren": [
+      "error",
+      {
+        anonymous: "always",
+        named: "never",
+        asyncArrow: "always",
+      },
+    ],
+    "space-infix-ops": "off",
+    "eol-last": ["error", "always"],
+    "react/prop-types": "off",
+    "react/jsx-no-undef": "off"
+  },
+  env: {
+    es6: true,
+    node: true,
+  },
+  ignorePatterns: [
+    'docs/content/references/**',
+    'docs/content/advanced/backend/subscribers/events-list.md'
+  ],
+  overrides: [
+    {
+      files: ["docs/content/**/*.md", "docs/content/**/*.mdx"],
+      processor: "markdown/markdown",
+    },
+    {
+      files: [
+        "docs/content/**/*.md/*.js",
+        "docs/content/**/*.mdx/*.js",
+        "docs/content/**/*.md/*.jsx",
+        "docs/content/**/*.mdx/*.jsx",
+      ],
+    },
+    {
+      files: [
+        "docs/content/**/*.md/*.ts",
+        "docs/content/**/*.mdx/*.ts",
+        "docs/content/**/*.md/*.tsx",
+        "docs/content/**/*.mdx/*.tsx",
+      ],
+      plugins: ["@typescript-eslint/eslint-plugin"],
+      extends: ["plugin:@typescript-eslint/recommended"],
+      parser: "@typescript-eslint/parser",
+      rules: {
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+      },
+    },
+  ],
+}

docs/content/add-plugins/algolia.md

@@ -97,7 +97,7 @@ Finally, in `medusa-config.js` add the following item into the `plugins` arr
 
 ```jsx title=medusa-config.js
 const plugins = [
-  //...
+  // ...
   {
     resolve: `medusa-plugin-algolia`,
     options: {
@@ -123,7 +123,7 @@ const plugins = [
       },
     },
   },
-];
+]
 ```
 
 The `searchableAttributes` are the attributes in a product that are searchable, and `attributesToRetrieve` are the attributes to retrieve for each product result. You’re free to make changes to these attributes as you see fit, but these are the recommended attributes.
@@ -207,7 +207,7 @@ Finally, change the code in `src/lib/search-client.ts` to the following:
 ```jsx title=src/lib/search-client.ts
 import algoliasearch from "algoliasearch/lite"
 
-const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID || "" // You should add this to your environment variables
+const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID || ""
 
 const apiKey = process.env.NEXT_PUBLIC_SEARCH_API_KEY || "test_key"
 
@@ -227,9 +227,7 @@ To make sure the Next.js storefront properly displays the products in the search
 
 ![Search pop up in the Next.js storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000082/Medusa%20Docs/Algolia/1f9qqK6_c0z8zi.png)
 
----
-
-## Add to Gatsby and React-Based Storefronts
+### Add to Gatsby and React-Based Storefronts
 
 This section covers adding the search UI to React-based storefronts. It uses the Gatsby storefront as an example, but you can use the same steps on any React-based framework.
 
@@ -269,31 +267,40 @@ import {
   Hits,
   InstantSearch,
   SearchBox,
-  connectStateResults
+  connectStateResults,
 } from "react-instantsearch-dom"
 
 import React from "react"
-import algoliasearch from 'algoliasearch/lite';
+import algoliasearch from "algoliasearch/lite"
 
 const searchClient = algoliasearch(
   process.env.GATSBY_ALGOLIA_APP_ID,
   process.env.GATSBY_ALGOLIA_SEARCH_API_KEY
 )
 
 const Search = () => {
-  const Results = connectStateResults(({ searchState, searchResults, children }) =>
-    searchState && searchState.query && searchResults && searchResults.nbHits !== 0 ? (
-      <div className="absolute top-full w-full p-2 bg-gray-200 shadow-md">
-        {children}
-      </div>
-    ) : (
-      <div></div>
-    )
-  );
+  const Results = connectStateResults(
+    ({ searchState, searchResults, children }) => {
+      return (
+        searchState && searchState.query && 
+        searchResults && searchResults.nbHits !== 0 ? 
+        (
+          <div 
+            className="absolute top-full w-full p-2 bg-gray-200 shadow-md">
+            {children}
+          </div>
+        ) : (
+          <div></div>
+        )
+      )
+    }      
+  )
 
   return (
     <div className="relative">
-      <InstantSearch indexName={process.env.GATSBY_SEARCH_INDEX_NAME} searchClient={searchClient}>
+      <InstantSearch 
+        indexName={process.env.GATSBY_SEARCH_INDEX_NAME} 
+        searchClient={searchClient}>
         <SearchBox submit={null} reset={null} />
         <Results>
           <Hits hitComponent={Hit} />
@@ -313,7 +320,7 @@ const Hit = ({ hit }) => {
   )
 }
 
-export default Search;
+export default Search
 ```
 
 This file uses the dependencies you installed to show the search results. It also initializes Algolia using the environment variables you added.
@@ -333,10 +340,12 @@ import Search from "./search"
 And add the `Search` component in the returned JSX before `RegionPopover`:
 
 ```jsx title=src/components/header/index.jsx
-//...
-<Search />
-<RegionPopover regions={mockData.regions} />
-//...
+// ...
+<div className="...">
+  <Search />
+  <RegionPopover regions={mockData.regions} />
+</div>
+// ...
 ```
 
 If you run your Gatsby storefront while the Medusa server is running, you should find a search bar in the header of the page. Try entering a query to search through the products in your store.

docs/content/add-plugins/contentful/customize-contentful.md

@@ -29,32 +29,32 @@ Here’s an example of a migration created in a new file `contentful-migrations/
 ```jsx title=contentful-migrations/rich-text.js
 #! /usr/bin/env node
 
-require("dotenv").config();
+require("dotenv").config()
 
-const { runMigration } = require("contentful-migration");
+const { runMigration } = require("contentful-migration")
 
 const options = {
   spaceId: process.env.CONTENTFUL_SPACE_ID,
   accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
   environment: process.env.CONTENTFUL_ENVIRONMENT,
   yes: true,
-};
+}
 
 const migration = async () => {
   await runMigration({
     ...options,
     migrationFunction: function (migration, context) {
 
-      //create Rich Text content model
+      // create Rich Text content model
       const richText = migration
         .createContentType("richText")
         .name("Rich Text")
-        .displayField("title");
+        .displayField("title")
 
-      richText.createField("title").name("Title (Internal)").type("Symbol");
-      richText.createField("body").name("Body").type("RichText");
+      richText.createField("title").name("Title (Internal)").type("Symbol")
+      richText.createField("body").name("Body").type("RichText")
 
-      //edit Page content model
+      // edit Page content model
       const page = migration.editContentType("page")
 
       page.editField("contentModules").items({
@@ -67,7 +67,7 @@ const migration = async () => {
         ],
       })
 
-      //edit Product content model
+      // edit Product content model
       const product = migration.editContentType("product")
 
       product
@@ -83,11 +83,11 @@ const migration = async () => {
             },
           ],
         })
-    }
-  });
+    },
+  })
 }
 
-migration();
+migration()
 ```
 
 This example creates a new content model Rich Text that has two fields: title and body. It also edits the Page content model to allow using Rich Text content models on the page.
@@ -97,7 +97,19 @@ In addition, it edits the Product content model by adding a new field `contentMo
 You can also add other types of content models the `contentModules` should accept. For example, to accept `tileSection` add it to the `linkContentType` option:
 
 ```jsx
-linkContentType: ["tileSection", "richText"],
+product
+  .createField("contentModules")
+  .name("Content Modules")
+  .type("Array")
+  .items({
+    type: "Link",
+    linkType: "Entry",
+    validations: [
+      {
+        linkContentType: ["richText", "tileSection"],
+      },
+    ],
+  })
 ```
 
 ### Run a Contentful Migration
@@ -165,10 +177,10 @@ import { renderRichText } from "gatsby-source-contentful/rich-text"
 const RichText = ({ data }) => {
   return (
     <div style={{
-      maxWidth: '870px',
-      margin: '0 auto',
-      paddingTop: '20px',
-      paddingBottom: '20px'
+      maxWidth: "870px",
+      margin: "0 auto",
+      paddingTop: "20px",
+      paddingBottom: "20px",
     }}>
       {data.body ? renderRichText(data.body) : ""}
     </div>
@@ -194,7 +206,7 @@ Then, in the returned JSX add a new case to the switch statement:
 
 ```jsx title=src/pages/{ContentfulPage.slug}.js
 switch (cm.internal.type) {
-  //...
+  // ...
   case "ContentfulRichText":
       return <RichText key={cm.id} data={cm} />
   default: