Package headless UI dev

frontend/.storybook/main.ts

@@ -1,17 +1,21 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-    'storybook-react-i18next'
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {}
-  },
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']
+    addons: [
+        '@storybook/addon-onboarding',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+        'storybook-react-i18next'
+    ],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {}
+    },
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    typescript: {
+    // Disable react-docgen to avoid errors with namespace exports and ObjectMethod patterns
+        reactDocgen: false
+    }
 };
 export default config;

frontend/src/modules/auth/view/ui/Auth/Auth.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import type { JSX } from 'react';
 import type { TAuthContent } from '../../../types/TAuthContent';

frontend/src/modules/auth/view/ui/Auth/AuthorizationMethodContent/AuthorizationMethodContent.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import type { TAuthProvider } from '@shared/query';
 import type { ChangeEvent } from 'react';

frontend/src/modules/auth/view/ui/Auth/InputUsernameContent/InputUsernameContent.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import type { ChangeEvent } from 'react';
 import { LoadingButton } from '@shared/ui/Button';

frontend/src/modules/auth/view/ui/Auth/VerificationCodeContent/VerificationCodeContent.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { ArrowIcon, EmailIcon } from '@shared/icons';
 

frontend/src/modules/auth/view/ui/AuthCallback/AuthCallback.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import type { JSX } from 'react';
 import { FadeTransition } from '@shared/ui/FadeTransition';

frontend/src/modules/auth/vm/useAuthorizationMethod.ts

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useUnit } from 'effector-react';
 import { useEffect, useRef } from 'react';

frontend/src/modules/auth/vm/useVerificationCode.ts

@@ -1,4 +1,4 @@
-'use client';
+
 
 import type { TVerifyInputHandler } from '@shared/ui/Input';
 import { useUnit } from 'effector-react';

frontend/src/shared/ui/Dialog/ui/Dialog.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import type { TDialogProps } from '../types/TDialogProps';
 import clsx from 'clsx';

frontend/src/shared/ui/Input/InputVerificationCode/ui/InputVerificationCode.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import type { ChangeEvent, ClipboardEvent, KeyboardEvent, MouseEvent } from 'react';
 

frontend/src/widgets/ToastNotification/ui/Toast.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import type { JSX, MouseEvent } from 'react';
 import type { TNotificationKind, TToastProps } from '../types/TToastProps';

packages/eslint/src/index.ts

@@ -33,12 +33,14 @@ export const overridesStylisticConfig: Exclude<OptionsConfig['stylistic'], boole
     'style/max-statements-per-line': ['error', { max: 3 }],
     'style/newline-per-chained-call': ['error', { ignoreChainWithDepth: 3 }],
     'style/object-curly-newline': ['warn', { consistent: true, minProperties: 4 }],
-    'style/array-bracket-newline': ['warn', { minItems: 4 }],
+    'style/array-bracket-newline': ['warn', { minItems: 5 }],
 
     /* jsx */
     'style/jsx-quotes': ['error', 'prefer-single'],
     'style/jsx-curly-brace-presence': ['warn', 'always'],
     'style/jsx-curly-spacing': [2, { when: 'never' }],
+    'style/jsx-max-props-per-line': ['error', { maximum: 4, when: 'always' }],
+    'style/jsx-closing-bracket-location': ['error', 'line-aligned'],
 
     /* semis */
     'style/no-extra-semi': 'error',
@@ -51,55 +53,43 @@ export const overridesTsConfig: Exclude<OptionsConfig['typescript'], boolean | u
     'ts/consistent-type-exports': 'error',
     'ts/consistent-type-imports': 'error',
     'ts/consistent-type-definitions': ['error', 'type'],
-    'ts/naming-convention': [
-        'warn',
-        {
-            format: [
-                'camelCase',
-                'UPPER_CASE',
-                'PascalCase'
-            ],
-            selector: 'variable'
-        },
-        {
-            format: ['PascalCase'],
-            selector: 'typeLike'
-        }
-    ]
+    'ts/naming-convention': ['warn', {
+        format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+        selector: 'variable'
+    }, {
+        format: ['PascalCase'],
+        selector: 'typeLike'
+    }]
 };
 
-export const general: TypedFlatConfigItem[] = [
-    {
-        plugins: {
-            turbo: turboPlugin
-        },
-        rules: {
-            'turbo/no-undeclared-env-vars': 'warn',
-            'ts/consistent-type-definitions': ['error', 'type'],
-            'no-console': ['warn'],
-            'antfu/no-top-level-await': ['off'],
-            'node/prefer-global/process': ['off'],
-            'node/no-process-env': ['error'],
-            'perfectionist/sort-imports': ['error', {
-                tsconfigRootDir: import.meta.dirname
-            }]
-        }
+export const general: TypedFlatConfigItem[] = [{
+    plugins: {
+        turbo: turboPlugin
     },
-    {
-        languageOptions: {
-            globals: {
-                ...globals.browser,
-                ...globals.chai,
-                ...globals.mocha,
-                ...globals.node,
-                ...globals.es2024
-            }
+    rules: {
+        'turbo/no-undeclared-env-vars': 'warn',
+        'ts/consistent-type-definitions': ['error', 'type'],
+        'no-console': ['warn'],
+        'antfu/no-top-level-await': ['off'],
+        'node/prefer-global/process': ['off'],
+        'node/no-process-env': ['error'],
+        'perfectionist/sort-imports': ['error', {
+            tsconfigRootDir: import.meta.dirname
+        }]
+    }
+}, {
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+            ...globals.chai,
+            ...globals.mocha,
+            ...globals.node,
+            ...globals.es2024
         }
-    },
-    {
-        ignores: ['dist/**']
     }
-];
+}, {
+    ignores: ['dist/**']
+}];
 
 export type ESLintAntfuConfig = ReturnType<typeof antfu>;
 /**

packages/ui/uikit/flippo/components/.storybook/main.ts

@@ -1,16 +1,20 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-    addons: [
-        '@storybook/addon-onboarding',
-        '@storybook/addon-essentials',
-        '@chromatic-com/storybook',
-        '@storybook/addon-interactions'
-    ],
+    addons: ['@storybook/addon-onboarding', '@storybook/addon-essentials', '@chromatic-com/storybook', '@storybook/addon-interactions'],
     framework: {
         name: '@storybook/react-vite',
         options: {}
     },
-    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    typescript: {
+        check: false,
+        reactDocgen: 'react-docgen-typescript',
+        reactDocgenTypescriptOptions: {
+            shouldExtractLiteralValuesFromEnum: true,
+            propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true)
+        }
+    }
 };
+
 export default config;

packages/ui/uikit/flippo/components/src/components/Dialog/index.parts.ts

@@ -1,3 +1,5 @@
+import { Dialog as DialogHeadless } from '@flippo-ui/headless-components/dialog';
+
 export { DialogBackdrop as Backdrop } from './ui/backdrop/DialogBackdrop';
 export { DialogClose as Close } from './ui/close/DialogClose';
 export { DialogDescription as Description } from './ui/description/DialogDescription';
@@ -6,3 +8,6 @@ export { DialogPortal as Portal } from './ui/portal/DialogPortal';
 export { DialogRoot as Root } from './ui/root/DialogRoot';
 export { DialogTitle as Title } from './ui/title/DialogTitle';
 export { DialogTrigger as Trigger } from './ui/trigger/DialogTrigger';
+export { DialogViewport as Viewport } from './ui/viewport/DialogViewport';
+
+export const createHandle = DialogHeadless.createHandle;

packages/ui/uikit/flippo/components/src/components/Dialog/ui/viewport/DialogViewport.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Dialog as DialogHeadless } from '@flippo-ui/headless-components/dialog';
+
+export function DialogViewport(props: DialogViewport.Props) {
+    return <DialogHeadless.Viewport {...props} />;
+}
+
+export namespace DialogViewport {
+    export type Props = DialogHeadless.Title.Props;
+}

packages/ui/uikit/flippo/components/src/components/Drawer/index.parts.ts

@@ -0,0 +1,9 @@
+export { DrawerBackdrop as Backdrop } from './ui/backdrop/DrawerBackdrop';
+export { DrawerClose as Close } from './ui/close/DrawerClose';
+export { DrawerDescription as Description } from './ui/description/DrawerDescription';
+export { DrawerDrag as Drag } from './ui/drag/DrawerDrag';
+export { DrawerPopup as Popup } from './ui/popup/DrawerPopup';
+export { DrawerPortal as Portal } from './ui/portal/DrawerPortal';
+export { DrawerRoot as Root } from './ui/root/DrawerRoot';
+export { DrawerTitle as Title } from './ui/title/DrawerTitle';
+export { DrawerTrigger as Trigger } from './ui/trigger/DrawerTrigger';

packages/ui/uikit/flippo/components/src/components/Drawer/index.ts

@@ -0,0 +1 @@
+export * as Drawer from './index.parts';