Alauda UI

Internal Angular UI framework for Alauda Frontend Team.

TOC

• Online Demo
• Getting Started
  • Install
  • Project Config
  • Usage
• Development
• Test
• Build Storybook
• Build Library
• Incremental Builds
  • Parameter
  • Config File
• Read More
• LICENCE

Online Demo

Storybook Demo

Getting Started

Install

# npm
npm i @alauda/ui

# yarn
yarn add @alauda/ui

and also need to confirm the peer dependencies have been installed

yarn add dayjs @angular/cdk

Project Config

// tsconfig.json
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    ...
  },
  ...
}

Usage

import { ButtonModule } from '@alauda/ui';

@NgModule({
  imports: [ButtonModule],
})
export class AppModule {}

Development

git clone https://github.com/alauda/alauda-ui.git
cd alauda-ui
yarn install
yarn start

开发环境基于 Storybook 运行，查看 文档。

Test

yarn test

or

yarn test:watch

Build Storybook

yarn storybook:build

Build Library

yarn build

Incremental Builds

Develop and debug UI component libraries quickly and efficiently by incremental builds

Parameter

yarn build:watch

Also can copy a dist to another project to debug

yarn build:watch <project_path>

In this way, after every incremental build completed, dist will be copied to node_modules which in specified project

Config File

In order to incremental build dist to your project directly instead of adding parameter to specify project path every time, can use your own ng-package.json by

npm run debug

Edit you own build config by adding a new file called ng-package.debug.json, like

// ng-package.debug.json
{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "dest": "/home/alauda/projects/<target_project_path>/node_modules/@alauda/ui",
  "lib": {
    "entryFile": "./src/index.ts"
  }
}

Read More

• coding standards
• contributing
• AOT notes

LICENCE

MIT © Alauda