0.1.0 • Published 1 year ago
genre-cli v0.1.0
Genre-cli
Genre-cli (GENerate REsource) is a tool for lazy developers to create resources for React components.
Installation
npm i -g genre-cli
Usage
In the directory where you need to create, or where the components folder already is, type: genre -n <name> -s <style
file extension>
.
Available parameters
Parameter | Description |
---|---|
-n, --name <name> | The name of resource and it's files. |
-s, --style <styleExtension> | The extension of stylesheet file - default css. |
-js, --javascript | Generates js files instead of ts - default false. |
-src | Generate components in src directory |
Example
super-awesome-nextjs-app on main
$ ➜ tree .
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── api
│ │ └── hello.ts
│ └── index.tsx
├── public
│ ├── favicon.ico
│ ├── next.svg
│ ├── thirteen.svg
│ └── vercel.svg
├── styles
│ ├── Home.module.css
│ └── globals.css
└── tsconfig.json
4 directories, 16 files
Then
$ genre -n superButton -s scss
super-awesome-nextjs-app on main
$ ➜ genre -n superButton -s scss
There is no components directory - creating...
components/superButton/superButton.scss created
components/superButton/SuperButton.tsx created
components/superButton/index.ts created
In result
super-awesome-nextjs-app on main
$ ➜ tree .
.
├── README.md
├── components
│ └── superButton
│ ├── SuperButton.tsx
│ ├── index.ts
│ └── superButton.scss
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── api
│ │ └── hello.ts
│ └── index.tsx
├── public
│ ├── favicon.ico
│ ├── next.svg
│ ├── thirteen.svg
│ └── vercel.svg
├── styles
│ ├── Home.module.css
│ └── globals.css
└── tsconfig.json
6 directories, 19 files
Additionally index.ts/js
and Component.tsx/jsx
files are filled with basic structure.
index
export { default as SuperButton } from "./SuperButton";
SuperButton.tsx (component)
function SuperButton() {
return (
<div>
<span>SuperButton</span>
</div>
);
}
export default SuperButton;