@alfaomegasoftware/standard-ui v0.3.0-alpha.0

AlfaOmega Software Standard UI

A collection of components for standard UI use. The main idea behind this project is to create a standard library to be used in all of my projects to provide a consistent and extendable UI across all web sites. So be free to use it just for testing purposes, in your own projects or just for fun!.

Common (non-databound)

• ActionButton: customizable button with label, icon (built-in SVG icon or a custom image link) and icon-position prop
• Badge: shows a circle with a number between 1 and 99 or simply a circle in the top right of a component.
• Chip: chips to identify categories
• ErrorInfo: shows errors from a string or an array of strings (intended to be used primarily with databound components for validation purposes)
• ImageLoader: shows a progress indicator until the image is fully loaded.
• ListView: a list of items shown as icons or a list
• NotificationRibbon: a ribbon to indicate a success, critical, warning or info information to the user.
• StatusBar: a single bar to display information about menus, hovering items, etc.
• SVGIcon: an SVG icon identified by a name (trash, add, menu, etc.)
• TreeView: a list of items from a tree structure.
• TreeViewNode: a tree root node that can contain other nodes
• MenuBar: a horizontal bar with nested subitems.
• FloatingMenu: a floating menu with nested subitems.
• CircularProgressIndicator: a spinning progress indicator with an optional label.

Common (databound)

Components that can be bound to any object and a property, updating it dinamically. Handles null values throught a MVVM (Model-view View-Model) transform.

For use with forms or any object

• CheckBox: a three state checkbox (true, false and null but can be mapped to other values if needed)
• LookupComboBox: a combobox that has two data sources, one for databound (read/write) and other to display items. The items are displayed using a select element.
• RadioButtonGroup: similar to combobox but displays items using radio buttons.
• SlideInput: a simple slider for numeric values.
• TextBox: a textbox with free text editing and automatic casing.
• MaskedTextBox: a textbox with mask capabilities.

For use with multiple data

• DataGrid: displays a grid of items that is selectable. Provides a way to decide which columns to show when using in viewports with different @media sizes.
• DataTable: displays a table of items that is selectable.

Containers

Containers are components that can hold and arrange another components in different ways.

• AccordionPanel: a panel with slide down/up animation to hide or display content.
• Drawer: a drawer or panel that can appear from the left, top, right or bottom.
• GroupBox: a box with a label in the upper left corner.
• SplitView: a view that is horizontally or vertically splitted in half and resizable.
• TabContainer: scrollable multiple tabs to display different content on each tab panel.

Dialogs

Dialogs are windows that can be openned by calling an exposed function. That function is async and returns a promise that can be awaited until an answer (even null) is given.

• MessageDialog: provides a fast way to display a message to the user that doesn't need answer.
• ConfirmDialog: provides a fast way to display a confirmation message to the user and expects an answer via the value assigned to the buttons.

Base components

These are components used internally by others.

• DialogBase: provides all the functions needed by any dialog (open and close)
• ModalLayer: transitions into a layer that covers the whole screen allowing to display content and blocking interaction with the content behing that layer.
• ResponsiveRuler: provides a simple way to show when entering/leaving different screen widths testing responsiveness

Developer notes

• All CSS styles use Tailwind CSS and are prefixed with ao-sui-tw-

Changelog

0.3.0-alpha.0

• Enhanced styling

  • Added new styles (better tested)
  • Added variant for indeterminate state of checkbox (fixed style)
  • Merging utils for styles changed namespace

• RadioButtonGroup: fixed vertical alignment

• ImageLoader: fixed not showing loader when changing src prop

• StatusBar: moved to containers

• Changed utility namespaces and redistributed functions

• Created documentation web site (available at AlfaOmega Software Documentation)

0.2.5-alpha.0

• Adopted well defined architecture for data handling, styling, documentation and testing of components.
• Added many new components
  • Common(non databound): ActionButton, Badge,Chip, ErrorInfo, ImageLoader, ListView, NotificationRibbon, StatusBar, SVGIcon, TreeView, MenuBar, FloatingMenu
  • Common (databound): CheckBox, LookupComboBox, RadioButtonGroup, SlideInput, TextBox, MaskedTextBox
  • Containers: AccordionPanel, Drawer, GroupBox, SplitView, TabContainer
  • Dialogs: MessageDialog, ConfirmDialog
  • Base: DialogBase, ModalLayer

0.0.6-alpha.0

• Initial release
• First components and inital architecture design