Refactor auth and init README

README.md

@@ -0,0 +1,110 @@
+# Refine providers for NextGraph
+
+Data, auth and live providers that can be used in any Refine application 
+
+## Usage
+
+> For a quick overview, have a look at our [example app](./examples/antd-app/).
+
+### 1. Define your shapes
+
+Refine relies on the concept of "resources", which are data types, to manage your application in a structured way. NextGraph identifies data types using ShEx shapes which are transformed into "shape types" using [its own tool](https://docs.nextgraph.org/en/reference/shex-orm/).
+
+Create a `/shapes` directory and, within it, create two subdirectories: `/shex` and `/orm`
+
+Within the `/shapes/shex` directory, create a ShEx file with the shape of the data you want to handle. 
+
+Here's an example of a shape for an ActivityStreams Note:
+
+````shex
+PREFIX as: <https://www.w3.org/ns/activitystreams#>
+PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+
+as:Note {
+  a [as:Note] ;
+  as:title xsd:string ;
+  as:content xsd:string ? ;
+}
+````
+
+### 2. Pass the shape types to the data provider
+
+Go to the `/shapes` directory and run the following command:
+
+```bash
+npx rdf-orm build --input ./shex --output ./orm
+```
+
+This will generate three files in the `/orm` subdirectory:
+
+- `note.schema.ts`
+- `note.shapeTypes.ts`
+- `note.typings.ts`
+
+Now within the `shapes` directory, create a `shapeTypes.ts` like this:
+
+```ts
+import { ShapeTypes } from "@ng-org/refine-providers";
+import { NoteShapeType } from "./orm/note.shapeTypes";
+
+const shapeTypes : ShapeTypes = {
+  notes: NoteShapeType
+}
+
+export default shapeTypes;
+```
+
+### 3. Add the providers to Refine
+
+```ts
+import { authProvider, dataProvider, liveProvider } from "@ng-org/refine-providers";
+import shapeTypes from "./shapes/shapeTypes";
+
+const ngAuthProvider = authProvider();
+const ngDataProvider = dataProvider({ shapeTypes, authProvider: ngAuthProvider })
+const ngLiveProvider = liveProvider({ shapeTypes })
+
+const App = () => (
+  <Refine
+    authProvider={ngAuthProvider}
+    dataProvider={ngDataProvider}
+    liveProvider={ngLiveProvider}
+    options={{ liveMode: "auto", ... }}
+    ...
+  >
+  ...
+```
+
+### 4. Create the React pages
+
+You can now call the various hooks provided by Refine to create, read, update or delete resources.
+
+For `useForm`, `useTable`, `useShow`, you can pass the `Note` generated by NextGraph CLI.
+
+Here's an example of a simple list view:
+
+```ts
+import { List, useTable } from "@refinedev/antd";
+import { Table } from "antd";
+import { Note } from "./shapes/orm/notes.typings";
+
+export const PostList = () => {
+  const { tableProps } = useTable<Note>();
+  return (
+    <List>
+      <Table {...tableProps} owKey="@graph">
+        <Table.Column dataIndex="@graph" title="ID" />
+        <Table.Column dataIndex="title" title="Title" />
+        <Table.Column dataIndex="content" title="Content" />
+      </Table>
+    </List>
+  );
+};
+```
+
+## Commands
+
+```
+pnpm build
+pnpm watch
+```