Como documentar de forma rápida e conveniente um projeto Angular usando o módulo AddOnDoc da TaigaUI

Ei! Meu nome é Alexander. Estou a trabalhar nos produtos da Europlan. Contamos com cerca de 50 desenvolvedores web, mais de 30 projetos estratégicos, um processo de onboarding constante e o envolvimento de colegas de equipes relacionadas, de modo que a documentação da biblioteca de componentes ajuda a se adaptar rapidamente.

Neste artigo, vou falar sobre as maneiras de documentar projetos Angular e mostrar como você pode fazer isso usando AddOnDoc da TaigaUI. Como os próprios criadores, Alexander Inkin e Roman Sedov , dizem , este é um construtor de Lego. Na verdade: ele tem muitos módulos úteis que você pode usar em seu projeto. Neste artigo, daremos uma olhada no módulo AddOnDoc .

Por que documentamos projetos

Normalmente, quando falo sobre uma biblioteca de componentes, gosto de começar minha história com sistemas de design. Os sistemas de design permitem aumentar a velocidade e a qualidade dos produtos. Normalmente, um sistema de design consiste nos seguintes componentes:

• orientação, estilos, regras e recomendações;

  
  
  
  
  

• UIKIT apresentado em figma / sketch / photoshop;

  
  
  
  
  

• biblioteca de componentes prontos na forma de código (angular, react, etc.).

  
  
  
  
  

, . 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 ! , , , , , , . , .