Forked from https://github.com/joshwcomeau/new-component. Added Storybook and basic testing.
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
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";
You can easily fork this repo, modify, test, and publish on npm.
NOTE: Always start with changing the version number in package.json
!!
In this current repo:
npm pack
This will create a file like [email protected]
.
In another folder:
npm i <path_to_new_component_repo>/[email protected] &&
./node_modules/.bin/new-component Button
NOTE: Always update the changelog
First push changes to Github. Then:
npm publish
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.
- Default tests
- Storybook stories to follow the Component Story Format: https://storybook.js.org/docs/formats/component-story-format/
styled-components
, because many times components use another library, likematerial-ui
- Exporting default props
- How default props are exported
- New templates for function components
- Markdown is not run through
prettify()
.
- Markdown documentation support.
- A CHANGELOG section in README.
- The install instructions in README.
- Initial release