[UI] Input

[fionataeyang]

@todo

• implement first iteration of component
  • create repository
  • set up local dev environment with pnpm
    • pnpm link the modules locally
      • pnpm link --global (to make them available)
      • pnpm link --global <./package.json#name>
  • @output 📦 repository
• refactor component for last Fiona's commit and tag it with v0.0.0-alpha
  • @input 📦 repository
  • refactor commit with latest terminal/log to use versions
  • move terminal/logs to dev dependencies
  • rebase main branch on top of taged version
  • update package.json (new path for the dependencies)
  • @output 📦 v0.0.0-alpha
• refactor component latest commit with new comm protocol and tag with v0.0.1-alpha
  • @input 📦 v0.0.0-alpha
  • refactor latest commit with latest terminal/log to use versions
  • refactor communication protocol to use latest message standard
  • move terminal/logs to dev dependencies
  • rebase main branch on top of taged version
  • update package.json (new path for the dependencies)
  • update github page links
  • build new bundle.js to include changes in demo page
  • support theme
  • @output 📦 v0.0.1-alpha
    • next [UI] Input-text #242
    • next [UI] Input-number #243
    • next [UI] Checkbox #244
    • next [UI] Range slider #11

---

@info

Repo 📂

https://github.com/datdotorg/datdot-ui-input

Notes

(by @fionataeyang)

• It is a bit complicated widget for many types of input, like text, number, textarea, slide range, checkbox, radio
• Text input is part of form when it needs to fill field information like create new account form user - add new account - create new account #32 , transfer user - transfer #41 , import account form user-add-new-account-import-account #33, edit account user - edit account #40, search [UI] Search-autocomplete #99, plan name #103
• Number input is part of form when it needs to fill field information like transfer user - transfer #41, and also it needs to support increment and decrement that is something haven't thought yet when did UI design.
  And also have to support calculation for big number which is we don't use any 3rd dependence to help calculation with big number, like balance, transfer and transaction would be using it.
  Thus, this is big matter to whole app that user and our platform all care.
• Checkbox is part of form that it is using on set time, set repeat, custom days. And also it has to support custom checkbox via SVG icon and theme
• Radio is part of form. It can support custom radio via SVG icon and theme
• Should we use a custom element via div instead of text area? We've been used it on smarcontract.codes for search code snippets. Or let user can choose use native text area or custom area?
• Password is very important with account security. No plan yet.

Type

Text

Textarea

---

Number

Checkbox

SET repeat

Unchecked

Checked
By Everyday

By Weekday

By Every week

By Every first

SET time

Unchecked

Checked

[serapath]

@ninabreznik
worklog 2022.04.07 - locking UI elements

Notes:

• v.0.0.1-alpha: ui elements, updated to use new comm protocol

Results:

v0.0.1-alpha (using new comm proto)

• https://github.com/datdot-ui/input/tree/v0.0.1-alpha

[serapath]

@ninabreznik
worklog 2022.04.12 - versioning and documenting components

results:

• v0.0.1-alpha
  • https://github.com/datdot-ui/input/tree/v0.0.1-alpha
• v0.0.0-alpha
  • https://github.com/datdot-ui/input/tree/v0.0.0-alpha
• updated readme
  • https://github.com/datdot-ui/input

[ninabreznik]

[datdot ui worklog] working on v0.0.2-alpha Apr 18, 2022

results:

• v0.0.2
  • https://github.com/datdot-ui/input-number/tree/v0.0.2-alpha
  • https://github.com/datdot-ui/input-text/tree/v0.0.2-alpha
  • https://github.com/datdot-ui/checkbox/tree/v0.0.2-alpha