Scripts/bootstrap (#28)

* create bootsrap script/ add utils delete code from file/ add pull request and readme templates

* add script into readme

---------

Co-authored-by: Bartłomiej Sworzeń <bartlomiej.sworzen@binarapps.com>
Co-authored-by: Mateusz Rostkowski <mateusz.rostkowsky995@gmail.com>

Author: 3 people

app.config.ts

@@ -37,7 +37,7 @@ export const APP_CONFIG = {
   iosBundleIdentifier: 'your.ios.bundle.identifier', // CONFIG: Add your ios bundle identifier here
   isDev: process.env.IS_DEV === '1',
   isExpoGo: process.env.IS_EXPO_GO === '1',
-  scheme: 'your_url_scheme', //CONFIG: Add your url scheme to link to your app
+  scheme: 'your_url_scheme', // CONFIG: Add your url scheme to link to your app
 } as const
 
 const runtimeVersion = { policy: APP_CONFIG.isDev ? 'sdkVersion' : 'appVersion' } as const

scripts/bootstrap.js

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs')
+const prompt = require('prompt-sync')()
+
+const { addBefore, deleteText, logger } = require('./utils')
+
+const paths = {
+  appConfig: './app.config.ts',
+  readme: './README.md',
+  readmeTemplate: './scripts/templates/readme_template.md',
+  pullRequestTemplate: './.github/pull_request_template.md',
+  newPullReuestTemplate: './scripts/templates/pull_request_template.md',
+}
+
+// 1.
+const replaceReadme = (appName) => {
+  let contents = fs.readFileSync(paths.readmeTemplate, 'utf8')
+  contents = contents.replaceAll('_NAME_', appName)
+
+  fs.writeFileSync(paths.readme, contents)
+}
+
+// 2.
+const setUpAppConfig = (appName, bundleId, androidPackageName, scheme, easId) => {
+  let contents = fs.readFileSync(paths.appConfig, 'utf8')
+  contents = deleteText(contents, "'your_android_package_name',")
+  contents = deleteText(contents, "'your.ios.bundle.identifier',")
+  contents = deleteText(contents, "'ac562c27-4a4e-4532-869f-fe6f9447bee6',")
+  contents = deleteText(contents, "'Template',")
+  contents = deleteText(contents, "'your_url_scheme',")
+
+  contents = addBefore(
+    contents,
+    '// CONFIG: Add your android package name',
+    `'${androidPackageName}',`
+  )
+  contents = addBefore(contents, '// CONFIG: Add your app name', `'${appName}',`)
+  contents = addBefore(contents, '// CONFIG: Add your eas project ID', `'${easId}',`)
+  contents = addBefore(contents, '// CONFIG: Add your ios bundle identifier', `'${bundleId}',`)
+  contents = addBefore(contents, '// CONFIG: Add your url scheme', `'${scheme}',`)
+  fs.writeFileSync(paths.appConfig, contents)
+}
+
+// 3.
+const replatePullRequestTemplate = () => {
+  const contents = fs.readFileSync(paths.newPullReuestTemplate, 'utf8')
+
+  fs.writeFileSync(paths.pullRequestTemplate, contents)
+}
+
+const setUpProject = (appName, bundleId, androidPackageName, scheme, easId) => {
+  // START
+  logger.success('Start ...')
+
+  logger.info('Generating new readme file')
+  // 1. Delete readme -> and create new, with new app name etc.
+  replaceReadme(appName)
+
+  logger.info('Change project variables in app.config.ts file')
+  // 2. Replace appName, bundleId, androidPackageName,scheme and easProjectId in app.config.ts file
+  setUpAppConfig(appName, bundleId, androidPackageName, scheme, easId)
+
+  logger.info('Generating new pull request template file')
+  // 3. Delete exist pull request template -> generate the new
+  replatePullRequestTemplate()
+
+  //Finish
+  logger.success(`Config your project has been success`)
+}
+
+const bootstrap = () => {
+  const appName = prompt('Write your app name: ')
+  if (!appName) {
+    return logger.error('Please write correct app name')
+  }
+
+  const bundleId = prompt('Write your bundle ID: ')
+  if (!bundleId) {
+    return logger.error('Please write correct bundle ID')
+  }
+
+  const androidPackageName = prompt('Write your android package name: ')
+  if (!androidPackageName) {
+    return logger.error('Please write correct android package name')
+  }
+
+  const scheme = prompt('Write your scheme: ')
+  if (!scheme) {
+    return logger.error('Please write correct scheme')
+  }
+
+  const easId = prompt('Write your eas project ID: ')
+  if (!easId) {
+    return logger.error('Please write correct eas project ID')
+  }
+  // 1. Setup project -> set ( appName, bundleId, androidPackageName, appScheme, easProjectId )
+  setUpProject(appName, bundleId, androidPackageName, scheme, easId)
+}
+
+bootstrap()
+
+// INSTRUCTION:
+// 1. Delete readme and write the new one
+// 2. Setup app.config.ts file
+// 3. Setup pull_request_template.md

scripts/templates/pull_request_template.md

@@ -0,0 +1,11 @@
+# Describe your changes
+
+# Issue ticket number or link
+
+# Checklist before requesting a review
+
+- [ ] I did self-review of my code.
+- [ ] Do the tests work ?
+- [ ] Does lint work ?, it doesn't find any bugs or problems.
+
+# Do any blockers exist ? if yes, describe it below.

scripts/templates/readme_template.md

@@ -0,0 +1,133 @@
+# @binarapps/_NAME_
+
+This is a template to be used with expo. It includes all the necessary stuff to start working with expo framework. It has the most popular packages included so it's easier to start coding the app itself without all the necessary boilerplate setup. It has:
+
+Version in the `package.json` is one to one the latest expo on which the template was tested.
+
+## Scripts
+
+#### 1. Bootstrap - At start you should trigger script
+
+```
+node ./scripts/bootstrap.js
+```
+
+The script gives you opportunity to setup the essentialest variables for your project like app name, bundle ID or android package name
+
+#### 2. Generate new screen
+
+```
+node ./scripts/create_new_screen.js
+```
+
+You can use this script for generate new common screen, tabs screen or new bottom tab, from screen template. You have possiblity to change screen template for your own.
+
+#### 3. Generate new component
+
+```
+node ./scripts/create_new_component.js
+```
+
+You can use this script for generate new common component (atom, molecule, organism, common) from component template. You have possiblity to change component template for your own.
+
+## Run Locally
+
+1. Clone the project
+
+```bash
+  git clone git@github.com:binarapps/_NAME_.git
+```
+
+2. Go to the project directory
+
+```bash
+  cd _NAME_
+```
+
+3. Install dependencies
+
+```bash
+  yarn
+```
+
+4. Setup environment variables (right now not needed because we are using only mocked values)
+
+- We are using doppler in our project, and almost everything is happening automatically
+- While doing the setup for the first time you need to follow this [instructions](./scripts/README.md) - "1. `generate_dotenv.sh`"
+
+5. Start the expo server
+
+```bash
+  yarn start
+```
+
+## Icons
+
+This template uses [Remix icon set](https://remixicon.com/)
+
+It is added to the app as a font generated by [icomoon app](https://icomoon.io/app/#/select).
+
+## Adding new icons
+
+1. Find `assets/icomoon/selection.json` file in your machine
+2. Import this file to this [page (icomoon app)](https://icomoon.io/app/#/select):
+
+- Make sure there are no other icons imported there
+
+3. Download icon which need to be added to the app as svg file.
+4. Make sure new icon name is unique (already not used).
+5. Add svg file to icomoon app.
+6. Go to generate font tab - icomoon app.
+
+- Make sure that all icons that you have added have correct names
+
+7. Download font - icomoon app
+8. Replace old files with downloaded ones
+
+- ./selection.json => assets/icomoon/selection.json
+- ./fonts/icomoon.ttf => assets/icomoon/icomoon.ttf
+
+9. Generate new types for icons
+
+- run script generating icon types `yarn generate:icon:types`
+
+## Sync up with template:
+
+1. Add template remote
+
+```bash
+git remote add template git@github.com:binarapps/expo-ts-template.git
+```
+
+2. Go to new branch (for safety reason)
+
+```bash
+git checkout -b "sync_with_template/1"
+```
+
+3. Fetch template remote
+
+```bash
+git fetch template
+```
+
+4. Merge with template
+
+```bash
+git merge -X theirs template/main --allow-unrelated-histories --no-commit
+```
+
+5. Review changes
+
+- There can be some issues with files that you were also working, make sure merge doesnt remove your logic
+
+6. Adjust and commit changes
+
+```bash
+git commit -m "chore: sync up with template code"
+```
+
+## Working with designer in your project
+
+Expo template, you are going to use - bundles native-base ui lib out of the box.
+To have the best starting experience in your project - write a dm to your designer that they should use [NativeBase Figma Design Kit](https://www.figma.com/community/file/1050753649783931446)

scripts/utils.js

@@ -47,3 +47,7 @@ exports.addAfter = (content, searchText, textToAdd) => {
 exports.addBefore = (content, searchText, textToAdd) => {
   return content.replace(searchText, textToAdd + searchText)
 }
+
+exports.deleteText = (content, searchText) => {
+  return content.replace(searchText, '')
+}