# mihy-ui-framework > MIHY is boilerplate for creating screen by writing object configuration Latest version **0.1.42** (published 2018-12-24) · ISC license · 0 weekly downloads ## Install ```sh npm install mihy-ui-framework pnpm add mihy-ui-framework yarn add mihy-ui-framework bun add mihy-ui-framework ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.42 | | Published | 2018-12-24 | | First published | 2018-09-19 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 476.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | murali | | Maintainers | muralim4242 | ## Links - npm: https://www.npmjs.com/package/mihy-ui-framework - Repository: https://github.com/muralim4242/mihy-ui-framework-boilerplate - Homepage: https://github.com/muralim4242/mihy-ui-framework-boilerplate#readme - Issues: https://github.com/muralim4242/mihy-ui-framework-boilerplate/issues - npm.io page: https://npm.io/package/mihy-ui-framework ## Recent versions - 0.1.42 (latest) — 2018-12-24 - 0.1.41 — 2018-10-12 - 0.1.40 — 2018-10-12 - 0.1.39 — 2018-10-11 - 0.1.38 — 2018-10-11 - 0.1.37 — 2018-10-10 - 0.1.36 — 2018-10-09 - 0.1.35 — 2018-10-09 - 0.1.34 — 2018-10-08 - 0.1.33 — 2018-10-08 - 0.1.32 — 2018-10-08 - 0.1.31 — 2018-10-08 - 0.1.30 — 2018-10-07 - 0.1.29 — 2018-10-07 - 0.1.28 — 2018-10-07 - … 29 more at https://npm.io/package/mihy-ui-framework/versions ## README # MIHY MIHY is boilerplate for creating screen by writing object configuration ### Requirements * Node js * NPM ## Installation & Development ``` $ npm clone https://github.com/muralim4242/mihy-ui-framework-boilerplate.git $ cd mihy-ui-framework-boilerplate $ npm i $ npm start ``` #### Note : We have added default configuration for login,register, dashboard and advanced dashboard, it will use for you to create new configuration for screen. ## Usage 1. Go to src/ui-config/screens/specs/ in root of the project. 2. Create a folder for your set of screens. eg:auth. 3. Create a file for screen. eg:login.js 4. Write your configuration. #### example code ``` import { getCommonCardWithHeader, getLabel } from "mihy-ui-framework/ui-config/screens/specs/utils"; const screenConfig = { uiFramework: "material-ui", name: "mihyLoginScreen", components: { mihyLoginGrid: { uiFramework: "custom-atoms", componentPath: "Container", children: { mihyEmptyRow: { uiFramework: "custom-atoms", componentPath: "Item", props: { sm: 4 } }, mihyLoginItem: { uiFramework: "custom-atoms", componentPath: "Item", props: { sm: 4, xs: 12 }, children: { mihyLoginCard: getCommonCardWithHeader( { mihyloginDiv: { uiFramework: "custom-atoms", componentPath: "Div", props: { className: "text-center" }, children: { mihyLoginUsername: { uiFramework: "custom-molecules", componentPath: "TextfieldWithIcon", props: { label: "Email", margin: "normal", fullWidth: true, autoFocus: true, required: true, iconObj: { position: "end", iconName: "email" } }, required: true, jsonPath: "body.mihy.username", pattern: "^([a-zA-Z0-9@.])+$" }, mihyLoginPassword: { uiFramework: "custom-molecules", componentPath: "TextfieldWithIcon", props: { label: "Password", type: "password", margin: "normal", fullWidth: true, required: true, iconObj: { position: "end", iconName: "lock" } }, jsonPath: "body.mihy.password", required: true, pattern: "^([a-zA-Z0-9!])+$" }, mihyBreakOne: { uiFramework: "custom-atoms", componentPath: "Break" }, mihyBreakTwo: { uiFramework: "custom-atoms", componentPath: "Break" }, mihyLoginButton: { componentPath: "Button", props: { color: "primary", fullWidth: true }, children: { mihyLoginButtonText: getLabel({label:"Let's go"}) } } } } }, { mihyLoginHeader: { componentPath: "Typography", children: { mihyLoginHeaderText: getLabel({label:"Login"}) }, props: { align: "center", variant: "title", style: { color: "white" } } } } ) } } } } } }; export default screenConfig; ``` 5. Save a file,enter a url in browser like bellow, ### page with menu ``` http://localhost:/landing/mihy-ui-framework// eg:- http://localhost:3000/landing/mihy-ui-framework/auth/login ``` ### page without menu ``` http://localhost:/mihy-ui-framework// eg:- http://localhost:3000/mihy-ui-framework/auth/login ``` #### Note: Many components we directly reffered [material-ui](https://material-ui.com/) framework, thanks to material-ui for giving such a beautifull components. example for using material ui components ### React way for rendering Material-ui component ``` import React from 'react'; import Button from '@material-ui/core/Button'; ``` ### MIHY way for rendering same component in configuration ``` ...... primaryButton:{ componentPath:"Button", props:{ variant:"contained", color:"primary" } } ...... ``` ## Inbuilt screens ### login ![alt text](https://github.com/muralim4242/mihy-ui-framework-boilerplate/blob/master/src/ui-assets/images/login.png) ### Register ![alt text](https://github.com/muralim4242/mihy-ui-framework-boilerplate/blob/master/src/ui-assets/images/register.png) ### Dashboard ![alt text](https://github.com/muralim4242/mihy-ui-framework-boilerplate/blob/master/src/ui-assets/images/landing.png) ### Nested app dashboard ![alt text](https://github.com/muralim4242/mihy-ui-framework-boilerplate/blob/master/src/ui-assets/images/blood_dashboard.png) ## Contributing Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate. ### Special thanks 1. Sonia 2. Vishwas 3. Abhishek 4. Ranjeet 5. Tharu 6. My ui team members ## License [MIT](https://choosealicense.com/licenses/mit/) --- _Source: https://npm.io/package/mihy-ui-framework · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._