start working on notifications

Author: avivkeller

package-lock.json

@@ -43,8 +43,8 @@
     "@clack/prompts": "^0.11.0",
     "@heroicons/react": "^2.2.0",
     "@minify-html/node": "^0.16.4",
-    "@node-core/rehype-shiki": "~1.0.1-334d42dfdaf80b36b24a1982807367727cf52ccd",
-    "@node-core/ui-components": "~1.0.1-a356572cf397450a3eeeb973d6fe6d6803a24059",
+    "@node-core/rehype-shiki": "1.0.1-334d42dfdaf80b36b24a1982807367727cf52ccd",
+    "@node-core/ui-components": "1.0.1-4d3182b1699ee0824d1632746808071522f65023",
     "@orama/orama": "^3.1.10",
     "@orama/plugin-data-persistence": "^3.1.10",
     "@orama/react-components": "^0.8.1",

package.json

@@ -211,14 +211,18 @@ const processEntry = entry => {
  */
 const createDocumentLayout = (entries, sideBarProps, metaBarProps) => {
   return createTree('root', [
-    createJSXElement(JSX_IMPORTS.NavBar.name),
-    createJSXElement(JSX_IMPORTS.Article.name, {
+    createJSXElement(JSX_IMPORTS.NotificationProvider.name, {
       children: [
-        createJSXElement(JSX_IMPORTS.SideBar.name, sideBarProps),
-        createElement('div', [
-          createElement('main', entries.map(processEntry)),
-          createJSXElement(JSX_IMPORTS.MetaBar.name, metaBarProps),
-        ]),
+        createJSXElement(JSX_IMPORTS.NavBar.name),
+        createJSXElement(JSX_IMPORTS.Article.name, {
+          children: [
+            createJSXElement(JSX_IMPORTS.SideBar.name, sideBarProps),
+            createElement('div', [
+              createElement('main', entries.map(processEntry)),
+              createJSXElement(JSX_IMPORTS.MetaBar.name, metaBarProps),
+            ]),
+          ],
+        }),
       ],
     }),
   ]);

src/generators/jsx-ast/utils/buildContent.mjs

@@ -28,8 +28,9 @@ export default () => {
   // Create base imports from JSX_IMPORTS configuration
   // TODO(@avivkeller): A lot of these imports aren't interactive (i.e. the MetaBar),
   // so it would be nice to not pass them to the client at all.
-  const baseImports = Object.values(JSX_IMPORTS).map(({ name, source }) =>
-    createImportDeclaration(name, source)
+  const baseImports = Object.values(JSX_IMPORTS).map(
+    ({ name, source, default: useDefault = true }) =>
+      createImportDeclaration(name, source, useDefault)
   );
 
   /**

src/generators/web/build/generate.mjs

@@ -43,4 +43,9 @@ export const JSX_IMPORTS = {
     name: 'ArrowUpRightIcon',
     source: '@heroicons/react/24/solid/ArrowUpRightIcon',
   },
+  NotificationProvider: {
+    name: 'NotificationProvider',
+    default: false,
+    source: '@node-core/ui-components/Providers/NotificationProvider',
+  },
 };

src/generators/web/constants.mjs

@@ -1,5 +1,7 @@
+import { CodeBracketIcon } from '@heroicons/react/24/outline';
 import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
-import { useState } from 'react';
+import styles from '@node-core/ui-components/Common/BaseCodeBox/index.module.css';
+import { useNotification } from '@node-core/ui-components/Providers/NotificationProvider';
 
 import { STATIC_DATA } from '../constants.mjs';
 
@@ -17,40 +19,34 @@ export const getLanguageDisplayName = language => {
   return entry?.[1] ?? language.toLowerCase();
 };
 
-/**
- * @typedef CodeBoxProps
- * @property {string} [className] - CSS class with language info
- */
-
-/**
- * Code box component with syntax highlighting and copy functionality
- * @param {import('react').PropsWithChildren<CodeBoxProps>} props
- */
+/** @param {import('react').PropsWithChildren<{ className: string }>} props */
 export default ({ className, ...props }) => {
   const matches = className?.match(/language-(?<language>[a-zA-Z]+)/);
   const language = matches?.groups?.language ?? '';
-  const [copyText, setCopyText] = useState('Copy to clipboard');
 
-  /**
-   * Copy text to clipboard and show feedback
-   * @param {string} text - Text to copy
-   */
-  const handleCopy = async text => {
+  const notify = useNotification();
+
+  const onCopy = async text => {
     await navigator.clipboard.writeText(text);
 
-    setCopyText('Copied to clipboard!');
-    setTimeout(() => {
-      setCopyText('Copy to clipboard');
-    }, 500);
+    notify({
+      duration: 300,
+      message: (
+        <div className="flex items-center gap-3">
+          <CodeBracketIcon className={styles.icon} />
+          Copied to clipboard
+        </div>
+      ),
+    });
   };
 
   return (
     <BaseCodeBox
       as={'a'}
-      onCopy={handleCopy}
+      onCopy={onCopy}
       language={getLanguageDisplayName(language)}
       {...props}
-      buttonText={copyText}
+      buttonText={'Copy to clipboard'}
     />
   );
 };

src/generators/web/ui/components/CodeBox.jsx

@@ -0,0 +1,3 @@
+{
+  "sideEffects": false
+}