Merge pull request #15 from beforesemicolon/#7

simplify and improve store experience and coverage

.npmignore

@@ -11,7 +11,7 @@
 *.sw?
 src
 tsconfig.json
-docs
+documentation
 **.tgz
 **/*.spec.ts
 coverage

README.md

@@ -1,8 +1,91 @@
 # Client Web Storage
-Browser storage interface for IndexedDB, WebSQL, LocalStorage, and in memory data with basic Schema and data validation.
+Powerful Web Application Data Storage and State Management Solution.
 
 [![npm](https://img.shields.io/npm/v/client-web-storage)](https://www.npmjs.com/package/client-web-storage)
 
+- Same simple API for [IndexedDB](), [LocalStorage](), [WebSQL](), and in-memory data storage;
+- Event driven and asynchronous;
+- Automatic data validation done at the store level - ***Guarantees that all data fields are of the right type and exists with configurable automatic defaults;***
+- No actions or reducers setup needed - ***The easiest store to configure ever***;
+- Easy setup for Client-Server data synchronization using [interceptors]();
+- **NOT UI framework specific!** Works with any UI Framework (React, Angular, VueJs, etc) - ***Take your storage setup with you when you migrate to a different framework and eliminate the need to learn a new state management solution for your app.***
+- Easy to maintain and perform all data logic and fetching away from your components - ***Keep data concerns away from UI side of your app;***
+- Highly and easily configurable;
+- Easy to tap into any store events to perform side effect logic;
+
+## Documentation
+
+[Documentation](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/docs.md)
+
+#### Application Examples
+- [React](https://github.com/beforesemicolon/client-web-storage-project-examples/tree/main/react);
+- [Angular](https://github.com/beforesemicolon/client-web-storage-project-examples/tree/main/angular);
+
+[-- Check them All ---](https://github.com/beforesemicolon/client-web-storage-project-examples)
+
+#### API References
+- **[ClientStore](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/api-references/ClientStore.md)**
+- **[Schema](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/api-references/Schema.md)**
+- **[SchemaValue](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/api-references/SchemaValue.md)**
+
+## Quick Example
+
+```ts
+// todo.store.ts
+
+import {ClientStore} from "client-web-storage";
+
+interface ToDo {
+    name: string;
+    description: string;
+    complete: boolean;
+}
+
+// create a store providing the name and schema object
+// with default values or javasctipt types
+const todoStore = new ClientStore<ToDo>("todo", {
+    $name: String,
+    description: "No Description",
+    complete: false
+});
+```
+
+Works with any web library or framework. Here is an example using React.
+
+```ts
+// app.tsx
+
+import {useClientStore} from "client-web-storage/helpers/use-client-store";
+import {todoStore} from "./stores/todo.store";
+import FlatList from "flatlist-react";
+
+const App = () => {
+    const {items, processing, error} = useClientStore<Todo>(todoStore);
+
+    if(processing) {
+        return <Spinner />
+    }
+
+    if(error) {
+        return <p className="error">{error.message}</p>
+    }
+
+    const handleCreatItem = async () => {
+        await todoStore.createItem({
+            // only name is required (marked with $), the store will auto fill the other fields with defaults
+            name: "Go to Gym" 
+        });
+    }
+
+    return (
+        <>
+            <button type="button" onClick={handleCreatItem}>create todo</button>
+            <FlatList list={items} renderItem={renderTodo}/>
+        </>
+    )
+}
+```
+
 ## Installation
 
 ### In Node Projects:
@@ -25,48 +108,8 @@ import {Schema, ClientStore} from "client-web-storage";
 <script src="https://unpkg.com/client-web-storage@1.0.0/dist/client-web-storage.min.js"></script>
 ```
 
-```js
-const {Schema, ClientStore} = window.CWS;
-```
-
-## Get Started
-The library is very small but super powerful. There are only few things to interact with:
-- **[Schema](https://github.com/beforesemicolon/client-web-storage/blob/main/docs/Schema.md)** : Determines how the data looks like;
-- **[SchemaValue](https://github.com/beforesemicolon/client-web-storage/blob/main/docs/SchemaValue.md)** : Creates a single value in the schema;
-- **[ClientStore](https://github.com/beforesemicolon/client-web-storage/blob/main/docs/ClientStore.md)** : Manages the data (CRUD);
-
-```ts
-// Define schema TS type
-import {ClientStore, Schema} from "client-web-storage";
-
-interface ToDo extends Schema.DefaultValue {
-    name: string;
-    description: string;
-    complete: boolean;
-}
-
-// create and define schema
-const todoSchema = new Schema<ToDo>("todo");
-
-todoSchema.defineField("name", String, {required: true});
-todoSchema.defineField("description", String, "No Description");
-todoSchema.defineField("complete", Boolean);
-
-// create and use the store
-const todoStore = new ClientStore("todos", todoSchema);
-
-todoStore.createItem({
-    name: "Go to Gym" // only name is required
-});
-
-/*  Creates item in the store
-{
-  id: "123e4567-e89b-12d3-a456-426614174000", // generated id
-  name: "Go to Gym",
-  description: "No Description",
-  complete: false,
-  createdDate: "January, 4th 2022",
-  lastUpdatedDate: "January, 4th 2022",
-}
-*/
+```html
+<script>
+  const {Schema, ClientStore} = window.CWS;
+</script>
 ```