fix: review

CODEOWNERS

@@ -1,63 +1,64 @@
--   @amje @ValeraS @korvin89
-    /src/components/ActionTooltip @amje
-    /src/components/Alert @IsaevAlexandr
-    /src/components/ArrowToggle @Marginy605
-    /src/components/Avatar @DakEnviy
-    /src/components/AvatarStack @ogonkov
-    #/src/components/Breadcrumbs
-    /src/components/Button @amje
-    /src/components/Card @Lunory
-    /src/components/Checkbox @zamkovskaya
-    /src/components/ClipboardButton @Raubzeug
-    /src/components/ClipboardIcon @Raubzeug
-    /src/components/ControlLabel @korvin89
-    /src/components/CopyToClipboard @SeqviriouM
-    /src/components/DefinitionList @Raubzeug
-    #/src/components/Dialog
-    /src/components/Disclosure @Raubzeug
-    /src/components/Divider @v4dyar4
-    /src/components/DropdownMenu @axtk
-    /src/components/HelpMark @Raubzeug
-    /src/components/Hotkey @d3m1d0v
-    /src/components/Icon @amje
-    /src/components/Label @goshander
-    /src/components/Link @Estasie
-    /src/components/List @korvin89
-    /src/components/Loader @SeqviriouM
-    /src/components/Menu @NikitaCG
-    /src/components/Modal @amje
-    /src/components/Overlay @Vladeeg
-    /src/components/Pagination @jhoncool
-    /src/components/Palette @Ruminat
-    /src/components/PinInput @amje
-    /src/components/PlaceholderContainer @Marginy605
-    /src/components/Popover @kseniya57
-    /src/components/Popup @amje
-    /src/components/Portal @amje
-    /src/components/Progress @Lunory
-    /src/components/Radio @zamkovskaya
-    /src/components/RadioButton @zamkovskaya
-    /src/components/RadioGroup @zamkovskaya
-    /src/components/User @DakEnviy
-    /src/components/UserLabel @DakEnviy
-    /src/components/useList @IsaevAlexandr
-    /src/components/Select @korvin89
-    /src/components/Sheet @mournfulCoroner
-    /src/components/Skeleton @SeqviriouM
-    /src/components/Slider @Arucard89
-    /src/components/Spin @SeqviriouM
-    /src/components/Stories @DarkGenius
-    /src/components/Switch @zamkovskaya
-    /src/components/Table @Raubzeug
-    /src/components/Tabs @sofiushko
-    /src/components/Text @IsaevAlexandr
-    /src/components/TreeList @IsaevAlexandr
-    /src/components/TreeSelect @IsaevAlexandr
-    /src/components/controls/TextArea @korvin89
-    /src/components/controls/TextInput @korvin89
-    /src/components/Toaster @ogonkov
-    /src/components/Tooltip @amje
-    /src/components/layout @IsaevAlexandr
+* @amje @ValeraS @korvin89
+/src/components/ActionsPanel @jhoncool
+/src/components/ActionTooltip @amje
+/src/components/Alert @IsaevAlexandr
+/src/components/ArrowToggle @Marginy605
+/src/components/Avatar @DakEnviy
+/src/components/AvatarStack @ogonkov
+#/src/components/Breadcrumbs
+/src/components/Button @amje
+/src/components/Card @Lunory
+/src/components/Checkbox @zamkovskaya
+/src/components/ClipboardButton @Raubzeug
+/src/components/ClipboardIcon @Raubzeug
+/src/components/ControlLabel @korvin89
+/src/components/CopyToClipboard @SeqviriouM
+/src/components/DefinitionList @Raubzeug
+#/src/components/Dialog
+/src/components/Disclosure @Raubzeug
+/src/components/Divider @v4dyar4
+/src/components/DropdownMenu @axtk
+/src/components/HelpMark @Raubzeug
+/src/components/Hotkey @d3m1d0v
+/src/components/Icon @amje
+/src/components/Label @goshander
+/src/components/Link @Estasie
+/src/components/List @korvin89
+/src/components/Loader @SeqviriouM
+/src/components/Menu @NikitaCG
+/src/components/Modal @amje
+/src/components/Overlay @Vladeeg
+/src/components/Pagination @jhoncool
+/src/components/Palette @Ruminat
+/src/components/PinInput @amje
+/src/components/PlaceholderContainer @Marginy605
+/src/components/Popover @kseniya57
+/src/components/Popup @amje
+/src/components/Portal @amje
+/src/components/Progress @Lunory
+/src/components/Radio @zamkovskaya
+/src/components/RadioButton @zamkovskaya
+/src/components/RadioGroup @zamkovskaya
+/src/components/User @DakEnviy
+/src/components/UserLabel @DakEnviy
+/src/components/useList @IsaevAlexandr
+/src/components/Select @korvin89
+/src/components/Sheet @mournfulCoroner
+/src/components/Skeleton @SeqviriouM
+/src/components/Slider @Arucard89
+/src/components/Spin @SeqviriouM
+/src/components/Stories @DarkGenius
+/src/components/Switch @zamkovskaya
+/src/components/Table @Raubzeug
+/src/components/Tabs @sofiushko
+/src/components/Text @IsaevAlexandr
+/src/components/TreeList @IsaevAlexandr
+/src/components/TreeSelect @IsaevAlexandr
+/src/components/controls/TextArea @korvin89
+/src/components/controls/TextInput @korvin89
+/src/components/Toaster @ogonkov
+/src/components/Tooltip @amje
+/src/components/layout @IsaevAlexandr
 
 /src/hooks/useActionHandlers @ogonkov
 /src/hooks/useFileInput @korvin89

src/components/DefinitionList/DefinitionList.scss

@@ -6,9 +6,7 @@ $block: '.#{variables.$ns}definition-list';
 #{$block} {
     --_--item-block-start: var(--g-spacing-4);
     --_--term-width: 300px;
-    &__list {
-        margin: 0;
-    }
+    margin: 0;
 
     &__item {
         display: flex;

src/components/DefinitionList/DefinitionList.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
 import {isOfType} from '../utils/isOfType';
+import {warnOnce} from '../utils/warn';
 
 import {DefinitionListProvider} from './components/DefinitionListContext';
 import {DefinitionListItem} from './components/DefinitionListItem';
+import {b} from './constants';
 import type {DefinitionListProps} from './types';
-import {b} from './utils';
 
 import './DefinitionList.scss';
 
@@ -20,18 +21,18 @@ export function DefinitionList({
 }: DefinitionListProps) {
     const normalizedChildren = prepareChildren(children);
     return (
-        <div
-            className={b({responsive, vertical: direction === 'vertical'}, className)}
-            data-qa={qa}
+        <DefinitionListProvider
+            direction={direction}
+            nameMaxWidth={nameMaxWidth}
+            contentMaxWidth={contentMaxWidth}
         >
-            <DefinitionListProvider
-                direction={direction}
-                nameMaxWidth={nameMaxWidth}
-                contentMaxWidth={contentMaxWidth}
+            <dl
+                className={b({responsive, vertical: direction === 'vertical'}, className)}
+                data-qa={qa}
             >
-                <dl className={b('list')}>{normalizedChildren}</dl>
-            </DefinitionListProvider>
-        </div>
+                {normalizedChildren}
+            </dl>
+        </DefinitionListProvider>
     );
 }
 
@@ -40,15 +41,16 @@ const isDefinitionListItem = isOfType(DefinitionListItem);
 function prepareChildren(children: React.ReactNode) {
     const items = React.Children.toArray(children);
 
+    const normalizedItems = [];
     for (const item of items) {
         const isItem = isDefinitionListItem(item);
-        if (!isItem) {
-            throw new Error(
-                'Only <DefinitionList.Item> components is allowed inside <DefinitionList>',
-            );
+        if (isItem) {
+            normalizedItems.push(item);
+        } else {
+            warnOnce('Only <DefinitionList.Item> components is allowed inside <DefinitionList>');
         }
     }
-    return children;
+    return normalizedItems;
 }
 
 DefinitionList.Item = DefinitionListItem;

src/components/DefinitionList/README.md

@@ -21,10 +21,10 @@ The component to display definition list with term and definition separated by d
 `}
 >
 <UIKit.DefinitionList nameMaxWidth={100} contentMaxWidth={100}>
-    <UIKit.DefinitionList.Item name="Node value with copy" copyText="value">
+    <UIKit.DefinitionListItem name="Node value with copy" copyText="value">
         <strong>value with copy</strong>
-    </UIKit.DefinitionList.Item>
-    <UIKit.DefinitionList.Item name="Empty value with copy" copyText="nothing to copy" />
+    </UIKit.DefinitionListItem>
+    <UIKit.DefinitionListItem name="Empty value with copy" copyText="nothing to copy" />
 </UIKit.DefinitionList>;
 </ExampleBlock>
 

src/components/DefinitionList/__stories__/DefinitionList.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 import {Label} from '../../Label';
 import {Link} from '../../Link';
 import {User} from '../../User';
 import {DefinitionList} from '../DefinitionList';
-import type {DefinitionListItem as DefinitionListItemProps, DefinitionListProps} from '../types';
+import type {DefinitionListItemProps} from '../types';
 
 const items: DefinitionListItemProps[] = [
     {
@@ -166,20 +166,10 @@ export default {
     },
 } as Meta;
 
-const DefaultTemplate: StoryFn<DefinitionListProps> = (args) => <DefinitionList {...args} />;
-export const Default = DefaultTemplate.bind({});
-Default.args = {contentMaxWidth: 480};
+type Story = StoryObj<typeof DefinitionList>;
 
-const TemplateResponsive: StoryFn<DefinitionListProps> = (args) => <DefinitionList {...args} />;
-export const ResponsiveList = TemplateResponsive.bind({});
-ResponsiveList.args = {
-    responsive: true,
-};
+export const Default: Story = {args: {contentMaxWidth: 480}};
 
-const TemplateVertical: StoryFn<DefinitionListProps> = (args) => {
-    return <DefinitionList {...args} />;
-};
-export const VerticalList = TemplateVertical.bind({});
-VerticalList.args = {
-    direction: 'vertical',
-};
+export const ResponsiveList: Story = {args: {responsive: true}};
+
+export const VerticalList: Story = {args: {direction: 'vertical'}};

src/components/DefinitionList/__tests__/DefinitionList.test.tsx

@@ -2,18 +2,20 @@ import React from 'react';
 
 import {render, screen} from '../../../../test-utils/utils';
 import {DefinitionList} from '../DefinitionList';
-import type {DefinitionListItem, DefinitionListProps} from '../types';
-import {b} from '../utils';
+import {b} from '../constants';
+import type {DefinitionListItemProps, DefinitionListProps} from '../types';
 
 const qaAttribute = 'definition-list';
 
-const defaultItems: DefinitionListItem[] = [
+const defaultItems: DefinitionListItemProps[] = [
     {name: 'test1', children: 'value1'},
     {name: 'test2', children: 2},
     {name: 'test3', children: <div>node value</div>},
 ];
 
-const getComponent = (props?: Partial<DefinitionListProps> & {items?: DefinitionListItem[]}) => {
+const getComponent = (
+    props?: Partial<DefinitionListProps> & {items?: DefinitionListItemProps[]},
+) => {
     const {items = defaultItems} = props ?? {};
     return render(
         <DefinitionList qa={qaAttribute} {...props}>
@@ -24,7 +26,7 @@ const getComponent = (props?: Partial<DefinitionListProps> & {items?: Definition
     ).container;
 };
 
-describe('components: DefinitionList', () => {
+describe('DefinitionList', () => {
     it('should render', () => {
         getComponent();
         const component = screen.getByTestId(qaAttribute);

src/components/DefinitionList/components/Definition.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import {ClipboardButton} from '../../ClipboardButton';
-import type {DefinitionListItem} from '../types';
-import {b} from '../utils';
+import {b} from '../constants';
+import type {DefinitionListItemProps} from '../types';
 
-interface DefinitionProps extends Pick<DefinitionListItem, 'copyText' | 'children'> {}
+interface DefinitionProps extends Pick<DefinitionListItemProps, 'copyText' | 'children'> {}
 
 export function Definition({copyText, children}: DefinitionProps) {
     const definitionContent = children ?? '—';

src/components/DefinitionList/components/DefinitionListItem.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import type {DefinitionListItem as DefinitionListItemProps} from '../types';
-import {b, getTitle, isUnbreakableOver} from '../utils';
+import {b} from '../constants';
+import type {DefinitionListItemProps} from '../types';
+import {getTitle, isUnbreakableOver} from '../utils';
 
 import {Definition} from './Definition';
 import {useDefinitionListAttributes} from './DefinitionListContext';
@@ -31,4 +32,4 @@ export function DefinitionListItem({name, children, copyText, note}: DefinitionL
     );
 }
 
-DefinitionListItem.displayName = 'DefinitionListItemin';
+DefinitionListItem.displayName = 'DefinitionListItem';

src/components/DefinitionList/components/Term.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
 
 import {HelpMark} from '../../HelpMark';
+import {b} from '../constants';
 import i18n from '../i18n';
-import type {DefinitionListDirection, DefinitionListItem, DefinitionListItemNote} from '../types';
-import {b, getTitle} from '../utils';
+import type {
+    DefinitionListDirection,
+    DefinitionListItemNote,
+    DefinitionListItemProps,
+} from '../types';
+import {getTitle} from '../utils';
 
 interface NoteElementsProps {
     note?: DefinitionListItemNote;
@@ -46,7 +51,7 @@ function NoteElement({note}: NoteElementsProps) {
     return null;
 }
 
-interface TermProps extends Pick<DefinitionListItem, 'note' | 'name'> {
+interface TermProps extends Pick<DefinitionListItemProps, 'note' | 'name'> {
     direction?: DefinitionListDirection;
 }
 

src/components/DefinitionList/constants.ts

@@ -0,0 +1,3 @@
+import {block} from '../utils/cn';
+
+export const b = block('definition-list');

src/components/DefinitionList/index.ts

@@ -1,2 +1,2 @@
 export {DefinitionList} from './DefinitionList';
-export type {DefinitionListProps, DefinitionListItem} from './types';
+export type {DefinitionListProps, DefinitionListItemProps} from './types';

src/components/DefinitionList/types.ts

@@ -4,7 +4,7 @@ import type {HelpMarkProps} from '../HelpMark';
 import type {QAProps} from '../types';
 export type DefinitionListItemNote = string | HelpMarkProps;
 
-export interface DefinitionListItem {
+export interface DefinitionListItemProps {
     name: React.ReactNode;
     children?: React.ReactNode;
     copyText?: string;

src/components/DefinitionList/utils.ts

@@ -1,9 +1,5 @@
 import type React from 'react';
 
-import {block} from '../utils/cn';
-
-export const b = block('definition-list');
-
 export function isUnbreakableOver(limit: number) {
     return function (value: string): boolean {
         const posibleLines = value.split(/\s+/);