Squid Beak React CLI

An easy way to generate new React project, React components and pages through the command line.

| package | version | |-------------|---------| | react | 16.12 | | typescript | 3.7.2 | | eslint | 6.6.0 | | redux | 4.0.4 | | material-ui | 4.6.1 | | webpack | 4.41.2 | | storybook | 5.3.12 |

Installing

Install globally npm i -g squid-beak-cli

Usage

$ squid-beak [cmd] <params>

Commands

• project
• component
• page
• storybook

project

$ squid-beak project my-awesome-component

Options The generate project command will prompt you with a serious of questions to select the options to use with the project setup. Will Pascal Case any dashed name given.

1. Pick a Component Library

• Material-UI
• Ant-Design (future feature)
• None

2. Pick an Eslint Style Guide

• AirBnb
• Alloy (future feature)
• Google (future feature)

3. Do you want to use redux? y/n

4. Do you want to set up Storybook? y/n

5. Do you want to set up a folder structure? y/n

After your selection the folder structure will be generated and configuration and sample files will be added. Git will be initiated and it will install all appropriate dependencies.

** currently Material-UI and AirBnb are the only ones really working well the others get close but more work is needed

Here is a sample of the folder structure generated with storybook and redux

├── .storybook
│   └── main.js
├── config
│   ├── jest
│   │   ├── assetTransformer.js
│   │   ├── testSetup.js
│   │   └── testShim.js
├── scripts
│   ├── buildApp.js
│   └── index.js
├── src
│   ├── assets
│   │   ├── images
│   │   └── styles
│   │       ├── global.styles.js
│   │       └── theme.ts
│   ├── build
│   │   ├── favicon.ico
│   │   └── index.html
│   ├── components
│   ├── constants
│   │   └── route-paths.ts
│   ├── containers
│   │   └── Root.tsx
│   ├── index.tsx
│   ├── pages
│   │   ├── SamplePage
│   │   │   ├── component
│   │   │   │   ├── SamplePage.styles.ts
│   │   │   │   └── SamplePage.tsx
│   │   │   ├── SamplePage.enhancer.ts
│   │   │   └── index.ts
│   │   └── routes.tsx
│   ├── redux
│   │   ├── sample.ts
│   │   ├── tests
│   │   └── types.ts
│   ├── serviceWorker.js
│   └── util
├── tsconfig.json
├── webpack.common.config.js
├── webpack.dev.config.js
├── webpack.production.config.js
└── webpack.static.config.js

component

$ squid-beak component my-awesome-component

or can use alias

$ squid-beak c my-awesome-component

This will create a new component called MyAwesomeComponent with the following folder structure under the "components" folder. Will Pascal Case any dashed name given.

├── components
│   └── MyAwesomeComponent
│       ├── MyAwesomeComponent.enhancer.ts
│       ├── MyAwesomeComponent.styles.ts
│       ├── MyAwesomeComponent.tsx
│       ├── index.ts
│       └── test
│           └── MyAwesomeComponent.stories.js

Options

--material or -m - use material-ui styles with this component

default: false

--no-storybook or -s - don't add the test folder with the component's stories file

default: false

--no-enhancer or -e - don't use the enhancer pattern with this component

default: false

--path or -p - change what path to create the component in

default: src/components

page

$ squid-beak page my-awesome-page

or can use alias

$ squid-beak p my-awesome-page

This will create a new page called MyAwesomePage with the following folder structure under the "pages" folder. Will Pascal Case any dashed name given.

├── pages
│   ├── MyAwesomePage
│   │   ├── component
│   │   │   ├── MyAwesomePage.styles.ts
│   │   │   └── MyAwesomePage.tsx
│   │   ├── MyAwesomePage.enhancer.ts
│   │   ├── index.ts
│   │   └── wrapper
│   │       └── MyAwesomePageWrapper.tsx

The component folder holds the presentational page component, styles, HOC enhancer file.

The wrapper folder holds the a higher order component for the...

Options

--material or -m - use material-ui styles with this component

default: false

--no-enhancer or -e - don't use enhancer pattern with page

default: false

--no-wrapper or -w - don't use the higher order component/"wrapper" for the page

default: false

--path or -p - change what path to create the page in

default: src/page

storybook

$ squid-beak storybook my-awesome-page

or can use alias

$ squid-beak sb my-awesome-page

** future feature

Enhancer

Instead of piling on the higher order components for a component on to the same file, this pattern has an extra file (the enhancer) that combines together the HOCs with the help of thee redux compose function into one function.

// .enhancer.js

import { memo, FunctionComponent } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { compose } from 'redux';
import { WrapperOne } from '../wrapper/WrapperOne';
import { WrapperTwo } from '../wrapper/WrappereTwo'
import { Props } from './MyComponent';

const enhance = compose<FunctionComponent<Props>>(
  memo,
  withStyles,
  WrapperOne,
  WrapperTwo
);
export { enhance };

So then when you export the component, you wrap it with the new enhancer function and all of the HOCs are applied. Keeping the component file a bit cleaner and separating out concerns into a new file.

// index.js
import { MyComponent } from './MyComponent';
import { enhance } from './MyComponent.enhancer';

export default enhance(MyComponent);

Authors

Jamie Artin

License

This project is licensed under the MIT License - see the LICENSE.md file for details