Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
/uiPublic

React component library for Alethio apps

License

NotificationsYou must be signed in to change notification settings

Alethio/ui

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.

Prerequisites

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

Installation

  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>}}

Server-side rendering

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)

Usage

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.

Playground

You can see the components in actionhere.

Development

  1. npm install
  2. npm run build for minified build ornpm 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 typedITheme interface.

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

Managing SVG icons

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

Release process

  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

About

React component library for Alethio apps

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages


[8]ページ先頭

©2009-2025 Movatter.jp