Merge pull request #78 from rohitkrai03/migrate-footer

feat(footer): migrate footer and footnote components

.eslintrc.json

@@ -9,7 +9,7 @@
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier"
+    "plugin:prettier/recommended"
   ],
   "overrides": [
     {
@@ -51,7 +51,6 @@
     "@typescript-eslint/unified-signatures": "error",
     "@typescript-eslint/no-var-requires": "off",
     "arrow-body-style": "error",
-    "array-bracket-spacing": ["error", "always"],
     "camelcase": [
       "error",
       {

packages/module/generate-fed-package-json.js

@@ -4,13 +4,11 @@ const path = require('path');
 
 const root = process.cwd();
 
-const sourceFiles = glob
-  .sync(`${root}/src/*/`)
-  .map((name) => name.replace(/\/$/, ''));
-
+const sourceFiles = glob.sync(`${root}/src/*/`).map((name) => name.replace(/\/$/, ''));
+
 const indexTypings = glob.sync(`${root}/src/index.d.ts`);
 
-const ENV_AGNOSTIC_ROOT = `${root}/dist/dynamic`
+const ENV_AGNOSTIC_ROOT = `${root}/dist/dynamic`;
 
 async function copyTypings(files, dest) {
   const cmds = [];
@@ -25,26 +23,26 @@ async function createPackage(file) {
   const fileName = file.split('/').pop();
   const esmSource = glob.sync(`${root}/dist/esm/${fileName}/**/index.js`)[0];
   const cjsSource = glob.sync(`${root}/dist/cjs/${fileName}/**/index.js`)[0];
-  const typingsSource = glob.sync(`${root}/dist/esm/${fileName}/**/index.d.ts`)[0]
+  const typingsSource = glob.sync(`${root}/dist/esm/${fileName}/**/index.d.ts`)[0];
   /**
    * Prevent creating package.json for directories with no JS files (like CSS directories)
    */
   if (!esmSource) {
     return;
   }
 
-  const destDir = path.resolve(`${ENV_AGNOSTIC_ROOT}`, fileName)
+  const destDir = path.resolve(`${ENV_AGNOSTIC_ROOT}`, fileName);
   const destFile = `${destDir}/package.json`;
 
   // ensure the directory exists
-  fse.ensureDirSync(destDir)
+  fse.ensureDirSync(destDir);
 
   const esmRelative = path.relative(file, esmSource).replace('/dist', '');
   const cjsRelative = path.relative(file, cjsSource).replace('/dist', '');
-  const tsRelative = path.relative(file, typingsSource).replace('/dist', '')
+  const tsRelative = path.relative(file, typingsSource).replace('/dist', '');
   const content = {
     main: cjsRelative,
-    module: esmRelative,
+    module: esmRelative
   };
   const typings = glob.sync(`${root}/src/${fileName}/*.d.ts`);
   const cmds = [];
@@ -56,7 +54,7 @@ async function createPackage(file) {
 
 async function generatePackages(files) {
   // ensure the dynamic root exists
-  fse.ensureDirSync(path.resolve(ENV_AGNOSTIC_ROOT))
+  fse.ensureDirSync(path.resolve(ENV_AGNOSTIC_ROOT));
   const cmds = files.map((file) => createPackage(file));
   return Promise.all(cmds);
 }
@@ -74,4 +72,4 @@ async function run(files) {
   }
 }
 
-run(sourceFiles);
+run(sourceFiles);

packages/module/generate-index.js

@@ -4,9 +4,9 @@ const path = require('path');
 
 const root = process.cwd();
 
-const ENV_AGNOSTIC_ROOT = `${root}/src`
+const ENV_AGNOSTIC_ROOT = `${root}/src`;
 
-const sourceFiles = glob.sync(path.resolve(__dirname, './src/*/index.ts'))
+const sourceFiles = glob.sync(path.resolve(__dirname, './src/*/index.ts'));
 
 async function generateIndex(files) {
   // ensure the dynamic root exists
@@ -18,7 +18,7 @@ async function generateIndex(files) {
   stream.once('open', () => {
     stream.write('// this file is autogenerated by generate-index.js, modifying it manually will have no effect\n');
 
-    files.forEach(file => {
+    files.forEach((file) => {
       const name = file.replace('/index.ts', '').split('/').pop();
       stream.write(`\nexport { default as ${name} } from './${name}';\n`);
       stream.write(`export * from './${name}';\n`);
@@ -32,13 +32,11 @@ async function generateIndex(files) {
 async function run(files) {
   try {
     await generateIndex(files);
-
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error(error);
     process.exit(1);
   }
 }
-  
+
 run(sourceFiles);
-

packages/module/package.json

@@ -33,20 +33,21 @@
   "dependencies": {
     "@patternfly/react-core": "6.0.0-alpha.94",
     "@patternfly/react-icons": "6.0.0-alpha.34",
+    "clsx": "^2.1.0",
     "react-jss": "^10.10.0",
-    "react-markdown": "^9.0.1",
-    "clsx": "^2.1.0"
+    "react-markdown": "^9.0.1"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/patternfly-a11y": "^4.3.1",
     "@patternfly/documentation-framework": "6.0.0-alpha.69",
-    "@patternfly/react-table": "6.0.0-alpha.95",
-    "@patternfly/react-code-editor": "6.0.0-alpha.94",
     "@patternfly/patternfly": "6.0.0-alpha.205",
+    "@patternfly/patternfly-a11y": "^4.3.1",
+    "@patternfly/react-code-editor": "6.0.0-alpha.94",
+    "@patternfly/react-table": "6.0.0-alpha.95",
+    "@types/dom-speech-recognition": "^0.0.4",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",

packages/module/patternfly-a11y.config.js

@@ -11,13 +11,13 @@ async function waitFor(page) {
 
 const urls = Object.keys(fullscreenRoutes)
   .map((key) => (fullscreenRoutes[key].isFullscreenOnly ? key : fullscreenRoutes[key].path.replace(/\/react$/, '')))
-  .reduce((result, item) => (result.includes(item) ? result : [ ...result, item ]), []);
+  .reduce((result, item) => (result.includes(item) ? result : [...result, item]), []);
 
 module.exports = {
   prefix: 'http://localhost:5001',
   waitFor,
   crawl: false,
-  urls: [ ...urls ],
+  urls: [...urls],
   ignoreRules: [
     'color-contrast',
     'landmark-no-duplicate-main',

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotToggle/ChatbotToggleBasic.tsx

@@ -2,8 +2,12 @@ import React from 'react';
 import ChatbotToggle from '@patternfly/virtual-assistant/dist/dynamic/ChatbotToggle';
 
 export const BasicDemo: React.FunctionComponent = () => {
-  const [ chatbotVisible, setChatbotVisible ] = React.useState<boolean>(false);
+  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);
   return (
-    <ChatbotToggle toolTipLabel="Chatbot" isChatbotVisible={chatbotVisible} onToggleChatbot={() => setChatbotVisible(!chatbotVisible)} />
+    <ChatbotToggle
+      toolTipLabel="Chatbot"
+      isChatbotVisible={chatbotVisible}
+      onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
+    />
   );
-}
+};

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ConversationAlert/ConversationAlertBasic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ConversationAlert from '@patternfly/virtual-assistant/dist/esm/ConversationAlert'
+import ConversationAlert from '@patternfly/virtual-assistant/dist/esm/ConversationAlert';
 
 export const BasicExample: React.FunctionComponent = () => (
   <ConversationAlert title="You can start a new conversation at any time by typing below.">

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Footer/Footer.md

@@ -0,0 +1,32 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Chat bots / AI
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Chatbot Footer
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents:
+  [
+    'Footer',
+    'MessageBar',
+    'Footnote',
+    'FootnotePopover',
+    'FootnotePopoverCTA',
+    'FootnotePopoverBannerImage',
+    'FootnotePopoverLink'
+  ]
+---
+
+import { Footer, Footnote } from '@patternfly/virtual-assistant/dist/dynamic/Footer';
+import { MessageBar } from '@patternfly/virtual-assistant/dist/dynamic/MessageBar';
+
+### Basic example
+
+```js file="./Footer.tsx" isFullscreen
+
+```

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Footer/Footer.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Footer, Footnote } from '@patternfly/virtual-assistant/dist/dynamic/Footer';
+import { MessageBar } from '@patternfly/virtual-assistant/dist/dynamic/MessageBar';
+
+const footnoteProps = {
+  label: 'Lightspeed uses AI. Check for mistakes.',
+  popover: {
+    title: 'Verify accuracy',
+    description: `While Lightspeed strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
+    bannerImage: {
+      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
+      alt: 'Example image for footnote popover'
+    },
+    cta: {
+      label: 'Got it',
+      onClick: () => {
+        alert('Do something!');
+      }
+    },
+    link: {
+      label: 'Learn more',
+      url: 'https://www.redhat.com/'
+    }
+  }
+};
+
+export const BasicDemo: React.FunctionComponent = () => {
+  const handleSend = (message) => alert(message);
+
+  return (
+    <Footer>
+      <MessageBar onSendMessage={handleSend} hasMicrophoneButton />
+      <Footnote {...footnoteProps} />
+    </Footer>
+  );
+};

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AssistantMessage.tsx

@@ -4,11 +4,7 @@ import GrinIcon from '@patternfly/react-icons/dist/js/icons/bacon-icon';
 
 export const AssistantMessage: React.FunctionComponent = () => (
   <>
-    <AssistantMessageEntry>
-      How may I help you today? Do you have some question for me?
-    </AssistantMessageEntry>
-    <AssistantMessageEntry icon={GrinIcon}>
-      Assistant message example with custom icon
-    </AssistantMessageEntry>
+    <AssistantMessageEntry>How may I help you today? Do you have some question for me?</AssistantMessageEntry>
+    <AssistantMessageEntry icon={GrinIcon}>Assistant message example with custom icon</AssistantMessageEntry>
   </>
 );

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AssistantMessageWithFollowup.tsx

@@ -4,7 +4,19 @@ import AssistantMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/As
 export const AssistantMessage: React.FunctionComponent = () => (
   <AssistantMessageEntry
     // eslint-disable-next-line no-console
-    options={[ { title: "Option #1", props: { onClick: () => {console.log('This is an example of onClick event')} } }, { title: "Option #2" }, { title: "Option #3" } ]}
+    options={[
+      {
+        title: 'Option #1',
+        props: {
+          onClick: () => {
+            // eslint-disable-next-line no-console
+            console.log('This is an example of onClick event');
+          }
+        }
+      },
+      { title: 'Option #2' },
+      { title: 'Option #3' }
+    ]}
   >
     How may I help you today? Do you have some question for me?
   </AssistantMessageEntry>

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/VirtualAssistantLoadingMessage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import LoadingMessage from '@patternfly/virtual-assistant/dist/esm/LoadingMessage'
+import LoadingMessage from '@patternfly/virtual-assistant/dist/esm/LoadingMessage';
 import GrinIcon from '@patternfly/react-icons/dist/js/icons/bacon-icon';
 
 export const BasicExample: React.FunctionComponent = () => (

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/VirtualAssistantSystemMessageEntry.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SystemMessageEntry from '@patternfly/virtual-assistant/dist/esm/SystemMessageEntry'
+import SystemMessageEntry from '@patternfly/virtual-assistant/dist/esm/SystemMessageEntry';
 
 export const BasicExample: React.FunctionComponent = () => (
   <SystemMessageEntry>End of conversation.</SystemMessageEntry>

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantCustomText.tsx

@@ -2,8 +2,5 @@ import React from 'react';
 import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant';
 
 export const VirtualAssistantCustomText: React.FunctionComponent = () => (
-  <VirtualAssistant
-    title="PatternFly assistant"
-    inputPlaceholder="You can ask anything in here."
-  />
+  <VirtualAssistant title="PatternFly assistant" inputPlaceholder="You can ask anything in here." />
 );

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantDisableOnEmptyText.tsx

@@ -2,16 +2,15 @@ import React from 'react';
 import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant';
 
 export const VirtualAssistantDisableOnEmptyText: React.FunctionComponent = () => {
-
-  const [ message, setMessage ] =  React.useState<string>("");
+  const [message, setMessage] = React.useState<string>('');
 
   return (
     <>
       <VirtualAssistant
         message={message}
         onChangeMessage={(_event, value) => setMessage(value)}
-        isSendButtonDisabled={message.trim() === ""}
+        isSendButtonDisabled={message.trim() === ''}
       />
     </>
-  )
+  );
 };

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantExample.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
 import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant';
 
-export const BasicExample: React.FunctionComponent = () => (
-  <VirtualAssistant />
-);
+export const BasicExample: React.FunctionComponent = () => <VirtualAssistant />;

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantMessages.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant';
 
 export const VirtualAssistantMessages: React.FunctionComponent = () => {
-
-  const [ message, setMessage ] =  React.useState<string>();
-  const [ lastMessage, setLastMessage ] = React.useState<string>();
+  const [message, setMessage] = React.useState<string>();
+  const [lastMessage, setLastMessage] = React.useState<string>();
 
   return (
     <>
-      <p data-test-id="assistant-example-message"><b>Last received message: </b> {lastMessage}</p>
+      <p data-test-id="assistant-example-message">
+        <b>Last received message: </b> {lastMessage}
+      </p>
       <VirtualAssistant
         message={message}
         onChangeMessage={(_event, value) => setMessage(value)}
@@ -17,5 +18,5 @@ export const VirtualAssistantMessages: React.FunctionComponent = () => {
         }}
       />
     </>
-  )
+  );
 };