Fei-system NPM

fei system

fei components Get Start

Download

npm installを実施。

npm install fei-system
npm install bootstrap

Module Import

app.module(適宜変更)でFeiComponentsModuleをImport。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { FeiComponentsModule } from 'fei-system'; // 追記

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FeiComponentsModule // 追記
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

GlobalStyleの取り込み

angular.jsonのassetsとstylesにfei componentsで利用するassetsとglobal styleを取り込む

  "assets": [
      "...",
      { "glob": "**/*", "input": "node_modules/fei-system/projects/fei-components/src/assets/", "output": "/assets/"}
  ],
  "styles": [
    "...",
    "node_modules/fei-system/projects/fei-components/src/scss/00-styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap-grid.min.css"
  ],

@angularパスを明示的に指定

tsconfig.jsonのpathsに下記を追記し、利用されるangularを明示的に指定する。

"paths": {
  "@angular/*": ["node_modules/@angular/*"]
}

ImportしたNgModuleの管理下でfei componentsを利用

ここまで実施すると、fei componentsが利用できるようになる。

<fei-button></fei-button>

fei components Storybookの取り込み

Storybook Setup

Storyboo for Angularを参考に、Storybookのsetupを行う。

Download

npm installを実施。

npm install @storybook/addon-actions --save-dev
npm install @storybook/addon-knobs --save-dev
npm install @storybook/addon-links --save-dev

addons.jsの作成

.storybook/addons.jsを作成する

import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-links/register';

config.jsの変更

config.jsを編集し、fei componentsのstoryファイルを取り込み対象にする。

import { configure } from '@storybook/angular';

function loadStories() {
  const req = require.context('../stories', true, /\.stories\.ts$/);
  req.keys().forEach(filename => req2(filename));

  const feiReq = require.context('../node_modules/fei-system/stories', true, /\.stories\.ts$/); // 追記
  feiReq.keys().forEach(filename => feiReq(filename)); // 追記
}
configure(loadStories, module);