hooks.addContent('SiteInfoOverview', (site) => {
    return (
        <Notes key="notes" site={site} />
    );
});

hooks.addContent('routesSiteInfo', () => {
    return (
        <Route 
            key="site-info-stats" 
            path="/site-info/:siteID/stats" 
            component={SiteInfoStats}
        />
    );
});

{
    "id": "BeyQOnaNS",
    "localVersion": "3.1.2",
    "container": "c61d2aba97ca2306edd42f03275dae0bbda570abe8d93e9ad2ba2a9a93bea895",
    "phpVersion": "7.2.9",
    "webServer": "nginx",
    "mysqlVersion": "5.7",
    "multiSite": null,
    "mysql": {
      "database": "local",
      "user": "root",
      "password": "root"
    },
    "ports": {
      "HTTP": 4049,
      "HTTPS": 4050,
      "MYSQL": 4051,
      "MAILCATCHER": 4052
    },
    "flywheelConnect": "flywheel-site-hash",
    "environment": "flywheel",
    "workspace": null,
    "name": "Example Site",
    "path": "/Users/username/Local Sites/example-site",
    "domain": "example-site.local",
    "environmentVersion": "1.3.2",
    "sslSHA1": "14f0808d7312bf4031ee198aec75cbd20b8aee2d"
  }

hooks.addAction('siteAdded', function (site) {
	console.log('New site added!', site);
});

function(menu: MenuTemplate[], platform: string): MenuTemplate[];

function(menuItems: SiteInfoMoreMenuItem[], site: Site): SiteInfoMoreMenuItem[];

hooks.addFilter('siteInfoMoreMenu', function (menu, site) {

	menu.push({
		label: 'Volumes',
		enabled: !this.context.router.isActive(`/site-info/${site.id}/volumes`),
		click: () => {
			context.events.send('goToRoute', `/site-info/${site.id}/volumes`);
		},
	});

	return menu;

});

{
	// React Router props (types are not accurately documented here and developers should reference the React Router documentation for more details)
	history: any;
	location: any;
	match: any;
	params: any;

	// controls whether or not the "apply" button (rendered by Local) is enabled (clickable) or disabled (not clickable)
	setApplyButtonDisabled: (isDisabled: boolean) => void;

	// various other props may be passed via Local but are not an offically supported component of this API as of the time of writing
}

function(preferencesItem: PreferencesItem[]): PreferencesItem[];

const preferenceItem: AddonSettingsItem = {
	path: 'image-optimizer',
	displayName: 'Image Optimizer',
	sections: [
		{
			// subHeader is optional and if omitted, no subHeader will be rendered
			subHeader: 'header 1',
			rows: [
				{
					// this defines what string will be rendered in the left hand "column" of a row
					name: 'line 1',
					// this defines what will be rendered in the right hand "column" of a row. It can be any React component.
					component: Preferences,
				},
				// ...add some more rows if you want
			],
		},
		// ...add some more sections if you want
	],
	onApply: () => {
		console.log('changes applied!')
	},
	componentProps: {
		// This optional object can be any arbitrary props to get passed to your row components (or Override component)
	},
};

hooks.addFilter(
	'preferencesMenuItems',
	(menu) => {
		menu.push(preferenceItem);

		// remember to return the menu array here! If you don't Local won't be able to render your Preference item
		return menu;
	}
);

const preferenceItem = {
	path: 'image-optimizer',
	displayName: 'Image Optimizer',
	// this can also just be any old React component. It will be rendered in the Preferences content area
	sections: (props) => <div>{props.title}<div/>,
	onApply: () => {
		console.log('changes applied!')
	},
	componentProps: {
		/* Arbitrary props that will get passed to your row components or section override component. */
		/* here we are passing it "title" which will get passed to the "sections" component */
		title: 'Preferences Title',
	},
}

hooks.addFilter(
	'preferencesMenuItems',
	(menu) => {
		menu.push(preferenceItem);
 
		return menu;
	};
);