create-atlas-rn-app 1.7.1

package/README.md

@@ -0,0 +1,143 @@
+<p align="center">
+    <img alt="React Native Template Atlas" src="https://user-images.githubusercontent.com/11137944/93101697-808bc580-f6a2-11ea-8ce3-482be6ca456a.png" width="200" />
+
+</p>
+<h1 align="center">
+  React Native Template Atlas
+</h1>
+
+![expo](https://img.shields.io/github/package-json/dependency-version/leanhtuan1994/react-native-template-atlas/expo?label=expo) ![GitHub Repo stars](https://img.shields.io/github/stars/leanhtuan1994/react-native-template-atlas) ![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/leanhtuan1994/react-native-template-atlas) ![GitHub issues](https://img.shields.io/github/issues/leanhtuan1994/react-native-template-atlas) ![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/leanhtuan1994/react-native-template-atlas)
+
+📱 A template for your next React Native project 🚀, Made with developer experience and performance first: Expo,TypeScript,tailwindcss, Husky, Lint-Staged, expo-router, react-query, react-hook-form, I18n.
+
+# 🚀 Quick start
+
+```sh
+npx create-atlas-rn-app@latest MyApp
+
+```
+
+# Overview
+
+As a team of experienced developers at Atlas, we have spent years refining our approach to building high-quality React Native applications. Our starter kit is based on the best practices and tools that we have found to be most effective in our own projects.
+
+This starter kit has been thoroughly tested and proven successful in multiple projects over the past four years. It is regularly used by our team on a daily basis and has helped us deliver great results for our clients.
+
+While our starter kit is heavily influenced by our own opinions and experiences, we have carefully selected the included solutions to address common challenges and meet the needs of the majority of use cases. We believe it offers a streamlined and efficient approach to building React Native apps, and we are confident that it can help others achieve their project goals as well.
+
+## 🚀 Motivation
+
+Our goal with this starter kit was to streamline the process of building React Native apps, both for our own team and for our clients. We wanted to create a resource that would allow us to create high-quality apps faster and with less effort, while ensuring that all of our projects adhere to the same code standards and architectural principles.
+
+The benefits of using this starter kit are numerous. It helps our team easily switch between projects, as we can rely on a consistent foundation of code. It also allows us to focus on the business logic of each project rather than getting bogged down in boilerplate code. And, because it promotes consistency across projects, it makes it easier to maintain and scale our apps, as well as share code between teams.
+
+Overall, our starter kit is designed to facilitate efficient and effective app development, helping us to bring the best possible products to our clients
+
+## ✍️ Philosophy
+
+When creating this starter kit, we had several guiding principles in mind::
+
+- **🚀 Production-ready**: We wanted to ensure that this starter was ready for real-world use, providing a solid foundation for building production-grade apps.
+- **🥷 Developer experience and productivity**: Our focus was on creating a starter that would enhance the developer experience and increase productivity.
+- **🧩 Minimal code and dependencies**: We aimed to keep the codebase and dependencies as small as possible.
+- **💪 Well-maintained third-party libraries**: We included only well-maintained and reliable third-party libraries, to provide stability and support for our projects.
+
+## ⭐ key Features
+
+- ✅ The latest version of Expo SDK, along with the Custom Dev client, to give you access to a range of powerful features and tools.
+- 🎉 [TypeScript](https://www.typescriptlang.org/) for type checking, to help you catch bugs and improve code quality.
+- 💅 A minimal UI kit built with [tailwindcss](https://docs.uniwind.dev/), which provides a range of pre-defined classes for styling your app.
+- ⚙️ Support for multiple environment builds, including Production, Staging, and Development, using Expo configuration.
+- 🦊 Husky for Git Hooks, to automate your git hooks and enforce code standards.
+- 💡 A clean project structure with Absolute Imports, to make it easier to navigate and manage your code.
+- 🚫 Lint-staged for running linters and TypeScript checks on Git staged files, to ensure that your code is always up to standards.
+- 🗂 VSCode recommended extensions, settings, and snippets to enhance the developer experience.
+- ☂️ Pre-installed [Expo Router](https://docs.expo.dev/router/introduction/) with examples, to provide a comprehensive navigation solution for your app.
+- 💫 An auth flow with [zustand](https://github.com/pmndrs/zustand) and [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) as a storage solution to save sensitive data.
+- 🛠 A simple workflow for building, releasing, and distributing your app using [Github action](https://github.com/features/actions).
+- 🔥 [React Query](https://react-query.tanstack.com/) & [axios](https://github.com/axios/axios) and [axios](https://github.com/axios/axios) for fetching data, to help you build efficient and performant apps.
+- 🧵 A good approach for handling forms with [react-hook-form](https://react-hook-form.com/) and [zod](https://github.com/colinhacks/zod) for validation + keyboard handling.
+- 🎯 Localization with [i18next](https://www.i18next.com/) , along with Eslint for validation.
+
+## ✍️ Documentation
+
+- [Create new project ](https://leanhtuan1994.github.io/react-native-template-atlas/docs/getting-started/create-new-app)
+- [Rules and Conventions](https://leanhtuan1994.github.io/react-native-template-atlas/docs/getting-started/rules-and-convetions)
+- [Project structure](https://leanhtuan1994.github.io/react-native-template-atlas/docs/getting-started/project-structure)
+- [Environment vars and config](https://leanhtuan1994.github.io/react-native-template-atlas/docs/getting-started/environment-vars-config)
+- [UI and Theming](https://leanhtuan1994.github.io/react-native-template-atlas/docs/ui-and-theme/ui-theming)
+- [Components](https://leanhtuan1994.github.io/react-native-template-atlas/docs/ui-and-theme/components)
+- [Forms](https://leanhtuan1994.github.io/react-native-template-atlas/docs/ui-and-theme/Forms)
+- [Data fetching](https://leanhtuan1994.github.io/react-native-template-atlas/docs/guides/data-fetching)
+- [Contribute to starter](https://leanhtuan1994.github.io/react-native-template-atlas/docs/contribute)
+
+## 😉 Why Expo?
+
+Expo is a powerful tool for building React Native apps, offering a range of features and benefits that can help developers create high-quality apps more efficiently. One question we often receive from the community is why we choose to use Expo instead of the React Native CLI.
+
+In the past, our team used the React Native CLI for our starter kit. However, we found that using Expo presented several advantages. In particular, the introduction of the Custom dev client feature allowed us to take advantage of the Expo ecosystem and utilize native libraries without the need for ejecting the app. This has greatly simplified our development process and enabled us to focus on the business logic of our projects.
+
+Additionally, we have found that using Expo has made it easier to upgrade our apps to new versions, eliminating the issues we previously encountered when using the React Native CLI.
+
+Overall, we believe that Expo offers numerous benefits for building React Native apps and is a valuable tool for any developer. The real question may be, **why not use Expo?**
+
+## 🤔 Is this starter for you?
+
+If you are planning to build a React Native app and are looking for a strong foundation, well-designed architecture, and a positive developer experience, then this starter kit is an excellent resource to consider. It offers a comprehensive set of best practices and tools that have been tested and proven effective in multiple projects.
+
+Even if you are not sure that using a starter kit is the right choice for your project, you can still benefit from this resource. You can explore the starter kit and draw inspiration from the solutions it provides for common challenges faced by React Native developers. This can be a helpful way to discover good practices and find effective solutions for your own app development process.
+
+Overall, whether you choose to use this starter kit as is or simply take some ideas from it, we believe it offers valuable insights and resources for anyone looking to build a high-quality React Native app.
+
+## 🧑‍💻 Stay up to date
+
+We are committed to continually improving our starter kit and providing the best possible resources for building React Native apps. To that end, we regularly add new features and fix any bugs that are discovered.
+
+If you want to stay up to date with the latest developments in our starter kit, you can either watch the repository or hit the "star" button. This will allow you to receive notifications whenever new updates are available.
+
+We value the feedback and contributions of our users, and we encourage you to let us know if you have any suggestions for improving our starter kit. We are always looking for ways to make it even more effective and useful for our community. So, please do not hesitate to reach out and share your thoughts with us.
+
+<!-- add a gif image here  -->
+
+## 💎 Libraries used
+
+- [Expo](https://docs.expo.io/)
+- [Expo Router](https://docs.expo.dev/router/introduction/)
+- [Uniwind](https://docs.uniwind.dev/)
+- [Flash list](https://github.com/Shopify/flash-list)
+- [React Query](https://tanstack.com/query/v4)
+- [Axios](https://axios-http.com/docs/intro)
+- [React Hook Form](https://react-hook-form.com/)
+- [i18next](https://www.i18next.com/)
+- [zustand](https://github.com/pmndrs/zustand)
+- [React Native MMKV](https://github.com/mrousavy/react-native-mmkv)
+- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/)
+- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/)
+- [React Native Svg](https://github.com/software-mansion/react-native-svg)
+- [ React Error Boundaries](https://github.com/bvaughn/react-error-boundary)
+- [Expo Image](https://docs.expo.dev/versions/unversioned/sdk/image/)
+
+## Contributors
+
+This starter is maintained by [Atlas mobile tribe team](https://leanhtuan1994.github.io/team) and we welcome new contributors to join us in improving it. If you are interested in getting involved in the project, please don't hesitate to open an issue or submit a pull request.
+
+In addition to maintaining this starter kit, we are also available to work on custom projects and help you build your dream app. If you are looking for experienced and reliable developers to bring your app vision to life, please visit our website at [obytes.com/contact](https://leanhtuan1994.github.io/contact) to get in touch with us. We would be happy to discuss your project in more detail and explore how we can help you achieve your goals.
+
+## 🔥 How to contribute?
+
+Thank you for your interest in contributing to our project. Your involvement is greatly appreciated and we welcome your contributions. Here are some ways you can help us improve this project:
+
+1. Show your support for the project by giving it a 🌟 on Github. This helps us increase visibility and attract more contributors.
+2. Share your thoughts and ideas with us by opening an issue. If you have any suggestions or feedback about any aspect of the project, we are always eager to hear from you and have a discussion.
+3. If you have any questions about the project, please don't hesitate to ask. Simply open an issue and our team will do our best to provide a helpful and informative response.
+4. If you encounter a bug or typo while using the starter kit or reading the documentation, we would be grateful if you could bring it to our attention. You can open an issue to report the issue, or even better, submit a pull request with a fix.
+
+We value the input and contributions of our community and look forward to working with you to improve this project.
+
+## ❓ FAQ
+
+If you have any questions about the starter and want answers, please check out the [Discussions](https://github.com/leanhtuan1994/react-native-template-atlas/discussions) page.
+
+## 🔖 License
+
+This project is MIT licensed.

package/clone-repo.js

@@ -0,0 +1,35 @@
+const { runCommand } = require('./utils.js');
+const { consola } = require('consola');
+
+const getLatestRelease = async () => {
+  try {
+    const repoData = await fetch(
+      'https://api.github.com/repos/leanhtuan1994/react-native-template-atlas/releases/latest'
+    );
+    const releaseData = await repoData.json();
+    return releaseData.tag_name || 'master';
+  } catch (error) {
+    console.warn(
+      'Failed to retrieve the latest release; will use the master branch instead'
+    );
+    return 'master';
+  }
+};
+
+const cloneLastTemplateRelease = async (projectName) => {
+  consola.start('Extracting last release number 👀');
+  const latest_release = await getLatestRelease();
+  consola.info(`Using Atlas starter ${latest_release}`);
+
+  // create a new project based on atlas template
+  const cloneStarter = `git clone -b ${latest_release} --depth=1   https://github.com/leanhtuan1994/react-native-template-atlas.git ${projectName}`;
+  await runCommand(cloneStarter, {
+    loading: 'Extracting the starter template...',
+    success: 'Starter extracted successfully',
+    error: 'Failed to download and extract template',
+  });
+};
+
+module.exports = {
+  cloneLastTemplateRelease,
+};

package/index.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const { consola } = require('consola');
+const { showMoreDetails } = require('./utils.js');
+const { cloneLastTemplateRelease } = require('./clone-repo.js');
+const { setupProject, installDeps } = require('./setup-project.js');
+
+const createAtlasApp = async () => {
+  consola.box('Atlas Starter\nPerfect React Native App Kickstart 🚀!');
+  // get project name from command line
+  const projectName = process.argv[2];
+  // check if project name is provided
+  if (!projectName) {
+    consola.error(
+      'Please provide a name for your project: `npx create-atlas-rn-app@latest <project-name>`'
+    );
+    process.exit(1);
+  }
+  // clone the last release of the template from github
+  await cloneLastTemplateRelease(projectName);
+
+  // setup the project: remove unnecessary files, update package.json infos, name and  set version to 0.0.1 + add initial version to osMetadata
+  await setupProject(projectName);
+
+  // install project dependencies using pnpm
+  await installDeps(projectName);
+
+  // show instructions to run the project + link to the documentation
+  showMoreDetails(projectName);
+};
+
+createAtlasApp();

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "create-atlas-rn-app",
+  "version": "1.7.1",
+  "description": "Atlas expo starter cli",
+  "homepage": "https://github.com/leanhtuan1994/react-native-template-atlas",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leanhtuan1994/react-native-template-atlas.git"
+  },
+  "main": "index.js",
+  "scripts": {
+    "start": "node ."
+  },
+  "bin": {
+    "create-atlas-rn-app": "index.js"
+  },
+  "files": [
+    "index.js",
+    "utils.js",
+    "clone-repo.js",
+    "setup-project.js"
+  ],
+  "dependencies": {
+    "consola": "^3.2.3",
+    "fs-extra": "^10.1.0"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "template",
+    "react-native-starter",
+    "expo-starter",
+    "react-native-boilerplate",
+    "expo-boilerplate",
+    "cli",
+    "atlas"
+  ]
+}

package/setup-project.js

@@ -0,0 +1,90 @@
+const { execShellCommand, runCommand } = require('./utils.js');
+const { consola } = require('consola');
+const fs = require('fs-extra');
+const path = require('path');
+
+const initGit = async (projectName) => {
+  await execShellCommand(`cd ${projectName} && git init && cd ..`);
+};
+
+const installDeps = async (projectName) => {
+  await runCommand(`cd ${projectName} && pnpm install`, {
+    loading: 'Installing  project dependencies',
+    success: 'Dependencies installed',
+    error: 'Failed to install dependencies, Make sure you have pnpm installed',
+  });
+};
+
+// remove unnecessary files, such us .git, ios, android, docs, cli, LICENSE
+const removeFiles = async (projectName) => {
+  const FILES_TO_REMOVE = [
+    '.git',
+    'README.md',
+    'ios',
+    'android',
+    'docs',
+    'cli',
+    'LICENSE',
+  ];
+
+  FILES_TO_REMOVE.forEach((file) => {
+    fs.removeSync(path.join(process.cwd(), `${projectName}/${file}`));
+  });
+};
+
+// Update package.json infos, name and  set version to 0.0.1 + add initial version to osMetadata
+const updatePackageInfos = async (projectName) => {
+  const packageJsonPath = path.join(
+    process.cwd(),
+    `${projectName}/package.json`
+  );
+  const packageJson = fs.readJsonSync(packageJsonPath);
+  packageJson.osMetadata = { initVersion: packageJson.version };
+  packageJson.version = '0.0.1';
+  packageJson.name = projectName?.toLowerCase();
+  packageJson.repository = {
+    type: 'git',
+    url: 'git+https://github.com/user/repo-name.git',
+  };
+  fs.writeJsonSync(packageJsonPath, packageJson, { spaces: 2 });
+};
+
+const updateProjectConfig = async (projectName) => {
+  const configPath = path.join(process.cwd(), `${projectName}/env.js`);
+  const contents = fs.readFileSync(configPath, {
+    encoding: 'utf-8',
+  });
+  const replaced = contents
+    .replace(/AtlasApp/gi, projectName)
+    .replace(/com.atlas/gi, `com.${projectName.toLowerCase()}`)
+    .replace(/atlas/gi, 'expo-owner');
+
+  fs.writeFileSync(configPath, replaced, { spaces: 2 });
+  const readmeFilePath = path.join(
+    process.cwd(),
+    `${projectName}/README-project.md`
+  );
+  fs.renameSync(
+    readmeFilePath,
+    path.join(process.cwd(), `${projectName}/README.md`)
+  );
+};
+
+const setupProject = async (projectName) => {
+  consola.start(`Clean up and setup your project 🧹`);
+  try {
+    removeFiles(projectName);
+    await initGit(projectName);
+    updatePackageInfos(projectName);
+    updateProjectConfig(projectName);
+    consola.success(`Clean up and setup your project 🧹`);
+  } catch (error) {
+    consola.error(`Failed to clean up project folder`, error);
+    process.exit(1);
+  }
+};
+
+module.exports = {
+  setupProject,
+  installDeps,
+};

package/utils.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+const { exec } = require('child_process');
+const { consola } = require('consola');
+
+const execShellCommand = (cmd) => {
+  return new Promise((resolve, reject) => {
+    exec(cmd, (error, stdout, stderr) => {
+      if (error) {
+        console.warn(error);
+        reject(error);
+      }
+      resolve(stdout ? stdout : stderr);
+    });
+  });
+};
+
+const runCommand = async (
+  command,
+  { loading = 'loading ....', success = 'success', error = 'error' }
+) => {
+  consola.start(loading);
+  try {
+    await execShellCommand(command);
+    consola.success(success);
+  } catch (err) {
+    consola.error(`Failed to execute ${command}`, err);
+    process.exit(1);
+  }
+};
+// show more details message using chalk
+const showMoreDetails = (projectName) => {
+  consola.box(
+    'Your project is ready to go! \n\n\n',
+    '🚀 To get started, run the following commands: \n\n',
+    `   \`cd ${projectName}\` \n`,
+    '   IOS     :  `pnpm ios` \n',
+    '   Android :  `pnpm android` \n\n',
+    '📚 Starter Documentation: https://leanhtuan1994.github.io/react-native-template-atlas'
+  );
+};
+
+module.exports = {
+  runCommand,
+  showMoreDetails,
+  execShellCommand,
+};