Merge pull request #11 from QADRAX/feature/BasicComponent

fix: final package typings

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-super-tilemap",
   "license": "MIT",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "description": "React implementation of a low-level 2D tilemap board optimized for high-performance rendering in web browsers",
   "author": "Carlos Cuadra",

src/components/Camera/ManualCamera/ManualCamera.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { CameraEventListener } from '../CameraEventListener/CameraEventListener';
-import { ManualCameraProps } from './ManualCamera.types';
+import { ManualCameraSettings } from './ManualCamera.types';
 import { useHandlers } from './ManualCamera.useHandlers';
 import { useSyncPosition } from './ManualCamera.useSyncPosition';
 
@@ -13,7 +13,7 @@ import { useSyncPosition } from './ManualCamera.useSyncPosition';
  *
  * @param props ManualCameraProps
  */
-export const ManualCamera: FunctionComponent<ManualCameraProps> = (props) => {
+export const ManualCamera: FunctionComponent<ManualCameraSettings> = (props) => {
   useSyncPosition(props.position, props.zoom);
 
   const clickable = props.clickable ?? true;

src/components/Camera/ManualCamera/ManualCamera.types.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 import { TilePosition } from '../../../types/TilePosition';
 
-export type ManualCameraProps = {
+export type ManualCameraSettings = {
   /**
    * Camera position
    */
@@ -14,3 +15,7 @@ export type ManualCameraProps = {
    */
   clickable?: boolean;
 };
+
+export type ManualCameraProps = ManualCameraSettings & {
+  children?: ReactNode;
+};

src/components/Camera/ManualCamera/ManualCamera.useSyncPosition.ts

@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import { useTilemapContext } from '../../Tilemap/TilemapContext/useTilemapContext';
-import { ManualCameraProps } from './ManualCamera.types';
+import { ManualCameraSettings } from './ManualCamera.types';
 
 export function useSyncPosition(
-  position: ManualCameraProps['position'],
-  zoom: ManualCameraProps['zoom']
+  position: ManualCameraSettings['position'],
+  zoom: ManualCameraSettings['zoom']
 ) {
   const { state, actions } = useTilemapContext();
 

src/components/Camera/ThirdPersonCamera/ThirdPersonCamera.types.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { RecenterCameraMotion } from '../../../types/Motions';
 import { TilePosition } from '../../../types/TilePosition';
 
@@ -68,4 +69,7 @@ export type ThirdPersonCameraEvents = {
   onZoomMotionEnd?: () => void;
 };
 
-export type ThirdPersonCameraProps = ThirdPersonCameraSettings & ThirdPersonCameraEvents;
+export type ThirdPersonCameraProps = ThirdPersonCameraSettings &
+  ThirdPersonCameraEvents & {
+    children?: ReactNode;
+  };

src/components/Elements/ManualElement/ElementSync/ElementSync.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import { TilemapElement } from '../../../../types/TilemapElement';
 import { isEqual } from '../../../../utils/deepCompare';
 import { TilemapContext } from '../../../Tilemap/TilemapContext/TilemapContext';
-import { ManualElementProps } from '../ManualElement.types';
+import { ManualElementSettings } from '../ManualElement.types';
 
 /**
  * Syncs the element with the tilemap context.
  */
-export class ElementSync extends React.PureComponent<ManualElementProps> {
+export class ElementSync extends React.PureComponent<ManualElementSettings> {
   static contextType = TilemapContext;
   context!: React.ContextType<typeof TilemapContext>;
 
-  componentDidUpdate(prevProps: Readonly<ManualElementProps>): void {
+  componentDidUpdate(prevProps: Readonly<ManualElementSettings>): void {
     const prevElement: TilemapElement = {
       tilePosition: prevProps.tilePosition,
       spriteKey: prevProps.spriteKey,

src/components/Elements/ManualElement/ManualElement.types.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 import { TilePosition } from '../../../types/TilePosition';
 
-export type ManualElementProps = {
+export type ManualElementSettings = {
   /**
    * The position of the element in the tilemap.
    */
@@ -18,3 +19,7 @@ export type ManualElementProps = {
    */
   elementKey: string;
 };
+
+export type ManualElementProps = ManualElementSettings & {
+  children?: ReactNode;
+};

src/components/Elements/MotionableElement/MotionableElement.types.ts

@@ -1,7 +1,8 @@
+import { ReactNode } from 'react';
 import { MotionSettings } from '../../../types/Motions';
-import { ManualElementProps } from '../ManualElement/ManualElement.types';
+import { ManualElementSettings } from '../ManualElement/ManualElement.types';
 
-export type MotionableElementSettings = ManualElementProps & {
+export type MotionableElementSettings = ManualElementSettings & {
   spriteKeyNorthMotion?: string;
   spriteKeySouthMotion?: string;
   spriteKeyEastMotion?: string;
@@ -13,4 +14,7 @@ export type MotionableElementEvents = {
   onMotionComplete?: () => void;
 };
 
-export type MotionableElementProps = MotionableElementSettings & MotionableElementEvents;
+export type MotionableElementProps = MotionableElementSettings &
+  MotionableElementEvents & {
+    children?: ReactNode;
+  };

src/components/Tilemap/Tilemap.types.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { SpriteDefinition } from '../../types/SpriteDefinition';
 import { TilePosition } from '../../types/TilePosition';
 
@@ -108,4 +109,7 @@ export type TilemapSettings = {
  *
  * @public
  */
-export type TilemapProps = TilemapSettings & TilemapEvents;
+export type TilemapProps = TilemapSettings &
+  TilemapEvents & {
+    children?: ReactNode;
+  };