✨ Initial commit

.gitignore

@@ -0,0 +1,210 @@
+### JetBrains template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+
+*/.yarn/*
+
+
+# custom
+
+client/node_modules
+client/dist
+
+ui/dist
+ui/build
+

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2021 JEFFe
+
+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,39 @@
+# FiveM React Typescript Eslint Boilerplate
+
+Boilerplate for [FiveM](https://fivem.net/) with [React](https://reactjs.org/) [Typescript](https://www.typescriptlang.org/) [Eslint](https://eslint.org/) using [Classic Yarn](https://classic.yarnpkg.com/lang/en/) workspaces.
+
+Includes Eslint for client server and ui with typechecking.
+
+
+## Requirements
+* Brains
+* [Yarn](https://classic.yarnpkg.com/lang/en/)
+* Basic understanding of web development with react and some understanding of fivem resources.
+* Basic idea of [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/)
+
+## How to use
+1. Download this repo and extract
+2. Rename folder to something great and innovative
+3. Place folder to your Cfx server resources folder
+4. Add `ensure your_resource_name_here` to your server.cfg
+5. `yarn install` in root of the project
+6. Start making content using commands listed below
+
+## Development
+
+``yarn watch:ui`` Launches web browser with UI. You can also develop in game with this mode.
+
+``yarn watch:client`` Starts watching for changes in client and rebuilds on change. Works also in game.
+
+``yarn watch:server`` Starts watching for changes in server and rebuilds on change. Works also in game.
+
+## Building
+
+``yarn build``
+
+**NOTE:** This command will give out error code 1. Even if the build was success. If the last lines read: "File sizes after gzip:" then the build was success.
+
+
+## Acknowledgements
+
+React utils are from Project Error. You can read more about the utils at [Project Error react boilerplate](https://github.com/project-error/fivem-react-boilerplate-lua)

client/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+    "env": {
+        "es2021": true,
+        "node": true
+    },
+    "settings": {
+      "import/resolver": {
+        "typescript": {}
+      }
+    },
+    "extends": [
+        "airbnb-base",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+      ],
+    "rules": {
+      "no-console": "off",
+      "import/no-mutable-exports": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "import/extensions": [
+        "error",
+          "ignorePackages",
+          {
+            "ts": "never",
+            "tsx": "never"
+          }
+      ]
+    }
+}

client/.yarnrc.yml

@@ -0,0 +1,5 @@
+
+packageExtensions:
+  webpack-dev-server@*:
+    peerDependencies:
+      webpack-cli: "*"

client/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@app/client",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "webpack --mode development --color --progress",
+    "watch": "webpack --mode development --watch"
+  },
+  "dependencies": {
+    "@app/shared": "^1.0.0",
+    "fivem-js": "^1.5.2"
+  },
+  "devDependencies": {
+    "@citizenfx/client": "^2.0.4517-1",
+    "@types/node": "^16.9.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.22.1",
+    "remove-files-webpack-plugin": "^1.4.5",
+    "ts-loader": "^9.2.5",
+    "webpack": "^5.52.1",
+    "webpack-cli": "^4.8.0"
+  }
+}

client/src/client.ts

@@ -0,0 +1,25 @@
+// import * as Cfx from 'fivem-js';
+
+let nuiOpen = false;
+
+function toggleNuiFrame(toggle: boolean) {
+  SetNuiFocus(toggle, toggle);
+  SendNUIMessage({
+    action: 'setVisible',
+    data: toggle,
+  });
+}
+
+RegisterCommand('toggleui', (source: any, args: any) => {
+  console.log('Opening ui');
+  nuiOpen = !nuiOpen;
+
+  toggleNuiFrame(nuiOpen);
+}, false);
+
+RegisterNuiCallbackType('hideFrame');
+on('__cfx_nui:hideFrame', (_: any, cb: (returnData: any) => void) => {
+  nuiOpen = !nuiOpen;
+  toggleNuiFrame(false);
+  cb({ ok: true });
+});

client/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": ["types/*"]
+    },
+    "outDir": "./dist",
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es6",
+    "allowJs": true,
+    "lib": ["es2017"],
+    "types": ["@citizenfx/client", "@types/node"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "esModuleInterop": true
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["**/node_modules", "**/__tests__/*"]
+}