@flywheel-io/vision 2.0.0 → 2.1.0-beta.0

package/src/components/tooltip/tooltip.stories.ts

@@ -0,0 +1,111 @@
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwAppIconModule } from '../app-icon/app-icon.module';
+import { FwAvatarModule } from '../avatar/avatar.module';
+import { FwButtonModule } from '../button/button.module';
+import { FwIconModule } from '../icon/icon.module';
+import { FwIconButtonModule } from '../icon-button/icon-button.module';
+import { FwMenuModule } from '../menu/menu.module';
+import { FwPopoverModule } from '../popover/popover.module';
+import { FwTooltipComponent } from './tooltip.component';
+import { FwTooltipModule } from './tooltip.module';
+
+const meta: Meta = {
+  title: 'Components/Tooltip',
+  component: FwTooltipComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4951-73659&mode=dev',
+    },
+  },
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom([
+        BrowserAnimationsModule,
+      ])],
+    }),
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwAppIconModule,
+        FwButtonModule,
+        FwPopoverModule,
+        FwIconModule,
+        FwIconButtonModule,
+        FwMenuModule,
+        FwAvatarModule,
+        FwTooltipModule,
+      ],
+    }),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<FwTooltipComponent>;
+
+export const Tooltip: Story = {
+  args: {
+    title: 'My Tooltip',
+    color: 'light',
+    position: 'above',
+    maxWidth: 444,
+    isOpen: false,
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+        <div style="padding: 30px; display: flex; justify-content: center">
+          <fw-tooltip [title]="title" [color]="color" [position]="position" [maxWidth]="maxWidth" [isOpen]="isOpen">
+            <button>some item</button>
+          </fw-tooltip>
+        </div>
+      `,
+  }),
+};
+
+export const TooltipExamples: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+        <div style="display: flex; align-items: center; min-height: 100px; flex: 1; gap: 16px">
+                <fw-tooltip title="Jane Doe">
+                  <fw-menu-item title="Jane Doe">
+                      <fw-avatar variant="circular" content="initial" initial="JD" size="medium">
+                      </fw-avatar>
+                  </fw-menu-item>
+                </fw-tooltip>
+
+                <fw-tooltip title="Locked Project" position="below">
+                  <fw-icon-button icon="setting-gear">
+                  </fw-icon-button>
+                </fw-tooltip>
+
+
+                <fw-tooltip title="This button is magic" position="none" color="dark">
+                  <fw-button color="primary" variant="solid">
+                      Magic Button
+                  </fw-button>
+                </fw-tooltip>
+
+                <fw-tooltip title="unwieldly_class_text_max_width_300: lorem.impsum._dolor.consecteturadipiscingelitseddoeiusmodtemporincididunt ut labore et doloremagnaaliqua. " maxWidth="300" position="below">
+                  <fw-button variant="outline">
+                      Unwieldy Text
+                  </fw-button>
+                </fw-tooltip>
+
+
+                <fw-tooltip title="This tooltip has more content to show how we only support a max of 200px on a tooltip until the text wraps." position="right">
+                    <fw-icon-button icon="grid-layout"></fw-icon-button>
+                </fw-tooltip>
+        </div>
+        `,
+  }),
+};

package/src/components/typography-sample/typography-sample.component.html

@@ -0,0 +1,25 @@
+<div>
+  <h1 class="vision-h1">Heading 1</h1>
+  <p class="vision-p1">Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bibendum odio pellentesque
+    pellentesque arcu ut ut tortor turpis. Bibendum duis duis ipsum sapien orci aenean lectus magna. Integer elementum
+    consectetur ac at. Aliquet pellentesque dolor at magna nibh.</p>
+  <h2 class="vision-h2">Heading 2</h2>
+  <p class="vision-p2">Paragraph 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bibendum odio pellentesque
+    pellentesque arcu ut ut tortor turpis. Bibendum duis duis ipsum sapien orci aenean lectus magna. Integer elementum
+    consectetur ac at. Aliquet pellentesque dolor at magna nibh.</p>
+  <h3 class="vision-h3">Heading 3</h3>
+  <p class="vision-p3">Paragraph 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bibendum odio pellentesque
+    pellentesque arcu ut ut tortor turpis. Bibendum duis duis ipsum sapien orci aenean lectus magna. Integer elementum
+    consectetur ac at. Aliquet pellentesque dolor at magna nibh.</p>
+  <h4 class="vision-h4">Heading 4</h4>
+  <p class="vision-p4">Paragraph 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bibendum odio pellentesque
+    pellentesque arcu ut ut tortor turpis. Bibendum duis duis ipsum sapien orci aenean lectus magna. Integer elementum
+    consectetur ac at. Aliquet pellentesque dolor at magna nibh.</p>
+  <h5 class="vision-h5">Heading 5</h5>
+  <h2 class="vision-h2">Hyperlinks</h2>
+  <p class="vision-p2">
+    This is a standard <a href="http://flywheel.io" target="_blank" class="vision-link">vision-link</a>,
+    a <a href="http://flywheel.io" target="_blank" class="vision-link-inherited">vision-link-inherited</a>,
+    and a <a href="http://flywheel.io" target="_blank" class="vision-link-no-visited">vision-link-no-visited</a>
+  </p>
+</div>

package/src/components/typography-sample/typography-sample.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'fw-typography',
+  templateUrl: './typography-sample.component.html',
+})
+export class TypographySampleComponent {
+  
+  constructor() { }
+}

package/src/components/typography-sample/typography-sample.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { TypographySampleComponent } from './typography-sample.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    TypographySampleComponent,
+  ],
+  exports: [
+    TypographySampleComponent,
+  ],
+})
+export class TypographySampleModule {}

package/src/components/typography-sample/typography-sample.stories.ts

@@ -0,0 +1,34 @@
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { TypographySampleComponent } from './typography-sample.component';
+import { TypographySampleModule } from './typography-sample.module';
+
+const meta: Meta<TypographySampleComponent> = {
+  title: 'Tokens/Typography',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=1649-60060&mode=design&t=kKJ9B1V6klFufk0T-11',
+    },
+  },
+  argTypes: {},
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        TypographySampleModule,
+      ],
+    }),
+  ],
+};
+
+export default meta;
+export const Overview: StoryObj<TypographySampleModule> = {
+  args: {},
+  render: () => ({
+    template: `
+      <fw-typography></fw-typography>
+    `,
+  }),
+};

package/src/components/typography-sample/typography.mdx

@@ -0,0 +1,41 @@
+import {Meta, Story} from '@storybook/addon-docs';
+import * as TypographyStories from './typography-sample.stories'
+
+<Meta title="Docs/Typography" name="MDX"/>
+
+# Typography
+
+Typography falls into two categories in vision, heading and paragraph.
+These categories are additionally further divided by number, 1-5 for headings and 1-4 for paragraphs. Examples of these styles below.
+
+<Story of={TypographyStories.Overview}></Story>
+
+
+## Installation
+
+By importing vision you will automatically have typography mixins and classes available
+
+You can **additionally** register typography styles in the global scope by adding the following to your global stylesheet.
+
+```css
+@use '@flywheel-io/vision' as vision;
+@include vision.global-typography;
+```
+
+When adding the global styles the `<p>` tag is defaulted to the `vision-p2` typography styles, `<h1>`-`<h5>` are set to `vision-h1`-`vision-h5` respectively, and the `<a>` to `link`.
+
+## Usage
+
+The mixins can be used as such, they are just named after their tag "h1, p1, etc..."
+```css
+@include h1;
+@include p2;
+@include link;
+```
+
+the classes are named `vision-tag` and can be used as such
+```html
+<div class="vision-h1"></div>
+<p class="vision-p2"></p>
+<a class="vision-link"></a>
+```

package/src/components/wrapped-input/wrapped-input.component.html

@@ -0,0 +1,10 @@
+<label>
+  <fw-form-heading *ngIf="title" [title]="title" [description]="description"></fw-form-heading>
+  <ng-content select="fw-form-heading"></ng-content>
+</label>
+<div class="input-wrapper">
+  <ng-content
+    select="fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox"></ng-content>
+</div>
+<p class="vision-p4 helper-text" *ngIf="!!helperText && !errorText">{{ helperText }}</p>
+<p class="vision-p4 error-text" *ngIf="!!errorText">{{ errorText }}</p>

package/src/components/wrapped-input/wrapped-input.component.scss

@@ -0,0 +1,32 @@
+.fw-wrapped-input {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .input-wrapper {
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    gap: 16px;
+
+    > * {
+      flex: 1;
+    }
+  }
+
+  .helper-text {
+    margin-top: 4px;
+    color: var(--typography-light);
+    line-height: 13px;
+    margin-left: 6px;
+    margin-bottom: 0;
+    text-align: left;
+  }
+
+  .error-text {
+    @extend .helper-text;
+
+    color: var(--red-base);
+  }
+}

package/src/components/wrapped-input/wrapped-input.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FwAvatarModule } from '../avatar/avatar.module';
+import { FwCheckboxModule } from '../checkbox/checkbox.module';
+import { FwSwitchModule } from '../switch/switch.module';
+import { FwWrappedInputComponent } from './wrapped-input.component';
+
+describe('FwWrappedInputComponent', () => {
+  let component: FwWrappedInputComponent;
+  let fixture: ComponentFixture<FwWrappedInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        FwSwitchModule,
+        FwCheckboxModule,
+        FwAvatarModule,
+      ],
+      declarations: [
+        FwWrappedInputComponent,
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FwWrappedInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/components/wrapped-input/wrapped-input.component.ts

@@ -0,0 +1,18 @@
+import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'fw-wrapped-input',
+  templateUrl: './wrapped-input.component.html',
+  styleUrls: ['./wrapped-input.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class FwWrappedInputComponent {
+  @Input() title: string;
+  @Input() description?: string;
+  @Input() helperText?: string;
+  @Input() errorText?: string;
+
+  @HostBinding('class.fw-wrapped-input') class = true;
+}
+
+

package/src/components/wrapped-input/wrapped-input.mdx

@@ -0,0 +1,26 @@
+import {Controls, Description, Meta, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
+
+import * as WrappedInputStories from './wrapped-input.stories';
+
+<Meta of={WrappedInputStories}/>
+<Title/>
+
+```ts
+import FwWappedInputModule from '@flywheel-io/vision';
+```
+
+## Basic Usage
+
+This component creates a simple wrap of **input** type form controls with a [Form Heading](/docs/form-controls-form-heading--docs).
+For Switch and Checkbox please use a [Contained Input](/docs/form-controls-contained-input--docs)
+```html
+<fw-wrapped-input title="Title" description="Lorem ipsum dolor sit amet consectetur.">
+  <fw-text-input placeholder="Text Input"></fw-text-input>
+</fw-wrapped-input>
+```
+
+<Subtitle/>
+<Description/>
+<Primary/>
+<Controls/>
+<Stories/>

package/src/components/wrapped-input/wrapped-input.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FwFormHeadingModule } from '../form-heading/form-heading.module';
+import { FwWrappedInputComponent } from './wrapped-input.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FwFormHeadingModule,
+  ],
+  exports: [
+    FwWrappedInputComponent,
+  ],
+  declarations: [
+    FwWrappedInputComponent,
+  ],
+})
+export class FwWrappedInputModule {
+}

package/src/components/wrapped-input/wrapped-input.stories.ts

@@ -0,0 +1,195 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwButtonToggleModule } from '../button-toggle/button-toggle.module';
+import { FwChipModule } from '../chip/chip.module';
+import { FwDateInputModule } from '../date-input/date-input.module';
+import { FwFormHeadingModule } from '../form-heading/form-heading.module';
+import { FwValidators } from '../forms/validators';
+import { FwIconModule } from '../icon/icon.module';
+import { FwLayoutsModule } from '../layouts/layouts.module';
+import { FwMenuModule } from '../menu/menu.module';
+import { FwPhoneInputModule } from '../phone-input/phone-input.module';
+import { FwSelectMenuModule } from '../select-menu/select-menu.module';
+import { FwSwitchModule } from '../switch/switch.module';
+import { FwTextInputModule } from '../text-input/text-input.module';
+import { FwTextAreaInputModule } from '../textarea-input/textarea-input.module';
+import { FwTooltipModule } from '../tooltip/tooltip.module';
+import { FwWrappedInputComponent } from './wrapped-input.component';
+
+
+export default {
+  title: 'Form Controls/Wrapped Input',
+  component: FwWrappedInputComponent,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=11206-25402&m=dev',
+    },
+  },
+  argTypes: {},
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FormsModule,
+        FwButtonToggleModule,
+        FwChipModule,
+        FwDateInputModule,
+        FwFormHeadingModule,
+        FwIconModule,
+        FwLayoutsModule,
+        FwMenuModule,
+        FwPhoneInputModule,
+        FwSelectMenuModule,
+        FwSwitchModule,
+        FwTextAreaInputModule,
+        FwTextInputModule,
+        FwTooltipModule,
+        OverlayModule,
+        ReactiveFormsModule,
+      ],
+    }),
+    applicationConfig({
+      providers: [
+        importProvidersFrom(BrowserModule),
+        importProvidersFrom(BrowserAnimationsModule),
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwWrappedInputComponent>;
+
+export const Overview: Story = {
+  args: {
+    title: 'Title',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    helperText: 'A simple place to maybe add instructions or relevant information.',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <fw-wrapped-input [title]="title" [description]="description" [helperText]="helperText" [errorText]="errorText">
+        <fw-text-input placeholder="Text Input"></fw-text-input>
+      </fw-wrapped-input>
+  `,
+  }),
+};
+
+export const Errored: Story = {
+  args: {
+    title: 'Title',
+    errorText: 'Something went wrong.',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <fw-wrapped-input [title]="title" [description]="description" [helperText]="helperText" [errorText]="errorText">
+        <fw-text-input placeholder="Text Input" error="true"></fw-text-input>
+      </fw-wrapped-input>
+  `,
+  }),
+};
+
+export const Variations: Story = {
+  args: {
+    title: 'Full Name',
+    description: 'include both your first and last name',
+  },
+  render: (args) => {
+    const formGroup = new FormGroup({
+      firstName: new FormControl('James', Validators.required),
+      lastName: new FormControl('Holden', Validators.required),
+      phone: new FormControl('+18005551212', [FwValidators.phone]),
+      birthdate: new FormControl('1901-01-01', Validators.required),
+      contactType: new FormControl('personal', Validators.required),
+      tags: new FormControl(['Data Manager'], Validators.required),
+      notes: new FormControl('', Validators.required),
+    });
+    formGroup['toJSON'] = () => null;
+    const tagOptions = [
+      { value: 'Contributor', title: 'Contributor' },
+      { value: 'Data Manager', title: 'Data Manager' },
+      { value: 'Data Scientist', title: 'Data Scientist' },
+      { value: 'ML Engineer', title: 'ML Engineer' },
+      { value: 'Principle Investigator', title: 'Principle Investigator' },
+      { value: 'Radiologist', title: 'Radiologist' },
+      { value: 'Research Coordinator', title: 'Research Coordinator' },
+      { value: 'Site Administrator', title: 'Site Administrator, IT' },
+      { value: 'Other', title: 'Other' },
+    ];
+    return ({
+      props: {
+        ...args,
+        form: formGroup,
+        tagOptions: tagOptions,
+      },
+      controls: { disabled: true },
+      template: `
+        <form [formGroup]="form">
+          <fw-grid>
+            <fw-grid-item [cols]="12">
+              <fw-wrapped-input [title]="title" [description]="description">
+                <fw-text-input placeholder="First" formControlName="firstName"></fw-text-input>
+                <fw-text-input placeholder="Last" formControlName="lastName"></fw-text-input>
+              </fw-wrapped-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+              <fw-wrapped-input helperText="Primary">
+                <fw-form-heading title="Phone">
+                    <fw-chip title="Work"></fw-chip>
+                </fw-form-heading>
+                <fw-phone-input [placeholder]="'Phone Number'" formControlName="phone"></fw-phone-input>
+              </fw-wrapped-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+              <fw-wrapped-input helperText="Secondary">
+                <fw-form-heading title="Phone">
+                    <fw-chip title="Home"></fw-chip>
+                </fw-form-heading>
+                <fw-phone-input [placeholder]="'Phone Number'" formControlName="phone"></fw-phone-input>
+              </fw-wrapped-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="12">
+               <fw-wrapped-input title="Birthdate" errorText="Date is too early">
+                <fw-date-input formControlName="birthdate" [error]="true"></fw-date-input>
+              </fw-wrapped-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+               <fw-wrapped-input title="Type" helperText="The type of relationship">
+                <fw-select formControlName="contactType" placeholder="Contact Type" width="100%">
+                    <fw-menu-item value="personal" title="Personal"></fw-menu-item>
+                    <fw-menu-item value="work" title="Work"></fw-menu-item>
+                </fw-select>
+              </fw-wrapped-input>
+            </fw-grid-item>
+             <fw-grid-item [cols]="6">
+               <fw-wrapped-input title="Position" helperText="You can select more than one">
+                <fw-multi-select formControlName="tags" placeholder="Tags" [options]="tagOptions" width="100%">
+                </fw-multi-select>
+              </fw-wrapped-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="12">
+              <fw-wrapped-input [errorText]="">
+                <fw-form-heading title="Notes" description="Please avoid anything private">
+                  <fw-tooltip title="This is where we pass on info to other salespeople" position="right">
+                    <fw-icon color="muted">information-circle</fw-icon>
+                  </fw-tooltip>
+                </fw-form-heading>
+                <fw-textarea-input [minRows]="5" placeholder="Add Notes..." formControlName="notes"></fw-textarea-input>
+              </fw-wrapped-input>
+            </fw-grid-item>
+          </fw-grid>
+        </form>
+      `,
+    });
+  },
+};

package/src/directives/menu-register.directive.ts

@@ -0,0 +1,25 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { Directive, Host, HostListener, OnDestroy, OnInit, Optional } from '@angular/core';
+
+import { MenuManagerService } from '../components/shared/services/menu-manager.service';
+
+@Directive({
+    selector: '[fwMenuRegister]',
+    standalone: true,
+})
+export class MenuRegisterDirective implements OnInit, OnDestroy {
+    constructor(@Optional() @Host() private trigger: CdkMenuTrigger, @Optional()private menuManager: MenuManagerService) {}
+
+    @HostListener('click')
+    private onClick(): void {
+        this.menuManager?.closeAllExcept(this.trigger);
+    }
+
+    ngOnInit(): void {
+        this.menuManager?.register(this.trigger);
+    }
+
+    ngOnDestroy(): void {
+        this.menuManager?.unregister(this.trigger);
+    }
+}

package/src/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Project Vision</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+</head>
+
+<body class="vision-light-theme">
+  <app-root></app-root>
+</body>
+
+</html>

package/src/storybook.helper.ts

@@ -0,0 +1,35 @@
+/* eslint-disable */
+import { InputSignalWithTransform, InputSignal, EventEmitter } from '@angular/core';
+import { useEffect } from 'react';
+
+/**
+ * Helper function for getting storybook to recognize singal inputs
+ * @see https://stackoverflow.com/questions/78379300/how-do-i-use-angular-input-signals-with-storybook
+ * @param argOverrides args you want to manually pass to the story
+ * @returns
+ */
+export function toArgs<Component>(
+    argOverrides: Partial<TransformSignalInputType<TransformEventType<Component>>> = {},
+): TransformEventType<Component> {
+    return argOverrides as unknown as TransformEventType<Component>;
+}
+
+/** Convert event emitter to callback for storybook */
+type TransformEventType<T> = {
+    [K in keyof T]: T[K] extends EventEmitter<infer E> ? (e: E) => void : T[K];
+};
+
+/** Convert any input signal into the held type of the signal */
+type TransformSignalInputType<T> = {
+    [K in keyof T]: TransformInputType<T[K]>;
+};
+
+
+// Type to extract the type from InputSignal or InputSignalWithTransform
+type TransformInputType<T> =
+    T extends InputSignalWithTransform<infer U, any>
+        ? U
+        : T extends InputSignal<infer U>
+          ? U
+          : T;
+/* eslint-enable */