Code Cleanup against Main Branch (reactplay#821)

.eslintignore

@@ -0,0 +1,15 @@
+node_modules
+.github
+service-worker.js
+registerServiceWorker.js
+reportWebVitals.js
+setupTests.js
+.build;
+package-lock.json;
+package.json;
+yarn.lock;
+tailwind.config.js;
+tsconfig.json;
+postcss.config.js;
+Dockerfile.DEV;
+Dockerfile.PROD;

.eslintrc.js

@@ -0,0 +1,83 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+    jest: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended'
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: ['react-hooks', 'react', '@typescript-eslint', 'prettier'],
+  ignorePatterns: ['**/plays/index.js'],
+
+  rules: {
+    'import/extensions': 0,
+
+    'import/no-named-as-default-member': 0,
+    'react/prop-types': 0,
+    'react/display-name': 0,
+    'react/react-in-jsx-scope': 0,
+
+    // type - any would be very handy in few cases.
+    // The validation shouldn't be at linters end rather at code review end
+    '@typescript-eslint/no-explicit-any': 0,
+
+    // Empty functions are handy for creating protocol not execution
+    '@typescript-eslint/no-empty-function': 0,
+
+    // Require a whitespace at the beginning of a comment
+    'spaced-comment': ['error', 'always'],
+
+    // Maximum line length for comments
+    // Trailing comments allowed beyond maximum line length
+    'max-len': ['error', { code: 400, comments: 200, ignoreTrailingComments: true }],
+
+    // Require PascalCase for user-defined JSX components
+    'react/jsx-pascal-case': ['error'],
+
+    // Console logs cannot be committed.
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+
+    // Require props to be sorted
+    'react/jsx-sort-props': ['error', { callbacksLast: true, shorthandFirst: true }],
+
+    // Omit boolean prop value when set to true
+    'react/jsx-boolean-value': ['error', 'never'],
+
+    // Require self closing tags in JSX/HTML
+    'react/self-closing-comp': ['error', { component: true, html: true }],
+
+    // Disallow unnecessary curly braces in JSX
+    'react/jsx-curly-brace-presence': ['error', 'never'],
+
+    // Require blank line before certain statements
+    'padding-line-between-statements': [
+      'error',
+      { blankLine: 'always', prev: '*', next: 'function' },
+      { blankLine: 'always', prev: '*', next: 'class' },
+      { blankLine: 'always', prev: '*', next: 'export' },
+      // Ignore consecutive export statements
+      { blankLine: 'any', prev: 'export', next: 'export' },
+      { blankLine: 'always', prev: '*', next: 'return' },
+      { blankLine: 'always', prev: '*', next: 'break' },
+      { blankLine: 'always', prev: '*', next: 'continue' },
+      { blankLine: 'always', prev: '*', next: 'throw' }
+    ]
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
+};

.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

@@ -0,0 +1,7 @@
+{
+  "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