revert(web, framework, novui): Revert autocomplete in Studio (novuhq#…

…6228)

.cspell.json

@@ -52,7 +52,6 @@
     "bcast",
     "behaviour",
     "bestguess",
-    "tiptap",
     "binipdisplay",
     "bitauth",
     "bitjson",

apps/api/src/app/events/e2e/bridge-trigger.e2e.ts

@@ -583,7 +583,7 @@ contexts.forEach((context: Context) => {
               controlSchema: {
                 type: 'object',
                 properties: {
-                  name: { type: 'string', default: 'Hello {{payload.name}}' },
+                  name: { type: 'string', default: 'Hello {{name}}' },
                 },
               } as const,
             }

apps/web/src/components/layout/components/LocalStudioHeader/LocalStudioHeader.tsx

@@ -24,8 +24,6 @@ export const LocalStudioHeader: FC = () => {
         borderBottom: 'none !important',
         zIndex: 'sticky',
         padding: '50',
-        // TODO: because this component is directly from mantine, it doesn't respect layer styles
-        bgColor: 'surface.page !important',
       })}
     >
       <HStack justifyContent="space-between" width="full" display="flex">

apps/web/src/components/layout/components/LocalStudioSidebar/LocalStudioSidebarOrganizationDisplay.tsx

@@ -2,7 +2,7 @@ import { LocalizedMessage, Text } from '@novu/novui';
 import { Flex, Stack } from '@novu/novui/jsx';
 import { FC } from 'react';
 import { css } from '@novu/novui/css';
-import { Popover, useColorScheme } from '@novu/design-system';
+import { Popover, Tooltip, useColorScheme } from '@novu/design-system';
 import { useDisclosure } from '@mantine/hooks';
 
 type LocalStudioSidebarOrganizationDisplayProps = {
@@ -24,9 +24,6 @@ export const LocalStudioSidebarOrganizationDisplay: FC<LocalStudioSidebarOrganiz
       offset={0}
       withinPortal
       title="Novu Local Studio"
-      classNames={{
-        dropdown: css({ bg: 'surface.popover !important', border: 'none !important', shadow: 'medium !important' }),
-      }}
       target={
         <Flex gap="50" py="75" px="100" onMouseEnter={open} onMouseLeave={close}>
           <img

apps/web/src/index.tsx

@@ -7,6 +7,7 @@ import reportWebVitals from './reportWebVitals';
 import { LAUNCH_DARKLY_CLIENT_SIDE_ID } from './config';
 
 import './index.css';
+import '@novu/novui/components.css';
 import '@novu/novui/styles.css';
 
 (async () => {

apps/web/src/studio/components/workflows/node-view/WorkflowFloatingMenu.tsx

@@ -110,7 +110,8 @@ function WorkflowFloatingMenuButton({ Icon, tooltipLabel, onClick }: IWorkflowFl
           padding: '75 !important',
           borderRadius: '100',
           _hover: {
-            bg: 'select.option.surface.selected',
+            // TODO: this doesn't work due to all the !important in novui... need to fix layer styles
+            bg: 'legacy.B30 !important',
             '& svg': {
               color: 'typography.text.main !important',
             },

apps/web/src/studio/components/workflows/step-editor/WorkflowStepEditorControlsPanel.tsx

@@ -10,7 +10,6 @@ import { useDocsModal } from '../../../../components/docs/useDocsModal';
 import { When } from '../../../../components/utils/When';
 import { ControlsEmptyPanel } from './ControlsEmptyPanel';
 import { useTelemetry } from '../../../../hooks/useNovuAPI';
-import { getSuggestionVariables, subscriberVariables } from '../../../utils';
 
 export type OnChangeType = 'step' | 'payload';
 
@@ -49,16 +48,6 @@ export const WorkflowStepEditorControlsPanel: FC<IWorkflowStepEditorControlsPane
     );
   }, [workflow?.payload?.schema, workflow?.options?.payloadSchema, workflow?.payloadSchema]);
 
-  const payloadProperties = useMemo(() => {
-    const payloadObject =
-      workflow?.payload?.schema?.properties ||
-      workflow?.options?.payloadSchema?.properties ||
-      workflow?.payloadSchema?.properties ||
-      {};
-
-    return getSuggestionVariables(payloadObject, 'payload');
-  }, [workflow?.payload?.schema, workflow?.options?.payloadSchema, workflow?.payloadSchema]);
-
   const haveControlProperties = useMemo(() => {
     return Object.keys(step?.controls?.schema?.properties || step?.inputs?.schema?.properties || {}).length > 0;
   }, [step?.controls?.schema, step?.inputs?.schema]);
@@ -104,7 +93,6 @@ export const WorkflowStepEditorControlsPanel: FC<IWorkflowStepEditorControlsPane
                     onChange={(data, id) => handleOnChange('step', data, id)}
                     schema={step?.controls?.schema || step?.inputs?.schema || {}}
                     formData={defaultControls || {}}
-                    variables={[...(subscriberVariables || []), ...(payloadProperties || [])]}
                   />
                 </When>
                 <When truthy={!haveControlProperties}>

apps/web/src/studio/utils/index.ts

@@ -1,2 +1 @@
 export * from './routing';
-export * from './variables';

libs/novui/package.json

@@ -51,7 +51,8 @@
       "require": "./styled-system/jsx/index.js",
       "import": "./styled-system/jsx/index.js"
     },
-    "./styles.css": "./src/index.css"
+    "./styles.css": "./styled-system/styles.css",
+    "./components.css": "./node_modules/@mantine/core/styles.layer.css"
   },
   "scripts": {
     "dev": "pnpm build && pnpm storybook",
@@ -130,21 +131,13 @@
     }
   },
   "dependencies": {
-    "@mantine/code-highlight": "^7.11.2",
-    "@mantine/core": "^7.11.2",
-    "@mantine/hooks": "^7.11.2",
-    "@mantine/tiptap": "^7.11.2",
+    "@mantine/code-highlight": "^7.10.2",
+    "@mantine/core": "^7.10.0",
+    "@mantine/hooks": "^7.10.0",
     "@rjsf/core": "^5.17.1",
     "@rjsf/utils": "^5.17.1",
     "@rjsf/validator-ajv8": "^5.17.1",
     "@tanstack/react-table": "^8.17.3",
-    "@tiptap/extension-document": "^2.5.0",
-    "@tiptap/extension-mention": "^2.5.0",
-    "@tiptap/extension-paragraph": "^2.5.0",
-    "@tiptap/extension-text": "^2.5.0",
-    "@tiptap/pm": "^3.0.0",
-    "@tiptap/react": "^3.0.0",
-    "@tiptap/suggestion": "^2.5.0",
     "react-icons": "^5.0.1"
   }
 }

libs/novui/src/index.css

@@ -1,5 +1,3 @@
 @layer reset, base, mantine, tokens, recipes, utilities;
 
 @import '@mantine/core/styles.layer.css';
-@import '@mantine/tiptap/styles.layer.css';
-@import '../styled-system/styles.css';

libs/novui/src/json-schema-components/JsonSchemaForm.stories.tsx

@@ -27,18 +27,7 @@ const Template: StoryFn<typeof JsonSchemaForm> = ({ colorPalette, ...args }) =>
           Save
         </Button>
       </HStack>
-      <JsonSchemaForm
-        {...args}
-        variables={[
-          'fakeautocomplete.foo',
-          'fakeautocomplete.bar',
-          'fakeautocomplete.fizz',
-          'fakeautocomplete.buzz',
-          'fakeautocomplete.croissantia',
-          'fakeautocomplete.olympics',
-          'fakeautocomplete.reallylongstringthatshouldoverflow',
-        ]}
-      />
+      <JsonSchemaForm {...args} />
     </form>
   );
 };

libs/novui/src/json-schema-components/JsonSchemaForm.tsx

@@ -8,15 +8,15 @@ import { CoreProps } from '../types';
 import { ArrayFieldItemTemplate, ArrayFieldTemplate, ArrayFieldTitleTemplate } from './templates/ArrayFieldTemplate';
 import { AddButton, MoveDownButton, MoveUpButton, RemoveButton } from './templates/IconButton';
 import { ObjectFieldTemplate } from './templates/ObjectFieldTemplate';
-import { CheckboxWidget, SelectWidget, InputEditorWidget } from './widgets';
+import { CheckboxWidget, InputWidget, SelectWidget, TextareaWidget } from './widgets';
 import { JSON_SCHEMA_FORM_ID_DELIMITER } from './utils';
 
 const WIDGETS: RegistryWidgetsType = {
   CheckboxWidget: CheckboxWidget,
   SelectWidget: SelectWidget,
-  TextWidget: InputEditorWidget,
-  URLWidget: InputEditorWidget,
-  EmailWidget: InputEditorWidget,
+  TextWidget: TextareaWidget,
+  URLWidget: InputWidget,
+  EmailWidget: InputWidget,
 };
 
 const UI_SCHEMA: UiSchema = {
@@ -31,15 +31,13 @@ const UI_SCHEMA: UiSchema = {
 
 export type JsonSchemaFormProps<TFormData = any> = JsxStyleProps &
   CoreProps &
-  Pick<FormProps<TFormData>, 'onChange' | 'onSubmit' | 'onBlur' | 'schema' | 'formData' | 'tagName'> & {
-    variables?: string[];
-  };
+  Pick<FormProps<TFormData>, 'onChange' | 'onSubmit' | 'onBlur' | 'schema' | 'formData' | 'tagName'>;
 
 /**
  * Specialized form editor for data passed as JSON.
  */
 export function JsonSchemaForm<TFormData = any>(props: JsonSchemaFormProps<TFormData>) {
-  const [cssProps, { className, variables, ...formProps }] = splitCssProps(props);
+  const [cssProps, { className, ...formProps }] = splitCssProps(props);
 
   return (
     <Form
@@ -62,7 +60,6 @@ export function JsonSchemaForm<TFormData = any>(props: JsonSchemaFormProps<TForm
       widgets={WIDGETS}
       validator={validator}
       autoComplete={'false'}
-      formContext={{ variables }}
       idSeparator={JSON_SCHEMA_FORM_ID_DELIMITER}
       liveValidate
       templates={{

libs/novui/src/json-schema-components/widgets/InputWidget.tsx

@@ -0,0 +1,24 @@
+import { getInputProps, WidgetProps } from '@rjsf/utils';
+import { Input, TextInputType } from '../../components/input/Input';
+
+export const InputWidget = (props: WidgetProps) => {
+  const { type, value, label, schema, onChange, options, required, readonly, rawErrors, disabled } = props;
+  const inputProps = getInputProps(schema, type, options);
+
+  return (
+    <Input
+      description={props.schema.description}
+      onChange={(event) => {
+        event.preventDefault();
+        onChange(event.target.value);
+      }}
+      value={value || value === 0 ? value : ''}
+      required={required}
+      label={label}
+      type={inputProps.type as TextInputType}
+      error={rawErrors?.length > 0 && rawErrors}
+      readOnly={readonly}
+      disabled={disabled}
+    />
+  );
+};