Feature/5213 implement Basic Dialog

login-workflow/docs/components/basic-dialog.md

@@ -0,0 +1,29 @@
+# BasicDialog
+
+Component that renders a basic dialog. This component provides a title, a body, and a close button.
+
+## Usage
+
+```tsx
+import { BasicDialog } from '@brightlayer-ui/react-native-auth-workflow';
+
+...
+
+<BasicDialog 
+  title="Notice!"
+  body="This is an example notice"
+  onDismiss={() => console.log('close')}  
+/>
+```
+
+## API
+
+| Prop Name | Type | Description | Default |
+|---|---|---|---|
+| open | `boolean`  | Whether the dialog is open. |  |
+| title | `string` | The title to display in the dialog. |  |
+| body | `string` | The content to display in the body of the dialog |  |
+| onDismiss | `() => void` | A function that is called when the close button is clicked. |  |
+| dismissButtonText | `string` | The text to display in the close button. | `'Okay'` |
+
+The properties of the underlying React Native Paper's [Dialog](https://callstack.github.io/react-native-paper/docs/components/Dialog/) component are also available.

login-workflow/package.json

@@ -94,7 +94,7 @@
         "@react-native-community/masked-view": "^0.1.7",
         "@react-navigation/native": "^5.1.1",
         "@react-navigation/stack": "^5.2.3",
-        "@testing-library/react-native": "^11.5.0",
+        "@testing-library/react-native": "^12.4.3",
         "@types/color": "^3.0.3",
         "@types/enzyme": "^3.10.5",
         "@types/enzyme-adapter-react-16": "^1.0.6",

login-workflow/src/__tests__/components/Dialog/BasicDialog-test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { cleanup, fireEvent, render, RenderResult, screen } from '@testing-library/react-native';
+import { BasicDialog, BasicDialogProps } from 'src/components';
+import { Provider as PaperProvider } from 'react-native-paper';
+import '@testing-library/react-native/extend-expect';
+
+describe('BasicDialog Test', () => {
+    const renderer = (props?: BasicDialogProps): RenderResult =>
+        render(
+            <PaperProvider>
+                <BasicDialog {...props} />
+            </PaperProvider>
+        );
+
+    afterEach(cleanup);
+    const onDismiss = jest.fn();
+
+    it('renders correctly', () => {
+        renderer();
+        expect(render).toBeTruthy();
+    });
+
+    it('should display the passed props', () => {
+        renderer({ open: true, title: 'Dialog Title' });
+        expect(screen.getByText('Dialog Title')).toBeOnTheScreen();
+    });
+
+    it('should call onDismiss prop, when button is pressed', () => {
+        renderer({ open: true, title: 'Dialog Title', onDismiss });
+        expect(screen.getByText('Okay')).toBeOnTheScreen();
+        fireEvent.press(screen.getByText('Okay'));
+        expect(onDismiss).toHaveBeenCalled();
+    });
+});

login-workflow/src/components/Dialog/BasicDialog.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Paragraph, Dialog, Portal, Button, DialogProps } from 'react-native-paper';
+import { StyleSheet, ViewStyle } from 'react-native';
+
+/**
+ * Component that renders a basic dialog with a title, body description, and a close button.
+ *
+ * @param title to show text in the title
+ * @param body text to show in the body
+ * @param onClose function to call when the close button is clicked
+ * @param props all other props will be spread to the underlying Dialog component
+ * @param dismissButtonText text to show in the close button
+ *
+ * @category Component
+ */
+
+const makeStyles = (): StyleSheet.NamedStyles<{
+    basicDialog: ViewStyle;
+    actions: ViewStyle;
+}> =>
+    StyleSheet.create({
+        basicDialog: {
+            minWidth: 300,
+            maxWidth: 600,
+            alignSelf: 'center',
+        },
+        actions: {
+            flexGrow: 0,
+        },
+    });
+
+export type BasicDialogProps = Omit<DialogProps, 'visible' | 'children'> & {
+    /**
+     * The title for the screen
+     */
+    title?: string;
+
+    /**
+     * The text to show in the main dialog body
+     */
+    body?: string;
+
+    /**
+     * The function to call when the close button is clicked
+     * @returns void
+     */
+    onDismiss?: () => void;
+
+    /**
+     * The text to show in the close button
+     */
+    dismissButtonText?: string;
+
+    /**
+     * Set the open / closed state of the dialog
+     * @default false
+     */
+    open?: boolean;
+};
+
+export const BasicDialog: React.FC<BasicDialogProps> = (props) => {
+    const { title, body, dismissButtonText, open = false, onDismiss, style, ...otherDialogProps } = props;
+    const defaultStyles = makeStyles();
+
+    return (
+        <Portal>
+            <Dialog visible={open} dismissable={false} style={[defaultStyles.basicDialog, style]} {...otherDialogProps}>
+                <Dialog.Title>{title}</Dialog.Title>
+                <Dialog.Content>
+                    <Paragraph>{body}</Paragraph>
+                </Dialog.Content>
+                <Dialog.Actions style={[defaultStyles.actions]}>
+                    <Button
+                        onPress={(): void => {
+                            onDismiss?.();
+                        }}
+                    >
+                        {dismissButtonText || 'Okay'}
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+        </Portal>
+    );
+};

login-workflow/src/components/Dialog/index.tsx

@@ -0,0 +1 @@
+export * from './BasicDialog';

login-workflow/src/components/index.tsx

@@ -1 +1,2 @@
 export * from './WorkflowCard';
+export * from './Dialog';

login-workflow/yarn.lock

@@ -2036,12 +2036,14 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@testing-library/react-native@^11.5.0":
-  version "11.5.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-11.5.4.tgz#5c57c0c5afc3f1960ff491aba68f66adc899e1cc"
-  integrity sha512-6DRzMHqili5pp1JRm7fh80SAP48aR25b37gohlLoKbqGBpDw8BbZTad7Luzktm9MU5DQUm7xyzg07Z1CyveVFA==
+"@testing-library/react-native@^12.4.3":
+  version "12.4.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.4.3.tgz#57cd6a88b289f19144558b5e97336b57101af3ec"
+  integrity sha512-WLE7VbbR5jZJQl3vfNK7Wt+IHnzhOxyu95Mr56EHmzH3XhC8DkrPVAnUq9asq/QWj4aGnymbinFx6zZys/WZmA==
   dependencies:
-    pretty-format "^29.0.0"
+    jest-matcher-utils "^29.7.0"
+    pretty-format "^29.7.0"
+    redent "^3.0.0"
 
 "@tootallnate/once@1":
   version "1.1.2"
@@ -7607,6 +7609,11 @@ mimic-response@^1.0.0, mimic-response@^1.0.1:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
   integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
 "minimatch@2 || 3", minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -8800,6 +8807,14 @@ recast@^0.21.0:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 reflect.getprototypeof@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
@@ -9674,6 +9689,13 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
 strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"