So dokumentieren Sie schnell und bequem ein Angular-Projekt mit dem AddOnDoc-Modul von TaigaUI

Hallo! Ich heiße Alexander. Ich arbeite an Europlan-Webprodukten. Wir haben ungefähr 50 Webentwickler, mehr als 30 strategische Projekte, einen ständigen Onboarding-Prozess und die Einbeziehung von Kollegen aus verwandten Teams, sodass die Dokumentation der Komponentenbibliothek eine schnelle Anpassung ermöglicht.

In diesem Artikel werde ich über Möglichkeiten zur Dokumentation von Angular-Projekten sprechen und zeigen, wie Sie dies mit AddOnDoc von TaigaUI tun können. Wie die Schöpfer selbst, Alexander Inkin und Roman Sedov , sagen , ist dies ein Lego-Konstruktor. In der Tat: Es hat viele nützliche Module, die Sie in Ihrem Projekt verwenden können. In diesem Artikel werfen wir einen Blick auf das AddOnDoc- Modul .

Warum dokumentieren wir Projekte?

Wenn ich über eine Bibliothek von Komponenten spreche, beginne ich meine Geschichte normalerweise gerne mit Designsystemen. Mit Design-Systemen können Sie die Geschwindigkeit und Qualität von Produkten steigern. In der Regel besteht ein Entwurfssystem aus folgenden Komponenten:

• Richtlinien, Stile, Regeln und Empfehlungen;

  
  
  
  
  

• UIKIT in figma / skizze / photoshop;

  
  
  
  
  

• Bibliothek vorgefertigter Komponenten in Form von Code (Winkel, Reaktion usw.).

  
  
  
  
  

, . Figma . . . , /// . 20- , , , . . :

• 
  
  
  
  

• 
  
  
  
  

• 
  
  
  
  

• 
  
  
  
  

:

• 
  
  
  
  

• 
  
  
  
  

• 
  
  
  
  

• 
  
  
  
  

• Angular (, , )

  
  
  
  
  

:

• State

  
  
  
  
  

• 
  
  
  
  

• , ( vscode, Chrome ..)

  
  
  
  
  

.

Storybook – open-source .

:

• Angular, React, Vue, Svelte, Ember

  
  
  
  
  

• 
  
  
  
  

• 
  
  
  
  

• 
  
  
  
  

• open-source

  
  
  
  
  

:

• , , API (Template , props, Template.bind({}) )

  
  
  
  
  

• 
  
  
  
  

bit.dev - , .

:

• 
  
  
  
  

• ci/cd,

  
  
  
  
  

• 
  
  
  
  

• (bundle-size, dependencies ..)

  
  
  
  
  

:

• 
  
  
  
  

• : ,

  
  
  
  
  

AddOnDoc - open-source .

:

• , ,

  
  
  
  
  

• , Angular

  
  
  
  
  

• open-source

  
  
  
  
  

• ,

  
  
  
  
  

AddOnDoc

highlight.js. , 191 . 6 18 github. , taiga ui .

Angular workspace . – , – . Workspace . workspace . , . ci/cd gitlub. , , .

AddOnDoc

taiga-ui

npm i @taiga-ui/{cdk,core,kit}
npm i @taiga-ui/addon-doc
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

AppModule:

{
        provide: HIGHLIGHT_OPTIONS,
        useValue: {
            coreLibraryLoader: () => import('highlight.js/lib/core'),
            lineNumbersLoader: () => import('highlightjs-line-numbers.js'),
            languages: {
                typescript: () => import('highlight.js/lib/languages/typescript'),
                scss: () => import('highlight.js/lib/languages/scss'),
                xml: () => import('highlight.js/lib/languages/xml'),
            },
        },
    },

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

imports: [
    CommonModule,
    ...
    TuiDocExampleModule,
    TuiDocPageModule,
    TuiDocDocumentationModule,
    TuiDocCodeModule,
    TuiDocDemoModule
  ],

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

<tui-doc-page header='Money' path='npm' package ='cdk'>
  <div class='page'>
    Money &nbsp;&mdash;      input.
  </div>
  <tui-doc-example id='base' heading='Simple money' [description]='description' [content]='example1' >
    <div>
      <fo-money
        [(ngModel)]='periodSum'
        [allowNull]='true'
        [onBlur]='true'
        showingMaxFractionDigits='1.0-0'
        editorMaxFractionDigits='1.0-0'
        placeholder=''
      ></fo-money>
    </div>
  </tui-doc-example>
</tui-doc-page>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

tui-doc-page - .

:

• header -

  
  
  
  
  

• package -

  
  
  
  
  

tui-doc-example - . .

:

• content - TypeScript Html. //, html

  
  
  
  
  

• heading -

  
  
  
  
  

• description -

  
  
  
  
  

const example1Html = require('!!raw-loader!./examples/1/template.html').default as string;

@Component({
  selector: 'fo-money-demo',
  templateUrl: './money-demo.component.html',
  styleUrls: ['./money-demo.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MoneyDemoComponent implements OnInit {
  periodSum = 32434;
  example1 = {
    TypeScript: `@NgModule({
      imports: [
        CommonModule,
        MoneyModule
      ],
      exports: [ResizabledemoComponent],
      declarations: [ResizabledemoComponent]
    })`,
    HTML: example1Html,
  };
  constructor() { }

  ngOnInit() {
  }

}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

AddOnDoc

. taiga ui ! , , , , , , . , .