Merge pull request #399 from department-of-veterans-affairs/spike/363…

…-SnackbarProofOfConcept

[Spike] Snackbar proof of concept

packages/components/.npmignore

@@ -4,6 +4,7 @@
 .expo
 .storybook
 .yarn
+buildIconListFromAssets.js
 coverage/
 jest/
 node_modules/

packages/components/global.d.ts

@@ -8,3 +8,7 @@ declare module '*.svg' {
   const content: React.FC<SvgProps>
   export default content
 }
+
+type SnackbarType = import('./src/components/Snackbar/Snackbar').SnackbarType
+// eslint-disable-next-line no-var
+declare var snackbar: SnackbarType

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.20.3",
+  "version": "0.20.4-alpha.0",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {
@@ -43,6 +43,7 @@
     "i18next": "^23.11.5",
     "react-i18next": "^14.1.2",
     "react-native-svg": "15.2.0",
+    "react-native-toast-notifications": "^3.4.0",
     "styled-components": "^6.1.8"
   },
   "peerDependencies": {

packages/components/src/App.tsx

@@ -5,6 +5,7 @@ import { registerRootComponent } from 'expo'
 import { useFonts } from 'expo-font'
 import React, { useCallback } from 'react'
 
+import { SnackbarProvider } from './components/Snackbar/Snackbar'
 import StorybookUI from '../.storybook/native'
 import i18n from './utils/translation/i18n'
 
@@ -42,6 +43,7 @@ const App = () => {
       <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
         <StorybookUI />
       </View>
+      <SnackbarProvider />
     </I18nextProvider>
   )
 }

packages/components/src/components/Snackbar/Snackbar.tsx

@@ -0,0 +1,61 @@
+import { ToastOptions } from 'react-native-toast-notifications/lib/typescript/toast'
+import React from 'react'
+import Toast, { ToastType } from 'react-native-toast-notifications'
+import ToastContainer from 'react-native-toast-notifications'
+
+type modifyToastOptions = Omit<ToastOptions, 'data'> & {
+  data?: {
+    onActionPressed?: () => void
+    isError?: boolean
+    actionBtnText?: string
+    isUndo?: boolean
+  }
+}
+
+export type SnackbarType = Omit<ToastType, 'show' | 'update'> & {
+  /** Shows a new toast. Returns id */
+  show: (
+    message: string | JSX.Element,
+    toastOptions?: modifyToastOptions | undefined,
+  ) => string
+}
+
+type SnackbarProviderProps = {
+  globalSnackbar?: SnackbarType
+}
+
+//
+// TODO: May need to move the following doc to the custom render to show in Storybook
+//
+
+/**
+ * To use SnackbarProvider, your app must have a global.d.ts which you can copy the following into:
+ * ```
+ * type SnackbarType = import('@department-of-veterans-affairs/mobile-component-library').SnackbarType
+ * // eslint-disable-next-line no-var
+ * declare var snackbar: SnackbarType
+ * ```
+ * then add SnackbarProvider in App.tsx (or similar foundational file) level with your app rendering:
+ * ```
+ * <>
+ *   <App />
+ *   <SnackbarProvider />
+ * </>
+ * ```
+ * 
+ * This config will allow it to be called anywhere including outside React components.
+ * 
+ * The Snackbar remains open indefinitely. App configuration should ensure it is dismissed on navigation.
+ */
+export const SnackbarProvider: React.FC<SnackbarProviderProps> = ({
+  // globalSnackbar,
+}) => {
+  return (
+    <Toast
+      animationDuration={100}
+      duration={1000000000000} // Essentially indefinite until dismissed
+      ref={(ref) => ((globalThis.snackbar as ToastContainer | null) = ref)}
+      swipeEnabled={false}
+    />
+  )
+}

packages/components/src/index.tsx

@@ -13,6 +13,7 @@ export { Icon } from './components/Icon/Icon'
 export { Link } from './components/Link/Link'
 export { LoadingIndicator } from './components/LoadingIndicator/LoadingIndicator'
 export { SegmentedControl } from './components/SegmentedControl/SegmentedControl'
+export { SnackbarProvider, type SnackbarType } from './components/Snackbar/Snackbar'
 export { Spacer } from './components/Spacer/Spacer'
 
 // Export consumer available utilities here so they are exported through npm

yarn.lock

@@ -2195,6 +2195,7 @@ __metadata:
     react-native-screens: "npm:3.31.1"
     react-native-svg: "npm:15.2.0"
     react-native-svg-transformer: "npm:^1.3.0"
+    react-native-toast-notifications: "npm:^3.4.0"
     react-native-web: "npm:~0.19.10"
     react-test-renderer: "npm:^18.2.0"
     storybook: "npm:7.6.19"
@@ -17571,6 +17572,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-toast-notifications@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "react-native-toast-notifications@npm:3.4.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 1e60ca9155bd19a2c47670a80f60438dbd88be2a4193d6dedce04f3179a529b5fdc85c4b5283926d383f8641d757ac302b96d1a1eb2760a6424e4b433582ad79
+  languageName: node
+  linkType: hard
+
 "react-native-web@npm:~0.19.10":
   version: 0.19.10
   resolution: "react-native-web@npm:0.19.10"