# RtGrid

Данный компонент предназначен для создания составных компонентов с "общим" радиусом.

### Пример использования:

```tsx
import { RtGrid } from '@dpa/react-grid';
import { RtButton } from '@dpa/react-buttons';
import styles from './index.module.css';
import { TestGridButton } from './test-grid-button';

export function GridPage() {
  return (
    <div className={styles['page']}>
      <RtGrid direction="horizontal">
        <RtButton />
        <RtButton />
        <RtButton />
      </RtGrid>
    </div>
  );
}
```

### Как создать свой компонент, который может использоваться с RtGrid?

`@dpa/react-grid` пакет должен быть установлен в вашем kit, как `peerDependencies`. Чтобы во всем приложении была одна версия и один `RtGridChildContext`

1. С помощью хука `useGridChild()` установите классы и дата-атрибуты на элемент с радиусом.

ЕСЛИ компонент имеет слот или в теории может содержать другой элемент с поддержкой RtGird обязательно ОБНУЛЯЕМ контекст! (`RtGridChildContext.Provider`)

```tsx
import index from './index.module.css';
import { useGridChild, RtGridChildContext } from '@dpa/react-grid';
import { ReactNode, useId } from 'react';
import classnames from 'classnames/bind';

const cn = classnames.bind(index);

export function TestGridButton(props: { radius?: 'primary' | 'secondary'; color?: 'red' | 'black'; size?: 'xs' | 'sm' | 'md' | 'lg'; children?: ReactNode }) {
  const { radius = 'primary', size = 'lg', color = 'black', children } = props;
  const { gridChildClassname, gridAttributes } = useGridChild({ size, radius });

  return (
    <div className={cn('test-grid-button', `test-grid-button--${color}`, gridChildClassname)} {...gridAttributes}>
      <RtGridChildContext.Provider value={null}>{children}</RtGridChildContext.Provider>
    </div>
  );
}
```

2. Установите токены для border-radius:

```css
.test-grid-button {
  border-radius: var(--grid-child-child-border-radius-top-left) var(--grid-child-child-border-radius-top-right) var(--grid-child-child-border-radius-bottom-right) var(--grid-child-child-border-radius-bottom-left);
}
```

3. Теперь вы можете использовать компонент как с RtGrid, так и без:

```tsx
import { RtGrid } from '@dpa/react-grid';
import styles from './index.module.css';
import { TestGridButton } from './test-grid-button';

export function GridPage() {
  return (
    <div className={styles['page']}>
      {/* With grid */}
      <RtGrid direction="horizontal">
        <TestGridButton size="lg" />
        <TestGridButton size="lg" />
        <TestGridButton size="lg" />
        <TestGridButton size="lg" />
      </RtGrid>

      {/* without grid */}
      <TestGridButton color="red" />
    </div>
  );
}
```