v0.4.8 react 18 final build

Author: Artem-K-Koltunov

.storybook/main.ts

@@ -3,96 +3,24 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@storybook/addon-webpack5-compiler-swc',
-    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    '@storybook/addon-viewport'
   ],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {},
-  },
-  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'),
+    options: {
+      builder: {
+        useSWC: true,
       },
-    };
-
-    return config;
+    },
+  },
+  docs: {
+    autodocs: 'tag',
   },
+  staticDirs: ['../public'],
 };
-
 export default config;

.storybook/preview.ts

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

babel.config.js

@@ -1,17 +1,5 @@
 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;
 }

global.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;
 }