@hitools/tui 0.1.0

package/element.js

@@ -0,0 +1,46 @@
+export default class Element {
+
+    static types = {}
+
+    static registerType(type, component) {
+        this.types[type] = component
+        
+        if(component.alias) {
+            this.types[component.alias] = component
+        }
+
+    }
+
+    constructor (params = {}, {theme} = {}) {
+
+        if (typeof params === 'string') {
+            params = { type: 'message', text: params }
+        }
+
+        const { type } = params
+        if (!type) throw new Error('Element type required')
+
+        const Component = Element.types[type]
+        if (!Component) throw new Error(`Unknown type "${type}"`)
+
+        const data = {}
+
+        for (const key in Component.schema) {
+            const rule = Component.schema[key]
+            const value = params[key] ?? rule.default
+
+            if (rule.required && (value === undefined || value === null)) {
+                throw new Error(`"${key}" required for type "${type}"`)
+            }
+
+            data[key] = value
+        }
+
+        if (theme) data.theme = theme
+        if (params.template) data.template = params.template
+        if (params.before) data.before = params.before
+        if (params.after) data.after = params.after
+
+        return new Component(data)
+    }
+}

package/elements/confirm.js

@@ -0,0 +1,56 @@
+import Prompt from '../prompt.js'
+
+export default class Confirm extends Prompt {
+
+    type = 'confirm'
+
+    constructor(data) {
+        super(data)
+        this.value = this.defaultValue ?? true
+    }
+
+    static schema = {
+        label: { required: true },
+        defaultValue: { default: false },
+        name: { required: false },
+    }
+
+    actions() {
+        return {
+            'y': () => this.value = true,
+            'n': () => this.value = false,
+            'left': () => this.value = true,
+            'right': () => this.value = false,
+            'return': () => this.finished = true,
+            'space': () => this.finished = true
+        }
+    }
+
+    build () {
+        this.clearLastRender()
+
+        const options = [
+            { title: 'Yes', value: true },
+            { title: 'No', value: false }
+        ]
+
+        let output
+
+        if (this.template) {
+            const renderedOptions = options.map(opt => {
+                const state = opt.value === this.value ? this.useTemplate(opt, this.template.option.selected) : this.useTemplate(opt, this.template.option.unselected)
+                return state
+            }).join(' /')
+
+            output = this.useTemplate({label: this.label, options: renderedOptions}, this.template.current)
+
+        } else {
+            const yes = this.value ? '> Yes' : '  Yes'
+            const no = !this.value ? '> No' : '  No'
+            output = `\n${this.label}\n${yes} / ${no}\n`
+        }
+
+        this.lines = output.split('\n').length
+        return output
+    }
+}

package/elements/error.js

@@ -0,0 +1,22 @@
+import Prompt from '../prompt.js'
+
+export default class ErrorMessage extends Prompt {
+
+    type = 'error'
+
+    static schema = {
+        label: { required: true }
+    }
+
+    async build() {
+        this.finished = true
+
+        if(this.template) {
+            return this.useTemplate(this, this.template)
+        } else {
+            return `Error: ${this.label}\n`
+        }
+
+    }
+
+}

package/elements/index.js

@@ -0,0 +1,19 @@
+import Message from './message.js'
+import Select from './select.js'
+import MultiSelect from './multiselect.js'
+import Confirm from './confirm.js'
+import ErrorMessage from './error.js'
+import Loader from './loader.js'
+import Question from './question.js'
+import Task from './task.js'
+
+export default {
+    message: Message,
+    question: Question,
+    confirm: Confirm, 
+    select: Select,
+    multiselect: MultiSelect,
+    error: ErrorMessage,
+    loader: Loader,
+    task: Task,
+}

package/elements/loader.js

@@ -0,0 +1,47 @@
+import Prompt from '../prompt.js'
+
+export default class Loader extends Prompt {
+
+    type = 'loader'
+
+    static schema = {
+        label: { required: true },
+        time: { required: true }
+    }
+
+    async build() {
+
+        return await new Promise( (resolve, reject) => {
+
+            Prompt.out.write( this.useTemplate(this, this.template) )
+            const spinnerFrames = Prompt.theme.spinner
+
+            let i = 0
+
+            const loader = setInterval(() => {
+                Prompt.out.clearLine(0)
+                Prompt.out.cursorTo(0)
+                Prompt.out.write(spinnerFrames[i])
+                i = (i + 1) % spinnerFrames.length
+            }, 80)
+
+
+            setTimeout( () => {
+                clearInterval(loader)
+                Prompt.out.clearLine(0)
+                Prompt.out.cursorTo(0)
+                this.finished = true
+                if(this.template) {
+                    // resolve(this.useTemplate('✔ Done\n', this.template))
+                    resolve('✔ Done')
+                    // resolve(this.useTemplate('✔ Done\n'))
+                } else {
+                    return `Done\n`
+                }
+            }, this.time)
+            
+        })
+
+    }
+
+}

package/elements/message.js

@@ -0,0 +1,23 @@
+import Prompt from '../prompt.js'
+
+export default class Message extends Prompt {
+
+    type = 'message'
+
+    static schema = {
+        label: { required: true },
+        text: { required: false }
+    }
+
+    build() {
+        this.finished = true
+
+        if(this.template) {
+            return this.useTemplate(this, this.template)
+        } else {
+            return `${this.label}\n`
+        }
+
+    }
+
+}

package/elements/multiselect.js

@@ -0,0 +1,62 @@
+import Prompt from '../prompt.js'
+
+export default class MultiSelect extends Prompt {
+    
+    type = 'multiselect'
+
+    constructor(data) {
+        super(data)
+        this.value = this.defaultValue
+        this.index = 0
+
+        this.options = this.prepareOptions(this.options)
+    }
+
+    static schema = {
+        label: { required: true },
+        options: { required: true },
+        defaultValue: { default: null },
+        name: { required: false },
+    }
+
+    actions() {
+        return {
+            up: () => this.index = Math.max(0, this.index-1),
+            down: () => this.index = Math.min(this.options.length-1, this.index+1),
+            space: () => this.options[this.index].selected = this.options[this.index].selected ? false : true,
+            return: () => {
+                this.finished = true
+                this.value = this.options.filter(i => i.selected)
+            }
+        }
+    }
+
+    build () {
+
+        this.clearLastRender()
+
+        let output
+
+        if (this.template) {
+
+            const renderedOptions = this.options.map( (opt, i) => {
+                let state = i === this.index ? this.template.option.startCurrent : this.template.option.start
+                state += opt.selected ? this.useTemplate(opt, this.template.option.selected) : this.useTemplate(opt, this.template.option.unselected)
+                return state
+            }).join('')
+
+            output = this.useTemplate({label: this.label, options: renderedOptions}, this.finished ? this.template.finished : this.template.current)
+
+        } else {
+            output = `\n${this.label}`
+            options.forEach( (opt, i) => {
+                output += i === this.index ? `\n > [ ] ${opt.title}` : `\n   [ ]  ${opt.title}`
+            })
+            output += '\n'
+        }        
+
+        this.lines = output.split('\n').length
+        return output 
+    }
+
+}

package/elements/question.js

@@ -0,0 +1,52 @@
+import Prompt from '../prompt.js'
+
+export default class Question extends Prompt {
+    
+    type = 'question'
+    static alias = 'ask'
+
+    constructor (data) {
+        super(data)
+        this.value = this.defaultValue
+    }
+
+    static schema = {
+        label: { required: true },
+        placeholder: { required: true },
+        defaultValue: { default: '' },
+        name: { required: false },
+    }
+
+    actions () {
+        return {
+            return: () => {
+                if(!this.value) this.value = this.placeholder
+                this.finished = true
+            }
+        }
+    }
+
+    build () {
+
+        this.clearLastRender()
+
+        let output
+
+        if (this.template) {
+            output = this.useTemplate(this, this.template)
+        } else {
+
+            output = `\n${this.label}`
+            if(this.value) {
+                output += ` ${this.value}`
+            } else {
+                output += ` ${this.placeholder}`
+            }
+
+        }        
+
+        this.lines = output.split('\n').length
+        return output
+    }
+
+}

package/elements/select.js

@@ -0,0 +1,60 @@
+import Prompt from '../prompt.js'
+
+export default class Select extends Prompt {
+    
+    type = 'select'
+
+    constructor(data) {
+        super(data)
+        this.value = this.defaultValue
+        this.index = 0
+
+        this.options = this.prepareOptions(this.options)
+    }
+
+    static schema = {
+        label: { required: true },
+        options: { required: true },
+        defaultValue: { default: null },
+        name: { required: false },
+    }
+
+    actions() {
+        return {
+            up: () => this.index = Math.max(0, this.index-1),
+            down: () => this.index = Math.min(this.options.length-1, this.index+1),
+            return: () => {
+                this.finished = true
+                this.value = this.options[this.index]
+            }
+        }
+    }
+
+    build () {
+
+        this.clearLastRender()
+
+        let output
+        
+        if (this.template) {
+
+            const renderedOptions = this.options.map( (opt, i) => {
+                const state = i === this.index ? this.useTemplate(opt, this.template.option.selected) : this.useTemplate(opt, this.template.option.unselected)
+                return state
+            }).join('')
+
+            output = this.useTemplate({label: this.label, options: renderedOptions}, this.finished ? this.template.finished : this.template.current)
+
+        } else {
+            output = `\n${this.label}`
+            options.forEach( (opt, i) => {
+                output += i === this.index ? `\n > ${opt.title}` : `\n   ${opt.title}`
+            })
+            output += '\n'
+        }        
+
+        this.lines = output.split('\n').length
+        return output 
+    }
+
+}

package/elements/task.js

@@ -0,0 +1,25 @@
+import Prompt from '../prompt.js'
+
+export default class Task extends Prompt {
+
+    type = 'task'
+
+    static schema = {
+        run: { required: true },
+        params: { required: false },
+        name: { required: false },
+    }
+
+    async build () {
+
+        Prompt.out.write( this.useTemplate(this, this.template) )
+        
+        let {value, finished} = await this.run(this, this.params)
+        if(value) this.value = value
+        if(finished) this.finished = finished
+
+        return value ?? null
+
+    }
+
+}

package/examples/index.js

@@ -0,0 +1 @@
+// in progress

package/index.js

@@ -0,0 +1,85 @@
+import Components from './elements/index.js'
+import Element from './element.js'
+import Prompt from './prompt.js'
+
+import Theme from './theme.js'
+import Template from '/Users/hodunay/Packages/drafts/templates/index.js'
+import Validator from '/Users/hodunay/Packages/drafts/cli-manager/validate/validate.js'
+
+// Registering Components
+Object.keys(Components).forEach(c => Element.registerType(c.toLowerCase(), Components[c]))
+
+export default class TUI {
+
+    constructor(config) {
+
+        config.theme = true
+        config.validator = true
+
+        Prompt.use('in', process.stdin)
+        Prompt.use('out', process.stdout)
+
+        this.useTypes()
+        this.setup(config)
+    }
+
+    useTypes () {
+        Object.keys(Element.types).map( type => {
+            this[type] = (args) => {
+
+                let params = {}
+                if (typeof args === 'string') {
+                    params.type = 'message'
+                    params.label = args
+                }
+
+                // todo: refactor
+                let exists = Element.types[type]
+                if (exists) {
+                    params = {
+                        type: exists.type ?? exists.alias,
+                        ...args
+                    }
+                }
+                
+                this.flow.push( new Element(params) )
+            }
+        })
+    }
+
+    setup (config) {
+
+        if(Array.isArray(config)) {
+            this.flow = config.map(el => new Element(el))
+        }
+
+        if(config.theme) {
+            Prompt.use('theme', Theme)
+            Prompt.use('templateEngine', new Template())
+            // Prompt.use('theme', config.theme)
+        }
+
+        if(config.flow) {
+            this.flow = config.flow ? config.flow.map(el => new Element(el)) : []
+        }
+
+        if(config.validator) {
+            Prompt.use('validate', Validator)
+            // Prompt.use('validator', config.validator)
+        }
+
+        if(config.elements) {
+            config.elements.map( el => {
+                Element.registerType(el.name, el.component)
+            })
+        }
+    }
+
+    async run(context = {}) {
+        for (const el of this.flow) {
+            const result = await el.render()
+            if (el.name && result) context[el.name] = result.value
+        }
+        return context
+    }
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@hitools/tui",
+  "version": "0.1.0",
+  "description": "Terminal UI with basic components set like Question, Select, Multi-select, Message. ",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hodunay/tui.git"
+  },
+  "keywords": [
+    "tui",
+    "cli",
+    "nodejs",
+    "javascript"
+  ],
+  "author": "Igor Hodunay",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hodunay/tui/issues"
+  },
+  "homepage": "https://github.com/hodunay/tui#readme",
+  "directories": {
+    "example": "examples"
+  }
+}

package/prompt.js

@@ -0,0 +1,152 @@
+import readline from 'readline'
+
+function hideCursor () {
+    process.stdout.write('\x1B[?25l')
+}
+
+function showCursor () {
+    process.stdout.write('\x1B[?25l')
+}
+
+process.on('exit', showCursor)
+process.on('SIGINT', showCursor)
+
+export default class Prompt {
+
+    constructor (data) {
+        Object.assign(this, data)
+        this.finished = false
+        this.lines = 0
+    }
+
+    static use (type, data) {
+        this[type] = data
+    }
+
+    setup () {
+        readline.emitKeypressEvents(Prompt.in)
+        if (Prompt.in.isTTY) Prompt.in.setRawMode(true)
+
+        if(Prompt.templateEngine)
+            this.template = Prompt.theme ? Prompt.theme.template[this.type] : false
+    }
+
+    clear () {
+        Prompt.out.cursorTo(0, 0)
+        Prompt.out.clearScreenDown()
+    }
+
+    teardown () {
+        if (Prompt.in.isTTY) Prompt.in.setRawMode(false)
+    }
+
+    prepareOptions (options, assign = false) {
+        if(Array.isArray(options)) {
+            options = options.map( (item, i) => {
+                let opt = { title: item, value: i }
+                // if(assign) opt = Object.assign(opt, assign)
+                return opt
+            })
+            return options
+        } 
+
+        else if (typeof options === 'object') {
+            return options
+        } 
+    }
+
+    clearLastRender () {
+        if (!this.lines) return
+
+        for (let i = 0; i < this.lines -1; i++) {
+            Prompt.out.clearLine(0)
+            Prompt.out.moveCursor(0, -1)
+        }
+
+        Prompt.out.cursorTo(0)
+    }
+
+    async render () {
+
+        if (this.before) this.before(this)
+
+        this.setup()
+
+        if(!this.actions?.()) {
+            let response = await this.build()
+            Prompt.out.write( response )
+            return response
+        }
+
+        return await new Promise((resolve, reject) => {
+
+            const cleanup = () => {
+                Prompt.in.off('keypress', handler)
+                this.teardown()
+                Prompt.out.write('\x1B[?25h') // show cursor
+            }
+
+            const handler = (chunk, key) => {
+
+                if (key?.ctrl && key.name === 'c') {
+                    cleanup()
+                    return reject(new Error('Interrupted'))
+                }
+
+                const actions = this.actions?.()                
+
+                if (typeof actions?.[key?.name] === 'function') {
+                    hideCursor()
+                    actions[key.name]()
+                    Prompt.out.write( this.build() )
+                } 
+
+                else if (!this.finished && key?.name && chunk) {
+
+                    if (key?.name === 'backspace') {
+                        this.value = this.value.slice(0, -1)
+                    } else {
+                        this.value = this.value + chunk.toString()
+                    }
+
+                    Prompt.out.clearLine()
+                    Prompt.out.cursorTo(0)
+                    Prompt.out.write(this.build())
+
+                    // validate realtime
+                }
+
+                if (this.finished) {
+                    cleanup()
+                    if (this.after) this.after(this)
+                    resolve(this)
+                } 
+
+                // to clear full screen
+                // this.clear()
+                // Prompt.out.write(this.build())
+
+                
+            }
+
+            if(Prompt.validator) {
+                // console.log(Prompt.validator)
+                // const validation = Prompt.validator.check( state.value.length ? state.value : state.defaultValue, validator, { live: false } )
+                // state.error = !validation.valid
+                // state.errorMessage = validation.error
+            }
+
+            Prompt.in.on('keypress', handler)
+            let response = this.build()
+            Prompt.out.write( response )
+            showCursor()
+            
+        })
+
+    }
+
+    useTemplate (data, template = false) {
+        return Prompt.templateEngine ? Prompt.templateEngine(data, template) : false
+    }
+
+}