Repository files navigation

React component library for Alethio apps.

NOTICE: The master branch hosts the latest development version (v2.x). For the legacy 1.x version, please see thev1 branch.

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

1. npm i @alethio/ui
2. Copy thepublic/css andpublic/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:

import*asReactfrom"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";classAppextendsReact.Component{privatetheme=createTheme(createPalette());render(){return<ThemeProvidertheme={this.theme}>{/* ... stuff ... */}</ThemeProvider>}}

The library uses react-uid to generate some unique IDs for svg icon markup. For SSR to work properly, you will need to include theUIDReset component at the root of you app component.

Server:

import{UIDReset}from"@alethio/ui/lib/uid/UIDReset";// ...ReactDOM.renderToString(<UIDReset><App/></UIDReset>));

Client:

import{UIDReset}from"@alethio/ui/lib/uid/UIDReset";//..ReactDOM.render(<UIDReset><App/></UIDReset>)

You can also importUIDConsumer component for general use in your app. TheUIDReset component is only needed for SSR. The main difference between these components and the components found inreact-uid is that they work when multiple instances of the library are imported (e.g. multiple applications/plugins running on the same page)

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

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

You can see the components in actionhere.

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

📁├─📁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

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 typedITheme interface.

import*asstyledfrom"@alethio/ui/lib/styled-components";constMyLinkComponent=styled.div`    color:${props=>props.theme.colors.link};`;

Original SVG sources should be kept in thedev/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 viasize prop
5. Replace the main fill/stroke color withcurrentColor, 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

1. Make sure you are a maintainer and you are on an up-to-date master branch.
2. Updatenode_modules (npm i).
3. Update & commit the CHANGELOG.MD by adding an entry for the desired version
4. npm version prerelease
5. git push
6. git push --tags --no-verify
7. npm publish --tag next