如何将故事书V7与离子框架和角度使用

Storybook是一种工具，可帮助您隔离开发和测试UI组件。它可以与任何框架一起使用，但特别适合角度应用。在此博客文章中，我们将向您展示如何设置Storybook版本7与Ionic Framework and Angular合作。

本博客文章假设您已经创建了您的离子框架角度项目。请参阅相关视频涵盖此博客文章here on YouTube

设置

在您的项目目录中运行下面的命令以在您的项目中设置故事书

npx storybook@latest init

现在，我们需要在项目根目录中修改angular.json文件，以在项目书中为您的故事书故事创建的项目中包括资产，样式和离子图标。

"storybook": {
  "builder": "@storybook/angular:start-storybook",
  "options": {
    "configDir": ".storybook",
    "browserTarget": "app:build",
    "compodoc": false,
    "port": 6006,
    "assets": [
      {
        "glob": "**/*",
        "input": "src/assets",
        "output": "assets"
      },
      {
        "glob": "**/*.svg",
        "input": "node_modules/ionicons/dist/ionicons/svg",
        "output": "./svg"
      }
    ],
    "styles": [
      "src/theme/variables.scss",
      "src/global.scss"
    ]
  }
},

成员卡组件

在my sample project中，我有一个称为MemberCard的组件，我想为组件模板的代码创建一个故事

<div>
  <ion-card>
    <ion-card-header>
      <ion-card-title>{{ memberInfo?.name }}</ion-card-title>
      <ion-card-subtitle>
        <span *ngIf="memberInfo?.companyName">{{ memberInfo?.companyName }} : </span>
        {{ memberInfo?.title }}
        </ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <div>{{ memberInfo?.bio }}</div>
      <ion-item lines="none" class="ion-float-right">
        <ion-button
          *ngIf="memberInfo?.linkedIn"
          (click)="
            onClick.emit({
              event: 'social-clicked',
              value: memberInfo?.linkedIn
            })
          "
          ><ion-icon icon="logo-linkedin" slot="start"></ion-icon
          >LinkedIn</ion-button
        >
        <ion-button
          *ngIf="memberInfo?.twitter"
          (click)="
            onClick.emit({
              event: 'social-clicked',
              value: memberInfo?.twitter
            })
          "
          ><ion-icon icon="logo-twitter" slot="start"></ion-icon
          >Twitter</ion-button
        >
        <ion-button
          *ngIf="memberInfo?.website"
          (click)="
            onClick.emit({
              event: 'social-clicked',
              value: memberInfo?.website
            })
          "
          ><ion-icon icon="globe" slot="start"></ion-icon>Web Site</ion-button
        >
      </ion-item>
    </ion-card-content>
  </ion-card>
</div>

这是组件的代码

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { globe as globeIcon } from 'ionicons/icons';

export interface MemberInfo {
  name: string;
  title: string;
  companyName?: string;
  bio: string;
  twitter?: string;
  linkedIn?: string;
  website?: string;
}
@Component({
  selector: 'app-member-card',
  templateUrl: './member-card.component.html',
  styleUrls: ['./member-card.component.scss'],
})
export class MemberCardComponent implements OnInit {
  @Input() memberInfo!: MemberInfo;
  @Output()
  onClick = new EventEmitter<{ event: string; value: string | undefined }>();

  constructor() {}

  ngOnInit() {}
}

成员的故事

我通过复制样本Button.story并进行适当的修改来创建我的故事。您可以在src\stories目录中找到项目的故事。

首先，您需要导入组件，然后支持模块

import { MemberCardComponent } from 'src/app/member-card/member-card.component';
import { IonicModule } from '@ionic/angular';
import { importProvidersFrom } from '@angular/core';

然后，您需要使用导入的组件来设置故事。

title已设置为设置，因此它将创建一个层次结构，其中Toplevel是项目和新故事MemberCardComponent作为项目的孩子
component是组件MemberCardComponent的名称
render将args的类型设置为您的组件，这确保了您的组件中的属性在渲染时传递给故事
argTypes-用户单击社交媒体按钮

MemberCardComponent

onClick

decorators属性是decorators的数组，它将包裹故事。

applicationConfig是我们导入故事所需模块的地方。
moduleMetadata支持组件所需的其他模块信息
componentWrapperDecorator包装了组件的渲染。在这种情况下，我将组件包装在IonApp元素中

const meta: Meta<MemberCardComponent> = {
  title: 'Project/MemberCardComponent',
  component: MemberCardComponent,
  tags: ['autodocs'],
  render: (args: MemberCardComponent) => ({
    props: {
      ...args,
    },
  }),
  argTypes: { onClick: { action: 'clicked' } },
  decorators: [
    applicationConfig({
      providers: [importProvidersFrom([IonicModule.forRoot()])],
    }),
    moduleMetadata({
      declarations: [MemberCardComponent],
    }),
    componentWrapperDecorator((story) => `<ion-app>${story}</ion-app>`),
  ],
};

对于实际故事，您要做的就是为每个故事创建一个export，命名并通过适当的论点。这是一个故事的示例

export const Primary: Story = {
  args: {
    memberInfo: {
      name: 'Aaron Saunders',
      title: 'CEO',
      bio: 'Amazing Experience',
      companyName: 'Clearly Innovative Inc',
      linkedIn: 'Clearly Innovative Inc',
      twitter: 'https://twitter.com/aaronksaunders',
      website: 'www.clearlyinnovative.com',
    },
  },
};

查看丢失社交媒体属性时的组件UI是如何渲染的，我们有这个名为MissingSocial的故事，您可以看到下面的代码

export const MissingSocial: Story = {
  args: {
    memberInfo: {
      name: 'Aaron Saunders',
      title: 'CEO',
      companyName: 'Clearly Innovative Inc',
      bio: 'No news',
      website: 'www.clearlyinnovative.com',
    },
  },
};

跑步的故事书

npm run storybook

结论

在这篇博客文章中，我们向您展示了如何设置Storybook版本7，以使用离子框架和Angular。我们还向您展示了如何创建故事来测试您的UI组件。

通过遵循此博客文章中的步骤，您将可以使用故事书来提高角度应用程序的质量。

视频

项目源代码

aaronksaunders / storybookv7-ionic-angular

使用故事书V7与离子框架使用的简单演示

Simple Storybook v7 Angular Ionic Integration

Simple demonstration of using storybook v7 with ionic framework

Video

https://www.youtube.com/watch?v=8rVCbD_8oDs

设置

在项目目录中

npx storybook@latest init

更改为angular.json

 “ storybook” ：{
			“ builder” ： “ Storybook “  ，
			“ options” ：{
			“ configdir” ： “  .storybook ”  ，
			“ browsertarget” ： “  app：build “  ，
			“ compodoc” ： false ，
			“ port” ： 6006 ，
			“资产” ：[
			{
			在=“ pl-pds”>“  ，
			“ input” ： “  src/assets “  ，
			在-pds“>”  
			}，，
			{
			在SPAN类=“ PL-PDS”>“  ，
			在/svg “  ，
			在“ PL-PDS”>“  
			}
			]，，
			“样式” ：[
			 “  src/them them/tream/variables.scss “  ，，
			在
			这是给出的
			}
			}，

对基本故事的具体更改，以支持Angular＆Ionic Framework

View on GitHub

请考虑signing up for our Newsletter