nyg-ui-generator v2.4.5
nyg-ui-generator
Generator is based on nyg and nyg-module-generator.
Prerequisites
Following modules need to be installed globally:
install:
npm i ghrepo -g
npm i nyg -g
npm i nyg-module-generator -g
nyg-module-generator
will prompt to set your init.author.name
, init.author.email
and init.author.github
if it's not already set. You can check existing configs using npm config get
and set missing props using npm config set someProp "some-value"
Install
npm i nyg-ui-generator -g
Basics
nyg nyg-ui-generator
There are 3 options:
- Generate a boilerplate UI component. The available types are React, React-f1, and Bigwheel
- Create a UI Module. Create a UI node module of a specified type that can be published to github and npm.
- Post Publish. Publish an existing generated component as a module. Creating a UI module will also perform this action.
You will then be prompted with a number of questions, which will define the type of UI component you want to generate, where to put it, and whether you want to publish it. A user flow diagram detailing these interactions is available here. Details are also available in the usage section below
Arguments
You can pass in command line arguments to the ui generator that specify the type, folder name, folder location and component type. running nyg nyg-ui-generator -h
will bring up the available options and their descriptions.
Usage: nyg [options] [command]
Commands:
help Display help
Options:
-a, --action The desired action (module, boilerplate, postpublish)
-f, --folder The name of the ui folder
-h, --help Output usage information
-l, --location The location of the ui folder
-n, --name The name of the ui component
-t, --type The type of component to be made (react, react-f1, bigwheel)
-v, --version Output the version number
These arguments are currently for the boilerplate
action only.
Usage
There are 3 actions possible when using the UI generator.
1. Generate UI component files - simply create boilerplate files (js, styles, templates). Recommended to run generator from project's root for this option. Generator will prompt the following questions:
- path - where to put the new component (default: cwd)
- component folder name - folder to be created under specified path (default: MyComponent)
- component name - component's class name inside JS file (default: MyComponent)
- UI type (React, React-F1, or Bigwheel)
whether the user want to rename your index.js (e.g MyComponent.js). Default is 'No'
Generator will copy files into new component folder and show it in your file browser
2. Create UI module - generate UI module with boilerplate files and set up test and example. Suggested that you have a specific global folder for all your generated modules. Generator will prompt the following questions:
- path - where to put the new component (default: your modules folder e.g
/Users/name/modules/
) - module name - respective folder will be created under specified path
- module specific questions such as description, kew words etc
- component name - component's class name inside JS file (default: MyComponent)
UI type (React, React-F1, or Bigwheel)
Generator will copy appropriate files into new component folder, install dependencies, open component folder in the file viewer and run example in the web browser.
Afterwards, the user will be asked about publishing the UI module to GitHub and npm.
3. Post publish - publish existing component as module. IMPORTANT: to run this, you have to be in the component folder. Generator will try to read existing config file and get the information about UI type, index file name, etc.
When reading nyg-cfg.json
:
- if there's a file named
index.js
or there's only one JS file exists in the component root, or config file contains rename informaion, the respective file will be assigned as index. Otherwise, the user will be asked to choose it from the list if there's no UI type information contained in the config file, the user will be prompted to choose it from the list
Note: Should any problem arise during reading reading nyg-cfg.json
with further unexpected generator exit, the user can try removing the config file, then they will be prompted for missing info.
Generator will proceed with similar to Create UI module steps. Suggested that files will be copied to and published from your default modules folder (e.g. /Users/name/modules/
) which you will be asked about upon installation.
Generator will try to detect all dependencies (modules as well as local files) based on imports (requires) reading them recursively, then install all module dependencies and bring all local dependencies into lib
folder inside your target directory, overwriting import paths. Note that this will use acorn-jsx
module to parse your jsx and some syntax may not be supported such as static
, so you would have to resolve it manually.
Test
To manually run the example in your browser
cd your-ui-component-directory
npm start
To manually run test
cd your-ui-component-directory
npm test
License
MIT, see LICENSE.md for details.
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago