fix: fix build-docs issue, refactor toast component

src/Toast/ToastContainer.jsx

@@ -26,7 +26,7 @@ function ToastContainer({ position, className }) {
   const portalDivRef = useRef(null);
   const positionStyle = positionStyles[position] || positionStyles['bottom-left'];
 
-  if (!portalDivRef.current) {
+  if (!portalDivRef.current && typeof document !== 'undefined') {
     portalDivRef.current = document.createElement('div');
     portalDivRef.current.setAttribute('class', 'toast-portal');
     portalDivRef.current.setAttribute('role', 'alert');

www/src/components/CodeBlock.tsx

@@ -31,7 +31,7 @@ import HipsterIpsum from './exampleComponents/HipsterIpsum';
 import ExamplePropsForm from './exampleComponents/ExamplePropsForm';
 
 const {
-  Collapsible, Toast, IconButton, Icon,
+  Collapsible, IconButton, Icon, toast, ToastContainer
 } = ParagonReact;
 
 export type CollapsibleLiveEditorTypes = {
@@ -125,14 +125,13 @@ function CodeBlock({
 }: ICodeBlock) {
   const intl = useIntl();
   const language: any = className ? className.replace(/language-/, '') : 'jsx';
-  const [showToast, setShowToast] = useState(false);
   const [codeExample, setCodeExample] = useState(children);
 
   const handleCodeChange = (e) => setCodeExample(e.target.value);
 
   const handleCopyCodeExample = () => {
     navigator.clipboard.writeText(codeExample);
-    setShowToast(true);
+    toast({message: 'Code example copied to clipboard!', duration: 2000 });
   };
 
   if (live) {
@@ -168,13 +167,7 @@ function CodeBlock({
           </CollapsibleLiveEditor>
           <LiveError className="pgn-doc__code-block-error" />
         </LiveProvider>
-        <Toast
-          onClose={() => setShowToast(false)}
-          show={showToast}
-          delay={2000}
-        >
-          Code example copied to clipboard!
-        </Toast>
+        <ToastContainer />
       </div>
     );
   }

www/src/components/IconsTable.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import { Icon, SearchField, Toast } from '~paragon-react';
+import { Icon, SearchField, ToastContainer, toast } from '~paragon-react';
 import * as IconComponents from '~paragon-icons';
 import { ICON_COPIED_EVENT, sendUserAnalyticsEvent } from '../../segment-events';
 
@@ -67,15 +67,14 @@ function IconsTable({ iconNames }) {
   const [tableWidth, setTableWidth] = useState(0);
   const [data, setData] = useState({ iconsList: iconNames, rowsCount: ROWS_PER_WINDOW });
   const [currentIcon, setCurrentIcon] = useState(iconNames[0]);
-  const [showToast, setShowToast] = useState(false);
   const currentIconImport = `import { ${currentIcon} } from '@openedx/paragon/icons';`;
   const { rowsCount, iconsList } = data;
 
   const columnsCount = useMemo(() => Math.floor(tableWidth / COLUMN_WIDTH), [tableWidth]);
 
   const copyToClipboard = (content) => {
     navigator.clipboard.writeText(content);
-    setShowToast(true);
+    toast({ message: 'Copied to clipboard!', duration: 2000 });
     sendUserAnalyticsEvent(ICON_COPIED_EVENT, { name: currentIcon });
   };
 
@@ -178,13 +177,7 @@ function IconsTable({ iconNames }) {
       </div>
 
       <div ref={tableBottom} />
-      <Toast
-        onClose={() => setShowToast(false)}
-        show={showToast}
-        delay={2000}
-      >
-        Copied to clipboard!
-      </Toast>
+      <ToastContainer />
     </>
   );
 }

www/src/pages/foundations/elevation.jsx

@@ -5,7 +5,8 @@ import {
   Button,
   Form,
   Input,
-  Toast,
+  ToastContainer,
+  toast,
   Icon,
   IconButtonWithTooltip,
 } from '~paragon-react';
@@ -28,11 +29,9 @@ const controlsProps = [
 ];
 
 function BoxShadowNode() {
-  const [showToast, setShowToast] = useState(false);
-
   const isBoxShadowCopied = (level, side) => {
     navigator.clipboard.writeText(`@include pgn-box-shadow(${level}, "${side}");`);
-    setShowToast(true);
+    toast({ message: 'Box-shadow copied to clipboard!', duration: 2000 });
   };
 
   const boxShadowCells = boxShadowLevels.map(level => (
@@ -56,14 +55,7 @@ function BoxShadowNode() {
   return (
     <div className="pgn-doc__box-shadow-cells">
       { boxShadowCells }
-      <Toast
-        className="pgn-doc__box-shadow--toast"
-        onClose={() => setShowToast(false)}
-        show={showToast}
-        delay={2000}
-      >
-        Box-shadow copied to clipboard!
-      </Toast>
+      <ToastContainer />
     </div>
   );
 }