WIP React version

demo-app/resources/js/Pages/Container.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { usePage } from '@inertiajs/react';
+
+export default function Container({ children }) {
+    const { props } = usePage();
+
+    return (
+        <div className="mx-auto max-w-3xl px-4 py-6 sm:px-6 lg:px-8">
+            {props.flash.message && (
+                <div className="mb-4 border-l-4 border-green-400 bg-green-50 p-4">
+                    <p className="text-sm text-green-600">
+                        {props.flash.message}
+                    </p>
+                </div>
+            )}
+            {children}
+        </div>
+    );
+};

demo-app/resources/js/Pages/CreateRole.jsx

@@ -0,0 +1,93 @@
+import React, { useState, useRef } from 'react';
+import { useForm } from '@inertiajs/react';
+import axios from 'axios';
+import { Modal, ModalLink } from 'inertiaui/modal';
+
+export default function CreateRole({ headerValue }) {
+    const { data, setData, errors, post } = useForm({
+        name: '',
+    });
+
+    const modalRef = useRef(null);
+    const [greeting, setGreeting] = useState('');
+
+    const submit = (e) => {
+        e.preventDefault();
+        axios.post('/roles', data).then(() => {
+            modalRef.current?.close();
+        });
+    };
+
+    return (
+        <Modal
+            ref={modalRef}
+            onGreeting={(event) => setGreeting(event)}
+        >
+            {({ close, getParentModal, emit }) => (
+                <>
+                    <div>
+                        <h2 className="text-lg font-medium text-gray-900">Create Role</h2>
+                        {greeting && (
+                            <p dusk="greeting" className="text-sm text-gray-500">
+                                {greeting}
+                            </p>
+                        )}
+                        {headerValue && (
+                            <p dusk="headerValue" className="text-sm text-gray-500">
+                                {headerValue}
+                            </p>
+                        )}
+                    </div>
+                    <button
+                        type="button"
+                        onClick={() => getParentModal().emit('message', 'Hello from child')}
+                    >
+                        Push message to parent
+                    </button>
+                    <form className="mt-8 space-y-6" onSubmit={submit}>
+                        <div className="grid grid-cols-3 gap-6">
+                            <div className="col-span-6 sm:col-span-3">
+                                <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                                    Name
+                                </label>
+                                <input
+                                    id="name"
+                                    value={data.name}
+                                    onChange={(e) => setData('name', e.target.value)}
+                                    type="text"
+                                    name="name"
+                                    autoComplete="off"
+                                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                                />
+                                {errors.name && (
+                                    <p className="mt-2 text-sm text-red-600">{errors.name}</p>
+                                )}
+                            </div>
+                        </div>
+                        <div className="flex items-center justify-end">
+                            <ModalLink maxWidth="sm" href="#another-local-modal" className="mr-auto text-sm text-pink-500">
+                                What's that?
+                            </ModalLink>
+                            <button
+                                type="button"
+                                className="inline-flex items-center rounded-md border border-transparent bg-gray-600 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+                                onClick={close}
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                type="submit"
+                                className="ml-3 inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                            >
+                                Save
+                            </button>
+                        </div>
+                    </form>
+                    <Modal name="another-local-modal">
+                        Hawaiian noises?
+                    </Modal>
+                </>
+            )}
+        </Modal>
+    );
+};

demo-app/resources/js/Pages/Data.jsx

@@ -0,0 +1,9 @@
+import { Modal } from 'inertiaui/modal'
+
+export default function Data({ message }) {
+    return (
+        <Modal>
+            <p dusk="message">{message}</p>
+        </Modal>
+    );
+}

demo-app/resources/js/Pages/EditUser.jsx

@@ -0,0 +1,129 @@
+// EditUser.jsx
+import React, { useState, useRef } from 'react';
+import { useForm } from '@inertiajs/react';
+import { Modal, ModalLink } from 'inertiaui/modal';
+
+export default function EditUser({ user, roles }) {
+    const [message, setMessage] = useState('');
+    const modalRef = useRef(null);
+
+    const { data, setData, put, errors } = useForm({
+        name: user.name,
+        email: user.email,
+        role_id: user.role_id,
+    });
+
+    const submit = (e) => {
+        e.preventDefault();
+        put(`/users/${user.id}`, {
+            onSuccess: () => {
+                modalRef.current.close();
+            },
+        });
+    };
+
+    const onMessage = (newMessage) => {
+        setMessage(newMessage);
+        modalRef.current.getChildModal().emit('greeting', `Thanks from ${user.name}`);
+    };
+
+    return (
+        <Modal
+            ref={modalRef}
+            onMessage={onMessage}
+        >
+            {({ close, reload, emit }) => (
+                <>
+                    <div>
+                        <h2 className="text-lg font-medium text-gray-900">Edit User</h2>
+                        {message && <p dusk="message" className="text-sm text-gray-500">{message}</p>}
+                    </div>
+
+                    <button
+                        type="button"
+                        onClick={() => emit('user-greets', 'Hello from EditUser')}
+                        className="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    >
+                        Send Message
+                    </button>
+
+                    <form onSubmit={submit} className="mt-8 space-y-6">
+                        <div className="grid grid-cols-3 gap-6">
+                            <div className="col-span-6 sm:col-span-3">
+                                <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
+                                <input
+                                    value={data.name}
+                                    onChange={e => setData('name', e.target.value)}
+                                    type="text"
+                                    id="name"
+                                    name="name"
+                                    autoComplete="off"
+                                    className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
+                                />
+                                {errors.name && <p className="mt-2 text-sm text-red-600">{errors.name}</p>}
+                            </div>
+
+                            <div className="col-span-6 sm:col-span-3">
+                                <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
+                                <input
+                                    value={data.email}
+                                    onChange={e => setData('email', e.target.value)}
+                                    type="email"
+                                    id="email"
+                                    name="email"
+                                    autoComplete="off"
+                                    className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
+                                />
+                                {errors.email && <p className="mt-2 text-sm text-red-600">{errors.email}</p>}
+                            </div>
+
+                            <div className="col-span-6 sm:col-span-3">
+                                <label htmlFor="role" className="block text-sm font-medium text-gray-700">Role</label>
+                                <select
+                                    value={data.role_id}
+                                    onChange={e => setData('role_id', e.target.value)}
+                                    id="role"
+                                    name="role"
+                                    autoComplete="off"
+                                    className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                                >
+                                    {Object.entries(roles).map(([id, role]) => (
+                                        <option key={id} value={id}>{role}</option>
+                                    ))}
+                                </select>
+
+                                <ModalLink
+                                    fragment="add-role"
+                                    onClose={() => reload({ only: ['roles'] })}
+                                    href="/roles/create"
+                                    className="mt-2 text-sm text-indigo-600 hover:text-indigo-500 bg-transparent border border-indigo-500 rounded-md py-1 px-2 inline-flex items-center"
+                                >
+                                    <svg className="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                                    </svg>
+                                    Add Role
+                                </ModalLink>
+                            </div>
+                        </div>
+
+                        <div className="flex justify-end">
+                            <button
+                                type="button"
+                                onClick={close}
+                                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                type="submit"
+                                className="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                            >
+                                Save
+                            </button>
+                        </div>
+                    </form>
+                </>
+            )}
+        </Modal>
+    );
+};

demo-app/resources/js/Pages/EditUser.vue

@@ -42,7 +42,7 @@ function onMessage(message) {
             <p dusk="message" v-text="messageRef" v-if="messageRef" class="text-sm text-gray-500" />
         </div>
 
-        <button type="button" @click="emit('user-greets', 'Hello from EditUser.vue')" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+        <button type="button" @click="emit('user-greets', 'Hello from EditUser')" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
             Send Message
         </button>
 

demo-app/resources/js/Pages/Emit.jsx

@@ -0,0 +1,19 @@
+import { ModalLink } from 'inertiaui/modal';
+import Container from './Container';
+
+export default function Emit() {
+    return (
+        <Container>
+            <div className="flex justify-between">
+                <h2 className="text-lg font-medium text-gray-900">Emit</h2>
+            </div>
+            <ModalLink
+                dusk="modal-link"
+                href="/users/1/edit"
+                className="px-2 py-1 text-xs font-medium text-indigo-600 bg-indigo-100 rounded-md"
+            >
+                Open Modal
+            </ModalLink>
+        </Container>
+    );
+}

demo-app/resources/js/Pages/Events.jsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { ModalLink } from 'inertiaui/modal';
+import Container from './Container';
+
+export default function Events() {
+    const [log, setLog] = useState([]);
+
+    const addToLog = (event) => {
+        setLog(prevLog => [...prevLog, event]);
+    };
+
+    return (
+        <Container>
+            <div className="flex justify-between">
+                <h2 className="text-lg font-medium text-gray-900">Events</h2>
+                <p dusk="log">{log.join(',')}</p>
+            </div>
+            <ModalLink
+                dusk="modal-link"
+                href="/users/1/edit"
+                className="px-2 py-1 text-xs font-medium text-indigo-600 bg-indigo-100 rounded-md"
+                onClose={() => addToLog('close')}
+                onFocus={() => addToLog('focus')}
+                onAfterLeave={() => addToLog('after-leave')}
+                onBlur={() => addToLog('blur')}
+                onStart={() => addToLog('start')}
+                onSuccess={() => addToLog('success')}
+            >
+                Open Modal
+            </ModalLink>
+        </Container>
+    );
+}

demo-app/resources/js/Pages/Header.jsx

@@ -0,0 +1,19 @@
+import { ModalLink } from 'inertiaui/modal';
+import Container from './Container';
+
+export default function Header() {
+    return (
+        <Container>
+            <div className="flex justify-between">
+                <h2 className="text-lg font-medium text-gray-900">Header</h2>
+            </div>
+            <ModalLink
+                dusk="modal-link"
+                href="/roles/create"
+                headers={{ 'X-Test-Header': 'Test Header Value' }}
+            >
+                Open Modal
+            </ModalLink>
+        </Container>
+    );
+}

demo-app/resources/js/Pages/LoadingProp.jsx

@@ -0,0 +1,21 @@
+import { ModalLink } from 'inertiaui/modal';
+import Container from './Container';
+
+export default function LoadingProp() {
+    return (
+        <Container>
+            <div className="flex justify-between">
+                <h2 className="text-lg font-medium text-gray-900">Loading Prop</h2>
+            </div>
+            <ModalLink
+                dusk="modal-link"
+                href="/slideover?slow=1"
+                className="px-2 py-1 text-xs font-medium text-indigo-600 bg-indigo-100 rounded-md"
+            >
+                {({ loading }) => (
+                    loading ? 'Loading...' : 'Open Slideover'
+                )}
+            </ModalLink>
+        </Container>
+    );
+}

demo-app/resources/js/Pages/Local.jsx

@@ -0,0 +1,27 @@
+import { Modal, ModalLink } from 'inertiaui/modal';
+import Container from './Container';
+
+export default function Local() {
+    return (
+        <>
+            <Container>
+                <div className="flex justify-between">
+                    <h2 className="text-lg font-medium text-gray-900">Local</h2>
+                    <ModalLink
+                        href="#local"
+                        fragment="pre"
+                        className="px-2 py-1 text-xs font-medium text-indigo-600 bg-indigo-100 rounded-md"
+                    >
+                        Open Local Modal
+                    </ModalLink>
+                </div>
+            </Container>
+            <Modal name="local">
+                This is a local modal
+                <ModalLink href="/roles/create">
+                    Create Role
+                </ModalLink>
+            </Modal>
+        </>
+    );
+}