0.1.4 • Published 4 years ago
@kotchi-ui/cli v0.1.4
Create Component
This command will create a complete component files in a specific folder structure. Using a descriptor JSON, that descripes how to exactly create the component. You can find the scheme here, and here are couple of examples. (view full descriptors list)
kui-button descriptor
{
"name": "Button",
"description": "`{{toTagName name}}` is a button that has predefined styles and sizes to serve different semantic purposes with few extras.",
"allowedChildren": [],
"allowedParents": [],
"attributes": [
{
"name": "kui-style",
"description": "Predefined styles that serves different semantic purposes",
"type": "Style",
"defaultValue": "Style.Secondary",
"values": {
"Primary": "{{toTagName name}}-primary",
"Secondary": "{{toTagName name}}-secondary",
"Information": "{{toTagName name}}-info",
"Danger": "{{toTagName name}}-danger",
"Warning": "{{toTagName name}}-warning",
"Success": "{{toTagName name}}-success",
"Link": "{{toTagName name}}-link"
}
},
{
"name": "kui-size",
"description": "Predefined sizes smaller or bigger than the default one",
"type": "Size",
"defaultValue": "Size.Normal",
"values": {
"Normal": "null",
"Small": "{{toTagName name}}-small",
"Large": "{{toTagName name}}-large",
"Block": "{{toTagName name}}-block"
}
},
{
"name": "kui-outline",
"description": "Display the button in an outline style",
"type": "Boolean",
"defaultValue": "false"
},
{
"name": "kui-disabled",
"description": "Sets the button in a disabled state",
"type": "Boolean",
"defaultValue": "false"
}
],
"publicAPI": [
{
"name": "addClickHandler",
"description": "Adds a click handler to the button handlers list",
"params": [
{
"name": "handler",
"type": "function",
"description": "The handler method to be added"
}
]
},
{
"name": "removeClickHandler",
"description": "Removes the given handler from the button handlers list",
"params": [
{
"name": "handler",
"type": "function",
"description": "The handler method to be removed"
}
]
}
]
}
kui-accordion descriptor
how to use the command
node kui.js generate component --config PATH_TO_DESCRIPTOR
Folders structure
COMPONENT_NAME/
├── docs/
| ├── configuration.json
| ├── example-attributes.html
| ├── example-basic.html
│ └── example-*.html //one for each attribute
├── _story.js
├── _test.js
├── index.js
├── kui-COMPONENT_NAME.js
├── README.md
├── style.scss
└── template.js