asdf local nodejs 18.14.2

npx create-expo-app app --template

rm -rf package-lock.json
yarn

npx install-peerdeps --dev eslint-config-airbnb
# It seems as if you are using Yarn. Would you like to use Yarn for the installation? (y/n) y

# ESLint の設定ファイルを追加でインストールする
npx expo install -- -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript eslint-plugin-react-native
# Prettier 本体と ESLint と統合するための設定ファイルを追加でインストールする
npx expo install -- -D prettier eslint-config-prettier

touch tsconfig.eslint.json .eslintrc.cjs .prettierrc.cjs

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "allowJs": true
  },
  "include": ["src", ".*.cjs", "index.ts", "babel.config.js"]
}

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "eslint-plugin-react-native"],
  env: {
    browser: true,
    es2021: true,
  },
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: "./tsconfig.eslint.json",
    tsconfigRootDir: __dirname,
  },
  ignorePatterns: ["dist"],
  extends: [
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:react-native/all",
    "prettier",
  ],
  rules: {
    "import/prefer-default-export": "off", // named export を使用するので off にする
    "react/react-in-jsx-scope": "off", // React 17 から import の必要がなくなったため off にする
    "react/destructuring-assignment": "off", // props は props としてわかるようにしたいので off にする
    "react/no-unstable-nested-components": ["error", { allowAsProps: true }], // Tabs.Screen の options.tabBarIcon などで使用するので allowAsProps にする
  },
  overrides: [],
};

module.exports = {
  printWidth: 120,
};

npx husky-init && yarn

yarn add -D lint-staged
touch .lintstagedrc.cjs

module.exports = {
  "*.{js,jsx,cjs,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{json,md,yaml}": ["prettier --write"],
};

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn run lint-staged

yarn add -D depcheck
touch .depcheckrc

ignores:
  # dependencies
  - "expo-splash-screen"
  - "expo-system-ui"
  - "react-dom"
  - "react-native-web"

  # devDependencies
  - "@babel/core"
  - "depcheck"
  - "jest"
  - "lint-staged"
  - "prettier"
  - "typescript"

yarn run depcheck

No depcheck issue
✨  Done in 1.18s.

echo "\nyarn run depcheck" >> .husky/pre-commit

touch expo-app.code-workspace

{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "files.associations": {
      ".depcheckrc": "yaml" // .depcheckrc の language mode の設定
    },
    "cSpell.words": ["depcheck", "depcheckrc"],
  },
  "extensions": {
    "recommendations": [
      "esbenp.prettier-vscode",
      "dbaeumer.vscode-eslint",
      "streetsidesoftware.code-spell-checker"
    ]
  }
}

touch Makefile

deps:
	yarn

start: deps
	yarn expo start

start/with-cache-clear: deps
	yarn expo start --clear

android: deps
	yarn expo start --android

ios: deps
	yarn expo start --ios

web: deps
	yarn expo start --web

test/jest: deps
	yarn jest --watchAll

test/tsc: deps
	yarn tsc --noEmit

lint-format: deps
	yarn eslint --fix .
	yarn prettier --write .

jq 'del(.scripts.start, .scripts.android, .scripts.ios, .scripts.web, .scripts.test)' package.json > package.json.tmp
mv -f package.json.tmp package.json

npx expo install react-native-ui-lib react-native-reanimated react-native-gesture-handler @babel/plugin-proposal-export-namespace-from

touch app/'(tabs)'/ReNaUiLib.tsx

import { View, TextField, Text, Button } from "react-native-ui-lib";

export default function ReNaUiLib(): JSX.Element {
  return (
    <View flex paddingH-25 paddingT-120>
      <Text blue50 text20>
        Welcome
      </Text>
      <TextField text50 grey10 placeholder="username" />
      <TextField text50 secureTextEntry grey10 placeholder="password" />
      <View marginT-100 center>
        <Button text70 white background-orange30 label="Login" />
        <Button link text70 orange30 marginT-20 label="Sign Up" />
      </View>
    </View>
  );
}

npx expo install -- -D @types/react-test-renderer @types/jest

mv components/__tests__/StyledText-test.js components/__tests__/StyledText.test.tsx 

/** @type {import('@babel/core').ConfigFunction} */
module.exports = function (api) {
  ...

mv app components constants src

npx expo install -- -D babel-plugin-module-resolver

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@src/*": ["src/*"]
    }
  }
}

[
  "module-resolver",
  {
    alias: {
      "@src": "./src",
    },
  },
],

find src -type f -exec sed -i "" 's#\.\./\.\./constants#@src/constants#g' {} +
find src -type f -exec sed -i "" 's#\.\./constants#@src/constants#g' {} +
find src -type f -exec sed -i "" 's#\.\./\.\./components#@src/components#g' {} +
find src -type f -exec sed -i "" 's#\.\./components#@src/components#g' {} +