Initial commit

Author: djhi

.gitignore

@@ -0,0 +1,8 @@
+npm-debug.log
+yarn-error.log
+lerna-debug.log
+node_modules
+lib
+esm
+es6
+node_modules

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-present, Francois Zaninotto, Marmelab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,62 @@
 # ra-supabase
+
+Supabase Data Provider for [react-admin](https://github.com/marmelab/react-admin), the frontend framework for building admin applications on top of REST/GraphQL services.
+
+## Installation
+
+```sh
+npm install --save ra-supabase
+```
+
+## Usage
+
+```jsx
+import { createClient } from "@supabase/supabase-js";
+import { supabaseDataProvider } from "ra-supabase";
+
+const SUPABASE_URL = "";
+const SUPABASE_ANON_KEY = "";
+
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+const resources = {
+  // Define the resource by passing its fields as an array
+  posts: ["id", "title", "created_at"],
+  // Or as an object
+  tags: {
+    fields: ["id", "name", "created_at"],
+    // This allows you to customize on which fields react-admin will do a full-text search
+    fullTextSearchFields: ["name"],
+  },
+};
+
+export const dataProvider = supabaseDataProvider(supabase, resources);
+```
+
+## Resources Configuration
+
+Supabase requires a list of fields to query. This is why you have to provide the supported resources and their fields.
+
+You can define the resources as a simple array of field names:
+
+```jsx
+const resources = {
+  posts: ["id", "title", "created_at"],
+};
+```
+
+However, you might want to support `q` filters for [full text search](https://marmelab.com/react-admin/List.html#full-text-search) accross multiple fields. To ensure you don't try to apply a full text search on incompatible fields, you may want to define them:
+
+```jsx
+const resources = {
+  tags: {
+    fields: ["id", "name", "created_at"],
+    fullTextSearchFields: ["name"],
+  },
+};
+```
+
+## Roadmap
+
+- [ ] Add an authProvider with configurable support for supabase authentication methods
+- [ ] Add support for proper fulltext search https://supabase.io/docs/reference/javascript/textsearch

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "ra-supabase",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "git@github.com:marmelab/ra-supabase.git",
+  "author": "Gildas Garcia <1122076+djhi@users.noreply.github.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@supabase/supabase-js": "^1.15.1",
+    "ra-core": "^3.16.2"
+  },
+  "devDependencies": {
+    "eslint": "^7.7.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-cypress": "^2.11.1",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.0",
+    "husky": "^2.3.0",
+    "jest": "26.6.0",
+    "prettier": "~2.1.1",
+    "typescript": "^4.3.4"
+  },
+  "scripts": {
+    "build": "",
+    "test": "",
+    "lint": "eslint --fix ./src"
+  }
+}

src/dataProvider.ts

@@ -0,0 +1,150 @@
+import { DataProvider } from "ra-core";
+import { SupabaseClient } from "@supabase/supabase-js";
+
+export const supabaseDataProvider = (
+  client: SupabaseClient,
+  resources: ResourcesOptions
+): DataProvider => ({
+  getList: async (resource, params) => {
+    const {
+      pagination,
+      sort,
+      filter: { q, ...filter },
+    } = params;
+
+    const resourceOptions = resources[resource];
+    const fields = Array.isArray(resourceOptions)
+      ? resourceOptions
+      : resourceOptions.fields;
+
+    const rangeFrom = (pagination.page - 1) * pagination.perPage;
+    const rangeTo = rangeFrom + pagination.perPage;
+
+    let query = client
+      .from(resource)
+      .select(fields.join(", "), { count: "exact" })
+      .order(sort.field, { ascending: sort.order === "ASC" })
+      .match(filter)
+      .range(rangeFrom, rangeTo);
+
+    if (q) {
+      const fullTextSearchFields = Array.isArray(resourceOptions)
+        ? resourceOptions
+        : resourceOptions.fullTextSearchFields;
+
+      query = query.or(
+        fullTextSearchFields.map((field) => `${field}.ilike.%${q}%`).join(",")
+      );
+    }
+
+    const { data, error, count } = await query;
+
+    if (error) {
+      throw error;
+    }
+    return { data: data ?? [], total: count ?? 0 };
+  },
+  getOne: async (resource, { id }) => {
+    const resourceOptions = resources[resource];
+    const fields = Array.isArray(resourceOptions)
+      ? resourceOptions
+      : resourceOptions.fields;
+
+    const { data, error } = await client
+      .from(resource)
+      .select(fields.join(", "))
+      .match({ id })
+      .single();
+
+    if (error) {
+      throw error;
+    }
+    return { data };
+  },
+  getMany: async (resource, { ids }) => {
+    const resourceOptions = resources[resource];
+    const fields = Array.isArray(resourceOptions)
+      ? resourceOptions
+      : resourceOptions.fields;
+
+    const { data, error } = await client
+      .from(resource)
+      .select(fields.join(", "))
+      .in("id", ids);
+
+    if (error) {
+      throw error;
+    }
+    return { data: data ?? [] };
+  },
+  getManyReference: async (
+    resource,
+    { target, id, pagination, filter, sort }
+  ) => {
+    return { data: [], total: 0 };
+  },
+  create: async (resource, { data }) => {
+    const { data: record, error } = await client
+      .from(resource)
+      .insert(data)
+      .single();
+
+    if (error) {
+      throw error;
+    }
+    return { data: record };
+  },
+  update: async (resource, { id, data }) => {
+    const { data: record, error } = await client
+      .from(resource)
+      .update(data)
+      .match({ id })
+      .single();
+
+    if (error) {
+      throw error;
+    }
+    return { data: record };
+  },
+  updateMany: async (resource, { ids, data }) => {
+    const { data: records, error } = await client
+      .from(resource)
+      .update(data)
+      .in("id", ids);
+
+    if (error) {
+      throw error;
+    }
+    return { data: records?.map((record) => record.id) };
+  },
+  delete: async (resource, { id }) => {
+    const { data: record, error } = await client
+      .from(resource)
+      .delete()
+      .match({ id })
+      .single();
+
+    if (error) {
+      throw error;
+    }
+    return { data: record };
+  },
+  deleteMany: async (resource, { ids }) => {
+    const { data: records, error } = await client
+      .from(resource)
+      .delete()
+      .match({ id: ids });
+
+    if (error) {
+      throw error;
+    }
+    return { data: records?.map((record) => record.id) };
+  },
+});
+
+type ResourceOptionsWithFullTextSearch = {
+  fields: string[];
+  fullTextSearchFields: string[];
+};
+export type ResourceOptions = string[] | ResourceOptionsWithFullTextSearch;
+export type ResourcesOptions = Record<string, ResourceOptions>;

tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "target": "ES5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+        "outDir": "lib",
+        "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+        "lib": [
+            "es2017",
+            "dom"
+        ] /* Specify library files to be included in the compilation. */,
+        "rootDir": "src",
+        "declaration": true,
+        "declarationMap": true,
+        "allowJs": false,
+        "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+        "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
+        "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
+        "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+        "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+        "skipLibCheck": true
+    },
+    "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js"],
+    "include": ["src"]
+}