Added annotation example (#2)

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .turbo
-yarn-error.log
+yarn-error.log
+.idea

README.md

@@ -3,36 +3,42 @@
 ## Getting Started
 
 ### Install dependencies
+
 ```bash
 yarn install
 ```
 
 ## Check out the NextJs demo
 
 ### Navigate to the `apps/nextjs` directory and run the following commands:
+
 ```bash
 yarn build && yarn start
 ```
+
 Open [http://localhost:6061](http://localhost:6061) with your browser to see demos of the elements.
 
 ## Check out the Vite demo
 
 ### Navigate to the `apps/vite` directory and run the following commands:
+
 ```bash
 yarn dev
 ```
+
 Open [http://localhost:6061](http://localhost:6061) with your browser to see demos of the elements.
 
 #### Note
+
 Make sure to kill the port 6061 if you run both of the demos back to back.
 
-## Things to know 
- - All the dependencies are hoisted to the root level `node_modules` folder. This is done to avoid duplication of dependencies across the packages.
- - All the dependencies are required for box-ui-elements to be fully functional
- - Packages is used for shared components across the apps that are not required to use for implementation
- - Apps is used for the demo apps that are built using different frameworks
- - We are using react 18 in all the demos
- - We are using Turborepo to manage the monorepo which is listed as a devDependency in the root package.json
- - All demos were generated from the respective frameworks' CLI
- - Default global styles were deleted from the demos to avoid conflicts with the box-ui-elements styles
+## Things to know
 
+- All the dependencies are hoisted to the root level `node_modules` folder. This is done to avoid duplication of dependencies across the packages.
+- All the dependencies are required for box-ui-elements to be fully functional
+- Packages is used for shared components across the apps that are not required to use for implementation
+- Apps is used for the demo apps that are built using different frameworks
+- We are using react 18 in all the demos
+- We are using Turborepo to manage the monorepo which is listed as a devDependency in the root package.json
+- All demos were generated from the respective frameworks' CLI
+- Default global styles were deleted from the demos to avoid conflicts with the box-ui-elements styles

apps/nextjs/README.md

@@ -1,11 +1,11 @@
 ## This is a Next.js project is to demo box-ui-elements in a Next.js app.
 
 ### Getting Started
+
 Navigate to the `apps/nextjs` directory and run the following commands:
 
 ```bash
 yarn build && yarn start
 ```
 
 Open [http://localhost:6061](http://localhost:6061) with your browser to see demos of the elements.
-

apps/nextjs/src/app/annotations/page.js

@@ -0,0 +1,70 @@
+"use client"; // This is necessary to ensure you are using the client-side version of React, box-ui-elements does not support SSR
+import { useEffect, useRef, useState } from "react";
+
+const importAnnotations = () =>
+  import(/* webpackChunkName: "box-annotations" */ "box-annotations");
+
+import dynamic from "next/dynamic";
+
+// It is necessary to use dynamic, import the components from the es folder and setting SSR to false to avoid SSR issues
+const ContentPreview = dynamic(
+  () => import("box-ui-elements/es/elements/content-preview"),
+  { ssr: false },
+);
+
+import constants from "shared"; // shared configuration or settings among demos
+import ElementSection from "@/app/ElementSection";
+
+export default function Annotations() {
+  const defaultProps = {
+    rootFolderId: constants.ROOTFOLDER_ID,
+    token: constants.TOKEN,
+  };
+
+  const boxAnnotations = useRef(null);
+  const [annotationsLoaded, setAnnotationsLoaded] = useState(false);
+
+  useEffect(() => {
+    importAnnotations().then(() => {
+      boxAnnotations.current = new global.BoxAnnotations();
+      setAnnotationsLoaded(true);
+    });
+  }, []);
+
+  return (
+    <>
+      <h3>ContentPreview With Annotations</h3>
+      <ElementSection>
+        {annotationsLoaded && (
+          <ContentPreview
+            boxAnnotations={boxAnnotations.current}
+            contentSidebarProps={{
+              hasActivityFeed: true,
+              features: {
+                activityFeed: {
+                  annotations: {
+                    enabled: true,
+                    hasAccessStats: true,
+                    hasClassification: true,
+                    hasNotices: true,
+                    hasProperties: true,
+                    hasRetentionPolicy: true,
+                    hasVersions: true,
+                  },
+                },
+              },
+            }}
+            hasHeader
+            enableAnnotationsDiscoverability
+            showAnnotations={annotationsLoaded}
+            showAnnotationsControls
+            showAnnotationsDrawing
+            showAnnotationsDrawingCreate
+            token={constants.TOKEN}
+            fileId={constants.FILE_ID}
+          />
+        )}
+      </ElementSection>
+    </>
+  );
+}

apps/nextjs/src/app/globals.css

@@ -1,7 +1,7 @@
 .ElementSection {
-    width: 100%;
-    height: 500px;
-    border: 1px solid #ccc;
-    justify-items: center;
-    align-content: center;
-}
+  width: 100%;
+  height: 500px;
+  border: 1px solid #ccc;
+  justify-items: center;
+  align-content: center;
+}

apps/nextjs/src/app/layout.js

@@ -1,5 +1,9 @@
+"use client"; // This is necessary to ensure you are using the client-side version of React, box-ui-elements does not support SSR
 import localFont from "next/font/local";
 import "./globals.css";
+import styles from "./page.module.css";
+import { IntlProvider } from "react-intl";
+import Head from "next/head";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -12,16 +16,31 @@ const geistMono = localFont({
   weight: "100 900",
 });
 
-export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+// IntlProvider is necessary to provide the correct locale for the components
+// locale and messages are required, you can use the messages from box-ui-elements or create your own
+// by default all messages are in english, changing locale does not change the messages alone
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+      </Head>
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
+        <nav>
+          <ul className={styles.tabHeader}>
+            <li>
+              <a href="/">Home</a>
+            </li>
+            <li>
+              <a href="/annotations">Annotations</a>
+            </li>
+          </ul>
+        </nav>
+        <IntlProvider locale="en">
+          <main className={styles.main}>{children}</main>
+        </IntlProvider>
       </body>
     </html>
   );