Fix/lint md files

.eslintrc.js

@@ -49,7 +49,15 @@ module.exports = {
 			// eslint-disable-next-line inclusive-language/use-inclusive-words
 			//  * https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md)
 			//  * https://www.npmjs.com/package/eslint-plugin-md#modifying-eslint-setup-for-js-code-inside-md-files
-			files: [ '*.md.js', '*.md.javascript', '*.md.cjs', '*.md.ejs', '*.md.jsx' ],
+			files: [
+				'*.md.js',
+				'*.md.javascript',
+				'*.md.cjs',
+				'*.md.ejs',
+				'*.md.jsx',
+				'*.md.tsx',
+				'*.md.ts',
+			],
 			rules: {
 				// These are ok for examples
 				'import/no-extraneous-dependencies': 'off',
@@ -64,6 +72,9 @@ module.exports = {
 				'react/react-in-jsx-scope': 'off',
 				'wpcalypso/import-docblock': 'off',
 				'wpcalypso/jsx-classname-namespace': 'off',
+				'@typescript-eslint/no-unused-vars': 'off',
+				'jsdoc/require-param': 'off',
+				'jsdoc/check-param-names': 'off',
 			},
 		},
 		{

client/blocks/time-mismatch-warning/README.md

@@ -20,6 +20,7 @@ const Test = () => (
 ## Props
 
 There are two props:
+
 - `siteId`: Site ID to check.
 - `settingsUrl`: Site settings URL. If unset defaults to current page.
 - `status`: This is optional, and allows overriding the notice status. See the `Notice` component for allowed values.

client/components/forms/README.md

@@ -65,34 +65,34 @@ The `FormInputValidation` component is used to display a validation notice to th
 
 ```jsx
 const options = [
-		{
-			label: 'Group 1',
-			options: [
-				{
-					label: 'Option 1',
-					value: 1,
-				},
-				{
-					label: 'Option 2',
-					value: 2,
-				},
-			],
-		},
-		{
-			label: 'Group 2',
-			options: [
-				{
-					label: 'Option 3',
-					value: 3,
-				},
-				{
-					label: 'Option 4',
-					value: 4,
-				},
-			],
-		},
-	],
-	initialSelected = 3;
+	{
+		label: 'Group 1',
+		options: [
+			{
+				label: 'Option 1',
+				value: 1,
+			},
+			{
+				label: 'Option 2',
+				value: 2,
+			},
+		],
+	},
+	{
+		label: 'Group 2',
+		options: [
+			{
+				label: 'Option 3',
+				value: 3,
+			},
+			{
+				label: 'Option 4',
+				value: 4,
+			},
+		],
+	},
+];
+const initialSelected = 3;
 
 <SelectOptGroups name="example" value={ initialSelected } options={ options } />;
 ```

client/components/infinite-list/README.md

@@ -51,8 +51,8 @@ class Listing extends React.Component {
 	}
 
 	renderLoadingPlaceholders() {
-		const count = this.props.list.get().length ? 2 : this.props.list.perPage,
-			placeholders = [];
+		const count = this.props.list.get().length ? 2 : this.props.list.perPage;
+		const placeholders = [];
 		times( count, function ( i ) {
 			placeholders.push( <PostPlaceholder key={ 'placeholder-' + i } /> );
 		} );

client/reader/list-manage/README.md

@@ -1,3 +1,3 @@
 # Reader List Management
 
-Allows creation, editing, export and deletion of Reader lists.
+Allows creation, editing, export and deletion of Reader lists.

client/reader/list-stream/README.md

@@ -1,3 +1,3 @@
 # Reader List Stream
 
-A stream of posts from a Reader list.
+A stream of posts from a Reader list.

client/test-helpers/use-sinon/README.md

@@ -30,8 +30,8 @@ import { useFakeTimers } from 'calypso/test-helpers/use-sinon';
 
 describe( 'my time dependent test', function () {
 	let clock;
-	const aLongTimeAgo = Date.parse( '1976-09-15T010:00:00Z' ).valueOf(),
-		yearInMillis = 1000 * 60 * 60 * 24 * 365;
+	const aLongTimeAgo = Date.parse( '1976-09-15T010:00:00Z' ).valueOf();
+	const yearInMillis = 1000 * 60 * 60 * 24 * 365;
 
 	useFakeTimers( aLongTimeAgo, ( newClock ) => {
 		clock = newClock;

config/README.md

@@ -7,7 +7,7 @@ If it is necessary to access a `config` value on the client-side, add the proper
 Server-side and client-side code can retrieve a config value by invoking the `config()` exported function with the desired key name:
 
 ```js
-import config from 'config';
+import config from 'calypso/config';
 console.log( config( 'redirect_uri' ) );
 ```
 

desktop/README.md

@@ -4,18 +4,18 @@ WordPress.com for Desktop is an [Electron](https://github.com/atom/electron) wra
 
 ![WordPress.com for Desktop](https://en-blog.files.wordpress.com/2015/12/01-writing-with-dock.png?w=1150)
 
-# Getting Started & Running Locally
+## Getting Started & Running Locally
 
-The steps marked _Production*_ can be omitted but should be taken when building the production version of the app.
+The steps marked _Production\*_ can be omitted but should be taken when building the production version of the app.
 
 1. Clone the Calypso repository locally
 1. Install all root level dependencies with `yarn` or `yarn install --frozen-lockfile`
 1. Export the environment variables:
-    - `CHROMEDRIVER_SKIP_DOWNLOAD` (set to `true`)
-    - `DETECT_CHROMEDRIVER_VERSION` (set to `false`)
-    - _Production*_: `CONFIG_ENV` (set to `release`)
-    - _Production*_: `CALYPSO_SECRETS_ENCRYPTION_KEY` (it's a secret!)
-1. _Production*_: `yarn run build-desktop:secrets`
+   - `CHROMEDRIVER_SKIP_DOWNLOAD` (set to `true`)
+   - `DETECT_CHROMEDRIVER_VERSION` (set to `false`)
+   - _Production\*_: `CONFIG_ENV` (set to `release`)
+   - _Production\*_: `CALYPSO_SECRETS_ENCRYPTION_KEY` (it's a secret!)
+1. _Production\*_: `yarn run build-desktop:secrets`
 1. Build the app with `yarn run build-desktop`
 1. Find the built apps in the `desktop/release`
 
@@ -26,33 +26,33 @@ export DEBUG='*'
 ./desktop/release/mac/WordPress.com.app/Contents/MacOS/WordPress.com
 ```
 
-# Development
+## Development
 
 Refer to the [development guide](docs/development.md) for help with how the app works and how to change stuff.
 
-# Running The End-To-End Test Suite
+## Running The End-To-End Test Suite
 
 1. Set the environment variables `E2EUSERNAME` and `E2EPASSWORD`.
 2. Use `npm run e2e` or `make e2e` to invoke the test suite.
 
 To manually start each platform's _pre-packaged_ executable used for end-to-end testing:
 
-- Mac: Double-click `WordPress.com.app` (extract with [`ditto`](##Extracting-Published-ZIP-Archive-in-MacOS-10.15-(Catalina)))
+- Mac: Double-click `WordPress.com.app` (extract with [`ditto`](<##Extracting-Published-ZIP-Archive-in-MacOS-10.15-(Catalina)>))
 - Windows: Double-click WordPress.com.exe in `win-unpacked` directory
 - Linux: `npx electron /path/to/linux-unpacked/resources/app`
 
-# MacOS Notarization
+## MacOS Notarization
 
 Notes on MacOS notarization can be found [here](docs/notarization.md).
 
-# Building & Packaging a Release
+## Building & Packaging a Release
 
 While running the app locally in a development environment is great, you will eventually need to [build a release version](docs/release.md) you can share.
 
-# Troubleshooting
+## Troubleshooting
 
 If you have any problems running the app please see the [most common issues](docs/troubleshooting.md).
 
-# License
+## License
 
 WordPress.com for Desktop is licensed under [GNU General Public License v2 (or later)](LICENSE.md).

desktop/docs/development.md

@@ -15,28 +15,28 @@ We use Electron's [IPC](https://github.com/atom/electron/blob/master/docs/api/ip
 
 ### How does it work?
 
-It's a fairly complicated process so buckle up. Note that *(main)* and *(renderer)* will be added to show where the code actually runs.
+It's a fairly complicated process so buckle up. Note that _(main)_ and _(renderer)_ will be added to show where the code actually runs.
 
 For clarity, all file and folder locations are relative to the root of the Calypso monorepo.
 
-- *(main)* The `main` entry in `desktop/package.json` refers to `build/desktop.js`, which is the entrypoint of the compiled webpack bundle of the Calypso server running in Electron's main process.
+- _(main)_ The `main` entry in `desktop/package.json` refers to `build/desktop.js`, which is the entrypoint of the compiled webpack bundle of the Calypso server running in Electron's main process.
   - The Calypso server is an Express.js HTTP server that serves files to Electron's Renderer process.
   - `client/desktop/server/index.js` is where the Calypso server is started by the Electron process. Calypso's `boot` code is contained in the file `client/server/boot/index.js`.
-- *(main)* `client/desktop/index.js` sets up the environment in `client/desktop/env.js` - this includes Node paths for Calypso
-- *(main)* Various [app handlers](../../client/desktop/app-handlers/README.md) are loaded from `client/desktop/app-handlers` - these are bits of code that run before the main window opens
-- *(main)* A Calypso server is started directly from Electron's Node process in `client/desktop/server.js`. The server is customized to serve files from the following directories:
+- _(main)_ `client/desktop/index.js` sets up the environment in `client/desktop/env.js` - this includes Node paths for Calypso
+- _(main)_ Various [app handlers](../../client/desktop/app-handlers/README.md) are loaded from `client/desktop/app-handlers` - these are bits of code that run before the main window opens
+- _(main)_ A Calypso server is started directly from Electron's Node process in `client/desktop/server.js`. The server is customized to serve files from the following directories:
   - `/calypso` - mapped to `/public`
   - `/desktop` - mapped to `/public_desktop`
-- *(main)* An Electron `BrowserWindow` is opened and loads the 'index' page from the Calypso server
-- *(main)* Once the window has opened the [window handlers](../../client/desktop/window-handlers/README.md) load to provide interaction between Calypso and Electron
-- *(renderer)* Calypso's index page is served by a React renderer in `client/document/desktop.jsx`. In addition:
+- _(main)_ An Electron `BrowserWindow` is opened and loads the 'index' page from the Calypso server
+- _(main)_ Once the window has opened the [window handlers](../../client/desktop/window-handlers/README.md) load to provide interaction between Calypso and Electron
+- _(renderer)_ Calypso's index page is served by a React renderer in `client/document/desktop.jsx`. In addition:
   - `desktop/public_desktop/wordpress-desktop.css` - any CSS specific to the desktop app (mapped to `desktop` directory mentioned above)
   - `desktop/public_desktop/desktop-app.js` - desktop-specific JS and also the Calypso boot code (mapped to `desktop` directory mentioned above)
   - The Calypso client bundle for the Desktop app is built to `desktop/public`.
     - The built Calypso bundle has multiple webpack entrypoints (like `entry-main.[hash].min.js`).
     - The various Calypso filenames are written to `desktop/build/assets-evergreen.js` at buildtime. The Express.js server loads this `assets-evergreen.js` file to find out which `<script>` and `link rel="stylesheet">` tags to send to the browser.
-- *(renderer)* The `desktop-app.js` code runs which sets up various app-specific handlers that need to be inside the renderer. It also starts Calypso with `AppBoot()`
-- *(renderer)* The code in `calypso/client/lib/desktop` runs to send and receive IPC messages between the main process and Calypso.
+- _(renderer)_ The `desktop-app.js` code runs which sets up various app-specific handlers that need to be inside the renderer. It also starts Calypso with `AppBoot()`
+- _(renderer)_ The code in `calypso/client/lib/desktop` runs to send and receive IPC messages between the main process and Calypso.
 
 Phew!
 

desktop/docs/notarization.md

@@ -18,4 +18,4 @@ Notarization status of an application bundle can be verified via the `codesign`,
 
 `xrun stapler validate WordPress.com.app`
 
-`spctl -a -v WordPress.com.app`
+`spctl -a -v WordPress.com.app`

desktop/docs/release.md

@@ -19,6 +19,7 @@ make package
 ```
 
 **Notes:**
+
 - `make build` will by default only create a distributable package for your current host system.
 - All packages are saved to the `./release` directory.
 - We are using CircleCI for creating release builds. For advanced configuration use cases please check the [`.circleci/config.yml`](../.circleci/config.yml)

desktop/docs/secrets.md

@@ -9,22 +9,22 @@ You can [create an application here](https://developer.wordpress.com/apps/new/).
 
 When creating your application, you'll need to fill in all the fields:
 
-* **Name:** Any name of your choosing.
-* **Description:** A description, e.g. "My wp-desktop testing app".
-* **Website URL:** A URL. For testing the desktop app, you can use the repo URL
+- **Name:** Any name of your choosing.
+- **Description:** A description, e.g. "My wp-desktop testing app".
+- **Website URL:** A URL. For testing the desktop app, you can use the repo URL
   `https://github.com/Automattic/wp-desktop`.
-* **Redirect URLs:** The form requires a valid URL. Please use:
-	```
-	http://127.0.0.1:41050
-	http://calypso.localhost:3000
-	```
-* **Javascript Origins:**
-	```
-	http://127.0.0.1:41050
-	http://calypso.localhost:3000
-	```
-* Answer the bot challenge correctly.
-* **Type:** Native
+- **Redirect URLs:** The form requires a valid URL. Please use:
+  ```
+  http://127.0.0.1:41050
+  http://calypso.localhost:3000
+  ```
+- **Javascript Origins:**
+  ```
+  http://127.0.0.1:41050
+  http://calypso.localhost:3000
+  ```
+- Answer the bot challenge correctly.
+- **Type:** Native
 
 When you've filled out the form, click the create button.
 
@@ -40,4 +40,4 @@ After your application is created, copy your client id and client secret, and ad
 	"desktop_oauth_client_id": "<YOUR CLIENT ID>",
 	"desktop_oauth_client_secret": "<YOUR CLIENT SECRET>"
 }
-```
+```

desktop/docs/troubleshooting.md

@@ -1,5 +1,5 @@
 # Troubleshooting
 
-* The WordPress icon will only show in the release version. The dev version will use the Electron icon
-    * If you see issue, try deleting `node_modules` and `yarn`
-* You can open Electron's Chromium Developer Tools using `CTRL+SHIFT+I`
+- The WordPress icon will only show in the release version. The dev version will use the Electron icon
+  - If you see issue, try deleting `node_modules` and `yarn`
+- You can open Electron's Chromium Developer Tools using `CTRL+SHIFT+I`

packages/calypso-analytics/README.md

@@ -19,7 +19,7 @@ recordTracksEvent( 'calypso_signup_step_start', { step: 'a_nice_step' } );
 _Note: Unless you have a strong reason to call `recordTracksEvent` directly, you should use the Analytics Middleware instead:_
 
 ```js
-import { recordTracksEvent } from 'state/analytics/actions';
+import { recordTracksEvent } from '@automattic/calypso-analytics';
 
 dispatch( recordTracksEvent( 'calypso_checkout_coupon_apply', { coupon_code: 'abc123' } ) );
 ```
@@ -42,7 +42,8 @@ recordTracksEvent( 'calypso_do_thing', { extra: 'info' } );
 `recordTracksEvent( name, properties )` deprecates the following call to the analytics lib method:
 
 ```js
-import { recordTracksEvent } from 'lib/analytics/tracks';
+// eslint-disable-next-line no-restricted-imports
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 
 recordTracksEvent( name, properties );
 ```

packages/components/.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
 		},
 		{
 			// These are consumed only by Calypso's webpack build, it is ok to import other Calypso components
-			files: [ '**/docs/example.jsx' ],
+			files: [ '**/docs/example.jsx', '*.md.js', '*.md.jsx' ],
 			rules: {
 				'no-restricted-imports': 'off',
 			},

packages/components/src/button/README.md

@@ -5,7 +5,7 @@ Buttons express what action will occur when the user clicks or taps it. Buttons
 ## Usage
 
 ```jsx
-import Gridicon from 'components/gridicons';
+import Gridicon from 'calypso/components/gridicons';
 import { Button } from '@automattic/components';
 
 export default function RockOnButton() {
@@ -44,7 +44,7 @@ export default function RockOnButton() {
 To use an icon button, insert a Gridicon so that it displays to the left of the text (displaying the `external` icon to the right of the text is the exception). Wrap the text in a `span` or some other element for spacing purposes. You may also create an icon button without text, but use sparingly because it may reduce clarity.
 
 ```jsx
-import Gridicon from 'components/gridicons';
+import Gridicon from 'calypso/components/gridicons';
 import { Button } from '@automattic/components';
 
 export default function RockOnButton() {

packages/components/src/screen-reader-text/README.md

@@ -10,7 +10,7 @@ This idea was pulled from WordPress core, for more background & technical detail
 
 ```js
 import { Button, ScreenReaderText } from '@automattic/components';
-import Gridicon from 'components/gridicons';
+import Gridicon from 'calypso/components/gridicons';
 
 function ScreenReaderTextExample() {
 	return (

packages/components/src/suggestions/README.md

@@ -9,7 +9,7 @@ A suggestion whose `label` property matches the `query` prop will be highlighted
 
 ```jsx
 import React, { useCallback, useMemo, useState } from 'react';
-import FormTextInput from 'components/forms/form-text-input';
+import FormTextInput from 'calypso/components/forms/form-text-input';
 import { Suggestions } from '@automattic/components';
 
 export default function SuggestionsExample() {

packages/composite-checkout/README.md

@@ -309,8 +309,8 @@ Renders a logo for a credit card.
 
 Takes two props:
 
-  - `brand: string`. This is a lower-case card name, like `visa` or `mastercard`.
-  - `isSummary: boolean`. If true, will display a more compact version of the logo.
+- `brand: string`. This is a lower-case card name, like `visa` or `mastercard`.
+- `isSummary: boolean`. If true, will display a more compact version of the logo.
 
 ### PaymentProcessorResponseType