@valiot/ui-core

React component Library for Valiot Frontend Apps

Usage no npm install needed!

<script type="module">
  import valiotUiCore from 'https://cdn.skypack.dev/@valiot/ui-core';
</script>

README

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