From 9ca3d0653d74ef21b6694c750ba88bddebc61b52 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Tue, 7 Jan 2025 17:28:35 +0100
Subject: [PATCH] Fix strict typescript for Component Library stories (#12423)

Fixing some low hanging fruits for moving CL to strict typescript.

This primarily removes the types from args since TS infers them differently. We previously needed them since storybook would use any for args but now provides proper typings
---
 libs/components/src/button/button.stories.ts       |  6 ++----
 .../components/src/dialog/dialog/dialog.stories.ts |  8 +++-----
 .../simple-configurable-dialog.service.stories.ts  |  6 ++----
 .../src/form-field/bit-validators.stories.ts       |  6 ++----
 .../src/form-field/form-field.stories.ts           | 14 ++++++--------
 libs/components/src/search/search.stories.ts       |  4 +---
 libs/components/src/toast/toast.stories.ts         |  6 ++----
 7 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts
index ed3dfc4e13..3654442801 100644
--- a/libs/components/src/button/button.stories.ts
+++ b/libs/components/src/button/button.stories.ts
@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { Meta, StoryObj } from "@storybook/angular";
 
 import { ButtonComponent } from "./button.component";
@@ -107,13 +105,13 @@ export const DisabledWithAttribute: Story = {
 };
 
 export const Block: Story = {
-  render: (args: ButtonComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <span class="tw-flex">
         <button bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
         <a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">[block]="true" Link</a>
-  
+
         <button bitButton [buttonType]="buttonType" block class="tw-ml-2">block Button</button>
         <a bitButton [buttonType]="buttonType" block href="#" class="tw-ml-2">block Link</a>
       </span>
diff --git a/libs/components/src/dialog/dialog/dialog.stories.ts b/libs/components/src/dialog/dialog/dialog.stories.ts
index 1525d2e017..7cb6f40aa5 100644
--- a/libs/components/src/dialog/dialog/dialog.stories.ts
+++ b/libs/components/src/dialog/dialog/dialog.stories.ts
@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
@@ -78,7 +76,7 @@ export default {
 type Story = StoryObj<DialogComponent & { title: string }>;
 
 export const Default: Story = {
-  render: (args: DialogComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-dialog [dialogSize]="dialogSize" [title]="title" [subtitle]="subtitle" [loading]="loading" [disablePadding]="disablePadding">
@@ -142,7 +140,7 @@ export const Loading: Story = {
 };
 
 export const ScrollingContent: Story = {
-  render: (args: DialogComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-dialog title="Scrolling Example" [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
@@ -197,7 +195,7 @@ export const TabContent: Story = {
 };
 
 export const WithCards: Story = {
-  render: (args: DialogComponent) => ({
+  render: (args) => ({
     props: {
       formObj: new FormGroup({
         name: new FormControl(""),
diff --git a/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts b/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts
index 409d691beb..4f21b8611b 100644
--- a/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts
@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { Component } from "@angular/core";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
@@ -72,7 +70,7 @@ class StoryDialogComponent {
           content: this.i18nService.t("dialogContent"),
           type: "primary",
           acceptButtonText: "Ok",
-          cancelButtonText: null,
+          cancelButtonText: undefined,
         },
         {
           title: this.i18nService.t("primaryTypeSimpleDialog"),
@@ -123,7 +121,7 @@ class StoryDialogComponent {
 
   showCallout = false;
   calloutType = "info";
-  dialogCloseResult: boolean;
+  dialogCloseResult?: boolean;
 
   constructor(
     public dialogService: DialogService,
diff --git a/libs/components/src/form-field/bit-validators.stories.ts b/libs/components/src/form-field/bit-validators.stories.ts
index df02125640..642ff30bb5 100644
--- a/libs/components/src/form-field/bit-validators.stories.ts
+++ b/libs/components/src/form-field/bit-validators.stories.ts
@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { FormsModule, ReactiveFormsModule, FormBuilder } from "@angular/forms";
 import { StoryObj, Meta, moduleMetadata } from "@storybook/angular";
 
@@ -51,7 +49,7 @@ const template = `
   </form>`;
 
 export const ForbiddenCharacters: StoryObj<BitFormFieldComponent> = {
-  render: (args: BitFormFieldComponent) => ({
+  render: (args) => ({
     props: {
       formObj: new FormBuilder().group({
         name: ["", forbiddenCharacters(["\\", "/", "@", "#", "$", "%", "^", "&", "*", "(", ")"])],
@@ -62,7 +60,7 @@ export const ForbiddenCharacters: StoryObj<BitFormFieldComponent> = {
 };
 
 export const TrimValidator: StoryObj<BitFormFieldComponent> = {
-  render: (args: BitFormFieldComponent) => ({
+  render: (args) => ({
     props: {
       formObj: new FormBuilder().group({
         name: [
diff --git a/libs/components/src/form-field/form-field.stories.ts b/libs/components/src/form-field/form-field.stories.ts
index a02158655e..ccd80d6fa7 100644
--- a/libs/components/src/form-field/form-field.stories.ts
+++ b/libs/components/src/form-field/form-field.stories.ts
@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { TextFieldModule } from "@angular/cdk/text-field";
 import {
   AbstractControl,
@@ -190,7 +188,7 @@ export const Required: Story = {
         <bit-label>Label</bit-label>
         <input bitInput required placeholder="Placeholder" />
       </bit-form-field>
-  
+
       <bit-form-field [formGroup]="formObj">
         <bit-label>FormControl</bit-label>
         <input bitInput formControlName="required" placeholder="Placeholder" />
@@ -200,7 +198,7 @@ export const Required: Story = {
 };
 
 export const Hint: Story = {
-  render: (args: BitFormFieldComponent) => ({
+  render: (args) => ({
     props: {
       formObj: formObj,
       ...args,
@@ -268,7 +266,7 @@ export const Readonly: Story = {
             <bit-form-field>
               <bit-label>Textarea <span slot="end" bitBadge variant="success">Premium</span></bit-label>
               <textarea bitInput rows="3" readonly class="tw-resize-none">Row1
-Row2 
+Row2
 Row3</textarea>
             </bit-form-field>
 
@@ -361,7 +359,7 @@ export const PartiallyDisabledButtonInputGroup: Story = {
 };
 
 export const Select: Story = {
-  render: (args: BitFormFieldComponent) => ({
+  render: (args) => ({
     props: args,
     template: /*html*/ `
       <bit-form-field>
@@ -377,7 +375,7 @@ export const Select: Story = {
 };
 
 export const AdvancedSelect: Story = {
-  render: (args: BitFormFieldComponent) => ({
+  render: (args) => ({
     props: args,
     template: /*html*/ `
       <bit-form-field>
@@ -422,7 +420,7 @@ export const FileInput: Story = {
 };
 
 export const Textarea: Story = {
-  render: (args: BitFormFieldComponent) => ({
+  render: (args) => ({
     props: args,
     template: /*html*/ `
       <bit-form-field>
diff --git a/libs/components/src/search/search.stories.ts b/libs/components/src/search/search.stories.ts
index 71c180c6d5..a6cd714d43 100644
--- a/libs/components/src/search/search.stories.ts
+++ b/libs/components/src/search/search.stories.ts
@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
@@ -34,7 +32,7 @@ export default {
 type Story = StoryObj<SearchComponent>;
 
 export const Default: Story = {
-  render: (args: SearchComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-search [(ngModel)]="searchText" [placeholder]="placeholder" [disabled]="disabled"></bit-search>
diff --git a/libs/components/src/toast/toast.stories.ts b/libs/components/src/toast/toast.stories.ts
index 2ca1c0fa95..382e19097b 100644
--- a/libs/components/src/toast/toast.stories.ts
+++ b/libs/components/src/toast/toast.stories.ts
@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@@ -24,7 +22,7 @@ const toastServiceExampleTemplate = `
 })
 export class ToastServiceExampleComponent {
   @Input()
-  toastOptions: ToastOptions;
+  toastOptions?: ToastOptions;
 
   constructor(protected toastService: ToastService) {}
 }
@@ -40,7 +38,7 @@ export default {
     }),
     applicationConfig({
       providers: [
-        ToastModule.forRoot().providers,
+        ToastModule.forRoot().providers!,
         {
           provide: I18nService,
           useFactory: () => {