0.0.1 • Published 3 years ago

@hastics/cli v0.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

@hastics/cli

This package provides some useful commands to help to build your components.

Usage

$ yarn add -D @hastics/cli
$ hastics COMMAND
running command...
$ hastics --help [COMMAND]
USAGE
  $ hastics COMMAND
...

Commands

hastics generate:component [NAME] [PATH]

Generate a React component with reliable skeleton.

By default, it includes a .module.scss file, a .test.tsx file, and a .stories.tsx file. So if you want to enable the full power of this, you have to install the packages:

npx sb init
yarn add -D @testing-library/react
USAGE
  $ hastics generate:component [NAME] [PATH]
  $ hastics g:c [NAME] [PATH]

ARGUMENTS
  NAME  Component name
  PATH  Your component's path

OPTIONS
  -h, --help       show CLI help
  -n, --name=name  Component name
  -p, --path=path  Your component's path
  --no-style       Do not create stylesheet
  --no-story       Do not create Storybook's story
  --no-test        Do not create test file

EXAMPLES
  # By passing arguments
     $ hastics generate:component button src/components

  # By passing flags
     $ hastics generate:component --name=button --path=src/components

  # By following wizard
     $ hastics generate:component

     ? What is the component name ? button
     ? Select a target directory src/components/
     ✨  Done in 4.24s.

  It finally creates a folder like this
  📦 src
    ┣ 📂 components
    ┃ ┣ 📂 button
    ┃ ┃ ┣ 📜 index.ts
    ┃ ┃ ┣ 📜 button.module.scss
    ┃ ┃ ┣ 📜 button.stories.tsx
    ┃ ┃ ┣ 📜 button.test.tsx
    ┃ ┃ ┗ 📜 button.tsx
    ┗ ...

hastics generate:native-component [NAME] [PATH]

Generate a React-Native component with reliable skeleton.

By default, it includes a .test.tsx file and a .stories.tsx file. So if you want to enable the full power of this, you have to install the packages:

npx sb init
yarn add -D @testing-library/react-native
USAGE
  $ hastics generate:native-component [NAME] [PATH]
  $ hastics g:nc [NAME] [PATH]

ARGUMENTS
  NAME  Component name
  PATH  Your component's path

OPTIONS
  -h, --help       show CLI help
  -n, --name=name  Component name
  -p, --path=path  Your component's path
  --no-story       Do not create Storybook's story
  --no-test        Do not create test file

EXAMPLES
  # By passing arguments
     $ hastics generate:native-component button src/components

  # By passing flags
     $ hastics generate:native-component --name=button --path=src/components

  # By following wizard
     $ hastics generate:native-component

     ? What is the component name ? button
     ? Select a target directory src/components/
     ✨  Done in 4.24s.

  It finally creates a folder like this
  📦 src
    ┣ 📂 components
    ┃ ┣ 📂 button
    ┃ ┃ ┣ 📜 index.ts
    ┃ ┃ ┣ 📜 button.stories.tsx
    ┃ ┃ ┣ 📜 button.test.tsx
    ┃ ┃ ┗ 📜 button.tsx
    ┗ ...

hastics generate:index [PATH] [EXCLUDED]

This command allows you to automatically generate an index.ts file that exports all modules in a folder.

Let's assume you have a folder components that actually contains button, icon and text folders.

By calling command

yarn hastics generate:index src/components

you will create an index.ts file in src/components that will contain

export { default as Button } from "./button";
export { default as Icon } from "./icon";
export { default as Text } from "./text";
USAGE
  $ hastics generate:index [NAME] [PATH]
  $ hastics g:i [NAME] [PATH]

ARGUMENTS
  PATH      Your components' folder path
  EXCLUDED  Excluded files and folders, comma separated

OPTIONS
  -h, --help                show CLI help
  -p, --path=path           Your components' folder path
  -e, --excluded=excluded   Excluded files and folders, comma separated

EXAMPLES
  # By passing arguments
     $ hastics generate:index src/components index.ts,react-app-env.d.ts,setupTests.ts,types.ts

  # By passing flags
     $ hastics generate:index --path=src/components --excluded=index.ts,react-app-env.d.ts,setupTests.ts,types.ts