From 3ec09d57ee731eab485442bbb91abf66ba677fc7 Mon Sep 17 00:00:00 2001
From: goztrk <me@gokhan.org.tr>
Date: Mon, 6 May 2024 21:15:27 +0300
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E2=9C=A8=20confirm=20dialog=20comp?=
 =?UTF-8?q?onent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Dialogs/Confirm.tsx | 150 +++++++++++++++++++++++++++++++++
 components/Dialogs/index.ts    |   1 +
 components/README.md           | 118 ++++++++++++++++++++++++++
 3 files changed, 269 insertions(+)
 create mode 100644 components/Dialogs/Confirm.tsx
 create mode 100644 components/Dialogs/index.ts
 create mode 100644 components/README.md

diff --git a/components/Dialogs/Confirm.tsx b/components/Dialogs/Confirm.tsx
new file mode 100644
index 00000000..f946c172
--- /dev/null
+++ b/components/Dialogs/Confirm.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+
+import {
+    Card,
+    Colors,
+    Dialog,
+    Text,
+    TouchableOpacity,
+    View,
+} from 'react-native-ui-lib';
+
+export interface ConfirmDialogProps {
+    /**
+     * The title of the dialog
+     */
+    title: string;
+
+    /**
+     * The function to call when the confirm button is pressed
+     */
+    onConfirm: () => void;
+
+    /**
+     * The description text if title is not enough
+     */
+    children?: React.ReactNode;
+
+    /**
+     * The text to display on the confirm button
+     * @default 'Yes'
+     */
+    confirmText?: string;
+
+    /**
+     * The text to display on the cancel button
+     * @default 'No'
+     */
+    cancelText?: string;
+
+    /**
+     * The color of the confirm button
+     * @default '$textSuccess'
+     */
+    confirmColor?: keyof typeof Colors;
+
+    /**
+     * The color of the cancel button
+     * @default '$textDefault'
+     */
+    cancelColor?: keyof typeof Colors;
+}
+
+export type ConfirmDialogRef = {
+    /**
+     * Open the dialog
+     */
+    open: () => void;
+};
+
+/**
+ * A dialog that asks the user to confirm an action
+ *
+ * @example
+ * ```tsx
+ * const ref = React.useRef<ConfirmDialogRef>(null);
+ *
+ * const handlePress = () => {
+ *    ref.current?.open();
+ * };
+ *
+ * const handleDialogConfirm = () => {
+ *   ref.current?.close();
+ *   // do something
+ * };
+ *
+ * return (
+ *   <>
+ *     <ConfirmDialog
+ *       ref={ref}
+ *       title="Save"
+ *       onConfirm={handleDialogConfirm}
+ *     >
+ *       <Text>Are you sure you want to save this session?</Text>
+ *     </ConfirmDialog>
+ *     <Button label="Save" onPress={handlePress} />
+ *   </>
+ * );
+ * ```
+ */
+export const ConfirmDialog = React.forwardRef<ConfirmDialogRef, ConfirmDialogProps>(
+    (
+        {
+            title,
+            onConfirm,
+            confirmText = 'Yes',
+            cancelText = 'No',
+            confirmColor = '$textSuccess',
+            cancelColor = '$textDefault',
+            children,
+        },
+        ref
+    ) => {
+        const [visible, setVisible] = React.useState(false);
+
+        const handleClose = () => setVisible(false);
+        const handleOpen = () => setVisible(true);
+
+        const handleConfirm = () => {
+            handleClose();
+            onConfirm();
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            open: handleOpen,
+        }));
+
+        return (
+            <Dialog visible={visible} onDismiss={handleClose}>
+                <Card padding-s4 gap-s4>
+                    <Text text70M>{title}</Text>
+                    {children && <View>{children}</View>}
+                    <View row marginT-s10>
+                        <TouchableOpacity
+                            onPress={handleClose}
+                            center
+                            style={{ width: '50%' }}
+                        >
+                            <Text text80H {...{ [cancelColor]: true }}>
+                                {cancelText}
+                            </Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            onPress={handleConfirm}
+                            center
+                            style={{
+                                width: '50%',
+                                borderLeftWidth: 1,
+                                borderLeftColor: Colors.$backgroundNeutral,
+                            }}
+                        >
+                            <Text text80H {...{ [confirmColor]: true }}>
+                                {confirmText}
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+                </Card>
+            </Dialog>
+        );
+    }
+);
diff --git a/components/Dialogs/index.ts b/components/Dialogs/index.ts
new file mode 100644
index 00000000..d8e1c97b
--- /dev/null
+++ b/components/Dialogs/index.ts
@@ -0,0 +1 @@
+export * from './Confirm';
diff --git a/components/README.md b/components/README.md
new file mode 100644
index 00000000..cd4339f6
--- /dev/null
+++ b/components/README.md
@@ -0,0 +1,118 @@
+# HTK React Native Components
+
+These components are reusable parts for all Expo/React Native projects.
+
+## Required NPM Packages
+- `react-native-ui-lib` - A versatile library that offers a variety of useful
+  components and utilities.
+
+## Rules
+
+The following rules must be adhered to:
+
+### Folder Structure
+Each component or component group should have its own separate folder.
+
+**Reason**:
+A component may be too large to reside in a single file and may need to be
+split into multiple files to enhance performance and readability. The folder
+name should reflect the component name. The folder may contain multiple
+subcomponents that are private to the component itself.
+
+:x: Bad:
+```sh
+./components/Button.tsx
+```
+
+:white_check_mark: Good:
+```sh
+./components/Button/index.tsx
+```
+
+### Filetype
+All files must be in TypeScript to provide error checking and autocompletion.
+The correct extension for TypeScript JSX files is .tsx.
+
+### TypeScript Types
+When using props in a component:
+- Use `interface`
+- The name must be `<ComponentName>Props`
+- `export` the interface
+
+**Reason**:
+Interfaces are easier to extend. There might be a need to wrap the component
+for special cases, utilizing the component's props.
+
+:x: Bad
+```tsx
+// Bad because:
+// - It does not use `interface`
+// - The name is too generic
+// - It is not exported
+type Props = {
+  // ...
+}
+
+export function Button(props: Props) {
+  // ...
+}
+```
+
+:white_check_mark: Good:
+```tsx
+export interface ButtonProps {
+  // ...
+}
+
+export function Button(props: Props) {
+  // ...
+}
+```
+
+### Extensive docstrings
+**Reason**:
+To improve documentation and assist the team in easily utilizing the component,
+each prop and the component itself must have docstrings.
+
+:x: Bad
+```tsx
+export interface ButtonProps {
+  label: string;
+  onPress?: () => void;
+}
+
+export function Button(props: Props) {
+  // ...
+}
+```
+
+:white_check_mark: Good:
+```tsx
+export interface ButtonProps {
+  /**
+   * Text to displayed inside the button.
+   */
+  label: string;
+
+  /**
+   * Callback function that is called when the button is pressed.
+   */
+  onPress?: () => void;
+}
+
+/**
+ * Button Component
+ *
+ * @example
+ * ```tsx
+ * const handlePress = () => {
+ *   // ...
+ * };
+ * return <Button label="Foo" onPress={handlePress} />;
+ *
+ * ```
+ */
+export function Button(props: Props) {
+  // ...
+}
+```

From e3fec06c69109a54db2f6808a976384480ca9c73 Mon Sep 17 00:00:00 2001
From: goztrk <me@gokhan.org.tr>
Date: Tue, 7 May 2024 22:45:30 +0300
Subject: [PATCH 2/3] update confirm dialog component

---
 components/Dialogs/Confirm.tsx                | 150 ------------------
 .../Dialogs/Confirm/HorizontalButtons.tsx     |  77 +++++++++
 components/Dialogs/Confirm/Root.tsx           |  72 +++++++++
 components/Dialogs/Confirm/Title.tsx          |   9 ++
 .../Dialogs/Confirm/VerticalButtons.tsx       |  71 +++++++++
 components/Dialogs/Confirm/context.ts         |   7 +
 components/Dialogs/Confirm/index.tsx          |  18 +++
 utils/react/contextBuilder.ts                 |  65 ++++++++
 8 files changed, 319 insertions(+), 150 deletions(-)
 delete mode 100644 components/Dialogs/Confirm.tsx
 create mode 100644 components/Dialogs/Confirm/HorizontalButtons.tsx
 create mode 100644 components/Dialogs/Confirm/Root.tsx
 create mode 100644 components/Dialogs/Confirm/Title.tsx
 create mode 100644 components/Dialogs/Confirm/VerticalButtons.tsx
 create mode 100644 components/Dialogs/Confirm/context.ts
 create mode 100644 components/Dialogs/Confirm/index.tsx
 create mode 100644 utils/react/contextBuilder.ts

diff --git a/components/Dialogs/Confirm.tsx b/components/Dialogs/Confirm.tsx
deleted file mode 100644
index f946c172..00000000
--- a/components/Dialogs/Confirm.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import React from 'react';
-
-import {
-    Card,
-    Colors,
-    Dialog,
-    Text,
-    TouchableOpacity,
-    View,
-} from 'react-native-ui-lib';
-
-export interface ConfirmDialogProps {
-    /**
-     * The title of the dialog
-     */
-    title: string;
-
-    /**
-     * The function to call when the confirm button is pressed
-     */
-    onConfirm: () => void;
-
-    /**
-     * The description text if title is not enough
-     */
-    children?: React.ReactNode;
-
-    /**
-     * The text to display on the confirm button
-     * @default 'Yes'
-     */
-    confirmText?: string;
-
-    /**
-     * The text to display on the cancel button
-     * @default 'No'
-     */
-    cancelText?: string;
-
-    /**
-     * The color of the confirm button
-     * @default '$textSuccess'
-     */
-    confirmColor?: keyof typeof Colors;
-
-    /**
-     * The color of the cancel button
-     * @default '$textDefault'
-     */
-    cancelColor?: keyof typeof Colors;
-}
-
-export type ConfirmDialogRef = {
-    /**
-     * Open the dialog
-     */
-    open: () => void;
-};
-
-/**
- * A dialog that asks the user to confirm an action
- *
- * @example
- * ```tsx
- * const ref = React.useRef<ConfirmDialogRef>(null);
- *
- * const handlePress = () => {
- *    ref.current?.open();
- * };
- *
- * const handleDialogConfirm = () => {
- *   ref.current?.close();
- *   // do something
- * };
- *
- * return (
- *   <>
- *     <ConfirmDialog
- *       ref={ref}
- *       title="Save"
- *       onConfirm={handleDialogConfirm}
- *     >
- *       <Text>Are you sure you want to save this session?</Text>
- *     </ConfirmDialog>
- *     <Button label="Save" onPress={handlePress} />
- *   </>
- * );
- * ```
- */
-export const ConfirmDialog = React.forwardRef<ConfirmDialogRef, ConfirmDialogProps>(
-    (
-        {
-            title,
-            onConfirm,
-            confirmText = 'Yes',
-            cancelText = 'No',
-            confirmColor = '$textSuccess',
-            cancelColor = '$textDefault',
-            children,
-        },
-        ref
-    ) => {
-        const [visible, setVisible] = React.useState(false);
-
-        const handleClose = () => setVisible(false);
-        const handleOpen = () => setVisible(true);
-
-        const handleConfirm = () => {
-            handleClose();
-            onConfirm();
-        };
-
-        React.useImperativeHandle(ref, () => ({
-            open: handleOpen,
-        }));
-
-        return (
-            <Dialog visible={visible} onDismiss={handleClose}>
-                <Card padding-s4 gap-s4>
-                    <Text text70M>{title}</Text>
-                    {children && <View>{children}</View>}
-                    <View row marginT-s10>
-                        <TouchableOpacity
-                            onPress={handleClose}
-                            center
-                            style={{ width: '50%' }}
-                        >
-                            <Text text80H {...{ [cancelColor]: true }}>
-                                {cancelText}
-                            </Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            onPress={handleConfirm}
-                            center
-                            style={{
-                                width: '50%',
-                                borderLeftWidth: 1,
-                                borderLeftColor: Colors.$backgroundNeutral,
-                            }}
-                        >
-                            <Text text80H {...{ [confirmColor]: true }}>
-                                {confirmText}
-                            </Text>
-                        </TouchableOpacity>
-                    </View>
-                </Card>
-            </Dialog>
-        );
-    }
-);
diff --git a/components/Dialogs/Confirm/HorizontalButtons.tsx b/components/Dialogs/Confirm/HorizontalButtons.tsx
new file mode 100644
index 00000000..aa4765fd
--- /dev/null
+++ b/components/Dialogs/Confirm/HorizontalButtons.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { Colors, Text, TouchableOpacity, View } from 'react-native-ui-lib';
+
+import { useUpdate } from './context';
+
+export interface ConfirmDialogHorizontalButtonsProps {
+    /**
+     * The function to call when the confirm button is pressed
+     */
+    onConfirm: () => void;
+
+    /**
+     * The text to display on the confirm button
+     * @default 'Yes'
+     */
+    confirmText?: string;
+
+    /**
+     * The text to display on the cancel button
+     * @default 'No'
+     */
+    cancelText?: string;
+
+    /**
+     * The color of the confirm button
+     * @default '$textSuccess'
+     */
+    confirmColor?: keyof typeof Colors;
+
+    /**
+     * The color of the cancel button
+     * @default '$textDefault'
+     */
+    cancelColor?: keyof typeof Colors;
+}
+
+export const HorizontalButtons = ({
+    onConfirm,
+    cancelText = 'No',
+    confirmText = 'Yes',
+    cancelColor = '$textDanger',
+    confirmColor = '$textSuccess',
+}: ConfirmDialogHorizontalButtonsProps) => {
+    const update = useUpdate();
+
+    const handleClose = () => update({ visible: false });
+
+    const handleConfirm = () => {
+        handleClose();
+        onConfirm();
+    };
+
+    return (
+        <View row marginT-s10>
+            <TouchableOpacity onPress={handleClose} center style={{ width: '50%' }}>
+                <Text text80H {...{ [cancelColor]: true }}>
+                    {cancelText}
+                </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+                onPress={handleConfirm}
+                center
+                style={{
+                    width: '50%',
+                    borderLeftWidth: 1,
+                    borderLeftColor: Colors.$backgroundNeutral,
+                }}
+            >
+                <Text text80H {...{ [confirmColor]: true }}>
+                    {confirmText}
+                </Text>
+            </TouchableOpacity>
+        </View>
+    );
+};
+HorizontalButtons.displayName = 'ConfirmDialog.HorizontalButtons';
diff --git a/components/Dialogs/Confirm/Root.tsx b/components/Dialogs/Confirm/Root.tsx
new file mode 100644
index 00000000..c509daad
--- /dev/null
+++ b/components/Dialogs/Confirm/Root.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { Card, Dialog } from 'react-native-ui-lib';
+
+import { useContext, useUpdate } from './context';
+
+export interface ConfirmDialogProps {
+    /**
+     * The description text if title is not enough
+     */
+    children?: React.ReactNode;
+}
+
+export type ConfirmDialogRef = {
+    /**
+     * Open the dialog
+     */
+    open: () => void;
+};
+
+/**
+ * A dialog that asks the user to confirm an action
+ *
+ * @example
+ * ```tsx
+ * const ref = React.useRef<ConfirmDialogRef>(null);
+ *
+ * const handlePress = () => {
+ *    ref.current?.open();
+ * };
+ *
+ * const handleDialogConfirm = () => {
+ *   ref.current?.close();
+ *   // do something
+ * };
+ *
+ * return (
+ *   <>
+ *     <ConfirmDialog ref={ref}>
+ *       <ConfirmDialog.Title>Save Session</ConfirmDialog.Title>
+ *       <Text>Are you sure you want to save this session?</Text>
+ *       <ConfirmDialog.HorizontalButtons
+ *         onConfirm={handleDialogConfirm}
+ *       />
+ *     </ConfirmDialog>
+ *     <Button label="Save" onPress={handlePress} />
+ *   </>
+ * );
+ * ```
+ */
+export const Root = React.forwardRef<ConfirmDialogRef, ConfirmDialogProps>(
+    ({ children }, ref) => {
+        const { visible } = useContext();
+        const update = useUpdate();
+
+        const handleOpen = () => update({ visible: true });
+        const handleClose = () => update({ visible: false });
+
+        React.useImperativeHandle(ref, () => ({
+            open: handleOpen,
+        }));
+
+        return (
+            <Dialog visible={visible} onDismiss={handleClose}>
+                <Card padding-s4 gap-s4>
+                    {children}
+                </Card>
+            </Dialog>
+        );
+    }
+);
+Root.displayName = 'ConfirmDialog.Root';
diff --git a/components/Dialogs/Confirm/Title.tsx b/components/Dialogs/Confirm/Title.tsx
new file mode 100644
index 00000000..d1e6cc4c
--- /dev/null
+++ b/components/Dialogs/Confirm/Title.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Text as RNText } from 'react-native';
+import { Text, TextProps } from 'react-native-ui-lib';
+
+export const Title = React.forwardRef<RNText, TextProps>((props, ref) => (
+    <Text ref={ref} text70M {...props} />
+));
+Title.displayName = 'ConfirmDialog.Title';
diff --git a/components/Dialogs/Confirm/VerticalButtons.tsx b/components/Dialogs/Confirm/VerticalButtons.tsx
new file mode 100644
index 00000000..41be9ed0
--- /dev/null
+++ b/components/Dialogs/Confirm/VerticalButtons.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { Button, Colors, Text, TouchableOpacity, View } from 'react-native-ui-lib';
+
+import { useUpdate } from './context';
+
+export interface ConfirmDialogVerticalButtonsProps {
+    /**
+     * The function to call when the confirm button is pressed
+     */
+    onConfirm: () => void;
+
+    /**
+     * The text to display on the confirm button
+     * @default 'Yes'
+     */
+    confirmText?: string;
+
+    /**
+     * The text to display on the cancel button
+     * @default 'No'
+     */
+    cancelText?: string;
+
+    /**
+     * The color of the confirm button
+     * @default '$textSuccess'
+     */
+    confirmColor?: keyof typeof Colors;
+
+    /**
+     * The color of the cancel button
+     * @default '$textDefault'
+     */
+    cancelColor?: keyof typeof Colors;
+}
+
+export const VerticalButtons = ({
+    onConfirm,
+    cancelText = 'No',
+    confirmText = 'Yes',
+    cancelColor = '$textDanger',
+    confirmColor = '$textSuccess',
+}: ConfirmDialogVerticalButtonsProps) => {
+    const update = useUpdate();
+
+    const handleClose = () => update({ visible: false });
+
+    const handleConfirm = () => {
+        handleClose();
+        onConfirm();
+    };
+
+    return (
+        <View gap-s4 marginT-s4>
+            <Button
+                label={confirmText}
+                onPress={handleConfirm}
+                backgroundColor={Colors[confirmColor]}
+            />
+            <Button
+                label={cancelText}
+                onPress={handleClose}
+                size="small"
+                link
+                linkColor={Colors[cancelColor]}
+            />
+        </View>
+    );
+};
+VerticalButtons.displayName = 'ConfirmDialog.VerticalButtons';
diff --git a/components/Dialogs/Confirm/context.ts b/components/Dialogs/Confirm/context.ts
new file mode 100644
index 00000000..0886434e
--- /dev/null
+++ b/components/Dialogs/Confirm/context.ts
@@ -0,0 +1,7 @@
+import { contextBuilder } from '@htk/utils/react/contextBuilder';
+
+const [ConfirmDialogProvider, useContext, useDispatch, useUpdate] = contextBuilder({
+    visible: false,
+});
+
+export { ConfirmDialogProvider, useContext, useDispatch, useUpdate };
diff --git a/components/Dialogs/Confirm/index.tsx b/components/Dialogs/Confirm/index.tsx
new file mode 100644
index 00000000..b7498de7
--- /dev/null
+++ b/components/Dialogs/Confirm/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { ConfirmDialogProvider } from './context';
+import { HorizontalButtons } from './HorizontalButtons';
+import { ConfirmDialogProps, ConfirmDialogRef, Root } from './Root';
+import { Title } from './Title';
+import { VerticalButtons } from './VerticalButtons';
+
+export { ConfirmDialogRef, ConfirmDialogProps };
+
+export const ConfirmDialog = Object.assign(
+    React.forwardRef<ConfirmDialogRef, ConfirmDialogProps>((props, ref) => (
+        <ConfirmDialogProvider>
+            <Root ref={ref} {...props} />
+        </ConfirmDialogProvider>
+    )),
+    { Title, HorizontalButtons, VerticalButtons }
+);
diff --git a/utils/react/contextBuilder.ts b/utils/react/contextBuilder.ts
new file mode 100644
index 00000000..1507cc0f
--- /dev/null
+++ b/utils/react/contextBuilder.ts
@@ -0,0 +1,65 @@
+import React from 'react';
+
+type ContextAction<T> = { type: 'UPDATE'; payload: Partial<T> } | { type: 'RESET' };
+type IProvider<T> = React.FC<{ value?: Partial<T>; children: React.ReactNode }>;
+type IuseContext<T> = () => T;
+type IuseContextDispatch<T> = () => React.Dispatch<ContextAction<T>>;
+type IuseUpdate<T> = () => (payload: Partial<T>) => void;
+
+export function contextBuilder<T>(
+    defaultValue: T
+): [IProvider<T>, IuseContext<T>, IuseContextDispatch<T>, IuseUpdate<T>] {
+    const Context = React.createContext<T>(defaultValue);
+    const DispatchContext = React.createContext<React.Dispatch<ContextAction<T>>>(
+        () => {}
+    );
+
+    const reducer: React.Reducer<T, ContextAction<T>> = (state, action) => {
+        switch (action.type) {
+            case 'UPDATE':
+                return { ...state, ...action.payload };
+            case 'RESET':
+                return defaultValue;
+        }
+    };
+
+    const useContext = () => {
+        const context = React.useContext(Context);
+        if (context === undefined) {
+            throw new Error('useContext must be used within a Provider');
+        }
+        return context;
+    };
+
+    const useDispatch = () => {
+        const dispatch = React.useContext(DispatchContext);
+        if (dispatch === undefined) {
+            throw new Error('useDispatch must be used within a Provider');
+        }
+        return dispatch;
+    };
+
+    const useUpdate = () => {
+        const dispatch = useDispatch();
+
+        return (payload: Partial<T>) => dispatch({ type: 'UPDATE', payload });
+    };
+
+    const Provider = ({
+        value = {},
+        children,
+    }: {
+        value?: Partial<T>;
+        children: React.ReactNode;
+    }) => {
+        const [state, dispatch] = React.useReducer(reducer, defaultValue);
+
+        const context = React.useMemo(() => ({ ...state, ...value }), [state, value]);
+
+        return React.createElement(DispatchContext.Provider, { value: dispatch }, [
+            React.createElement(Context.Provider, { value: context }, children),
+        ]);
+    };
+
+    return [Provider, useContext, useDispatch, useUpdate];
+}

From 85b55123299b2f12b67ff1970a581e804452a650 Mon Sep 17 00:00:00 2001
From: goztrk <me@gokhan.org.tr>
Date: Tue, 7 May 2024 22:54:59 +0300
Subject: [PATCH 3/3] feat: add reverse to vertical buttons

---
 .../Dialogs/Confirm/VerticalButtons.tsx       | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/Dialogs/Confirm/VerticalButtons.tsx b/components/Dialogs/Confirm/VerticalButtons.tsx
index 41be9ed0..07a45eef 100644
--- a/components/Dialogs/Confirm/VerticalButtons.tsx
+++ b/components/Dialogs/Confirm/VerticalButtons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button, Colors, Text, TouchableOpacity, View } from 'react-native-ui-lib';
+import { Button, Colors, View } from 'react-native-ui-lib';
 
 import { useUpdate } from './context';
 
@@ -33,6 +33,12 @@ export interface ConfirmDialogVerticalButtonsProps {
      * @default '$textDefault'
      */
     cancelColor?: keyof typeof Colors;
+
+    /**
+     * If true, the buttons will be reversed
+     * @default false
+     */
+    reversed?: boolean;
 }
 
 export const VerticalButtons = ({
@@ -41,6 +47,7 @@ export const VerticalButtons = ({
     confirmText = 'Yes',
     cancelColor = '$textDanger',
     confirmColor = '$textSuccess',
+    reversed = false,
 }: ConfirmDialogVerticalButtonsProps) => {
     const update = useUpdate();
 
@@ -54,16 +61,16 @@ export const VerticalButtons = ({
     return (
         <View gap-s4 marginT-s4>
             <Button
-                label={confirmText}
-                onPress={handleConfirm}
-                backgroundColor={Colors[confirmColor]}
+                label={reversed ? cancelText : confirmText}
+                onPress={reversed ? handleClose : handleConfirm}
+                backgroundColor={reversed ? Colors[cancelColor] : Colors[confirmColor]}
             />
             <Button
-                label={cancelText}
-                onPress={handleClose}
+                label={reversed ? confirmText : cancelText}
+                onPress={reversed ? handleConfirm : handleClose}
                 size="small"
                 link
-                linkColor={Colors[cancelColor]}
+                linkColor={reversed ? Colors[confirmColor] : Colors[cancelColor]}
             />
         </View>
     );