feat: init ledge-checklist

projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.html

@@ -0,0 +1 @@
+<p>ledge-checklist works!</p>

projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LedgeChecklistComponent } from './ledge-checklist.component';
+
+describe('LedgeChecklistComponent', () => {
+  let component: LedgeChecklistComponent;
+  let fixture: ComponentFixture<LedgeChecklistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LedgeChecklistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LedgeChecklistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { LedgeListItem } from '../model/ledge-chart.model';
+
+@Component({
+  selector: 'ledge-checklist',
+  templateUrl: './ledge-checklist.component.html',
+  styleUrls: ['./ledge-checklist.component.scss']
+})
+export class LedgeChecklistComponent implements OnInit, OnChanges {
+  @Input()
+  data: LedgeListItem[];
+
+  @Input()
+  config: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.renderData();
+  }
+
+  private renderData() {
+    console.log(this.data);
+  }
+}

projects/ledge-render/src/lib/ledge-render.component.html

@@ -62,6 +62,10 @@
       <ledge-kanban [data]="item.data" [config]="item.config"></ledge-kanban>
     </div>
 
+    <div *ngSwitchCase="'checklist'">
+      <ledge-checklist [data]="item.data" [config]="item.config"></ledge-checklist>
+    </div>
+
     <div *ngSwitchCase="'table'">
       <table>
         <thead>

projects/ledge-render/src/lib/ledge-render.component.ts

@@ -314,6 +314,14 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
           config: kanbanData.config,
         });
         break;
+      case 'checklist':
+        const checklistData = LedgeMarkdownConverter.toJson(codeBlock.text);
+        this.markdownData.push({
+          type: 'checklist',
+          data: checklistData.lists[0].children,
+          config: checklistData.config,
+        });
+        break;
       default:
         this.markdownData.push(token);
         break;

projects/ledge-render/src/lib/ledge-render.module.ts

@@ -22,6 +22,7 @@ import { LedgeKanbanComponent } from './components/ledge-kanban/ledge-kanban.com
 import { ComponentTodoComponent } from './components/component-todo/component-todo.component';
 import { ComponentChecklistComponent } from './components/component-checklist/component-checklist.component';
 import { LedgeStorageService } from './services/ledge-storage.service';
+import { LedgeChecklistComponent } from './components/ledge-checklist/ledge-checklist.component';
 
 const LedgeComponents = [
   LedgeRenderComponent,
@@ -40,6 +41,7 @@ const LedgeComponents = [
   LedgeDevProcessComponent,
   LedgeTechRadarComponent,
   LedgeKanbanComponent,
+  LedgeChecklistComponent,
 
   ComponentTodoComponent,
   ComponentChecklistComponent

src/app/presentation/checklists/checklists.component.html

@@ -21,6 +21,8 @@ <h2>业务</h2>
     <mat-tab label="敏捷实践检查清单">
       <div class="checklist-block">
         <p>来源：<a href="https://cloud.tencent.com/developer/article/1558754" target="_blank">ThoughtWorks敏捷实践关键清单</a></p>
+
+        <ledge-render [content]="agileContent"></ledge-render>
       </div>
     </mat-tab>
     <mat-tab label="DevOps 检查清单">

src/app/presentation/checklists/checklists.component.ts

@@ -7,6 +7,8 @@ import PEOPLE_CHECKLIST from './checklists/people.json';
 import DOMAIN_CHECKLIST from './checklists/domain.json';
 import { StorageMap } from '@ngx-pwa/local-storage';
 
+import * as agileMD from 'raw-loader!../../../assets/docs/checklists/agile.md';
+
 @Component({
   selector: 'app-checklists',
   templateUrl: './checklists.component.html',
@@ -18,6 +20,8 @@ export class ChecklistsComponent implements OnInit {
   peopleChecklist: any = PEOPLE_CHECKLIST;
   domainChecklist: any = DOMAIN_CHECKLIST;
 
+  agileContent = agileMD.default;
+
   selectedTabIndex = 0;
 
   constructor(private storage: StorageMap) {}

src/assets/docs/checklists/agile.md

@@ -1,35 +1,37 @@
+```checklist
 - ThoughtWorks 敏捷实践关键清单
-  - 时点 1：当获得原始需求时
-  - 用户问题还是解决方案：分辨原始需求是用户问题还是解决方案，以发现真正的用户问题
-  - 电梯演讲：描述产品的价值假设
-  - 用户画像：描述产品的用户特点
-  - 用户目标：描述产品如何让用户成为 Better Me，以吸引用户
-  - 用户问题定义：描述所识别出的用户问题
-- 时点 2：当形成问题定义时
-  - 用户体验地图：识别用户体验中的痛点
-  - 纸面原型：快速验证用户交互界面的可用性
-  - 用户故事地图：识别用户故事，以便进行软件开发
-  - 用户故事拆分：将大故事拆小，以便提升价值流动效率
-  - 用户故事验收条件：编写用户故事验收条件，以便减少返工
-- 时点 3：当产生用户故事时
-  - 故事梳理工作坊：为下一个迭代的用户故事编写验收条件，以便提升迭代计划会的效率
-  - 迭代计划会：本迭代的目标？团队承诺在本迭代完成哪些用户故事？如何才算完成？
-  - 每日站会：同步用户故事的进展和风险
-  - 价值流式开发管理：不设置迭代周期，而使用看板更灵活地管理价值流动
-  - 分支策略：尽早、频繁、小批地解决代码冲突
-  - 持续集成：尽早、频繁、小批地解决软件集成问题
-  - 暗部署：将“部署”与“发布”分离，尽早、频繁、小批地解决部署中出现的问题
-  - 敏捷度量：制定全局度量指标，以评估过程改进的成效
-  - 领域驱动设计工作坊：让开发人员和领域专家就业务领域知识和通用语言达成共识，并识别核心域，以便让软件代码与业务概念对齐
-  - 用户故事开卡：在代码编写前消除对需求的误解，大幅降低变更的成本
-- 时点 4：当为用户故事编写首行代码时
-  - 用户故事验卡“关键清单：在代码编写完成后立即检验，能大幅降低返工的成本
-  - 自动化单元测试：自动化单元测试的运行无须依赖测试环境，成本最低，速度最快
-  - 集体代码回顾：多双眼睛，多道检查；及时纠偏，又快又好；知识分享，消除瓶颈，对齐约定
-- 时点 5：当用户故事通过测试而待部署时
-  - 迭代评审会：为用户展示已完成的用户故事，获取其反馈，以便持续改进
-  - 迭代回顾会：发现改进点，形成行动项，进行持续过程改进
-  - 最大痛点改进工作坊：尽早、频繁、小批地识别“价值最大、质量最差”的最大痛点，并将其拆解，迭代地解决
-  - 改进形：教练一对一地帮助学员制定频繁和小批的改进计划，并及时回顾，循环往复，以提升学员能力
-- 时点 6：当用户故事部署上线时
-  - 验尸报告工作坊：尽早、频繁、小批地针对线上事故，回顾没有限制住的“小裂纹”，以便改进过程与系统，提升系统的稳定性
+    - 时点 1：当获得原始需求时
+      - 用户问题还是解决方案：分辨原始需求是用户问题还是解决方案，以发现真正的用户问题
+      - 电梯演讲：描述产品的价值假设
+      - 用户画像：描述产品的用户特点
+      - 用户目标：描述产品如何让用户成为 Better Me，以吸引用户
+      - 用户问题定义：描述所识别出的用户问题
+    - 时点 2：当形成问题定义时
+      - 用户体验地图：识别用户体验中的痛点
+      - 纸面原型：快速验证用户交互界面的可用性
+      - 用户故事地图：识别用户故事，以便进行软件开发
+      - 用户故事拆分：将大故事拆小，以便提升价值流动效率
+      - 用户故事验收条件：编写用户故事验收条件，以便减少返工
+    - 时点 3：当产生用户故事时
+      - 故事梳理工作坊：为下一个迭代的用户故事编写验收条件，以便提升迭代计划会的效率
+      - 迭代计划会：本迭代的目标？团队承诺在本迭代完成哪些用户故事？如何才算完成？
+      - 每日站会：同步用户故事的进展和风险
+      - 价值流式开发管理：不设置迭代周期，而使用看板更灵活地管理价值流动
+      - 分支策略：尽早、频繁、小批地解决代码冲突
+      - 持续集成：尽早、频繁、小批地解决软件集成问题
+      - 暗部署：将“部署”与“发布”分离，尽早、频繁、小批地解决部署中出现的问题
+      - 敏捷度量：制定全局度量指标，以评估过程改进的成效
+      - 领域驱动设计工作坊：让开发人员和领域专家就业务领域知识和通用语言达成共识，并识别核心域，以便让软件代码与业务概念对齐
+      - 用户故事开卡：在代码编写前消除对需求的误解，大幅降低变更的成本
+    - 时点 4：当为用户故事编写首行代码时
+      - 用户故事验卡“关键清单：在代码编写完成后立即检验，能大幅降低返工的成本
+      - 自动化单元测试：自动化单元测试的运行无须依赖测试环境，成本最低，速度最快
+      - 集体代码回顾：多双眼睛，多道检查；及时纠偏，又快又好；知识分享，消除瓶颈，对齐约定
+    - 时点 5：当用户故事通过测试而待部署时
+      - 迭代评审会：为用户展示已完成的用户故事，获取其反馈，以便持续改进
+      - 迭代回顾会：发现改进点，形成行动项，进行持续过程改进
+      - 最大痛点改进工作坊：尽早、频繁、小批地识别“价值最大、质量最差”的最大痛点，并将其拆解，迭代地解决
+      - 改进形：教练一对一地帮助学员制定频繁和小批的改进计划，并及时回顾，循环往复，以提升学员能力
+    - 时点 6：当用户故事部署上线时
+      - 验尸报告工作坊：尽早、频繁、小批地针对线上事故，回顾没有限制住的“小裂纹”，以便改进过程与系统，提升系统的稳定性
+```