https://web.tui/resources/storybook/
nvm use
npm i
npm run dev
This will spin up:
- storybook: http://localhost:6006/
Installation
To install the latest stable version:
npm install @tui/ui-library or yarn add @tui/ui-library
To install the next major version (be aware it might contain untested features):
npm install @tui/ui-library@next or yarn add @tui/ui-library@next
Themes
Theme files provide some global variables that are needed by the components in order to adhere to the theme guidelines (colors, spacing, etc.). TUI is the only available theme at the moment.
In dist/themes/<<themename>>/, you will find the theme file style.css as well as other global stylesheets. For example, for the TUI theme you could import in your .js files:
import '@tui/ui-library/dist/themes/tui/tui.css';
import '@tui/ui-library/dist/themes/tui/fontface.css';Themes variables are declared within the "data-theme" attribute selector, so you will need to add it on either the host page html tag or your MFE:
<html data-theme="tui">
<!--or-->
<my-custom-mfe data-theme="tui">
<!--or-->
<div data-theme="tui"></div
></my-custom-mfe>
</html>You can also clone this repository, install the dependencies and use npm run dev to run a local server where to check the example templates for the components, how themes are generated, the original unprocessed stylesheets (post processed with postcss-preset-env), etc.
Please check the contributing document
- [x] migration to scss
- [ ] snapshot testing
- [x] documentation
- [x] global variables splitting
Please check the migration document