feat: add refine (#139)

* feat: add refine * chore(creator-panel): update packages
mrtousif · Apr 22, 2023 · 6c8f2ef · 6c8f2ef
1 parent 3005a89
commit 6c8f2ef
Show file tree

Hide file tree

Showing 18 changed files with 4,372 additions and 1,253 deletions.
diff --git a/apps/creator-panel/README.md b/apps/creator-panel/README.md
@@ -0,0 +1,45 @@
+
+<div align="center" style="margin: 30px;">
+<a href="https://refine.dev/">
+  <img src="https://raw.githubusercontent.com/refinedev/refine/master/logo.png"   style="width:250px;" align="center" />
+</a>
+<br />
+<br />
+
+<div align="center">
+    <a href="https://refine.dev">Home Page</a> |
+    <a href="https://discord.gg/refine">Discord</a> |
+    <a href="https://refine.dev/examples/">Examples</a> | 
+    <a href="https://refine.dev/blog/">Blog</a> | 
+    <a href="https://refine.dev/docs/">Documentation</a> | 
+    <a href="https://github.com/refinedev/refine/projects/1">Roadmap</a>
+</div>
+</div>
+
+<br />
+
+<div align="center"><strong>Build your <a href="https://reactjs.org/">React</a>-based CRUD applications, without constraints.</strong><br>An open source, headless web application framework developed with flexibility in mind.
+
+<br />
+<br />
+
+
+[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
+[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
+
+<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+</div>
+
+## Try it out on your local
+
+```bash
+npm create refine-app@latest -- --example auth-headless
+```
+
+## Try it out on CodeSandbox
+
+<br/>
+
+[![Open auth-headless example from refine](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/auth-headless?view=preview&theme=dark&codemirror=1)
+
diff --git a/apps/creator-panel/index.html b/apps/creator-panel/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/src/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>refine headless authentication example</title>
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+        />
+
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/apps/creator-panel/package.json b/apps/creator-panel/package.json
@@ -0,0 +1,37 @@
+{
+    "name": "creator-panel",
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview",
+        "format": "prettier --write \"src/**/*.{ts,tsx}\" \"test/**/*.ts\"",
+        "refine": "refine"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.10.6",
+        "@emotion/styled": "^11.10.6",
+        "@mui/lab": "5.0.0-alpha.127",
+        "@mui/material": "^5.12.1",
+        "@refinedev/cli": "^2.5.3",
+        "@refinedev/core": "^4.10.0",
+        "@refinedev/hasura": "^6.4.0",
+        "@refinedev/mui": "^4.10.3",
+        "@refinedev/react-hook-form": "^4.1.6",
+        "@refinedev/react-router-v6": "^4.1.0",
+        "@refinedev/react-table": "^5.1.4",
+        "@refinedev/simple-rest": "^4.5.0",
+        "@tanstack/react-table": "^8.8.5",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router-dom": "6.10.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.38",
+        "@types/react-dom": "^18.0.11",
+        "@vitejs/plugin-react": "^4.0.0",
+        "typescript": "^5.0.4",
+        "vite": "^4.3.1"
+    },
+    "version": "3.25.0"
+}
diff --git a/apps/creator-panel/src/App.tsx b/apps/creator-panel/src/App.tsx
@@ -0,0 +1,248 @@
+import {
+    AuthPage,
+    AuthBindings,
+    GitHubBanner,
+    Refine,
+    Authenticated
+} from "@refinedev/core";
+import {
+    Layout,
+    ErrorComponent,
+    LightTheme,
+    notificationProvider,
+    RefineSnackbarProvider,
+} from "@refinedev/mui";
+import { CssBaseline, GlobalStyles } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
+// import dataProvider from "@refinedev/simple-rest";
+import dataProvider, { GraphQLClient } from "@refinedev/hasura";
+import routerProvider, {
+    NavigateToResource,
+    CatchAllNavigate,
+    UnsavedChangesNotifier,
+} from "@refinedev/react-router-v6";
+import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
+
+import { PostList, PostCreate, PostEdit } from "./pages/posts";
+import { ExamplePage } from "./pages/example";
+// import Layout from "./pages/layout";
+
+const API_URL = "https://flowing-mammal-24.hasura.app/v1/graphql";
+
+/*
+## Refine supports GraphQL subscriptions out-of-the-box. For more detailed information, please visit here: https://refine.dev/docs/core/providers/live-provider/
+
+const WS_URL = "ws://flowing-mammal-24.hasura.app/v1/graphql";
+
+const gqlWebSocketClient = graphqlWS.createClient({
+    url: WS_URL,
+});
+ */
+
+const client = new GraphQLClient(API_URL, {
+    headers: {
+        "x-hasura-role": "public",
+    },
+});
+const gqlDataProvider = dataProvider(client);
+
+const App: React.FC = () => {
+    const authProvider: AuthBindings = {
+        login: async ({ providerName, email }) => {
+            if (providerName === "google") {
+                window.location.href =
+                    "https://accounts.google.com/o/oauth2/v2/auth";
+                return {
+                    success: true,
+                };
+            }
+
+            if (providerName === "github") {
+                window.location.href =
+                    "https://github.com/login/oauth/authorize";
+                return {
+                    success: true,
+                };
+            }
+
+            if (email) {
+                localStorage.setItem("email", email);
+                return {
+                    success: true,
+                    redirectTo: "/",
+                };
+            }
+
+            return {
+                success: false,
+                error: new Error("Email is wrong"),
+            };
+        },
+        register: async ({ email, password }) => {
+            if (email && password) {
+                return {
+                    success: true,
+                    redirectTo: "/",
+                };
+            }
+            return {
+                success: false,
+                error: new Error("Email or password is wrong"),
+            };
+        },
+        updatePassword: async ({ password }) => {
+            if (password) {
+                //we can update password here
+                return {
+                    success: true,
+                    redirectTo: "/login",
+                };
+            }
+            return {
+                success: false,
+                error: new Error("password is wrong"),
+            };
+        },
+        forgotPassword: async ({ email }) => {
+            if (email) {
+                //we can send email with forgot password link here
+                return {
+                    success: true,
+                    redirectTo: "/login",
+                };
+            }
+            return {
+                success: false,
+                error: new Error("Email is wrong"),
+            };
+        },
+        logout: async () => {
+            localStorage.removeItem("email");
+            return {
+                success: true,
+                redirectTo: "/",
+            };
+        },
+        onError: async (error) => {
+            console.error(error);
+            return { error };
+        },
+        check: async () => {
+            return localStorage.getItem("email")
+                ? { authenticated: true }
+                : {
+                      authenticated: false,
+                      redirectTo: "/login",
+                      error: new Error("Not authenticated"),
+                  };
+        },
+        getPermissions: async () => ["admin"],
+        getIdentity: async () => ({
+            id: 1,
+            name: "Jane Doe",
+            avatar: "https://unsplash.com/photos/IWLOvomUmWU/download?force=true&w=640",
+        }),
+    };
+
+    return (
+        <BrowserRouter>
+                <ThemeProvider theme={LightTheme}>
+                <CssBaseline />
+                <GlobalStyles
+                    styles={{ html: { WebkitFontSmoothing: "auto" } }}
+                />
+                <RefineSnackbarProvider>
+
+
+            <Refine
+                routerProvider={routerProvider}
+                dataProvider={gqlDataProvider}
+                notificationProvider={notificationProvider}
+                authProvider={authProvider}
+                resources={[
+                    {
+                        name: "posts",
+                        list: "/posts",
+                        edit: "/posts/edit/:id",
+                        create: "/posts/create",
+                        meta: {
+                            canDelete: true,
+                        },
+                    },
+                ]}
+                options={{
+                    syncWithLocation: true,
+                    warnWhenUnsavedChanges: true,
+                }}
+            >
+                <Routes>
+                    <Route
+                        element={
+                            <Authenticated
+                                fallback={<CatchAllNavigate to="/login" />}
+                            >
+                                <Layout>
+                                    <Outlet />
+                                </Layout>
+                            </Authenticated>
+                        }
+                    >
+                        <Route
+                            index
+                            element={<NavigateToResource resource="posts" />}
+                        />
+
+                        <Route path="/posts">
+                            <Route index element={<PostList />} />
+                            <Route path="create" element={<PostCreate />} />
+                            <Route path="edit/:id" element={<PostEdit />} />
+                        </Route>
+                    </Route>
+
+                    <Route
+                        element={
+                            <Authenticated fallback={<Outlet />}>
+                                <NavigateToResource resource="posts" />
+                            </Authenticated>
+                        }
+                    >
+                        <Route
+                            path="/login"
+                            element={<AuthPage type="login" />}
+                        />
+                        <Route
+                            path="/register"
+                            element={<AuthPage type="register" />}
+                        />
+                        <Route
+                            path="/forgot-password"
+                            element={<AuthPage type="forgotPassword" />}
+                        />
+                        <Route
+                            path="/update-password"
+                            element={<AuthPage type="updatePassword" />}
+                        />
+                        <Route path="/example" element={<ExamplePage />} />
+                    </Route>
+
+                    <Route
+                        element={
+                            <Authenticated>
+                                <Layout>
+                                    <Outlet />
+                                </Layout>
+                            </Authenticated>
+                        }
+                    >
+                        <Route path="*" element={<ErrorComponent />} />
+                    </Route>
+                </Routes>
+                <UnsavedChangesNotifier />
+            </Refine>
+            </RefineSnackbarProvider>
+            </ThemeProvider>
+        </BrowserRouter>
+    );
+};
+
+export default App;
diff --git a/apps/creator-panel/src/favicon.ico b/apps/creator-panel/src/favicon.ico
diff --git a/apps/creator-panel/src/interfaces/index.d.ts b/apps/creator-panel/src/interfaces/index.d.ts
@@ -0,0 +1,12 @@
+export interface ICategory {
+    id: number;
+    title: string;
+}
+
+export interface IPost {
+    id: number;
+    title: string;
+    content: string;
+    status: 'published' | 'draft' | 'rejected';
+    category: { id: number };
+}
diff --git a/apps/creator-panel/src/main.tsx b/apps/creator-panel/src/main.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+
+const container = document.getElementById("root");
+// eslint-disable-next-line
+const root = createRoot(container!);
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+);