Merge pull request #13 from lolocompany/publish-updates

NPM built Package for RAL, v2.0.1

.babelrc

@@ -1,17 +1,4 @@
-
 {
-  "plugins": [
-    "@babel/plugin-proposal-export-default-from"
-  ],
-  "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "node": "current"
-          }
-        }
-      ],
-      "@babel/preset-react"
-  ]
-}
+  "plugins": ["@babel/plugin-proposal-export-default-from", "@babel/plugin-transform-runtime"],
+  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }], "@babel/preset-react"]
+}

.github/workflows/npm-publish.yml

@@ -0,0 +1,33 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - run: npm ci
+      - run: npm test -- --passWithNoTests
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -1,3 +1 @@
-*.log
-node_modules
-package-lock.json
+node_modules

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+package-lock.json

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "arrowParens": "avoid"
+}

README.md

@@ -1,75 +1,117 @@
 # react-admin-lolo
-A library for schema-driven web apps using [Lolo](https://lolo.company), [React Admin](https://github.com/marmelab/react-admin) and [RJSF](https://github.com/rjsf-team/react-jsonschema-form)
-
-## Usage
-````
-npx create-react-app movie-app
-cd movie-app
-npm install react-admin react-admin-import-csv \
-	@rjsf/core @rjsf/material-ui aws-amplify @aws-amplify/ui-react \
-	lolocompany/react-admin-lolo
-````
-
-````javascript
+A Library for schema-driven web apps using [Lolo](https://lolo.company), [React Admin](https://github.com/marmelab/react-admin) and [RJSF](https://github.com/rjsf-team/react-jsonschema-form) at core.
+
+From **Create, Read, Update, Delete** operations to more complex implementations such as Graphs, Autocomplete widgets and Map Integrations are **schema driven**. 
+
+That is, *As Schema changes, the View, Components, Widgets change and operate accordingly.* 
+
+## Installation
+Create a new React app using custom configurations or create-react-app
+```
+npx create-react-app my-example-app
+```
+
+react-admin-lolo is available via npm as [Lolo](https://lolo.company) Org scoped publicly  available package. You can install it using:
+```
+npm install --save @lolocompany/react-admin-lolo
+```
+### Note:
+react-admin-lolo requires a few dependencies to be installed along with it to operate as expected.
+ - @aws-amplify/ui-react:  >=1.0.0
+ - aws-amplify:  >=3.0.0
+ - react-admin:  >=3.0.0
+ - react-admin-import-csv:  >=1.0.0
+```
+npm install --save @aws-amplify/ui-react aws-amplify react-admin react-admin-import-csv
+```
+## Documentation
+
+### Implementation
+To generate base Layout, Menu, AppBar and Dashboard view out of the box, include the following code in your React App, `App.js` file. 
+```javascript
 // in App.js
-import React from "react";
-import { LoloAdmin, LoloResource } from 'react-admin-lolo';
 
-const App = () => (
-  <LoloAdmin apiUrl={process.env.REACT_APP_API_URL}>
-    <LoloResource name='movies' />
-    <LoloResource name='directors' />
-  </LoloAdmin>
-);
+import React from  'react';
+import  {  LoloAdmin,  LoloResource  }  from  '@lolocompany/react-admin-lolo';
+import { Layout } from './Layout'
+
+function App() {
+  return (
+    <LoloAdmin
+      apiUrl={process.env.REACT_APP_API_URL}
+      title='My Admin'
+      dashboard={() => <h1>Dashboard Panel!</h1>}
+      layout={Layout}
+    >
+      <LoloResource
+        name='directors'
+      />
+      <LoloResource
+        name='movies'
+      />
+    </LoloAdmin>
+  );
+}
 
 export default App;
-````
+```
 
-## Customizing
+### Customizing
 
-### Override Props
+#### Override Props
 
 LoloResource supports the same override props as react-admin [Resource](https://marmelab.com/react-admin/Resource.html#the-resource-component). So for example, to customize the side menu icon and list view for directors:
 
-````javascript
-import UserIcon from '@material-ui/icons/People';
-import MyList from './MyList';
 
-<LoloResource name='directors' icon={UserIcon} list={MyList} />
-````
+```javascript
+import UserIcon from  '@material-ui/icons/People';
+import MyList from  './MyList';
+
+<LoloResource  name='directors'  icon={UserIcon} list={MyList} />;
+
+```
 
-### Schema Transforms
+#### Schema Transforms
 
 Schema transform functions help you manipulate the schema that is fetched from the respective resource's schema API. Each function recieves following values as arguments `transform(writableSchema, pristineSchema, selectedAccount)` where in:
-- `writableSchema`: Manipulated schema with updated/removed properties
-- `pristineSchema`: Original schema recieved from the resource's schema API
-- `selectedAccount`: Current account selected for the panel
+
+-  `writableSchema`: Manipulated schema with updated/removed properties
+
+-  `pristineSchema`: Original schema recieved from the resource's schema API
+
+-  `selectedAccount`: Current account selected for the panel
+
 
 The `LoloResource` component accepts the following schema tranform functions as props:
 
-- `listSchemaTransform`: Manipulates the `List` component schema. It helps in displaying selected fields on the table list. For Example, the following will only display *ID* and *Name* on the enterprise table:
+-  `listSchemaTransform`: Manipulates the `List` component schema. It helps in displaying selected fields on the table list. For Example, the following will only display _ID_ and _Name_ on the enterprise table:
 
 ```javascript
 <LoloResource
-  name='enterprises'
-  listSchemaTransform={({properties, ...rest}, pristineSchema, selectedAccount) => {
-    const {id, name} = properties
-    return {
+  name="enterprises"
+  listSchemaTransform={({ properties,  ...rest }, pristineSchema, selectedAccount)  =>  {
+    const  {  id,  name  }  =  properties;
+    return  {
       ...rest,
-      properties: {id, name}
-    }
-  }} />
+      properties:  {  id,  name  },
+    };
+  }}
+/>
 ```
 
-- `createSchemaTransform`: Manipulates the `Create` component schema. For Example, the following will add an extra field *customId* on the create form with a read only property:
-
+-  `createSchemaTransform`: Manipulates the `Create` component schema. For Example, the following will add an extra field _customId_ on the create form with a read only property:
+  
 ```javascript
-<LoloResource createSchemaTransform={(writableSchema, pristineSchema, selectedAccount) => ({...writableSchema, customId: {type: 'string', readOnly: true}})} />
-```
+<LoloResource
+  createSchemaTransform={(writableSchema, pristineSchema, selectedAccount)  => ({
+    ...writableSchema,
+    customId:  {  type:  'string',  readOnly:  true  },
+  })}
+/>
+```  
 
-- `editSchemaTransform`: Manipulates the `Edit` component schema. For Example, the following will add an extra field *customId* on the edit form:
+-  `editSchemaTransform`: Manipulates the `Edit` component schema. For Example, the following will add an extra field _customId_ on the edit form:
 
 ```javascript
-<LoloResource editSchemaTransform={(writableSchema, pristineSchema, selectedAccount) => ({...writableSchema, customId: {type: 'string'}}})} />
-```
-
+<LoloResource  editSchemaTransform={(writableSchema, pristineSchema, selectedAccount)  => ({...writableSchema, customId:  {type:  'string'}})} />
+```