fix: 🐛 restore changes lost in PR 841-845 merge conflict resolution

.changeset/free-singers-cross.md

@@ -0,0 +1,13 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Restore changes lost in PR 841-845 merge conflict resolution.
+
+**What changed:**
+
+- Removed the `Common/` barrel-export directory that was causing circular dependency issues
+- Split shared components into their own directories: `CrossButton`, `EmptyButton`, `GridCenter`, `FormContainer`
+- Updated imports across components to use direct paths instead of `@/components/Common`
+
+This is an internal refactoring with no public API changes.

src/components/Checkbox/Checkbox.tsx

@@ -4,7 +4,7 @@ import { Icon } from '@/components/Icon';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import { useId } from 'react';
 import { styled } from 'styled-components';
-import { FormRoot } from '@/components/Common';
+import { FormRoot } from '@/components/FormContainer';
 import { CheckboxProps, CheckboxVariants } from './Checkbox.types';
 
 const Wrapper = styled(FormRoot)`

src/components/CodeBlock/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, useState } from 'react';
 import { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';
 
-import { EmptyButton } from '@/components/Common';
+import { EmptyButton } from '@/components/EmptyButton';
 import { IconButton } from '@/components/IconButton';
 
 import { styled } from 'styled-components';

src/components/Collapsible/Collapsible.tsx

@@ -10,7 +10,7 @@ import { styled } from 'styled-components';
 
 import { Icon, type IconName } from '@/components/Icon';
 import type { HorizontalDirection } from '@/types';
-import { EmptyButton } from '@/components/Common';
+import { EmptyButton } from '@/components/EmptyButton';
 
 import { IconWrapper } from './IconWrapper';
 import { CollapsibleProps } from './Collapsible.types';

src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { GridCenter } from '@/components/Common';
+import { GridCenter } from '@/components/GridCenter';
 import {
   ConfirmationDialog,
   ConfirmationDialogProps,

src/components/Common/CrossButton.tsx → src/components/CrossButton/CrossButton.tsx

@@ -1,5 +1,5 @@
 import { styled } from 'styled-components';
-import { EmptyButton } from './EmptyButton';
+import { EmptyButton } from '@/components/EmptyButton';
 
 export const CrossButton = styled(EmptyButton)`
   padding: ${({ theme }) => theme.click.button.iconButton.sm.space.y}

src/components/CrossButton/index.ts

@@ -0,0 +1 @@
+export { CrossButton } from './CrossButton';

src/components/Dialog/Dialog.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { GridCenter } from '@/components/Common';
+import { GridCenter } from '@/components/GridCenter';
 import { Text } from '@/components/Typography';
 import { Dialog } from '@/components/Dialog';
 import { Separator } from '@/components/Separator';

src/components/Dialog/Dialog.tsx

@@ -3,7 +3,7 @@ import { keyframes, styled } from 'styled-components';
 import { Button, ButtonProps } from '@/components/Button';
 import { Icon } from '@/components/Icon';
 import { Spacer } from '@/components/Spacer';
-import { CrossButton } from '@/components/Common';
+import { CrossButton } from '@/components/CrossButton';
 import { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';
 
 export const Dialog = ({ children, ...props }: DialogProps) => {

src/components/Dropdown/Dropdown.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 import { Dropdown } from '@/components/Dropdown';
-import { GridCenter } from '@/components/Common';
+import { GridCenter } from '@/components/GridCenter';
 import { Button } from '@/components/Button';
 import { Key } from 'react';
 

src/components/EmptyButton/index.ts

@@ -0,0 +1 @@
+export { EmptyButton } from './EmptyButton';

src/components/Flyout/Flyout.tsx

@@ -18,7 +18,7 @@ import { Icon } from '@/components/Icon';
 import { Separator } from '@/components/Separator';
 import { Spacer } from '@/components/Spacer';
 import { styled } from 'styled-components';
-import { CrossButton } from '@/components/Common';
+import { CrossButton } from '@/components/CrossButton';
 import { keyframes } from 'styled-components';
 import type {
   FlyoutProps,

src/components/FormContainer/FormContainer.tsx

@@ -1,4 +1,6 @@
-import { Error, FormElementContainer, FormRoot } from '@/components/Common';
+import { Error } from './Error';
+import { FormElementContainer } from './FormElementContainer';
+import { FormRoot } from './FormRoot';
 import { Label } from '@/components/Label';
 import { FormContainerProps } from './FormContainer.types';
 

src/components/FormContainer/index.ts

@@ -1,2 +1,6 @@
 export { FormContainer } from './FormContainer';
 export type { FormContainerProps } from './FormContainer.types';
+
+export { FormRoot } from './FormRoot';
+export { Error } from './Error';
+export { FormElementContainer } from './FormElementContainer';

src/components/GridCenter/index.ts

@@ -0,0 +1 @@
+export { GridCenter } from './GridCenter';

src/components/Input/InputWrapper.tsx

@@ -1,4 +1,4 @@
-import { Error, FormElementContainer, FormRoot } from '@/components/Common';
+import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';
 import { Label } from '@/components/Label';
 import { styled } from 'styled-components';
 import { ReactNode } from 'react';

src/components/Popover/Popover.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '@/components/Button';
 import { Checkbox } from '@/components/Checkbox';
-import { GridCenter } from '@/components/Common';
+import { GridCenter } from '@/components/GridCenter';
 import { Text, Title } from '@/components/Typography';
 import { Popover } from '@/components/Popover';
 

src/components/Popover/Popover.tsx

@@ -3,7 +3,7 @@ import { Arrow, GenericMenuPanel } from '@/components/GenericMenu';
 import { styled } from 'styled-components';
 import { ReactNode } from 'react';
 import { Icon } from '@/components/Icon';
-import { EmptyButton } from '@/components/Common';
+import { EmptyButton } from '@/components/EmptyButton';
 import Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';
 
 export const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {

src/components/RadioGroup/RadioGroup.tsx

@@ -3,7 +3,7 @@ import { HTMLAttributes, ReactNode, useId } from 'react';
 import { styled } from 'styled-components';
 import { GenericLabel } from '@/components/GenericLabel';
 import { Label } from '@/components/Label';
-import { Error, FormElementContainer, FormRoot } from '@/components/Common';
+import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';
 
 export interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'dir'> {
   /** Whether to display radio items inline (horizontally) */

src/components/Select/common/InternalSelect.tsx

@@ -22,7 +22,7 @@ import {
   SelectItemProps,
   SelectOptionListItem,
 } from './types';
-import { Error, FormElementContainer, FormRoot } from '@/components/Common';
+import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';
 import { Portal } from '@radix-ui/react-popover';
 import { Checkbox } from '@/components/Checkbox';
 import type { CheckboxVariants } from '@/components/Checkbox';

src/components/SplitButton/SplitButton.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { styled } from 'styled-components';
 import { Dropdown } from '@/components/Dropdown';
-import { BaseButton } from '@/components/Common';
+import { BaseButton } from '@/components/Button/BaseButton';
 import { IconWrapper } from '@/components/IconWrapper';
 import { Icon } from '@/components/Icon';
 import { SplitButtonProps, Menu, ButtonType } from './SplitButton.types';

src/components/Switch/Switch.tsx

@@ -1,7 +1,7 @@
 import * as RadixSwitch from '@radix-ui/react-switch';
 import { forwardRef, useId } from 'react';
 import { styled } from 'styled-components';
-import { FormRoot } from '@/components/Common';
+import { FormRoot } from '@/components/FormContainer';
 import { GenericLabel } from '@/components/GenericLabel';
 import { SwitchProps } from './Switch.types';
 import type { Theme } from '@/theme/theme.types';