Code formatting setup, code actions and guidleines

.editorconfig

@@ -0,0 +1,27 @@
+# Top-most EditorConfig file
+root = true
+
+# Global settings
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# React
+[**.jsx]
+indent_size = 4
+
+# Svelte
+[**.svelte]
+indent_size = 4
+
+# VanillaJS
+[**.js]
+indent_size = 4
+
+# Vue
+[**.vue]
+indent_size = 4

.github/workflows/format_code.yml

@@ -0,0 +1,44 @@
+name: Format Check
+
+on:
+  push:
+    branches:
+      - main
+      - format_ca
+  pull_request:
+    branches:
+      - main
+      - format_ca
+
+jobs:
+  prettier-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js and pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Format on react-todo
+        run: cd packages/react-todo && pnpm install && pnpm run prettier:format
+
+      - name: Format on svelte-todo
+        run: cd packages/svelte-todo && pnpm install && pnpm run prettier:format
+
+      - name: Format on vanilla-todo
+        run: cd packages/vanilla-todo && pnpm install && pnpm run prettier:format
+
+      - name: Format on vue-todo
+        run: cd packages/vue-todo && pnpm install && pnpm run prettier:format
+
+      - name: Commit and push changes
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "Auto-format code with Prettier"
+          git push

README.md

@@ -27,7 +27,12 @@ This site is inspired by the following:
 ### Installation
 
 ```bash
-$ pnpm
+$ pnpm install
+```
+
+### Formatting files
+```bash
+$ pnpm format
 ```
 
 ### Running the app
@@ -54,6 +59,24 @@ $ pnpm build
 
 
 
+TODO
+[Figma LinkA](https://www.figma.com/file/gDMtmYeOPwjGFbTnNu1oQ8/FWDP---Todo?type=design&node-id=0-1&mode=design)
+
+![image](https://github.com/FWDP/rantboard/assets/5866196/d0c67ea9-de42-4953-b22a-a5aef3e53082)
+![image](https://github.com/FWDP/rantboard/assets/5866196/1979d74e-358a-4397-9d5b-d71d77d8778d)
+![image](https://github.com/FWDP/rantboard/assets/5866196/2b705f55-49ea-4a82-9707-ed2ad1efdcbe)
+=======
+
+1. Fork the repository from official FWDP Github
+2. Clone the repository to your local machine
+3. Make changes, follow github commit and pull conventions
+4. Go to github and create a pull request
+5. Wait for admin approval
+
+# HAPPY CODING! ♥
+
+
+
 TODO
 [Figma LinkA](https://www.figma.com/file/gDMtmYeOPwjGFbTnNu1oQ8/FWDP---Todo?type=design&node-id=0-1&mode=design)
 
@@ -62,3 +85,4 @@ TODO
 ![image](https://github.com/FWDP/rantboard/assets/5866196/2b705f55-49ea-4a82-9707-ed2ad1efdcbe)
 
 
+>>>>>>> main

packages/react-todo/.eslintrc.cjs

@@ -1,20 +1,17 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
     ],
-  },
-}
+    ignorePatterns: ["dist", ".eslintrc.cjs"],
+    parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+    settings: { react: { version: "18.2" } },
+    plugins: ["react-refresh"],
+    rules: {
+        "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    },
+};

packages/react-todo/.gitignore

@@ -21,4 +21,4 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

packages/react-todo/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

packages/react-todo/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "singleQuote": false,
+    "trailingComma": "all",
+    "tabWidth": 4,
+    "semi": true,
+    "printWidth": 100
+}

packages/react-todo/README.md

@@ -4,5 +4,5 @@ This template provides a minimal setup to get React working in Vite with HMR and
 
 Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+-   [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+-   [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

packages/react-todo/index.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + React</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.jsx"></script>
+    </body>
 </html>

packages/react-todo/package.json

@@ -1,26 +1,29 @@
 {
-  "name": "react-todo",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "vite": "^4.4.5"
-  }
+    "name": "react-todo",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview",
+        "prettier:format": "pnpm exec -- npx prettier --write .",
+        "prettier:check": "pnpm exec -- npx prettier --check ."
+    },
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.15",
+        "@types/react-dom": "^18.2.7",
+        "@vitejs/plugin-react": "^4.0.3",
+        "eslint": "^8.45.0",
+        "eslint-plugin-react": "^7.32.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.3",
+        "prettier": "^3.0.1",
+        "vite": "^4.4.5"
+    }
 }