v0.5.1 hotfix: types for JS SDK v2.20.0

Author: Artem-K-Koltunov

.storybook/main.ts

@@ -3,24 +3,96 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/preset-create-react-app',
+    '@storybook/addon-webpack5-compiler-swc',
     '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
     '@storybook/addon-interactions',
-    '@storybook/addon-viewport'
   ],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
+    options: {},
   },
-  docs: {
-    autodocs: 'tag',
+  webpackFinal: async (config) => {
+    // ✅ Гарантируем, что module и module.rules существуют
+    if (!config.module) {
+      config.module = { rules: [] };
+    }
+    if (!config.module.rules) {
+      config.module.rules = [];
+    }
+
+    // ✅ Удаляем встроенные Storybook'ом правила для SVG и других медиафайлов
+    config.module.rules = config.module.rules.filter(
+      (rule) =>
+        rule &&
+        typeof rule === 'object' &&
+        'test' in rule &&
+        rule.test instanceof RegExp &&
+        !rule.test.toString().includes(
+          '(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)'
+        )
+    );
+
+    // ✅ Поддержка SVG как React-компонентов (если импортируется с `?react`)
+    config.module.rules.unshift({
+      test: /\.svg$/i,
+      oneOf: [
+        {
+          resourceQuery: /react/, // 🔥 `?react` → импорт как React-компонент
+          use: [
+            {
+              loader: '@svgr/webpack',
+              options: {
+                icon: true,
+                esModule: true,
+              },
+            },
+          ],
+        },
+        {
+          // 🔥 Обычные импорты SVG без `?react` → обрабатываются как файлы
+          type: 'asset/resource',
+        },
+      ],
+    });
+
+    // ✅ Восстанавливаем обработку PNG, JPG, шрифтов и других медиафайлов
+    config.module.rules.push({
+      test: /\.(png|jpg|jpeg|gif|woff|woff2|eot|ttf)$/i,
+      type: 'asset/resource',
+    });
+
+    // ✅ Поддержка SCSS/SASS
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+    });
+
+    // ✅ Поддержка Babel для JS/TS файлов
+    config.module.rules.push({
+      test: /\.(ts|tsx|js|jsx)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'babel-loader',
+      },
+    });
+
+    // ✅ Поддержка alias
+    if (!config.resolve) {
+      config.resolve = {};
+    }
+    config.resolve = {
+      ...config.resolve,
+      extensions: ['.tsx', '.ts', '.js', '.jsx', '.scss', '.css', '.svg'],
+      alias: {
+        ...config.resolve?.alias,
+        path: require.resolve('path-browserify'),
+      },
+    };
+
+    return config;
   },
-  staticDirs: ['../public'],
 };
+
 export default config;

.storybook/preview.ts

@@ -1,15 +1,20 @@
 import type { Preview } from '@storybook/react';
+import { fn } from '@storybook/test';
 import '../src/index.scss';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    actions: {
+      onClick: fn(),
+      onChange: fn(),
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    viewMode: 'docs',
   },
 };
 

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',      // Поддержка современных возможностей JavaScript
+    '@babel/preset-react',    // Добавляем поддержку JSX
+    '@babel/preset-typescript' // Поддержка TypeScript
+  ],
+};

global.d.ts

@@ -1,5 +1,17 @@
 type Dictionary<T> = Record<string, T>;
 
+declare module "*.svg" {
+  import React from "react";
+  const content: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+  export default content;
+}
+
+declare module "*.svg?react" {
+  import React from "react";
+  const content: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+  export default content;
+}
+
 interface Window {
   webkitAudioContext: typeof AudioContext;
 }

media-recorder-js.d.ts

@@ -1,79 +1,79 @@
 declare module 'media-recorder-js' {
   interface QBMediaRecorderConstructorProps {
     /** Preferred MIME type */
-    mimeType?: string;
-    workerPath?: string;
+    mimeType?: string
+    workerPath?: string
     /**
      * The minimum number of milliseconds of data to return
      * in a single Blob, fire 'ondataavaible' callback
      * (isn't need to use with 'audio/wav' of 'audio/mp3')
      *
      * @default 1000
      */
-    timeslice?: number;
+    timeslice?: number
     /**
      * What to do with a muted input MediaStreamTrack,
      * e.g. insert black frames/zero audio volume in the recording
      * or ignore altogether
      *
      * @default true
      */
-    ignoreMutedMedia?: boolean;
+    ignoreMutedMedia?: boolean
     /** Recording start event handler */
-    onstart?: VoidFunction;
+    onstart?: VoidFunction
     /** Recording stop event handler */
-    onstop?: (file: Blob) => void;
+    onstop?: (file: Blob) => void
     /** Recording pause event handler */
-    onpause?: VoidFunction;
+    onpause?: VoidFunction
     /** Recording resume event handler */
-    onresume?: VoidFunction;
+    onresume?: VoidFunction
     /** Error event handler */
-    onerror?: (error: unknown) => void;
+    onerror?: (error: unknown) => void
     /**
      * `dataavailable` event handler.
      * The Blob of recorded data is contained in this event (callback
      * isn't supported if use 'audio/wav' of 'audio/mp3' for recording)
      */
-    ondataavailable?: (event: { data: Blob }) => void;
+    ondataavailable?: (event: { data: Blob }) => void
   }
 
   class QBMediaRecorder {
-    constructor(config: QBMediaRecorderConstructorProps);
+    constructor(config: QBMediaRecorderConstructorProps)
 
     /**
      * Switch recording Blob objects to the specified
      * MIME type if `MediaRecorder` support it.
      */
-    toggleMimeType(mimeType: string): void;
+    toggleMimeType(mimeType: string): void
 
     /**
      * Returns current `MediaRecorder` state
      */
-    getState(): 'inactive' | 'recording' | 'paused';
+    getState(): 'inactive' | 'recording' | 'paused'
 
     /**
      * Starts recording a stream.
      * Fires `onstart` callback.
      */
-    start(stream: MediaStream): void;
+    start(stream: MediaStream): void
 
     /**
      * Stops recording a stream
      *
      * @fires `onstop` callback and passing there Blob recorded
      */
-    stop(): void;
+    stop(): void
 
     /** Pausing stream recording */
-    pause(): void;
+    pause(): void
 
     /** Resumes stream recording */
-    resume(): void;
+    resume(): void
 
     /**
      * Change record source
      */
-    change(stream: MediaStream): void;
+    change(stream: MediaStream): void
 
     /**
      * Create a file from blob and download as file.
@@ -82,9 +82,9 @@ declare module 'media-recorder-js' {
      * @param {string} filename Name of video file to be downloaded
      * (default to `Date.now()`)
      */
-    download(filename?: string): void;
+    download(filename?: string): void
 
-    _getBlobRecorded(): Blob;
+    _getBlobRecorded(): Blob
 
     callbacks: Pick<
       QBMediaRecorderConstructorProps,
@@ -94,19 +94,19 @@ declare module 'media-recorder-js' {
       | 'onresume'
       | 'ondataavailable'
       | 'onerror'
-    >;
+    >
 
     /**
      * Checks capability of recording in the environment.
      * Checks `MediaRecorder`, `MediaRecorder.isTypeSupported` and `Blob`.
      */
-    static isAvailable(): boolean;
+    static isAvailable(): boolean
 
     /**
      * Checks if AudioContext API is available.
      * Checks `window.AudioContext` or `window.webkitAudioContext`.
      */
-    static isAudioContext(): boolean;
+    static isAudioContext(): boolean
     /**
      * The `QBMediaRecorder.isTypeSupported()` static method returns
      * a Boolean which is true if the MIME type specified is one
@@ -120,14 +120,14 @@ declare module 'media-recorder-js' {
      * agent is incapable of recording the specified format.
      */
 
-    static isTypeSupported(mimeType: string): boolean;
+    static isTypeSupported(mimeType: string): boolean
 
     /**
      * Return supported mime types
      * @param type video or audio (dafault to 'video')
      */
-    static getSupportedMimeTypes(type: 'audio' | 'video' = 'video'): string[];
+    static getSupportedMimeTypes(type: 'audio' | 'video' = 'video'): string[]
   }
 
-  export default QBMediaRecorder;
+  export default QBMediaRecorder
 }