fix(dashboard): Codemirror centering and default badge padding

novuhq · desiprisg · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024 · f7bcaa831289927a53234e600ea8603e2fd0ed85
commit f7bcaa831289927a53234e600ea8603e2fd0ed85
diff --git a/apps/dashboard/src/components/primitives/badge.tsx b/apps/dashboard/src/components/primitives/badge.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/utils/ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 const badgeVariants = cva(
-  'inline-flex items-center gap-1 px-1 h-fit border text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center gap-1 h-fit border text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
@@ -15,7 +15,7 @@ const badgeVariants = cva(
         outline: 'border-neutral-alpha-200 bg-transparent font-normal text-foreground-600 shadow-sm',
       },
       size: {
-        default: 'rounded-md p-1',
+        default: 'rounded-md px-2 py-1',
         pill: 'rounded-full px-2',
         'pill-stroke': 'rounded-full px-2',
         tag: 'rounded-md py-0.5 px-2',

diff --git a/apps/dashboard/src/components/primitives/editor.tsx b/apps/dashboard/src/components/primitives/editor.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
 import { tags as t } from '@lezer/highlight';
-import { useCodeMirror, EditorView, ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import { cva, VariantProps } from 'class-variance-authority';
 import createTheme from '@uiw/codemirror-themes';
+import { EditorView, ReactCodeMirrorProps, useCodeMirror } from '@uiw/react-codemirror';
+import { cva, VariantProps } from 'class-variance-authority';
+import React, { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
 import { autocompleteFooter, autocompleteHeader, functionIcon } from './constants';
 
-const editorVariants = cva('h-full mt-2 w-full flex-1 [&_.cm-focused]:outline-none', {
+const editorVariants = cva('h-full w-full flex-1 [&_.cm-focused]:outline-none', {
   variants: {
     size: {
       default: 'text-xs [&_.cm-editor]:py-1',

diff --git a/apps/dashboard/src/components/primitives/form/avatar-picker.tsx b/apps/dashboard/src/components/primitives/form/avatar-picker.tsx
@@ -1,6 +1,6 @@
-import { useState, forwardRef, useMemo } from 'react';
 import { liquid } from '@codemirror/lang-liquid';
 import { EditorView } from '@uiw/react-codemirror';
+import { forwardRef, useMemo, useState } from 'react';
 import { RiEdit2Line, RiErrorWarningFill, RiImageEditFill } from 'react-icons/ri';
 
 import { Avatar, AvatarImage } from '@/components/primitives/avatar';
@@ -11,10 +11,10 @@ import { Label } from '@/components/primitives/label';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/primitives/popover';
 import { Separator } from '@/components/primitives/separator';
 import TextSeparator from '@/components/primitives/text-separator';
-import { useFormField } from './form-context';
-import { Editor } from '../editor';
 import { useStepEditorContext } from '@/components/workflow-editor/steps/hooks';
 import { parseStepVariablesToLiquidVariables } from '@/utils/parseStepVariablesToLiquidVariables';
+import { Editor } from '../editor';
+import { useFormField } from './form-context';
 
 const predefinedAvatars = [
   `${window.location.origin}/images/avatar.svg`,
@@ -52,7 +52,7 @@ export const AvatarPicker = forwardRef<HTMLInputElement, AvatarPickerProps>(({ n
     <div className="size-9 space-y-2">
       <Popover modal={true} open={isOpen} >
         <PopoverTrigger asChild>
-          <Button variant="outline" size="icon" className="text-foreground-600 relative h-9 w-10">
+          <Button variant="outline" size="icon" className="text-foreground-600 relative size-full">
             {value ? (
               <Avatar className="p-px">
                 <AvatarImage src={value as string} />

diff --git a/apps/dashboard/src/components/primitives/input.tsx b/apps/dashboard/src/components/primitives/input.tsx
@@ -43,7 +43,7 @@ const inputFieldVariants = cva(
   {
     variants: {
       size: {
-        default: 'h-9 px-2 [&>input]:py-1.5',
+        default: 'min-h-9 px-2 [&>input]:py-1.5',
       },
       state: {
         default:
@@ -79,4 +79,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
 });
 Input.displayName = 'Input';
 
-export { InputField, Input };
+export { Input, InputField };
diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-body.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-body.tsx
@@ -38,6 +38,9 @@ export const InAppBody = () => {
                   }),
                   EditorView.lineWrapping,
                 ]}
+                basicSetup={{
+                  defaultKeymap: true,
+                }}
                 ref={field.ref}
                 value={field.value}
                  => field.onChange(val)}

diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor.tsx
@@ -1,7 +1,7 @@
 import { UiSchemaGroupEnum, type UiSchema } from '@novu/shared';
 
-import { getComponentByType } from '@/components/workflow-editor/steps/component-utils';
 import { Notification5Fill } from '@/components/icons';
+import { getComponentByType } from '@/components/workflow-editor/steps/component-utils';
 
 const avatarKey = 'avatar';
 const subjectKey = 'subject';
@@ -32,7 +32,7 @@ export const InAppEditor = ({ uiSchema }: { uiSchema?: UiSchema }) => {
       </div>
       <div className="flex flex-col gap-1 rounded-xl border border-neutral-100 p-1">
         {(avatar || subject) && (
-          <div className="flex gap-1">
+          <div className="flex items-center gap-1">
             {avatar && getComponentByType({ component: avatar.component })}
             {subject && getComponentByType({ component: subject.component })}
           </div>

diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-subject.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-subject.tsx
@@ -1,13 +1,13 @@
-import { useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
 import { liquid } from '@codemirror/lang-liquid';
 import { EditorView } from '@uiw/react-codemirror';
+import { useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
 
+import { Editor } from '@/components/primitives/editor';
 import { FormControl, FormField, FormItem, FormMessage } from '@/components/primitives/form/form';
 import { InputField } from '@/components/primitives/input';
-import { Editor } from '@/components/primitives/editor';
-import { capitalize } from '@/utils/string';
 import { parseStepVariablesToLiquidVariables } from '@/utils/parseStepVariablesToLiquidVariables';
+import { capitalize } from '@/utils/string';
 import { useStepEditorContext } from '../hooks';
 
 const subjectKey = 'subject';
@@ -25,9 +25,9 @@ export const InAppSubject = () => {
       control={control}
       name={subjectKey}
       render={({ field }) => (
-        <FormItem className="w-full">
-          <FormControl>
-            <InputField className="px-1" state={errors[subjectKey] ? 'error' : 'default'}>
+        <InputField state={errors[subjectKey] ? 'error' : 'default'}>
+          <FormItem className="w-full">
+            <FormControl>
               <Editor
                 fontFamily="inherit"
                 placeholder={capitalize(field.name)}
@@ -41,10 +41,10 @@ export const InAppSubject = () => {
                 value={field.value}
                  => field.onChange(val)}
               />
-            </InputField>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </InputField>
       )}
     />
   );

diff --git a/apps/dashboard/src/components/workflow-editor/url-input.tsx b/apps/dashboard/src/components/workflow-editor/url-input.tsx
@@ -2,10 +2,10 @@ import { liquid } from '@codemirror/lang-liquid';
 import { EditorView } from '@uiw/react-codemirror';
 import { useFormContext } from 'react-hook-form';
 
-import { Input, InputField, InputFieldProps, InputProps } from '@/components/primitives/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/primitives/select';
 import { Editor } from '@/components/primitives/editor';
 import { FormControl, FormField, FormItem, FormMessagePure } from '@/components/primitives/form/form';
+import { Input, InputField, InputFieldProps, InputProps } from '@/components/primitives/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/primitives/select';
 
 type URLInputProps = Omit<InputProps, 'value' | 'onChange' | 'size'> & {
   options: string[];

diff --git a/apps/dashboard/src/components/workflow-status.tsx b/apps/dashboard/src/components/workflow-status.tsx
@@ -1,8 +1,8 @@
-import { ComponentProps } from 'react';
-import { RiCheckboxCircleFill, RiErrorWarningFill, RiForbidFill } from 'react-icons/ri';
 import { Badge } from '@/components/primitives/badge';
 import { WorkflowStatusEnum } from '@/utils/enums';
+import { ComponentProps } from 'react';
 import { type IconType } from 'react-icons/lib';
+import { RiCheckboxCircleFill, RiErrorWarningFill, RiForbidFill } from 'react-icons/ri';
 
 type WorkflowStatusProps = {
   status: WorkflowStatusEnum;
@@ -40,7 +40,7 @@ export const WorkflowStatus = (props: WorkflowStatusProps) => {
   const text = statusRenderData[status].text;
 
   return (
-    <Badge variant={badgeVariant} className="border-none">
+    <Badge variant={badgeVariant}>
       <Icon className="size-4" /> {text}
     </Badge>
   );