New Feature: Prompt for project name

[median-man]

First off, GREAT IDEA!!!! I'm so glad I found this app. I love having a starter readme, package.json, and webpack.config in one place.

When setting up my configuration options, I would like to be able to set the name of the project so that I do not have to edit it in package.json, readme.md, and anywhere else the project name might appear.

[jakoblind]

Good idea. I think this should be implemented as an input field above the download button. The input field should be pre-filled with "empty-project" which is the default. When updating this, it should change the project name both in the UI, and the downloaded project. The input field should also have a label saying "Project name"

[linus345]

I can give this a try. Should there be a whitelist of allowed characters to prevent users from accidentally using invalid characters like / in unix? And if so would you like them to only be warnings or actually prevent the user from downloading the zip-file from the UI if there are invalid/not recommended characters in the filename?

This is what I think could be a good whitelist:

• a-z
• A-Z
• 0-9
• underscore (_)
• dash (-)
• dot (.)

And maybe space in case anyone wants to use it

What do you think?

[jakoblind]

Good point about invalid characters. I agree with the whitelist you propose, but a bit unsure about the dot (.). I don't think a dot should be in a project name, but I'm willing to hear arguments for why some people might want it.

When it comes to validation, I think we should only allow characters from the whitelist. If the user types any other characters we just silently ignore it. Instead, we could have a help button describing which characters is in the whitelist, and why it's like that.

[linus345]

Even though having a dot (.) in a directory name for a project might be unusual it's still valid in unix so I think it's better to give the user the option to have it if they want to.

Dots (.) are often used at the start of files and directories to make them hidden from commands like ls which some people may want to do.

[jakoblind]

Valid points. I agree.

We must also consider limitations in NPM package names because we'll use the name in generated package.json. I found this third party library listing naming rules. An official list would be better but can't seem to find one right now.

Any ideas on implementation? I saw a new lib called React hook form which looked interesting.

[linus345]

The third party library to validate npm package names looks good to me, here's a official list of the rules.

Considering that there's only one input I don't think using a third party library is necessary unless keeping the amount of re-renders as low as possible is a priority. We could instead do something basic like this:

/* ... */
const [projectName, setProjectName] = useState("empty-project");

<label>
  <span>Project name</span>
  <input
    onChange={e => setProjectName(e.target.value)}
  />
</label>
/* ... */

and do the validation inside the function passed to the onChange prop.

If you prefer to use a library anyway I think react-hook-form looks good.

We should also consider separating the project name and the directory name due to some difference of allowed characters. / is for example valid in an npm package name as shown here but not valid in a directory name. If we implement the project name and directory name as different values I think a third party library like react-hooks-form is a good idea.

[jakoblind]

I agree. Let's not add the react-hook-form library yet only for one input field. Your suggestion is much more pragmatic and simple.

Let's keep it simple for now and only have one input field (not accepting / in package names). Because of this, maybe it's easier to implement validation rules instead of using that third party library, but you decide what is best.