- Notifications
You must be signed in to change notification settings - Fork4
React component library for Alethio apps
License
Alethio/ui
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
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
npm i @alethio/ui
- Copy the
public/css
andpublic/fonts
folders into your root app folder and import the CSS files in your index.html. - 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.
npm install
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:
- 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 viasize
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
- Make sure you are a maintainer and you are on an up-to-date master branch.
- Update
node_modules
(npm i). - Update & commit the CHANGELOG.MD by adding an entry for the desired version
npm version prerelease
git push
git push --tags --no-verify
npm publish --tag next
About
React component library for Alethio apps