feat(plasma-b2c,star-ds): Add Card component

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
             },
         ], // NOTE: https://eslint.org/docs/latest/rules/space-before-function-paren
 
+        'global-require': 0,
         'react/jsx-wrap-multilines': 'off', // NOTE: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md
         'react/jsx-closing-tag-location': 'off', // NOTE: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md
         'react/jsx-no-leaked-render': 'off',

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

@@ -0,0 +1,159 @@
+import { FlexAlignType, StyleSheet, TextStyle, ViewStyle } from 'react-native';
+
+import { Theme } from '../ThemeProvider';
+import { getFontFace } from '../../utils';
+
+import { AlignProp, CardConfig } from './Card.types';
+import { getScaleOffset } from './utils';
+
+export interface Style {
+    root?: ViewStyle;
+    wrapper?: ViewStyle;
+    image?: ViewStyle;
+    textBox?: ViewStyle;
+    title?: TextStyle;
+    subtitle?: TextStyle;
+    content?: ViewStyle;
+    contentTopLeft?: ViewStyle;
+    contentTopRight?: ViewStyle;
+    contentBottomRight?: ViewStyle;
+    contentBottomLeft?: ViewStyle;
+    timelineBar?: ViewStyle;
+    timelineProgress?: ViewStyle;
+}
+
+const alignToFlex: Record<AlignProp, FlexAlignType> = {
+    center: 'center',
+    left: 'flex-start',
+    right: 'flex-end',
+};
+export const getStyle = (
+    theme?: Theme,
+    disabledOpacity?: number,
+    style?: CardConfig['variations']['size'][string] & CardConfig['variations']['view'][string],
+    alignTextBox?: AlignProp,
+    timelineValue?: number,
+    externalStyle?: Style,
+): Style => {
+    if (!style || !theme || !alignTextBox) {
+        return {
+            root: {},
+            wrapper: {},
+            image: {},
+            textBox: {},
+            title: {},
+            subtitle: {},
+            content: {},
+            contentTopLeft: {},
+            contentTopRight: {},
+            contentBottomRight: {},
+            contentBottomLeft: {},
+            timelineBar: {},
+            timelineProgress: {},
+        };
+    }
+
+    const titleFontFace = getFontFace(style.titleFontFamilyRef, style.titleFontStyle, style.titleFontWeight, theme);
+
+    const subtitleFontFace = getFontFace(
+        style.subtitleFontFamilyRef,
+        style.subtitleFontStyle,
+        style.subtitleFontWeight,
+        theme,
+    );
+
+    return StyleSheet.create({
+        root: {
+            opacity: disabledOpacity,
+            width: style.width,
+            ...externalStyle?.root,
+        },
+        wrapper: {
+            height: style.height,
+            borderRadius: style.borderRadius,
+            ...externalStyle?.wrapper,
+        },
+        image: {
+            width: Math.floor(style.width * style.scale),
+            height: Math.floor(style.height * style.scale),
+            left: -getScaleOffset(style.width, style.scale),
+            top: -getScaleOffset(style.height, style.scale),
+            borderRadius: style.borderRadius,
+            ...externalStyle?.image,
+        },
+        textBox: {
+            height: 'auto',
+            display: 'flex',
+            alignItems: alignToFlex[alignTextBox],
+            marginTop: 8 + getScaleOffset(style.height, style.scale),
+            gap: style.textBoxGap,
+            ...externalStyle?.textBox,
+        },
+        title: {
+            color: style.titleColor,
+            ...titleFontFace,
+            fontSize: style.titleFontSize,
+            letterSpacing: style.titleLetterSpacing,
+            lineHeight: style.titleLineHeight,
+            ...externalStyle?.title,
+        },
+        subtitle: {
+            color: style.subtitleColor,
+            ...subtitleFontFace,
+            fontSize: style.subtitleFontSize,
+            letterSpacing: style.subtitleLetterSpacing,
+            lineHeight: style.subtitleLineHeight,
+            ...externalStyle?.subtitle,
+        },
+        content: {
+            position: 'absolute',
+            overflow: 'hidden',
+            backgroundColor: 'transparent',
+            borderRadius: style.borderRadius,
+            width: Math.floor(style.width * style.scale),
+            height: Math.floor(style.height * style.scale),
+            left: -getScaleOffset(style.width, style.scale),
+            top: -getScaleOffset(style.height, style.scale),
+            ...externalStyle?.content,
+        },
+        contentTopLeft: {
+            position: 'absolute',
+            top: style.contentPadding,
+            left: style.contentPadding,
+            ...externalStyle?.contentTopLeft,
+        },
+        contentTopRight: {
+            position: 'absolute',
+            top: style.contentPadding,
+            right: style.contentPadding,
+            ...externalStyle?.contentTopRight,
+        },
+        contentBottomRight: {
+            position: 'absolute',
+            bottom: style.contentPadding,
+            right: style.contentPadding,
+            ...externalStyle?.contentBottomRight,
+        },
+        contentBottomLeft: {
+            position: 'absolute',
+            bottom: style.contentPadding,
+            left: style.contentPadding,
+            ...externalStyle?.contentBottomLeft,
+        },
+        timelineBar: {
+            position: 'absolute',
+            bottom: 0,
+            width: style.width * style.scale,
+            height: 4,
+            backgroundColor: '#FFFFFF33',
+            ...externalStyle?.timelineBar,
+        },
+        timelineProgress: {
+            position: 'absolute',
+            height: 4,
+            width: timelineValue !== undefined ? `${timelineValue}%` : 0,
+            backgroundColor: '#FFFFFF',
+            ...externalStyle?.timelineProgress,
+        },
+    });
+};

core/core-components/src/components/Card/Card.tsx

@@ -0,0 +1,138 @@
+import { NativeSyntheticEvent, Pressable, TargetedEvent, View, Text } from 'react-native';
+import { cloneElement, ReactElement, useMemo, useState } from 'react';
+
+import { Theme, withTheme } from '../ThemeProvider';
+import { FocusableWrapper } from '../FocusableWrapper';
+import { getIntersectionStyles } from '../../utils';
+import { PropsType } from '../../types';
+
+import { CardConfig, CardProps } from './Card.types';
+import { getStyle } from './Card.styles';
+import { CardRadialGradientSvg } from './CardRadialGradientSvg';
+import { useBorderAnimate } from './hooks';
+
+export const cardCore = <T extends CardConfig>(config?: T, theme?: Theme) => (
+    props: CardProps & PropsType<T['variations']>,
+    externalRef: React.ForwardedRef<View>,
+) => {
+    const {
+        view = '',
+        size = '',
+        image,
+        alignTextBox = 'left',
+        timelineValue,
+        title,
+        subtitle,
+        contentTopLeft,
+        contentTopRight,
+        contentBottomRight,
+        contentBottomLeft,
+        disabled,
+        style: externalStyle,
+        onBlur,
+        onFocus,
+        ...rest
+    } = props;
+
+    const [focused, setFocused] = useState(false);
+
+    const customStyles = getIntersectionStyles(
+        { ...props, focused },
+        { ...config?.variations.view[view], ...config?.variations.size[size] },
+        config,
+    );
+    const disabledOpacity = disabled ? config?.variations.disabled.true.disabledOpacity : 1;
+
+    const style = useMemo(
+        () => getStyle(theme, disabledOpacity, customStyles, alignTextBox, timelineValue, externalStyle),
+        [view, size, disabled, focused, alignTextBox, timelineValue, theme?.mode],
+    );
+
+    const [gradientRef, gradientRadius] = useBorderAnimate(customStyles, focused);
+
+    const onWrapperFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {
+        if (onFocus) {
+            onFocus(event);
+        }
+
+        setFocused(true);
+    };
+
+    const onWrapperBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {
+        if (onBlur) {
+            onBlur(event);
+        }
+
+        setFocused(false);
+    };
+
+    return (
+        <Pressable
+            disabled={disabled}
+            ref={externalRef}
+            onFocus={onWrapperFocus}
+            onBlur={onWrapperBlur}
+            style={style.root}
+            {...rest}
+        >
+            <View style={style.wrapper}>
+                {focused && (
+                    <CardRadialGradientSvg
+                        styles={customStyles}
+                        gradientRadius={gradientRadius}
+                        gradientRef={gradientRef}
+                    />
+                )}
+                {image &&
+                    // INFO: Если использовать scale для компонента View и использовать
+                    // в качестве дочки компонент image,
+                    // то неизвестно как будет округляться размер картинки,
+                    // из-за чего "бордер" не получается сделать корректным
+                    cloneElement(image as ReactElement, {
+                        style: style.image,
+                    })}
+                <View style={style.content}>
+                    {contentTopLeft && (
+                        <View style={style.contentTopLeft}>
+                            <FocusableWrapper iconColor={customStyles?.contentTopLeftColor}>
+                                {contentTopLeft}
+                            </FocusableWrapper>
+                        </View>
+                    )}
+                    {contentTopRight && (
+                        <View style={style.contentTopRight}>
+                            <FocusableWrapper iconColor={customStyles?.contentTopRightColor}>
+                                {contentTopRight}
+                            </FocusableWrapper>
+                        </View>
+                    )}
+                    {contentBottomRight && (
+                        <View style={style.contentBottomRight}>
+                            <FocusableWrapper iconColor={customStyles?.contentBottomRightColor}>
+                                {contentBottomLeft}
+                            </FocusableWrapper>
+                        </View>
+                    )}
+                    {contentBottomLeft && (
+                        <View style={style.contentBottomLeft}>
+                            <FocusableWrapper iconColor={customStyles?.contentBottomLeftColor}>
+                                {contentBottomRight}
+                            </FocusableWrapper>
+                        </View>
+                    )}
+                    {timelineValue !== undefined && (
+                        <View style={style.timelineBar}>
+                            <View style={style.timelineProgress} />
+                        </View>
+                    )}
+                </View>
+            </View>
+            <View style={style.textBox}>
+                {title && <Text style={style.title}>{title}</Text>}
+                {subtitle && <Text style={style.subtitle}>{subtitle}</Text>}
+            </View>
+        </Pressable>
+    );
+};
+
+export const cardComponent = withTheme(cardCore);