GitHub - hyperflask/uilib-spec

UILibSpec

A specification to generate component bindings for UI component libraries targeting various languages and frameworks.

Define your component in HTML with a YAML frontmatter detailing properties and their impact
Generate component bindings for various languages and frameworks (built-in: react, jinja macro)

Warning

This project is still in its conceptual phase. If there is some interest towards it, it can be developped further.

Specification

See SPECIFICATION.md

Example

See the examples folder.

Let's define a button using bootstrap

---
help: A button
props:
  var:
    class: btn-{}
  type:
    attribute: type
    default: button
  outline:
    class: btn-outline-{}
  size:
    class: btn-{}
    type:
      enum:
        - lg
        - sm
---
<button class="btn"><slot></slot></button>

Using the react target, this would generate the following component:

function Button(props) {
  const classNames = ["btn"];
  if (props.var) {
    classNames.push(`btn-{props.var}`)
  }
  if (props.outline) {
    classNames.push(`btn-outline-{props.var}`);
  }
  if (props.size) {
    classNames.push(`btn-{props.size}`);
  }
  return (
    <button type={props.type || "button"} className={classNames.join(" ")}>{props.children}</button>
  );
}

Generating bindings

The project includes a Python binding generator.

Install:

pip install uilibspec-binding-generator

Define your components then run:

uilibspec-binding-generator path/to/components/ path/to/output/ --target react