doc: generate documentation from examples (#3108)

* generate example docs with images

* generate example docs

* fix: fix icons size and scale

* doc: update doc generation

Author: mfazekas

.eslintrc.js

@@ -90,6 +90,7 @@ module.exports = {
         project: [
           './tsconfig.json',
           './example/tsconfig.json',
+          './scripts/tsconfig.json',
           './fabricexample/tsconfig.json',
           './plugin/src/__tests__/tsconfig.eslint.json',
         ],

.github/workflows/ios-actions.yml

@@ -91,13 +91,13 @@ jobs:
           brew install xcbeautify
 
       - name: Build for detox
-        run: set -o pipefail && NSUnbufferedIO=YES  yarn detox build --configuration ios.debug 2>&1 | xcbeautify -qq
+        run: set -o pipefail && NSUnbufferedIO=YES  yarn detox build --configuration ios.debug.ci 2>&1 | xcbeautify -qq --renderer github-actions
 
       - name: Test with detox
         if: inputs.NEW_ARCH != 1
         run: |
           npx detox --version
-          yarn detox test --configuration ios.debug --debug-synchronization 500 --loglevel trace --record-logs all --take-screenshots all
+          yarn detox test --configuration ios.debug.ci --debug-synchronization 500 --loglevel trace --record-logs all --take-screenshots all  | xcbeautify -qq --renderer github-actions
         env:
           SKIP_TESTS_NO_METAL: ${{ inputs.MAP_IMPL == 'mapbox' || inputs.MAP_IMPL == 'mapbox11' }}
 

__tests__/__mocks__/react-native.mock.js

@@ -2,6 +2,8 @@ jest.mock('react-native/Libraries/Image/resolveAssetSource', () => {
   return () => ({ uri: 'asset://test.png' });
 });
 
+jest.mock('../../src/assets/heading.png', () => 'heading.png');
+
 jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => {
   function MockEventEmitter() {}
   MockEventEmitter.prototype.addListener = jest.fn(() => ({

__tests__/components/BackgroundLayer.test.js

@@ -5,7 +5,7 @@ import BackgroundLayer from '../../src/components/BackgroundLayer';
 
 describe('BackgroundLayer', () => {
   test('renders correctly with default props', () => {
-    const { container: backgroundLayer } = render(
+    const { UNSAFE_root: backgroundLayer } = render(
       <BackgroundLayer id="requiredBackgroundLayerID" />,
     );
 
@@ -28,7 +28,7 @@ describe('BackgroundLayer', () => {
       style: { visibility: 'none' },
     };
 
-    const { container: backgroundLayer } = render(
+    const { UNSAFE_root: backgroundLayer } = render(
       <BackgroundLayer {...testProps} />,
     );
     const { props } = backgroundLayer;

__tests__/components/CircleLayer.test.js

@@ -5,7 +5,7 @@ import CircleLayer from '../../src/components/CircleLayer';
 
 describe('CircleLayer', () => {
   test('renders correctly with default props', () => {
-    const { container: circleLayer } = render(
+    const { UNSAFE_root: circleLayer } = render(
       <CircleLayer id="requiredCircleLayerID" />,
     );
     const { props } = circleLayer;
@@ -27,7 +27,9 @@ describe('CircleLayer', () => {
       style: { visibility: 'none' },
     };
 
-    const { container: circleLayer } = render(<CircleLayer {...customProps} />);
+    const { UNSAFE_root: circleLayer } = render(
+      <CircleLayer {...customProps} />,
+    );
     const { props } = circleLayer;
 
     expect(props.id).toStrictEqual(customProps.id);

__tests__/components/HeatmapLayer.test.js

@@ -5,7 +5,7 @@ import HeatmapLayer from '../../src/components/HeatmapLayer';
 
 describe('HeatmapLayer', () => {
   test('renders correctly with default props', () => {
-    const { container: heatmapLayer } = render(
+    const { UNSAFE_root: heatmapLayer } = render(
       <HeatmapLayer id="requiredHeatmapLayerID" />,
     );
     const { props } = heatmapLayer;
@@ -25,7 +25,9 @@ describe('HeatmapLayer', () => {
       maxZoomLevel: 8,
       style: { visibility: 'none' },
     };
-    const { container: heatmapLayer } = render(<HeatmapLayer {...testProps} />);
+    const { UNSAFE_root: heatmapLayer } = render(
+      <HeatmapLayer {...testProps} />,
+    );
     const { props } = heatmapLayer;
 
     expect(props.id).toStrictEqual(testProps.id);

android/src/main/mapbox-v11-compat/v11/com/mapbox/rnmbx/v11compat/Image.kt

@@ -65,4 +65,4 @@ fun emptyImage(width: Int, height: Int): Image {
     return Image(
         width, height, DataRef.allocateNative(width * height * 4)
     )
-}
+}

docs/Annotation.md

@@ -1,9 +1,12 @@
 <!-- This file was autogenerated from Annotation.tsx do not modify -->
 
+  
+
 ```tsx
 import { Annotation } from '@rnmapbox/maps';
 
 Annotation
+
 ```
 
 
@@ -46,7 +49,7 @@ FIX ME NO DESCRIPTION
 func
 ```
 FIX ME NO DESCRIPTION
-*signature:*`(x:number) => number`
+*signature:*`(x:number) =&gt; number`
 
   _defaults to:_ `Easing.linear`
 
@@ -67,7 +70,7 @@ FIX ME NO DESCRIPTION
 func
 ```
 FIX ME NO DESCRIPTION
-*signature:*`(event:OnPressEvent) => void`
+*signature:*`(event:OnPressEvent) =&gt; void`