chore: TS explicit modules stately and icons

packages/@react-stately/form/src/useFormValidationState.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {createContext, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {Context, createContext, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {Validation, ValidationErrors, ValidationFunction, ValidationResult} from '@react-types/shared';
 
 export const VALID_VALIDITY_STATE: ValidityState = {
@@ -39,9 +39,9 @@ export const DEFAULT_VALIDATION_RESULT: ValidationResult = {
   validationErrors: []
 };
 
-export const FormValidationContext = createContext<ValidationErrors>({});
+export const FormValidationContext: Context<ValidationErrors> = createContext<ValidationErrors>({});
 
-export const privateValidationStateProp = '__formValidationState' + Date.now();
+export const privateValidationStateProp: string = '__formValidationState' + Date.now();
 
 interface FormValidationProps<T> extends Validation<T> {
   builtinValidation?: ValidationResult,

packages/@react-stately/layout/src/ListLayout.ts

@@ -251,7 +251,7 @@ export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> exte
     this.validRect = this.requestedRect.copy();
   }
 
-  protected buildCollection(y = this.padding): LayoutNode[] {
+  protected buildCollection(y: number = this.padding): LayoutNode[] {
     let collection = this.virtualizer!.collection;
     let skipped = 0;
     let nodes: LayoutNode[] = [];

packages/@react-stately/table/src/TableUtils.ts

@@ -104,7 +104,7 @@ interface FlexItem {
  * @param getDefaultWidth - A function that returns the default width of a column by its index.
  * @param getDefaultMinWidth - A function that returns the default min width of a column by its index.
  */
-export function calculateColumnSizes(availableWidth: number, columns: IColumn[], changedColumns: Map<Key, ColumnSize>, getDefaultWidth?: (number) => ColumnSize | null | undefined, getDefaultMinWidth?: (number) => ColumnSize | null | undefined): number[] {
+export function calculateColumnSizes(availableWidth: number, columns: IColumn[], changedColumns: Map<Key, ColumnSize>, getDefaultWidth?: (index: number) => ColumnSize | null | undefined, getDefaultMinWidth?: (index: number) => ColumnSize | null | undefined): number[] {
   let hasNonFrozenItems = false;
   let flexItems: FlexItem[] = columns.map((column, index) => {
     let width: ColumnSize = (changedColumns.get(column.key) != null ? changedColumns.get(column.key) ?? '1fr' : column.width ?? column.defaultWidth ?? getDefaultWidth?.(index) ?? '1fr') as ColumnSize;

packages/@react-stately/toast/src/useToastState.ts

@@ -184,12 +184,12 @@ class Timer {
     this.callback = callback;
   }
 
-  reset(delay: number) {
+  reset(delay: number): void {
     this.remaining = delay;
     this.resume();
   }
 
-  pause() {
+  pause(): void {
     if (this.timerId == null) {
       return;
     }
@@ -199,7 +199,7 @@ class Timer {
     this.remaining -= Date.now() - this.startTime!;
   }
 
-  resume() {
+  resume(): void {
     if (this.remaining <= 0) {
       return;
     }

packages/@react-stately/tree/stories/useTreeState.stories.tsx

@@ -12,20 +12,21 @@
 
 import {Collection, Key, Node} from '@react-types/shared';
 import {Item} from '@react-stately/collections';
-import React, {useMemo, useRef} from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX, useMemo, useRef} from 'react';
 import {TreeCollection} from '../src/TreeCollection';
 import {usePress} from '@react-aria/interactions';
 import {useSelectableCollection, useSelectableItem} from '@react-aria/selection';
 import {useTreeState} from '../';
 
 export default {
   title: 'useTreeState'
-};
+} as Meta<typeof TreeExample>;
 
-export const KeyboardNavigation = () => <TreeExample />;
+export const KeyboardNavigation: StoryFn<typeof TreeExample> = () => <TreeExample />;
 
 
-function TreeExample(props = {}) {
+function TreeExample(props = {}): JSX.Element {
   return (
     <Tree {...props}>
       <Item key="1" title="Animals">

packages/@spectrum-icons/color/stories/IconsColor.stories.tsx

@@ -12,12 +12,13 @@
 
 import CalendarCheckColor from '../CalendarCheckColor';
 import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
 
 export default {
   title: 'Icons/Color'
-};
+} as Meta<typeof CalendarCheckColor>;
 
-export const ColorIconWithSizes = () => renderIconSizes(CalendarCheckColor, {'aria-label': 'Adobe Analytics Color'});
+export const ColorIconWithSizes: StoryFn<typeof CalendarCheckColor> = () => renderIconSizes(CalendarCheckColor, {'aria-label': 'Adobe Analytics Color'});
 
 ColorIconWithSizes.story = {
   name: 'Color icon with sizes'

packages/@spectrum-icons/express/chromatic/IconsExpress.chromatic.tsx

@@ -14,21 +14,22 @@ import Add from '../Add';
 import Alert from '@spectrum-icons/express/Alert';
 import React from 'react';
 import {Flex} from '@react-spectrum/layout';
+import { Meta, StoryFn } from '@storybook/react';
 
 export default {
   title: 'Icons/Express',
   parameters: {
     chromaticProvider: {express: true},
   }
-};
+} as Meta<typeof Add>;
 
-export const IconAddWithSizes = () => renderIconSizes(Add, { 'aria-label': 'Add' });
+export const IconAddWithSizes: StoryFn<typeof Add> = () => renderIconSizes(Add, { 'aria-label': 'Add' });
 
 IconAddWithSizes.story = {
   name: 'icon: Add with sizes',
 };
 
-export const Colors = () => (
+export const Colors: StoryFn<typeof Alert> = () => (
   <Flex gap="size-200">
     <Alert aria-label="info default" />
     <Alert color="informative" aria-label="info alert" />

packages/@spectrum-icons/express/stories/IconsExpress.stories.tsx

@@ -10,46 +10,47 @@
  * governing permissions and limitations under the License.
  */
 
+import { Meta, StoryFn } from '@storybook/react';
 import Add from '../Add';
 import Alert from '../Alert';
 import Bell from '../Bell';
 import React from 'react';
 
 export default {
   title: 'Icons/Express'
-};
+} as Meta<typeof Add>;
 
-export const IconAddWithSizes = () => renderIconSizes(Add, {'aria-label': 'Add'});
+export const IconAddWithSizes: StoryFn<typeof Add> = () => renderIconSizes(Add, {'aria-label': 'Add'});
 
 IconAddWithSizes.story = {
   name: 'icon: Add with sizes'
 };
 
-export const IconBellWithSizes = () => renderIconSizes(Bell, {'aria-label': 'Bell'});
+export const IconBellWithSizes: StoryFn<typeof Bell> = () => renderIconSizes(Bell, {'aria-label': 'Bell'});
 
 IconBellWithSizes.story = {
   name: 'icon: Bell with sizes'
 };
 
-export const IconAlertNegative = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'negative'});
+export const IconAlertNegative: StoryFn<typeof Alert> = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'negative'});
 
 IconAlertNegative.story = {
   name: 'icon: Alert negative'
 };
 
-export const IconAlertInformative = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'informative'});
+export const IconAlertInformative: StoryFn<typeof Alert> = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'informative'});
 
 IconAlertInformative.story = {
   name: 'icon: Alert informative'
 };
 
-export const IconAlertPositive = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'positive'});
+export const IconAlertPositive: StoryFn<typeof Alert> = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'positive'});
 
 IconAlertPositive.story = {
   name: 'icon: Alert positive'
 };
 
-export const IconAlertNotice = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'notice'});
+export const IconAlertNotice: StoryFn<typeof Alert> = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'notice'});
 
 IconAlertNotice.story = {
   name: 'icon: Alert notice'

packages/@spectrum-icons/workflow/chromatic/Workflow.chromatic.tsx

@@ -15,6 +15,7 @@ import Alert from '@spectrum-icons/workflow/Alert';
 import React from 'react';
 import {Flex} from '@react-spectrum/layout';
 import * as AllIcons from '../src';
+import { Meta, StoryFn } from '@storybook/react';
 
 let allIcons = Object.keys(AllIcons);
 let alphabet = [...Array(26)].map((val, i) => String.fromCharCode(i + 65));
@@ -29,15 +30,15 @@ export default {
   parameters: {
     chromaticProvider: {express: false},
   }
-};
+} as Meta<typeof Add>;
 
-export const IconAddWithSizes = () => renderIconSizes(Add, { 'aria-label': 'Add' });
+export const IconAddWithSizes: StoryFn<typeof Add> = () => renderIconSizes(Add, { 'aria-label': 'Add' });
 
 IconAddWithSizes.story = {
   name: 'icon: Add with sizes',
 };
 
-export const Colors = () => (
+export const Colors: StoryFn<typeof Alert> = () => (
   <Flex gap="size-200">
     <Alert aria-label="info default" />
     <Alert color="informative" aria-label="info alert" />
@@ -47,7 +48,7 @@ export const Colors = () => (
   </Flex>
 );
 
-export const AllWorkflow = () => (
+export const AllWorkflow: StoryFn<typeof Add> = () => (
   <Flex direction="column">
     {Object.keys(alphabetizedIcons).map((char) => (
       <div style={{ height: 'calc(12 * var(--spectrum-global-dimension-size-300))' }}>

packages/@spectrum-icons/workflow/stories/IconsWorkflow.stories.tsx

@@ -15,48 +15,49 @@ import Add from '../Add';
 import Alert from '../Alert';
 import Bell from '../Bell';
 import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
 
 export default {
   title: 'Icons/Workflow'
-};
+} as Meta<typeof Add>;
 
-export const IconAddWithSizes = () => renderIconSizes(Add, {'aria-label': 'Add'});
+export const IconAddWithSizes: StoryFn<typeof Add> = () => renderIconSizes(Add, {'aria-label': 'Add'});
 
 IconAddWithSizes.story = {
   name: 'icon: Add with sizes'
 };
 
-export const IconBellWithSizes = () => renderIconSizes(Bell, {'aria-label': 'Bell'});
+export const IconBellWithSizes: StoryFn<typeof Bell> = () => renderIconSizes(Bell, {'aria-label': 'Bell'});
 
 IconBellWithSizes.story = {
   name: 'icon: Bell with sizes',
 };
 
-export const Icon3DMaterialsWithSizes = () => renderIconSizes(Icon3DMaterials, {'aria-label': '3D Materials'});
+export const Icon3DMaterialsWithSizes: StoryFn<typeof Icon3DMaterials> = () => renderIconSizes(Icon3DMaterials, {'aria-label': '3D Materials'});
 
 Icon3DMaterialsWithSizes.story = {
   name: 'icon: _3DMaterials with sizes',
 };
 
-export const IconAlertNegative = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'negative'});
+export const IconAlertNegative: StoryFn<typeof Alert> = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'negative'});
 
 IconAlertNegative.story = {
   name: 'icon: Alert negative',
 };
 
-export const IconAlertInformative = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'informative'});
+export const IconAlertInformative: StoryFn<typeof Alert> = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'informative'});
 
 IconAlertInformative.story = {
   name: 'icon: Alert informative',
 };
 
-export const IconAlertPositive = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'positive'});
+export const IconAlertPositive: StoryFn<typeof Alert> = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'positive'});
 
 IconAlertPositive.story = {
   name: 'icon: Alert positive',
 };
 
-export const IconAlertNotice = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'notice'});
+export const IconAlertNotice: StoryFn<typeof Alert> = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'notice'});
 
 IconAlertNotice.story = {
   name: 'icon: Alert notice',