vision-accessibility 1.0.0 → 1.0.2

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,WAAW,CAAC;AACrE,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,oBAAoB;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,gCAAgC;IAChC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,wBAAwB;IACxB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,0BAA0B;IAC1B,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAClE,8CAA8C;IAC9C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,wBAAwB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,wBAAwB;IACxB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,qCAAqC;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,qBAK5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,WAAW,CAAC;AACrE,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,oBAAoB;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,gCAAgC;IAChC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,wBAAwB;IACxB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,0BAA0B;IAC1B,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAClE,8CAA8C;IAC9C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,wBAAwB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC;CACtE;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,wBAAwB;IACxB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,qCAAqC;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,qBAK5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,2BAA2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vision-accessibility",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Универсальный компонент панели доступности для слабовидящих пользователей",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -15,7 +15,9 @@
     "dev": "vite build --watch",
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "accessibility",
@@ -26,33 +28,39 @@
     "слабовидящие",
     "доступность"
   ],
-  "author": "Your Name",
+  "author": "Siyan Roman",
   "license": "MIT",
   "peerDependencies": {
+    "classnames": ">=2.0.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-onboarding": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.15",
+    "@storybook/test": "^8.6.15",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.0",
     "eslint": "^8.0.0",
     "eslint-plugin-react": "^7.0.0",
     "eslint-plugin-react-hooks": "^4.0.0",
+    "react-docgen-typescript": "^2.4.0",
     "sass": "^1.69.0",
+    "storybook": "^8.6.14",
     "terser": "^5.46.0",
     "typescript": "^5.0.0",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.0.0"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/your-username/vision-accessibility.git"
-  },
-  "bugs": {
-    "url": "https://github.com/your-username/vision-accessibility/issues"
-  },
-  "homepage": "https://github.com/your-username/vision-accessibility#readme"
+  "dependencies": {
+    "classnames": ">=2.0.1"
+  }
 }

package/src/components/AccessibilityPanel/AccessibilityPanel.module.scss

@@ -6,8 +6,6 @@
 .stickyContainer {
   position: fixed;
   top: 70px;
-  right: 0;
-  left: 0;
   pointer-events: none;
   z-index: 1000;
 
@@ -33,15 +31,33 @@
   pointer-events: auto;
 
   // Позиционирование панели
-  &.topRight {
-    margin-left: auto;
-    margin-right: $spacing-xl;
-  }
-
-  &.topLeft {
-    margin-left: $spacing-xl;
-    margin-right: auto;
-  }
+    &.top-right {
+      margin-left: auto;
+      margin-right: $spacing-xl;
+    }
+  
+    &.top-left {
+      margin-left: $spacing-xl;
+      margin-right: auto;
+    }
+    
+    &.bottom-right {
+      margin-left: auto;
+      margin-right: $spacing-xl;
+      position: fixed;
+      top: auto;
+      bottom: $spacing-xl;
+      width: 360px;
+    }
+    
+    &.bottom-left {
+      margin-left: $spacing-xl;
+      margin-right: auto;
+      position: fixed;
+      top: auto;
+      bottom: $spacing-xl;
+      width: 360px;
+    }
 
   // Адаптивность для мобильных устройств
   @include respond-down(md) {
@@ -50,8 +66,10 @@
     margin-left: $spacing-lg;
     margin-right: $spacing-lg;
     
-    &.topRight,
-    &.topLeft {
+    &.top-right,
+    &.top-left,
+    &.bottom-right,
+    &.bottom-left {
       margin-left: $spacing-lg;
       margin-right: $spacing-lg;
     }
@@ -149,7 +167,7 @@
 }
 
 // Высококонтрастная тема - адаптация стилей только для панели
-:global(.accessibility-high-contrast) .panel {
+.panel.highContrastMode {
   background: $black !important;
   border-color: $white !important;
   color: $white !important;

package/src/components/AccessibilityPanel/AccessibilityPanel.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AccessibilityPanel } from "./AccessibilityPanel";
+import { useState } from "react";
+
+const meta = {
+  title: "Components/AccessibilityPanel",
+  component: AccessibilityPanel,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: ["top-left", "top-right", "bottom-left", "bottom-right"],
+    },
+  },
+} satisfies Meta<typeof AccessibilityPanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Оборачиваем в декоратор для обеспечения контекста и управления состоянием
+const WithProviderAndControls = (Story: any, context: any) => {
+  const [isOpen, setIsOpen] = useState(context.args.isOpen);
+
+  const togglePanel = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <button onClick={togglePanel} style={{ marginBottom: "20px" }}>
+        {isOpen ? "Закрыть панель" : "Открыть панель доступности"}
+      </button>
+
+      <Story
+        {...context}
+        args={{
+          ...context.args,
+          isOpen,
+          onClose: () => setIsOpen(false),
+        }}
+      />
+
+      <div>
+        <h1 style={{ color: 'red' }}>Тестовый заголовок</h1>
+        <p>Это тестовая страница для демонстрации работы панели доступности.</p>
+        <p>
+          Вы можете изменить настройки в панели и увидеть результат на этой
+          странице.
+        </p>
+        
+        <div style={{ marginTop: '20px' }}>
+          <h2>Пример изображения</h2>
+          <img
+            src="https://placehold.co/300x200/FF0000/FFFFFF?text=Цветная+картинка"
+            alt="Тестовое изображение для демонстрации функции показа/скрытия изображений"
+            style={{ maxWidth: '100%', height: 'auto' }}
+          />
+          <p>Это цветная картинка, которая будет скрываться при включении опции "Скрывать изображения"</p>
+        </div>
+        
+        <div style={{ marginTop: '20px' }}>
+          <h2>Еще немного контента</h2>
+          <p>Вот еще несколько абзацев текста для демонстрации изменения размера шрифта:</p>
+          <p>Первый параграф с обычным текстом для проверки работы изменения размера шрифта.</p>
+          <p>Второй параграф содержит немного другой текст, чтобы можно было увидеть эффект от изменения размера шрифта.</p>
+          <ul>
+            <li>Это элемент списка 1</li>
+            <li>Это элемент списка 2</li>
+            <li>Это элемент списка 3</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    position: "top-right",
+    onClose: () => console.log("Panel closed"),
+  },
+  decorators: [WithProviderAndControls],
+};
+
+export const TopLeftPosition: Story = {
+  args: {
+    isOpen: true,
+    position: "top-left",
+    onClose: () => console.log("Panel closed"),
+  },
+  decorators: [WithProviderAndControls],
+};
+
+export const BottomRightPosition: Story = {
+  args: {
+    isOpen: true,
+    position: "bottom-right",
+    onClose: () => console.log("Panel closed"),
+  },
+  decorators: [WithProviderAndControls],
+};

package/src/components/AccessibilityPanel/AccessibilityPanel.tsx

@@ -10,12 +10,16 @@
 
 import React, { useEffect, useRef } from 'react';
 import { AccessibilityPanelProps } from '../../types';
-import { AccessibilityProvider } from '../../context/AccessibilityContext';
+import { AccessibilityProvider, useAccessibilityContext } from '../../context/AccessibilityContext';
 import { AccessibilityToggle } from '../AccessibilityToggle/AccessibilityToggle';
 import { ColorSchemeControl } from '../ColorSchemeControl/ColorSchemeControl';
 import { FontSizeControl } from '../FontSizeControl/FontSizeControl';
 import { ImageControl } from '../ImageControl/ImageControl';
-import styles from './AccessibilityPanel.module.scss';
+import cn from 'classnames';
+import * as stylesImport from './AccessibilityPanel.module.scss';
+
+// Обеспечиваем безопасный доступ к стилям
+const styles = typeof stylesImport === 'object' && stylesImport.default ? stylesImport.default : stylesImport.default || stylesImport;
 
 /**
  * Внутренний компонент панели доступности
@@ -88,24 +92,30 @@ const AccessibilityPanelInner: React.FC<AccessibilityPanelProps> = ({
     return null;
   }
 
+  const { settings } = useAccessibilityContext();
+
   return (
-    <div className={`${styles.stickyContainer} accessibility-panel-container`}>
-      <div 
-        ref={panelRef}
-        className={`${styles.panel} ${styles[position]}`}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="accessibility-panel-title"
-        aria-describedby="accessibility-panel-description"
-      >
-        <div className={styles.header}>
-          <h3 id="accessibility-panel-title" className={styles.title}>
+      <div className={cn(styles.stickyContainer)}>
+        <div
+          ref={panelRef}
+          className={cn(
+            styles.panel,
+            styles[position],
+            settings.colorScheme === 'high-contrast' && styles.highContrastMode
+          )}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="accessibility-panel-title"
+          aria-describedby="accessibility-panel-description"
+        >
+        <div className={cn(styles.header)}>
+          <h3 id="accessibility-panel-title" className={cn(styles.title)}>
             Настройки доступности
           </h3>
           
           <button
             onClick={handleCloseClick}
-            className={styles.closeButton}
+            className={cn(styles.closeButton)}
             aria-label="Закрыть панель настроек доступности"
             type="button"
           >
@@ -113,17 +123,17 @@ const AccessibilityPanelInner: React.FC<AccessibilityPanelProps> = ({
           </button>
         </div>
 
-        <div 
-          id="accessibility-panel-description" 
-          className={styles.description}
+        <div
+          id="accessibility-panel-description"
+          className={cn(styles.description)}
         >
           Настройте отображение страницы для улучшения доступности
         </div>
 
-        <div className={styles.content}>
+        <div className={cn(styles.content)}>
           <AccessibilityToggle />
           
-          <div className={styles.controls}>
+          <div className={cn(styles.controls)}>
             <ColorSchemeControl />
             <FontSizeControl />
             <ImageControl />

package/src/components/AccessibilityToggle/AccessibilityToggle.module.scss

@@ -110,7 +110,7 @@
 }
 
 // Высококонтрастная тема - адаптация стилей
-:global(.accessibility-high-contrast) .accessibilityToggle {
+.accessibilityToggle.highContrastMode {
   border-bottom-color: $white !important;
 
   .toggleLabel {

package/src/components/AccessibilityToggle/AccessibilityToggle.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AccessibilityToggle } from './AccessibilityToggle';
+import { AccessibilityProvider } from '../../context/AccessibilityContext';
+
+const meta = {
+  title: 'Components/AccessibilityToggle',
+  component: AccessibilityToggle,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <AccessibilityProvider>
+        <div style={{ padding: '20px' }}>
+          <Story />
+        </div>
+      </AccessibilityProvider>
+    ),
+  ],
+} satisfies Meta<typeof AccessibilityToggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    className: 'custom-toggle-class',
+  },
+};

package/src/components/AccessibilityToggle/AccessibilityToggle.tsx

@@ -43,7 +43,7 @@ export const AccessibilityToggle: React.FC<AccessibilityToggleProps> = ({
   };
 
   return (
-    <div className={`${styles.accessibilityToggle} ${className || ''}`}>
+    <div className={`${styles.accessibilityToggle} ${className || ''} ${settings.colorScheme === 'high-contrast' ? styles.highContrastMode : ''}`}>
       <div className={styles.toggleContainer}>
         <label className={styles.toggleLabel}>
           <input

package/src/components/ColorSchemeControl/ColorSchemeControl.module.scss

@@ -136,7 +136,7 @@
 }
 
 // Высококонтрастная тема - адаптация стилей
-:global(.accessibility-high-contrast) .colorSchemeControl {
+.colorSchemeControl.highContrastMode {
   .title {
     color: $white !important;
   }

package/src/components/ColorSchemeControl/ColorSchemeControl.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorSchemeControl } from './ColorSchemeControl';
+import { AccessibilityProvider } from '../../context/AccessibilityContext';
+
+const meta = {
+  title: 'Components/ColorSchemeControl',
+  component: ColorSchemeControl,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <AccessibilityProvider>
+        <div style={{ padding: '20px' }}>
+          <Story />
+        </div>
+      </AccessibilityProvider>
+    ),
+  ],
+} satisfies Meta<typeof ColorSchemeControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    className: 'custom-color-scheme-class',
+  },
+};

package/src/components/ColorSchemeControl/ColorSchemeControl.tsx

@@ -71,7 +71,7 @@ export const ColorSchemeControl: React.FC<ColorSchemeControlProps> = ({
   };
 
   return (
-    <div className={`${styles.colorSchemeControl} ${className || ''} ${!isEnabled ? styles.disabled : ''}`}>
+    <div className={`${styles.colorSchemeControl} ${className || ''} ${!isEnabled ? styles.disabled : ''} ${colorScheme === 'high-contrast' ? styles.highContrastMode : ''}`}>
       <h4 className={styles.title}>
         Цветовая схема
       </h4>

package/src/components/FontSizeControl/FontSizeControl.module.scss

@@ -136,7 +136,7 @@
 }
 
 // Высококонтрастная тема - адаптация стилей
-:global(.accessibility-high-contrast) .fontSizeControl {
+.fontSizeControl.highContrastMode {
   .title {
     color: $white !important;
   }

package/src/components/FontSizeControl/FontSizeControl.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FontSizeControl } from './FontSizeControl';
+import { AccessibilityProvider } from '../../context/AccessibilityContext';
+
+const meta = {
+  title: 'Components/FontSizeControl',
+  component: FontSizeControl,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <AccessibilityProvider>
+        <div style={{ padding: '20px' }}>
+          <Story />
+        </div>
+      </AccessibilityProvider>
+    ),
+  ],
+} satisfies Meta<typeof FontSizeControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    className: 'custom-font-size-class',
+  },
+};

package/src/components/FontSizeControl/FontSizeControl.tsx

@@ -71,7 +71,7 @@ export const FontSizeControl: React.FC<FontSizeControlProps> = ({
   };
 
   return (
-    <div className={`${styles.fontSizeControl} ${className || ''} ${!isEnabled ? styles.disabled : ''}`}>
+    <div className={`${styles.fontSizeControl} ${className || ''} ${!isEnabled ? styles.disabled : ''} ${settings.colorScheme === 'high-contrast' ? styles.highContrastMode : ''}`}>
       <h4 className={styles.title}>
         Размер шрифта
       </h4>

package/src/components/ImageControl/ImageControl.module.scss

@@ -119,7 +119,7 @@
 }
 
 // Высококонтрастная тема - адаптация стилей
-:global(.accessibility-high-contrast) .imageControl {
+.imageControl.highContrastMode {
   .title {
     color: $white !important;
   }

package/src/components/ImageControl/ImageControl.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ImageControl } from './ImageControl';
+import { AccessibilityProvider } from '../../context/AccessibilityContext';
+
+const meta = {
+  title: 'Components/ImageControl',
+  component: ImageControl,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <AccessibilityProvider>
+        <div style={{ padding: '20px' }}>
+          <Story />
+          <div style={{ marginTop: '20px' }}>
+            <h1 style={{ color: 'red' }}>Демонстрация работы переключателя изображений</h1>
+            <p>Включите/выключите опцию "Показывать изображения" и посмотрите, как изображение скрывается/появляется:</p>
+            <img
+              src="https://placehold.co/300x200/00FF00/FFFFFF?text=Тестовое+изображение"
+              alt="Тестовое изображение для демонстрации функции показа/скрытия изображений"
+              style={{ maxWidth: '100%', height: 'auto', marginTop: '10px' }}
+            />
+          </div>
+        </div>
+      </AccessibilityProvider>
+    ),
+  ],
+} satisfies Meta<typeof ImageControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    className: 'custom-image-control-class',
+  },
+};

package/src/components/ImageControl/ImageControl.tsx

@@ -43,7 +43,7 @@ export const ImageControl: React.FC<ImageControlProps> = ({
   };
 
   return (
-    <div className={`${styles.imageControl} ${className || ''} ${!isEnabled ? styles.disabled : ''}`}>
+    <div className={`${styles.imageControl} ${className || ''} ${!isEnabled ? styles.disabled : ''} ${settings.colorScheme === 'high-contrast' ? styles.highContrastMode : ''}`}>
       <h4 className={styles.title}>
         Изображения
       </h4>