Merge branch 'main' into @km1chno/fix-inspector-stack

.github/workflows/lint-extension.yml

@@ -11,6 +11,10 @@ on:
       - '.github/workflows/lint-extension.yml'
       - 'packages/vscode-extension/src/**'
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   check:
     if: github.repository == 'software-mansion/radon-ide'

.github/workflows/typecheck-extension.yml

@@ -11,6 +11,10 @@ on:
       - ".github/workflows/typecheck-extension.yml"
       - "packages/vscode-extension/**"
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   check:
     if: github.repository == 'software-mansion/radon-ide'

README.md

@@ -22,7 +22,7 @@ The current version supports developing on macOS for Android and iOS platforms w
 
 ### 💽 Installation
 
-For installation instructions head to [INSTALLATION](https://ide.swmansion.com/docs/installation) section.
+For installation instructions head to [INSTALLATION](https://ide.swmansion.com/docs/getting-started/installation) section.
 
 ### 💻 Usage
 

packages/docs/docs/features/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Features",
+  "position": 2,
+  "link": {
+    "type": "generated-index"
+  }
+}

packages/docs/docs/features/debugging-and-logging.md

@@ -0,0 +1,61 @@
+---
+id: debugging-and-logging
+title: Debugging and logging
+sidebar_position: 2
+---
+
+Breakpoints can be a powerful debugging tool. Thanks to Radon IDE, breakpoints work in VSCode without any additional setup for React Native and Expo projects.
+
+## Setting a breakpoint
+
+You can set a breakpoint on any JavaScript or TypeScript line of code. To set a breakpoint, click `Click to add a breakpoint` on the left margin of the line of code in your editor. The breakpoint will appear as a red dot next to this line.
+
+<img width="400" src="/img/docs/ide_add_breakpoint.png" className="shadow-image"/>
+
+The Radon IDE will automatically pause the application execution whenever it encounters a breakpoint.
+
+<video autoPlay loop width="700" controls className="shadow-image">
+  <source src="/video/3_sztudio_debugger.mp4" type="video/mp4"/>
+</video>
+
+## Debugger options
+
+When code execution is paused, the debugger overlay includes several options for further debugging:
+
+- **Resume execution** - resume code execution till the function ends, crashes or the debugger encounters another breakpoint,
+- **Step over** - execute the current line of code and pause on the next line,
+- **Open debugger console** - open the built-in VSCode log console.
+
+<img width="300" src="/img/docs/ide_paused_in_debugger.png" className="shadow-image"/>
+
+## Opening logs
+
+Radon IDE keeps track of the application logs. You can access the device logs by clicking the `Logs` button in the top-right corner of the panel.
+
+<img width="200" src="/img/docs/ide_logs_button.png" className="shadow-image"/>
+
+## Jumping from log to code
+
+In the logs panel, you can click the underlined component name on the right side of the panel to quickly jump to the exact line of code where the console log was called.
+
+<img width="600" src="/img/docs/ide_jump_from_logs.png" className="shadow-image"/>
+
+## Expanding logs
+
+Radon IDE logs objects in a contracted form. You can expand the object log by clicking on it to see more details.
+
+<img width="400" src="/img/docs/ide_logs_objects.png" className="shadow-image"/>
+
+## Clearing logs console
+
+You can clear the console by right-clicking inside the logs panel and choosing the `Clear Console` option or using the `⌘ K` shortcut.
+
+<img width="450" src="/img/docs/ide_clear_console.png" className="shadow-image"/>
+
+## Handling runtime errors
+
+Whenever a runtime error occurs in JavaScript code, the Radon IDE displays an error overlay and highlights the exact line of code where the error occurred.
+
+<img width="700" src="/img/docs/ide_uncaught_exception.png" className="shadow-image"/>
+
+You can click the `Uncaught exception >` button on the error overlay to resume code execution. Radon IDE will try to recover from the error whenever possible.

packages/docs/docs/features/device-settings.mdx

@@ -0,0 +1,84 @@
+---
+id: device-settings
+title: Device settings
+sidebar_position: 4
+---
+
+Radon IDE allows you to adjust various device settings right from VSCode.
+
+## Opening the device settings
+
+To open the device settings drop-down use the button on the bottom-right corner of the panel.
+
+<img width="300" src="/img/docs/ide_device_settings_button.png" className="shadow-image" />
+
+## Device settings options
+
+The opened device settings dropdown looks as follows:
+
+<img width="250" src="/img/docs/ide_device_settings_captioned.png" className="shadow-image" />
+
+1. **Device Appearance** - allows to change the light/dark mode.
+2. **Text Size** - a slider that allows to change the font size on the device.
+3. **Biometrics** - options to simulate biometric authorization on iOS. This option isn't available on Android. The following options are available:
+
+   <img width="250" src="/img/docs/ide_biometrics.png" className="shadow-image" />
+
+   - _Enrolled_ - whether the biometric authorization is enabled on the device,
+   - _Matching ID_ - simulates Touch ID or Face ID successfully recognizing the user,
+   - _Non-matching ID_ - simulates Touch ID or Face ID failing to recognize the user.
+
+4. **Device Location** - allows to enable location services and set static device geolocation using coordinates.
+
+<img width="450" src="/img/docs/ide_geolocation.png" className="shadow-image" />
+
+<details>
+<summary>Supported formats</summary>
+
+```
+40.123, -74.123
+40.123° N 74.123° W
+40° 7´ 22.8" N 74° 7´ 22.8" W
+40° 7.38’, -74° 7.38’
+N40°7’22.8, W74°7’22.8"
+40°7’22.8"N, 74°7’22.8"W
+40 7 22.8, -74 7 22.8
+40.123 -74.123
+40.123°,-74.123°
+144442800, -266842800
+40.123N74.123W
+4007.38N7407.38W
+40°7’22.8"N, 74°7’22.8"W
+400722.8N740722.8W
+N 40 7.38 W 74 7.38
+40:7:23N,74:7:23W
+40:7:22.8N 74:7:22.8W
+40°7’23"N 74°7’23"W
+40°7’23" -74°7’23"
+40d 7’ 23" N 74d 7’ 23" W
+40.123N 74.123W
+40° 7.38, -74° 7.38
+```
+
+</details>
+<br/>
+
+5. **Device Localization** - allows to set the device [localization](https://developer.mozilla.org/en-US/docs/Glossary/Localization). Changing the localization setting reboots the device. This option isn't available on Android.
+
+<img width="450" src="/img/docs/ide_localization.png" className="shadow-image" />
+
+6. **Permissions** - allows to reset the device privacy permissions.
+
+On iOS, you can reset all permissions, as well as reset location, photos, contacts and calendar. On Android, only resetting all permissions is supported.
+
+<img width="250" src="/img/docs/ide_permissions.png" className="shadow-image" />
+
+7. **Enable replays** - a toggle for enabling replays. After switching the `Enable Replays` toggle a `Replay` button appears in the Radon IDE panel.
+
+<img width="300" src="/img/docs/ide_replays_enabled.png" className="shadow-image" />
+
+8. **Show touches** - whether the touches should be visible on the device preview.
+
+9. **Deep links** - allows to provide deep links and website URLs to the device. Website URLs will open in the default device browser.
+
+<img width="450" src="/img/docs/ide_deep_link.png" className="shadow-image" />

packages/docs/docs/features/element-inspector.md

@@ -0,0 +1,33 @@
+---
+id: element-inspector
+title: Element inspector
+sidebar_position: 1
+---
+
+Element inspector lets you quickly jump from the device preview to the exact line of code where given component is defined.
+
+## Enabling the element inspector
+
+To enable the element inspector, use the inspector button in the bottom-left corner of the Radon IDE panel.
+
+<img width="300" src="/img/docs/ide_enable_inspector.png" className="shadow-image"/>
+
+## Using the element inspector
+
+To use it, first enable the inspector and simply point-and-click on the device preview. The Radon IDE will automatically open the source file with the editor cursor pointing on the line of code where the component is defined.
+
+<video autoPlay loop width="700" controls className="shadow-image">
+  <source src="/video/2_sztudio_inspect.mp4" type="video/mp4"/>
+</video>
+
+With an element inspector enabled, you can get the exact dimensions of the element by hovering the cursor over the device preview.
+
+<video autoPlay loop width="600" controls className="shadow-image">
+  <source src="/video/ide_inspector_hovering.mp4" type="video/mp4"/>
+</video>
+
+Alternatively, you can use the inspector by right-clicking on the element visible in the device preview. A dropdown list will appear that allows you to select an element from the React view hierarchy, also allowing quick access to the element's dimensions.
+
+<video autoPlay loop width="600" controls className="shadow-image">
+  <source src="/video/ide_element_inspector.mp4" type="video/mp4"/>
+</video>

packages/docs/docs/features/previews.mdx

@@ -0,0 +1,63 @@
+---
+id: previews
+title: Previews
+sidebar_position: 6
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+Previews allow you to develop components in complete isolation from the rest of your application.
+
+## Installing the `radon-ide` package
+
+To use previews first, add `radon-ide` package to your project.
+
+<Tabs groupId="package-managers">
+  <TabItem value="npm" label="NPM">
+
+    npm i radon-ide
+
+  </TabItem>
+  <TabItem value="yarn" label="YARN">
+
+    yarn add radon-ide
+
+  </TabItem>
+</Tabs>
+
+## Setting up `radon-ide` in code
+
+The `radon-ide` package comes with a `preview` function.
+
+```js
+import { preview } from "radon-ide";
+```
+
+You call the `preview` function with a JSX component as the first argument. The function needs to be called in a `.jsx` or `.tsx` file outside of the component body.
+
+```jsx
+preview(<MyComponent param={42} />);
+```
+
+## Opening the preview
+
+The extension will display a clickable `Open preview` button over the line with `preview` call.
+
+<img width="500" src="/img/docs/ide_previews.png" className="shadow-image" />
+
+Clicking the `Open preview` button will launch the chosen component in isolation.
+
+<video autoPlay loop width="700" controls className="shadow-image">
+  <source src="/video/6_sztudio_preview.mp4" type="video/mp4" />
+</video>
+
+You can quickly test different variants of the same component by rendering different previews based on props.
+
+<video autoPlay loop width="700" controls className="shadow-image">
+  <source src="/video/ide_different_previews.mp4" type="video/mp4" />
+</video>
+
+## Closing the preview
+
+You exit the preview by using the `Go to main screen` button in the top-left corner of the panel or by reloading the application.

packages/docs/docs/features/router-integration.md

@@ -0,0 +1,26 @@
+---
+id: router-integration
+title: Router integration
+sidebar_position: 3
+---
+
+The Radon IDE integrates with your deep-linked application allowing you to jump around the navigation structure.
+The extension automatically detects the changes in the navigation state and keeps track of the visited routes.
+
+Radon IDE router integration supports both Expo Router and React Navigation projects.
+
+<video autoPlay loop width="700" controls className="shadow-image">
+  <source src="/video/4_sztudio_url_bar.mp4" type="video/mp4"/>
+</video>
+
+## Using the integration
+
+The router integration consists of 3 features:
+
+<img width="300" src="/img/docs/ide_router_integration.png" className="shadow-image"/>
+
+1. **Back button** - goes to the previous URL route in the navigation history.
+2. **Go to main screen button** - navigates to the `/` route.
+3. **URL select** - a drop-down that allows to quickly visit recently used and all visited navigation URLs. Clicking on one of the displayed URLs will take you to that particular screen.
+
+<img width="125" src="/img/docs/ide_url_select.png" />

packages/docs/docs/features/screen-recording.md

@@ -0,0 +1,44 @@
+---
+id: screen-recording
+title: Screen recording
+sidebar_position: 5
+---
+
+The Radon IDE can record what's currently happens on the device preview. This proves to be extremely useful for rewinding to UI issues after they already happened. You can also granularly go through the recording frame by frame or save it as a file to your computer.
+
+To use screen recording, you need enable replays in the device settings.
+
+## Enabling the screen recording
+
+<img width="350" src="/img/docs/ide_enable_replays.png" className="shadow-image" />
+
+Enabling the screen recording option gives access to a new `Replay` button in the top-right corner of the Radon IDE panel.
+
+<img width="350" src="/img/docs/ide_replays_enabled.png" className="shadow-image" />
+
+## Using Replay
+
+Clicking on the `Replay` button rewinds the last 5 seconds of what was happening on the device preview.
+
+<video autoPlay loop width="700" controls className="shadow-image">
+  <source src="/video/ide_screen_recording.mp4" type="video/mp4"/>
+</video>
+
+## Replay options
+
+On the replay overlay you have access to some functionalities like:
+
+<img width="500" src="/img/docs/ide_screen_recording.png" className="shadow-image" />
+
+1. **Replay length** - allows to adjust the length of the recording for last _5s_, _10s_, _30s_, or _full_ length of the recording,
+2. **Play/Pause button** - allows to manage the recording playback,
+3. **Seekbar** - allows to seek through or skip to a part of the video,
+4. **Previous frame** - jumps back one frame of the recording,
+5. **Next frame** - jumps forward one frame of the recording,
+6. **Save replay** - allows to save the recording.
+
+## Closing the Replay overlay
+
+You can close the overlay with a `x` button in the top-right corner of the overlay.
+
+<img width="250" src="/img/docs/ide_close_overlay.png" className="shadow-image" />

packages/docs/docs/features/storybook-integration.md

@@ -0,0 +1,25 @@
+---
+id: storybook-integration
+title: Storybook integration
+sidebar_position: 7
+---
+
+Radon IDE seamlessly integrates with Storybook. The extension automatically detects Storybook stories and provides a quick access to run them in the device preview.
+
+<img width="200" src="/img/docs/ide_select_story.png" className="shadow-image" />
+
+## Setting up Storybook
+
+For setting up Storybook in your application please consult the [storybookjs/react-native repository README](https://github.com/storybookjs/react-native/blob/next/README.md).
+
+## Selecting the story
+
+The extension displays a `Select story` button over each story. Clicking this button will launch the chosen story in isolation.
+
+<video autoPlay loop width="700" controls className="shadow-image">
+  <source src="/video/ide_storybook.mp4" type="video/mp4" />
+</video>
+
+## Closing the story
+
+You exit the story by using the `Go to main screen` button in the top-left corner of the panel or by reloading the application.

packages/docs/docs/getting-started/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Getting started",
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}