Code Monkey home page Code Monkey logo

react-component-generator's Introduction

React component generator

A VS Code extension for generating new React component files with the following structure:

  • StartingComponent
    • /components
      • index.ts
      • /NewComponent
        • index.ts
        • NewComponent.tsx
        • NewComponent.stories.tsx (optional)
        • /tests
          • NewComponent.test.tsx

Features

Right click in the file editor or on a file in the explorer and click Generate React component to scaffold out a new React component with all the files you need.

Screen Shot of the contextual file explorer menu featuring items added by the extension

Right click in the file editor or on a file in the explorer and click Generate Storybook stories file to add a stories file to an existing component.

Settings

  • Language - Specifies if components should be generated in TypeScript or JavaScript.
  • Styles Language - Specifies what language will be used for styles.
  • Create Stories File - Specifies if a stories file should be generated with the component.
  • Use Index File - Specifies if the components folder should have an index file to export all of its components. Does not add or update the index file at app/components/index
  • Import React - Specifies if React should be imported in generated components and stories. The React import is not needed if your app is using the new JSX Transform.

Development

  1. Clone the repository with git clone https://github.com/andrewmcgov/react-component-generator.git
  2. Install dependencies by running yarn in the project folder
  3. With extension source open in VS Code, press F5 to open a new VS Code window with the extension running. F5 runs the code in .vscode/launch.json.
  4. The extension code starts in src/extension.ts.
  5. Check out the VS Code API documentation for more info about building extensions.

This extension was scaffolded with Yeoman. Feel free to fork and tweak to your liking!

react-component-generator's People

Contributors

andrewmcgov avatar boan-anbo avatar kaelig avatar noahk216 avatar ryancbahan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

react-component-generator's Issues

Option to not create 'test' folder

I'd like to have option to disable the creation of 'test' folder, and put the test file outside per our repo's style. Also if there is an option to decide whether the name is *.test.tsx or *.spec.tsx would be great

Fix import errors on newly created stories file

When generating a stories file, we are presented with errors on the import statment:

'@storybook/react/types-6-0' import is restricted from being used. Import types from @storybook/react instead

Switching to import as suggested presents this error:

NOTE that in Storybook 7.0, this type will be renamed to StoryFn and replaced by the current StoryObj type.

'Story' import from '@storybook/react' is restricted. Avoid using Story and ComponentStory. Use StoryFn/ComponentStoryFn for function stories (CSF v2), or StoryObj/ComponentStoryObj for object stories (CSF v3). See https://storybook.js.org/blog/component-story-format-3-0/ and https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyobj-type

Add link to VS Code Marketplace

When people land on this repo, it'd be great if they had a way to quickly install the Extension.

I suggest setting https://marketplace.visualstudio.com/items?itemName=AndrewMcGoveran.react-component-generator as the URL for this repo.

Add a setting for creating the "components" directory or not.

I like to organize my components by type.
For example:
-components
-dialogs
-dialogcomponent1
-dialogcomponent2
-lists
-todoList
-shoppingList
etc..

If right clicking the dialogs folder and selecting to Generate a new react component it will add a components folder under the dialogs.
I would like to have a setting to avoid this.

Update to CSF3?

Hi! I wonder if there is any plan to update the storybook template to adopt CSF3?

New version updates

  • Use named exports everywhere
  • Import the styles and add className={styles.ComponentName} to the rendered div
  • Pre-populate the Sass file with a .ComponentName rule
  • Declare an interface named ComponentNameProps
  • Use export * …. in the ComponentName/index.ts file
  • Add setting to generate story when making component
  • Add command to add story to an existing component
  • Remove styles and tests settings
  • Add verbose story comments setting
  • Don’t update app/components/index.ts
  • Update readme
  • Update changelog

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.