@rimori/react-client 0.1.0

package/src/providers/PluginProvider.tsx

@@ -0,0 +1,197 @@
+import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
+import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client';
+import ContextMenu from '../components/ContextMenu';
+
+interface PluginProviderProps {
+  children: ReactNode;
+  pluginId: string;
+  settings?: {
+    disableContextMenu?: boolean;
+  };
+}
+
+const PluginContext = createContext<RimoriClient | null>(null);
+
+export const PluginProvider: React.FC<PluginProviderProps> = ({ children, pluginId, settings }) => {
+  const [plugin, setPlugin] = useState<RimoriClient | null>(null);
+  const [standaloneClient, setStandaloneClient] = useState<StandaloneClient | boolean>(false);
+  const [applicationMode, setApplicationMode] = useState<string | null>(null);
+  const [theme, setTheme] = useState<string | null>(null);
+
+  const isSidebar = applicationMode === 'sidebar';
+  const isSettings = applicationMode === 'settings';
+
+  useEffect(() => {
+    initEventBus(pluginId);
+
+    // Check if we're in an iframe context - if not, we're standalone
+    const standaloneDetected = window === window.parent;
+
+    if (standaloneDetected && !standaloneClient) {
+      StandaloneClient.getInstance().then((client) => {
+        client.needsLogin().then((needLogin) => setStandaloneClient(needLogin ? client : true));
+      });
+    }
+
+    if ((!standaloneDetected && !plugin) || (standaloneDetected && standaloneClient === true)) {
+      RimoriClient.getInstance(pluginId).then((client) => {
+        setPlugin(client);
+        // Get applicationMode and theme from MessageChannel query params
+        if (!standaloneDetected) {
+          const mode = client.getQueryParam('applicationMode');
+          const themeParam = client.getQueryParam('rm_theme');
+          setApplicationMode(mode);
+          setTheme(themeParam);
+        }
+      });
+    }
+  }, [pluginId, standaloneClient]);
+
+  //route change
+  useEffect(() => {
+    if (!plugin) return;
+
+    //sidebar pages should not report url changes
+    if (isSidebar) return;
+
+    let lastHash = window.location.hash;
+    const emitUrlChange = (url: string) => plugin.event.emit('session.triggerUrlChange', { url });
+
+    const interval = setInterval(() => {
+      if (lastHash === window.location.hash) return;
+      lastHash = window.location.hash;
+      // console.log('url changed:', lastHash);
+      emitUrlChange(lastHash);
+    }, 1000);
+
+    emitUrlChange(lastHash);
+    return () => clearInterval(interval);
+  }, [plugin]);
+
+  if (standaloneClient instanceof StandaloneClient) {
+    return (
+      <StandaloneAuth
+        onLogin={async (email, password) => {
+          if (await standaloneClient.login(email, password)) setStandaloneClient(true);
+        }}
+      />
+    );
+  }
+
+  if (!plugin) {
+    return '';
+  }
+
+  return (
+    <PluginContext.Provider value={plugin}>
+      {!settings?.disableContextMenu && !isSidebar && !isSettings && <ContextMenu client={plugin} />}
+      {children}
+    </PluginContext.Provider>
+  );
+};
+
+export const useRimori = () => {
+  const context = useContext(PluginContext);
+  if (context === null) {
+    throw new Error('useRimori must be used within an PluginProvider');
+  }
+  return context;
+};
+
+function getUrlParam(name: string) {
+  // First try to get from URL hash query params (for compatibility)
+  const hashParts = window.location.hash.split('?');
+  if (hashParts.length > 1) {
+    const hashParams = new URLSearchParams(hashParts[1]);
+    const hashValue = hashParams.get(name);
+    if (hashValue) return hashValue;
+  }
+
+  // Fallback to regular URL search params
+  const url = new URL(window.location.href);
+  return url.searchParams.get(name);
+}
+
+function initEventBus(pluginId: string) {
+  // For now, use URL fallback for EventBus naming - this will be updated once MessageChannel is ready
+  const isSidebar = getUrlParam('applicationMode') === 'sidebar';
+  EventBusHandler.getInstance('Plugin EventBus ' + pluginId + ' ' + (isSidebar ? 'sidebar' : 'main'));
+}
+
+function StandaloneAuth({ onLogin }: { onLogin: (user: string, password: string) => void }) {
+  const [user, setUser] = useState('');
+  const [password, setPassword] = useState('');
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: '#343534',
+          padding: '1rem',
+          borderRadius: '0.5rem',
+          width: '500px',
+          flexDirection: 'column',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <p style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem', textAlign: 'center' }}>Rimori Login</p>
+        <p style={{ marginBottom: '1rem', textAlign: 'center' }}>
+          Please login with your Rimori developer account for this plugin to be able to access the Rimori platform the
+          same it will operate in the Rimori platform.
+        </p>
+        {/* email and password input */}
+        <input
+          style={{
+            marginBottom: '1rem',
+            width: '100%',
+            padding: '0.5rem',
+            borderRadius: '0.5rem',
+            border: 'none',
+            backgroundColor: '#444444',
+          }}
+          type="email"
+          placeholder="Email"
+          onChange={(e) => setUser(e.target.value)}
+        />
+        <input
+          style={{
+            marginBottom: '1rem',
+            width: '100%',
+            padding: '0.5rem',
+            borderRadius: '0.5rem',
+            border: 'none',
+            backgroundColor: '#444444',
+          }}
+          type="password"
+          placeholder="Password"
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button
+          style={{
+            marginBottom: '1rem',
+            width: '100%',
+            padding: '0.5rem',
+            borderRadius: '0.5rem',
+            border: 'none',
+            backgroundColor: '#928358',
+          }}
+          onClick={() => {
+            onLogin(user, password);
+          }}
+        >
+          Login
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/style.scss

@@ -0,0 +1,136 @@
+dialog::backdrop {
+  backdrop-filter: blur(2px);
+  // background: rgb(255, 255, 255, 0.5);
+}
+
+.dark * dialog::backdrop {
+  background: transparent;
+}
+
+.tiptap {
+  padding-top: 5px;
+  padding-left: 7px;
+  /* min-height: 300px; */
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-bold;
+    margin-bottom: 1rem;
+  }
+
+  h1 {
+    @apply text-4xl;
+  }
+
+  h2 {
+    @apply text-3xl;
+  }
+
+  h3 {
+    @apply text-2xl;
+  }
+
+  h4 {
+    @apply text-xl;
+  }
+
+  h5 {
+    @apply text-lg;
+  }
+
+  h6 {
+    @apply text-base;
+  }
+
+  p {
+    @apply mb-4;
+  }
+
+  a {
+    @apply text-blue-600 hover:text-blue-800;
+    text-decoration: none;
+  }
+
+  a:hover {
+    @apply underline;
+  }
+
+  ul {
+    @apply list-disc pl-8;
+
+    li > p {
+      @apply mb-1;
+    }
+  }
+
+  ol {
+    @apply list-decimal pl-7;
+
+    li > p {
+      @apply mb-1;
+    }
+  }
+
+  blockquote {
+    @apply border-l-4 pl-4 italic text-gray-600 my-4;
+    border-color: #ccc;
+  }
+
+  code {
+    font-family: monospace;
+  }
+
+  pre {
+    @apply bg-gray-800 text-gray-500 p-4 rounded-lg overflow-x-auto;
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  img {
+    @apply max-w-full h-auto rounded-lg my-4;
+  }
+
+  table {
+    @apply table-auto w-full border-collapse mb-4;
+  }
+
+  th,
+  td {
+    @apply border px-4 py-2 text-left;
+  }
+
+  th {
+    @apply bg-gray-500 font-semibold;
+  }
+
+  tr:nth-child(even) {
+    @apply bg-gray-400;
+  }
+
+  @media (max-width: 768px) {
+    h1 {
+      @apply text-3xl;
+    }
+
+    h2 {
+      @apply text-2xl;
+    }
+
+    p {
+      @apply text-base;
+    }
+
+    img {
+      @apply max-w-full;
+    }
+  }
+}

package/src/utils/FullscreenUtils.ts

@@ -0,0 +1,22 @@
+export function isFullscreen() {
+  return !!document.fullscreenElement;
+}
+
+export function triggerFullscreen(onStateChange: (isFullscreen: boolean) => void, selector?: string) {
+  document.addEventListener('fullscreenchange', () => {
+    onStateChange(isFullscreen());
+  });
+  try {
+    const ref = document.querySelector(selector || '#root')!;
+    if (!isFullscreen()) {
+      // @ts-ignore
+      ref.requestFullscreen() || ref.webkitRequestFullscreen();
+    } else {
+      // @ts-ignore
+      document.exitFullscreen() || document.webkitExitFullscreen();
+    }
+  } catch (error: any) {
+    console.error('Failed to enter fullscreen', error.message);
+  }
+  onStateChange(isFullscreen());
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "ESNext",
+    "target": "ES6",
+    "declaration": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@rimori/client": [
+        "../rimori-client/src/index.ts"
+      ],
+      "@rimori/client/*": [
+        "../rimori-client/src/*"
+      ]
+    }
+  },
+  "include": ["src/**/*"]
+}