cellery 1.0.0 → 1.1.0

package/README.md

@@ -50,7 +50,7 @@ Rendering is handled by `Adapters`. Currently these are simply called by `Celler
 We're trying to keep Cells simple. A super basic set of low level components to see how much can be achieved with little.
 
 | Cell        | Description                              |
-|-------------|------------------------------------------|
+| ----------- | ---------------------------------------- |
 | `Cell`      | Base class for all components            |
 | `MultiCell` | Composes multiple cells into one render  |
 | `Container` | Layout wrapper with scroll and flex opts |

package/index.d.ts

@@ -1 +1,197 @@
-declare module 'cellery'
+declare module 'cellery' {
+  import Iambus from 'iambus'
+
+  // --- Decorations ---
+
+  export class Alignment {
+    direction: string
+    justify: string
+    items: string
+
+    constructor(direction: string, justify: string, items: string)
+
+    static Horizontal(opts: { justify?: string; items?: string }): Alignment
+    static Vertical(opts: { justify?: string; items?: string }): Alignment
+  }
+
+  export class Spacing {
+    left: number
+    top: number
+    right: number
+    bottom: number
+
+    constructor(left: number, top: number, right: number, bottom: number)
+
+    static all(value: number): Spacing
+    static symmetric(opts: { vertical?: number; horizontal?: number }): Spacing
+    static only(opts: { left?: number; right?: number; top?: number; bottom?: number }): Spacing
+
+    toString(): string
+  }
+
+  export class Color {
+    red: number
+    green: number
+    blue: number
+    alpha: number
+
+    constructor(red?: number, green?: number, blue?: number, alpha?: number)
+
+    toString(): string
+    toRGBA(): string
+    toRGB(): string
+
+    static from(
+      value: string | { red?: number; green?: number; blue?: number; alpha?: number },
+      alpha?: number
+    ): Color | null
+  }
+
+  export interface BorderOptions {
+    width?: number
+    color?: Color | null
+  }
+
+  export class Border {
+    width: number
+    color: Color | null
+
+    constructor(opts?: BorderOptions)
+
+    static all(opts?: BorderOptions): Border
+
+    toString(): string
+  }
+
+  export interface BoxDecorationOptions {
+    border?: Border | null
+  }
+
+  export class BoxDecoration {
+    border: Border | null
+
+    constructor(opts?: BoxDecorationOptions)
+
+    toString(): string
+  }
+
+  export const Size: {
+    readonly XS: 'xs'
+    readonly S: 's'
+    readonly M: 'm'
+    readonly L: 'l'
+    readonly XL: 'xl'
+  }
+
+  export type SizeValue = (typeof Size)[keyof typeof Size]
+
+  // --- Cells ---
+
+  export interface CellOptions {
+    id?: string
+    children?: Cell[] // lunte-disable-line
+    cellery?: Cellery // lunte-disable-line
+    padding?: Spacing
+    margin?: Spacing
+    color?: Color
+    alignment?: Alignment
+    decoration?: BoxDecoration
+    size?: SizeValue
+    onclick?: (...args: any[]) => void
+  }
+
+  export class Cell {
+    id: string | undefined
+    children: Cell[]
+    cellery: Cellery | undefined // lunte-disable-line
+    padding: Spacing | undefined
+    margin: Spacing | undefined
+    color: Color | undefined
+    alignment: Alignment | undefined
+    decoration: BoxDecoration | undefined
+    size: SizeValue | undefined
+    onclick: ((...args: any[]) => void) | undefined
+
+    constructor(opts?: CellOptions)
+
+    static Styled<T extends typeof Cell>(this: T, styledOpts?: CellOptions): T
+
+    sub(pattern: any, cb: (cell: this, data: any) => void): void
+
+    _render(): this
+    render(opts?: Record<string, any>): void
+    destroy(): void
+    register(cellery: Cellery): void // lunte-disable-line
+  }
+
+  export interface ContainerOptions extends CellOptions {
+    scroll?: string
+    flex?: string
+  }
+
+  export class Container extends Cell {
+    static ScrollAll: 'all'
+    static ScrollVertical: 'vertical'
+    static ScrollHorizontal: 'horizontal'
+    static ScrollNone: 'none'
+    static FlexAuto: 'auto'
+    static FlexNone: 'none'
+
+    scroll: string
+    flex: string
+
+    constructor(opts?: ContainerOptions) // lunte-disable-line
+  }
+
+  export class App extends Cell {
+    constructor(opts?: Omit<CellOptions, 'id'>) // lunte-disable-line
+  }
+
+  export interface TextOptions extends CellOptions {
+    value?: string
+  }
+
+  export class Text extends Cell {
+    value: string
+
+    constructor(opts?: TextOptions) // lunte-disable-line
+  }
+
+  export class Paragraph extends Cell {
+    constructor(opts?: CellOptions) // lunte-disable-line
+  }
+
+  export interface InputOptions extends CellOptions {
+    multiline?: boolean
+    placeholder?: string
+    type?: string
+  }
+
+  export class Input extends Cell {
+    multiline: boolean
+    placeholder: string | undefined
+    type: string
+
+    constructor(opts?: InputOptions) // lunte-disable-line
+  }
+
+  // --- Adapter ---
+
+  export interface Adapter {
+    render(cell: Cell): any
+  }
+
+  // --- Cellery ---
+
+  export class Cellery extends Iambus {
+    app: App
+    adapter: Adapter
+
+    constructor(app: App, adapter: Adapter) // lunte-disable-line
+
+    write(data: any): void
+    on(type: string, cb: (...args: any[]) => void): void
+    emit(type: string, stream: any): void
+    render(): void
+  }
+}

package/lib/cellery.js

@@ -1,4 +1,5 @@
 const Iambus = require('iambus')
+const { Cell } = require('./cells')
 
 class Cellery extends Iambus {
   constructor(app, adapter) {
@@ -6,6 +7,7 @@ class Cellery extends Iambus {
     this.app = app
     this.adapter = adapter
 
+    Cell.cellery = this
     this.app.register(this)
   }
 

package/lib/cells.js

@@ -2,24 +2,44 @@ class Cell {
   constructor(opts = {}) {
     this.id = opts.id
     this.children = opts.children || []
-    this.cellery = opts.cellery
+    this.cellery = opts.cellery || Cell.cellery
     this.padding = opts.padding
     this.margin = opts.margin
     this.color = opts.color
     this.alignment = opts.alignment
     this.decoration = opts.decoration
     this.size = opts.size
+    this.onclick = opts.onclick
+  }
+
+  static Styled(styledOpts = {}) {
+    const Parent = this
+    return class extends Parent {
+      constructor(opts = {}) {
+        super({ ...styledOpts, ...opts })
+      }
+    }
   }
 
   sub(pattern, cb) {
     this.cellery.sub(pattern).on('data', (d) => cb(this, d))
   }
 
+  _render() {
+    // impl
+    return this
+  }
+
   render(opts = {}) {
+    const cell = this._render()
+    if (!cell.cellery) {
+      cell.register(this.cellery)
+    }
+
     this.cellery.pub({
       event: 'render',
-      id: this.id,
-      content: this.cellery.adapter.render(this),
+      id: cell.id,
+      content: this.cellery.adapter.render(cell),
       ...opts
     })
   }
@@ -40,27 +60,6 @@ class Cell {
   }
 }
 
-class MultiCell {
-  constructor(opts = {}) {
-    this.id = opts.id
-    this.cellery = opts.cellery
-  }
-
-  sub(pattern, cb) {
-    this.cellery.sub(pattern).on('data', (d) => cb(this, d))
-  }
-
-  _render() {
-    // impl
-  }
-
-  render(opts = {}) {
-    const cell = this._render()
-    cell.register(this.cellery)
-    cell.render(opts)
-  }
-}
-
 class Container extends Cell {
   // TODO: replace with classes
   static ScrollAll = 'all'
@@ -107,7 +106,6 @@ class Input extends Cell {
 
 module.exports = {
   Cell,
-  MultiCell,
   Container,
   App,
   Text,

package/lib/decorations.js

@@ -62,7 +62,7 @@ class Color {
   }
 
   toString() {
-    return `Color(${Object.entries(this).map(([k, v]) => `${k}: ${v}`)})`
+    return `Color(${Object.entries(this).map(([k, v]) => `${k}:${v}`)})`
   }
 
   toRGBA() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cellery",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "cellery",
   "exports": {
     "./package": "./package.json",
@@ -24,7 +24,7 @@
   },
   "scripts": {
     "format": "prettier . --write",
-    "test": "prettier . --check && lunte && brittle-bare test/index.js",
+    "test": "prettier . --check && lunte && brittle-bare test/all.js",
     "lint": "lunte"
   },
   "repository": {