Add stories for the ng-wireframe components

Author: MarkCuypersPpw

projects/ppwcode/ng-wireframe/src/lib/left-sidenav/left-sidenav.stories.ts

@@ -0,0 +1,77 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular'
+import { CommonModule } from '@angular/common'
+import { LeftSidenavComponent } from './left-sidenav.component'
+import { NavigationItem } from '../navigation-item/navigation-item.model'
+import { TranslateModule } from '@ngx-translate/core'
+
+const meta: Meta<LeftSidenavComponent> = {
+    title: 'Components/LeftSidenav',
+    component: LeftSidenavComponent,
+    tags: ['autodocs'],
+    decorators: [
+        moduleMetadata({
+            imports: [CommonModule, TranslateModule.forRoot()]
+        }),
+        componentWrapperDecorator(
+            (story) => `<div style="background-color: #18428c; height: 100vh; width: 250px;">${story}</div>`
+        )
+    ]
+}
+
+export default meta
+type Story = StoryObj<LeftSidenavComponent>
+
+const navigationItems: Array<NavigationItem> = [
+    {
+        label: 'Dashboard',
+        icon: 'fa-solid fa-house',
+        fullRouterPath: '/dashboard'
+    },
+    {
+        label: 'Settings',
+        icon: 'fa-solid fa-gear',
+        children: [
+            {
+                label: 'Profile',
+                icon: 'fa-solid fa-user',
+                fullRouterPath: '/settings/profile'
+            },
+            {
+                label: 'Security',
+                icon: 'fa-solid fa-lock',
+                fullRouterPath: '/settings/security'
+            }
+        ]
+    },
+    {
+        label: 'External Link',
+        icon: 'fa-solid fa-globe',
+        fullRouterPath: 'https://storybook.js.org',
+        isExternalLink: true
+    }
+]
+
+export const Default: Story = {
+    args: {
+        navigationItems,
+        showMenuCloseButton: true,
+        logoUrl: '/assets/ppwcode_logo.png',
+        logoHeight: 60,
+        logoWidth: 60,
+        centerLogo: true
+    }
+}
+
+export const NoLogo: Story = {
+    args: {
+        navigationItems,
+        showMenuCloseButton: true
+    }
+}
+
+export const ManyItems: Story = {
+    args: {
+        navigationItems: [...navigationItems, ...navigationItems, ...navigationItems],
+        showMenuCloseButton: true
+    }
+}

projects/ppwcode/ng-wireframe/src/lib/pagination-bar/pagination-bar.stories.ts

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/angular'
+import { createPagedEntitiesMock } from '@ppwcode/ng-async'
+import { PaginationBarComponent } from './pagination-bar.component'
+
+const meta: Meta<PaginationBarComponent> = {
+    title: 'Components/PaginationBar',
+    component: PaginationBarComponent,
+    tags: ['autodocs'],
+    render: (args) => ({
+        props: args
+    })
+}
+
+export default meta
+type Story = StoryObj<PaginationBarComponent>
+
+const mockEntities = createPagedEntitiesMock(new Array(100).fill({}))
+mockEntities.pageSize = 10
+mockEntities.pageIndex = 1
+mockEntities.page = 1
+mockEntities.totalCount = 100
+
+export const Default: Story = {
+    args: {
+        pagedAsyncResult: mockEntities,
+        hidePageSize: false,
+        showFirstLastButtons: true,
+        pageSizeOptions: [5, 10, 25, 50]
+    }
+}
+
+export const HidePageSize: Story = {
+    args: {
+        pagedAsyncResult: mockEntities,
+        hidePageSize: true
+    }
+}

projects/ppwcode/ng-wireframe/src/lib/toolbar/toolbar.stories.ts

@@ -0,0 +1,58 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'
+import { ToolbarComponent } from './toolbar.component'
+import { Router } from '@angular/router'
+import { of } from 'rxjs'
+
+const meta: Meta<ToolbarComponent> = {
+    title: 'Components/Toolbar',
+    component: ToolbarComponent,
+    tags: ['autodocs'],
+    decorators: [
+        moduleMetadata({
+            providers: [
+                {
+                    provide: Router,
+                    useValue: {
+                        events: of(),
+                        routerState: {
+                            snapshot: {
+                                root: {
+                                    firstChild: null,
+                                    title: 'Page Title'
+                                }
+                            }
+                        }
+                    }
+                }
+            ]
+        })
+    ]
+}
+
+export default meta
+type Story = StoryObj<ToolbarComponent>
+
+export const Default: Story = {
+    args: {
+        showMenuToggle: true,
+        isSidenavOpen: true,
+        showPageTitle: true,
+        toolbarHeightPx: 64
+    }
+}
+
+export const SidenavClosed: Story = {
+    args: {
+        showMenuToggle: true,
+        isSidenavOpen: false,
+        showPageTitle: true
+    }
+}
+
+export const NoTitle: Story = {
+    args: {
+        showMenuToggle: true,
+        isSidenavOpen: true,
+        showPageTitle: false
+    }
+}

projects/ppwcode/ng-wireframe/src/lib/wireframe/wireframe.stories.ts

@@ -0,0 +1,118 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular'
+import { WireframeComponent } from './wireframe.component'
+import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router'
+import { of } from 'rxjs'
+import { BREADCRUMB_PROVIDER_OPTIONS, BreadcrumbService } from '@ppwcode/ng-router'
+import { CommonModule } from '@angular/common'
+import { MatSidenavModule } from '@angular/material/sidenav'
+import { MatIconModule } from '@angular/material/icon'
+import { LeftSidenavComponent } from '../left-sidenav/left-sidenav.component'
+import { ToolbarComponent } from '../toolbar/toolbar.component'
+import { signal } from '@angular/core'
+import { TranslateModule } from '@ngx-translate/core'
+
+const meta: Meta<WireframeComponent> = {
+    title: 'Components/Wireframe',
+    component: WireframeComponent,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: {
+                iframeHeight: 600
+            }
+        }
+    },
+    decorators: [
+        moduleMetadata({
+            imports: [
+                CommonModule,
+                MatSidenavModule,
+                MatIconModule,
+                RouterLink,
+                RouterOutlet,
+                LeftSidenavComponent,
+                ToolbarComponent,
+                TranslateModule.forRoot()
+            ],
+            providers: [
+                {
+                    provide: Router,
+                    useValue: {
+                        events: of(),
+                        routerState: {
+                            snapshot: {
+                                root: {
+                                    firstChild: null,
+                                    data: { showWireframe: true },
+                                    url: [],
+                                    pathFromRoot: []
+                                }
+                            }
+                        }
+                    }
+                },
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        snapshot: {
+                            data: { showWireframe: true }
+                        }
+                    }
+                },
+                {
+                    provide: BreadcrumbService,
+                    useValue: {
+                        breadcrumbs: signal([])
+                    }
+                },
+                {
+                    provide: BREADCRUMB_PROVIDER_OPTIONS,
+                    useValue: { preferLabelFromRouteData: false, enableAnimations: true }
+                }
+            ]
+        }),
+        componentWrapperDecorator((story) => `<div style="height: 600px">${story}</div>`)
+    ]
+}
+
+export default meta
+type Story = StoryObj<WireframeComponent>
+
+const navigationItems = [
+    {
+        label: 'Dashboard',
+        icon: 'fa-solid fa-house',
+        fullRouterPath: '/dashboard'
+    },
+    {
+        label: 'Users',
+        icon: 'fa-solid fa-users',
+        fullRouterPath: '/users'
+    }
+]
+
+export const Default: Story = {
+    args: {
+        navigationItems,
+        sidebarOptions: {
+            logoUrl: '/assets/ppwcode_logo.png',
+            logoHeight: 60,
+            logoWidth: 60,
+            showPageTitle: true
+        },
+        toolbarHeightPx: 64,
+        showBreadcrumb: true
+    }
+}
+
+export const NoNavigation: Story = {
+    args: {
+        navigationItems: [],
+        hideSidenavWhenNoNavigationItems: true,
+        sidebarOptions: {
+            showPageTitle: true
+        },
+        showBreadcrumb: true
+    }
+}