feat: WIP, use dialog from radix

Author: AriPerkkio

e2e/uno.config.ts

@@ -1,5 +1,10 @@
 import { defineConfig } from '@tutorialkit/theme';
 
 export default defineConfig({
-  // add your UnoCSS config here: https://unocss.dev/guide/config-file
+  // required for TutorialKit monorepo development mode
+  content: {
+    pipeline: {
+      include: '**',
+    },
+  },
 });

packages/react/package.json

@@ -75,6 +75,7 @@
     "@nanostores/react": "0.7.2",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-context-menu": "^2.2.1",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@replit/codemirror-lang-svelte": "^6.0.0",
     "@tutorialkit/runtime": "workspace:*",
     "@tutorialkit/theme": "workspace:*",

packages/react/src/core/ContextMenu.tsx

@@ -1,5 +1,6 @@
-import { useRef, useState, type ComponentProps } from 'react';
+import { useRef, useState, type ComponentProps, type ReactNode } from 'react';
 import { Root, Portal, Content, Item, Trigger } from '@radix-ui/react-context-menu';
+import * as RadixDialog from '@radix-ui/react-dialog';
 import picomatch from 'picomatch/posix';
 import type { FileDescriptor, I18n } from '@tutorialkit/types';
 
@@ -44,7 +45,8 @@ export function ContextMenu({
   triggerProps,
   ...props
 }: Props) {
-  const [state, setState] = useState<'idle' | 'add_file' | 'add_folder'>('idle');
+  const [state, setState] = useState<'idle' | 'add_file' | 'add_folder' | { error: string }>('idle');
+  const error = typeof state === 'string' ? false : state.error;
   const inputRef = useRef<HTMLInputElement>(null);
 
   if (!onFileChange) {
@@ -65,8 +67,7 @@ export function ContextMenu({
           method: 'add',
         });
       } else {
-        // TODO: Use `@radix-ui/react-dialog` instead
-        alert(`File "${value}" is not allowed. Allowed patterns: [${allowEditPatterns.join(', ')}].`);
+        return setState({ error: `Failed to create "${name}"` });
       }
     }
 
@@ -126,6 +127,19 @@ export function ContextMenu({
           </MenuItem>
         </Content>
       </Portal>
+
+      {error && (
+        <Dialog onClose={() => setState('idle')}>
+          {error}. Allowed patterns are:
+          <ul className="list-disc ml-4">
+            {allowEditPatterns.map((pattern) => (
+              <li key={pattern}>
+                <code>{pattern}</code>
+              </li>
+            ))}
+          </ul>
+        </Dialog>
+      )}
     </Root>
   );
 }
@@ -141,3 +155,25 @@ function MenuItem({ icon, children, ...props }: { icon: string } & ComponentProp
     </Item>
   );
 }
+
+function Dialog({ onClose, children }: { onClose: () => void; children: ReactNode }) {
+  return (
+    <RadixDialog.Root open={true} onOpenChange={(open) => !open && onClose()}>
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className="fixed inset-0 opacity-50 bg-black" />
+
+        <RadixDialog.Content className="fixed top-50% left-50% transform-translate--50% w-90vw max-w-450px max-h-85vh rounded-xl text-tk-text-primary bg-tk-background-negative">
+          <div className="relative py-4 px-10">
+            <RadixDialog.Title className="text-6 mb-2">Failed to create file</RadixDialog.Title>
+
+            {children}
+
+            <RadixDialog.Close title="Close" className="absolute top-4 right-4 w-6 h-6">
+              <span aria-hidden className="i-ph-x block w-full h-full"></span>
+            </RadixDialog.Close>
+          </div>
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+}