Release 20.08.2025

core/core-components/src/components/Divider/Divider.styles.ts

@@ -0,0 +1,34 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+
+import { DividerConfig, OrientationProp } from './Divider.types';
+
+export interface Style {
+    root?: ViewStyle;
+}
+
+export const getStyle = (
+    viewStyle?: DividerConfig['variations']['view'][string],
+    sizeStyle?: DividerConfig['variations']['size'][string],
+    orientationStyle?: DividerConfig['variations']['orientation'][string],
+    length?: number,
+    orientation?: OrientationProp,
+    externalStyle?: Style,
+): Style => {
+    if (!viewStyle || !sizeStyle || !orientationStyle) {
+        return {
+            root: {},
+        };
+    }
+
+    console.log('orientation', orientation);
+
+    return StyleSheet.create({
+        root: {
+            width: orientation === 'vertical' ? orientationStyle.baseSideSize : `${length ?? 100}%`,
+            height: orientation === 'vertical' ? `${length ?? 100}%` : orientationStyle.baseSideSize,
+            borderRadius: sizeStyle.borderRadius,
+            backgroundColor: viewStyle.background,
+            ...externalStyle?.root,
+        },
+    });
+};

core/core-components/src/components/Divider/Divider.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { View } from 'react-native';
+
+import { PropsType } from '../../types';
+import { withTheme } from '../ThemeProvider';
+
+import { DividerConfig, DividerProps } from './Divider.types';
+import { getStyle } from './Divider.styles';
+
+export const dividerCore = <T extends DividerConfig>(config?: T) => (
+    props: DividerProps & PropsType<T['variations']>,
+    externalRef: React.ForwardedRef<View>,
+) => {
+    const { view = '', size = '', orientation = 'horizontal', length = 100, ...rest } = props;
+
+    const viewStyle = config?.variations.view[view];
+    const sizeStyle = config?.variations.size[size];
+    const orientationStyle = config?.variations.orientation[orientation];
+
+    const normalizedLength = length ? Math.max(Math.min(length, 100), 0) : 100;
+
+    const style = useMemo(() => getStyle(viewStyle, sizeStyle, orientationStyle, normalizedLength, orientation), [
+        view,
+        size,
+        orientation,
+        length,
+    ]);
+
+    return <View ref={externalRef} style={style.root} {...rest} />;
+};
+
+export const dividerComponent = withTheme(dividerCore);

core/core-components/src/components/Divider/Divider.types.ts

@@ -0,0 +1,44 @@
+export type OrientationProp = 'horizontal' | 'vertical';
+
+export interface DividerProps {
+    /**
+     * Направление разделителя
+     */
+    orientation?: OrientationProp;
+    /**
+     * Размер разделителя в процентах
+     */
+    length?: number;
+    /**
+     * Вид разделителя
+     */
+    view?: string;
+    /**
+     * Размер разделителя
+     */
+    size?: string;
+}
+
+export interface DividerConfig {
+    defaults: {
+        view: string;
+        size: string;
+    };
+    variations: {
+        view: {
+            [x: string]: {
+                background: string;
+            };
+        };
+        size: {
+            [x: string]: {
+                borderRadius: number;
+            };
+        };
+        orientation: {
+            [x: string]: {
+                baseSideSize: number;
+            };
+        };
+    };
+}

core/core-components/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { dividerCore, dividerComponent } from './Divider';

core/core-components/src/components/Indicator/Indicator.styles.ts

@@ -0,0 +1,29 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+
+import { IndicatorConfig } from './Indicator.types';
+
+export interface Style {
+    root?: ViewStyle;
+}
+
+export const getStyle = (
+    viewStyle?: IndicatorConfig['variations']['view'][string],
+    sizeStyle?: IndicatorConfig['variations']['size'][string],
+    externalStyle?: Style,
+): Style => {
+    if (!viewStyle || !sizeStyle) {
+        return {
+            root: {},
+        };
+    }
+
+    return StyleSheet.create({
+        root: {
+            width: sizeStyle.size,
+            height: sizeStyle.size,
+            borderRadius: sizeStyle.size / 2,
+            backgroundColor: viewStyle.color,
+            ...externalStyle?.root,
+        },
+    });
+};

core/core-components/src/components/Indicator/Indicator.tsx

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { View } from 'react-native';
+
+import { PropsType } from '../../types';
+import { withTheme } from '../ThemeProvider';
+
+import { IndicatorConfig, IndicatorProps } from './Indicator.types';
+import { getStyle } from './Indicator.styles';
+
+export const indicatorCore = <T extends IndicatorConfig>(config?: T) => (
+    props: IndicatorProps & PropsType<T['variations']>,
+    externalRef: React.ForwardedRef<View>,
+) => {
+    const { view = '', size = '', ...rest } = props;
+
+    const viewStyle = config?.variations.view[view];
+    const sizeStyle = config?.variations.size[size];
+
+    const style = useMemo(() => getStyle(viewStyle, sizeStyle), [view, size]);
+
+    return <View ref={externalRef} style={style.root} {...rest} />;
+};
+
+export const indicatorComponent = withTheme(indicatorCore);

core/core-components/src/components/Indicator/Indicator.types.ts

@@ -0,0 +1,29 @@
+export interface IndicatorProps {
+    /**
+     * Вид индикатора
+     */
+    view?: string;
+    /**
+     * Размер индикатора
+     */
+    size?: string;
+}
+
+export interface IndicatorConfig {
+    defaults: {
+        view: string;
+        size: string;
+    };
+    variations: {
+        view: {
+            [x: string]: {
+                color: string;
+            };
+        };
+        size: {
+            [x: string]: {
+                size: number;
+            };
+        };
+    };
+}

core/core-components/src/components/Indicator/index.ts

@@ -0,0 +1 @@
+export { indicatorCore, indicatorComponent } from './Indicator';

core/core-components/src/index.ts

@@ -5,9 +5,11 @@ export * from './components/Carousel';
 export * from './components/Card';
 export * from './components/Cell';
 export * from './components/Checkbox';
+export * from './components/Divider';
 export * from './components/FocusContainer';
 export * from './components/List';
 export * from './components/IconButton';
+export * from './components/Indicator';
 export * from './components/Skeleton';
 export * from './components/Spinner';
 export * from './components/Switch';

docs/Divider.md

@@ -0,0 +1,34 @@
+## Divider
+
+Компонент используется для визуального разделения других компонент.
+
+### Свойства и типы
+
+| Название свойства | Тип             | Значение по умолчанию | Описание                      |
+| ----------------- | --------------- | --------------------- | ----------------------------- |
+| view              | string          | -                     | Вид разделителя               |
+| size              | string          | -                     | Размер разделителя            |
+| orientation       | OrientationProp | 'horizontal'          | Направление разделителя       |
+| length            | number          | 100                   | Длина разделителя в процентах |
+
+#### Расширенные типы
+
+Дополнительное описание типов
+
+```ts
+type OrientationProp = 'horizontal' | 'vertical';
+```
+
+### Примеры использования
+
+#### Стандартный пример
+
+```ts
+import { Divider } from '@salutejs/plasma-star-ds-tv';
+
+const App = () => {
+    return <Divider view="default" value={50} size="m" />;
+};
+
+export default App;
+```

docs/Indicator.md

@@ -0,0 +1,24 @@
+## Indicator
+
+Компонент отображающий состояние рядом лежащего компонента.
+
+### Свойства и типы
+
+| Название свойства | Тип    | Значение по умолчанию | Описание          |
+| ----------------- | ------ | --------------------- | ----------------- |
+| view              | string | -                     | Вид индикатора    |
+| size              | string | -                     | Размер индикатора |
+
+### Примеры использования
+
+#### Стандартный пример
+
+```ts
+import { Indicator } from '@salutejs/plasma-star-ds-tv';
+
+const App = () => {
+    return <Indicator view="accent" size="m" />;
+};
+
+export default App;
+```

libraries/plasma-b2c/src/components/Divider/Divider.config.ts

@@ -0,0 +1,31 @@
+import { Theme } from '@salutejs/core-components';
+
+import { PlasmaB2CTheme } from '../ThemeProvider';
+
+export const getConfig = ({ data, mode }: Theme<PlasmaB2CTheme>) => ({
+    defaults: {
+        view: 'default',
+        size: 'm',
+        orientation: 'horizontal',
+    },
+    variations: {
+        view: {
+            default: {
+                background: data.color[mode].surfaceTransparentTertiary,
+            },
+        },
+        size: {
+            m: {
+                borderRadius: 1,
+            },
+        },
+        orientation: {
+            horizontal: {
+                baseSideSize: 1,
+            },
+            vertical: {
+                baseSideSize: 1,
+            },
+        },
+    },
+});

libraries/plasma-b2c/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,69 @@
+import { View, Text, StyleProp, ViewStyle } from 'react-native';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { Divider } from './Divider';
+
+type StoryDividerProps = ComponentProps<typeof Divider>;
+
+const notes = `
+| **Control** | **Description**         | **Default**  |
+|-------------|-------------------------|--------------|
+| view        | Вид разделителя         | 'default'    |
+| size        | Размер разделителя      | 'm'          |
+| orientation | Направление разделителя | 'horizontal' |
+| length      | Длина разделителя       | 100          |
+`;
+
+const meta: Meta<StoryDividerProps> = {
+    title: 'Components/Divider',
+    component: Divider,
+    parameters: {
+        notes,
+    },
+    args: {
+        view: 'default',
+        size: 'm',
+        orientation: 'horizontal',
+        length: 100,
+    },
+    argTypes: {
+        size: {
+            options: ['m'],
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: ['default'],
+            control: {
+                type: 'select',
+            },
+        },
+        orientation: {
+            options: ['horizontal', 'vertical'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+const StoryDefault = (props: StoryDividerProps) => {
+    const wrapperStyle: StyleProp<ViewStyle> =
+        props.orientation === 'vertical' ? { flexDirection: 'row', height: 360 } : {};
+
+    return (
+        <View style={{ display: 'flex', gap: 16, ...wrapperStyle }}>
+            <Text style={{ color: 'white', fontWeight: '600', fontSize: 16 }}>Before</Text>
+            <Divider {...props} />
+            <Text style={{ color: 'white', fontWeight: '600', fontSize: 16 }}>After</Text>
+        </View>
+    );
+};
+
+export const Default: StoryObj<StoryDividerProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};

libraries/plasma-b2c/src/components/Divider/Divider.ts

@@ -0,0 +1,5 @@
+import { dividerComponent } from '@salutejs/core-components';
+
+import { getConfig } from './Divider.config';
+
+export const Divider = dividerComponent(getConfig);

libraries/plasma-b2c/src/components/Divider/index.ts

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