Merge branch 'main' into fix-duplication

samvardhan777 · Jul 23, 2022 · aa6193e · aa6193e
2 parents 3cbc627 + 7670c0e
commit aa6193e
Show file tree

Hide file tree

Showing 60 changed files with 1,469 additions and 589 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -292,6 +292,15 @@
  "contributions": [
  "code"
  ]
+ },
+ {
+ "login": "Anirban-1490",
+ "name": "Anirban Pratihar",
+ "avatar_url": "https://avatars.githubusercontent.com/u/82874704?v=4",
+ "profile": "https://www.linkedin.com/in/anirban-pratihar-48a591226/",
+ "contributions": [
+ "code"
+ ]
  }
  ],
  "contributorsPerLine": 7,

diff --git a/.gitignore b/.gitignore
@@ -28,3 +28,6 @@ yarn.lock
 
 # nhost
 .nhost
+
+# play index
+src/plays/index.js
diff --git a/CREATE-PLAY.md b/CREATE-PLAY.md
@@ -5,108 +5,73 @@ Welcome developers! We are as excited as you are to know that you are going to c
 
 > **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.
 
-- Open a command prompt in your project folder.
-- Run the following command:
- ```shell
- yarn create-play
- # or
- npm run create-play
+- Run the application using 
+ ```bash
+ yarn start
+ #OR
+ npm run start
  ```
-- 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>
- </p>
- </summary>
-</details>
 
-- Now you can run the app using the following command:
- ```shell
- yarn start
- # or
- npm start
+ You might see a prompt like this 
+
+ ```bash
+ Need to install the following packages:
+ create-react-play
+ Ok to proceed? (y)
  ```
-- You should now see your play added to the [play list](http:https://localhost:3000/plays) page. You can click on the play thumbnail to see the details of the play.
+ Press `y` and hit `Enter`. This will install `create-react-play` globally. For more info check [`create-react-play readme`](https://github.com/reactplay/create-react-play/blob/main/README.md)
+
+- You should be able to access the application on http:https://localhost:3000
+- Click on `Create` button. Note, its a `beta` feature, feel free to [log issue](https://github.com/reactplay/react-play/issues) (if any) 
+- The application will try to authenticate you
+- If you are NOT alredy logged in with [`NHost`](https://nhost.io), you will be prompted to give permission
+ - Log in with your GitHub account
+- Fill the information and submit.
+ Paramter details
+
+ | Field | Mandatory? | Description |
+ | --------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+ | Name | YES | It is a description of the play for users to understand it better. The maximum number of allowed characters is 1024. |
+ | Issue | YES | Every play should be mapped with an issue. Select it here. |
+ | Language | YES | Let the application know your choice of script. It supports both <b>JavaScript</b> and <b>TypeScript</b>. You can pick either of it. |
+ | Style | NO | Let the application know your choice of style. It supports both <b>css</b> and <b>scss</b>. You can pick either of it. |
+ | Level | YES | 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. |
+ | Github Username | YES | Provide your GitHub user name to mark you as the creator of the play. |
+ | Tags | NO | Please provide comma-separated list of tags. Example: JSX, Hooks |
+ | Cover Image URL | NO | 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. |
+ | Blog URL | NO | If you have written an article about this play, please provide the link to your blog article page. |
+ | Video | NO | If you have created a video tutorial about this play, please provide the link to your YouTube video. |
 
-- That's it. Now start coding your `Play` using your favorite code editor!
+- On successfull submission, you will be redirected to a page where it will prompt you with the `play_id`
+- Stop your application
+- Navigate to the root of the reactplay 
+- Run follwing command
+ ```bash
+ npx create-react-play -c <the_play_id>
+ ```
+- Start the application
+ ```bash
+ yarn start
+ #OR
+ npm run start
+ ```
+- You should now see your play added to the [play list](http:https://localhost:3000/plays) page. You can click on the play thumbnail to see the details of the play.
+- And you will notice a directory create fro your play under `./src/plays/<your_play_name>`
+- Continue developing your play. Happy conding.
+
 ## 👀 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.
+- Create a Pull Request on the [react-play](https://github.com/reactplay/react-play) repository with your changes. 
 - Dedicate some time in a week to take care of the review comments.
 
 Once the Pull Request is approved and merged, we will notify you and add you as a `Contributor` to the [react-play](https://github.com/reactplay/react-play) project.
 
 ## ✋ Need Help?
 
 You can reach out to us at [ReactPlay Twitter Handle | @ReactPlayIO](https://twitter.com/ReactPlayIO) with a DM. Additionally, feel free to open a [discussion](https://github.com/reactplay/react-play/discussions) or [issue](https://github.com/reactplay/react-play/issues) on the `react-play` repository.
+
+
+
+
+
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # ReactPlay(Repo: `react-play`)
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-32-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-33-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <p align="center">
@@ -53,7 +53,9 @@ Here is the link to the app. We hope you enjoy it.
  
 Who doesn't want motivation and support? Many Thanks to all the Stargazers who have supported this project with stars(⭐). You all are amazing!!!
 
-[![Stargazers repo roster for @reactplay/react-play](https://reporoster.com/stars/reactplay/react-play)](https://github.com/reactplay/react-play/stargazers)
+<a href="https://github.com/reactplay/react-play/stargazers">
+ <img src="https://git-lister.onrender.com/api/stars/reactplay/react-play?limit=25" alt="Stargazers repo roster for @reactplay/react-play" />
+</a>
 
 Please support the work by giving the repository a ⭐, contributing to it, and/or sponsoring using the `Sponsor` button at the top 😍. You can also follow us on Twitter [@reactplayio](https://twitter.com/reactplayio).
 
@@ -232,6 +234,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <td align="center"><a href="http:https://linkedin.com/in/luca-pizzini"><img src="https://avatars.githubusercontent.com/u/15077781?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luca Pizzini</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=lpizzinidev" title="Code">💻</a></td>
  <td align="center"><a href="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/ShivamBhasin2002"><img src="https://avatars.githubusercontent.com/u/57500840?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shivam Bhasin</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=ShivamBhasin2002" title="Code">💻</a></td>
  <td align="center"><a href="https://tejasshekar.netlify.app/"><img src="https://avatars.githubusercontent.com/u/68545229?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tejas Shekar</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=TejasShekar" title="Code">💻</a></td>
+ <td align="center"><a href="https://www.linkedin.com/in/anirban-pratihar-48a591226/"><img src="https://avatars.githubusercontent.com/u/82874704?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anirban Pratihar</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=Anirban-1490" title="Code">💻</a></td>
  </tr>
 </table>
 

diff --git a/package.json b/package.json
@@ -13,34 +13,37 @@
  "@types/react-dom": "^18.0.2",
  "axios": "^0.27.2",
  "date-fns": "^2.28.0",
+ "downloadjs": "^1.4.7",
  "firebase": "^9.8.2",
+ "git-repo-api": "^0.0.17",
  "graphql": "^16.5.0",
- "json-graphql-parser": "^0.0.8",
+ "html-to-image": "^1.9.0",
+ "json-graphql-parser": "^0.0.16",
  "lodash": "^4.17.21",
  "node-sass": "^7.0.1",
- "plop": "^3.0.5",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "react-helmet": "^6.1.0",
  "react-icons": "^4.3.1",
  "react-loader-spinner": "^5.1.5",
  "react-organizational-chart": "^2.1.1",
+ "react-qr-code": "^2.0.7",
  "react-redux": "^8.0.1",
  "react-router-dom": "^6.3.0",
  "react-scripts": "5.0.0",
  "react-shimmer-effect": "^1.0.9",
+ "react-twitter-widgets": "^1.11.0",
  "redux": "^4.2.0",
  "redux-persist": "^6.0.0",
  "reselect": "^4.1.5",
  "web-vitals": "^2.1.0"
  },
  "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start": "npx create-react-play -p && react-scripts start",
+ "build": "npx create-react-play -p && react-scripts build",
  "snap": "react-snap",
  "test": "react-scripts test",
- "eject": "react-scripts eject",
- "create-play": "plop"
+ "eject": "react-scripts eject"
  },
  "eslintConfig": {
  "extends": [

diff --git a/plop-templates/component_js.hbs b/plop-templates/component_js.hbs
diff --git a/plop-templates/component_ts.hbs b/plop-templates/component_ts.hbs
diff --git a/plop-templates/exportPlay.hbs b/plop-templates/exportPlay.hbs
diff --git a/plop-templates/importToMeta.hbs b/plop-templates/importToMeta.hbs
diff --git a/plop-templates/play-readme.hbs b/plop-templates/play-readme.hbs
diff --git a/plop-templates/play.hbs b/plop-templates/play.hbs
diff --git a/plop-templates/style_css.hbs b/plop-templates/style_css.hbs
diff --git a/plop-templates/style_scss.hbs b/plop-templates/style_scss.hbs