cli-uv

introduction

keys features

• create react class/functional component
• create boilerplate redux file
• convert scss/css component to module style
• reverse module style to normal style

note*

your source folder path must be "src"

any suggestion visit: https://github.com/UVcoder/cli-uv

available cli

| cli | option | description | | ----------------------------------- | -------------------------------------------- | --------------------------------------------- | | uv rc <folderPath> [option] | --css, --styleModule, --single, --reactClass | create react files | | uv rd <folderPath> | none | create redux files | | uv toModule <filePath> [option] | --notIncludeStyle | convert normal react css/scss to module style | | uv toCamel <cssFilePath> [option] | --absolute | convert normal css/scss to camel style |

install

npm i -g cli-uv

Note*

to be able to run this command

example:

uv rc users/admin

you need to install it globally;

React Cli

Run

uv rc <folderPath> [option]

option

| short | full | default | description if true | | ----- | --------------- | ------- | -------------------- | | none | - - css | false | use css style | | -m | - - styleModule | false | use module style | | -s | - - single | false | only react component | | -c | - - reactClass | false | use react class |

Note*

the above command if provided, its value becomes true;

uv rc pages/users-admin

this will create the following files,

project
└─ node_modules
└─ public
└─ src
│   └─ pages
│   │   └─ users-admin
│   │   │   │ users-admin-component.jsx
│   │   │   │ users-admin-styles.scss

users-admin-component.jsx

import React from "react";
// import PropTypes from 'prop-types';
import "./users-admin-styles.scss";

const UsersAdmin = () => {
  return <div className="usersAdmin"></div>;
};
// UsersAdmin.propTypes = {
// }

export default UsersAdmin;

users-admin-styles.scss

.usersAdmin{

}

example with option

uv rc components/card-gold -m

this will generate

project
└─ node_modules
└─ public
└─ src
│   └─ components
│   │   └─ card-gold
│   │   │   │ card-gold-component.jsx
│   │   │   │ card-gold-styles.module.scss

uv rc components/card-gold -m --css

this will generate

project
└─ node_modules
└─ public
└─ src
│   └─ components
│   │   └─ card-gold
│   │   │   │ card-gold-component.jsx
│   │   │   │ card-gold-styles.module.css

Redux Cli

Run

uv rd <folderPath>

uv rd redux/users-admin

this will create the following files,

project
└─ node_modules
└─ public
└─ src
│   └─ redux
│   │   └─ users-admin
│   │   │   │ users-admin.action.js
│   │   │   │ users-admin.reducer.js
│   │   │   │ users-admin.selector.js
│   │   │   │ users-admin.type.js
│   │   │   │ users-admin.util.js

action.js

import { UsersAdminType } from "./users-admin.type";

/**
 * @type {(initState:boolean)=>{type:string,payload:any}}
 */
export const UsersAdminToggle = item => {
  return {
    type: UsersAdminType.toggle,
    payload: item
  };
};

reducer.js

import { UsersAdminType } from "./users-admin.type";

const InitState = {
  // items: [],
  // itemsCount: 0
};

/**
 * @typedef {{
 * items:any[],
 * itemsCount:number
 * }} State
 */

/**
 * @typedef {{type:string,payload:any}} Action
 */

/**
 * @type {(state:State,action:Action)=>VoidFunction}
 */
const UsersAdminReducer = (state = InitState, action) => {
  switch (action.type) {
    case UsersAdminType.toggle:
      return {
        ...state
      };
    default:
      return state;
  }
};

export default UsersAdminReducer;

selector.js

import { createSelector } from "reselect";

const baseState = state => state.usersAdmin;

export const UsersAdminGetState = createSelector([baseState], state => {
  return state;
});

type.js

export const UsersAdminType = {
  toggle: "toggle"
};

util.js

// export const addItem = (existingItems, itemToBeAdded) => {
//   return [...existingItems, itemToBeAdded];
// };

toModule cli

convert react component & style to module style, or reverse back to normal style

uv toModule <filePath> [option]

option

| short | full | default | description if true | | ----- | ------------------------- | ------- | -------------------------------------------------- | | -n | - - notIncludeStyle | false | update only component style, not touching scss/css | | -a | - - absolute | false | ref to absolute path | | -r | - - reverse | false | reverse module styled component to normal style | | -s | - - styleName | uvStyle | style variable, default uvStyle |

example:

uv toModule "d:/code projects/cli/cli-uv/src/components/product/guest-product-component.jsx" -a

relative path to src

uv toModule components/product/guest-product-component.jsx

i like absolute path as i can drag & drop file; (don't have to write that long path); absolute path should be true by default, yet i first introduce relative path in earlier version, so ...

change style variable from uvStyle to vvv

uv toModule components/product/guest-product-component.jsx -s vvv

this will change import uvStyle from "./my-style-path.module.scss" to import vvv from "./my-style-path.module.scss" note* if you change 'uvStyle', when reverse back to normal style, you must provide your changed style variable name;

before conversion

react component

import React from "react";
import "./module-styles.module.scss";

const GuestProduct = () => {
  return (
    <div
      className={
        `
      flex ${last + time}
      flex-column 
      flex-center ${title}${other}
      guest-product
      title
      txt-info ${item - fast}
      flex-start
      12invalid ${time} 
      ${other}
      21-other
      32-what-else
      ` +
        variable +
        `flex title` +
        "i am title" +
        "also title"
      }
    >
      <div className=" title ">Pay Nothing & Have it ALL</div>
      <div className=" txt-info ">suitable from small to Large business </div>

      <div className=" product ">
        {ProductInfo.map(pro => (
          <Card key={pro.id} title={pro.title} icon={pro.icon} content={pro.content} />
        ))}
      </div>
      <div className=" txt-info txt-info-sm ">Integrated with Role Base System Management</div>
    </div>
  );
};

const Card = ({ title, icon, content }) => {
  return (
    <Box className=" card " bgcolor="background.paper" boxShadow={3}>
      <div className=" icon ">{icon}</div>
      <div className=" title-card ">{title.toUpperCase()}</div>
      <div className=" product-content ">{content}</div>
    </Box>
  );
};

export default GuestProduct;

style

@import "../../../../uv-commons/styles/variable.scss";
.guest-product {
  width: 80%;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 16px;
  width: 215px;
  height: 270px;
  padding: 14px;
  text-align: center;
}
.title {
  color: $col-yellow;
  font-size: 36px;
  text-align: center;
}
.icon {
  font-size: 4.2rem;
}
.title-card {
  text-transform: uppercase;
  color: $col-yellow;
  font-size: 24px;
  text-align: center;
  margin-bottom: 6px;
}
.txt-info {
  // font-size: 11px;
  text-align: center;
}
.product {
  display: flex;
  width: 720px;
  justify-content: space-around;
  margin: 17px 0;
}
@media (max-width: 600px) {
  .product {
    flex-direction: column;
    align-items: center;
  }
  .guest-product {
    justify-content: flex-start;
  }
  .card {
    margin: 12px 0;
  }
  .txt-info-sm {
    margin-bottom: 24px;
  }
}
@media (max-width: 1070px) {
  .txt-info-sm {
    margin-bottom: 24px;
  }
}
.-other {
  color: red;
}

after conversion

react component

any class name which is not found in scss/css file will not be converted to ${style.name}; in this way, you can have component scoped and also be able to use global style;

flex flex-column flex-center flex-start 12invalid 21-other 32-what-else i am also product-content remain the same, as it is not listed in css file;

import React from "react";
import uvStyle from "./module-styles.module.scss";

const GuestProduct = () => {
  return (
    <div
      className={
        `${last + time} ${title} ${other} ${item - fast} ${time} ${other} ${uvStyle.guestProduct} ${uvStyle.title} ${
          uvStyle.txtInfo
        }  flex  flex-column  flex-center   flex-start 12invalid   21-other 32-what-else` +
        variable +
        ` ${uvStyle.title} flex` +
        `${uvStyle.title} i am` +
        `${uvStyle.title} also`
      }
    >
      <div className={`${uvStyle.title} `}>Pay Nothing & Have it ALL</div>
      <div className={`${uvStyle.txtInfo} `}>suitable from small to Large business </div>

      <div className={`${uvStyle.product} `}>
        {ProductInfo.map(pro => (
          <Card key={pro.id} title={pro.title} icon={pro.icon} content={pro.content} />
        ))}
      </div>
      <div className={`${uvStyle.txtInfo} ${uvStyle.txtInfoSm} `}>Integrated with Role Base System Management</div>
    </div>
  );
};
const Card = ({ title, icon, content }) => {
  return (
    <Box className={`${uvStyle.card} `} bgcolor="background.paper" boxShadow={3}>
      <div className={`${uvStyle.icon} `}>{icon}</div>
      <div className={`${uvStyle.titleCard} `}>{title.toUpperCase()}</div>
      <div className={` product-content`}>{content}</div>
    </Box>
  );
};
// GuestProduct.propTypes = {
// }

export default GuestProduct;

style

pls noted that as we convert your class name to camel case, any class name with preceding or tailing "-" will be omitted; -my-new-style will become `myNewStyle'

.guestProduct {
  width: 80%;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 16px;
  width: 215px;
  height: 270px;
  padding: 14px;
  text-align: center;
}
.title {
  color: $col-yellow;
  font-size: 36px;
  text-align: center;
}
.icon {
  font-size: 4.2rem;
}
.titleCard {
  text-transform: uppercase;
  color: $col-yellow;
  font-size: 24px;
  text-align: center;
  margin-bottom: 6px;
}
.txtInfo {
  // font-size: 11px;
  text-align: center;
}
.product {
  display: flex;
  width: 720px;
  justify-content: space-around;
  margin: 17px 0;
}
@media (max-width: 600px) {
  .product {
    flex-direction: column;
    align-items: center;
  }
  .guestProduct {
    justify-content: flex-start;
  }
  .card {
    margin: 12px 0;
  }
  .txtInfoSm {
    margin-bottom: 24px;
  }
}
@media (max-width: 1070px) {
  .txtInfoSm {
    margin-bottom: 24px;
  }
}
.other {
  color: red;
}

reverse your module style back to normal style

example:

uv toModule "d:/code projects/cli/cli-uv/src/components/product/guest-product-component.jsx" -a -r

react component

import React from "react";
import "./module-styles.module.scss";

const GuestProduct = () => {
  return (
    <div
      className={
        `${last + time} ${title} ${other} ${item -
          fast} ${time} ${other} guestProduct title txtInfo  flex  flex-column  flex-center   flex-start 12invalid   21-other 32-what-else` +
        variable +
        ` title flex` +
        `title i am` +
        `title also`
      }
    >
      <div className={`title `}>Pay Nothing & Have it ALL</div>
      <div className={`txtInfo `}>suitable from small to Large business </div>

      <div className={`product `}>
        {ProductInfo.map(pro => (
          <Card key={pro.id} title={pro.title} icon={pro.icon} content={pro.content} />
        ))}
      </div>
      <div className={`txtInfo txtInfoSm `}>Integrated with Role Base System Management</div>
    </div>
  );
};

const Card = ({ title, icon, content }) => {
  return (
    <Box className={`card `} bgcolor="background.paper" boxShadow={3}>
      <div className={`icon `}>{icon}</div>
      <div className={`titleCard `}>{title.toUpperCase()}</div>
      <div className={` product-content`}>{content}</div>
    </Box>
  );
};

export default GuestProduct;

style file

remain camel case