feat: add refine invoicer (#5911)

refinedev · May 14, 2024 · 87bde78 · 87bde78
1 parent e7587e7
commit 87bde78
Show file tree

Hide file tree

Showing 59 changed files with 4,573 additions and 0 deletions.
diff --git a/examples/invoicer/.gitignore b/examples/invoicer/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/invoicer/README.md b/examples/invoicer/README.md
@@ -0,0 +1,43 @@
+<div align="center" style="margin: 30px;">
+<a href="https://refine.dev/">
+  <img alt="refine logo" src="https://refine.ams3.cdn.digitaloceanspaces.com/readme/refine-readme-banner.png">
+</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>
+</div>
+</div>
+
+</br>
+</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 this example on your local
+
+```bash
+npm create refine-app@latest -- --example invoicer
+```
+
+## Try this example on CodeSandbox
+
+<br/>
+
+[![Open invoicer example from refine](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/invoicer?view=preview&theme=dark&codemirror=1)
diff --git a/examples/invoicer/index.html b/examples/invoicer/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Web site created using refine" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200..800&display=swap"
+      rel="stylesheet"
+    />
+    <title>Refine Invoicer example</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm run dev` or `yarn dev`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/examples/invoicer/netlify.toml b/examples/invoicer/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+from = "/*"
+to = "/index.html"
+status = 404
diff --git a/examples/invoicer/package.json b/examples/invoicer/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "invoicer",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc && refine build",
+    "cypress": "cypress open -C ./cypress.config.ts",
+    "cypress:run": "cypress run -C ./cypress.config.ts",
+    "dev": "refine dev",
+    "preview": "refine start",
+    "refine": "refine"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@refinedev/antd": "^5.37.6",
+    "@refinedev/cli": "^2.16.29",
+    "@refinedev/core": "^4.49.0",
+    "@refinedev/devtools": "^1.1.37",
+    "@refinedev/react-router-v6": "^4.5.7",
+    "@refinedev/strapi-v4": "^6.0.4",
+    "antd": "5.16.5",
+    "antd-style": "^3.6.1",
+    "axios": "^1.6.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-input-mask": "^2.0.4",
+    "react-router-dom": "^6.8.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.16.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-input-mask": "^3.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vite-tsconfig-paths": "^4.2.1"
+  }
+}
diff --git a/examples/invoicer/public/favicon.ico b/examples/invoicer/public/favicon.ico
diff --git a/examples/invoicer/public/manifest.json b/examples/invoicer/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Refine invoicer example",
+  "name": "Refine invoicer example",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/examples/invoicer/sandbox.config.json b/examples/invoicer/sandbox.config.json
@@ -0,0 +1,8 @@
+{
+  "port": 5173,
+  "container": {
+    "node": 16,
+    "port": 5173,
+    "startScript": "dev"
+  }
+}
diff --git a/examples/invoicer/src/App.tsx b/examples/invoicer/src/App.tsx
@@ -0,0 +1,203 @@
+import { Authenticated, Refine } from "@refinedev/core";
+import {
+  useNotificationProvider,
+  ThemedLayoutV2,
+  ErrorComponent,
+  AuthPage,
+} from "@refinedev/antd";
+import routerProvider, {
+  NavigateToResource,
+  UnsavedChangesNotifier,
+  DocumentTitleHandler,
+  CatchAllNavigate,
+} from "@refinedev/react-router-v6";
+import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
+import { DevtoolsPanel, DevtoolsProvider } from "@refinedev/devtools";
+import { App as AntdApp } from "antd";
+import { Header } from "@/components/header";
+import { Logo } from "@/components/logo";
+import {
+  AccountsPageList,
+  AccountsPageCreate,
+  AccountsPageEdit,
+} from "@/pages/accounts";
+import {
+  ClientsPageList,
+  ClientsPageCreate,
+  ClientsPageEdit,
+} from "@/pages/clients";
+import {
+  InvoicePageList,
+  InvoicesPageCreate,
+  InvoicesPageShow,
+} from "@/pages/invoices";
+import { dataProvider } from "@/providers/data-provider";
+import { authProvider } from "@/providers/auth-provider";
+import { ConfigProvider } from "@/providers/config-provider";
+import "@refinedev/antd/dist/reset.css";
+import "./styles/custom.css";
+
+const App: React.FC = () => {
+  return (
+    <DevtoolsProvider>
+      <BrowserRouter>
+        <ConfigProvider>
+          <AntdApp>
+            <Refine
+              routerProvider={routerProvider}
+              authProvider={authProvider}
+              dataProvider={dataProvider}
+              resources={[
+                {
+                  name: "accounts",
+                  list: "/accounts",
+                  create: "/accounts/new",
+                  edit: "/accounts/:id/edit",
+                },
+                {
+                  name: "clients",
+                  list: "/clients",
+                  create: "/clients/new",
+                  edit: "/clients/:id/edit",
+                },
+                {
+                  name: "invoices",
+                  list: "/invoices",
+                  show: "/invoices/:id",
+                  create: "/invoices/new",
+                },
+              ]}
+              notificationProvider={useNotificationProvider}
+              options={{
+                syncWithLocation: true,
+                warnWhenUnsavedChanges: true,
+                breadcrumb: false,
+              }}
+            >
+              <Routes>
+                <Route
+                  element={
+                    <Authenticated
+                      key="authenticated-routes"
+                      fallback={<CatchAllNavigate to="/login" />}
+                    >
+                      <ThemedLayoutV2
+                        Header={() => <Header />}
+                        Sider={() => null}
+                      >
+                        <div
+                          style={{
+                            maxWidth: "1280px",
+                            padding: "24px",
+                            margin: "0 auto",
+                          }}
+                        >
+                          <Outlet />
+                        </div>
+                      </ThemedLayoutV2>
+                    </Authenticated>
+                  }
+                >
+                  <Route index element={<NavigateToResource />} />
+                  <Route
+                    path="/accounts"
+                    element={
+                      <AccountsPageList>
+                        <Outlet />
+                      </AccountsPageList>
+                    }
+                  >
+                    <Route index element={null} />
+                    <Route path="new" element={<AccountsPageCreate />} />
+                  </Route>
+                  <Route
+                    path="/accounts/:id/edit"
+                    element={<AccountsPageEdit />}
+                  />
+
+                  <Route
+                    path="/clients"
+                    element={
+                      <ClientsPageList>
+                        <Outlet />
+                      </ClientsPageList>
+                    }
+                  >
+                    <Route index element={null} />
+                    <Route path="new" element={<ClientsPageCreate />} />
+                  </Route>
+                  <Route
+                    path="/clients/:id/edit"
+                    element={<ClientsPageEdit />}
+                  />
+
+                  <Route path="/invoices">
+                    <Route index element={<InvoicePageList />} />
+                    <Route path="new" element={<InvoicesPageCreate />} />
+                    <Route path=":id" element={<InvoicesPageShow />} />
+                  </Route>
+
+                  <Route path="*" element={<ErrorComponent />} />
+                </Route>
+
+                <Route
+                  element={
+                    <Authenticated key="auth-pages" fallback={<Outlet />}>
+                      <NavigateToResource />
+                    </Authenticated>
+                  }
+                >
+                  <Route
+                    path="/login"
+                    element={
+                      <AuthPage
+                        type="login"
+                        registerLink={false}
+                        forgotPasswordLink={false}
+                        title={
+                          <Logo
+                            titleProps={{ level: 2 }}
+                            svgProps={{
+                              width: "48px",
+                              height: "40px",
+                            }}
+                          />
+                        }
+                        formProps={{
+                          initialValues: {
+                            email: "[email protected]",
+                            password: "demodemo",
+                          },
+                        }}
+                      />
+                    }
+                  />
+                </Route>
+
+                <Route
+                  element={
+                    <Authenticated key="catch-all">
+                      <ThemedLayoutV2
+                        Header={() => <Header />}
+                        Sider={() => null}
+                      >
+                        <Outlet />
+                      </ThemedLayoutV2>
+                    </Authenticated>
+                  }
+                >
+                  <Route path="*" element={<ErrorComponent />} />
+                </Route>
+              </Routes>
+              <UnsavedChangesNotifier />
+              <DocumentTitleHandler />
+            </Refine>
+          </AntdApp>
+        </ConfigProvider>
+        <DevtoolsPanel />
+      </BrowserRouter>
+    </DevtoolsProvider>
+  );
+};
+
+export default App;