From b641791e0a62216a71fa4f0bd2d71d1e66a9788b Mon Sep 17 00:00:00 2001
From: Clement Dejoie <c.dejoie@smartway.ai>
Date: Wed, 17 Jul 2024 16:34:21 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20Button=20:=20add=20all=20sta?=
 =?UTF-8?q?tus=20and=20update=20stories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Button/Button.stories.tsx      | 205 +++++++++++++++---
 src/components/buttons/Button.tsx             | 163 +++++++++-----
 2 files changed, 273 insertions(+), 95 deletions(-)

diff --git a/Storybook/components/Button/Button.stories.tsx b/Storybook/components/Button/Button.stories.tsx
index c2ca1b6c..6741158b 100644
--- a/Storybook/components/Button/Button.stories.tsx
+++ b/Storybook/components/Button/Button.stories.tsx
@@ -1,54 +1,187 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
+import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
+import { Button } from '../../../src/components/buttons/Button';
 
-import { Button } from 'smartway-react-native-ui';
+type ButtonType = typeof Button;
 
 export default {
     title: 'components/Button',
     component: Button,
-    argTypes: {
-        variant: {
-            control: { type: 'radio' },
-            options: ['filled', 'outlined', 'text'],
-        },
-        size: {
-            control: { type: 'radio' },
-            options: ['s', 'm', null],
-        },
-        status: {
-            control: { type: 'radio' },
-            options: ['primary', 'default', null],
-        },
-        onPress: { action: 'clicked' },
-    },
     decorators: [
         (Story) => {
-            const styles = StyleSheet.create({
-                container: { alignItems: 'center', justifyContent: 'center', flex: 1 },
-            });
             return (
-                <View style={styles.container}>
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
                     <Story />
                 </View>
             );
         },
     ],
-    parameters: {
-        notes: `
-# Button
-
-A simple button.
+} as ComponentMeta<ButtonType>;
 
-`,
+export const Default: ComponentStory<ButtonType> = (args) => {
+    return <Button {...args}>Button</Button>;
+};
+Default.argTypes = {
+    size: {
+        control: { type: 'radio' },
+        options: ['s', 'm'],
     },
-} as Meta<typeof Button>;
-
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-    args: {
-        children: 'Button',
+    variant: {
+        control: { type: 'radio' },
+        options: ['filled', 'outlined', 'text'],
+    },
+    status: {
+        control: { type: 'radio' },
+        options: ['default', 'primary', 'info', 'success', 'warning', 'error', 'inherit'],
     },
+    disabled: {
+        control: { type: 'boolean' },
+    },
+    onPress: { action: 'clicked' },
+};
+
+export const Catalog: ComponentStory<ButtonType> = (args) => {
+    return (
+        <View style={{ gap: 8 }}>
+            <View style={{ flexDirection: 'row', gap: 8 }}>
+                <Button {...args} variant="filled" status="default">
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="primary">
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="info">
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="success">
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="warning">
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="error">
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="inherit">
+                    Button
+                </Button>
+            </View>
+            <View style={{ flexDirection: 'row', gap: 8 }}>
+                <Button {...args} variant="filled" status="default" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="primary" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="info" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="success" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="warning" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="error" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="filled" status="inherit" disabled>
+                    Button
+                </Button>
+            </View>
+            <View style={{ flexDirection: 'row', gap: 8 }}>
+                <Button {...args} variant="outlined" status="default">
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="primary">
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="info">
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="success">
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="warning">
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="error">
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="inherit">
+                    Button
+                </Button>
+            </View>
+            <View style={{ flexDirection: 'row', gap: 8 }}>
+                <Button {...args} variant="outlined" status="default" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="primary" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="info" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="success" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="warning" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="error" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="outlined" status="inherit" disabled>
+                    Button
+                </Button>
+            </View>
+            <View style={{ flexDirection: 'row', gap: 8 }}>
+                <Button {...args} variant="text" status="default">
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="primary">
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="info">
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="success">
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="warning">
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="error">
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="inherit">
+                    Button
+                </Button>
+            </View>
+            <View style={{ flexDirection: 'row', gap: 8 }}>
+                <Button {...args} variant="text" status="default" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="primary" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="info" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="success" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="warning" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="error" disabled>
+                    Button
+                </Button>
+                <Button {...args} variant="text" status="inherit" disabled>
+                    Button
+                </Button>
+            </View>
+        </View>
+    );
 };
-Default.parameters = { noSafeArea: false };
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index cc6a1d53..f810996e 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -1,78 +1,123 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import { Button as ButtonBase } from 'react-native-paper';
-import { useTheme } from '../../styles/themes';
+import { useTheme, Theme } from '../../styles/themes';
+
+type ButtonProps = Omit<
+    React.ComponentProps<typeof ButtonBase>,
+    'mode' &
+        'dark' &
+        'compact' &
+        'color' &
+        'buttonColor' &
+        'textColor' &
+        'rippleColor' &
+        'loading' &
+        'uppercase' &
+        'background'
+>;
+
+type ButtonVariant = 'filled' | 'outlined' | 'text';
+type ButtonStatus = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error' | 'inherit';
 
-type ButtonProps = React.ComponentProps<typeof ButtonBase>;
 export interface customButtonProps extends ButtonProps {
     size?: 's' | 'm';
-    variant?: 'filled' | 'outlined' | 'text';
-    status?: 'primary' | 'default';
+    variant?: ButtonVariant;
+    status?: ButtonStatus;
+    disabled?: boolean;
 }
-export const Button = (props: customButtonProps) => {
+export const Button = ({
+    size = 'm',
+    variant = 'filled',
+    status = 'default',
+    disabled = false,
+    ...props
+}: customButtonProps) => {
     const theme = useTheme();
-    const mode =
-        props.variant === 'filled' && props.status === 'primary'
-            ? 'contained-tonal'
-            : props.variant === 'filled'
-            ? 'contained'
-            : props.variant;
-    const style = StyleSheet.create({
+    const mode = variant === 'filled' ? 'contained' : variant;
+    const commonStyle = StyleSheet.create({
         button: {
-            borderRadius: props?.size === 's' ? 14 : 18,
-            height: props?.size === 's' ? 38 : 48,
+            justifyContent: 'center',
+            borderRadius: size === 's' ? theme.sw.borderRadius.s : theme.sw.borderRadius.m,
+            height: size === 's' ? 38 : 48,
         },
         label: {
-            marginVertical: props?.size === 's' ? 6 : 11,
-            marginHorizontal: props?.size === 's' ? 16 : 22,
-            lineHeight: props?.size === 's' ? 24 : 26,
-            fontSize: props?.size === 's' ? 14 : 16,
-            fontFamily: 'PublicSans-Bold',
+            marginVertical: size === 's' ? 6 : 11,
+            marginHorizontal: size === 's' ? 16 : 22,
+            fontSize:
+                size === 's'
+                    ? theme.sw.typography.button.n3!.fontSize
+                    : theme.sw.typography.button.n1.fontSize,
+            fontFamily:
+                size === 's'
+                    ? theme.sw.typography.button.n3!.fontFamily
+                    : theme.sw.typography.button.n1.fontFamily,
+            fontWeight:
+                size === 's'
+                    ? (theme.sw.typography.button.n3!.fontWeight as never)
+                    : (theme.sw.typography.button.n1.fontWeight as never),
         },
     });
-    let customStyle = undefined;
-    if (mode === 'contained' || mode === undefined) {
-        customStyle = StyleSheet.create({
-            button: {},
-            label: {
-                color: props.disabled
-                    ? theme.colors.onSurfaceDisabled
-                    : theme.sw.color.neutral[0],
-            },
-        });
-    }
-    if ((mode === 'text' || mode === 'outlined') && props.status === 'primary') {
-        customStyle = StyleSheet.create({
-            button: {
-                // TODO: use new tokens
-                borderColor: theme.sw.color.primary[500] + '7A',
-                backgroundColor: theme.sw.color.neutral[0],
-            },
-            label: {
-                color: theme.colors.secondaryContainer,
-            },
-        });
-    }
-    if (mode === 'outlined' && (props.status === undefined || props.status === 'default')) {
-        customStyle = StyleSheet.create({
-            button: {
-                borderColor: props.disabled
-                    ? theme.sw.color.neutral[500] + '3D'
-                    : theme.sw.color.neutral[800] + '7A',
-            },
-            label: {
-                color: props.disabled
-                    ? theme.colors.onSurfaceDisabled
-                    : theme.sw.color.neutral[800],
-            },
-        });
-    }
+
+    const customStyle = StyleSheet.create({
+        button: {
+            borderColor: variant !== 'text' ? getButtonColor(status, theme) : undefined,
+            backgroundColor: variant !== 'filled' ? undefined : getButtonColor(status, theme),
+        },
+        label: {
+            color: getTextColor(variant, status, theme),
+        },
+    });
+
+    const disabledStyle = StyleSheet.create({
+        button: {
+            borderColor: variant !== 'text' ? theme.sw.color.neutral[300] : undefined,
+            backgroundColor: variant !== 'filled' ? undefined : theme.sw.color.neutral[300],
+        },
+        label: {
+            color: theme.sw.color.neutral[500],
+        },
+    });
+
     return (
         <ButtonBase
             {...props}
-            mode={mode ?? 'contained'}
-            style={[style.button, props.style, customStyle ? customStyle.button : {}]}
-            labelStyle={[style.label, props.labelStyle, customStyle ? customStyle.label : {}]}
+            mode={mode}
+            style={[commonStyle.button, customStyle.button, disabled && disabledStyle.button]}
+            labelStyle={[commonStyle.label, customStyle.label, disabled && disabledStyle.label]}
+            disabled={disabled}
         />
     );
 };
+
+const getButtonColor = (status: ButtonStatus, theme: Theme) => {
+    switch (status) {
+        case 'default':
+            return theme.sw.color.neutral[700];
+        case 'primary':
+            return theme.sw.color.primary[500];
+        case 'info':
+            return theme.sw.color.info[500];
+        case 'success':
+            return theme.sw.color.success[500];
+        case 'warning':
+            return theme.sw.color.warning[500];
+        case 'error':
+            return theme.sw.color.error[500];
+        case 'inherit':
+            return theme.sw.color.neutral[300];
+    }
+};
+
+const getTextColor = (variant: ButtonVariant, status: ButtonStatus, theme: Theme) => {
+    if (status === 'inherit') {
+        if (variant === 'filled') {
+            return theme.sw.color.neutral[800];
+        }
+        return theme.sw.color.neutral[600];
+    }
+    if (variant === 'filled') {
+        return theme.sw.color.neutral[0];
+    }
+    return getButtonColor(status, theme);
+};

From a0e236eb137b6190b4dad37120e82030d5a23cf6 Mon Sep 17 00:00:00 2001
From: Clement Dejoie <c.dejoie@smartway.ai>
Date: Wed, 17 Jul 2024 16:35:02 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20Banner=20:=20update=20button?=
 =?UTF-8?q?s=20color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/alert/Alert.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
index 6da0ed35..5556f825 100644
--- a/src/components/alert/Alert.tsx
+++ b/src/components/alert/Alert.tsx
@@ -49,7 +49,9 @@ const Alert = ({
             </View>
             <View style={styles.actionsContainer}>
                 {onButtonPress && buttonText && (
-                    <Button onPress={onButtonPress}>{buttonText}</Button>
+                    <Button status={status} onPress={onButtonPress}>
+                        {buttonText}
+                    </Button>
                 )}
                 {onDismiss && (
                     <Pressable