fix: added error handler prop to components

src/components/basic/Notifications/Snackbar.mdx

@@ -0,0 +1,83 @@
+{/*
+* Copyright (c) 2024 Contributors to the Eclipse Foundation
+*
+* See the NOTICE file(s) distributed with this work for additional
+* information regarding copyright ownership.
+*
+* This program and the accompanying materials are made available under the
+* terms of the Apache License, Version 2.0 which is available at
+* https://www.apache.org/licenses/LICENSE-2.0.
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*
+* SPDX-License-Identifier: Apache-2.0
+*/}
+
+import { Canvas, Story, Meta } from '@storybook/blocks'
+import * as SnackbarStories from './SnackbarManager/SnackbarManager.stories'
+
+import { GlobalSnackbarContainer, useSnackbar } from './SnackbarManager'
+import { Button } from '../Button'
+
+<Meta title="Hook/Snackbar" />
+
+## useSnackbar
+
+<Canvas of={SnackbarStories.SnackbarExample} />
+
+#### Details
+
+The useSnackbar hook provides a simple and efficient way to trigger snackbars in your React application.
+
+It leverages a singleton pattern to manage snackbar notifications globally, ensuring that snackbars can be displayed from any component without requiring explicit wrapping or context.
+
+This hook is especially useful in scenarios where you want to trigger a user notification (e.g., success, error, warning) in response to events like form submissions, API responses, or user interactions.
+
+Additionally, the hook supports customizable snackbar options such as message, severity, duration, and more as provided by the existing PageSnackbar component.
+
+#### Prerequisites:
+
+**Global Initialization:** Ensure that GlobalSnackbarContainer is properly initialized in your application root, so that the useSnackbar hook can function as expected.
+typically in your index.tsx or App.tsx.
+
+```jsx
+
+import { GlobalSnackbarContainer, SharedThemeProvider } from '@catena-x/portal-shared-components'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <SharedThemeProvider>
+      <App />
+      <GlobalSnackbarContainer/>
+   </SharedThemeProvider>
+)
+```
+
+#### Usage
+
+```jsx
+import { useSnackbar } from '@catena-x/portal-shared-components';
+
+const ExampleComponent: React.FC = () => {
+  const { showSnackbar } = useSnackbar();
+
+  const handleError = () => {
+    showSnackbar({
+      message: 'This is an error message!',
+      severity: 'error',
+    });
+  };
+
+  return (
+    <div>
+     <Button variant="contained" color="secondary" onClick={handleError}>
+        Show Error Snackbar
+      </Button>
+    </div>
+  );
+};
+export default ExampleComponent;
+```

src/components/basic/Notifications/SnackbarManager/SnackbarManager.stories.tsx

@@ -0,0 +1,118 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { type StoryFn } from '@storybook/react'
+
+import { GlobalSnackbarContainer, type SnackbarOptions, useSnackbar } from '.'
+import { Button } from '../../Button'
+
+const Template: StoryFn<SnackbarOptions> = (args) => {
+  const { showSnackbar } = useSnackbar()
+  const handleAction = () => {
+    showSnackbar(args)
+  }
+  return (
+    <>
+      <div>
+        <Button
+          size="small"
+          onClick={() => {
+            handleAction()
+          }}
+        >
+          Render snackbar
+        </Button>
+      </div>
+
+      <GlobalSnackbarContainer />
+    </>
+  )
+}
+
+export default {
+  title: 'Notifications',
+  component: Template,
+  tags: ['autodocs'],
+  argTypes: {},
+}
+export const SnackbarHookDemo = Template.bind({})
+SnackbarHookDemo.args = {
+  severity: 'error',
+  autoClose: false,
+  title: 'Lorem Ipsum',
+  description: 'Notification sentence comes here',
+  showIcon: true,
+}
+
+export const SnackbarExample = () => {
+  // Retrieve the showSnackbar function from the custom hook
+  const { showSnackbar } = useSnackbar()
+
+  // Call the function to render the Snackbar with custom properties
+  const handleError = () => {
+    showSnackbar({
+      severity: 'error',
+      autoClose: true,
+      title: 'Error message title',
+      showIcon: true,
+    })
+  }
+
+  const handleSuccess = () => {
+    showSnackbar({
+      severity: 'success',
+      autoClose: true,
+      title: 'Success message title',
+      showIcon: true,
+    })
+  }
+  return (
+    <>
+      <div
+        id="root-element"
+        style={{
+          height: '30vh',
+          width: '50vw',
+        }}
+      >
+        <Button
+          size="small"
+          onClick={() => {
+            handleError()
+          }}
+        >
+          Notify error
+        </Button>
+        <br />
+        <br />
+        <Button
+          size="small"
+          onClick={() => {
+            handleSuccess()
+          }}
+        >
+          Notify success
+        </Button>
+      </div>
+
+      {/* Ensure Snackbar renders globally by adding GlobalSnackbarContainer in root */}
+      <GlobalSnackbarContainer />
+    </>
+  )
+}

src/components/basic/Notifications/SnackbarManager/index.tsx

@@ -0,0 +1,72 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { useState, useEffect, useCallback } from 'react'
+import { type PageSnackbarProps, PageSnackbar } from '../Snackbar'
+import { PageSnackbarStack } from '../Snackbar/PageSnackbarStack'
+
+export interface SnackbarOptions extends Omit<PageSnackbarProps, 'open'> {}
+
+// Singleton pattern for managing the snackbar globally
+const SnackbarManager = (() => {
+  let showSnackbar: ((options: SnackbarOptions) => void) | null = null
+
+  const registerSnackbar = (callback: (options: SnackbarOptions) => void) => {
+    showSnackbar = callback
+  }
+
+  const show = (options: SnackbarOptions) => {
+    if (showSnackbar) {
+      showSnackbar(options)
+    }
+  }
+
+  return { registerSnackbar, show }
+})()
+
+// Hook to expose the showSnackbar method to trigger snackbars
+export const useSnackbar = () => {
+  const showSnackbar = SnackbarManager.show
+  return { showSnackbar }
+}
+
+// Global container to render the snackbar component
+export const GlobalSnackbarContainer = () => {
+  const [snackbar, setSnackbar] = useState<SnackbarOptions | null>(null)
+
+  const openSnackbar = useCallback((options: SnackbarOptions) => {
+    setSnackbar(options)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    setSnackbar(null)
+  }, [])
+
+  useEffect(() => {
+    SnackbarManager.registerSnackbar(openSnackbar)
+  }, [openSnackbar])
+
+  return (
+    <PageSnackbarStack>
+      {snackbar && (
+        <PageSnackbar {...snackbar} onCloseNotification={handleClose} open />
+      )}
+    </PageSnackbarStack>
+  )
+}

src/components/index.tsx

@@ -72,6 +72,10 @@ export { LoadMoreButton } from './basic/Button/LoadMoreButton'
 export { PageNotifications } from './basic/Notifications/PageNotification'
 export { PageSnackbar } from './basic/Notifications/Snackbar'
 export { PageSnackbarStack } from './basic/Notifications/Snackbar/PageSnackbarStack'
+export {
+  GlobalSnackbarContainer,
+  useSnackbar,
+} from './basic/Notifications/SnackbarManager'
 export { ErrorPage } from './basic/ErrorPage'
 export { MultiSelectList } from './basic/MultiSelectList'
 export { ProcessList } from './basic/ProcessList'