Replace default props

package.json

@@ -90,12 +90,12 @@
     "to-ast": "^1.0.0",
     "type-detect": "^4.0.8",
     "unist-util-visit": "^2.0.0",
-    "webpack-dev-server": "^4.9.2",
+    "webpack-dev-server": "^4.15.0",
     "webpack-merge": "^4.2.2"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=18.0",
+    "react-dom": ">=18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

src/client/rsg-components/Examples/Examples.tsx

@@ -26,7 +26,7 @@ const Examples: React.FunctionComponent<ExamplesRenderer> = ({ examples, name, e
 								key={`${codeRevision}/${index}`}
 								name={name}
 								index={index}
-								settings={example.settings}
+								settings={example.settings ?? {}}
 								exampleMode={exampleMode}
 							/>
 						);

src/client/rsg-components/Markdown/List/ListRenderer.tsx

@@ -1,5 +1,4 @@
 import React, { cloneElement, Children } from 'react';
-import PropTypes from 'prop-types';
 import cx from 'clsx';
 import Styled, { JssInjectedProps } from 'rsg-components/Styled';
 import * as Rsg from '../../../../typings';
@@ -30,7 +29,7 @@ interface ListProps extends JssInjectedProps {
 
 export const ListRenderer: React.FunctionComponent<ListProps> = ({
 	classes,
-	ordered,
+	ordered = false,
 	children,
 }) => {
 	const Tag = ordered ? 'ol' : 'ul';
@@ -45,13 +44,5 @@ export const ListRenderer: React.FunctionComponent<ListProps> = ({
 		</Tag>
 	);
 };
-ListRenderer.propTypes = {
-	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
-	ordered: PropTypes.bool,
-	children: PropTypes.any.isRequired,
-};
-ListRenderer.defaultProps = {
-	ordered: false,
-};
 
 export default Styled<ListProps>(styles)(ListRenderer);

src/client/rsg-components/Markdown/Table/TableCellRenderer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Styled, { JssInjectedProps } from 'rsg-components/Styled';
 import * as Rsg from '../../../../typings';
 
@@ -24,23 +23,13 @@ interface TableCellProps extends JssInjectedProps {
 
 export const TableCellRenderer: React.FunctionComponent<TableCellProps> = ({
 	classes,
-	header,
+	header = false,
 	children,
 }) => {
 	if (header) {
 		return <th className={classes.th}>{children}</th>;
 	}
-
 	return <td className={classes.td}>{children}</td>;
 };
 
-TableCellRenderer.propTypes = {
-	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
-	header: PropTypes.bool,
-	children: PropTypes.any.isRequired,
-};
-TableCellRenderer.defaultProps = {
-	header: false,
-};
-
 export default Styled<TableCellProps>(styles)(TableCellRenderer);

src/client/rsg-components/Playground/Playground.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
 import Preview from 'rsg-components/Preview';
 import Para from 'rsg-components/Para';
@@ -31,19 +30,6 @@ interface PlaygroundState {
 }
 
 class Playground extends Component<PlaygroundProps, PlaygroundState> {
-	public static propTypes = {
-		code: PropTypes.string.isRequired,
-		evalInContext: PropTypes.func.isRequired,
-		index: PropTypes.number.isRequired,
-		name: PropTypes.string.isRequired,
-		exampleMode: PropTypes.string.isRequired,
-		settings: PropTypes.object,
-	};
-
-	public static defaultProps = {
-		settings: {},
-	};
-
 	public static contextType = Context;
 
 	private handleChange = debounce((code) => {

src/client/rsg-components/Ribbon/RibbonRenderer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Styled, { JssInjectedProps } from 'rsg-components/Styled';
 import * as Rsg from '../../../typings';
 
@@ -37,7 +36,11 @@ interface RibbonProps extends JssInjectedProps {
 	text?: string;
 }
 
-export const RibbonRenderer: React.FunctionComponent<RibbonProps> = ({ classes, url, text }) => {
+export const RibbonRenderer: React.FunctionComponent<RibbonProps> = ({
+	classes,
+	url,
+	text = 'Fork me on GitHub',
+}) => {
 	return (
 		<footer className={classes.root}>
 			<a href={url} className={classes.link}>
@@ -47,14 +50,4 @@ export const RibbonRenderer: React.FunctionComponent<RibbonProps> = ({ classes,
 	);
 };
 
-RibbonRenderer.defaultProps = {
-	text: 'Fork me on GitHub',
-};
-
-RibbonRenderer.propTypes = {
-	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
-	url: PropTypes.string.isRequired,
-	text: PropTypes.string,
-};
-
 export default Styled<RibbonProps>(styles)(RibbonRenderer);

src/client/rsg-components/StyleGuide/StyleGuide.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import TableOfContents from 'rsg-components/TableOfContents';
 import StyleGuideRenderer from 'rsg-components/StyleGuide/StyleGuideRenderer';
 import Sections from 'rsg-components/Sections';
@@ -50,22 +49,6 @@ interface StyleGuideState {
 }
 
 export default class StyleGuide extends Component<StyleGuideProps, StyleGuideState> {
-	public static propTypes = {
-		codeRevision: PropTypes.number.isRequired,
-		cssRevision: PropTypes.string.isRequired,
-		config: PropTypes.object.isRequired,
-		slots: PropTypes.object.isRequired,
-		sections: PropTypes.array.isRequired,
-		welcomeScreen: PropTypes.bool,
-		patterns: PropTypes.array,
-		displayMode: PropTypes.string,
-		allSections: PropTypes.array.isRequired,
-		pagePerSection: PropTypes.bool,
-	};
-	public static defaultProps = {
-		displayMode: DisplayModes.all,
-	};
-
 	public state = {
 		error: false,
 		info: null,
@@ -85,7 +68,7 @@ export default class StyleGuide extends Component<StyleGuideProps, StyleGuideSta
 			sections,
 			welcomeScreen,
 			patterns,
-			displayMode,
+			displayMode = DisplayModes.all,
 			allSections,
 			pagePerSection,
 			codeRevision,

src/client/rsg-components/TabButton/TabButtonRenderer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Styled, { JssInjectedProps } from 'rsg-components/Styled';
 import { Styles } from 'jss';
 import cx from 'clsx';
@@ -55,7 +54,7 @@ export const TabButtonRenderer: React.FunctionComponent<TabButtonProps> = ({
 	name,
 	className,
 	onClick,
-	active,
+	active = false,
 	children,
 }) => {
 	const classNames = cx(classes.button, className, {
@@ -75,16 +74,4 @@ export const TabButtonRenderer: React.FunctionComponent<TabButtonProps> = ({
 	);
 };
 
-TabButtonRenderer.propTypes = {
-	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
-	name: PropTypes.string.isRequired,
-	className: PropTypes.string,
-	onClick: PropTypes.func.isRequired,
-	active: PropTypes.bool,
-	children: PropTypes.any.isRequired,
-};
-TabButtonRenderer.defaultProps = {
-	active: false,
-};
-
 export default Styled<TabButtonProps>(styles)(TabButtonRenderer);

src/client/rsg-components/TableOfContents/TableOfContents.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import ComponentsList from 'rsg-components/ComponentsList';
 import TableOfContentsRenderer from 'rsg-components/TableOfContents/TableOfContentsRenderer';
 import filterSectionsByName from '../../utils/filterSectionsByName';
@@ -10,21 +9,10 @@ interface TableOfContentsProps {
 	sections: Rsg.Section[];
 	useRouterLinks?: boolean;
 	tocMode?: string;
-	loc: { hash: string; pathname: string };
+	loc?: { hash: string; pathname: string };
 }
 
 export default class TableOfContents extends Component<TableOfContentsProps> {
-	public static propTypes = {
-		sections: PropTypes.array.isRequired,
-		useRouterLinks: PropTypes.bool,
-		tocMode: PropTypes.string,
-		loc: PropTypes.object,
-	};
-
-	public static defaultProps = {
-		loc: window.location,
-	};
-
 	public state = {
 		searchTerm: '',
 	};
@@ -36,7 +24,7 @@ export default class TableOfContents extends Component<TableOfContentsProps> {
 		useHashId = false
 	): { content: React.ReactElement; containsSelected: boolean } {
 		// Match selected component in both basic routing and pagePerSection routing.
-		const { hash, pathname } = this.props.loc;
+		const { hash, pathname } = this.props.loc ?? window.location;
 		const windowHash = pathname + (useRouterLinks ? hash : getHash(hash));
 
 		let childrenContainSelected = false;

src/client/rsg-components/Text/TextRenderer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'clsx';
 import Styled, { JssInjectedProps } from 'rsg-components/Styled';
 import * as Rsg from '../../../typings';
@@ -49,9 +48,9 @@ export interface TextProps extends JssInjectedProps {
 export const TextRenderer: React.FunctionComponent<TextProps> = ({
 	classes,
 	semantic,
-	size,
-	color,
-	underlined,
+	size = 'inherit',
+	color = 'base',
+	underlined = false,
 	children,
 	...props
 }) => {
@@ -68,19 +67,4 @@ export const TextRenderer: React.FunctionComponent<TextProps> = ({
 	);
 };
 
-TextRenderer.propTypes = {
-	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
-	semantic: PropTypes.oneOf(['em', 'strong']),
-	size: PropTypes.oneOf(['inherit', 'small', 'base', 'text']),
-	color: PropTypes.oneOf(['base', 'light']),
-	underlined: PropTypes.bool,
-	children: PropTypes.any.isRequired,
-};
-
-TextRenderer.defaultProps = {
-	size: 'inherit',
-	color: 'base',
-	underlined: false,
-};
-
 export default Styled<TextProps>(styles)(TextRenderer);