fix: lint warnings (#520)

* chore: add type annotations

* chore: remove non used imports

* fix: placement prop

* fix: use stable mql in media query handler

* chore: remove alert

* chore: replace deprecated rules

.stylelintrc

@@ -9,10 +9,10 @@
   ],
   "rules": {
     "declaration-empty-line-before": null,
-    "declaration-property-unit-whitelist": {
+    "declaration-property-unit-allowed-list": {
       "/.*/": ["rem", "deg", "fr", "ms", "%", "px", "vw", "vh"]
     },
-    "declaration-property-value-blacklist": {
+    "declaration-property-value-disallowed-list": {
       "/.*/": ["(\\d+[1]+px|[^1]+px)"]
     },
     "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }]

src/components/Accordion/docs/Accordion.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Accordion } from '../Accordion';
 

src/components/Banner/docs/Banner.stories.tsx

@@ -34,7 +34,7 @@ const meta: Meta = {
         )
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div
                 style={{
                     willChange: 'transform',

src/components/Breadcrumbs/docs/DefaultBreadcrumbs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Breadcrumbs } from '../Breadcrumbs';
+import { Breadcrumbs, BreadcrumbsProps } from '../Breadcrumbs';
 
-export const DefaultBreadcrumbs = ({ ...props }) => (
+export const DefaultBreadcrumbs: React.FC<BreadcrumbsProps> = ({ ...props }: BreadcrumbsProps) => (
     <Breadcrumbs {...props}>
         <Breadcrumbs.Link href="/path">Path</Breadcrumbs.Link>
         <Breadcrumbs.Link href="/path/to">to</Breadcrumbs.Link>

src/components/ColorScheme/docs/CurrentScheme.tsx

@@ -5,13 +5,13 @@ import { Text } from '../../Text/Text';
 const evalColorSchemeQuery = () => window.matchMedia('(prefers-color-scheme: dark)');
 const getCurrentScheme = (query: MediaQueryList): 'dark' | 'light' => (query.matches ? 'dark' : 'light');
 
-export const CurrentScheme = () => {
+export const CurrentScheme: React.FC = () => {
     const [currentScheme, setCurrentScheme] = useState(getCurrentScheme(evalColorSchemeQuery()));
 
     useEffect(() => {
         const mql = evalColorSchemeQuery();
-        const onMediaQueryChange = (e: MediaQueryListEvent) => {
-            setCurrentScheme(getCurrentScheme(e));
+        const onMediaQueryChange = () => {
+            setCurrentScheme(getCurrentScheme(mql));
         };
 
         mql.addEventListener('change', onMediaQueryChange);

src/components/Dimming/docs/Dimming.stories.tsx

@@ -33,7 +33,7 @@ const meta: Meta = {
         }
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             // use a workaround with `willChange: transform` to keep the fixed positioned element inside the container
             <div style={{ width: '15rem', height: '21rem', willChange: 'transform' }}>
                 <Story />

src/components/Divider/docs/Divider.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta = {
         }
     },
     decorators: [
-        (Story, context) => (
+        (Story: React.FC, context: { args: { vertical?: boolean } }): JSX.Element => (
             <Box display={context.args.vertical ? 'flex' : undefined}>
                 <Text>One</Text>
                 <Story />

src/components/FilePicker/docs/FilePicker.stories.tsx

@@ -36,7 +36,7 @@ export const WithMultilineLabel: Story = {
         label: 'A very long label which can stretch to more than one line without any issues'
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <Box width="20rem">
                 <Story />
             </Box>

src/components/Headline/Headline.tsx

@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { compose, margin, system, MarginProps, textAlign, TextAlignProps, ResponsiveValue } from 'styled-system';
 import { theme } from '../../essentials/theme';
 import { get } from '../../utils/themeGet';
-import { getSemanticValue } from '../../utils/cssVariables';
 
 interface HeadlineProps extends ComponentPropsWithoutRef<'h1'>, MarginProps, TextAlignProps {
     /**

src/components/Modal/docs/Modal.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta = {
     title: 'Components/Modal',
     component: Modal,
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ willChange: 'transform', height: '150px', border: '1px dashed gray' }}>
                 <Story />
             </div>

src/components/Offcanvas/docs/Offcanvas.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta = {
     title: 'Components/Offcanvas',
     component: Offcanvas,
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ willChange: 'transform', height: '150px', border: '1px dashed gray' }}>
                 <Story />
             </div>

src/components/Pagination/docs/Pagination.stories.tsx

@@ -48,7 +48,7 @@ export const WithPageSizeSelector: Story = {
         ]
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ height: '200px' }}>
                 <Story />
             </div>

src/components/Table/docs/Table.stories.tsx

@@ -32,32 +32,32 @@ export default meta;
 type TableStory = StoryObj<typeof Table>;
 
 export const Default: TableStory = {
-    render: DefaultTable
+    render: () => <DefaultTable />
 };
 
 export const WithActiveRow: TableStory = {
-    render: ActiveRowTable
+    render: () => <ActiveRowTable />
 };
 
 export const WithComplexData: TableStory = {
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ maxWidth: '100%', overflowX: 'auto' }}>
                 <Story />
             </div>
         )
     ],
-    render: ComplexDataTable
+    render: () => <ComplexDataTable />
 };
 
 export const WithSkeletonLoader: TableStory = {
-    render: SkeletonTable
+    render: () => <SkeletonTable />
 };
 
 export const WithSortableTable: TableStory = {
-    render: SortableTable
+    render: () => <SortableTable />
 };
 
 export const WithDefaultSortedTable: TableStory = {
-    render: SortableTableDefault
+    render: () => <SortableTableDefault />
 };

src/components/Tooltip/docs/Tooltip.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta = {
         content: 'This is a regular tooltip 🏓'
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ height: '100px', display: 'flex', alignItems: 'center' }}>
                 <Story />
             </div>
@@ -39,6 +39,6 @@ export const AlwaysVisible: Story = {
 
 export const WithCustomPosition: Story = {
     args: {
-        placement: 'bottom-center'
+        placement: 'bottom-end'
     }
 };

src/components/experimental/ComboBox/docs/ComboBox.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta = {
         layout: 'centered'
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ width: '590px' }}>
                 <Story />
             </div>

src/components/experimental/DateField/docs/DateField.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta = {
         layout: 'centered'
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ width: '168px' }}>
                 <Story />
             </div>

src/components/experimental/Dialog/docs/Dialog.stories.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { DialogTrigger } from 'react-aria-components';
 import { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Dialog } from '../Dialog';

src/components/experimental/Divider/docs/Divider.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof Divider>;
 
 export const Default: Story = {
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ width: '6rem', height: '6rem' }}>
                 <Text>One</Text>
                 <Story />
@@ -32,7 +32,7 @@ export const Default: Story = {
 
 export const Inset: Story = {
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ width: '6rem', height: '6rem' }}>
                 <Text>One</Text>
                 <Story />
@@ -48,7 +48,7 @@ export const Inset: Story = {
 
 export const MiddleInset: Story = {
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ width: '6rem', height: '6rem' }}>
                 <Text>One</Text>
                 <Story />
@@ -67,7 +67,7 @@ export const VerticalDivider: Story = {
         vertical: true
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div
                 style={{
                     display: 'flex',
@@ -86,7 +86,7 @@ export const VerticalDivider: Story = {
 
 export const VerticalInset: Story = {
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div
                 style={{
                     display: 'flex',
@@ -109,7 +109,7 @@ export const VerticalInset: Story = {
 
 export const VerticalMiddleInset: Story = {
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div
                 style={{
                     display: 'flex',

src/components/experimental/IconButton/docs/IconButton.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta = {
     },
     args: {
         Icon: TrashIcon,
-        onPress: () => alert('Clicked!'),
+        onPress: () => {},
         isDisabled: false,
         isLoading: false
     }

src/components/experimental/Select/docs/Select.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta = {
         layout: 'centered'
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ width: '291px' }}>
                 <Story />
             </div>

src/components/experimental/TextField/docs/TextField.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta = {
         layout: 'centered'
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ width: '590px' }}>
                 <Story />
             </div>

src/components/experimental/TimeField/docs/TimeField.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta = {
         layout: 'centered'
     },
     decorators: [
-        Story => (
+        (Story: React.FC): JSX.Element => (
             <div style={{ width: '150px' }}>
                 <Story />
             </div>

src/docs/Source.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { Source as StorybookSource } from '@storybook/blocks';
 import { useDarkMode } from 'storybook-dark-mode';
 
-export const Source = props => {
+interface SourceProps {
+    [key: string]: unknown;
+}
+
+export const Source: React.FC<SourceProps> = props => {
     const isDark = useDarkMode();
     return <StorybookSource {...props} dark={isDark} />;
 };

src/essentials/Colors/globalStyles.ts

@@ -1,4 +1,4 @@
-import { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle, DefaultTheme, GlobalStyleComponent } from 'styled-components';
 
 import {
     generateBareTierCssVariables,
@@ -12,7 +12,7 @@ export const createThemeGlobalStyle = (
     bareVariables: TokenObject,
     lightScheme: SemanticColorsSchema,
     darkScheme: SemanticColorsSchema
-) => createGlobalStyle`
+): GlobalStyleComponent<Record<string, unknown>, DefaultTheme> => createGlobalStyle`
   :root {
     color-scheme: light;
     ${generateBareTierCssVariables(bareVariables)}

src/essentials/experimental/Colors.ts

@@ -165,7 +165,12 @@ type Accents = {
     onAccentDark?: SemanticColorsSchema['on-accent'];
 };
 
-export const createGlobalStyle = ({ accent, onAccent, accentDark, onAccentDark }: Accents) =>
+export const createGlobalStyle = ({
+    accent,
+    onAccent,
+    accentDark,
+    onAccentDark
+}: Accents): ReturnType<typeof createThemeGlobalStyle> =>
     createThemeGlobalStyle(
         ColorPalette,
         { ...SemanticColorsLight, accent, 'on-accent': onAccent },

src/essentials/experimental/globalStyles.ts

@@ -1,4 +1,4 @@
-import { createGlobalStyle, css, CSSObject } from 'styled-components';
+import { createGlobalStyle, css, CSSObject, GlobalStyleComponent, DefaultTheme } from 'styled-components';
 
 import { TokenObject } from '../../utils/cssVariables';
 import { generateBareCssVariables, generateSemanticCssVariables } from './cssVariables';
@@ -25,7 +25,7 @@ export const createThemeGlobalStyle = (
     bareVariables: TokenObject,
     lightScheme: SemanticColorsSchema,
     darkScheme: SemanticColorsSchema
-) => {
+): GlobalStyleComponent<Record<string, unknown>, DefaultTheme> => {
     const bareCssVariables = generateBareCssVariables(bareVariables);
     const semanticCssVariablesForLightTheme = generateSemanticCssVariables(lightScheme);
     const semanticCssVariablesForDarkTheme = generateSemanticCssVariables(darkScheme);