@ericpuskas/new-component
CLI for creating new React components
Last updated a month ago by ericpuskas .
MIT · Original npm · Tarball · package.json
$ cnpm install @ericpuskas/new-component 
SYNC missed versions from official npm registry.

Create a new React component

Forked from https://github.com/joshwcomeau/new-component. Added Storybook and basic testing.

Usage

Install via NPM:

# Using Yarn:
$ yarn global add @metamn/new-component

# or, using NPM
$ npm i -g @metamn/new-component

Run:

$ cd PROJECT_DIRECTORY
$ new-component Button

What you'll get

In src/components/Button:

// `Button/Button.js`
import React from "react";
import PropTypes from "prop-types";

/**
 * Defines the prop types
 */
const propTypes = {};

/**
 * Defines the default props
 */
const defaultProps = {};


/**
 * Displays the component
 */
const Button = props => {
  return <div className="Button">Button</div>;
};

Button.propTypes = propTypes;
Button.defaultProps = defaultProps;

export default Button;
export { propTypes as ButtonPropTypes, defaultProps as ButtonDefaultProps };
// `Button/Button.stories.js`
import React from "react";
import Button from "./Button";
import ApiDoc from "./Button.md";

export default {
  component: Button,
  title: "Button",
  parameters: { notes: ApiDoc }
};

export const Default = () => <Button />;
// `Button/Button.md`
# Button
// `Button/Button.test.js`
import React from "react";
import { render } from "@testing-library/react";
import Button from "./Button";

it("has a Button component", () => {
  const { getByText } = render(<Button />);
  expect(getByText("Button")).toBeInTheDocument();
});
// `Button/index.js`
export { default, ButtonPropTypes, ButtonDefaultProps } from "./Button";

Modify & test locally

You can easily fork this repo, modify, test, and publish on npm.

NOTE: Always start with changing the version number in package.json !!

Test locally

In this current repo:

npm pack

This will create a file like new-component@0.0.1.tgz.

In another folder:

npm i <path_to_new_component_repo>/new-component@0.0.1.tgz &&
./node_modules/.bin/new-component Button

Update the changelog

NOTE: Always update the changelog

Publish

First push changes to Github. Then:

npm publish

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[0.2.0] - 2019-11-6

Added

  • Default tests

Changed

Removed

  • styled-components, because many times components use another library, like material-ui

[0.1.2] - 2018-08-17

Fixed

  • Exporting default props

[0.1.1] - 2018-08-17

Changed

  • How default props are exported

[0.1.0] - 2018-07-03

Added

  • New templates for function components

[0.0.4] - 2018-12-11

Fixed

  • Markdown is not run through prettify().

[0.0.3] - 2018-12-11

Added

  • Markdown documentation support.

[0.0.2] - 2018-12-11

Added

  • A CHANGELOG section in README.

Changed

  • The install instructions in README.

0.0.1 - 2018-12-11

Added

  • Initial release

Current Tags

  • 0.2.4                                ...           latest (a month ago)

4 Versions

  • 0.2.4                                ...           a month ago
  • 0.2.3                                ...           2 months ago
  • 0.2.2                                ...           2 months ago
  • 0.2.1                                ...           2 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 4
Last Day 0
Last Week 4
Last Month 22
Dependencies (4)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |