@cdek-it/react-native-ui-kit 0.2.0

package/dist/components/Typography/Anchor.js

@@ -0,0 +1,75 @@
+import { Fragment, memo, useCallback, useMemo, useState } from 'react';
+import { Pressable, Text, View, } from 'react-native';
+import { SvgUniversal } from '../../utils/SvgUniversal';
+import { makeStyles } from '../../utils/makeStyles';
+const WORD_JOINER = '\u2060'; // символ невидимого пробела, чтобы избежать разрыва строки между текстом и иконкой
+/**
+ * Используется для ссылок и якорей
+ * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS--DS-?node-id=1-271
+ */
+export const Anchor = memo(({ onPress, base, visited, children, noWrapper, LeftIcon, RightIcon, testID, style, ...other }) => {
+    const styles = useStyles();
+    const [pressed, setPressed] = useState(false);
+    const onPressIn = useCallback(() => setPressed(true), []);
+    const onPressOut = useCallback(() => setPressed(false), []);
+    const Wrapper = noWrapper ? Fragment : View;
+    const containerProps = useMemo(() => {
+        if (noWrapper) {
+            return {};
+        }
+        return { style: styles.container, testID: testID || AnchorTestId.root };
+    }, [noWrapper, styles.container, testID]);
+    const iconColor = useMemo(() => (visited ? styles.visited.color : styles.text.color), [styles.text.color, styles.visited.color, visited]);
+    return (<Wrapper {...containerProps}>
+        {LeftIcon ? (<Pressable style={styles.leftIconContainer} testID={AnchorTestId.leftPressable} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut}>
+            <SvgUniversal source={LeftIcon} testID={AnchorTestId.leftIcon} {...styles.icon} {...(base ? styles.iconBase : {})} color={iconColor}/>
+          </Pressable>) : null}
+        <Text suppressHighlighting style={[
+            styles.text,
+            pressed && styles.underlined,
+            base && styles.base,
+            visited && styles.visited,
+            style,
+        ]} testID={AnchorTestId.text} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} {...other}>
+          {LeftIcon ? WORD_JOINER : null}
+          {children}
+          {RightIcon ? WORD_JOINER : null}
+        </Text>
+
+        {RightIcon ? (<Pressable style={styles.rightIconContainer} testID={AnchorTestId.rightPressable} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut}>
+            <SvgUniversal source={RightIcon} {...styles.icon} {...(base ? styles.iconBase : {})} color={iconColor} testID={AnchorTestId.rightIcon}/>
+          </Pressable>) : null}
+      </Wrapper>);
+});
+const useStyles = makeStyles(({ spacing, typography, fonts }) => ({
+    container: { flexDirection: 'row', alignItems: 'center' },
+    text: {
+        flexShrink: 1,
+        fontSize: typography.Size['text-sm'],
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        color: typography.Color.Service['text-info'],
+        fontFamily: fonts.primary,
+    },
+    underlined: { textDecorationLine: 'underline' },
+    base: { fontSize: typography.Size['text-base'], fontFamily: fonts.secondary },
+    visited: { color: typography.Color.Service['text-help'] },
+    icon: {
+        width: typography.Size['text-base'],
+        height: typography.Size['text-base'],
+    },
+    iconBase: {
+        width: typography.Size['text-xl'],
+        height: typography.Size['text-xl'],
+    },
+    leftIconContainer: { paddingRight: spacing.Padding['p-2'] },
+    rightIconContainer: { paddingLeft: spacing.Padding['p-2'] },
+}));
+export const AnchorTestId = {
+    root: 'Anchor',
+    leftPressable: 'AnchorLeftPressable',
+    rightPressable: 'AnchorRightPressable',
+    leftIcon: 'LeftIcon',
+    rightIcon: 'RightIcon',
+    text: 'AnchorText',
+};

package/dist/components/Typography/Body.d.ts

@@ -0,0 +1,9 @@
+import { type TextProps } from 'react-native';
+export interface BodyProps extends TextProps {
+    readonly base?: boolean;
+    readonly color?: 'default' | 'secondary' | 'primary';
+    readonly disabled?: boolean;
+    readonly paragraph?: boolean;
+    readonly weight?: 'regular' | 'medium' | 'bold';
+}
+export declare const Body: ({ base, color, disabled, paragraph, weight, style, ...other }: BodyProps) => import("react").JSX.Element;

package/dist/components/Typography/Body.js

@@ -0,0 +1,32 @@
+import { Text } from 'react-native';
+import { makeStyles } from '../../utils/makeStyles';
+export const Body = ({ base, color = 'default', disabled, paragraph, weight = 'regular', style, ...other }) => {
+    const styles = useStyles();
+    return (<Text style={[
+            styles.text,
+            styles[weight],
+            styles[color],
+            base && styles.base,
+            paragraph && (base ? styles.paragraphBase : styles.paragraph),
+            disabled && styles.disabled,
+            style,
+        ]} {...other}/>);
+};
+const useStyles = makeStyles(({ theme, typography, fonts }) => ({
+    text: {
+        fontSize: typography.Size['text-lg'],
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        fontFamily: fonts.secondary,
+    },
+    regular: { fontWeight: 400 },
+    medium: { fontWeight: 500 },
+    bold: { fontWeight: 700 },
+    default: { color: theme.General.textColor },
+    primary: { color: theme.General.primaryColor },
+    secondary: { color: theme.General.textSecondaryColor },
+    base: { fontSize: typography.Size['text-base'] },
+    paragraph: { fontSize: typography.Size['text-lg'] },
+    paragraphBase: { fontSize: typography.Size['text-base'] },
+    disabled: { opacity: 0.6 },
+}));

package/dist/components/Typography/Caption.d.ts

@@ -0,0 +1,9 @@
+import { type TextProps } from 'react-native';
+import { type SvgSource } from '../../utils/SvgUniversal';
+export interface CaptionProps extends TextProps {
+    readonly color?: 'default' | 'secondary' | 'primary';
+    readonly disabled?: boolean;
+    /** SVG-иконка */
+    readonly Icon?: SvgSource;
+}
+export declare const Caption: ({ color, disabled, style, Icon, ...other }: CaptionProps) => import("react").JSX.Element;

package/dist/components/Typography/Caption.js

@@ -0,0 +1,38 @@
+import { Text, View } from 'react-native';
+import { SvgUniversal } from '../../utils/SvgUniversal';
+import { makeStyles } from '../../utils/makeStyles';
+export const Caption = ({ color = 'default', disabled, style, Icon, ...other }) => {
+    const styles = useStyles();
+    const text = (<Text style={[
+            styles.text,
+            styles[color],
+            disabled && styles.disabled,
+            Icon && styles.textWithIcon,
+            style,
+        ]} {...other}/>);
+    if (Icon) {
+        return (<View style={styles.withIconContainer}>
+        <SvgUniversal source={Icon} {...styles[color]} {...styles.icon}/>
+        {text}
+      </View>);
+    }
+    return text;
+};
+const useStyles = makeStyles(({ theme, spacing, typography, fonts }) => ({
+    text: {
+        fontSize: typography.Size['text-sm'],
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        fontFamily: fonts.primary,
+    },
+    textWithIcon: { flexShrink: 1 },
+    default: { color: theme.General.textColor },
+    primary: { color: theme.General.primaryColor },
+    secondary: { color: theme.General.textSecondaryColor },
+    disabled: { opacity: 0.6 },
+    withIconContainer: { flexDirection: 'row', gap: spacing.Gap['gap-1'] },
+    icon: {
+        width: typography.Size['text-base'],
+        height: typography.Size['text-base'],
+    },
+}));

package/dist/components/Typography/Service.d.ts

@@ -0,0 +1,25 @@
+import { type TextProps } from 'react-native';
+import { type SvgSource } from '../../utils/SvgUniversal';
+export interface ServiceProps extends TextProps {
+    /**
+     * Вариант отображения
+     * @default success
+     */
+    readonly variant?: 'danger' | 'warning' | 'success' | 'info' | 'help';
+    /**
+     * true, если необходимо показать иконку
+     * @default false
+     */
+    readonly showIcon?: boolean;
+    /**
+     * true, если необходим компонент в базовом стиле
+     * @default false
+     */
+    readonly base?: boolean;
+    /** SVG-иконка */
+    readonly Icon?: SvgSource;
+}
+/**
+ * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=1-284&m=dev
+ */
+export declare const Service: ({ variant, showIcon, base, Icon: IconFromProps, ...other }: ServiceProps) => import("react").JSX.Element;

package/dist/components/Typography/Service.js

@@ -0,0 +1,63 @@
+import { IconAlertTriangle, IconCircleCheck, IconCircleX, IconHelpCircle, IconInfoCircle, } from '@tabler/icons-react-native';
+import { useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { SvgUniversal } from '../../utils/SvgUniversal';
+import { makeStyles } from '../../utils/makeStyles';
+/**
+ * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=1-284&m=dev
+ */
+export const Service = ({ variant = 'success', showIcon = true, base = true, Icon: IconFromProps, ...other }) => {
+    const styles = useStyles();
+    const { Icon, variantStyle, iconSize, textStyles, containerStyle } = useMemo(() => {
+        const iconMap = {
+            danger: { Icon: IconCircleX, style: styles.danger },
+            warning: { Icon: IconAlertTriangle, style: styles.warning },
+            success: { Icon: IconCircleCheck, style: styles.success },
+            info: { Icon: IconInfoCircle, style: styles.info },
+            help: { Icon: IconHelpCircle, style: styles.help },
+        };
+        return {
+            Icon: IconFromProps || iconMap[variant]?.Icon || IconInfoCircle,
+            variantStyle: iconMap[variant]?.style || styles.info,
+            iconSize: base ? styles.iconBase : styles.icon,
+            textStyles: [
+                styles.textCommon,
+                base ? styles.textBase : styles.text,
+                iconMap[variant]?.style || styles.info,
+            ],
+            containerStyle: base ? styles.containerBase : styles.container,
+        };
+    }, [variant, base, styles, IconFromProps]);
+    return (<View style={containerStyle}>
+      {showIcon ? (<SvgUniversal color={variantStyle.color} height={iconSize.height} source={Icon} width={iconSize.width}/>) : null}
+      <Text style={textStyles} {...other}/>
+    </View>);
+};
+const useStyles = makeStyles(({ typography, spacing, fonts }) => ({
+    iconBase: {
+        width: typography.Size['text-xl'],
+        height: typography.Size['text-xl'],
+    },
+    icon: {
+        width: typography.Size['text-base'],
+        height: typography.Size['text-base'],
+    },
+    containerBase: { flexDirection: 'row', gap: spacing.Gap['gap-2'] },
+    container: { flexDirection: 'row', gap: spacing.Gap['gap-1'] },
+    textCommon: {
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        flexShrink: 1,
+        fontWeight: 400,
+    },
+    textBase: {
+        fontSize: typography.Size['text-base'],
+        fontFamily: fonts.secondary,
+    },
+    text: { fontSize: typography.Size['text-sm'], fontFamily: fonts.primary },
+    warning: { color: typography.Color.Service['text-warning'] },
+    success: { color: typography.Color.Service['text-success'] },
+    info: { color: typography.Color.Service['text-info'] },
+    help: { color: typography.Color.Service['text-help'] },
+    danger: { color: typography.Color.Service['text-danger'] },
+}));

package/dist/components/Typography/Subtitle.d.ts

@@ -0,0 +1,18 @@
+import { type TextProps } from 'react-native';
+export interface SubtitleProps extends TextProps {
+    /**
+     * true, если необходим базовый размер текста подзаголовка
+     * @default false
+     */
+    base?: boolean;
+    /**
+     * Выбор цвета подзаголовка
+     * @default 'default'
+     */
+    color?: 'default' | 'primary' | 'secondary';
+}
+/**
+ * Используется для подзаголовков
+ * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=1-245
+ */
+export declare const Subtitle: import("react").NamedExoticComponent<SubtitleProps>;

package/dist/components/Typography/Subtitle.js

@@ -0,0 +1,23 @@
+import { memo } from 'react';
+import { Text } from 'react-native';
+import { makeStyles } from '../../utils/makeStyles';
+/**
+ * Используется для подзаголовков
+ * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=1-245
+ */
+export const Subtitle = memo(({ base = false, color = 'default', style, ...other }) => {
+    const styles = useStyles();
+    return (<Text style={[styles.text, styles[color], base && styles.base, style]} {...other}/>);
+});
+const useStyles = makeStyles(({ theme, typography, fonts }) => ({
+    text: {
+        fontSize: typography.Size['text-sm'],
+        fontWeight: 700,
+        textTransform: 'uppercase',
+        fontFamily: fonts.primary,
+    },
+    base: { fontSize: typography.Size['text-base'], fontFamily: fonts.secondary },
+    default: { color: theme.General.textColor },
+    primary: { color: theme.General.primaryColor },
+    secondary: { color: theme.General.textSecondaryColor },
+}));

package/dist/components/Typography/Title.d.ts

@@ -0,0 +1,5 @@
+import { type TextProps } from 'react-native';
+export interface TitleProps extends TextProps {
+    readonly level: 'd1' | 'd2' | 'd3' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export declare const Title: ({ level, style, ...other }: TitleProps) => import("react").JSX.Element;

package/dist/components/Typography/Title.js

@@ -0,0 +1,24 @@
+import { Text } from 'react-native';
+import { makeStyles } from '../../utils/makeStyles';
+export const Title = ({ level, style, ...other }) => {
+    const styles = useStyles();
+    return <Text style={[styles.text, styles[level], style]} {...other}/>;
+};
+const useStyles = makeStyles(({ theme, typography, fonts }) => ({
+    text: {
+        color: theme.General.textColor,
+        fontFamily: fonts.primary,
+        fontWeight: 700,
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+    },
+    d1: { fontSize: typography.Size['text-6xl'] },
+    d2: { fontSize: typography.Size['text-5xl'] },
+    d3: { fontSize: typography.Size['text-4xl'] },
+    h1: { fontSize: typography.Size['text-3xl'] },
+    h2: { fontSize: typography.Size['text-2xl'] },
+    h3: { fontSize: typography.Size['text-xl'] },
+    h4: { fontSize: typography.Size['text-lg'] },
+    h5: { fontSize: typography.Size['text-base'] },
+    h6: { fontSize: typography.Size['text-sm'] },
+}));

package/dist/components/Typography/index.d.ts

@@ -0,0 +1,6 @@
+export { Body, type BodyProps } from './Body';
+export { Caption, type CaptionProps } from './Caption';
+export { Title, type TitleProps } from './Title';
+export { Subtitle, type SubtitleProps } from './Subtitle';
+export { Service, type ServiceProps } from './Service';
+export { Anchor, type AnchorProps } from './Anchor';

package/dist/components/Typography/index.js

@@ -0,0 +1,6 @@
+export { Body } from './Body';
+export { Caption } from './Caption';
+export { Title } from './Title';
+export { Subtitle } from './Subtitle';
+export { Service } from './Service';
+export { Anchor } from './Anchor';

package/dist/components/index.d.ts

@@ -0,0 +1,23 @@
+export * from './Button';
+export * from './Typography';
+export * from './Avatar';
+export * from './Badge';
+export * from './Checkbox';
+export * from './Input';
+export * from './MenuItem';
+export * from './ToggleButton';
+export * from './Tag';
+export * from './Divider';
+export * from './SelectButton';
+export * from './RadioButton';
+export * from './Skeleton';
+export * from './Message';
+export * from './Slider';
+export * from './Chip';
+export * from './ProgressSpinner';
+export * from './ProgressBar';
+export * from './Rating';
+export * from './Tabs';
+export * from './List/Base';
+export * from './Accordion';
+export * from './Dialog';

package/dist/components/index.js

@@ -0,0 +1,23 @@
+export * from './Button';
+export * from './Typography';
+export * from './Avatar';
+export * from './Badge';
+export * from './Checkbox';
+export * from './Input';
+export * from './MenuItem';
+export * from './ToggleButton';
+export * from './Tag';
+export * from './Divider';
+export * from './SelectButton';
+export * from './RadioButton';
+export * from './Skeleton';
+export * from './Message';
+export * from './Slider';
+export * from './Chip';
+export * from './ProgressSpinner';
+export * from './ProgressBar';
+export * from './Rating';
+export * from './Tabs';
+export * from './List/Base';
+export * from './Accordion';
+export * from './Dialog';

package/dist/hooks/useChangeTheme.d.ts

@@ -0,0 +1 @@
+export declare const useChangeTheme: () => (theme: import("..").ThemeVariant) => void;

package/dist/hooks/useChangeTheme.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../theme';
+export const useChangeTheme = () => {
+    return useContext(ThemeContext).changeTheme;
+};

package/dist/hooks/useFonts.d.ts

@@ -0,0 +1 @@
+export declare const useFonts: () => import("../theme").FontsConfig;

package/dist/hooks/useFonts.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../theme';
+export const useFonts = () => {
+    return useContext(ThemeContext).fonts;
+};

package/dist/hooks/useLoadingRotationAnimation.d.ts

@@ -0,0 +1,5 @@
+export declare const useLoadingRotationAnimation: (loading?: boolean) => {
+    transform: {
+        rotate: string;
+    }[];
+};

package/dist/hooks/useLoadingRotationAnimation.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { Easing, interpolate, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+const DURATION = 1000; // ms
+export const useLoadingRotationAnimation = (loading) => {
+    const loadingAnimation = useSharedValue(0);
+    useEffect(() => {
+        loadingAnimation.value = loading
+            ? withRepeat(withTiming(1, {
+                duration: DURATION,
+                easing: Easing.inOut(Easing.ease),
+            }), -1)
+            : 0;
+    }, [loading, loadingAnimation]);
+    return useAnimatedStyle(() => ({
+        transform: [
+            { rotate: `${interpolate(loadingAnimation.value, [0, 1], [0, 360])}deg` },
+        ],
+    }));
+};

package/dist/hooks/useMakeTestId.d.ts

@@ -0,0 +1,3 @@
+export declare const useMakeTestId: (prefix: string) => {
+    makeTestId: (postfix?: string) => string;
+};

package/dist/hooks/useMakeTestId.js

@@ -0,0 +1,7 @@
+import { useCallback } from 'react';
+export const useMakeTestId = (prefix) => {
+    const makeTestId = useCallback((postfix = '') => {
+        return `${prefix}${postfix}`;
+    }, [prefix]);
+    return { makeTestId };
+};

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1 @@
+export declare const useTheme: () => import("..").ThemeVariant;

package/dist/hooks/useTheme.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../theme';
+export const useTheme = () => {
+    return useContext(ThemeContext).theme;
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export { useChangeTheme } from './hooks/useChangeTheme';
+export { ThemeContext, ThemeContextProvider, ThemeVariant, darkTheme, lightTheme, } from './theme';
+export { makeStyles } from './utils/makeStyles';
+export { useTheme } from './hooks/useTheme';
+export { SvgUniversal, type SvgSource } from './utils/SvgUniversal';

package/dist/index.js

@@ -0,0 +1,6 @@
+export * from './components';
+export { useChangeTheme } from './hooks/useChangeTheme';
+export { ThemeContext, ThemeContextProvider, ThemeVariant, darkTheme, lightTheme, } from './theme';
+export { makeStyles } from './utils/makeStyles';
+export { useTheme } from './hooks/useTheme';
+export { SvgUniversal } from './utils/SvgUniversal';

package/dist/theme/ThemeContext.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import { ThemeVariant, type FontsConfig } from './types';
+interface ThemeContextType {
+    theme: ThemeVariant;
+    fonts: FontsConfig;
+    changeTheme: (theme: ThemeVariant) => void;
+}
+interface ThemeContextProviderProps {
+    readonly initialTheme?: ThemeVariant;
+    readonly fonts?: FontsConfig;
+    readonly children: ReactNode;
+}
+export declare const ThemeContext: import("react").Context<ThemeContextType>;
+export declare const ThemeContextProvider: ({ children, initialTheme, fonts, }: ThemeContextProviderProps) => import("react").JSX.Element;
+export {};

package/dist/theme/ThemeContext.js

@@ -0,0 +1,20 @@
+import { createContext, useCallback, useMemo, useState, } from 'react';
+import { ThemeVariant } from './types';
+const defaultThemeContext = {
+    theme: ThemeVariant.Light,
+    fonts: { primary: 'TT Fellows', secondary: 'PT Sans' },
+    changeTheme: () => {
+        /* do nothing */
+    },
+};
+export const ThemeContext = createContext(defaultThemeContext);
+export const ThemeContextProvider = ({ children, initialTheme = defaultThemeContext.theme, fonts = defaultThemeContext.fonts, }) => {
+    const [theme, setTheme] = useState(initialTheme);
+    const changeTheme = useCallback((nextTheme) => {
+        setTheme(nextTheme);
+    }, []);
+    const contextValue = useMemo(() => ({ theme, fonts, changeTheme }), [theme, fonts, changeTheme]);
+    return (<ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>);
+};