add @components feature (#339)

* add @components feature

- add alias to metro config `@components`
- add /components directory to the scaffold
- document how to use it at /components/README.md

* add scaffold updates checklist to readme

.github/pull_request_template.md

@@ -12,7 +12,7 @@ _Related PRs:_
 
 Did you make changes to the scaffold?
 
-- [ ] Yes, and I have read the [scaffold checklist](https://crowdbotics.github.io/modules/scaffold-checklist.html) document and followed the instructions.
+- [ ] Yes, and have read the [scaffold updates checklist](https://github.com/crowdbotics/react-native-scaffold/#scaffold-updates-checklist) documentation and followed the instructions.
 - [ ] No.
 
 ## Changes introduced

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Based on [Common Changelog](https://common-changelog.org/).
 
+## 2.5.0 - 2023-10-10
+
+### Added
+
+- added `@components` alias - better support for composition
+
 ## 2.4.0 - 2023-07-17
 
 ### Changed

README.md

@@ -66,3 +66,35 @@ Make sure to update the [.crowdbotics.json](/scaffold/template/custom/.crowdboti
 
 ### macOS config
 - make sure to have a compatible version of urllib3 with openssl. urllib3 v2.0 or higher is compatible with OpenSSL 1.1.1 or higher
+
+## Scaffold updates checklist
+
+When making scaffold updates, please make sure the following still works:
+
+- creating a demo app (`npx crowdbotics/modules demo`)
+- iOS Appetize build
+- iOS TestFlight build
+- iOS local emulator (`npx react-native start`)
+- iOS local xcode build
+- Android Appetize build
+- Android Internal build
+- Android local emulator (`npx react-native start`)
+- Android local debug build (`./android/gradlew assembleDebug -p ./android`)
+- Web deployment (called API in the Dashboard)
+- Web local dev server (`yarn run web`)
+- Web local build (`yarn run web:build`)
+- Studio loads the app and the welcome screen renders correctly
+
+In order to test scaffold updates on Dashboard/Studio create a new Review App and set `REACT_NATIVE_SCAFFOLD_REPO_BRANCH` to the name of your branch.
+
+Double check your work locally with those helper scripts checks:
+
+- `yarn run bootstrap` produces no changes besides potential changes in `yarn.lock` resolved versions
+- `yarn run template` produces no changes
+- `yarn run semver` check passes
+
+Important!
+
+Increase the version of the scaffold in `package.json` and `.crowdbotics.json`.
+
+Finally make sure to update the [CHANGELOG](/CHANGELOG.md) with human friendly descriptions.

dist/cookie/{{cookiecutter.project_slug}}/.crowdbotics.json

@@ -1,7 +1,7 @@
 {
   "scaffold": {
     "type": "react-native",
-    "version": "2.4.0",
+    "version": "2.5.0",
     "cookiecutter_context": {
       "project_name": "{{cookiecutter.project_name}}",
       "project_slug": "{{cookiecutter.project_slug}}",

dist/cookie/{{cookiecutter.project_slug}}/components/README.md

@@ -0,0 +1,12 @@
+# @components
+
+## Using components
+
+Any module installed here doesn't get automatically loaded (see Autoloading) and can be used by directly importing it.
+
+Import a component by importing from the `@components` alias:
+```javascript
+import { yourComponent } from "@components/<your-component>";
+```
+
+See your [metro.config.js](/metro.config.js) for more details about other alias included by default.

dist/cookie/{{cookiecutter.project_slug}}/metro.config.js

@@ -4,18 +4,21 @@
  *
  * @format
  */
-
 const path = require("path")
+
 const extraNodeModules = {
+  "@components": path.resolve(__dirname, "components"),
   "@modules": path.resolve(__dirname, "modules"),
   "@screens": path.resolve(__dirname, "screens"),
   "@options": path.resolve(__dirname, "options")
 }
+
 const watchFolders = [
   path.resolve(__dirname, "modules"),
   path.resolve(__dirname, "screens"),
   path.resolve(__dirname, "options")
 ]
+
 module.exports = {
   transformer: {
     getTransformOptions: async () => ({

scaffold/install.js

@@ -11,7 +11,11 @@ fs.copyFileSync(
   path.join(cwd, "README.md")
 );
 
-// Crowdbotics custom directories: modules, screens, store, options and public
+// Crowdbotics custom directories: components, modules, screens, store, options and public
+fs.renameSync(
+  path.join(customFiles, "components"),
+  path.join(cwd, "components")
+);
 fs.renameSync(path.join(customFiles, "modules"), path.join(cwd, "modules"));
 fs.renameSync(path.join(customFiles, "screens"), path.join(cwd, "screens"));
 fs.renameSync(path.join(customFiles, "options"), path.join(cwd, "options"));

scaffold/package.json

@@ -1,6 +1,6 @@
 {
   "name": "template",
   "description": "React Native Template",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "author": "Crowdbotics"
 }

scaffold/template/custom/.crowdbotics.json

@@ -1,7 +1,7 @@
 {
   "scaffold": {
     "type": "react-native",
-    "version": "2.4.0",
+    "version": "2.5.0",
     "cookiecutter_context": {
       "project_name": "{{cookiecutter.project_name}}",
       "project_slug": "{{cookiecutter.project_slug}}",

scaffold/template/custom/components/README.md

@@ -0,0 +1,12 @@
+# @components
+
+## Using components
+
+Any module installed here doesn't get automatically loaded (see Autoloading) and can be used by directly importing it.
+
+Import a component by importing from the `@components` alias:
+```javascript
+import { yourComponent } from "@components/<your-component>";
+```
+
+See your [metro.config.js](/metro.config.js) for more details about other alias included by default.

scaffold/template/custom/metro.config.js

@@ -4,18 +4,21 @@
  *
  * @format
  */
-
 const path = require("path")
+
 const extraNodeModules = {
+  "@components": path.resolve(__dirname, "components"),
   "@modules": path.resolve(__dirname, "modules"),
   "@screens": path.resolve(__dirname, "screens"),
   "@options": path.resolve(__dirname, "options")
 }
+
 const watchFolders = [
   path.resolve(__dirname, "modules"),
   path.resolve(__dirname, "screens"),
   path.resolve(__dirname, "options")
 ]
+
 module.exports = {
   transformer: {
     getTransformOptions: async () => ({