reactplay · joshi-kaushal · Jun 3, 2022 · Jun 9, 2022 · Jun 9, 2022 · Jun 20, 2022
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,11 @@
+node_modules
+
+.git
+.github
+.gitignore
+
+package-lock.json
+yarn-error.log
+yarn.lock
+
+tsconfig.json
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,40 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["plugin:react/recommended", "airbnb", "plugin:prettier/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "react/jsx-pascal-case": [1, {}],
+    "react/jsx-sort-props": [
+      1,
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "ignoreCase": true,
+        "noSortAlphabetically": true,
+        "multiline": "last"
+      }
+    ],
+    "react/jsx-boolean-value": [1, "always"],
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    "react/jsx-curly-brace-presence": [1, "always"]
+  }
+}
diff --git a/.github/ISSUE_TEMPLATE/----bug-report---.md b/.github/ISSUE_TEMPLATE/----bug-report---.md
@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: "\U0001F41B [Bug report]: "
 labels: bug
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/---feature-request---.md b/.github/ISSUE_TEMPLATE/---feature-request---.md
@@ -1,10 +1,9 @@
 ---
-name: "✨ [Feature request]: "
+name: '✨ [Feature request]: '
 about: Suggest an idea for this project
-title: "✨ [Feature request]: "
+title: '✨ [Feature request]: '
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

diff --git a/.github/ISSUE_TEMPLATE/new-play.md b/.github/ISSUE_TEMPLATE/new-play.md
@@ -1,18 +1,15 @@
 ---
 name: New Play
 about: Add a New Play Request
-title: "[Add a Play]: "
+title: '[Add a Play]: '
 labels: play-request
 assignees: ''
-
 ---
 
-Thank You! 
+Thank You!
 
 ## What's the Play about?
 
-
 ## What ReactJS concept will be used to create this play?
 
-
 ## Are you willing to take it up for implementation?
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -1,4 +1,3 @@
-
 > First thing, PLEASE READ THIS: [ReactPlay Code Review Checklist](https://github.com/reactplay/react-play/wiki/ReactPlay-Code-Review-Checklist)
 
 # Description
@@ -18,7 +17,7 @@ Please delete options that are not relevant.
 
 # How Has This Been Tested?
 
-Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. 
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.
 
 # Checklist:
 

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "endOfLine": "lf"
+}
diff --git a/CODE_OF_CONDUCT.md b/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

diff --git a/CREATE-PLAY.md b/CREATE-PLAY.md
@@ -1,6 +1,9 @@
 # Create a Play
+
 This document helps you with the steps to `Create a play` in `react-play`. You will also find the details of how to submit a play for code review.
+
 ## 🖥️ Steps to Create a Play
+
 Welcome developers! We are as excited as you are to know that you are going to create a new play. It is super easy to get started.
 
 > **Note:** The steps below assumes that you have forked and cloned the [react-play](https://github.com/reactplay/react-play) repository. Also, you have installed the dependencies using the `npm install` or `yarn install` command. If you are new to forking, please watch this [YouTube Guide](https://www.youtube.com/watch?v=h8suY-Osn8Q) to get started.
@@ -13,82 +16,83 @@ Welcome developers! We are as excited as you are to know that you are going to c
     npm run create-play
   ```
 - This will ask a few questions about your `Play` and then perform required steps to create the play. The screen shot below shows the output of the command.
-   > **Script Language**: `react-play` is equipped with both `JavaScript` and `TypeScript`. So you can use either of it as base language for your play
-
-  <p align="center">
-    <img src="./screens/plop-create.png" alt="plop create" />
-  </p>
-
-  <details>
-    <summary>
-      Please expand  to find the description of the question details.
-    </summary>
-    <p>
-      <table>
-        <thead>
-          <tr>
-            <th>Question</th>
-            <th>Mandatory</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Please provide the name of the play</td>
-            <td>Yes</td>
-            <td>Please provide a meaningful name of the play(Example: Identity Card). This name will be visible to the users. </td>
-          </tr>
-          <tr>
-            <td>Tell us more about the play</td>
-            <td>No</td>
-            <td>It is a description of the play for users to understand it better. The maximum number of allowed characters is 1024.</td>
-          </tr>
-          <tr>
-            <td>Language to be used (javascript/typescript)</td>
-            <td>Yes</td>
-            <td>Let the application know your choice of script. It supports both <b>JavaScript</b> and <b>TypeScript</b>. You can pick either of it.</td>
-          </tr>
-          <tr>
-            <td>Style to be used (css/scss)</td>
-            <td>Yes</td>
-            <td>Let the application know your choice of style. It supports both <b>css</b> and <b>scss</b>. You can pick either of it.</td>
-          </tr>
-          <tr>
-            <td>What is the level of this play?</td>
-            <td>Yes</td>
-            <td>You will be asked to select one of the three levels, Beginner, Intermediate, or Advanced. Please select a level for the play. A level indicates the possible complexity of developing the play using React.</td>
-          </tr>
-          <tr>
-            <td>Provide maximum of 5 tags</td>
-            <td>No</td>
-            <td>Please provide comma-separated list of tags. You can provide max 5 tags. Example: JSX, Hooks</td>
-          </tr>
-          <tr>
-            <td>Enter your github username</td>
-            <td>Yes</td>
-            <td>Provide your GitHub user name to mark you as the creator of the play.</td>
-          </tr>
-          <tr>
-            <td>Please provide the path(URL) to cover image</td>
-            <td>No</td>
-            <td>A cover image is used to show your play with a thumbnail in the play list page. Please provide a link a cover image that is publicly accessible using a URL, example:  https://res.cloudinary.com/reactplay/image/upload/v1649060528/demos/id-card_pdvyvz.png. Alternatively, you can have a cover.png file in the root of your play folder.
-            If you don't have a cover image, the app will use the default cover image.</td>
-          </tr>
-          <tr>
-            <td>Enter your blog url</td>
-            <td>No</td>
-            <td>If you have written an article about this play, please provide the link to your blog article page.</td>
-          </tr>
-          <tr>
-            <td>Enter your video url</td>
-            <td>No</td>
-            <td>If you have created a video tutorial about this play, please provide the link to your YouTube video.</td>
-          </tr>
-        </tbody>
-      </table>
+
+  > **Script Language**: `react-play` is equipped with both `JavaScript` and `TypeScript`. So you can use either of it as base language for your play
+
+    <p align="center">
+      <img src="./screens/plop-create.png" alt="plop create" />
     </p>
-  </summary>
-</details>
+
+    <details>
+      <summary>
+        Please expand  to find the description of the question details.
+      </summary>
+      <p>
+        <table>
+          <thead>
+            <tr>
+              <th>Question</th>
+              <th>Mandatory</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Please provide the name of the play</td>
+              <td>Yes</td>
+              <td>Please provide a meaningful name of the play(Example: Identity Card). This name will be visible to the users. </td>
+            </tr>
+            <tr>
+              <td>Tell us more about the play</td>
+              <td>No</td>
+              <td>It is a description of the play for users to understand it better. The maximum number of allowed characters is 1024.</td>
+            </tr>
+            <tr>
+              <td>Language to be used (javascript/typescript)</td>
+              <td>Yes</td>
+              <td>Let the application know your choice of script. It supports both <b>JavaScript</b> and <b>TypeScript</b>. You can pick either of it.</td>
+            </tr>
+            <tr>
+              <td>Style to be used (css/scss)</td>
+              <td>Yes</td>
+              <td>Let the application know your choice of style. It supports both <b>css</b> and <b>scss</b>. You can pick either of it.</td>
+            </tr>
+            <tr>
+              <td>What is the level of this play?</td>
+              <td>Yes</td>
+              <td>You will be asked to select one of the three levels, Beginner, Intermediate, or Advanced. Please select a level for the play. A level indicates the possible complexity of developing the play using React.</td>
+            </tr>
+            <tr>
+              <td>Provide maximum of 5 tags</td>
+              <td>No</td>
+              <td>Please provide comma-separated list of tags. You can provide max 5 tags. Example: JSX, Hooks</td>
+            </tr>
+            <tr>
+              <td>Enter your github username</td>
+              <td>Yes</td>
+              <td>Provide your GitHub user name to mark you as the creator of the play.</td>
+            </tr>
+            <tr>
+              <td>Please provide the path(URL) to cover image</td>
+              <td>No</td>
+              <td>A cover image is used to show your play with a thumbnail in the play list page. Please provide a link a cover image that is publicly accessible using a URL, example:  https://res.cloudinary.com/reactplay/image/upload/v1649060528/demos/id-card_pdvyvz.png. Alternatively, you can have a cover.png file in the root of your play folder.
+              If you don't have a cover image, the app will use the default cover image.</td>
+            </tr>
+            <tr>
+              <td>Enter your blog url</td>
+              <td>No</td>
+              <td>If you have written an article about this play, please provide the link to your blog article page.</td>
+            </tr>
+            <tr>
+              <td>Enter your video url</td>
+              <td>No</td>
+              <td>If you have created a video tutorial about this play, please provide the link to your YouTube video.</td>
+            </tr>
+          </tbody>
+        </table>
+      </p>
+    </summary>
+  </details>
 
 - Now you can run the app using the following command:
   ```shell
@@ -99,7 +103,9 @@ Welcome developers! We are as excited as you are to know that you are going to c
 - You should now see your play added to the [play list](http://localhost:3000/plays) page. You can click on the play thumbnail to see the details of the play.
 
 - That's it. Now start coding your `Play` using your favorite code editor!
+
 ## 👀 Submitting a Play for Review
+
 After you done with coding for your `Play`, you can submit it for review. Submitting a `Play` for review is a two step process.
 
 - Create a Pull Request on the [react-play](https://github.com/reactplay/react-play) repository with your changes. Please add `atapas` as a reviewer.