This repository consists of two projects:
cps-ui-kit
- shared components library itselfcomposition
- application for previewing compositions of components consumed from the libraryRun ng build cps-ui-kit --watch
and ng serve
for a dev server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.
projects/cps-ui-kit/src/lib/components
directoryng g c cps-componentname --standalone --prefix
projects/cps-ui-kit/src/public-api.ts
to export the component from the libraryprojects/cps-ui-kit/README.md
(keep alphabetical order!)Make sure ng build cps-ui-kit --watch
is running, so the library will be rebuilt on each change of its contents due to --watch
flag
projects/composition/src/app/pages
directoryng g c componentname-page --standalone
componentname-page.component.cy.ts
file (can't be done automatically with Angular CLI flag, since cypress is used)host: { class: 'composition-page' }
into page @Component
cps-ui-kit
, provide them to imports array of @Component
ComponentDocsViewerComponent
into @Component
imports
array in case of a new component page, include ServiceDocsViewerComponent
into @Component
imports
array in case of a new service pageComponentData or ServiceData
from '../../api-data/cps-componentname.json' once it is generated<app-component-docs-viewer [componentData]="componentData">...</app-component-docs-viewer>
in case of a new component page, wrap page html template contents into <app-service-docs-viewer [serviceData]="serviceData">...</app-service-docs-viewer>
in case of a new service pageprojects/composition/src/app/components/navigation-sidebar.component.ts
file and extend _components
array (keep alphabetical order!)projects/composition/src/app/app-routing.module.ts
and add a new route for a new page/README.md
(keep alphabetical order!)Execute npm run generate-json-api
to generate documentation for any changes in the components' API.
npm run test