diff --git a/.eslintrc.json b/.eslintrc.json index 4531ff5e65..eea9a4c1eb 100644 --- a/.eslintrc.json +++ b/.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" }, diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index 6095143600..bf516a4732 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.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: diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml index 70b2e772de..abb02f4d5f 100644 --- a/.github/ISSUE_TEMPLATE/feature-request.yml +++ b/.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: diff --git a/.github/ISSUE_TEMPLATE/new-play.yml b/.github/ISSUE_TEMPLATE/new-play.yml index 6f28d25103..4d269adf84 100644 --- a/.github/ISSUE_TEMPLATE/new-play.yml +++ b/.github/ISSUE_TEMPLATE/new-play.yml @@ -1,15 +1,14 @@ 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: @@ -17,7 +16,7 @@ body: description: Tell us in details about your play. validations: required: true - + - type: textarea id: react-concepts attributes: @@ -25,18 +24,18 @@ body: 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: diff --git a/.github/workflows/contributions.yml b/.github/workflows/contributions.yml index 660415a5df..5dcae80ad6 100644 --- a/.github/workflows/contributions.yml +++ b/.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' - }) \ No newline at end of file + }) diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 2ea8e0a621..05eca046f6 100644 --- a/.github/workflows/cypress.yml +++ b/.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 diff --git a/.prettierrc b/.prettierrc index f92560f5a3..646b17cca1 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,7 @@ -{ - "semi": true, - "tabWidth": 2, - "printWidth": 100, - "singleQuote": true, - "trailingComma": "none" -} \ No newline at end of file +{ + "semi": true, + "tabWidth": 2, + "printWidth": 100, + "singleQuote": true, + "trailingComma": "none" +} diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 918c3660ec..ff9130b987 100644 --- 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/CONTRIBUTING.md b/CONTRIBUTING.md index edf6317482..6ca7fc820b 100644 --- a/CONTRIBUTING.md +++ b/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/ \ No newline at end of file +[version]: http://contributor-covenant.org/version/1/4/ diff --git a/CREATE-PLAY.md b/CREATE-PLAY.md index bc65cc0b51..51d10c1719 100644 --- a/CREATE-PLAY.md +++ b/CREATE-PLAY.md @@ -1,11 +1,15 @@ # 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. -- Run the application using +- Run the application using + ```bash yarn start #OR @@ -13,44 +17,47 @@ Welcome developers! We are as excited as you are to know that you are going to c ``` If you face dependency issues, then try running this command: + ```bash npm install --legacy-peer-deps ``` + You might check the [README](README.md) file for more details. - You might see a prompt like this - + You might see a prompt like this + ```bash Need to install the following packages: create-react-play Ok to proceed? (y) ``` + 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://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) +- 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 already 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. Parameter 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 JavaScript and TypeScript. You can pick either of it. | - | Style | NO | Let the application know your choice of style. It supports both css and scss. 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 to 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. | + + | 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 JavaScript and TypeScript. You can pick either of it. | + | Style | NO | Let the application know your choice of style. It supports both css and scss. 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 to 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. | - 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 +- Navigate to the root of the reactplay - Run following command ```bash npx create-react-play -c @@ -61,14 +68,15 @@ Welcome developers! We are as excited as you are to know that you are going to c #OR npm run start ``` -- 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. -- And you will notice a directory created for your play under `./src/plays/` -- Continue developing your play. Happy coding. - +- 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. +- And you will notice a directory created for your play under `./src/plays/` +- Continue developing your play. Happy coding. + ## 👀 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. +- 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. @@ -76,8 +84,3 @@ Once the Pull Request is approved and merged, we will notify you and add you as ## ✋ 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 index 3b11aefe77..d2cb8fafe8 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ # ReactPlay(Repo: `react-play`) + + [![All Contributors](https://img.shields.io/badge/all_contributors-58-orange.svg?style=flat-square)](#contributors-) +

@@ -45,7 +48,6 @@

- ## 👋 Introducing ReactPlay

@@ -55,11 +57,13 @@ `react-play` is an `open-source` web app that helps you learn ReactJS faster with a hands-on practice model. It is a collection of `ReactJS projects` that you can use to learn ReactJS. Is that all? Nope. You can also create your projects and share them with the world. The best part is that the ReactJS experts will `review` your project code before it gets part of the `ReactPlay` app. Isn't that a pure WIN-WIN? + ## 🔥 Demo + Here is the link to the app. We hope you enjoy it. > [The ReactPlay app Link](https://reactplay.io) - + Who doesn't want motivation and support? Many Thanks to all the Stargazers who have supported this project with stars(⭐). You all are amazing!!! @@ -78,23 +82,26 @@ You may want to set up the `react-play` repo for the following reasons: Here is a quick overview of the `react-play` repo setup: -### 🍴 Fork and Clone the Repo +### 🍴 Fork and Clone the Repo + First, you need to fork the `react-play` repo. You can do this by clicking the `Fork` button on the top right corner of the repo. If you are new to forking, please watch this [YouTube Guide](https://www.youtube.com/watch?v=h8suY-Osn8Q) to get started. Once forked, you can clone the repo by clicking the `Clone or Download` button on the top right corner of the forked repo. Please change the directory after cloning the repository using the `cd ` command. ->**Note:** Please do not remove the `.env.development` file from the root folder. It contains all the evironment variables required for development. +> **Note:** Please do not remove the `.env.development` file from the root folder. It contains all the evironment variables required for development. ### ⬇️ Install Dependencies + Next, install the dependencies by running the following command in the `react-play` repo: ```bash npm install ``` + Or - + ```bash yarn install ``` @@ -106,13 +113,15 @@ npm install --legacy-peer-deps ``` ### 🦄 Start the Development Mode + Use the following command to start the app in the development mode: ```bash npm start ``` + Or - + ```bash yarn start ``` @@ -122,13 +131,15 @@ It runs the app in development mode. Open [http://localhost:3000](http://localho The page will reload when you make changes. You may also see any lint errors in the console. ### 🧱 Build the App for Production + Use the following command to build the app for production: ```bash npm run build ``` + Or - + ```bash yarn build ``` @@ -165,6 +176,7 @@ You can deploy the app to `Vercel` or `Netlify` with a single click. ## 🤝 Contributing to `ReactPlay` + Any kind of positive contribution is welcome! Please help us to grow by contributing to the project. If you wish to contribute, you can, @@ -179,14 +191,15 @@ If you wish to contribute, you can, > Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us. ## Launching reactplay Rewards - Contributed to reactplay? Here is a big thank you from our community to you. - Claim your badge and showcase them with pride. - Let us inspire more folks ! - - ![reactplay Badges](https://aviyel.com/assets/uploads/rewards/share/project/43/512/share.png) - - ### **[Claim Now!](https://aviyel.com/projects/43/reactplay/rewards)** - + +Contributed to reactplay? Here is a big thank you from our community to you. +Claim your badge and showcase them with pride. +Let us inspire more folks ! + +![reactplay Badges](https://aviyel.com/assets/uploads/rewards/share/project/43/512/share.png) + +### **[Claim Now!](https://aviyel.com/projects/43/reactplay/rewards)** + ## 🙏 Support We all need support and motivation. `ReactPlay` is not an exception. Please give this project a ⭐️ to encourage and show that you liked it. Don't forget to leave a star ⭐️ before you move away. @@ -203,9 +216,6 @@ If you found the app helpful, consider supporting us with a coffee. A ⭐️ to ReactPlay is to make us more 💪 stronger and motivated. - - - ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): diff --git a/cypress.config.ts b/cypress.config.ts index 35dbb7fce2..26e545d0df 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -1,11 +1,11 @@ -import { defineConfig } from "cypress"; +import { defineConfig } from 'cypress'; export default defineConfig({ e2e: { setupNodeEvents(on, config) { // implement node event listeners here }, - baseUrl: "http://localhost:3000", - watchForFileChanges: false, - }, + baseUrl: 'http://localhost:3000', + watchForFileChanges: false + } }); diff --git a/cypress/e2e/homePage.cy.ts b/cypress/e2e/homePage.cy.ts index 99a075d743..b892e5c11b 100644 --- a/cypress/e2e/homePage.cy.ts +++ b/cypress/e2e/homePage.cy.ts @@ -1,47 +1,44 @@ /// -import { CONTRIBUTORS_COUNT, TWEET_COUNT } from "../support/constant"; +import { CONTRIBUTORS_COUNT, TWEET_COUNT } from '../support/constant'; -describe("Test home page", () => { +describe('Test home page', () => { beforeEach(() => { - cy.visit("/"); + cy.visit('/'); }); - it("Header component should render properly", () => { - cy.get('[data-testid="app-header"]').should("be.visible"); - cy.get('[data-testid="app-logo"]').should("be.visible"); - cy.get('[data-testid="plays-search-box-container"]').should("not.exist"); - cy.get('[data-testid="header-links-container"]').should("be.visible"); - cy.get('[data-testid="browse-btn"]').should("be.visible").as("browseBtn"); - cy.get('[data-testid="create-btn"]').should("be.visible"); - cy.get('[data-testid="ideas-btn"]').should("be.visible"); - cy.get('[data-testid="github-btn"]').should("be.visible"); - cy.get('[data-testid="twitter-btn"]').should("be.visible"); - cy.get('[data-testid="share-btn"]').should("be.visible"); + it('Header component should render properly', () => { + cy.get('[data-testid="app-header"]').should('be.visible'); + cy.get('[data-testid="app-logo"]').should('be.visible'); + cy.get('[data-testid="plays-search-box-container"]').should('not.exist'); + cy.get('[data-testid="header-links-container"]').should('be.visible'); + cy.get('[data-testid="browse-btn"]').should('be.visible').as('browseBtn'); + cy.get('[data-testid="create-btn"]').should('be.visible'); + cy.get('[data-testid="ideas-btn"]').should('be.visible'); + cy.get('[data-testid="github-btn"]').should('be.visible'); + cy.get('[data-testid="twitter-btn"]').should('be.visible'); + cy.get('[data-testid="share-btn"]').should('be.visible'); - cy.get("@browseBtn").click(); - cy.get('[data-testid="plays-search-box-container"]').should("be.visible"); + cy.get('@browseBtn').click(); + cy.get('[data-testid="plays-search-box-container"]').should('be.visible'); }); - it("Tweet section should render with all tweets", () => { - cy.intercept("GET", "https://cdn.syndication.twimg.com/*").as("tweets"); - cy.wait("@tweets"); - cy.get('[data-testid="tweet-container"]') - .scrollIntoView() - .should("be.visible"); + it('Tweet section should render with all tweets', () => { + cy.intercept('GET', 'https://cdn.syndication.twimg.com/*').as('tweets'); + cy.wait('@tweets'); + cy.get('[data-testid="tweet-container"]').scrollIntoView().should('be.visible'); cy.get('[data-testid="tweet-container"] [id*="twitter-widget"]').should( - "have.length", + 'have.length', TWEET_COUNT ); - cy.get('[data-testid="watch-svg"]').should("not.exist"); + cy.get('[data-testid="watch-svg"]').should('not.exist'); }); - it("Contributors section should render with all contributors", () => { - cy.get('[data-testid="contributors-section"]') - .scrollIntoView() - .should("be.visible"); - cy.get( - '[data-testid="contributors-section"] [data-testid*="contributor-"]' - ).should("have.length", CONTRIBUTORS_COUNT); + it('Contributors section should render with all contributors', () => { + cy.get('[data-testid="contributors-section"]').scrollIntoView().should('be.visible'); + cy.get('[data-testid="contributors-section"] [data-testid*="contributor-"]').should( + 'have.length', + CONTRIBUTORS_COUNT + ); }); }); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 698b01a42c..95857aea4c 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -34,4 +34,4 @@ // visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable // } // } -// } \ No newline at end of file +// } diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts index f80f74f8e1..598ab5f0d7 100644 --- a/cypress/support/e2e.ts +++ b/cypress/support/e2e.ts @@ -14,7 +14,7 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import './commands'; // Alternatively you can use CommonJS syntax: -// require('./commands') \ No newline at end of file +// require('./commands') diff --git a/docker-compose-dev.yml b/docker-compose-dev.yml index a255a3dc8f..ea6ff17e76 100644 --- a/docker-compose-dev.yml +++ b/docker-compose-dev.yml @@ -1,4 +1,4 @@ -version: "3.3" +version: '3.3' networks: react-play-network: @@ -17,6 +17,6 @@ services: - ./:/usr/src/app - /usr/src/app/node_modules ports: - - "3000:3000" + - '3000:3000' networks: - - react-play-network \ No newline at end of file + - react-play-network diff --git a/docker-compose-prod.yml b/docker-compose-prod.yml index 40ef0bf3f5..0d1995e584 100644 --- a/docker-compose-prod.yml +++ b/docker-compose-prod.yml @@ -1,4 +1,4 @@ -version: "3.3" +version: '3.3' networks: react-play-network: @@ -13,6 +13,6 @@ services: image: react-play-frontend-app-prod:v1 restart: always ports: - - "80:80" + - '80:80' networks: - react-play-network diff --git a/package.json b/package.json index 24d8f8b5be..c3dc7bd0a4 100644 --- a/package.json +++ b/package.json @@ -70,12 +70,11 @@ "snap": "react-snap", "test": "react-scripts test", "eject": "react-scripts eject", - "prettier": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"", - "lint": "eslint \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"", - "lint:fix": "eslint --fix \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"", - "format": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\" --config ./.prettierrc", "cypress:open": "cypress open", - "cypress:run": "cypress run" + "cypress:run": "cypress run", + "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}", + "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'", + "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc" }, "reactSnap": { "puppeteerArgs": [ @@ -96,24 +95,25 @@ ] }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^5.33.1", - "@typescript-eslint/parser": "^5.33.1", + "@typescript-eslint/eslint-plugin": "^5.0.0", + "@typescript-eslint/parser": "^5.41.0", "autoprefixer": "^10.4.7", "cypress": "^10.6.0", - "eslint": "^8.22.0", - "eslint-config-airbnb": "^19.0.4", + "eslint": "^8.0.1", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-import": "^2.25.3", - "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-config-standard-with-typescript": "^23.0.0", + "eslint-import-resolver-typescript": "^3.5.2", + "eslint-plugin-import": "^2.26.0", + "eslint-plugin-n": "^15.0.0", "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.28.0", - "eslint-plugin-react-hooks": "^4.3.0", - "lint-staged": "^13.0.3", + "eslint-plugin-promise": "^6.0.0", + "eslint-plugin-react": "^7.31.10", + "eslint-plugin-react-hooks": "^4.6.0", "postcss": "^8.4.13", "prettier": "^2.7.1", "puppeteer": "^13.7.0", "react-snap": "^1.23.0", "tailwindcss": "^3.0.24", - "typescript": "^4.6.4" + "typescript": "*" } } diff --git a/postcss.config.js b/postcss.config.js index 33ad091d26..5cbc2c7d87 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ module.exports = { plugins: { tailwindcss: {}, - autoprefixer: {}, - }, -} + autoprefixer: {} + } +}; diff --git a/public/index.html b/public/index.html index 14a10c11ee..fe605a2de6 100644 --- a/public/index.html +++ b/public/index.html @@ -31,9 +31,7 @@ rel="stylesheet" /> - - ReactPlay - One app to learn, create, and share ReactJS projects. - + ReactPlay - One app to learn, create, and share ReactJS projects.