snaerth/create-react-component-folder

Creates react component folder structure

create-react-component-folder's Issues

"createIndex" flag throws error

The createIndex flag does not function properly.

No components are created if the folder structures requested don't exist. If the folder structures do exist and empty index file is created but no components are created.

Suggestion: Set Defaults on package.json

Maybe something to read from package.json some defaults for example to leave the --reactnative option on or scss or something along those lines 🤔

crcf --version displays incorrect version

I have the latest crcf version installed (0.3.4), but the output to crcf --version is 0.2.0

crcf --help displays outdated information

Full option information is available at: https://github.com/snaerth/create-react-component-folder#options

Publish v0.3.8

Hi. It looks like the latest version has not yet been published to the registry:

https://www.npmjs.com/package/create-react-component-folder

TypeScript: TypeError: Cannot read property 'createElement' of undefined

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": false,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "config"
  ],
  "types": [
    "typePatches"
  ]
}

What do I need to support import React, { Component } from 'react'; ? I am using create-react-app with react-app-rewired.

Option for default folder

It's a bit annoying having to type src/components/${Component} every time... would be nice to put the option for the default folder

Options text incorrect for `notest`

create-react-component-folder/lib/options.js

Line 17 in cbb6222

description: 'No css file',

It needs to read 'No test file' instead of 'No css file'.

Make generated code ESLint and TSLint friendly

I've used your package for a while now and it works great on the whole. There are a few small linting problems with generated code that could be fixed, if you're happy with the points I make I can raise a PR.

The following problems were encountered using node 10.15.3 and yarn 1.13.0 running on Alpine Linux and also Ubuntu 18.04.

I haven't used other files generated (other than the ones listed) but I think they may have similar issues.

Storybook

• No trailing semicolon after importing @storybook/react.
• No trailing semicolon terminating storiesOf block.
• 4 space trailing white-space at end of file, empty line would be better.

Index

• No newline at end of file

Test

• 4 space trailing white-space at end of file

Component

• 4 space trailing white-space at end of file

react (web) component generated in react-native app

It looks like running npx crcf components/Player create a web react component (which has a div) instead of creating a React Native component. This yields the following error:

Not working on 0.1.18

#10

That happens when running any command, maybe there's a dependency conflicting with create-react-app for that project at that state I just had styled-components installed besides react-scripts

🤔

The "path" argument must be of type string. Received undefined

Hello! Great project 😄

When I try to run

$ npx crcf --createindex

I get this error:

The "path" argument must be of type string. Received undefined
This happens either if I run the command in the root folder where components/ folder is or inside components/

I followed the instructions and I installed the package running:

$ npm install --save-dev create-react-component-folder 

Any thoughts? 😄

Thank you!

Nested folders not working in windows

Having the latest package installed, while trying to create Button component on Windows with the following syntax
crcf components/Button
the "Button" folder is created in root, and not in the "components" folder

"notest" causes no test file AND no css file

This is my package.json:

"crcf": [ "typescript", "cssmodules", "scss", "notest", { "output": "src/" } ]

As a result, only the index.ts and component .tsx files are created

Removing the "notest" flag causes both the test foile AND the scss module to appear.

Node now needs to handle rejection as well

create-react-component-folder/lib/index.js

Line 66 in 6830f6a

return new Promise((resolve) => {

Just my guess about why this is happenning now 😢

Templates and other ideas (implemented in fork)

I had some requirements in a project recently that needed some finer control over the creation of the different components. I've got the working code in a fork https://github.com/Daveawb/create-react-component-folder.

I wondered if this would be of any use to you, it does add a dependency on handlebars to manage templates but abstracts a lot of logic away from the main index and creation scripts.

• Added a configuration namedexports to remove default exports and export named variables only.

• Added Typescript propTypes (removed {{name}}.propTypes) and added a TS type instead when typescript is in the configuration.

• Added Typescript types to functional components

• All options have default values that are passed in from cosmiconfig

• Run time configuration values are merged with the defaults to provide a consistent config array throughout the script.

• A minor configuration helper added to get items from a config store

• Templates are rendered using handlebars rather than JS. This could potentially allow for the templates to be published into a project allowing for finer control over how components etc. are rendered.

• Removed all the generation functions in favour of one createReactComponent function.

• Fixed ESLint and TSLint problems with current template layouts.

Let me know if this is of any use to you and I'll clean it up and put in a PR.

Additional

• Refactored config to use a global store with a frozen API that is available as a require in any script that needs it without passing it around in arguments.
  • Config is an object with two keys, flags and values, these are not directly accessible.
  • Config exposes a simple API to check, get and merge values.
• Added --output <directory> | -o <directory> to options to allow configuring default output location
• Cleaned up templates and fixed a few bugs with prop types

TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters

✨  Finished in: 6.649ms
 DONE  Success!

_http_client.js:127
      throw new ERR_UNESCAPED_CHARACTERS('Request path');
      ^

TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters

Feature Request: Auto Import CSS

It would be nice if the CSS module was already imported based on the assumption that if one does not use the --nocss flag then certainly they want CSS and thus would save time if it were already imported.

Thanks so much for the work on this! I love the tool.

--createindex issues

• make default path to /,
  currently using crcf --createindex will crash
  throw new TypeError('Path must be a string. Received ' + inspect(path));

• instead of
  export default {
  change to
  export {

Add options [name].module.css for CSS modules

Hi.
based on create-react-app docs, it can use css modules, but must create .module.css files to make it work. I hope there's an options to create file [component folder name].module.css files to make it easier.

thanks

Not creating sass file

I'm having an issue when running with the -s or --sass param that it's not creating a sass file for my component. The output in the terminal says that it does (pasted below), but no such file exists in the folder. If I remove the flag, it does create a css file as expected.

/path/to/my/components/shape
  └─ index.js
  └─ shape.js
  └─ shape.test.js
  └─ shape.sass

Option for JEST tests

I'd like the MyComponent.test.[tsx/js] file to look like this if using Jest option rather than Enzyme. This seems to be the default when using create-react-app.

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<MyComponent/>, div);
  ReactDOM.unmountComponentAtNode(div);
});

Feature Request: No Semi Colons flag

Thanks so freaking much for this tool! It is a huge time saver.

We use Standard for out linting. I understand not everyone loves that, but we do! And many do. Would be nice to not need to remove each semicolon manually after creating a component.

npx crcf components/foo --nosemi

The result would be that each file is created, but without semicolons.

LICENSE file?

Prettier options aren't used by createMultiIndex fn

👋 Hey @snaerth - thanks for all the work creating this lib. It makes scaffolding out a React cmp super fast 🚀 . I noticed a small omission when it comes to prettier options. When I use the createindex option, my import file paths are always created using double-quotes even though my .crcfrc file contains 'singlequote'.

The "prettier" options aren't pulled from the config and passed to the createMutiIndex fn - https://github.com/snaerth/create-react-component-folder/blob/master/lib/index.js#L206.

formatPrettier ends up being called without any passed prettier options - https://github.com/snaerth/create-react-component-folder/blob/master/lib/utils/createMultiIndex.js#L28.

The default prettier config is used - https://github.com/snaerth/create-react-component-folder/blob/master/lib/utils/format.js#L12

I'd be happy to put up a PR to add this to the createMultiIndex function.

Generated .stories file doesn't have newline after import

Getting an eslint error in MyComponent.stories.js. The linter error is "Expected 1 newline after import statement not followed by another import. (import/newline-after-import)"

This error doesn't appear in the main component file, just the story.

Current:

import React from 'react';
import { storiesOf } from '@storybook/react';
import MyComponent from './MyComponent';
storiesOf('MyComponent', module).add('MyComponent', () => (
  <div>
    <MyComponent />
  </div>
));

Desired:

import React from 'react';
import { storiesOf } from '@storybook/react';
import MyComponent from './MyComponent';

storiesOf('MyComponent', module).add('MyComponent', () => (
  <div>
    <MyComponent />
  </div>
));

Linting is failing

Should we keep those files not being used? Maybe it would be good to delete them to clean up console real estate.

🤔