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

@@ -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>

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(""),

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,

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: [

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>

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>

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: () => {