@citydev/ui-library v0.9.0
Introduction
To provide a consistent and standard UI design, a new standalone UI library package @citydev/ui-library is extracted and updated from the previous esb-ui-web in buildings project. Together with the storybook, you can refer for UI layout, API interface, and basic use cases. Please follow the steps below to proceed with library migration or adoption.
Usage
- Create .npmrc file in the root directory with content
@citydev:registry= http://npm.envisioncn.com:7001/
- install @citydev/ui-library
yarn add @citydev/ui-library
- update import path from esb-ui-web to @citydev/ui-library in your project in either way of below
import { Button } from '@citydev/ui-library';
import Button from '@citydev/ui-library/lib/components/Button';
- import the default theme on the top level of the application
import * as React from 'react';
import DemoPage from './pages/DemoPage';
import { theme } from '@citydev/ui-library/lib/theme.css';
function App() {
React.useLayoutEffect(() => {
document.body.classList.add(theme);
return () => {
document.body.classList.remove(theme);
};
}, []);
return <DemoPage />;
}
export default App;
Update webpack config file For multirepo project, just update in webpack config in the root directory. For monorepo project, update webpack config inside those modules that dependent on @citydev/ui-library
Vanilla-extract is used in our library. To let the predefined style work properly, webpack config needs to update. To setup vanilla-extract, please follow
vanilla-extract setup
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [new VanillaExtractPlugin(), new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
use: [
MiniCssExtractPlugin.loader,
{
loader: require.resolve('css-loader'),
options: {
url: false, // Required as image imports should be handled via JS/TS import statements
},
},
],
},
],
},
};
Vanilla-extract let developers write styles locally in TypeScript file and generate static CSS files at build time. When import @citydev/ui-library, we need to include @citydev/ui-library in js/jsx file that @vanilla-extract/babel-plugin can process the compiled css.js.
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
inputSourceMap: true,
sourceMaps: 'inline',
presets: [
["@babel/preset-env", { targets: "last 2 versions" }],
["@babel/preset-react"],
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
'@vanilla-extract/babel-plugin',
],
},
},
include: [path.resolve(__dirname, "src")],
exclude: /node_modules(?!\/@citydev\/ui-library)/,
}
- Run tsc command to check errors and fix them according to components' API interface update
tsc -p tsconfig.json
- Now you can build and run you project. Once successful, you can remove the dependencies on esb-ui-web
Storybook
You can visit storybook
to view components demo and docs (still in progress to cover more)
demo
12 months ago