Package Exports

@alethio/ui/lib/control/Button
@alethio/ui/lib/control/ExternalLink
@alethio/ui/lib/control/Radio
@alethio/ui/lib/control/SelectBox
@alethio/ui/lib/data/ByteSize
@alethio/ui/lib/data/Hash
@alethio/ui/lib/data/Label
@alethio/ui/lib/data/Number
@alethio/ui/lib/data/box/HashValueBox
@alethio/ui/lib/data/gridRenderer/HashRenderer
@alethio/ui/lib/data/vis/Bubble
@alethio/ui/lib/fx/SpinnerRegular
@alethio/ui/lib/icon/GridViewIcon
@alethio/ui/lib/icon/ListViewIcon
@alethio/ui/lib/icon/MoreInfoIcon
@alethio/ui/lib/icon/MsgCountInSmallIcon
@alethio/ui/lib/icon/MsgCountOutSmallIcon
@alethio/ui/lib/icon/QrCodeIcon
@alethio/ui/lib/icon/StatusOkIcon
@alethio/ui/lib/layout/content/box/ValueBox
@alethio/ui/lib/overlay/Popover
@alethio/ui/lib/overlay/tooltip/Tooltip
@alethio/ui/lib/overlay/tooltip/TooltipRegular
@alethio/ui/lib/styled-components
@alethio/ui/lib/theme/createPalette
@alethio/ui/lib/theme/createTheme
@alethio/ui/lib/util/react/DomNodeProxy
@alethio/ui/lib/util/react/MultiHover

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@alethio/ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@alethio/ui

React component library for Alethio apps

Prerequisites

Node 8+ for development
ES2015+ compliant browser for runtime

Installation

npm i @alethio/ui
Copy files from public/css and public/fonts into your root app folder and import CSS in your index.html.
Just import any component with import { ... } from "@alethio/ui/lib/path/to/Component"

Development

npm install
npm run build for production or npm run watch for development.

Project structure

📁
├─📁lib            - target folder for application that contains deployables
├─📁public         - contains static assets that are copied to the dist folder as they are
└─📁src            - source files
  ├─📁control       - reusable ui controls and widgets
  ├─📁data          - components for displaying and formatting various types of data
  ├─📁fx            - Effects and animations
  ├─📁icon          - reusable icon components (SVG or icon font wrappers)
  └─📁layout        - components for layout / arrangement

Managing SVG icons

Original SVG sources should be kept in the dev/original-svg folder. To create SVG icon components from them, the following steps should be taken:

Copy the SVG markup in the render method of a new React component
Replace all dash (-) attributes with camelCase
Remove any unneeded attributes or run the SVG through an optimizer tool
The viewBox of the icon should be a square. If needed use <g transform="translate(x,y)"> to center the icon in the new viewBox. This allows proper sizing via size prop
Replace the main fill/stroke color with currentColor, to ensure proper cascading, or parametrize if more than one color
The resulting component should be configured with a size prop that applies to both width and height