# @component-catalog/core
> ComponentCatalog is a Angular module to help creating a catalog of the application's components for documentation. Additional markdown documentation can be written for further documentation purposes.
Latest version **0.2.0** (published 2019-02-28) · BSD-3-Clause license · 0 weekly downloads
## Install
```sh
npm install @component-catalog/core
pnpm add @component-catalog/core
yarn add @component-catalog/core
bun add @component-catalog/core
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.2.0 |
| Published | 2019-02-28 |
| First published | 2019-01-11 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | manuelrauber |
| Keywords | angular, ng, ngx, components, catalog, components catalog, component catalog, ui, ux, styleguide, docs, documentation |
## Links
- npm: https://www.npmjs.com/package/@component-catalog/core
- Repository: https://github.com/ComponentCatalog/component-catalog
- Homepage: https://github.com/ComponentCatalog/component-catalog#readme
- Issues: https://github.com/ComponentCatalog/component-catalog/issues
- npm.io page: https://npm.io/package/@component-catalog/core
## Dependencies (3)
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [marked](https://npm.io/package/marked.md) ^0.6.0
- [prismjs](https://npm.io/package/prismjs.md) ^1.15.0
## Alternatives
- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads
## Recent versions
- 0.2.0 (latest) — 2019-02-28
- 0.1.0 — 2019-01-11
## README
# ComponentCatalog
ComponentCatalog helps to create a visual overview of your Angular apps components.
Additionally, a markdown-based documentation can be included.
With ComponentCatalog you'll have all information (commonly referred to as _style guide_) in one place making it the ultimate tool for your designers and developers.
## Usage
### Installation
```
npm i @component-catalog/core
```
### Create catalog app
Create a new application via Angular CLI:
```
ng generate application catalog --routing --style scss --skip-tests
```
### Import ComponentCatalogModule
Import `ComponentCatalogModule` into the newly created catalog-app:
```typescript
import { ComponentCatalogModule } from '@component-catalog/core';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
ComponentCatalogModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {
}
```
### Add routing
Within the newly created file `app-routing.module.ts` update the import of Angular's `RouterModule` to:
```typescript
@NgModule({
imports: [RouterModule.forRoot([{ path: '', pathMatch: 'full', redirectTo: 'component-catalog' }])],
exports: [RouterModule],
})
export class AppRoutingModule {
}
```
### Write demo components
#### Create the components
Within the catalog, only demo components are written.
The demo components will use your application's components and add additional documentation.
Use the Angular CLI to create a new demo component within the catalog (make sure to execute the command within the `catalog` folder):
```bash
ng g c demo-button
```
#### Update the template
Within the template of the newly created demo-button, you can add your app's button and provide more information:
```html
demo-button works! as real component here!
Additional information
This is some additional information about your button.
```
#### Update TypeScript
The next step is to open the TypeScript file of your created `demo-button`.
Add the `@ComponentCatalog` decorator to the component's class:
```typescript
@ComponentCatalog({ name: 'Button', group: 'Simple Components' })
```
The property `name` will be used as the name within the navigation.
The property `group` will be used for grouping several components under the same label within the navigation.
#### Update app.module.ts
Finally, update the catalog's `app.module.ts` and add the `demo-button` as an `entryComponents` to the `@NgModule` decorator:
```typescript
entryComponents: [
DemoButtonComponent,
],
```
### Write additional markdow documentation
If you want, you can write additional markdown documentation, which will be included into the final ComponentCatalog.
Per default, all markdown files within a `docs` folder at the root of your project will be included.
To group markdown files, they need to be enclosed within their own folder, e.g.:
```
docs
|- colors
|- Background Colors.md
|- Foreground Colors.md
|- animations
|- Introduction.md
|- General.md
```
Within the markdown files you can write any markdown you want.
[GFM-Syntax](https://guides.github.com/features/mastering-markdown/) is supported as well.
Code will be highlighted by [PrismJS](https://prismjs.com).
Supported languages are:
* Bash
* PowerShell
* CSS
* HTML
* Docker
* JSON
* LESS
* SASS
* SCSS
* TypeScript
* JavaScript
### Start the catalog
```bash
ng serve catalog
```
## Design Mockups
ComponentCatalog is a newly created project where a lot of ideas have not been implemented yet.
In the meantime, enjoy some design mockups from [kaeku](https://github.com/kaeku).
Additionally, feel free to submit ideas and bug reports!
---
_Source: https://npm.io/package/@component-catalog/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._