npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

armand1m-development-toolkit

v1.4.0

Published

This repo is a simple npm package with some tools I'm using for development needs.

Downloads

10

Readme

armand1m-development-toolkit

This repo is a simple npm package with some tools I'm using for development needs.

The idea for this package came from the generators available in the react-boilerplate/react-boilerplate project.

How can I use this?

  • Add plop and armand1m-development-toolkit to your project as development dependency:

    $ npm install --save-dev plop armand1m-development-toolkit

  • Create a npm script to run it:

{
  // ... package.json content,
  "scripts": {
    "generate": "plop --plopfile ./node_modules/armand1m-development-toolkit/index.js"
  }
}
  • Run it

    $ npm run generate

Available generators

  • [x] React: Component

Ideas are always welcome. Open an issue if you use this package and think it could have more generators.

When possible, try creating a PR ;)

React: Component

Asks you for:

  • A component type:
    • Stateless component using Normal Functions
    • Stateless component using Arrow Functions
    • ES6 Class component extending React.Component
    • ES6 Class component extending React.PureComponent
    • Redux Connected Stateless component using Arrow Functions
    • Higher order component without arguments
    • Higher order component with arguments
  • A name for your component:
    • It will be used as PascalCase in filenames and code.
  • A description for your component:
    • It will be used in JSDocs as a header comment in the src file.
  • A destiny for your component:
    • It will use inquirer-directory to ask where to put your component.
    • If a folder with the component name already exists in the destiny, it will raise an error.

Gives you:

A folder with the specified component name into the specified destiny, with this file structure:

  • index.js: Actual component implementation
  • index.css: Actual component styles
  • index.test.js: Jest test suite and simple test case
  • index.stories.js: Simple storybook implementation (for those who use @storybook/react)

Attention:

  • This generator expects you to be using the @storybook/react module instead of @kadira/storybook.
  • This generator expects you to be using the prop-types module instead of React.PropTypes.
  • This generator expects you to be using the classnames module in your project.
  • This generator expects you to be using the enzyme module in your tests.
  • This generator expects you to be using jest as test runner.
    • (but since it does not use jest assertions nor snapshotting, it should work with mocha or jasmine as well.)
  • This generator expects your project to be searching for the files that match ./**/*.stories.js to load into the storybook.
    • (it will work if this is not configured, but when configured, it enables instantly component development in a react + storybook environment.)