Skip to content

A lightweight material component library powered by destam and destam-dom.

License

Notifications You must be signed in to change notification settings

torrinworx/destamatic-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Destamatic UI

A lightweight component library powered by destam and destam-dom.


Destamatic UI is a simple ui library built on the delta state management library destam and dom manipulation library destam-dom. The base set of components take insperation from MUI and the base HTML tags, with some ease-of-use built in.

Install

npm i destamatic-ui

Notes

destam and destam-dom are both required to run this library.

Optional libraries:

  • prismjs - Adds language specific syntax highlighting for CodeBlock component.
  • Feather - Icon library used in with the Icon component
  • Material Icons - Icon library used with the Icon component

Demo

You can install and run the demo with the following steps:

  1. Clone the library:
git clone https://github.com/torrinworx/destamatic-ui.git
  1. Install dependencies:
npm i
  1. Run the demo:
npm start

This will start the webpack dev server on localhost:3000, this has a small demo page showing off some of the capabilities of the components currently available.

TODO:

list of html Input components to wrap (https://www.w3schools.com/html/html_form_input_types.asp):

  • Button - [x]
  • Checkbox - [X]
  • Color - [ ]
  • DateTime (local) - [ ] - Make single Date component where you can enable either time, date + time, or date.
  • File - [ ] - use current Button component, tags so that this can have children
  • Radio - [x]
  • Range - [ ]

Features to add to standard text input:

  • Tel - [ ] - simple built in phone number validation
  • Email - [ ] simple built in email validation

list of other html tags to wrap possibly:

list of other components to make from material ui:

  • Grid?