fix: resolve all storybook and react linting errors

Author: Shakya47

apps/storybook/eslint.config.js

@@ -8,7 +8,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default defineConfig([globalIgnores(['dist']), {
+export default defineConfig([globalIgnores(['dist', 'storybook-static']), {
   files: ['**/*.{ts,tsx}'],
   extends: [
     js.configs.recommended,

apps/storybook/src/stories/PipTrigger.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { PipTrigger, PipWrapper } from '@pip-it-up/react';
 import { expect, within } from '@storybook/test';
 
@@ -46,6 +46,7 @@ export const AsChild: Story = {
     ),
   },
   play: async ({ canvasElement }) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const canvas = within(canvasElement) as any;
     const button = canvas.getByRole('button', { name: /Custom Button Element/i });
     await expect(button).toBeInTheDocument();

apps/storybook/src/stories/PipWrapper.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { PipWrapper, PipTrigger } from '@pip-it-up/react';
 import { expect, within } from '@storybook/test';
 
@@ -40,6 +40,7 @@ export const Default: Story = {
     ),
   },
   play: async ({ canvasElement, step }) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const canvas = within(canvasElement) as any;
     const button = canvas.getByRole('button', { name: /Toggle PiP/i });
 

apps/storybook/vite.config.ts

@@ -1,4 +1,4 @@
-/// <reference types="vitest/config" />
+
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 

packages/react/tests/PipTrigger.test.tsx

@@ -41,7 +41,7 @@ describe('PipTrigger', () => {
 
     // The trigger might be in the main document, or the wrapper's content moved
     // Let's check both
-    const pipWin = (window as any).documentPictureInPicture.window;
+
     const { findByRole } = within(document.body);
     // Since trigger is outside the wrapper here, it stays in main document
     expect(await findByRole('button', { name: '⊠ Close' })).toBeInTheDocument();