Merge pull request #17 from fullstack-devops/bugfix/docs-init

Bugfix/docs init

Author: eksrha

.github/workflows/pull-request.yml

@@ -15,6 +15,7 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
+        
       - name: Setup node
         uses: actions/setup-node@v3
         with:

.github/workflows/release.yml

@@ -22,9 +22,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-      - name: Setup awesome-ci
-        uses: fullstack-devops/awesome-ci-action@main
-      - name: Setup node
+
+      - name: Setup node for GitHub
         uses: actions/setup-node@v3
         with:
           node-version: "16.x"
@@ -36,18 +35,29 @@ jobs:
       - name: build applikation
         run: yarn run build
 
-      # - name: set publish config
-      #   shell: bash
-      #   run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.GITHUB_TOKEN }}
-
-      - name: npm publish
+      - name: npm publish to GitHub
         working-directory: dist/ng-mat-components
         run: |
           npm version ${{ needs.create_release.outputs.version }}
           npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Setup node for npmjs
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16.x"
+          registry-url: "https://registry.npmjs.org"
+          scope: "@fullstack-devops"
+
+
+      - name: npm publish to npmjs
+        working-directory: dist/ng-mat-components
+        run: |
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+
       - name: Publish release
         run: awesome-ci release publish -releaseid "${{ needs.create_release.outputs.releaseid }}"
         env:

.vscode/settings.json

@@ -13,17 +13,14 @@
   },
   "javascript.updateImportsOnFileMove.enabled": "always",
   "typescript.updateImportsOnFileMove.enabled": "always",
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.codeActionsOnSave": {
-      "source.organizeImports": true
-    }
-  },
   "angular.enable-strict-mode-prompt": false,
   "files.associations": {
     ".env*": "shell"
   },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  "[yaml]": {
+    "editor.defaultFormatter": "redhat.vscode-yaml"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
 }

README.md

@@ -2,7 +2,7 @@
 Components for @angular/material
 
 
-## Usage
+## Installation
 
 add to your local `.npmrc` the following line to be able to use this package:
 ```javascript
@@ -23,7 +23,7 @@ And install it:
 
 Live Demo with all current modules at https://fullstack-devops.github.io/ng-mat-components (still in dev)
 
-Documentation will be done later when the api is fixed.
+Api Documentation: https://fullstack-devops.github.io/libraries/ng-mat-components.
 
 ## Development server
 

angular.json

@@ -66,8 +66,7 @@
               "projects/lib-workspace/src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "projects/lib-workspace/src/styles.scss"
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
             ],
             "scripts": []
           },

projects/lib-workspace/src/app/app-routing.module.ts

@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule } from '@angular/router';
 import { FrameRoutes } from 'projects/ng-mat-components/src/public-api';
-import { CalendarTableComponent } from './content/calendar-table/calendar-table.component';
-import { CalenderShowcaseComponent } from './content/calender-showcase/calender-showcase.component';
 import { HomeComponent } from './content/home/home.component';
-import { SubComponent } from './content/home/sub/sub.component';
-import { TestComponent } from './content/test/test.component';
+import { ShowcaseCalendarPanelsComponent } from './content/showcase-calendar-panels/showcase-calendar-panels.component';
+import { ShowcaseCalendarTableComponent } from './content/showcase-calendar-table/showcase-calendar-table.component';
+import { ShowcaseUiFrameComponent } from './content/showcase-ui-frame/showcase-ui-frame.component';
 
 export const routes: FrameRoutes = [
   {
@@ -16,25 +15,19 @@ export const routes: FrameRoutes = [
       sidenavIcon: 'home',
       sidenavText: 'Home',
     },
-    children: [
-      {
-        path: 'sub',
-        component: SubComponent,
-      },
-    ],
   },
   {
-    path: 'test',
-    component: TestComponent,
+    path: 'ui-frame',
+    component: ShowcaseUiFrameComponent,
     data: {
       displaySidemenu: true,
-      sidenavIcon: 'dashboard',
-      sidenavText: 'Dashboard',
+      sidenavIcon: 'pivot_table_chart',
+      sidenavText: 'Ui Frame',
     },
   },
   {
     path: 'calendar-panels',
-    component: CalenderShowcaseComponent,
+    component: ShowcaseCalendarPanelsComponent,
     data: {
       displaySidemenu: true,
       sidenavIcon: 'calendar_month',
@@ -43,7 +36,7 @@ export const routes: FrameRoutes = [
   },
   {
     path: 'calendar-table',
-    component: CalendarTableComponent,
+    component: ShowcaseCalendarTableComponent,
     data: {
       displaySidemenu: true,
       sidenavIcon: 'event_note',

projects/lib-workspace/src/app/app.component.html

@@ -1,9 +1,4 @@
-<fs-ui-frame
-  [frameConfig]="frameConfig"
-  [navUser]="navUser"
-  [appRoutes]="appRoutes"
-  (event)="onEvent($event)"
->
+<fs-ui-frame [frameConfig]="frameConfig" [navUser]="navUser" [appRoutes]="appRoutes" (event)="onEvent($event)">
   <fs-ui-frame-toolbar>
     <fs-ui-frame-toolbar-title>Current App Title</fs-ui-frame-toolbar-title>
 

projects/lib-workspace/src/app/app.module.ts

@@ -1,6 +1,5 @@
 import { LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { CalenderShowcaseComponent } from './content/calender-showcase/calender-showcase.component';
 
 import { APP_BASE_HREF } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -16,19 +15,18 @@ import {
   FsMaterialFullModule,
   FsUiFrameModule,
 } from 'projects/ng-mat-components/src/public-api';
-import { CalendarTableComponent } from './content/calendar-table/calendar-table.component';
 import { HomeComponent } from './content/home/home.component';
-import { SubComponent } from './content/home/sub/sub.component';
-import { TestComponent } from './content/test/test.component';
+import { ShowcaseCalendarPanelsComponent } from './content/showcase-calendar-panels/showcase-calendar-panels.component';
+import { ShowcaseCalendarTableComponent } from './content/showcase-calendar-table/showcase-calendar-table.component';
+import { ShowcaseUiFrameComponent } from './content/showcase-ui-frame/showcase-ui-frame.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
-    TestComponent,
-    SubComponent,
-    CalenderShowcaseComponent,
-    CalendarTableComponent,
+    ShowcaseCalendarPanelsComponent,
+    ShowcaseCalendarTableComponent,
+    ShowcaseUiFrameComponent,
   ],
   imports: [
     FormsModule,
@@ -56,4 +54,4 @@ import { TestComponent } from './content/test/test.component';
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule { }

projects/lib-workspace/src/app/content/calendar-table/calendar-table.component.css

@@ -0,0 +1,18 @@
+.docs-components {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  padding: 20px;
+  justify-content: center;
+}
+
+.docs-components .mat-card {
+  height: 300px;
+  width: 250px;
+  margin: 8px;
+  cursor: pointer;
+}
+
+.docs-components .mat-card img {
+  height: 200px;
+}