Initial commit

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,20 @@
+---
+name: 🐛 Report a bug
+about: Report a reproducible or regression bug.
+labels: 'bug report'
+---
+
+## Environment
+
+<!-- All necessary environmental info that will help triage this -->
+
+## Description
+
+<!-- Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know. -->
+
+## Reproducible Demo
+
+<!--
+  Let us know how to reproduce the issue. Include a code sample or share a project that reproduces the issue.
+  Please follow the guidelines for providing a minimal example: https://stackoverflow.com/help/mcve.
+-->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: 🗣 Feature request
+about: Suggest an idea.
+labels: 'feature request'
+---
+
+## Describe the feature
+
+<!-- Describe the requested Feature -->
+
+## Motivation
+
+<!-- Describe the motivation behind it -->
+
+## Related Issues
+
+<!-- Link related issues here -->

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,9 @@
+---
+name: 💬 Question
+about: Choose if you need help.
+labels: 'question'
+---
+
+## Ask your Question
+
+<!-- Ask your question -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,10 @@
+<!-- Please provide enough information so that others can review your pull request. -->
+<!-- Keep pull requests small and focused on a single change. -->
+
+### Summary
+
+<!-- What existing problem does the pull request solve? Can you solve the issue with a different approach? -->
+
+### Test plan
+
+<!-- List the steps with which we can test this change. Provide screenshots if this changes anything visual. -->

.gitignore

@@ -0,0 +1,17 @@
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+node_modules
+!node_modules/.yarn-state.yml
+
+/*.tgz
+
+build/
+
+# Code Signing
+code-signing.pem
+code-signing.pem.pub

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
+yarnPath: .yarn/releases/yarn-3.2.1.cjs

CODE_OF_CONDUCT.md

@@ -0,0 +1,3 @@
+# Code of Conduct
+
+Callstack has adopted a Code of Conduct that we expect project participants to adhere to. Please read the [full text](https://callstack.com/code-of-conduct/?utm_source=github.com&utm_medium=referral&utm_campaign=super-app-showcase&utm_term=code-of-conduct) so that you can understand what actions will and will not be tolerated.

CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing to Callstack projects
+
+## Code of Conduct
+
+We want this community to be friendly and respectful to each other. Please read [the full text](/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
+
+## Our Development Process
+
+The core team works directly on GitHub and all work is public.
+
+### Development workflow
+
+> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
+
+1. Fork the repo and create your branch from `master` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)).
+1. Do the changes you want and test them out before sending a pull request.
+
+### Commit message convention
+
+We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:
+
+- `fix`: bug fixes, e.g. fix something meaningful.
+- `feat`: new features, e.g. add new API.
+- `refactor`: code refactor, e.g. new folder structure.
+- `docs`: changes into documentation, e.g. add usage example.
+- `test`: adding or updating tests, eg unit, snapshot testing.
+- `chore`: tooling changes, e.g. change circleci config.
+- `BREAKING CHANGE`: for changes that break existing usage, e.g. change API.
+
+### Linting and tests
+
+We type our code with Flow or TypeScript, use ESLint with Prettier for linting and formatting the code, and Jest for testing. Our pre-commit hooks verify that the linter and tests pass when commiting. You can also run the following commands manually:
+
+- `yarn typecheck`: run type checks.
+- `yarn lint`: lint files with eslint and prettier.
+- `yarn test`: run unit tests with jest.
+
+### Sending a pull request
+
+When you're sending a pull request:
+
+- Prefer small pull requests focused on one change.
+- Verify that all checks are passing.
+- Follow the pull request template when opening a pull request.
+
+## Reporting issues
+
+You can report issues on our [bug tracker](https://github.com/callstack/super-app-showcase/issues). Please follow the issue template when opening an issue.
+
+## License
+
+By contributing to this project, you agree that your contributions will be licensed under its **MIT** license.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Callstack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,190 @@
+# Super App Showcase
+
+Monorepository showcase to showcase Super App development possibilities with React Native and Re.Pack.
+
+Learn more about Super Apps here: [https://www.callstack.com/super-app-development](https://www.callstack.com/super-app-development?utm_campaign=super_apps&utm_source=github&utm_content=super_app_showcase).
+
+---
+
+[![Build Status][build-badge]][build]
+[![Version][version-badge]][package]
+[![MIT License][license-badge]][license]
+[![PRs Welcome][prs-welcome-badge]][prs-welcome]
+[![Chat][chat-badge]][chat]
+[![Sponsored by Callstack][callstack-badge]][callstack]
+
+## The problem
+
+Sometimes small app could grow to super app, which means that it provides multiple services like payments, messaging, social network, booking, news, etc. And it's not easy to maintain it. It's hard to keep the codebase clean and to keep the app fast. The app grows in size and not all users want to keep a huge app just for a few sevices. So, we need to split the app into smaller parts and make it possible to install only the services that user needs. But somebody want all the services in one place. So super app still should be available as one app.
+There are a few options to solve this problem:
+
+- Split the app into several smaller apps, keep super app as well and move reusabale parts into libraries. But even small changes in a library could lead to a lot of work to update all the apps and redeploy all of them.
+- Use a monorepository. It's a good option, but it's not always easy to set up and maintain monorepo. Also it is not so easy to divide work on the project between several team independently or provide a way for external developers to contribute only in one part of the repo or one certian app.
+
+## The solution
+
+This showcase is a monorepository with a few apps using micro-frondend architecture. It's easy to set up and maintain. These independent apps could be deployed as separate apps or as a part of super app. Developer could move these micro-frontends to separate repositories and deploy them as separate apps. That helps to divide work on the project between several team independently or provide a way for external developers to contribute only in one part of the repo or one certian app. The difference between classic monorepo and this showcase is runtime dependencies. This means no need to redeploy any of micro-frontends if you change something in the library. It's enough to update micro-frondtend and all the apps will use the latest version of the it.
+
+## The Super App
+
+<table>
+  <tr>
+    <td>Host App</td>
+    <td>Mini Apps Interaction</td>
+    <td>Booking Standalone App</td>
+  </tr>
+  <tr>
+    <td><img src="images/host-main-screen.png" alt="host-main-screen" width="200"></td>
+    <td><img src="images/host.gif" alt="host" width="200"></td>
+    <td><img src="images/booking.gif" alt="booking" width="200"></td>
+  </tr>  
+</table>
+
+## Structure
+
+<img src="images/super-app-showcase-scheme.png" />
+
+The super app contains 4 apps:
+
+- `host` - the main app, which is a super app. It contains all the micro-frontends and provides a way to navigate between them.
+- `shell` - the blueprint of `host` app with shared dependencies. It could be shared across all the teams, since there no necessary secrets available in this version of `host` app.
+- `booking` - micro-frontend for booking service.
+  Booking exposes `UpcomingAppointments` screen and `MainNavigator`. `MainNavigator` is Booking app itself. `UpcomingAppointments` screen is a screen, which is used in the super app in its own navigation.
+- `shopping` - micro-frontend for shopping service.
+  Shopping exposes `MainNavigator`. `MainNavigator` is Shopping app itself.
+- `news` - micro-frontend for news service.
+  News exposes `MainNavigator`. `MainNavigator` is News app itself. News mini app stored in separate repository https://github.com/callstack/news-mini-app-showcase to provide the example of using remote container outside of the monorepo.
+- `dashboard` - micro-frontend for dashboard service.
+  Dashboard exposes `MainNavigator`. `MainNavigator` is Dashboard app itself.
+- `auth` - module that is used by other modules to provide authentication and authorization flow and UI.
+
+Each of the mini apps could be deployed and run as a standalone app.
+
+## How to use
+
+### Setup
+
+Install dependencies for all apps:
+
+```
+yarn
+```
+
+[Optional] Install pods where applicable
+
+```
+yarn pods
+```
+
+### Run
+
+Start dev server for host and mini apps:
+
+```
+yarn start
+```
+
+Or start dev server for a specific app ([host](./packages/host/README.md) | [booking](./packages/booking/README.md) | [shopping](./packages/shopping/README.md) | [news](https://github.com/callstack/news-mini-app-showcase) | [dashboard](./packages/dashboard/README.md)):
+
+```
+yarn start:<app-name>
+```
+
+Or start dev server for a specific app as a standalone app. It's useful for testing micro-frontend as a standalone app:
+
+```
+yarn start:standalone:<app-name>
+```
+
+Running the mini app as a standalone requires running the [catalog-server](./packages/catalog-server/README.md) and [auth module](./packages/auth/README.md):
+
+```
+yarn start:catalog
+```
+
+```
+yarn start:auth
+```
+
+Or run commands concurrently:
+
+```
+yarn concurrently -P "yarn start:catalog" "yarn start:auth"
+```
+
+Run iOS or Android app (ios | android):
+
+```
+yarn run:<app-name>:<platform>
+```
+
+For Android, make sure to reverse adb ports:
+
+```
+yarn adbreverse
+```
+
+There is no `start:shell` script to avoid running shell and host app concurrently. It's not possible to run shell and host app concurrently, since they use the same port. If you want to run shell app, you should run `yarn start:standalone:shell` and then run each mini app bundler you want to use in shell app.
+
+### Test
+
+Run tests for all apps:
+
+```
+yarn test
+```
+
+### Lint
+
+Run linter for all apps:
+
+```
+yarn lint
+```
+
+### Type check
+
+Run type check for all apps:
+
+```
+yarn typecheck
+```
+
+## Troubleshooting
+
+TBD
+
+## Documentation
+
+TBD
+
+## Known Issues
+
+The "booking" and "shopping" mini-apps can't be run in standalone mode (i.e. without the host running). This is a deliberate decision of this repository to showcase the possibility and to reduce the amount of work to keep the mini-apps dependencies up-to-date.
+The "dashboard" mini-app can be run as a standalone app (without the host). It's up to you to decide on what kind of developer experience your super app has.
+
+Repack v3 HMR breaks React Native inspector/devtools in RN 0.70 version. A bypass added three patches for the dashboard, shell, and host. [link](https://github.com/callstack/repack/issues/251).
+
+## Contributing
+
+Read the [contribution guidelines](/CONTRIBUTING.md) before contributing.
+
+## Made with ❤️ at Callstack
+
+Super App showcase is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Callstack][callstack-readme-with-love] is a group of React and React Native geeks, contact us at [[email protected]](mailto:[email protected]) if you need any help with these or just want to say hi!
+
+<!-- badges -->
+
+[build-badge]: https://img.shields.io/circleci/project/github/callstack/super-app-showcase/master.svg?style=flat-square
+[build]: https://circleci.com/gh/callstack/super-app-showcase
+[version-badge]: https://img.shields.io/npm/v/super-app-showcase.svg?style=flat-square
+[package]: https://www.npmjs.com/package/super-app-showcase
+[license-badge]: https://img.shields.io/npm/l/super-app-showcase.svg?style=flat-square
+[license]: https://opensource.org/licenses/MIT
+[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs-welcome]: http://makeapullrequest.com
+[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=flat-square&colorB=758ED3
+[chat]: https://discord.gg/zwR2Cdh
+[callstack-badge]: https://callstack.com/images/callstack-badge.svg
+[callstack]: https://callstack.com/open-source/?utm_source=github.com&utm_medium=referral&utm_campaign=super-app-showcase&utm_term=readme-badge
+[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=super-app-showcase&utm_term=readme-with-love

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "super-app-showcase",
+  "version": "0.0.1",
+  "license": "MIT",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "start:host": "yarn workspace host run start",
+    "start:booking": "yarn workspace booking run start",
+    "start:shopping": "yarn workspace shopping run start",
+    "start:dashboard": "yarn workspace dashboard run start",
+    "start:auth": "yarn workspace auth run start",
+    "start:catalog": "yarn workspace catalog-server run start",
+    "start:standalone:shell": "yarn workspace shell run start",
+    "start:standalone:dashboard": "yarn workspace dashboard run start:standalone",
+    "run:host:ios": "yarn workspace host run ios",
+    "run:host:android": "yarn workspace host run android",
+    "run:shell:ios": "yarn workspace shell run ios",
+    "run:shell:android": "yarn workspace shell run android",
+    "run:dashboard:ios": "yarn workspace dashboard run ios",
+    "run:dashboard:android": "yarn workspace dashboard run android",
+    "bundle:auth:ios": "yarn workspace auth run bundle:ios",
+    "bundle:auth:android": "yarn workspace auth run bundle:android",
+    "pods": "yarn workspaces foreach run pods",
+    "start": "concurrently -P 'yarn:start:*(!standalone) {1}'",
+    "typecheck": "yarn workspaces foreach run typecheck",
+    "lint": "yarn workspaces foreach run lint",
+    "test": "yarn workspaces foreach run test",
+    "adbreverse": "adb reverse tcp:3000 tcp:3000 && adb reverse tcp:8081 tcp:8081 && adb reverse tcp:9000 tcp:9000 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:9002 tcp:9002 && adb reverse tcp:9003 tcp:9003"
+  },
+  "packageManager": "[email protected]",
+  "devDependencies": {
+    "concurrently": "^7.6.0"
+  }
+}