reactplay / create-react-play

This is a npm package which works as a backbone of the application. This makes the application management more controlled. more controlled.

Create React Play

Welcome to reactplay.io ecosystem

A package to generate boilerplate files for creating a play withing your local system. Another idea of this package to create a backbone structure for running all sort of maintenance and house keeping task.

Command Line Options

Here are few options

• -h/help: Show all available arguments and flags
• -c/create: Creates a play boilerplate within local directory structure
• -u/update: Update an exsiting play
• -p/prepare: Prepre an environment for build/run

How it works

Example: Create a play

1. Fork reactplay

2. Clone your branch

3. Install packages using

   yarn
   #or
   npm install

4. run reactplay application using

   yarn start
   #or
   npm start

5. Hit "Create" button on web portal

6. Provide necessary information

7. Submit your play request

8. It will generate an unique id for you

9. Navigate to root directory of your local reactplay repo and run

   npx create-react-play -c <the_unique_id>

   This will create necessary resources and link them together.

   Note: If the play folder <reactplay_directory>/plays/<your_play_name> remain empty after running above command that means you might be in some older version of the package. Use @latest in that case

   npx create-react-play@latest -c <the_unique_id>

10. Now you will find your play under

    <reactplay_directory>/plays/<your_play_name>
    

11. Now its all with you, create an awesome play and flaunt it infront of the globe

12. Create a pull request when you are done

Example: Prepare environemnt

   npx create-react-play@latest -p

create-react-play's Issues

✨ [Feature request]: Create play automation workflow [Track #369]

Is your feature request related to a problem? Please describe.
Currently, play creation is through command line plop argument. This is not flexible enough for play automation to run. Need a workflow where the entire play creation can be driven through a specific process for better handling

Describe alternatives you've considered
NA

Additional context
Create a middleman who can handle the workflow processes.

🐛 [Bug report]: weird syntax after creating a play in typescript

Descrcibe the bug?

found the below syntax after creating a typescript play and its throwing error on browser

Steps to reproduce the bug?

creating a play in typescirpt will have the error

Expected behavior

there should not be any error after creating a play in typescript

Desktop (Please provide your system information)

Ubuntu version 22.04

Mobile (Please provide your device information)

No response

Screenshot / Screenshare

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

✨ [Feature request]: Publish package through github

Is your feature request related to a problem? Please describe.
Publish package through github instead of npm login

create-react-play is a npm package. This is currently getting published manually. It means, that after every merge, one needs run bellow steps to publish the package to npm repository

npm login

And run

npm publish

However, this is not the practical way of publishing a package that is still under development or maintenance cycle.

So the idea here is to create Github action to create the package automatically.

NOTE: An workflow already been configured (https://github.com/reactplay/create-react-play/blob/main/.github/workflows/npm-publish.yml) however doesn't seems to be working

Describe the solution you'd like
Update .npmrc and publish

Describe alternatives you've considered
NA

Additional context
NA

🐛 [Bug report]: Template is adding null for empty fields

Describe the bug
I a field is kept untouched on create play UI, then CRP marks them as null on read me.

To Reproduce
Steps to reproduce the behavior:

1. Go to react play app on dev mode
2. Click on Create with some optional field as blank
3. Prepare the app with the newly created play

Expected behavior
Should be empty string

Screenshots
NA

Desktop (please complete the following information):
NA

Smartphone (please complete the following information):
NA

Additional context
NA

✨ [Feature request]: scripts to perform intermediate tasks

Is your feature request related to a problem? Please describe.
Develop scripts either shell/python/js to perform intermediate steps like cloning the repo, forking, etc

Describe the solution you'd like
Adding scripts for individual intermediate steps

🐛 [Bug report]: The npx create-react-play doesn't work on Mac

Describe the bug
After submitting the create play form, the npx command doesn't work on the Mac terminal. It doesn't create the required scaffolding and boilerplate code. It works well on Windows.

🐛 [Bug report]: Build fails due to the Nhost cert issue

Describe the bug
Nhost has changed their GraphQL URL. Create React Play npm uses it, so need a change

🐛 [Bug report]: Update redme to use latest version of the package

Describe the bug
In a few cases npx continue to use an old version of create-react-play if it's already installed globally. In such a scenario, one needs to use the tag for the package. Update this information in readme.

🐛 [Bug report]: ReactPlay misspelled in the CLI

Describe the bug
A typo error in the welcome screen in the cli. Create React Play is displayed as Create Rect Play.

Additional context
Originally posted here.

✨ [Feature request]: Create argument pasrser

Is your feature request related to a problem? Please describe.
rpdk will be having multiple entry point, to name them

• Create play
• Update play
• Push changes
• etc

We need a robust argument parser to manage this

Describe the solution you'd like
Create a command-line argument parser

Describe alternatives you've considered
NA

Additional context
NA

🐛 [Bug report]: Verify and remove unwanted packages

Describe the bug
Remove packages like prompt, child-process

To Reproduce
NA

Expected behavior
NA

Screenshots
NA

Desktop (please complete the following information):

• 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]

Additional context
Add any other context about the problem here.

✨ [Feature request]: Isolated play management

Is your feature request related to a problem? Please describe.
The idea here is to take out plays from the main container application and manage them separately (reactplay/react-play-store#8). These plays will be having their own package.json which will contain only the specific package that play needs. All common packages will come from react-play.
In order to achieve this, we would need to update create-react-play to enable

• Fork react-play-store
• Clone react-play-store to react-play/src/plays
• Run npm install or yarn on react-play/src/plays
• When a user wants to create a PR, it should only be on react-play/src/plays

NOTE: Need extensive brainstorming to achieve the above usecase.

References:

• reactplay/react-play-store#8
• reactplay/react-play#328

✨ [Feature request]: Create a global package and host on npmjs

Is your feature request related to a problem? Please describe.
In order to make the development kit globally available for controlled play management, we need to host a global package on npmjs.
The consumer will call the package by calling

npx <package_name> <switch> <values>

Describe the solution you'd like
NA

Describe alternatives you've considered
NA

Additional context
NA

Feature: Update initial configuration

Update basic configuration

• Code owner
• Code of conduct
• Contributing
• Sponsor
• Create play markdown > README.md
• PR template
• Issue template
• .gitignore

🐛 [Bug report]: creating a play in typescript gets .ts format

Descrcibe the bug?

creating a play in typescript and after running the npx create-react-play .... thing the component apears in the respected folder but the component format it gets is .ts which should be .tsx. for that .ts format it shows error for the jsx code which is invalid for a .ts file.

Steps to reproduce the bug?

creating a play a in typescirpt

Expected behavior

should component should have the .tsx format

Desktop (Please provide your system information)

Ubuntu 22.04

Mobile (Please provide your device information)

No response

Screenshot / Screenshare

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

🐛 [Bug report]: Numeric naming of a play cause react failure

Describe the bug
When a play name contains only a numeric value in it, the bootstrapping fails.

To Reproduce
Steps to reproduce the behavior:

1. Create a play with a name like 2048
2. npx create-react-play -c <play_id>
3. npm/yarn start
4. See error

Expected behavior
It should allow numerical play name

Screenshots
NA

Desktop (please complete the following information):
ALL

Smartphone (please complete the following information):
ALL

Additional context
NA

✨ [Feature request]: Update build badge on markdown

✨ [Feature request]: Use slug and sanitized string for path

Is your feature request related to a problem? Please describe.
Currently, the package doesn't take care of special characters. So when a special character appears in name, it fails to provide appropriate templates.

Describe the solution you'd like
Use slug and sanitized name for path fields

Describe alternatives you've considered
NA

Additional context
NA

✨ [Feature request]: Create hooks for "create workflow"(marker)

Is your feature request related to a problem? Please describe.
Need to have a clear specification in code to identify different steps for creating a play

Describe the solution you'd like
This is just a marker update, actual implementation will be taken under different issue.

Describe alternatives you've considered
NA

Additional context
NA

Enhancement for easier the task to port to monorepo and plays outside the main application and more

In the current react-play, you can't have the play outside the main application as it is coded in src/plays.
Nevertheless, it's possible to build the application with the plays in another folder by using create-react-plays as it is the foundation for play creation.

The current react-play doesn't allow it and the cost to move the application in the right way is heavier because lot of modification are needed and the validations are too slow.

A way to move the plays outside the body is needed and a better way to load plays too for performance issue.

✨ [Feature request]: Create test for a new created play to see if the page can render correctly

Description:
When creating a new play, we can't be sure that the play's page render well before it is send to the staff.

Describe the solution you'd like
We can generate a small test on the page to check if
the play as the correct url and that this url can be visited.
Test if the play is assigned to the correct creator.
Check if header can render properly and if details appear on the page.

Additional context
In React-play, an update need to be done on the .github file so the create file for the text is not submitted to the react-play repo.

🐛 [Bug report]:

Describe the bug
I am not able to create a play upon clicking the create button and receiving this "http://localhost:3000/plays/undefined/v1/auth/signin/provider/github?redirectTo=http://localhost:3000/plays/create" in the URL.
I read the docs and it states to log in with nhost which I did but still not able to pass the undefined error. Do I have to create a project on nhost to create a play?

Update the create play service according to the new platform requirement

Due to the recent migration of the ReactPlay platform from CRA to Vite, there's a file convention in Vite that accepts only .jsx, .ts, or .tsx files for React components.

In order to adhere to this, we have to change how JS plays are created. We have to change the current play creation service from creating a .js file to a .jsx file

🐛 [Bug report]: Rename readme template to Readme

Describe the bug
Currently, the md template is named as readme_md.tmpl which breaks the standard naming convention of readme file.

To Reproduce
NA

Expected behavior
NA

Screenshots
NA

Desktop (please complete the following information):
NA

Smartphone (please complete the following information):
NA

Additional context
NA