valiot-ui

Next-gen Framework with core components for Valiot Apps (React + Typescript)

Current Valiot UI components

• LayoutGrid
• Button

ROADMAP

Current Valiot Framework components:

Containers:

• DONE - LayoutGrid
• LayoutFlex - on framework
• GridItem - on framework
• FlexItem - on framework
• Card - on framework
• FoldableCard - merge with Card component
• SideMenu - on project (see orz-front)
• Overlay - (To superset additional content to another component, primitive for modal / floating buttons, notifs, etc)
• Modal - on project (see ret-leon)
• TabContainer - (Multiple screens/steps, might be related to Breadcrumbs)

Content:

• EmptyBox - on framework
• TextItem - on project (see zed-front)
• Tooltip - (To provide additional information on other components)
• Bullet - (TextItem left-hand marker, might be used as status indicator)
• Spacer - on project (see orz-front) TODO: horizontal / vertical
• Title - on framework
• Icon - on framework
• SectionHeader - on framework
• Page - on framework
  • HeaderProgressBar - To be included as part of "Page" component over the Header (See: Github / Jira loading)
• Table Evaluate porting or using another react table
• JsonTable - on framework

Actions:

• DONE - Button
• ButtonPrimary - on framework, might add for backward-compatibility
• ButtonSecondary - on framework, might add for backward-compatibility
• ButtonGhost - on framework, might add for backward-compatibility
• ButtonGroup - on framework
• Link - (Redirect text For use on any screen)
• Breadcrumbs

Inputs:

• Input - on framework (? works with passwords?)
• InputDate - on framework
• Select - on framework TODO: make labels any react component (Ej: text w/checkbox)
• MultiSelect - on project (see orz-front)
• TextArea - on framework
• Checkbox - on framework TODO: size prop (similar to space)
• RadioButton
• Toggle
• InlineEdit - on framework

Status:

• Loader - on framework
• LoaderWrapper - on framework
• Tag - on framework **TODO: color (style) and size props **
• Alerts - on framework
• FlashAlerts - on framework, move to hooks (see: createFlashAlert)
• NotificationBin - on framework
• ProgressBar - (Both vertical and horizontal)
• StatusLabel - (A TextItem with status prop)
• NestThermostat - (Circular temperature/sensor gauge)
• SpeedGauge - (Circular speed gauge)
• DiameterGauge - (Circular concentric circles gauge)

Charts

• Timeline - on project (see orz-front)
• ChartLines - on project (see roa-front)
• ChartSimpleBar - ?
• ChartStatusBar - (Multiple progressBars with status prop)
• TODO: Check needs for other charts or containers (EliotCard, MiniChartCard...)

Screens

• Sidebar - on framework (TODO: Fix responsiveness, make scrollable, hide)
• SidebarNavItem - on framework (TODO: responsiveness + dropdown color)
• Login - on framework
• Permissions - on valiot-template-front

Dash builder

• DynamicComponent May be redundant with React.createComponent

Hooks and utility functions:

• useLocalStorageState - on project (see roa-front)
• useLazyJob - on project (see orz-front)
• useUserWithGroups - on project (see roa-front)
• logout fn - on valiot-utility-functions
• createFlashAlert fn - on valiot-utility-functions
• DEPRECATE valiot-utility-functions