Add Snackbar to Storybook

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

@@ -0,0 +1,60 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Platform, View } from 'react-native'
+import React from 'react'
+
+import { Button } from '../Button/Button'
+import { ShowSnackbar, Snackbar, SnackbarProps } from './Snackbar'
+import { generateDocs } from '../../utils/storybook'
+
+const meta: Meta<SnackbarProps> = {
+  title: 'Snackbar',
+  component: Snackbar,
+  decorators: [
+    (Story) => (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        {Story()}
+      </View>
+    ),
+  ],
+  parameters: {
+    docs: generateDocs({
+      name: 'Snackbar',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Alerts%20and%20progress/Snackbar',
+    }),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<SnackbarProps>
+
+const mobileComponentRenderer = (props: SnackbarProps) => {
+  const { isError, messageA11y, onActionPressed } = props.data || {}
+  const onPressSnackbar = () => {
+    ShowSnackbar(props.message as string, {
+      isError,
+      messageA11y,
+      onActionPressed,
+    })
+  }
+
+  return <Button label="Press for Snackbar" onPress={onPressSnackbar} />
+}
+
+export const _Snackbar: Story = {
+  render: Platform.OS !== 'web' ? mobileComponentRenderer : undefined, // Render Snackbar flat in web
+  args: {
+    message: 'Message moved to Custom Folder',
+    data: {
+      isError: false,
+      messageA11y: 'Message moved to Custom Folder with a11y',
+      onActionPressed: () => console.log('Action pressed'),
+    },
+  },
+}

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

@@ -49,29 +49,6 @@ export type SnackbarType = Omit<ToastType, 'show' | 'update'> & {
   ) => string
 }
 
-//
-// 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 = () => {
   // const forceUpdate = useReducer(x => x + 1, 0)[1]
   // const [offset, setOffset] = useState(10)
@@ -136,6 +113,25 @@ const SnackbarButton: FC<SnackbarButtonProps> = ({ text, onPress }) => {
 
 export type SnackbarProps = Omit<ToastProps, 'data'> & snackbarData
 
+/**
+ * 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 Snackbar: FC<SnackbarProps> = (toast) => {
   const fontScale = useWindowDimensions().fontScale
   const theme = useTheme()
@@ -221,7 +217,7 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
 
   const buttonContainer: ViewProps = {
     style: {
-      flex: 0,
+      flexGrow: 0,
       flexDirection: 'row',
       flexWrap: 'wrap',
       marginLeft: 'auto', // Maintains alignment to right side