Merge branch 'develop' into feature/85-ss-rendering

aeagle · aeagle · commit a295e84df89a · 2022-08-01T19:57:46.000+01:00
# Conflicts:
#	src/components/Space.tsx
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -6,18 +6,13 @@ module.exports = {
 		"@storybook/addon-actions",
 		"@storybook/addon-links",
 		{
-			name: "@storybook/addon-docs/preset",
+			name: "@storybook/addon-docs",
 			options: {
 				configureJSX: true,
 				inlineStories: false,
 			},
 		},
 	],
-	typescript: {
-		check: true,
-		checkOptions: {},
-		reactDocgen: "react-docgen-typescript",
-	},
 	webpackFinal: async (config, { configType }) => {
 		if (process.env.NODE === "production") {
 			config.output.publicPath = "/react-spaces/docs";
@@ -31,4 +26,7 @@ module.exports = {
 
 		return config;
 	},
+	reactOptions: {
+		strictMode: true,
+	},
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,22 +32,22 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.5.5",
-		"@rollup/plugin-commonjs": "^21.0.1",
 		"@rollup/plugin-babel": "^5.3.0",
+		"@rollup/plugin-commonjs": "^21.0.1",
 		"@rollup/plugin-node-resolve": "^13.0.6",
-		"@storybook/addon-actions": "^6.3.12",
-		"@storybook/addon-docs": "^6.3.12",
+		"@storybook/addon-actions": "^6.5.5",
+		"@storybook/addon-docs": "^6.5.5",
 		"@storybook/addon-knobs": "^6.3.1",
-		"@storybook/addon-links": "^6.3.12",
-		"@storybook/addons": "^6.3.12",
-		"@storybook/react": "^6.3.12",
+		"@storybook/addon-links": "^6.5.5",
+		"@storybook/addons": "^6.5.5",
+		"@storybook/react": "^6.5.5",
 		"@testing-library/jest-dom": "^5.15.0",
 		"@testing-library/react": "^12.1.2",
 		"@types/jest": "^24.0.15",
 		"@types/node": "^12.6.8",
 		"@types/prop-types": "^15.7.3",
-		"@types/react": "^16.8.23",
-		"@types/react-dom": "^16.8.4",
+		"@types/react": "^18.0.9",
+		"@types/react-dom": "^18.0.5",
 		"acorn": "^7.1.1",
 		"awesome-typescript-loader": "^5.2.1",
 		"babel-loader": "^8.0.6",
@@ -56,18 +56,18 @@
 		"is-svg": "^4.2.2",
 		"jest": "^25.4.0",
 		"jest-expect-message": "^1.0.2",
-		"node-sass": "^4.14.1",
 		"prettier": "^1.19.1",
-		"react": "^17.0.2",
+		"react": "^18.1.0",
 		"react-docgen-typescript-loader": "^3.7.0",
-		"react-dom": "^17.0.2",
+		"react-dom": "^18.1.0",
 		"rollup": "^2.60.0",
 		"rollup-plugin-fork-ts-checker": "0.0.6",
 		"rollup-plugin-postcss": "^3.1.8",
 		"rollup-plugin-sourcemaps": "^0.6.3",
 		"rollup-plugin-typescript2": "^0.31.0",
 		"rollup-plugin-uglify": "^6.0.4",
 		"rollup-watch": "^4.3.1",
+		"sass": "^1.52.1",
 		"sass-loader": "^8.0.2",
 		"ts-jest": "^25.4.0",
 		"ts-loader": "^6.2.1",
@@ -78,8 +78,8 @@
 		"cssstyle": "2.3.0"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17",
-		"react-dom": "^16.8.0 || ^17"
+		"react": "^16.8.0 || ^17 || ^18",
+		"react-dom": "^16.8.0 || ^17 || ^18"
 	},
 	"scripts": {
 		"start": "rollup -c -w",
diff --git a/proposed.txt b/proposed.txt
diff --git a/src/components/Centered.tsx b/src/components/Centered.tsx
@@ -1,3 +1,7 @@
 import * as React from "react";
 
-export const Centered: React.FC = (props) => <div className={`spaces-centered`}>{props.children}</div>;
+interface IProps {
+	children?: React.ReactNode;
+}
+
+export const Centered: React.FC<IProps> = (props) => <div className={`spaces-centered`}>{props.children}</div>;
diff --git a/src/components/CenteredVertically.tsx b/src/components/CenteredVertically.tsx
@@ -1,3 +1,7 @@
 import * as React from "react";
 
-export const CenteredVertically: React.FC = (props) => <div className={`spaces-centered-vertically`}>{props.children}</div>;
+interface IProps {
+	children?: React.ReactNode;
+}
+
+export const CenteredVertically: React.FC<IProps> = (props) => <div className={`spaces-centered-vertically`}>{props.children}</div>;
diff --git a/src/components/Custom.tsx b/src/components/Custom.tsx
@@ -4,6 +4,7 @@ import { Space } from "./Space";
 import * as PropTypes from "prop-types";
 import { IReactSpaceCommonProps } from "../core-react";
 import { anchoredProps, IAnchorProps } from "./Anchored";
+import { omit } from '../core-utils';
 
 type ICustomProps = Omit<IReactSpaceCommonProps & IAnchorProps, "size"> & {
 	type?: Type;
@@ -22,7 +23,7 @@ type ICustomProps = Omit<IReactSpaceCommonProps & IAnchorProps, "size"> & {
 	resizeTypes?: ResizeType[];
 };
 
-const customProps = {
+const customProps = omit({
 	...anchoredProps,
 	...{
 		type: PropTypes.oneOf([Type.Positioned, Type.Fill, Type.Anchored]),
@@ -38,7 +39,7 @@ const customProps = {
 		height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 		resizeTypes: PropTypes.array,
 	},
-};
+}, 'size');
 
 export const Custom: React.FC<ICustomProps> = ({
 	children,
diff --git a/src/components/Layer.tsx b/src/components/Layer.tsx
@@ -2,7 +2,12 @@ import * as React from "react";
 import { LayerContext } from "../core-react";
 import * as PropTypes from "prop-types";
 
-export const Layer: React.FC<{ zIndex: number }> = (props) => <LayerContext.Provider value={props.zIndex}>{props.children}</LayerContext.Provider>;
+interface IProps {
+	zIndex: number;
+	children?: React.ReactNode;
+}
+
+export const Layer: React.FC<IProps> = (props) => <LayerContext.Provider value={props.zIndex}>{props.children}</LayerContext.Provider>;
 
 Layer.propTypes = {
 	zIndex: PropTypes.number.isRequired,
diff --git a/src/components/Options.tsx b/src/components/Options.tsx
@@ -1,6 +1,10 @@
 import * as React from "react";
 import { IReactSpacesOptions, OptionsContext } from "../core-react";
 
-export const Options: React.FC<IReactSpacesOptions> = ({ children, ...opts }) => {
+interface IProps extends IReactSpacesOptions {
+	children?: React.ReactNode;
+}
+
+export const Options: React.FC<IProps> = ({ children, ...opts }) => {
 	return <OptionsContext.Provider value={opts}>{children}</OptionsContext.Provider>;
 };
diff --git a/src/components/Space.tsx b/src/components/Space.tsx
@@ -1,5 +1,5 @@
 import { CenterType, ResizeHandlePlacement, AnchorType, Type } from "../core-types";
-import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceInnerProps } from "../core-react";
+import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceInnerProps, useEffectOnce } from "../core-react";
 import * as React from "react";
 import { Centered } from "./Centered";
 import { CenteredVertically } from "./CenteredVertically";
@@ -59,7 +59,7 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 		...{ id: props.id || props.wrapperInstance["_react_spaces_uniqueid"] },
 	});
 
-	React.useEffect(() => {
+	useEffectOnce(() => {
 		space.element = elementRef.current!;
 
 		if (space.element.getAttribute("data-ssr") === "1") {
diff --git a/src/components/stories/00-docs/02-CommonProperties.stories.mdx b/src/components/stories/00-docs/02-CommonProperties.stories.mdx
@@ -5,9 +5,15 @@ import { CommonHeader, PropsTable, StandardProps } from "../Utils";
 
 <Meta title="React Spaces/Common properties" />
 
-## Useful properties
+## Common properties
 
-Applies to `<Fill />` `<Left />` `<Top />` `<Right />` `<Bottom />` `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />` `<Positioned />` `<Custom />`
+Every space has a set of common properties.
+
+#### Applies to
+
+`<ViewPort />` `<Fixed />` `<Fill />` `<Left />` `<Top />` `<Right />` `<Bottom />` `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />` `<Positioned />` `<Custom />`
+
+#### Properties
 
 <PropsTable>
 	<StandardProps />
diff --git a/src/components/stories/00-docs/03-UsefulEvents.stories.mdx b/src/components/stories/00-docs/03-UsefulEvents.stories.mdx
@@ -22,17 +22,11 @@ Triggered when a mouse/touch resize starts. The resize action can be cancelled b
 #### Example
 
 ```tsx
-const Example = () => {
-	const shouldResize = // logic to determine if resizing should be possible
-
-	return (
-		<LeftResizable 
-			onResizeStart={
-				(resizeType) => shouldResize}>
-		...
-		</LeftResizable>
-	)
-}
+const Example = () => 
+	<LeftResizable 
+		onResizeStart={(resizeType) => /* logic to determine if resizing should be possible */}>
+	...
+	</LeftResizable>
 ```
 
 ### onResizeEnd
@@ -63,16 +57,7 @@ const Example = () => {
 	return (
 		<ViewPort>
 			<LeftResizable 
-				onResizeEnd={
-					(
-						newSize: number,
-						domRect: DOMRect,
-						resizeType: 
-							"resize-left" | 
-							"resize-top" | 
-							"resize-right" | 
-							"resize-bottom"
-					) => setSize(newSize)}>
+				onResizeEnd={(newSize, domRect, resizeType) => setSize(newSize)}>
 			  ...
 			</LeftResizable>
 		</ViewPort>
diff --git a/src/components/stories/00-docs/05-CustomHandles.stories.mdx b/src/components/stories/00-docs/05-CustomHandles.stories.mdx
@@ -9,11 +9,17 @@ import { CommonHeader, PropsTable, StandardProps, AnchoredProps, ResizableProps
 
 <Meta title="React Spaces/Custom resize handles" />
 
-# Custom resize handles
+## Custom resize handles
 
-React spaces allows you to pass custom components to be used as resize handles using the `handleRender` prop. 
+You can pass custom components to be used as resize handles using the `handleRender` prop. 
 This is an alternative to overriding the default css classes and will give you more control.
 
+#### Applies to
+
+`<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />`
+
+#### Example
+
 Pass a function to the `handleRender` prop that will be called for every resize handle on that component. 
 
 ```tsx
diff --git a/src/components/stories/Utils.tsx b/src/components/stories/Utils.tsx
@@ -23,7 +23,7 @@ export const CommonHeader = () => (
 	</div>
 );
 
-export const PropsTable: React.FC = (props) => (
+export const PropsTable: React.FC<{ children?: React.ReactNode }> = (props) => (
 	<table className="sbdocs sbdocs-table properties-table css-lckf62">
 		<tbody>
 			<tr>
@@ -47,7 +47,7 @@ const propHeaderStyle: CSSProperties = {
 	fontWeight: 500,
 };
 
-export const PropsHeader: React.FC = (props) => (
+export const PropsHeader: React.FC<{ children?: React.ReactNode }> = (props) => (
 	<tr>
 		<td colSpan={4} style={propHeaderStyle}>
 			{props.children}
diff --git a/src/core-react.ts b/src/core-react.ts
diff --git a/src/core-utils.ts b/src/core-utils.ts
diff --git a/src/index.ts b/src/index.ts
