Cómo documentar rápida y cómodamente un proyecto Angular usando el módulo AddOnDoc de TaigaUI

¡Oye! Mi nombre es Alexander. Estoy trabajando en los productos web de Europlan. Contamos con alrededor de 50 desarrolladores web, más de 30 proyectos estratégicos, un proceso de incorporación constante y la participación de colegas de equipos relacionados, por lo que la documentación de la biblioteca de componentes ayuda a adaptarse rápidamente.

En este artículo, hablaré sobre formas de documentar proyectos de Angular y mostraré cómo puede hacerlo usando AddOnDoc de TaigaUI. Como dicen los propios creadores, Alexander Inkin y Roman Sedov , este es un constructor de Lego. De hecho: tiene muchos módulos útiles que puede utilizar en su proyecto. En este artículo, veremos el módulo AddOnDoc .

¿Por qué documentamos proyectos?

Por lo general, cuando hablo de una biblioteca de componentes, me gusta comenzar mi historia con sistemas de diseño. Los sistemas de diseño son los que le permiten aumentar la velocidad y la calidad de los productos. Normalmente, un sistema de diseño consta de los siguientes componentes:

• pauta, estilos, reglas y recomendaciones;

  
  
  
  
  

• UIKIT presentado en figma / sketch / photoshop;

  
  
  
  
  

• biblioteca de componentes listos para usar en forma de código (angular, reaccionar, 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 ! , , , , , , . , .