# @alethio/ui

> Alethio React component library

Latest version **1.1.1** (published 2020-02-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alethio/ui
pnpm add @alethio/ui
yarn add @alethio/ui
bun add @alethio/ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2020-02-10 |
| First published | 2019-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 3.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Alexandru Ciuca |
| Maintainers | adrian.sabau, alextz, cip13, mirceaulmeanu, usestrict, valercara |

## Links

- npm: https://www.npmjs.com/package/@alethio/ui
- Repository: https://github.com/Alethio/ui
- Homepage: https://aleth.io
- Issues: https://github.com/Alethio/ui/issues
- npm.io page: https://npm.io/package/@alethio/ui

## Dependencies (5)

- [@puzzl/core](https://npm.io/package/@puzzl/core.md) ^1.0.0-beta.1
- [react-popper](https://npm.io/package/react-popper.md) ^1.0.2
- [@puzzl/browser](https://npm.io/package/@puzzl/browser.md) ^1.0.0-beta.1
- [datetime-difference](https://npm.io/package/datetime-difference.md) ^1.0.1
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.4.0

## Recent versions

- 1.1.1 (latest) — 2020-02-10
- 2.0.0-beta.0 (next) — 2020-04-29
- 2.0.0-dev.17 — 2020-04-03
- 2.0.0-dev.16 — 2020-03-24
- 2.0.0-dev.15 — 2020-03-18
- 2.0.0-dev.14 — 2020-03-17
- 2.0.0-dev.13 — 2020-03-04
- 2.0.0-dev.12 — 2020-02-28
- 2.0.0-dev.11 — 2020-02-26
- 2.0.0-dev.10 — 2020-02-24
- 2.0.0-dev.9 — 2020-02-10
- 1.1.0 — 2020-02-06
- 2.0.0-dev.8 — 2020-02-05
- 2.0.0-dev.7 — 2020-01-22
- 2.0.0-dev.6 — 2020-01-22
- … 22 more at https://npm.io/package/@alethio/ui/versions

## README

# @alethio/ui

React component library for Alethio apps

## Prerequisites

- Node 8+ for development
- ES2015+ compliant browser for runtime

## Installation

1. `npm i @alethio/ui`
2. Copy the `public/css` and `public/fonts` folders into your root app folder and import the CSS files in your index.html.
3. In your root App component, create a theme and pass it to styled-components provider:

```tsx
import * as React from "react";
import { ThemeProvider } from "@alethio/ui/lib/styled-components";
import { createPalette } from "@alethio/ui/lib/theme/createPalette";
import { createTheme } from "@alethio/ui/lib/theme/createTheme";

class App extends React.Component {
    private theme = createTheme(createPalette());

    render() {
        return <ThemeProvider theme={this.theme}>
            { /* ... stuff ... */ }
        </ThemeProvider>
    }
}
```

## Usage

Just import any component with `import { ... } from "@alethio/ui/lib/path/to/Component"`.

**NOTE**: Internal components are marked as `@internal` and/or are placed in `internal/` sub-folders. Never use them directly in production.

## Playground

You can see the components in action [here](https://alethio.github.io/ui).

## Development

1. `npm install`
2. `npm run build` for minified build or `npm run watch` for incremental development/debug build.

## Project structure
```
📁
├─📁lib            - target folder that contains built/transpiled components
├─📁public         - static assets (css and fonts) that should be served by the consumer app
└─📁src            - source files
  ├─📁control      - UI controls / widgets
  ├─📁data         - components for displaying and formatting various types of data
  ├─📁fx           - Effects and animations
  ├─📁icon         - icon components (SVG or icon font wrappers)
  └─📁layout       - components for layout / arrangement
```

## Theming

The library uses a styled-component theme, which you can directly access in your styled components. If using TypeScript, we also provide e re-export of styled-components library (which is a peer dependency) that uses a typed [ITheme](./src/theme/ITheme.ts) interface.

```ts
import * as styled from "@alethio/ui/lib/styled-components";

const MyLinkComponent = styled.div`
    color: ${props => props.theme.colors.link};
`;
```

## 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:

1. Copy the SVG markup in the render method of a new React component
2. Replace all dash (-) attributes with camelCase
3. Remove any unneeded attributes or run the SVG through an optimizer tool
4. 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
5. Replace the main fill/stroke color with `currentColor`, to ensure proper cascading, or parametrize if more than one color
6. The resulting component should be configured with a size prop that applies to both width and height

---
_Source: https://npm.io/package/@alethio/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._