feat: excalidraw component added

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@excalidraw/excalidraw": "^0.12.0",
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.6",
     "@testing-library/jest-dom": "^5.14.1",

src/App.css

@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 5vh;
   display: flex;
   flex-direction: column;
   align-items: center;

src/App.tsx

@@ -1,24 +1,102 @@
-import React, { FC } from 'react';
-import logo from './logo.svg';
+/* eslint-disable react/jsx-no-useless-fragment */
+/* eslint-disable react/jsx-no-comment-textnodes */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { FC, useEffect, useState, useRef } from 'react';
 import './App.css';
+import { Excalidraw } from '@excalidraw/excalidraw';
+import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types';
+import {
+  AppState,
+  ExcalidrawImperativeAPI,
+  ExcalidrawProps,
+} from '@excalidraw/excalidraw/types/types';
+
+import logo from './logo.svg';
+import InitialData from './InitialData';
+
+const App: FC = () => {
+  const excalidrawRef = useRef<ExcalidrawImperativeAPI>(null);
+  const [viewModeEnabled, setViewModeEnabled] = useState(false);
+  const [zenModeEnabled, setZenModeEnabled] = useState(false);
+  const [gridModeEnabled, setGridModeEnabled] = useState(false);
+  const [theme, setTheme] = useState<ExcalidrawProps['theme']>('light');
+
+  /*   useEffect(() => {
+    const onHashChange = () => {
+      const hash = new URLSearchParams(window.location.hash.slice(1));
+      const libraryUrl = hash.get('addLibrary');
+      if (libraryUrl) {
+        excalidrawRef.current!.updateLibrary(libraryUrl, hash.get('token'));
+      }
+    };
+    window.addEventListener('hashchange', onHashChange, false);
+    return () => {
+      window.removeEventListener('hashchange', onHashChange);
+    };
+  }, []); */
+
+  return (
+    <div className="App">
+      <div className="button-modalities-wrapper">
+        <label>
+          <input
+            type="checkbox"
+            checked={viewModeEnabled}
+            onChange={() => setViewModeEnabled(!viewModeEnabled)}
+          />
+          View mode
+        </label>
+
+        <label>
+          <input
+            type="checkbox"
+            checked={zenModeEnabled}
+            onChange={() => setZenModeEnabled(!zenModeEnabled)}
+          />
+          Zen mode
+        </label>
 
-const App: FC = () => (
-  <div className="App">
-    <header className="App-header">
-      <img src={logo} className="App-logo" alt="logo" />
-      <p>
-        Edit <code>src/App.tsx</code> and save to reload.
-      </p>
-      <a
-        className="App-link"
-        href="https://reactjs.org"
-        target="_blank"
-        rel="noopener noreferrer"
+        <label>
+          <input
+            type="checkbox"
+            checked={gridModeEnabled}
+            onChange={() => setGridModeEnabled(!gridModeEnabled)}
+          />
+          Grid mode
+        </label>
+      </div>
+      <div
+        className="excalidraw-wrapper"
+        style={{
+          height: '800px',
+          margin: '50px',
+        }}
       >
-        Learn React
-      </a>
-    </header>
-  </div>
-);
+        <>
+          <Excalidraw
+            ref={excalidrawRef}
+            initialData={InitialData}
+            onChange={(
+                elements: readonly ExcalidrawElement[],
+                state: AppState,
+              ) =>
+              () => {
+                console.log('Elements :', elements, 'State : ', state);
+              }}
+            onPointerUpdate={(payload) => console.log(payload)}
+            onCollabButtonClick={() =>
+              window.alert('You clicked on collab button')
+            }
+            viewModeEnabled={viewModeEnabled}
+            zenModeEnabled={zenModeEnabled}
+            gridModeEnabled={gridModeEnabled}
+            theme={theme}
+            name="Custom name of drawing"
+          />
+        </>
+      </div>
+    </div>
+  );
+};
 
 export default App;

src/InitialData.ts

@@ -0,0 +1,9 @@
+import { ImportedDataState } from '@excalidraw/excalidraw/types/data/types';
+
+const initialData: ImportedDataState = {
+  elements: [],
+  appState: { viewBackgroundColor: '#AFEEEE', currentItemFontFamily: 1 },
+  scrollToContent: true,
+};
+
+export default initialData;