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

1. Create .npmrc file in the root directory with content

    @citydev:registry= http://npm.envisioncn.com:7001/

2. install @citydev/ui-library

    yarn add @citydev/ui-library

3. 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';

4. 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;

5. 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)/,
      }

6. Run tsc command to check errors and fix them according to components' API interface update

    tsc -p tsconfig.json

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