feat(uikit-playground): Adding Templates, Mutli Screen, Projects, Flow Diagram and Prototype

packages/uikit-playground/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true
+}

packages/uikit-playground/package.json

@@ -18,6 +18,7 @@
     "@rocket.chat/fuselage": "^0.44.2",
     "@rocket.chat/fuselage-hooks": "^0.33.0",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
+    "@rocket.chat/fuselage-toastbar": "^0.31.25",
     "@rocket.chat/fuselage-tokens": "~0.32.0",
     "@rocket.chat/fuselage-ui-kit": "workspace:~",
     "@rocket.chat/icons": "^0.33.0",
@@ -26,13 +27,15 @@
     "@rocket.chat/ui-contexts": "workspace:~",
     "codemirror": "^6.0.1",
     "eslint4b-prebuilt": "^6.7.2",
+    "moment": "^2.29.4",
     "rc-scrollbars": "^1.1.6",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.11.2",
     "react-split-pane": "^0.1.92",
     "react-virtuoso": "^4.3.10",
+    "reactflow": "^11.7.2",
     "use-subscription": "^1.8.0"
   },
   "devDependencies": {

packages/uikit-playground/postcss.config.js

@@ -0,0 +1 @@
+export default {};

packages/uikit-playground/src/App.css

@@ -2,38 +2,7 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
+#toastBarRoot{
+  position: fixed;
+  z-index: 9999;
+}

packages/uikit-playground/src/App.tsx

@@ -1,17 +1,65 @@
+import { useContext, useEffect } from 'react';
 import './App.css';
+import './_global.css';
 import './cssVariables.css';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { ToastBarProvider } from '@rocket.chat/fuselage-toastbar';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
+import { HomeLayout } from './Components/Routes/HomeLayout';
 import Playground from './Pages/Playground';
+import SignInToWorkspace from './Pages/SignInSignUp';
+import routes from './Routes/Routes';
+import Home from './Pages/Home';
+import { context, isMobileAction, isTabletAction } from './Context';
+import { useMediaQueries } from '@rocket.chat/fuselage-hooks';
+import { Box } from '@rocket.chat/fuselage';
+import FlowDiagram from './Pages/FlowDiagram';
+import { ProjectSpecificLayout } from './Components/Routes/ProjectSpecificLayout';
+import Prototype from './Pages/Prototype';
 
 function App() {
+  const { dispatch } = useContext(context);
+
+  const [isMobile, isTablet] = useMediaQueries(
+    '(max-width: 630px)',
+    '(max-width: 1050px)'
+  );
+
+  useEffect(() => {
+    dispatch(isMobileAction(isMobile));
+  }, [isMobile, dispatch]);
+
+  useEffect(() => {
+    dispatch(isTabletAction(isTablet));
+  }, [isTablet, dispatch]);
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path='/' element={<Playground />} />
-        <Route path='*' element={<Playground />} />
-      </Routes>
-    </BrowserRouter>
+    <Box w="100vw" h="100vh" display="flex" flexDirection="column">
+      <ToastBarProvider>
+        <BrowserRouter>
+          <Routes>
+            <Route element={<HomeLayout />}>
+              <Route
+                path={routes.login}
+                element={<SignInToWorkspace route={routes.login} />}
+              />
+              <Route
+                path={routes.signup}
+                element={<SignInToWorkspace route={routes.signup} />}
+              />
+            </Route>
+            {/* <Route element={<ProtectedLayout />}> */}
+            <Route path={routes.home} element={<Home />} />
+            <Route path={routes.projectId} element={<ProjectSpecificLayout />}>
+              <Route path={routes.flow} element={<FlowDiagram />} />
+              <Route path={routes.project} element={<Playground />} />
+              <Route path={routes.prototype} element={<Prototype />} />
+            </Route>
+            <Route path={`*`} element={<Home />} />
+            {/* </Route> */}
+          </Routes>
+        </BrowserRouter>
+      </ToastBarProvider>
+    </Box>
   );
 }
 

packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import type { Extension } from '@codemirror/state';
+import { Box } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useEffect, useContext } from 'react';
+
+import { updatePayloadAction, context } from '../../Context';
+import useCodeMirror from '../../hooks/useCodeMirror';
+import intendCode from '../../utils/intendCode';
+import { IPayload } from '../../Context/initialState';
+import useFormatCodeMirrorValue from '../../hooks/useFormatCodeMirrorValue';
+
+type CodeMirrorProps = {
+  extensions?: Extension[];
+};
+
+const BlockEditor = ({ extensions }: CodeMirrorProps) => {
+  const {
+    state: { screens, activeScreen },
+    dispatch,
+  } = useContext(context);
+
+  const { editor, changes, setValue } = useCodeMirror(
+    extensions,
+    intendCode(screens[activeScreen]?.payload)
+  );
+  const debounceValue = useDebouncedValue(changes, 1500);
+
+  useFormatCodeMirrorValue(
+    (
+      parsedCode: IPayload,
+      prettifiedCode: { formatted: string; cursorOffset: number }
+    ) => {
+      dispatch(
+        updatePayloadAction({
+          blocks: parsedCode.blocks,
+          surface: parsedCode.surface,
+        })
+      );
+      setValue(prettifiedCode.formatted, {
+        cursor: prettifiedCode.cursorOffset,
+      });
+    },
+    debounceValue
+  );
+
+  useEffect(() => {
+    if (!screens[activeScreen]?.changedByEditor) {
+      setValue(intendCode(screens[activeScreen]?.payload), {});
+    }
+  }, [
+    screens[activeScreen]?.payload.blocks,
+    screens[activeScreen]?.payload.surface,
+    activeScreen,
+  ]);
+
+  useEffect(() => {
+    setValue(intendCode(screens[activeScreen]?.payload), {});
+  }, [activeScreen]);
+
+  return (
+    <>
+      <Box display="grid" height="100%" width={'100%'} ref={editor} />
+    </>
+  );
+};
+
+export default BlockEditor;

packages/uikit-playground/src/Components/CodeEditor/Extensions/Extensions.ts

@@ -0,0 +1,25 @@
+import { json } from '@codemirror/lang-json';
+import { EditorView } from 'codemirror';
+
+import highlightStyle from './HighlightStyle';
+import basicSetup from './basicSetup';
+import jsonLinter from './jsonLinter';
+// import payloadLinter from './payloadLinter';
+import theme from './theme';
+
+export const actionBlockExtensions = [
+  highlightStyle,
+  json(),
+  jsonLinter,
+  basicSetup,
+  // payloadLinter,
+  ...theme,
+];
+
+export const actionPreviewExtensions = [
+  EditorView.contentAttributes.of({ contenteditable: 'false' }),
+  highlightStyle,
+  json(),
+  basicSetup,
+  ...theme,
+];

packages/uikit-playground/src/Components/CodeEditor/Extensions/HighlightStyle.ts

@@ -6,6 +6,7 @@ const highLightStyle = () => {
     { tag: t.literal, color: 'var(--RCPG-primary-color)' },
     { tag: t.bool, color: 'var(--RCPG-tertary-color)' },
     { tag: t.number, color: 'var(--RCPG-secondary-color)' },
+    { tag: t.null, color: 'var(--RCPG-tertary-color)' },
   ]);
 
   return syntaxHighlighting(style);

packages/uikit-playground/src/Components/CodeEditor/Extensions/index.ts

@@ -2,9 +2,8 @@ import { javascript } from '@codemirror/lang-javascript';
 
 import highlightStyle from './HighlightStyle';
 import basicSetup from './basicSetup';
-import lint from './lint';
 import theme from './theme';
 
-const extensions = [highlightStyle, javascript(), lint, basicSetup, ...theme];
+const extensions = [highlightStyle, javascript(), basicSetup, ...theme];
 
 export default extensions;

packages/uikit-playground/src/Components/CodeEditor/Extensions/jsonLinter.ts

@@ -0,0 +1,4 @@
+import { jsonParseLinter } from '@codemirror/lang-json';
+import { lintGutter, linter } from '@codemirror/lint';
+
+export default [lintGutter(), linter(jsonParseLinter())];

packages/uikit-playground/src/Components/CodeEditor/Extensions/payloadLinter.ts

@@ -0,0 +1,65 @@
+import { syntaxTree } from '@codemirror/language';
+import type { Diagnostic } from '@codemirror/lint';
+import { linter } from '@codemirror/lint';
+import type { EditorView } from 'codemirror';
+
+import parsePayload from '../Parser';
+
+const payloadLinter = linter((view: EditorView) => {
+  const diagnostics: Diagnostic[] = [];
+  const tree = syntaxTree(view.state);
+  let head = tree.topNode.firstChild;
+  if (!head || !head.matchContext(['Script'])) {
+    diagnostics.push({
+      from: 0,
+      to: 0,
+      message: 'Expecting a Script',
+      severity: 'error',
+    });
+    return diagnostics;
+  }
+  head = head.firstChild;
+  if (!head || !head.matchContext(['ExpressionStatement'])) {
+    diagnostics.push({
+      from: 0,
+      to: 0,
+      message: 'Expecting an expression statement',
+      severity: 'error',
+    });
+    return diagnostics;
+  }
+  head = head.firstChild;
+  if (!head || !head.matchContext(['ArrayExpression'])) {
+    diagnostics.push({
+      from: 0,
+      to: 0,
+      message: 'Expecting an array expression',
+      severity: 'error',
+    });
+    return diagnostics;
+  }
+  // while (head.nextSibling && head.nextSibling.name !== ']') {
+  // }
+  do {
+    if (
+      head.name !== '[' &&
+      head.name !== ',' &&
+      head.name !== ']' &&
+      head.name !== 'ObjectExpression'
+    ) {
+      diagnostics.push({
+        from: head.from,
+        to: head.to,
+        message: 'Expecting an Object expression',
+        severity: 'error',
+      });
+      return diagnostics;
+    }
+    if (head.name === 'ObjectExpression') parsePayload(head, view);
+    head = head.nextSibling;
+  } while (head);
+
+  return diagnostics;
+});
+
+export default payloadLinter;

packages/uikit-playground/src/Components/CodeEditor/Parser/index.ts

@@ -0,0 +1 @@
+export { default } from './parsePayload';

packages/uikit-playground/src/Components/CodeEditor/Parser/parsePayload.ts

@@ -0,0 +1,15 @@
+// import type { Diagnostic } from '@codemirror/lint';
+import type { EditorView } from 'codemirror';
+
+const parsePayload = (
+  head: { from: number; to: number },
+  // Diagnostic: Diagnostic[],
+  view: EditorView
+) => {
+  const payload = JSON.parse(
+    view.state.doc.toString().slice(head.from, head.to)
+  );
+  payload && 1;
+};
+
+export default parsePayload;

packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx

@@ -0,0 +1,34 @@
+import type { Extension } from '@codemirror/state';
+import { Box } from '@rocket.chat/fuselage';
+import { useEffect, useContext } from 'react';
+
+import { context } from '../../Context';
+import useCodeMirror from '../../hooks/useCodeMirror';
+import intendCode from '../../utils/intendCode';
+
+type CodeMirrorProps = {
+  extensions?: Extension[];
+};
+
+const PreviewEditor = ({ extensions }: CodeMirrorProps) => {
+  const {
+    state: { screens, activeScreen },
+  } = useContext(context);
+  const { editor, setValue } = useCodeMirror(
+    extensions,
+    intendCode(screens[activeScreen]?.actionPreview)
+  );
+
+  useEffect(() => {
+    setValue(intendCode(screens[activeScreen]?.actionPreview), {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screens[activeScreen]?.actionPreview]);
+
+  return (
+    <>
+      <Box display="grid" height="100%" width={'100%'} ref={editor} />
+    </>
+  );
+};
+
+export default PreviewEditor;