From 4ba2e742e56eedfc39c919b2f7fbc588efbabd09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwas=CC=81niewski?= Date: Tue, 23 Dec 2025 13:28:38 +0100 Subject: [PATCH] feat: docs with rspress --- .github/workflows/deploy-docs.yml | 58 + README.md | 189 +- docs/.gitignore | 25 + docs/docs/_nav.json | 7 + docs/docs/docs/_meta.json | 22 + docs/docs/docs/api-reference/_meta.json | 1 + .../docs/api-reference/java.mdx} | 71 +- docs/docs/docs/api-reference/javascript.mdx | 57 + .../docs/api-reference/kotlin.mdx} | 71 +- .../docs/api-reference/objective-c.mdx} | 36 +- .../docs/api-reference/swift.mdx} | 54 +- docs/docs/docs/contributing.md | 4 + docs/docs/docs/getting-started/_meta.json | 1 + .../docs/getting-started/introduction.mdx | 22 + .../docs/docs/getting-started/quick-start.mdx | 163 + docs/docs/docs/guides/_meta.json | 1 + .../docs/guides/guidelines.mdx} | 46 +- .../docs/guides/troubleshooting.mdx} | 8 +- docs/docs/index.md | 24 + docs/docs/public/img/tractor.png | Bin 0 -> 10822 bytes docs/package.json | 20 + docs/rspress.config.ts | 24 + docs/theme/styles.css | 17 + docs/tsconfig.json | 20 + package.json | 3 +- yarn.lock | 3146 +++++++++++++++-- 26 files changed, 3532 insertions(+), 558 deletions(-) create mode 100644 .github/workflows/deploy-docs.yml create mode 100644 docs/.gitignore create mode 100644 docs/docs/_nav.json create mode 100644 docs/docs/docs/_meta.json create mode 100644 docs/docs/docs/api-reference/_meta.json rename docs/{JAVA.md => docs/docs/api-reference/java.mdx} (80%) create mode 100644 docs/docs/docs/api-reference/javascript.mdx rename docs/{KOTLIN.md => docs/docs/api-reference/kotlin.mdx} (84%) rename docs/{OBJECTIVE_C.md => docs/docs/api-reference/objective-c.mdx} (91%) rename docs/{SWIFT.md => docs/docs/api-reference/swift.mdx} (90%) create mode 100644 docs/docs/docs/contributing.md create mode 100644 docs/docs/docs/getting-started/_meta.json create mode 100644 docs/docs/docs/getting-started/introduction.mdx create mode 100644 docs/docs/docs/getting-started/quick-start.mdx create mode 100644 docs/docs/docs/guides/_meta.json rename docs/{GUIDELINES.md => docs/docs/guides/guidelines.mdx} (57%) rename docs/{TROUBLESHOOTING.md => docs/docs/guides/troubleshooting.mdx} (56%) create mode 100644 docs/docs/index.md create mode 100644 docs/docs/public/img/tractor.png create mode 100644 docs/package.json create mode 100644 docs/rspress.config.ts create mode 100644 docs/theme/styles.css create mode 100644 docs/tsconfig.json diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml new file mode 100644 index 00000000..2f1b0a1f --- /dev/null +++ b/.github/workflows/deploy-docs.yml @@ -0,0 +1,58 @@ +name: Deploy Docs + +on: + push: + branches: [main] + + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: false + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + fetch-depth: 0 # Not needed if lastUpdated is not enabled + - name: Setup + uses: ./.github/actions/setup + + - name: Setup Pages + uses: actions/configure-pages@v5 + + - name: Install dependencies + working-directory: docs + run: yarn install + + - name: Build with Rspress + working-directory: docs + run: | + yarn run build + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: docs/doc_build + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + needs: build + runs-on: ubuntu-latest + name: Deploy + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/README.md b/README.md index 693c321a..72daced9 100644 --- a/README.md +++ b/README.md @@ -31,205 +31,20 @@ - Compatible with all native languages **Objective-C**, **Swift**, **Java** and **Kotlin** - Supports UIKit and SwiftUI on iOS and Fragments and Jetpack Compose on Android -## React Native version compatibility matrix +## Documentation -| Tested React Native Version | React Native Brownfield Version | -| --------------------------- | ------------------------------- | -| 0.81.x, 0.82.x | ^2.0.0-rc.0 | -| 0.78.x | ^1.2.0 | - -## Installation - -The React Native Brownfield library is intended to be installed in a React Native app that is later consumed as a framework artifact by your native iOS or Android app. - -In your React Native project run: - -```sh -npm install @callstack/react-native-brownfield -``` - -## Usage +For full documentation, visit [our documentation](https://oss.callstack.com/react-native-brownfield/). Download a free copy of Incremental React Native adoption in native apps ebook -### Packaging React Native app as a framework - -First, we need to package our React Native app as an XCFramework or Fat-AAR. - -#### With Rock - -Follow [Integrating with Native Apps](https://www.rockjs.dev/docs/brownfield/intro) steps in Rock docs and run: - -- `rock package:ios` for iOS -- `rock package:aar` for Android - -#### With custom scripts - -Instead of using Rock, you can create your own custom packaging scripts. Here are base versions for iOS and Android that you'll need to adjust for your project-specific setup: - -- [Example iOS script](https://github.com/callstackincubator/modern-brownfield-ref/blob/main/scripts/build-xcframework.sh) -- [Example Android script](https://github.com/callstackincubator/modern-brownfield-ref/blob/main/scripts/build-aar.sh) - -### Native iOS app - -In your native iOS app, initialize React Native and display it where you like. For example, to display React Native views in SwiftUI, use the provided `ReactNativeView` component: - -```swift -import SwiftUI -import ReactBrownfield # exposed by RN app framework - -@main -struct MyApp: App { - init() { - ReactNativeBrownfield.shared.startReactNative { - print("React Native bundle loaded") - } - } - - var body: some Scene { - WindowGroup { - ContentView() - } - } -} - -struct ContentView: View { - var body: some View { - NavigationView { - VStack { - Text("Welcome to the Native App") - .padding() - - NavigationLink("Push React Native Screen") { - ReactNativeView(moduleName: "ReactNative") - .navigationBarHidden(true) - } - } - } - } -} -``` - -For more detailed instructions and API for iOS, see docs for: - -- [Objective C](docs/OBJECTIVE_C.md) -- [Swift](docs/SWIFT.md) - -### Native Android app - -In your native Android app, create a new `RNAppFragment.kt`: - -```kt - -import android.os.Bundle -import android.view.LayoutInflater -import android.view.View -import android.view.ViewGroup -import androidx.fragment.app.Fragment - -class RNAppFragment : Fragment() { - override fun onCreateView( - inflater: LayoutInflater, - container: ViewGroup?, - savedInstanceState: Bundle?, - ): View? = ReactNativeBrownfield.shared.createView(activity, "BrownFieldTest") -} -``` - -Add a button to your `activity_main.xml`: - -```xml -