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

package/dist/components/Button/BaseButton.js

@@ -0,0 +1,62 @@
+import { useCallback, useState } from 'react';
+import { genericMemo } from '../../utils/genericMemo';
+import { ButtonLeftArea, ButtonRightArea, ButtonLabel, ButtonContainer, } from './utils';
+const BaseButtonComponent = ({ size = 'base', shape = 'square', loading = false, variant, disabled = false, iconOnly, iconPosition = 'prefix', Icon, label, style, containerVariantStyles, labelVariantStyles, pressedVariantStyles, iconVariantStyles, pressedLabelVariantStyles, onPressIn: onPressInProp, onPressOut: onPressOutProp, ...props }) => {
+    const [pressed, setPressed] = useState(false);
+    const onPressIn = useCallback((event) => {
+        onPressInProp?.(event);
+        setPressed(true);
+    }, [onPressInProp]);
+    const onPressOut = useCallback((event) => {
+        onPressOutProp?.(event);
+        setPressed(false);
+    }, [onPressOutProp]);
+    return (<ButtonContainer {...{
+        size,
+        variant,
+        shape,
+        disabled,
+        loading,
+        iconOnly,
+        style,
+        containerVariantStyles,
+        pressedVariantStyles,
+        onPressIn,
+        onPressOut,
+    }} {...props}>
+      <ButtonLeftArea {...{
+        size,
+        variant,
+        loading,
+        disabled,
+        Icon,
+        iconPosition,
+        iconVariantStyles: pressed
+            ? pressedLabelVariantStyles
+            : iconVariantStyles,
+    }}/>
+      <ButtonLabel {...{
+        size,
+        variant,
+        loading,
+        disabled,
+        iconOnly,
+        label,
+        labelVariantStyles: pressed
+            ? pressedLabelVariantStyles
+            : labelVariantStyles,
+    }}/>
+      <ButtonRightArea {...{
+        size,
+        variant,
+        loading,
+        disabled,
+        Icon,
+        iconPosition,
+        iconVariantStyles: pressed
+            ? pressedLabelVariantStyles
+            : iconVariantStyles,
+    }}/>
+    </ButtonContainer>);
+};
+export const BaseButton = genericMemo(BaseButtonComponent);

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonBaseVariant, ButtonProps } from './types';
+/**
+ * Button component
+ * @param size - button size
+ * @param shape - button shape
+ * @param loading - button loading state
+ * @param variant - button variant
+ * @param disabled - button disabled state
+ * @param iconOnly - button with only Icon
+ * @param iconPosition - icon position
+ * @param Icon - Tabler icon
+ * @param label - button label
+ * @param style - external style control for component
+ * @see BaseButton
+ */
+export declare const Button: import("react").NamedExoticComponent<ButtonProps<ButtonBaseVariant>>;

package/dist/components/Button/Button.js

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { BaseButton } from './BaseButton';
+import { useBasicButtonStyles } from './styles';
+/**
+ * Button component
+ * @param size - button size
+ * @param shape - button shape
+ * @param loading - button loading state
+ * @param variant - button variant
+ * @param disabled - button disabled state
+ * @param iconOnly - button with only Icon
+ * @param iconPosition - icon position
+ * @param Icon - Tabler icon
+ * @param label - button label
+ * @param style - external style control for component
+ * @see BaseButton
+ */
+export const Button = memo(({ variant = 'primary', ...props }) => {
+    const buttonStyles = useBasicButtonStyles();
+    return <BaseButton variant={variant} {...props} {...buttonStyles}/>;
+});

package/dist/components/Button/ButtonBadge.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonBadgeProps, ButtonBaseVariant, ButtonProps } from './types';
+/**
+ * Button component with badge
+ * @param size - button size
+ * @param shape - button shape
+ * @param loading - button loading state
+ * @param variant - button variant
+ * @param disabled - button disabled state
+ * @param iconOnly - button with only Icon
+ * @param iconPosition - icon position
+ * @param Icon - Tabler icon
+ * @param label - button label
+ * @param style - external style control for component
+ * @param badgeSeverity - badge component severity level
+ * @param badgeLabel - text label inside badge
+ * @see BaseButton
+ */
+export declare const ButtonBadge: import("react").NamedExoticComponent<ButtonProps<ButtonBaseVariant> & ButtonBadgeProps>;
+export declare const ButtonBadgeTestId: {
+    badge: string;
+};

package/dist/components/Button/ButtonBadge.js

@@ -0,0 +1,53 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { View, } from 'react-native';
+import { makeStyles } from '../../utils/makeStyles';
+import { Badge } from '../Badge';
+import { BaseButton } from './BaseButton';
+import { useBasicButtonStyles } from './styles';
+/**
+ * Button component with badge
+ * @param size - button size
+ * @param shape - button shape
+ * @param loading - button loading state
+ * @param variant - button variant
+ * @param disabled - button disabled state
+ * @param iconOnly - button with only Icon
+ * @param iconPosition - icon position
+ * @param Icon - Tabler icon
+ * @param label - button label
+ * @param style - external style control for component
+ * @param badgeSeverity - badge component severity level
+ * @param badgeLabel - text label inside badge
+ * @see BaseButton
+ */
+export const ButtonBadge = memo(({ badgeLabel, badgeSeverity, variant = 'primary', ...props }) => {
+    const buttonStyles = useBasicButtonStyles();
+    const styles = useStyles();
+    const [badgeLayout, setBadgeLayout] = useState();
+    const badgeContainerStyle = useMemo(() => ({
+        position: 'absolute',
+        top: badgeLayout ? -Math.round(badgeLayout.height / 2) : 0,
+        right: badgeLayout ? -Math.round(badgeLayout.width / 2) : 0,
+    }), [badgeLayout]);
+    const onLayout = useCallback((e) => setBadgeLayout(e.nativeEvent.layout), []);
+    const badgeCommonProps = useMemo(() => ({ severity: badgeSeverity, testID: ButtonBadgeTestId.badge }), [badgeSeverity]);
+    return (<View style={styles.root}>
+      <View style={[
+            styles.contentContainer,
+            props.iconOnly && styles.iconOnlyContainer,
+        ]}>
+        <BaseButton variant={variant} {...props} {...buttonStyles}/>
+
+        {badgeLabel ? (<Badge {...badgeCommonProps} style={badgeContainerStyle} onLayout={onLayout}>
+            {badgeLabel}
+          </Badge>) : (<Badge {...badgeCommonProps} dot style={styles.badgeDot}/>)}
+      </View>
+    </View>);
+});
+const useStyles = makeStyles(() => ({
+    root: { flexDirection: 'row' },
+    contentContainer: { flex: 1 },
+    iconOnlyContainer: { flex: 0 },
+    badgeDot: { position: 'absolute', top: 0, right: -0.5 },
+}));
+export const ButtonBadgeTestId = { badge: 'Badge' };

package/dist/components/Button/ButtonSeverity.d.ts

@@ -0,0 +1,17 @@
+import type { ButtonProps, ButtonSeverityProps, ButtonSeverityVariant } from './types';
+/**
+ * Button component
+ * @param size - button size
+ * @param shape - button shape
+ * @param loading - button loading state
+ * @param variant - button variant
+ * @param disabled - button disabled state
+ * @param iconOnly - button with only Icon
+ * @param iconPosition - icon position
+ * @param Icon - Tabler icon
+ * @param label - button label
+ * @param style - external style control for component
+ * @param severity - severity button styling variant
+ * @see BaseButton
+ */
+export declare const ButtonSeverity: import("react").NamedExoticComponent<ButtonProps<ButtonSeverityVariant> & ButtonSeverityProps>;

package/dist/components/Button/ButtonSeverity.js

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { BaseButton } from './BaseButton';
+import { useSeverityButtonStyles } from './styles';
+/**
+ * Button component
+ * @param size - button size
+ * @param shape - button shape
+ * @param loading - button loading state
+ * @param variant - button variant
+ * @param disabled - button disabled state
+ * @param iconOnly - button with only Icon
+ * @param iconPosition - icon position
+ * @param Icon - Tabler icon
+ * @param label - button label
+ * @param style - external style control for component
+ * @param severity - severity button styling variant
+ * @see BaseButton
+ */
+export const ButtonSeverity = memo(({ severity, variant = 'basic', ...props }) => {
+    const buttonStyles = useSeverityButtonStyles(severity);
+    return <BaseButton variant={variant} {...props} {...buttonStyles}/>;
+});

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

@@ -0,0 +1,4 @@
+export { Button } from './Button';
+export { ButtonBadge } from './ButtonBadge';
+export { ButtonSeverity } from './ButtonSeverity';
+export type { ButtonProps, ButtonBadgeProps, ButtonSeverityProps, VariantStyles, } from './types';

package/dist/components/Button/index.js

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export { ButtonBadge } from './ButtonBadge';
+export { ButtonSeverity } from './ButtonSeverity';

package/dist/components/Button/styles/index.d.ts

@@ -0,0 +1,2 @@
+export { useBasicButtonStyles } from './useBasicButtonStyles';
+export { useSeverityButtonStyles } from './useSeverityButtonStyles';

package/dist/components/Button/styles/index.js

@@ -0,0 +1,2 @@
+export { useBasicButtonStyles } from './useBasicButtonStyles';
+export { useSeverityButtonStyles } from './useSeverityButtonStyles';

package/dist/components/Button/styles/useBasicButtonStyles.d.ts

@@ -0,0 +1,98 @@
+export declare const useBasicButtonStyles: () => {
+    containerVariantStyles: {
+        primary: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        secondary: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        tertiary: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        text: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        link: {
+            paddingHorizontal: number;
+            paddingVertical: number;
+            height: "auto";
+            minHeight: "auto";
+            borderColor: string;
+            backgroundColor: string;
+        };
+    };
+    labelVariantStyles: {
+        primary: {
+            color: string;
+        };
+        secondary: {
+            color: string;
+        };
+        tertiary: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+        link: {
+            color: string;
+        };
+    };
+    pressedVariantStyles: {
+        primary: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        secondary: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        tertiary: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        text: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        link: {};
+    };
+    iconVariantStyles: {
+        primary: {
+            color: string;
+        };
+        secondary: {
+            color: string;
+        };
+        tertiary: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+        link: {
+            color: string;
+        };
+    };
+    pressedLabelVariantStyles: {
+        primary: {
+            color: string;
+        };
+        secondary: {
+            color: string;
+        };
+        tertiary: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+        link: {
+            color: string;
+        };
+    };
+};

package/dist/components/Button/styles/useBasicButtonStyles.js

@@ -0,0 +1,81 @@
+import { makeStyles } from '../../../utils/makeStyles';
+export const useBasicButtonStyles = () => {
+    const labelVariantStyles = useLabelVariantStyles();
+    const pressedVariantStyles = usePressedVariantStyles();
+    const containerVariantStyles = useContainerVariantStyles();
+    const iconVariantStyles = useIconVariantStyles();
+    const pressedLabelVariantStyles = usePressedLabelVariantStyles();
+    return {
+        containerVariantStyles,
+        labelVariantStyles,
+        pressedVariantStyles,
+        iconVariantStyles,
+        pressedLabelVariantStyles,
+    };
+};
+const useLabelVariantStyles = makeStyles(({ theme }) => ({
+    primary: { color: theme.Button.Brand.buttonTextColor },
+    secondary: { color: theme.Button.Primary.secondaryButtonTextColor },
+    tertiary: { color: theme.Button.Secondary.helpButtonTextColor },
+    text: { color: theme.Button.Text.textButtonTextColor },
+    link: { color: theme.Button.Text.textButtonTextColor },
+}));
+const usePressedVariantStyles = makeStyles(({ theme }) => ({
+    primary: {
+        borderColor: theme.Button.Brand.buttonBorderColor,
+        backgroundColor: theme.Button.Brand.buttonHoverBg,
+    },
+    secondary: {
+        borderColor: theme.Button.Primary.secondaryButtonHoverBorderColor,
+        backgroundColor: theme.Button.Primary.secondaryButtonHoverBg,
+    },
+    tertiary: {
+        borderColor: theme.Button.Secondary.helpButtonHoverBorderColor,
+        backgroundColor: theme.Button.Secondary.helpButtonHoverBg,
+    },
+    text: {
+        borderColor: theme.Button.Brand.buttonBorderColor,
+        backgroundColor: theme.Button.Text.textButtonHoverBg,
+    },
+    link: {},
+}));
+const useContainerVariantStyles = makeStyles(({ theme, spacing }) => ({
+    primary: {
+        borderColor: theme.Button.Brand.buttonBorderColor,
+        backgroundColor: theme.Button.Brand.buttonBg,
+    },
+    secondary: {
+        borderColor: theme.Button.Primary.secondaryButtonBorderColor,
+        backgroundColor: theme.Button.Primary.secondaryButtonBg,
+    },
+    tertiary: {
+        borderColor: theme.Button.Secondary.helpButtonBorderColor,
+        backgroundColor: theme.Button.Secondary.helpButtonBg,
+    },
+    text: {
+        borderColor: theme.Button.Brand.buttonBorderColor,
+        backgroundColor: theme.Button.Text.textButtonBg,
+    },
+    link: {
+        paddingHorizontal: 0,
+        paddingVertical: spacing.Padding['p-1'],
+        height: 'auto',
+        minHeight: 'auto',
+        borderColor: theme.Button.Brand.buttonBorderColor,
+        backgroundColor: theme.Button.Text.textButtonBg,
+    },
+}));
+const useIconVariantStyles = makeStyles(({ theme }) => ({
+    primary: { color: theme.Button.Brand.buttonTextColor },
+    secondary: { color: theme.Button.Primary.secondaryButtonTextColor },
+    tertiary: { color: theme.Button.Secondary.helpButtonTextColor },
+    text: { color: theme.Button.Text.textButtonTextColor },
+    link: { color: theme.Button.Text.textButtonTextColor },
+}));
+const usePressedLabelVariantStyles = makeStyles(({ theme, typography }) => ({
+    primary: { color: theme.Button.Brand.buttonTextColor },
+    secondary: { color: theme.Button.Primary.secondaryButtonTextColor },
+    tertiary: { color: theme.Button.Secondary.helpButtonTextColor },
+    text: { color: theme.Button.Text.textButtonTextColor },
+    link: { color: typography.Color.Common['text-color-secondary'] },
+}));

package/dist/components/Button/styles/useDangerButtonStyles.d.ts

@@ -0,0 +1,63 @@
+export declare const useDangerButtonStyles: () => {
+    containerVariantStyles: {
+        basic: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        outlined: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        text: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+    };
+    labelVariantStyles: {
+        basic: {
+            color: string;
+        };
+        outlined: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+    };
+    pressedVariantStyles: {
+        basic: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        outlined: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        text: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+    };
+    iconVariantStyles: {
+        basic: {
+            color: string;
+        };
+        outlined: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+    };
+    pressedLabelVariantStyles: {
+        basic: {
+            color: string;
+        };
+        outlined: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+    };
+};

package/dist/components/Button/styles/useDangerButtonStyles.js

@@ -0,0 +1,57 @@
+import { makeStyles } from '../../../utils/makeStyles';
+export const useDangerButtonStyles = () => {
+    const labelVariantStyles = useLabelVariantStyles();
+    const pressedVariantStyles = usePressedVariantStyles();
+    const containerVariantStyles = useContainerVariantStyles();
+    const iconVariantStyles = useIconVariantStyles();
+    return {
+        containerVariantStyles,
+        labelVariantStyles,
+        pressedVariantStyles,
+        iconVariantStyles,
+        pressedLabelVariantStyles: labelVariantStyles,
+    };
+};
+const useLabelVariantStyles = makeStyles(({ theme }) => ({
+    basic: { color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor },
+    outlined: {
+        color: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor,
+    },
+    text: { color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor },
+}));
+const usePressedVariantStyles = makeStyles(({ theme }) => ({
+    basic: {
+        borderColor: theme.Button.Severity.Danger.Basic.dangerButtonBorderColor,
+        backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonHoverBg,
+    },
+    outlined: {
+        borderColor: theme.Button.Severity.Danger.Outlined
+            .dangerOutlinedButtonHoverBorderColor,
+        backgroundColor: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonHoverBg,
+    },
+    text: {
+        borderColor: theme.Surface['surface-transparent'],
+        backgroundColor: theme.Button.Severity.Danger.Text.dangerTextButtonHoverBg,
+    },
+}));
+const useContainerVariantStyles = makeStyles(({ theme }) => ({
+    basic: {
+        borderColor: theme.Button.Severity.Danger.Basic.dangerButtonBorderColor,
+        backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg,
+    },
+    outlined: {
+        borderColor: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonBorderColor,
+        backgroundColor: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonBg,
+    },
+    text: {
+        borderColor: theme.Button.Severity.Danger.Basic.dangerButtonBorderColor,
+        backgroundColor: theme.Button.Severity.Danger.Text.dangerTextButtonBg,
+    },
+}));
+const useIconVariantStyles = makeStyles(({ theme }) => ({
+    basic: { color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor },
+    outlined: {
+        color: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor,
+    },
+    text: { color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor },
+}));

package/dist/components/Button/styles/useInfoButtonStyles.d.ts

@@ -0,0 +1,63 @@
+export declare const useInfoButtonStyles: () => {
+    containerVariantStyles: {
+        basic: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        outlined: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        text: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+    };
+    labelVariantStyles: {
+        basic: {
+            color: string;
+        };
+        outlined: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+    };
+    pressedVariantStyles: {
+        basic: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        outlined: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+        text: {
+            borderColor: string;
+            backgroundColor: string;
+        };
+    };
+    iconVariantStyles: {
+        basic: {
+            color: string;
+        };
+        outlined: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+    };
+    pressedLabelVariantStyles: {
+        basic: {
+            color: string;
+        };
+        outlined: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+    };
+};

package/dist/components/Button/styles/useInfoButtonStyles.js

@@ -0,0 +1,56 @@
+import { makeStyles } from '../../../utils/makeStyles';
+export const useInfoButtonStyles = () => {
+    const labelVariantStyles = useLabelVariantStyles();
+    const pressedVariantStyles = usePressedVariantStyles();
+    const containerVariantStyles = useContainerVariantStyles();
+    const iconVariantStyles = useIconVariantStyles();
+    return {
+        containerVariantStyles,
+        labelVariantStyles,
+        pressedVariantStyles,
+        iconVariantStyles,
+        pressedLabelVariantStyles: labelVariantStyles,
+    };
+};
+const useLabelVariantStyles = makeStyles(({ theme }) => ({
+    basic: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor },
+    outlined: {
+        color: theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor,
+    },
+    text: { color: theme.Button.Severity.Info.Text.infoTextButtonTextColor },
+}));
+const usePressedVariantStyles = makeStyles(({ theme }) => ({
+    basic: {
+        borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor,
+        backgroundColor: theme.Button.Severity.Info.Basic.infoButtonHoverBg,
+    },
+    outlined: {
+        borderColor: theme.Button.Severity.Info.Outlined.infoOutlinedButtonHoverBorderColor,
+        backgroundColor: theme.Button.Severity.Info.Outlined.infoOutlinedButtonHoverBg,
+    },
+    text: {
+        borderColor: theme.Surface['surface-transparent'],
+        backgroundColor: theme.Button.Severity.Info.Text.infoTextButtonHoverBg,
+    },
+}));
+const useContainerVariantStyles = makeStyles(({ theme }) => ({
+    basic: {
+        borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor,
+        backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg,
+    },
+    outlined: {
+        borderColor: theme.Button.Severity.Info.Outlined.infoOutlinedButtonBorderColor,
+        backgroundColor: theme.Button.Severity.Info.Outlined.infoOutlinedButtonBg,
+    },
+    text: {
+        borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor,
+        backgroundColor: theme.Button.Severity.Info.Text.infoTextButtonBg,
+    },
+}));
+const useIconVariantStyles = makeStyles(({ theme }) => ({
+    basic: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor },
+    outlined: {
+        color: theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor,
+    },
+    text: { color: theme.Button.Severity.Info.Text.infoTextButtonTextColor },
+}));