Add Eslint, prettier and pre commit hook.

.eslintrc.json

@@ -29,33 +29,33 @@
     "react/react-in-jsx-scope": 0,
 
     // Require a whitespace at the beginning of a comment
-    "spaced-comment": ["warn", "always"],
+    "spaced-comment": ["error", "always"],
 
     // Maximum line length for comments
     // Trailing comments allowed beyond maximum line length
-    "max-len": ["warn", { "code": 400, "comments": 100, "ignoreTrailingComments": true }],
+    "max-len": ["error", { "code": 400, "comments": 100, "ignoreTrailingComments": true }],
 
     // Require PascalCase for user-defined JSX components
-    "react/jsx-pascal-case": ["warn"],
+    "react/jsx-pascal-case": ["error"],
 
     // Console logs cannot be committed.
-    "no-console": ["warn"],
+    "no-console": ["error"],
 
     // Require props to be sorted
-    "react/jsx-sort-props": ["warn", { "callbacksLast": true, "shorthandFirst": true }],
+    "react/jsx-sort-props": ["error", { "callbacksLast": true, "shorthandFirst": true }],
 
     // Omit boolean prop value when set to true
-    "react/jsx-boolean-value": ["warn", "never"],
+    "react/jsx-boolean-value": ["error", "never"],
 
     // Require self closing tags in JSX/HTML
-    "react/self-closing-comp": ["warn", { "component": true, "html": true }],
+    "react/self-closing-comp": ["error", { "component": true, "html": true }],
 
     // Disallow unnecessary curly braces in JSX
-    "react/jsx-curly-brace-presence": ["warn", "never"],
+    "react/jsx-curly-brace-presence": ["error", "never"],
 
     // Require blank line before certain statements
     "padding-line-between-statements": [
-      "warn",
+      "error",
       { "blankLine": "always", "prev": "*", "next": "function" },
       { "blankLine": "always", "prev": "*", "next": "class" },
       { "blankLine": "always", "prev": "*", "next": "export" },

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,8 +1,8 @@
 name: "\U0001F41B [Bug report]:"
 description: Create a report to help us improve
 title: "\U0001F41B [Bug report]: "
-labels: ["bug"]
-assignees: [""]
+labels: ['bug']
+assignees: ['']
 body:
   - type: markdown
     attributes:
@@ -27,51 +27,51 @@ body:
         3. Scroll down to '....'
         4. See error
     validations:
-      required: true   
-      
+      required: true
+
   - type: textarea
     id: expected-behavior
     attributes:
       label: Expected behavior
-      description: A clear and concise description of what you expected to happen.                   
+      description: A clear and concise description of what you expected to happen.
     validations:
-      required: true  
-      
+      required: true
+
   - type: textarea
     id: desktop-details
     attributes:
       label: Desktop (Please provide your system information)
-      description:  |
+      description: |
         examples:
           - **OS**: [e.g. iOS]
           - **Browser** [e.g. chrome, safari]
-          - **Version** [e.g. 22]                 
+          - **Version** [e.g. 22]
     validations:
-      required: true  
-      
+      required: true
+
   - type: textarea
     id: mobile-browser
     attributes:
       label: Mobile (Please provide your device information)
-      description:  |
+      description: |
         examples:
            - **Device**: [e.g. iPhone6]
            - **OS**: [e.g. iOS8.1]
            - **Browser** [e.g. stock browser, safari]
-           - **Version** [e.g. 22]           
+           - **Version** [e.g. 22]
   - type: textarea
     id: screenshot
     attributes:
       label: Screenshot / Screenshare
       description: If applicable, add screenshots to help explain your problem.
-      
+
   - type: textarea
     id: additional-context
     attributes:
       label: Relevant log output
       description: Add any other context about the problem here.
       render: shell
-      
+
   - type: checkboxes
     id: terms
     attributes:

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,8 +1,8 @@
-name: "✨ [Feature request]:"
+name: '✨ [Feature request]:'
 description: Suggest an idea for this project
-title: "✨ [Feature request]: "
+title: '✨ [Feature request]: '
 labels: []
-assignees: [""]
+assignees: ['']
 body:
   - type: markdown
     attributes:
@@ -15,36 +15,36 @@ body:
       description: A clear and concise description of what the problem is.
       placeholder: I'm always frustrated when [...]
     validations:
-      required: true   
-      
+      required: true
+
   - type: textarea
     id: solution
     attributes:
       label: Describe the solution you'd like.
       description: A clear and concise description of what you want to happen.
     validations:
-      required: true 
-      
+      required: true
+
   - type: textarea
     id: alternatives
     attributes:
       label: Describe alternatives you've considered.
       description: A clear and concise description of any alternative solutions or features you've considered.
     validations:
-      required: true 
-      
+      required: true
+
   - type: textarea
     id: screenshot
     attributes:
       label: Screenshot / Screenshare
       description: Please add screenshot or screenshare if that healps to describe the feature.
-      
+
   - type: textarea
     id: additional-context
     attributes:
       label: Additional context
       description: Add other additional context about the feature.
-      
+
   - type: checkboxes
     id: terms
     attributes:

.github/ISSUE_TEMPLATE/new-play.yml

@@ -1,42 +1,41 @@
 name: New Play
 description: Add a New Play Request
-title: "[Add a Play]: "
-labels: ["play-request"]
-assignees: [""]
+title: '[Add a Play]: '
+labels: ['play-request']
+assignees: ['']
 body:
   - type: markdown
     attributes:
       value: |
         Thanks for taking the time for creating a new play.
-
-
+
   - type: textarea
     id: about-play
     attributes:
       label: What's the Play about?
       description: Tell us in details about your play.
     validations:
       required: true
-        
+
   - type: textarea
     id: react-concepts
     attributes:
       label: What ReactJS concept will be used to create this play?
       placeholder: Components, Hooks, React Router ...
     validations:
       required: true
-      
+
   - type: dropdown
     id: implementation
     attributes:
       label: Are you willing to take it up for implementation?
       multiple: false
       options:
-        - "Yes"
-        - "No"
+        - 'Yes'
+        - 'No'
     validations:
       required: true
-        
+
   - type: checkboxes
     id: terms
     attributes:

.github/workflows/contributions.yml

@@ -4,16 +4,15 @@ on:
     types:
       - closed
 
-
 jobs:
   add-contributors:
     if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/github-script@v6
-      with:
-        github-token: ${{secrets.GITHUB_TOKEN}}
-        script: |
+      - uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
             const creator = context.payload.sender.login
             const opts = github.rest.issues.listForRepo.endpoint.merge({
               ...context.issue,
@@ -37,4 +36,4 @@ jobs:
               owner: context.repo.owner,
               repo: context.repo.repo,
               body: '@all-contributors please add @creater'
-            })
+            })

.github/workflows/cypress.yml

@@ -25,7 +25,7 @@ jobs:
           install-command: |
             npm install --legacy-peer-deps
           start: npm start
-          wait-on: "http://localhost:3000"
+          wait-on: 'http://localhost:3000'
           browser: chrome
         env:
           # pass GitHub token to detect new build vs re-run build

.prettierrc

@@ -1,7 +1,7 @@
-{
-  "semi": true,
-  "tabWidth": 2,
-  "printWidth": 100,
-  "singleQuote": true,
-  "trailingComma": "none"
-}
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

CONTRIBUTING.md

@@ -1,19 +1,19 @@
 # Contributing
 
 When contributing to this repository, please first discuss the change you wish to make via [issue](https://github.com/reactplay/react-play/issues),
-[email](mailto:ioreactplay@gmail.com), or any other method with the owners of this repository before making a change. 
+[email](mailto:ioreactplay@gmail.com), or any other method with the owners of this repository before making a change.
 
 Please note we have a [Code of Conduct](https://github.com/reactplay/react-play/blob/main/CODE_OF_CONDUCT.md), please follow it in all your interactions with the project.
 
 ## Pull Request Process
 
-1. Ensure any install or build dependencies are removed before the end of the layer when doing a 
+1. Ensure any install or build dependencies are removed before the end of the layer when doing a
    build.
-2. Update the README.md with details of changes to the interface, this includes new environment 
+2. Update the README.md with details of changes to the interface, this includes new environment
    variables, exposed ports, useful file locations and container parameters.
 3. Increase the version numbers in any examples files and the README.md to the new version that this
    Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
-4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 
+4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
    do not have permission to do that, you may request the second reviewer to merge it for you.
 
 ## Code of Conduct
@@ -32,21 +32,21 @@ orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ### Our Responsibilities
@@ -89,4 +89,4 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage], versi
 available at [http://contributor-covenant.org/version/1/4][version]
 
 [homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
+[version]: http://contributor-covenant.org/version/1/4/