@d-fischer/documen.ts 0.16.3 → 0.16.4

package/src/common/components/TypeLink.tsx

@@ -1,10 +1,10 @@
+import { makeStyles } from '@mui/styles';
 import React from 'react';
-import type { ReferenceNode } from '../reference';
 import { Link } from 'react-router-dom';
+import type { ReferenceNode } from '../reference';
 import { getPageType } from '../tools/CodeTools';
 import { findSymbolByMember } from '../tools/ReferenceTools';
 import { getPackagePath } from '../tools/StringTools';
-import { makeStyles } from '@material-ui/styles';
 
 interface TypeLinkProps {
 	id?: number;
@@ -12,13 +12,16 @@ interface TypeLinkProps {
 	symbol?: ReferenceNode;
 }
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		color: theme.colors.link,
-		fontWeight: 'bold',
-		textDecoration: 'none'
-	}
-}), { name: 'TypeLink' });
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			color: theme.colors.link,
+			fontWeight: 'bold',
+			textDecoration: 'none'
+		}
+	}),
+	{ name: 'TypeLink' }
+);
 
 const TypeLink: React.FC<React.PropsWithChildren<TypeLinkProps>> = ({ id, name, children, symbol }) => {
 	const classes = useStyles();
@@ -37,7 +40,11 @@ const TypeLink: React.FC<React.PropsWithChildren<TypeLinkProps>> = ({ id, name,
 		return <>{children}</>;
 	}
 
-	return <Link className={classes.root} to={`/reference${getPackagePath(packageName)}/${getPageType(symbol)}/${name}`}>{children}</Link>;
+	return (
+		<Link className={classes.root} to={`/reference${getPackagePath(packageName)}/${getPageType(symbol)}/${name}`}>
+			{children}
+		</Link>
+	);
 };
 
 export default TypeLink;

package/src/common/components/VersionMenu.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import classNames from 'classnames';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { ConfigContext, rootUrl } from '../config';

package/src/common/components/cards/CardToolbar.tsx

@@ -1,12 +1,12 @@
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
+import { makeStyles } from '@mui/styles';
+import classNames from 'classnames';
 import React from 'react';
-import type { ReferenceNode, CallSignatureReferenceNode, ConstructSignatureReferenceNode } from '../../reference';
+import { HashLink } from 'react-router-hash-link';
+import type { CallSignatureReferenceNode, ConstructSignatureReferenceNode, ReferenceNode } from '../../reference';
 import { getAnchorName } from '../../tools/NodeTools';
 import CodeLink from '../CodeLink';
-import { HashLink } from 'react-router-hash-link';
-import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
-import { faLink } from '@fortawesome/free-solid-svg-icons';
-import classNames from 'classnames';
-import { makeStyles } from '@material-ui/styles';
 
 interface CardToolbarProps {
 	name?: string;
@@ -15,31 +15,38 @@ interface CardToolbarProps {
 	className?: string;
 }
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		float: 'right'
-	},
-	button: {
-		marginLeft: '.5em'
-	},
-	anchor: {
-		color: theme.colors.accent.default,
-		transition: 'color .3s ease-in-out',
-		marginLeft: '1em',
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			float: 'right'
+		},
+		button: {
+			marginLeft: '.5em'
+		},
+		anchor: {
+			color: theme.colors.accent.default,
+			transition: 'color .3s ease-in-out',
+			marginLeft: '1em',
 
-		'&:hover': {
-			color: theme.colors.accent.focus
+			'&:hover': {
+				color: theme.colors.accent.focus
+			}
 		}
-	}
-}), { name: 'CardToolbar' });
+	}),
+	{ name: 'CardToolbar' }
+);
 
 const CardToolbar: React.FC<CardToolbarProps> = ({ name, definition, signature, className }) => {
 	const classes = useStyles();
 	return (
 		<div className={classNames(classes.root, className)}>
-			<CodeLink className={classes.button} symbol={definition} signature={signature}/>
-			<HashLink className={classNames(classes.button, classes.anchor)} to={`#${getAnchorName(definition, name ?? signature?.name)}`} title="Direct link to this symbol">
-				<Icon icon={faLink} size="lg"/>
+			<CodeLink className={classes.button} symbol={definition} signature={signature} />
+			<HashLink
+				className={classNames(classes.button, classes.anchor)}
+				to={`#${getAnchorName(definition, name ?? signature?.name)}`}
+				title="Direct link to this symbol"
+			>
+				<Icon icon={faLink} size="lg" />
 			</HashLink>
 		</div>
 	);

package/src/common/components/cards/EventCard.tsx

@@ -1,7 +1,7 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import Card from '../../containers/Card';
-import type { ParameterReferenceNode, PropertyReferenceNode, CallSignatureReferenceNode } from '../../reference';
+import type { CallSignatureReferenceNode, ParameterReferenceNode, PropertyReferenceNode } from '../../reference';
 import { getTag, hasTag } from '../../tools/CodeTools';
 import MarkdownParser from '../../tools/markdown/MarkdownParser';
 import { getAnchorName } from '../../tools/NodeTools';

package/src/common/components/cards/FunctionCardHeader.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import type {
 	CallSignatureReferenceNode,

package/src/common/components/cards/MethodCard.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import Card from '../../containers/Card';
 import type {

package/src/common/components/cards/PropertyCard.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import Card from '../../containers/Card';
 import type { AccessorReferenceNode, PropertyReferenceNode } from '../../reference';

package/src/common/components/codeBuilders/ReferenceTypeView.tsx

@@ -1,11 +1,11 @@
-import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
 import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
-import { makeStyles } from '@material-ui/styles';
+import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
+import { makeStyles } from '@mui/styles';
+import React from 'react';
+import type { ReferenceNode, ReferenceReferenceType, ReferenceType } from '../../reference';
 import { createExternalLink } from '../../tools/CodeTools';
 import TypeLink from '../TypeLink';
-import React from 'react';
 import Type from './Type';
-import type { ReferenceNode, ReferenceReferenceType, ReferenceType } from '../../reference';
 
 interface ReferenceTypeProps {
 	isOptional: boolean;

package/src/common/components/overviewTable/OverviewTable.tsx

@@ -1,27 +1,35 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
-import type { AccessorReferenceNode, EnumMemberReferenceNode, MethodReferenceNode, PropertyReferenceNode } from '../../reference';
+import type {
+	AccessorReferenceNode,
+	EnumMemberReferenceNode,
+	MethodReferenceNode,
+	PropertyReferenceNode
+} from '../../reference';
 import OverviewTableEntry from './OverviewTableEntry';
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		display: 'flex',
-		marginBottom: theme.spacing.unit * 2,
-		padding: theme.spacing.unit * 2,
-	},
-	column: {
-		minWidth: 300
-	},
-	heading: {
-		margin: 0,
-		marginBottom: theme.spacing.unit
-	},
-	list: {
-		margin: 0,
-		paddingLeft: theme.spacing.unit,
-		borderLeft: `${theme.spacing.unit / 2}px solid ${theme.colors.border}`
-	}
-}), { name: 'OverviewTable' });
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			display: 'flex',
+			marginBottom: theme.spacing.unit * 2,
+			padding: theme.spacing.unit * 2
+		},
+		column: {
+			minWidth: 300
+		},
+		heading: {
+			margin: 0,
+			marginBottom: theme.spacing.unit
+		},
+		list: {
+			margin: 0,
+			paddingLeft: theme.spacing.unit,
+			borderLeft: `${theme.spacing.unit / 2}px solid ${theme.colors.border}`
+		}
+	}),
+	{ name: 'OverviewTable' }
+);
 
 type OverviewTablePropertyEntry = PropertyReferenceNode | AccessorReferenceNode;
 
@@ -41,7 +49,9 @@ const OverviewTable: React.FC<OverviewTableProps> = ({ members, events, properti
 				<div className={classes.column}>
 					<h3 className={classes.heading}>Members</h3>
 					<ul className={classes.list}>
-						{members.map(member => <OverviewTableEntry key={member.id} node={member}/>)}
+						{members.map(member => (
+							<OverviewTableEntry key={member.id} node={member} />
+						))}
 					</ul>
 				</div>
 			) : null}
@@ -49,7 +59,9 @@ const OverviewTable: React.FC<OverviewTableProps> = ({ members, events, properti
 				<div className={classes.column}>
 					<h3 className={classes.heading}>Events</h3>
 					<ul className={classes.list}>
-						{events.map(event => <OverviewTableEntry key={event.id} node={event}/>)}
+						{events.map(event => (
+							<OverviewTableEntry key={event.id} node={event} />
+						))}
 					</ul>
 				</div>
 			) : null}
@@ -57,7 +69,9 @@ const OverviewTable: React.FC<OverviewTableProps> = ({ members, events, properti
 				<div className={classes.column}>
 					<h3 className={classes.heading}>Properties</h3>
 					<ul className={classes.list}>
-						{properties.map(prop => <OverviewTableEntry key={prop.id} node={prop}/>)}
+						{properties.map(prop => (
+							<OverviewTableEntry key={prop.id} node={prop} />
+						))}
 					</ul>
 				</div>
 			) : null}
@@ -65,7 +79,9 @@ const OverviewTable: React.FC<OverviewTableProps> = ({ members, events, properti
 				<div className={classes.column}>
 					<h3 className={classes.heading}>Methods</h3>
 					<ul className={classes.list}>
-						{methods.map(method => <OverviewTableEntry key={method.id} node={method}/>)}
+						{methods.map(method => (
+							<OverviewTableEntry key={method.id} node={method} />
+						))}
 					</ul>
 				</div>
 			) : null}

package/src/common/components/overviewTable/OverviewTableEntry.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import { HashLink } from 'react-router-hash-link';
 import type { ReferenceNode } from '../../reference';

package/src/common/containers/Card.tsx

@@ -1,32 +1,35 @@
-import React from 'react';
+import { makeStyles } from '@mui/styles';
 
 import classNames from 'classnames';
-import { makeStyles } from '@material-ui/styles';
+import React from 'react';
 
 interface CardProps {
 	className?: string;
 	id?: string;
 }
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		margin: `${theme.spacing.unit * 2}px 0`,
-		padding: theme.spacing.unit * 2,
-		borderLeft: `${theme.spacing.unit / 2}px solid ${theme.colors.border}`,
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			margin: `${theme.spacing.unit * 2}px 0`,
+			padding: theme.spacing.unit * 2,
+			borderLeft: `${theme.spacing.unit / 2}px solid ${theme.colors.border}`,
 
-		'& h3, & h4': {
-			margin: 0
-		},
+			'& h3, & h4': {
+				margin: 0
+			},
 
-		'& > :last-child': {
-			marginBottom: 0
-		},
+			'& > :last-child': {
+				marginBottom: 0
+			},
 
-		'&:target': {
-			backgroundColor: theme.colors.background.active
+			'&:target': {
+				backgroundColor: theme.colors.background.active
+			}
 		}
-	}
-}), { name: 'Card' });
+	}),
+	{ name: 'Card' }
+);
 
 const Card: React.FC<React.PropsWithChildren<CardProps>> = ({ className, id, children }) => {
 	const classes = useStyles();

package/src/common/containers/PageContent.tsx

@@ -1,27 +1,26 @@
+import { makeStyles } from '@mui/styles';
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		padding: theme.spacing.unit * 2,
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			padding: theme.spacing.unit * 2,
 
-		'& h2': {
-			margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 2}px`,
+			'& h2': {
+				margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 2}px`,
 
-			'&:first-child': {
-				marginTop: 0
+				'&:first-child': {
+					marginTop: 0
+				}
 			}
 		}
-	}
-}), { name: 'PageContent' });
+	}),
+	{ name: 'PageContent' }
+);
 
 const PageContent: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
 	const classes = useStyles();
-	return (
-		<div className={classes.root}>
-			{children}
-		</div>
-	);
+	return <div className={classes.root}>{children}</div>;
 };
 
 export default PageContent;

package/src/common/containers/PageHeader.tsx

@@ -1,33 +1,32 @@
+import { makeStyles } from '@mui/styles';
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		padding: theme.spacing.unit * 2,
-		position: 'relative',
-		backgroundColor: theme.colors.background.active,
-		color: theme.colors.text,
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			padding: theme.spacing.unit * 2,
+			position: 'relative',
+			backgroundColor: theme.colors.background.active,
+			color: theme.colors.text,
 
-		'& h1': {
-			fontWeight: 'normal',
-			margin: 0,
-			fontSize: '1.5em',
-			display: 'inline'
-		},
+			'& h1': {
+				fontWeight: 'normal',
+				margin: 0,
+				fontSize: '1.5em',
+				display: 'inline'
+			},
 
-		'& p': {
-			margin: 0
+			'& p': {
+				margin: 0
+			}
 		}
-	}
-}), { name: 'PageHeader' });
+	}),
+	{ name: 'PageHeader' }
+);
 
-const PageHeader: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+const PageHeader: React.FC = ({ children }) => {
 	const classes = useStyles();
-	return (
-		<div className={classes.root}>
-			{children}
-		</div>
-	);
+	return <div className={classes.root}>{children}</div>;
 };
 
 export default PageHeader;

package/src/common/containers/ReferencePackageContainer.tsx

@@ -1,5 +1,5 @@
 import { groupBy } from '@d-fischer/shared-utils';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React, { useContext, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 

package/src/common/htmlRenderer/HtmlRenderer.tsx

@@ -1,17 +1,17 @@
+import { dom } from '@fortawesome/fontawesome-svg-core';
+import { ServerStyleSheets, ThemeProvider } from '@mui/styles';
 import path from 'path';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
-import { ConfigContext } from '../config';
-import type { Config } from '../config/Config';
-import StaticRouterWithSuffix from './StaticRouterWithSuffix';
-import App from '../containers/App';
-import type RouterMode from './RouterMode';
 import { StaticRouter } from 'react-router-dom/server';
 import type { ArticleContent } from '../components/PageArticle';
 import { PageArticleContext } from '../components/PageArticle';
-import { ServerStyleSheets, ThemeProvider } from '@material-ui/styles';
+import { ConfigContext } from '../config';
+import type { Config } from '../config/Config';
+import App from '../containers/App';
 import theme from '../theme';
-import { dom } from '@fortawesome/fontawesome-svg-core';
+import type RouterMode from './RouterMode';
+import StaticRouterWithSuffix from './StaticRouterWithSuffix';
 
 const insertIntoSkeleton = (html: string, css: string, baseUrl: string, config: Config) =>
 	`<!doctype html>

package/src/common/pages/DocPage.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React, { useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import NavMenu from '../components/NavMenu';
@@ -33,7 +33,11 @@ const useStyles = makeStyles({
 
 const DocPage: React.FC = () => {
 	const classes = useStyles();
-	const { group: groupName, category: categoryName, article: articleName } = useParams() as unknown as DocPageRouteParams;
+	const {
+		group: groupName,
+		category: categoryName,
+		article: articleName
+	} = useParams() as unknown as DocPageRouteParams;
 	const article = useContext(PageArticleContext);
 	const config = useContext(ConfigContext);
 
@@ -49,7 +53,9 @@ const DocPage: React.FC = () => {
 
 		if (!title) {
 			if (groupName) {
-				const confArticle = confCategory.groups?.find(grp => grp.name === groupName)?.articles?.find(art => art.name === articleName);
+				const confArticle = confCategory.groups
+					?.find(grp => grp.name === groupName)
+					?.articles?.find(art => art.name === articleName);
 
 				if (!confArticle) {
 					return null;
@@ -78,18 +84,26 @@ const DocPage: React.FC = () => {
 		<div className={classes.root}>
 			{confCategory?.groups?.length && confCategory.groups.some(grp => grp.articles?.length) ? (
 				<NavMenu className={classes.nav}>
-					<NavMenuItem path={`/docs/${confCategory.name}/`}>{confCategory.indexTitle ?? confCategory.name}</NavMenuItem>
+					<NavMenuItem path={`/docs/${confCategory.name}/`}>
+						{confCategory.indexTitle ?? confCategory.name}
+					</NavMenuItem>
 					{confCategory.groups.map(grp => (
 						<NavMenuGroup key={grp.name} title={grp.title}>
-							{grp.articles?.map(art => 'externalLink' in art ? (
-								<NavMenuItem key={art.name} external path={art.externalLink} title={art.title}>
-									{art.title}
-								</NavMenuItem>
-							) : (
-								<NavMenuItem key={art.name} path={`/docs/${confCategory!.name}/${grp.name}/${art.name}`} title={art.title}>
-									{art.title}
-								</NavMenuItem>
-							))}
+							{grp.articles?.map(art =>
+								'externalLink' in art ? (
+									<NavMenuItem key={art.name} external path={art.externalLink} title={art.title}>
+										{art.title}
+									</NavMenuItem>
+								) : (
+									<NavMenuItem
+										key={art.name}
+										path={`/docs/${confCategory!.name}/${grp.name}/${art.name}`}
+										title={art.title}
+									>
+										{art.title}
+									</NavMenuItem>
+								)
+							)}
 						</NavMenuGroup>
 					))}
 				</NavMenu>
@@ -101,7 +115,7 @@ const DocPage: React.FC = () => {
 					</PageHeader>
 				) : null}
 				<PageContent>
-					<PageArticle mockContent={mockContent}/>
+					<PageArticle mockContent={mockContent} />
 				</PageContent>
 			</div>
 		</div>

package/src/common/pages/InterfacePage.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import { Navigate, useParams } from 'react-router-dom';
 import BetaNotice from '../components/BetaNotice';

package/src/common/pages/TypeAliasPage.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import { Navigate, useParams } from 'react-router-dom';
 import BetaNotice from '../components/BetaNotice';

package/src/common/theme.ts

@@ -31,7 +31,7 @@ const theme = {
 export default theme;
 export type Theme = typeof theme;
 
-declare module '@material-ui/styles' {
+declare module '@mui/styles' {
 	// eslint-disable-next-line @typescript-eslint/no-empty-interface
 	interface DefaultTheme extends Theme {}
 }