Comment documenter rapidement et facilement un projet Angular à l'aide du module AddOnDoc de TaigaUI

Hey! Mon nom est Alexander. Je travaille sur les produits web Europlan. Nous avons environ 50 développeurs Web, plus de 30 projets stratégiques, un processus d'intégration constant et l'implication de collègues d'équipes associées, de sorte que la documentation de la bibliothèque de composants aide à s'adapter rapidement.

Dans cet article, je vais parler des moyens de documenter les projets Angular et montrer comment vous pouvez le faire en utilisant AddOnDoc de TaigaUI. Comme le disent les créateurs eux-mêmes, Alexander Inkin et Roman Sedov , il s'agit d'un constructeur Lego. En effet: il possède de nombreux modules utiles que vous pouvez utiliser dans votre projet. Dans cet article, nous allons jeter un œil au module AddOnDoc .

Pourquoi documentons-nous les projets

Habituellement, lorsque je parle d'une bibliothèque de composants, j'aime commencer mon histoire avec des systèmes de conception. Les systèmes de conception sont ce qui vous permet d'augmenter la vitesse et la qualité des produits. En règle générale, un système de conception comprend les composants suivants:

• lignes directrices, styles, règles et recommandations;

  
  
  
  
  

• UIKIT présenté dans figma / sketch / photoshop;

  
  
  
  
  

• bibliothèque de composants prêts à l'emploi sous forme de code (angulaire, réactif, 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 ! , , , , , , . , .