packages

packages/live-previews/src/scope/airtable.tsx

@@ -0,0 +1,7 @@
+import * as RefineAirtable from "@refinedev/airtable";
+
+const AirtableScope = {
+  RefineAirtable,
+};
+
+export default AirtableScope;

packages/live-previews/src/scope/antd-inferencer.tsx

@@ -0,0 +1,7 @@
+import * as RefineAntdInferencer from "@refinedev/inferencer/antd";
+
+const AntdInferencerScope = {
+  RefineAntdInferencer,
+};
+
+export default AntdInferencerScope;

packages/live-previews/src/scope/antd.tsx

@@ -0,0 +1,190 @@
+import React from "react";
+import parseHtml from "html-react-parser";
+import type { RefineProps } from "@refinedev/core";
+import { RefineCommonScope } from "./common";
+import type RefineAntdTypes from "@refinedev/antd";
+import * as MDEditorNamespace from "@uiw/react-md-editor";
+import * as AntdCore from "antd";
+import * as RefineAntd from "@refinedev/antd";
+import axios from "axios";
+
+import Icon, {
+  UnorderedListOutlined,
+  GoogleOutlined,
+  AppstoreAddOutlined,
+  LoginOutlined,
+  SearchOutlined,
+  DownOutlined,
+  EditOutlined,
+} from "@ant-design/icons";
+
+const SIMPLE_REST_API_URL = "https://api.fake-rest.refine.dev";
+
+const RefineAntdDemo: React.FC<
+  Partial<RefineProps> & {
+    initialRoutes?: string[];
+  }
+> = ({ initialRoutes, ...rest }) => {
+  if (initialRoutes) {
+    RefineCommonScope.setInitialRoutes(initialRoutes);
+  }
+
+  return (
+    <RefineCommonScope.RefineCore.Refine
+      legacyRouterProvider={RefineCommonScope.LegacyRefineReactRouterV6.default}
+      dataProvider={RefineCommonScope.RefineSimpleRest.default(
+        SIMPLE_REST_API_URL,
+      )}
+      notificationProvider={RefineAntd.notificationProvider}
+      Layout={RefineAntd.Layout}
+      Sider={() => null}
+      catchAll={<RefineAntd.ErrorComponent />}
+      options={{
+        disableTelemetry: true,
+        reactQuery: {
+          devtoolConfig: false,
+        },
+      }}
+      {...rest}
+    />
+  );
+};
+
+const ThemedTitleV2 = ({
+  collapsed,
+  wrapperStyles,
+  text: textFromProps,
+  icon: iconFromProps,
+}: RefineAntdTypes.RefineLayoutThemedTitleProps) => {
+  const [svgContent, setSvgContent] = React.useState<string | undefined>(
+    window.__refineIconSVGContent || undefined,
+  );
+  const [title, setTitle] = React.useState<string | undefined>(
+    window.__refineTitleContent || undefined,
+  );
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const messageListener = (event: MessageEvent) => {
+        if (event.data.type === "UPDATE_DYNAMIC_VALUES") {
+          if (event.data.payload?.title) {
+            setTitle(event.data.payload?.title);
+
+            if (typeof window !== "undefined") {
+              window.__refineTitleContent = event.data.payload?.title;
+            }
+          }
+
+          if (event.data.payload?.icon) {
+            try {
+              axios
+                .get(`/assets/icons/${event.data.payload.icon}`)
+                .then((res) => {
+                  const content = res.data
+                    .replace(/fill\=\"white\"/g, `fill="currentColor"`)
+                    .replace(/stroke\=\"white\"/g, `stroke="currentColor"`);
+
+                  setSvgContent(content);
+
+                  if (typeof window !== "undefined") {
+                    window.__refineIconSVGContent = content;
+                  }
+                });
+            } catch (error) {
+              console.error(error);
+            }
+          }
+        }
+      };
+
+      window.addEventListener("message", messageListener);
+
+      return () => {
+        window.removeEventListener("message", messageListener);
+      };
+    }
+
+    return () => undefined;
+  }, []);
+
+  return (
+    <RefineAntd.ThemedTitleV2
+      collapsed={collapsed}
+      wrapperStyles={wrapperStyles}
+      text={title || textFromProps}
+      icon={svgContent ? parseHtml(svgContent) : iconFromProps}
+    />
+  );
+};
+
+const ConfigProvider = ({
+  children,
+  theme,
+}: {
+  children?: React.ReactNode;
+  theme?: React.ComponentProps<typeof AntdCore.ConfigProvider>["theme"];
+}) => {
+  const [themeFromWindow, setThemeFromWindow] = React.useState<
+    undefined | string
+  >(undefined);
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const messageListener = (event: MessageEvent) => {
+        if (event.data.type === "UPDATE_DYNAMIC_VALUES") {
+          if (event.data.payload.theme) {
+            setThemeFromWindow(event.data.payload.theme);
+          }
+        }
+      };
+
+      window.addEventListener("message", messageListener);
+
+      return () => {
+        window.removeEventListener("message", messageListener);
+      };
+    }
+
+    return () => undefined;
+  }, []);
+
+  return (
+    <AntdCore.ConfigProvider
+      theme={{
+        ...(themeFromWindow
+          ? RefineAntd.RefineThemes[
+              themeFromWindow as keyof typeof RefineAntd.RefineThemes
+            ]
+          : theme),
+        algorithm: theme?.algorithm,
+      }}
+    >
+      {children}
+    </AntdCore.ConfigProvider>
+  );
+};
+
+const AntdScope = {
+  RefineAntdDemo,
+  RefineAntd: {
+    ...RefineAntd,
+    ThemedTitleV2,
+  },
+  AntdCore: {
+    ...AntdCore,
+    ConfigProvider,
+  },
+  AntDesignIcons: {
+    UnorderedListOutlined,
+    GoogleOutlined,
+    AppstoreAddOutlined,
+    LoginOutlined,
+    SearchOutlined,
+    default: Icon,
+    DownOutlined,
+    EditOutlined,
+  },
+  MDEditorNamespace,
+};
+
+export default AntdScope;

packages/live-previews/src/scope/appwrite.tsx

@@ -0,0 +1,9 @@
+import * as RefineAppwrite from "@refinedev/appwrite";
+import * as UUID from "uuid";
+
+const AppwriteScope = {
+  RefineAppwrite,
+  UUID,
+};
+
+export default AppwriteScope;

packages/live-previews/src/scope/auth0.tsx

@@ -0,0 +1,85 @@
+import * as Auth0ReactScope from "@auth0/auth0-react";
+import React from "react";
+import { ExternalNavigationContext } from "./common";
+
+const Auth0Context = React.createContext<{
+  isLoading: boolean;
+  user?: {
+    picture: string;
+    name: string;
+    email: string;
+  };
+  logout: () => void;
+  getIdTokenClaims: () => { __raw: string } | undefined;
+  loginWithRedirect: () => void;
+}>({
+  isLoading: false,
+  user: undefined,
+  logout: () => undefined,
+  getIdTokenClaims: () => undefined,
+  loginWithRedirect: () => undefined,
+});
+
+const Auth0Provider = ({ children }: { children: React.ReactNode }) => {
+  const externalNavigator = React.useContext(ExternalNavigationContext);
+
+  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
+
+  return (
+    <Auth0Context.Provider
+      value={{
+        isLoading: false,
+        user: isAuthenticated
+          ? {
+              picture: "",
+              name: "John Doe",
+              email: "example@example.com",
+            }
+          : undefined,
+        logout: () => {
+          if (isAuthenticated) {
+            setIsAuthenticated(false);
+
+            externalNavigator.go({ to: "/login", type: "replace" });
+          }
+        },
+        getIdTokenClaims: () => {
+          if (isAuthenticated) {
+            return { __raw: "dummy-token" };
+          }
+
+          return undefined;
+        },
+        loginWithRedirect: () => {
+          if (isAuthenticated) return;
+
+          setIsAuthenticated(true);
+
+          externalNavigator.go({ to: "/", type: "replace" });
+        },
+      }}
+    >
+      {children}
+    </Auth0Context.Provider>
+  );
+};
+
+const useAuth0 = () => {
+  const context = React.useContext(Auth0Context);
+
+  if (context === undefined) {
+    throw new Error("useAuth0 must be used within a Auth0Provider");
+  }
+
+  return context;
+};
+
+const Auth0Scope = {
+  Auth0ReactScope: {
+    ...Auth0ReactScope,
+    useAuth0,
+    Auth0Provider,
+  },
+};
+
+export default Auth0Scope;

packages/live-previews/src/scope/axios.tsx

@@ -0,0 +1,7 @@
+import * as AxiosScope from "axios";
+
+const AxiosImports = {
+  AxiosScope,
+};
+
+export default AxiosImports;

packages/live-previews/src/scope/casbin.tsx

@@ -0,0 +1,7 @@
+import * as Casbin from "casbin";
+
+const CasbinScope = {
+  Casbin,
+};
+
+export default CasbinScope;

packages/live-previews/src/scope/chakra-inferencer.tsx

@@ -0,0 +1,7 @@
+import * as RefineChakraInferencer from "@refinedev/inferencer/chakra-ui";
+
+const ChakraInferencerScope = {
+  RefineChakraInferencer,
+};
+
+export default ChakraInferencerScope;

packages/live-previews/src/scope/chakra.tsx

@@ -0,0 +1,183 @@
+import React from "react";
+import parseHtml from "html-react-parser";
+import type { RefineProps } from "@refinedev/core";
+import { RefineCommonScope } from "./common";
+import type RefineChakraTypes from "@refinedev/chakra-ui";
+import * as ChakraUI from "@chakra-ui/react";
+import * as ReactHookForm from "react-hook-form";
+import * as RefineChakra from "@refinedev/chakra-ui";
+import axios from "axios";
+
+const SIMPLE_REST_API_URL = "https://api.fake-rest.refine.dev";
+
+const RefineChakraDemo: React.FC<
+  Partial<RefineProps> & {
+    initialRoutes?: string[];
+  }
+> = ({ initialRoutes, ...rest }) => {
+  if (initialRoutes) {
+    RefineCommonScope.setInitialRoutes(initialRoutes);
+  }
+
+  return (
+    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
+      <RefineCommonScope.RefineCore.Refine
+        legacyRouterProvider={
+          RefineCommonScope.LegacyRefineReactRouterV6.default
+        }
+        dataProvider={RefineCommonScope.RefineSimpleRest.default(
+          SIMPLE_REST_API_URL,
+        )}
+        notificationProvider={RefineChakra.notificationProvider}
+        Layout={RefineChakra.Layout}
+        Sider={() => null}
+        catchAll={<RefineChakra.ErrorComponent />}
+        options={{
+          disableTelemetry: true,
+          reactQuery: {
+            devtoolConfig: false,
+          },
+        }}
+        {...rest}
+      />
+    </ChakraUI.ChakraProvider>
+  );
+};
+
+const ThemedTitleV2 = ({
+  collapsed,
+  wrapperStyles,
+  text: textFromProps,
+  icon: iconFromProps,
+}: RefineChakraTypes.RefineLayoutThemedTitleProps) => {
+  const [svgContent, setSvgContent] = React.useState<string | undefined>(
+    window.__refineIconSVGContent || undefined,
+  );
+  const [title, setTitle] = React.useState<string | undefined>(
+    window.__refineTitleContent || undefined,
+  );
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const messageListener = (event: MessageEvent) => {
+        if (event.data.type === "UPDATE_DYNAMIC_VALUES") {
+          if (event.data.payload?.title) {
+            setTitle(event.data.payload?.title);
+
+            if (typeof window !== "undefined") {
+              window.__refineTitleContent = event.data.payload?.title;
+            }
+          }
+
+          if (event.data.payload?.icon) {
+            try {
+              axios
+                .get(`/assets/icons/${event.data.payload.icon}`)
+                .then((res) => {
+                  const content = res.data
+                    .replace(/fill\=\"white\"/g, `fill="currentColor"`)
+                    .replace(/stroke\=\"white\"/g, `stroke="currentColor"`);
+
+                  setSvgContent(content);
+
+                  if (typeof window !== "undefined") {
+                    window.__refineIconSVGContent = content;
+                  }
+                });
+            } catch (error) {
+              console.error(error);
+            }
+          }
+        }
+      };
+
+      window.addEventListener("message", messageListener);
+
+      return () => {
+        window.removeEventListener("message", messageListener);
+      };
+    }
+
+    return () => undefined;
+  }, []);
+
+  return (
+    <RefineChakra.ThemedTitleV2
+      collapsed={collapsed}
+      wrapperStyles={wrapperStyles}
+      text={title || textFromProps}
+      icon={svgContent ? parseHtml(svgContent) : iconFromProps}
+    />
+  );
+};
+
+const ChakraProvider = ({
+  children,
+  theme,
+}: {
+  children?: React.ReactNode;
+  theme: any;
+}) => {
+  const [themeFromWindow, setThemeFromWindow] = React.useState<
+    undefined | string
+  >(undefined);
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const messageListener = (event: MessageEvent) => {
+        if (event.data.type === "UPDATE_DYNAMIC_VALUES") {
+          if (event.data.payload.theme) {
+            setThemeFromWindow(event.data.payload.theme);
+          }
+        }
+      };
+
+      window.addEventListener("message", messageListener);
+
+      return () => {
+        window.removeEventListener("message", messageListener);
+      };
+    }
+
+    return () => undefined;
+  }, []);
+
+  return (
+    <ChakraUI.ChakraProvider
+      theme={
+        themeFromWindow && themeFromWindow in RefineChakra.RefineThemes
+          ? RefineChakra.RefineThemes[
+              themeFromWindow as keyof typeof RefineChakra.RefineThemes
+            ]
+          : theme
+      }
+    >
+      {children}
+    </ChakraUI.ChakraProvider>
+  );
+};
+
+const AntdScope = {
+  // ...RefineCommonScope,
+  // RefineAntdDemo,
+  // RefineAntd,
+  // RefineMuiDemo,
+  // RefineMui,
+  // RefineMantine,
+  // RefineMantineDemo,
+  RefineChakra: {
+    ...RefineChakra,
+    ThemedTitleV2,
+  },
+  RefineChakraDemo,
+  ChakraUI: {
+    ...ChakraUI,
+    ChakraProvider,
+  },
+  ReactHookForm,
+  // // Other Packages
+  // RefineReactHookForm,
+  // RefineReactTable,
+};
+
+export default AntdScope;

packages/live-previews/src/scope/common.tsx

@@ -0,0 +1,204 @@
+import React from "react";
+import * as ReactRouterDom from "react-router-dom";
+import type * as RefineCoreTypes from "@refinedev/core";
+import { MemoryRouterComponent } from "@refinedev/react-router-v6/legacy";
+import * as LegacyRefineReactRouterV6Base from "@refinedev/react-router-v6/legacy";
+import * as RefineReactRouterV6Base from "@refinedev/react-router-v6";
+import * as RefineSimpleRest from "@refinedev/simple-rest";
+import * as RefineReactHookForm from "@refinedev/react-hook-form";
+import * as RefineReactTable from "@refinedev/react-table";
+import * as ReactHookForm from "react-hook-form";
+import * as TanstackReactTable from "@tanstack/react-table";
+import * as RefineCore from "@refinedev/core";
+
+const SIMPLE_REST_API_URL = "https://api.fake-rest.refine.dev";
+
+declare global {
+  interface Window {
+    routerSettings?: { initialEntries?: string[] };
+    refineProps?: Partial<React.ComponentProps<typeof RefineCore.Refine>>;
+    __refineIconSVGContent?: string;
+    __refineTitleContent?: string;
+  }
+}
+
+export const ExternalNavigationContext = React.createContext<{
+  go: RefineCoreTypes.GoFunction;
+  setGo: (ref: { current: RefineCoreTypes.GoFunction }) => void;
+}>({
+  go: () => undefined,
+  setGo: () => undefined,
+});
+
+const ExternalNavigationProvider = ({ children }: React.PropsWithChildren) => {
+  const [navigation, setNavigation] = React.useState<{
+    current: RefineCoreTypes.GoFunction;
+  }>({ current: () => undefined });
+
+  return (
+    <ExternalNavigationContext.Provider
+      value={{
+        go: (...args) => navigation.current(...args),
+        setGo: (go) => setNavigation(go),
+      }}
+    >
+      {children}
+    </ExternalNavigationContext.Provider>
+  );
+};
+
+const NavigationHandler = () => {
+  const context = React.useContext(ExternalNavigationContext);
+  const go = RefineCore.useGo();
+  const goRef = React.useRef(go);
+
+  React.useEffect(() => {
+    if (context) {
+      goRef.current = go;
+      context.setGo(goRef);
+    }
+  }, []);
+
+  return null;
+};
+
+const Refine = (
+  props: React.ComponentProps<typeof RefineCore.Refine>,
+): JSX.Element => {
+  const { options: hiddenRefineOptions, ...hiddenRefineProps } =
+    window.refineProps ?? {};
+  return (
+    <RefineCore.Refine
+      {...props}
+      options={{
+        disableTelemetry: true,
+        ...(props?.options || {}),
+        ...(hiddenRefineOptions || {}),
+        reactQuery: {
+          devtoolConfig: false,
+          ...(props?.options?.reactQuery || {}),
+          ...(hiddenRefineOptions?.reactQuery || {}),
+        },
+      }}
+      {...hiddenRefineProps}
+    >
+      {props.children}
+      <NavigationHandler />
+    </RefineCore.Refine>
+  );
+};
+
+const setInitialRoutes = (initialEntries: string[]): void => {
+  if (typeof window !== "undefined") {
+    window.routerSettings = {
+      initialEntries,
+    };
+  }
+};
+
+const setRefineProps = (
+  props: Partial<React.ComponentProps<typeof RefineCore.Refine>>,
+) => {
+  if (typeof window !== "undefined") {
+    window.refineProps = props;
+  }
+};
+
+const DemoMemoryRouterComponent = (
+  props: React.ComponentProps<typeof MemoryRouterComponent>,
+): JSX.Element => {
+  return (
+    <MemoryRouterComponent
+      {...props}
+      {...(typeof window !== "undefined" ? window.routerSettings : {})}
+    />
+  );
+};
+
+const DemoMemoryRouter = (
+  props: React.ComponentProps<typeof ReactRouterDom.MemoryRouter>,
+): JSX.Element => {
+  return (
+    <ReactRouterDom.MemoryRouter
+      {...props}
+      {...(typeof window !== "undefined" ? window.routerSettings : {})}
+    />
+  );
+};
+
+const LegacyRefineReactRouterV6 = {
+  ...LegacyRefineReactRouterV6Base,
+  MemoryRouterComponent: DemoMemoryRouterComponent,
+  default: {
+    ...LegacyRefineReactRouterV6Base.default,
+    RouterComponent: DemoMemoryRouterComponent,
+  },
+};
+
+/**
+ * @deprecated please use `setInitialRoutes` instead
+ */
+const LegacyRefineDemoReactRouterV6 = (
+  initialRoutes?: string[],
+): RefineCoreTypes.IRouterProvider => {
+  if (initialRoutes) {
+    setInitialRoutes(initialRoutes);
+  }
+
+  return LegacyRefineReactRouterV6.default;
+};
+
+const RefineHeadlessDemo: React.FC<
+  Partial<RefineCoreTypes.RefineProps> & {
+    initialRoutes?: string[];
+  }
+> = ({ initialRoutes, ...rest }) => {
+  if (initialRoutes) {
+    setInitialRoutes(initialRoutes);
+  }
+
+  return (
+    <Refine
+      legacyRouterProvider={LegacyRefineReactRouterV6.default}
+      dataProvider={RefineSimpleRest.default(SIMPLE_REST_API_URL)}
+      options={{
+        disableTelemetry: true,
+        reactQuery: {
+          devtoolConfig: false,
+        },
+      }}
+      {...rest}
+    />
+  );
+};
+
+export const RefineCommonScope = {
+  // React
+  React,
+  ...React,
+  // Core
+  RefineCore: {
+    ...RefineCore,
+    ExternalNavigationProvider,
+    Refine,
+  },
+  ReactRouterDom: {
+    ...ReactRouterDom,
+    BrowserRouter: DemoMemoryRouter,
+  },
+  // Data
+  RefineSimpleRest,
+  // Utilities
+  setInitialRoutes,
+  setRefineProps,
+  RefineReactRouterV6: RefineReactRouterV6Base,
+  LegacyRefineReactRouterV6,
+  LegacyRefineDemoReactRouterV6,
+  // UI
+  RefineHeadlessDemo,
+  // Other
+  RefineReactHookForm,
+  RefineReactTable,
+  ReactHookForm,
+  TanstackReactTable,
+};

packages/live-previews/src/scope/devtools.tsx

@@ -0,0 +1,10 @@
+const MockRefineDevtools = {
+  DevtoolsProvider: ({ children }: { children: React.ReactNode }) => children,
+  DevtoolsPanel: () => null,
+};
+
+const DevtoolsScope = {
+  RefineDevtools: MockRefineDevtools,
+};
+
+export default DevtoolsScope;

packages/live-previews/src/scope/google.tsx

@@ -0,0 +1,78 @@
+import { useLogin } from "@refinedev/core";
+
+const dummyCredentials =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
+
+const MockGoogleButton = () => {
+  const { mutate } = useLogin();
+
+  return (
+    <button
+      type="button"
+      onClick={() => mutate({ credential: dummyCredentials })}
+      style={{
+        border: "none",
+        background: "#3871E0",
+        borderRadius: "4px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "2px",
+        paddingRight: "12px",
+        color: "white",
+        fontWeight: 500,
+        gap: "12px",
+        cursor: "pointer",
+        fontSize: "14px",
+      }}
+    >
+      <div
+        style={{
+          width: "28px",
+          height: "28px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          background: "white",
+          borderTopLeftRadius: "3px",
+          borderBottomLeftRadius: "3px",
+        }}
+      >
+        <svg
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 48 48"
+          width="14px"
+          height="14px"
+        >
+          <g>
+            <path
+              fill="#EA4335"
+              d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+            />
+            <path
+              fill="#4285F4"
+              d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+            />
+            <path
+              fill="#34A853"
+              d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+            />
+            <path fill="none" d="M0 0h48v48H0z" />
+          </g>
+        </svg>
+      </div>
+      <div>Sign in with Google</div>
+    </button>
+  );
+};
+
+const GoogleScope = {
+  MockGoogleButton,
+};
+
+export default GoogleScope;

packages/live-previews/src/scope/hasura.tsx

@@ -0,0 +1,11 @@
+import * as RefineHasura from "@refinedev/hasura";
+import * as GraphQLTag from "graphql-tag";
+import * as GraphQLWS from "graphql-ws";
+
+const HasuraScope = {
+  RefineHasura,
+  GraphQLTag,
+  GraphQLWS,
+};
+
+export default HasuraScope;

packages/live-previews/src/scope/headless-inferencer.tsx

@@ -0,0 +1,7 @@
+import * as RefineHeadlessInferencer from "@refinedev/inferencer/headless";
+
+const HeadlessInferencerScope = {
+  RefineHeadlessInferencer,
+};
+
+export default HeadlessInferencerScope;

packages/live-previews/src/scope/i18n.tsx

@@ -0,0 +1,13 @@
+import * as ReactI18Next from "react-i18next";
+import * as I18Next from "i18next";
+import * as I18NextBrowserLanguageDetector from "i18next-browser-languagedetector";
+import * as I18NextXhrBackend from "i18next-xhr-backend";
+
+const I18nScope = {
+  ReactI18Next,
+  I18Next,
+  I18NextBrowserLanguageDetector,
+  I18NextXhrBackend,
+};
+
+export default I18nScope;

packages/live-previews/src/scope/kbar.tsx

@@ -0,0 +1,7 @@
+import * as RefineKBar from "@refinedev/kbar";
+
+const KBarScope = {
+  RefineKBar,
+};
+
+export default KBarScope;

packages/live-previews/src/scope/keycloak.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import * as KeycloakScope from "keycloak-js";
+import * as ReactKeycloakWebScope from "@react-keycloak/web";
+
+import { ExternalNavigationContext } from "./common";
+
+const ReactKeycloakContext = React.createContext<{
+  keycloak: {
+    login: () => void;
+    logout: () => void;
+    token?: string;
+    tokenParsed?: { family_name: string };
+  };
+  initialized: boolean;
+}>({
+  keycloak: {
+    login: () => undefined,
+    logout: () => undefined,
+    token: undefined,
+    tokenParsed: undefined,
+  },
+  initialized: false,
+});
+
+const ReactKeycloakProvider = ({ children }: { children: React.ReactNode }) => {
+  const externalNavigator = React.useContext(ExternalNavigationContext);
+
+  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
+
+  return (
+    <ReactKeycloakContext.Provider
+      value={{
+        initialized: true,
+        keycloak: {
+          login: () => {
+            if (isAuthenticated) return;
+
+            setIsAuthenticated(true);
+
+            externalNavigator.go({ to: "/", type: "replace" });
+          },
+          logout: () => {
+            if (isAuthenticated) {
+              setIsAuthenticated(false);
+
+              externalNavigator.go({ to: "/", type: "replace" });
+            }
+          },
+          token: isAuthenticated ? "dummy-token" : undefined,
+          tokenParsed: isAuthenticated
+            ? { family_name: "John Doe" }
+            : undefined,
+        },
+      }}
+    >
+      {children}
+    </ReactKeycloakContext.Provider>
+  );
+};
+
+const useKeycloak = () => {
+  const context = React.useContext(ReactKeycloakContext);
+
+  if (context === undefined) {
+    throw new Error("useKeycloak must be used within a ReactKeycloakProvider");
+  }
+
+  return context;
+};
+
+const Keycloak = {
+  KeycloakScope,
+  ReactKeycloakWebScope: {
+    ...ReactKeycloakWebScope,
+    ReactKeycloakProvider,
+    useKeycloak,
+  },
+};
+
+export default Keycloak;

packages/live-previews/src/scope/mantine-inferencer.tsx

@@ -0,0 +1,7 @@
+import * as RefineMantineInferencer from "@refinedev/inferencer/mantine";
+
+const MantineInferencerScope = {
+  RefineMantineInferencer,
+};
+
+export default MantineInferencerScope;

packages/live-previews/src/scope/mantine.tsx

@@ -0,0 +1,185 @@
+import React from "react";
+import parseHtml from "html-react-parser";
+import type { RefineProps } from "@refinedev/core";
+import { RefineCommonScope } from "./common";
+import type RefineMantineTypes from "@refinedev/mantine";
+import * as RefineMantine from "@refinedev/mantine";
+import * as MantineCore from "@mantine/core";
+import * as MantineHooks from "@mantine/hooks";
+import * as MantineForm from "@mantine/form";
+import * as MantineNotifications from "@mantine/notifications";
+import axios from "axios";
+
+const SIMPLE_REST_API_URL = "https://api.fake-rest.refine.dev";
+
+const RefineMantineDemo: React.FC<
+  Partial<RefineProps> & {
+    initialRoutes?: string[];
+  }
+> = ({ initialRoutes, ...rest }) => {
+  if (initialRoutes) {
+    RefineCommonScope.setInitialRoutes(initialRoutes);
+  }
+
+  return (
+    <MantineCore.MantineProvider
+      theme={RefineMantine.LightTheme}
+      withNormalizeCSS
+      withGlobalStyles
+    >
+      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
+      <RefineCommonScope.RefineCore.Refine
+        legacyRouterProvider={
+          RefineCommonScope.LegacyRefineReactRouterV6.default
+        }
+        dataProvider={RefineCommonScope.RefineSimpleRest.default(
+          SIMPLE_REST_API_URL,
+        )}
+        notificationProvider={RefineMantine.notificationProvider}
+        Layout={RefineMantine.Layout}
+        Sider={() => null}
+        catchAll={<RefineMantine.ErrorComponent />}
+        options={{
+          disableTelemetry: true,
+          reactQuery: {
+            devtoolConfig: false,
+          },
+        }}
+        {...rest}
+      />
+    </MantineCore.MantineProvider>
+  );
+};
+
+const ThemedTitleV2 = ({
+  collapsed,
+  wrapperStyles,
+  text: textFromProps,
+  icon: iconFromProps,
+}: RefineMantineTypes.RefineLayoutThemedTitleProps) => {
+  const [svgContent, setSvgContent] = React.useState<string | undefined>(
+    window.__refineIconSVGContent || undefined,
+  );
+  const [title, setTitle] = React.useState<string | undefined>(
+    window.__refineTitleContent || undefined,
+  );
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const messageListener = (event: MessageEvent) => {
+        if (event.data.type === "UPDATE_DYNAMIC_VALUES") {
+          if (event.data.payload?.title) {
+            setTitle(event.data.payload?.title);
+
+            if (typeof window !== "undefined") {
+              window.__refineTitleContent = event.data.payload?.title;
+            }
+          }
+
+          if (event.data.payload?.icon) {
+            try {
+              axios
+                .get(`/assets/icons/${event.data.payload.icon}`)
+                .then((res) => {
+                  const content = res.data
+                    .replace(/fill\=\"white\"/g, `fill="currentColor"`)
+                    .replace(/stroke\=\"white\"/g, `stroke="currentColor"`);
+
+                  setSvgContent(content);
+
+                  if (typeof window !== "undefined") {
+                    window.__refineIconSVGContent = content;
+                  }
+                });
+            } catch (error) {
+              console.error(error);
+            }
+          }
+        }
+      };
+
+      window.addEventListener("message", messageListener);
+
+      return () => {
+        window.removeEventListener("message", messageListener);
+      };
+    }
+
+    return () => undefined;
+  }, []);
+
+  return (
+    <RefineMantine.ThemedTitleV2
+      collapsed={collapsed}
+      wrapperStyles={wrapperStyles}
+      text={title || textFromProps}
+      icon={svgContent ? parseHtml(svgContent) : iconFromProps}
+    />
+  );
+};
+
+const MantineProvider = ({
+  children,
+  theme,
+  ...restProps
+}: {
+  children?: React.ReactNode;
+  theme?: { colorScheme?: string };
+}) => {
+  const [themeFromWindow, setThemeFromWindow] = React.useState<
+    undefined | string
+  >(undefined);
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const messageListener = (event: MessageEvent) => {
+        if (event.data.type === "UPDATE_DYNAMIC_VALUES") {
+          if (event.data.payload.theme) {
+            setThemeFromWindow(event.data.payload.theme);
+          }
+        }
+      };
+
+      window.addEventListener("message", messageListener);
+
+      return () => {
+        window.removeEventListener("message", messageListener);
+      };
+    }
+
+    return () => undefined;
+  }, []);
+
+  return (
+    <MantineCore.MantineProvider
+      {...restProps}
+      theme={{
+        ...(themeFromWindow && themeFromWindow in RefineMantine.RefineThemes
+          ? RefineMantine.RefineThemes[
+              themeFromWindow as keyof typeof RefineMantine.RefineThemes
+            ]
+          : theme),
+        colorScheme: theme?.colorScheme as any,
+      }}
+    >
+      {children}
+    </MantineCore.MantineProvider>
+  );
+};
+
+const MantineScope = {
+  RefineMantine: {
+    ...RefineMantine,
+    ThemedTitleV2,
+  },
+  RefineMantineDemo,
+  MantineCore: {
+    ...MantineCore,
+    MantineProvider,
+  },
+  MantineHooks,
+  MantineForm,
+  MantineNotifications,
+};
+
+export default MantineScope;

packages/live-previews/src/scope/map.tsx

@@ -0,0 +1,70 @@
+export const packageMap: Record<string, string> = {
+  "react-dom/client": "ReactDomClient",
+  "./reportWebVitals": "ReportWebVitals",
+  "@refinedev/core": "RefineCore",
+  "@refinedev/react-router-v6/legacy": "LegacyRefineReactRouterV6",
+  "@refinedev/react-router-v6": "RefineReactRouterV6",
+  "@refinedev/antd": "RefineAntd",
+  "@refinedev/mui": "RefineMui",
+  "@refinedev/mantine": "RefineMantine",
+  "@refinedev/chakra-ui": "RefineChakra",
+  "@refinedev/simple-rest": "RefineSimpleRest",
+  "@refinedev/react-hook-form": "RefineReactHookForm",
+  "@refinedev/react-table": "RefineReactTable",
+  "@refinedev/inferencer/antd": "RefineAntdInferencer",
+  "@refinedev/inferencer/mui": "RefineMuiInferencer",
+  "@refinedev/inferencer/mantine": "RefineMantineInferencer",
+  "@refinedev/inferencer/chakra-ui": "RefineChakraInferencer",
+  "@refinedev/inferencer/headless": "RefineHeadlessInferencer",
+  "@refinedev/kbar": "RefineKBar",
+  "@refinedev/airtable": "RefineAirtable",
+  "@refinedev/appwrite": "RefineAppwrite",
+  "@refinedev/hasura": "RefineHasura",
+  "@refinedev/nestjsx-crud": "RefineNestjsxCrud",
+  "@refinedev/nestjs-query": "RefineNestjsQuery",
+  "@refinedev/strapi-v4": "RefineStrapiV4",
+  "@refinedev/strapi-graphql": "RefineStrapiGraphql",
+  "@refinedev/supabase": "RefineSupabase",
+  "@refinedev/devtools": "RefineDevtools",
+  axios: "AxiosScope",
+  "@auth0/auth0-react": "Auth0ReactScope",
+  "keycloak-js": "KeycloakScope",
+  "@react-keycloak/web": "ReactKeycloakWebScope",
+  "react-router-dom": "ReactRouterDom",
+  antd: "AntdCore",
+  "@ant-design/icons": "AntDesignIcons",
+  "@mantine/core": "MantineCore",
+  "@mantine/hooks": "MantineHooks",
+  "@mantine/form": "MantineForm",
+  "@mantine/notifications": "MantineNotifications",
+  "@emotion/react": "EmotionReact",
+  "@emotion/styled": "EmotionStyled",
+  "@mui/lab": "MuiLab",
+  "@mui/material": "MuiMaterial",
+  "@mui/material/styles": "MuiMaterialStyles",
+  "@mui/icons-material": "MuiIconsMaterial",
+  "@mui/x-data-grid": "MuiXDataGrid",
+  // To make sure we're still able to use the old package name, we're also mapping the old package name to the related scope
+  "@tabler/icons": "TablerIcons",
+  "@tabler/icons-react": "TablerIcons",
+  "@chakra-ui/react": "ChakraUI",
+  "react-hook-form": "ReactHookForm",
+  "@tanstack/react-table": "TanstackReactTable",
+  "react-i18next": "ReactI18Next",
+  i18next: "I18Next",
+  "i18next-browser-languagedetector": "I18NextBrowserLanguageDetector",
+  "i18next-xhr-backend": "I18NextXhrBackend",
+  casbin: "Casbin",
+  "@uiw/react-md-editor": "MDEditorNamespace",
+  uuid: "UUID",
+  "graphql-tag": "GraphQLTag",
+  "graphql-ws": "GraphQLWS",
+};
+
+export const packageScopeMap: Record<string, RegExp> = {
+  "@mui/lab": /@mui\/lab\/(.*)/,
+  "@mui/material/styles": /@mui\/material\/styles\/(.*)/,
+  "@mui/material": /@mui\/material\/(.*)/,
+  "@mui/icons-material": /@mui\/icons-material\/(.*)/,
+  "@mui/x-data-grid": /@mui\/x-data-grid\/(.*)/,
+};

packages/live-previews/src/scope/mui-inferencer.tsx

@@ -0,0 +1,7 @@
+import * as RefineMuiInferencer from "@refinedev/inferencer/mui";
+
+const MuiInferencerScope = {
+  RefineMuiInferencer,
+};
+
+export default MuiInferencerScope;

packages/live-previews/src/scope/mui.tsx

@@ -0,0 +1,237 @@
+import React from "react";
+import parseHtml from "html-react-parser";
+import type { RefineProps } from "@refinedev/core";
+import { RefineCommonScope } from "./common";
+import type * as RefineMuiTypes from "@refinedev/mui";
+import * as MuiMaterialStyles from "@mui/material/styles";
+
+import * as EmotionReact from "@emotion/react";
+import * as EmotionStyled from "@emotion/styled";
+import * as MuiLab from "@mui/lab";
+import * as MuiMaterial from "@mui/material";
+import * as MuiXDataGrid from "@mui/x-data-grid";
+import * as ReactHookForm from "react-hook-form";
+
+import * as RefineMui from "@refinedev/mui";
+
+const { CssBaseline, GlobalStyles } = MuiMaterial;
+
+import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
+import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+import Camera from "@mui/icons-material/Camera";
+import ListOutlined from "@mui/icons-material/ListOutlined";
+import Logout from "@mui/icons-material/Logout";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import ChevronLeft from "@mui/icons-material/ChevronLeft";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import MenuRounded from "@mui/icons-material/MenuRounded";
+import Menu from "@mui/icons-material/Menu";
+import Dashboard from "@mui/icons-material/Dashboard";
+import Check from "@mui/icons-material/Check";
+import Close from "@mui/icons-material/Close";
+
+import axios from "axios";
+
+const SIMPLE_REST_API_URL = "https://api.fake-rest.refine.dev";
+
+const RefineMuiDemo: React.FC<
+  Partial<RefineProps> & {
+    initialRoutes?: string[];
+  }
+> = ({ initialRoutes, ...rest }) => {
+  if (initialRoutes) {
+    RefineCommonScope.setInitialRoutes(initialRoutes);
+  }
+
+  return (
+    <ThemeProvider theme={RefineMui.LightTheme}>
+      <CssBaseline />
+      <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
+      <RefineMui.RefineSnackbarProvider>
+        <RefineCommonScope.RefineCore.Refine
+          legacyRouterProvider={
+            RefineCommonScope.LegacyRefineReactRouterV6.default
+          }
+          dataProvider={RefineCommonScope.RefineSimpleRest.default(
+            SIMPLE_REST_API_URL,
+          )}
+          notificationProvider={RefineMui.notificationProvider}
+          Layout={RefineMui.Layout}
+          Sider={() => null}
+          catchAll={<RefineMui.ErrorComponent />}
+          options={{
+            disableTelemetry: true,
+            reactQuery: {
+              devtoolConfig: false,
+            },
+          }}
+          {...rest}
+        />
+      </RefineMui.RefineSnackbarProvider>
+    </ThemeProvider>
+  );
+};
+
+const ThemedTitleV2 = ({
+  collapsed,
+  wrapperStyles,
+  text: textFromProps,
+  icon: iconFromProps,
+}: RefineMuiTypes.RefineLayoutThemedTitleProps) => {
+  const [svgContent, setSvgContent] = React.useState<string | undefined>(
+    window.__refineIconSVGContent || undefined,
+  );
+  const [title, setTitle] = React.useState<string | undefined>(
+    window.__refineTitleContent || undefined,
+  );
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const messageListener = (event: MessageEvent) => {
+        if (event.data.type === "UPDATE_DYNAMIC_VALUES") {
+          if (event.data.payload?.title) {
+            setTitle(event.data.payload?.title);
+
+            if (typeof window !== "undefined") {
+              window.__refineTitleContent = event.data.payload?.title;
+            }
+          }
+
+          if (event.data.payload?.icon) {
+            try {
+              axios
+                .get(`/assets/icons/${event.data.payload.icon}`)
+                .then((res) => {
+                  const content = res.data
+                    .replace(/fill\=\"white\"/g, `fill="currentColor"`)
+                    .replace(/stroke\=\"white\"/g, `stroke="currentColor"`);
+
+                  setSvgContent(content);
+
+                  if (typeof window !== "undefined") {
+                    window.__refineIconSVGContent = content;
+                  }
+                });
+            } catch (error) {
+              console.error(error);
+            }
+          }
+        }
+      };
+
+      window.addEventListener("message", messageListener);
+
+      return () => {
+        window.removeEventListener("message", messageListener);
+      };
+    }
+
+    return () => undefined;
+  }, []);
+
+  return (
+    <RefineMui.ThemedTitleV2
+      collapsed={collapsed}
+      wrapperStyles={wrapperStyles}
+      text={title || textFromProps}
+      icon={svgContent ? parseHtml(svgContent) : iconFromProps}
+    />
+  );
+};
+
+const ThemeProvider = ({
+  children,
+  theme,
+}: {
+  children?: React.ReactNode;
+  theme?: { palette?: { mode?: "light" | "dark" } };
+}) => {
+  const [themeFromWindow, setThemeFromWindow] = React.useState<
+    undefined | string
+  >(undefined);
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const messageListener = (event: MessageEvent) => {
+        if (event.data.type === "UPDATE_DYNAMIC_VALUES") {
+          if (event.data.payload?.theme) {
+            setThemeFromWindow(event.data.payload.theme);
+          }
+        }
+      };
+
+      window.addEventListener("message", messageListener);
+
+      return () => {
+        window.removeEventListener("message", messageListener);
+      };
+    }
+
+    return () => undefined;
+  }, []);
+
+  const isLightPalette = theme?.palette?.mode === "light";
+
+  const RefineThemeFromWindow = React.useMemo(() => {
+    if (themeFromWindow && themeFromWindow in RefineMui.RefineThemes) {
+      if (isLightPalette) {
+        return RefineMui.RefineThemes[
+          themeFromWindow as keyof typeof RefineMui.RefineThemes
+        ];
+      }
+      return RefineMui.RefineThemes[
+        `${themeFromWindow}Dark` as keyof typeof RefineMui.RefineThemes
+      ];
+    }
+
+    return undefined;
+  }, [themeFromWindow, isLightPalette]);
+
+  return (
+    <MuiMaterialStyles.ThemeProvider
+      theme={(RefineThemeFromWindow as any) ?? theme}
+    >
+      {children}
+    </MuiMaterialStyles.ThemeProvider>
+  );
+};
+
+const MuiScope = {
+  // ...RefineCommonScope,
+  RefineMuiDemo,
+  RefineMui: {
+    ...RefineMui,
+    ThemedTitleV2,
+  },
+  EmotionReact,
+  EmotionStyled,
+  MuiLab,
+  MuiMaterial,
+  MuiXDataGrid,
+  MuiMaterialStyles: {
+    ...MuiMaterialStyles,
+    ThemeProvider,
+  },
+  ReactHookForm,
+  MuiIconsMaterial: {
+    Close,
+    Check,
+    LightModeOutlined,
+    DarkModeOutlined,
+    ArrowRight,
+    Camera,
+    ListOutlined,
+    Logout,
+    ExpandLess,
+    ExpandMore,
+    ChevronLeft,
+    ChevronRight,
+    MenuRounded,
+    Menu,
+    Dashboard,
+  },
+};
+
+export default MuiScope;

packages/live-previews/src/scope/nestjs-query.tsx

@@ -0,0 +1,11 @@
+import * as RefineNestjsQuery from "@refinedev/nestjs-query";
+import * as GraphQLTag from "graphql-tag";
+import * as GraphQLWS from "graphql-ws";
+
+const NestjsQueryScope = {
+  RefineNestjsQuery,
+  GraphQLTag,
+  GraphQLWS,
+};
+
+export default NestjsQueryScope;

packages/live-previews/src/scope/nestjsx.tsx

@@ -0,0 +1,7 @@
+import * as RefineNestjsxCrud from "@refinedev/nestjsx-crud";
+
+const NestjsxScope = {
+  RefineNestjsxCrud,
+};
+
+export default NestjsxScope;

packages/live-previews/src/scope/react-dom.tsx

@@ -0,0 +1,17 @@
+/**
+ * This is done to mock `react-dom` as a no-op.
+ */
+
+const createRoot = () => {
+  return {
+    render: () => undefined,
+  };
+};
+
+const ReactDomClient = {
+  ReactDomClient: {
+    createRoot,
+  },
+};
+
+export default ReactDomClient;

packages/live-previews/src/scope/strapi-graphql.tsx

@@ -0,0 +1,7 @@
+import * as RefineStrapiGraphql from "@refinedev/strapi-graphql";
+
+const StrapiGraphqlScope = {
+  RefineStrapiGraphql,
+};
+
+export default StrapiGraphqlScope;

packages/live-previews/src/scope/strapi-v4.tsx

@@ -0,0 +1,7 @@
+import * as RefineStrapiV4 from "@refinedev/strapi-v4";
+
+const StrapiV4Scope = {
+  RefineStrapiV4,
+};
+
+export default StrapiV4Scope;

packages/live-previews/src/scope/supabase.tsx

@@ -0,0 +1,7 @@
+import * as RefineSupabase from "@refinedev/supabase";
+
+const SupabaseScope = {
+  RefineSupabase,
+};
+
+export default SupabaseScope;

packages/live-previews/src/scope/tabler-icons.tsx

@@ -0,0 +1,51 @@
+import {
+  IconSun,
+  IconMoonStars,
+  IconLanguage,
+  IconChevronRight,
+  IconChevronLeft,
+  IconSelector,
+  IconChevronDown,
+  IconFilter,
+  IconX,
+  IconCheck,
+  IconMoodSmile,
+  IconList,
+  IconCategory,
+  IconUsers,
+  IconDashboard,
+  IconPower,
+  IconLogout,
+  IconMenu2,
+  IconMoon,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
+} from "@tabler/icons-react";
+
+const TablerScope = {
+  TablerIcons: {
+    IconSun,
+    IconMoonStars,
+    IconLanguage,
+    IconChevronRight,
+    IconChevronLeft,
+    IconSelector,
+    IconChevronDown,
+    IconFilter,
+    IconX,
+    IconCheck,
+    IconMoodSmile,
+    IconList,
+    IconCategory,
+    IconUsers,
+    IconDashboard,
+    IconPower,
+    IconLogout,
+    IconMenu2,
+    IconMoon,
+    IconLayoutSidebarLeftCollapse,
+    IconLayoutSidebarLeftExpand,
+  },
+};
+
+export default TablerScope;

packages/live-previews/src/scope/web-vitals.tsx

@@ -0,0 +1,13 @@
+/**
+ * This is done to mock `web-vitals` as a no-op.
+ */
+
+const fn = () => undefined;
+
+const ReportWebVitals = {
+  ReportWebVitals: {
+    default: fn,
+  },
+};
+
+export default ReportWebVitals;