new-leaf
Quickly create scaffolding for test driven React components with TypeScript
Last updated 2 months ago by elethan .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install new-leaf 
SYNC missed versions from official npm registry.

New Leaf

New Leaf is a tool for quickly scaffolding a new React component following a very specific structure. Running the command will create the shell of a React component in a .tsx file, with an interface for its props, along with a test file .test.tsx and a stylesheet .scss. All of these files will be contained inside a new folder with the same name as the component.

Usage

No need to install the package. You can simply run using npx like this:

$ npx new-leaf -p '/tmp/' -n 'MyNewComponent'

This command will create the following file structure in /tmp/:

/tmp/
  └── MyNewComponent/
           ├── MyNewComponent.tsx
           ├── MyNewComponent.test.tsx
           └── MyNewComponent.scss

The files will contain the following boilerplate (boilerplate subject to change):

// MyNewComponent.tsx
import React, { FunctionComponent } from 'react';
import './MyNewComponent.scss';


interface MyNewComponentProps {

}

export const MyNewComponent:FunctionComponent<MyNewComponentProps> = ({}) => {
    return (
        <React.Fragment>

        </React.Fragment>
    );
}
// MyNewComponent.test.tsx
import React from 'react';
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';

import { MyNewComponent } from './MyNewComponent';


describe('MyNewComponent', () => {
    it('renders', () => {
        const { container } = render(<MyNewComponent></MyNewComponent>);
        expect(container).toBeDefined();
    });

    it('does something else', () => {
        const { getByTestId } = render(<MyNewComponent></MyNewComponent>);
        expect(getByTestId('id')).toBeDefined();
    });
});
/* MyNewComponent.scss */
MyNewComponent {

}

Current Tags

  • 0.1.4                                ...           latest (2 months ago)

5 Versions

  • 0.1.4                                ...           2 months ago
  • 0.1.3                                ...           3 months ago
  • 0.1.2                                ...           3 months ago
  • 0.1.1                                ...           3 months ago
  • 0.1.0                                ...           3 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |