@joyfill/components 1.0.0-rc.1.0.0

package/README.md

@@ -0,0 +1,84 @@
+## Install
+
+`npm install @joyfill/components`
+or
+`yarn add @joyfill/components`
+
+## Getting Started
+
+Head over to [Joyfill developer docs](https://joyfill.readme.io/docs/quick-start) to learn more, find guided tutorials and much more.
+
+## Usage
+
+```
+
+import { JoyDoc } from '@joyfill/components';
+
+const App = () => {
+  return (
+    <JoyDoc
+      mode="edit"
+      onChange={(params, changes, doc) => console.log(params, changes, doc)}
+    />
+  );
+}
+
+```
+
+## JoyDoc Properties
+
+* `mode: 'edit' | 'fill' | 'readonly'`
+  * **Required***
+  * Enables and disables certain JoyDoc functionality and features. 
+  * Options
+    * `edit` is the mode where the form/pdf is desinged, styled, and configured.
+    * `fill` is the mode where you simply input the field data into the built form/pdf.
+    * `readonly` is the mode where everything is locked down and you're simply viewing the form/pdf and the inputed data.
+* `doc: object`
+  * The default JoyDoc JSON starting object to load into the component view. Must be in the JoyDoc JSON data structure.
+* `fieldOptions: [object, ...]`
+  * Overwrite the list of field options that can be dragged and dropped on the form/pdf.
+  * Field option objects can have any JoyDoc JSON property. Any property set will be used as the new field defaults when dragged and dropped to the form/pdf.
+* `fieldSettings: object`
+  * Enable and disable default file, page, and field settings. You can also add your own custom metadata settings components to the UI. 
+  * Head over to the [developer docs](https://joyfill.readme.io/docs/quick-start) to learn more about customizing settings.
+* `onChange: (params: object, changes: object, doc: object) => {}` 
+  * Used to listen to any changes to the style, layout, values, etc. across all modes.
+  * `params: object`
+    * `target: ('file' | 'page' | 'field')` Determines the object within the doc (JoyDoc JSON structure) that was targeted with the change event.
+    * `fileId` The id of the file that the change happened.
+    * `pageId` The id of the page that the change happened.
+    * `fieldId` The id of the field that the change happened.
+    * `fieldIdentifier` The custom id of the field that the change happened.
+  * `changes: object`
+    * Can contain any of the JoyDoc JSON structure supported properties.
+  * `doc: object`
+    * Fully updated doc (JoyDoc JSON structure) after all changes have been applied.
+* `onUploadAsync: (params: object, fileUploads) => Promise` 
+  * **Required,** if you want to support PDF uploads, page backgrounds, and image fields.
+  * Must return a promise that will resolve to `{ url: string }`. 
+    * `url` must be a valid image url or image base64 uri.
+  * Utilize this handler to upload images for fields, page backgrounds, etc. to your own asset hosting service.
+  * `params: object`
+    * `target: ('file' | 'page' | 'field')` Determines the object within the doc (JoyDoc JSON structure) that was targeted with the change event.
+    * `fileId` The id of the file that the change happened.
+    * `pageId` The id of the page that the change happened.
+    * `fieldId` The id of the field that the change happened.
+    * `fieldIdentifier` The custom id of the field that the change happened.
+
+
+## Contributing
+
+**Environment Versions**
+
+* Module manage `yarn`
+* Node version `18+`
+
+**Commands**
+
+* Run Tests `yarn run test`
+* Coverage Report `yarn run coverage`
+* Auto Fix Linting Errors `yarn run lint-fix`
+* See Linting Linting `yarn run lint` 
+* Generate Visual Coverage Report `yarn coverage-report -- filename`
+