Merge pull request #35 from Adyen/feature/add-configuration-options

Add configuration options

.eslintrc.cjs

@@ -1,11 +1,12 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
-  plugins: ['react', '@typescript-eslint', 'import', 'jsx-a11y'],
+  plugins: ['react', '@typescript-eslint', 'import', 'jsx-a11y', 'simple-import-sort', 'prettier'],
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended' /*'prettier/@typescript-eslint'*/,
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
   ],
   parserOptions: {
     ecmaVersion: 2020,
@@ -86,6 +87,12 @@ module.exports = {
     // the base rule can report incorrect errors
     'no-useless-constructor': 'off',
 
+    // simple-import-sort
+    'import/order': 'off', // must be off for simple-import-sort to work
+    'simple-import-sort/exports': 'error',
+    'simple-import-sort/imports': 'error',
+    'sort-imports': 'off', // must be off for simple-import-sort to work
+
     // Typescript Rules
     '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true, vars: 'local' }],
     '@typescript-eslint/explicit-member-accessibility': 'off',

.git-blame-ignore-revs

@@ -1,2 +1,5 @@
 # Change tab width to 2
-65c4ba06306fe0b1dedab4a8ae11e769305727c9
+65c4ba06306fe0b1dedab4a8ae11e769305727c9
+
+# Run eslint and prettier fix on project files
+cbdd2259fdc4220ccbb376ac488806e72f175a1e

README.md

@@ -47,6 +47,26 @@ Include the script and stylesheet to a `.html` file
    documentViewer.render(document);
    ```
 
+## Configuration Options
+
+You can customize the behavior of `AdyenDocumentViewer` by passing options during initialization.
+
+| Option            | Description                                             | Default     |
+| ----------------- | ------------------------------------------------------- | ----------- |
+| `onExpandSection` | Callback function triggered when a section is expanded. | `undefined` |
+| `multiple`        | Allow multiple sections to be expanded simultaneously.  | `false`     |
+
+You can provide an object with the options as the second parameter when creating an instance of `AdyenDocumentViewer`:
+
+```js
+const options = {
+  onExpandSection: (sectionTitle) => console.log(`Section ${sectionTitle} expanded`),
+  multiple: true,
+};
+
+const documentViewer = new AdyenDocumentViewer('#test', options);
+```
+
 ## Styling
 
 Adyen Document Viewer is themeable and uses CSS variables that can be overridden in order to achieve the desired style. Overrides should be added for `.adyen-document-viewer` class.

package.json

@@ -7,7 +7,7 @@
     "viewer",
     "adyen-document-viewer"
   ],
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Adyen Document Viewer",
   "main": "./dist/adyen-document-viewer.min.js",
   "module": "./dist/adyen-document-viewer.min.mjs",
@@ -18,6 +18,9 @@
     "build": "vite build && npm run types:build",
     "lint": "eslint 'src/**/*.{js,ts,tsx}'",
     "lint:fix": "npm run lint -- --fix",
+    "prettier": "prettier --config ./prettier.config.js --ignore-unknown --check \"**/*\"",
+    "prettier:fix": "prettier --config ./prettier.config.js --ignore-unknown --write \"**/*\"",
+    "fix:all": "npm run prettier:fix && npm run lint:fix",
     "types:build": "tsc --project tsconfig-build.json",
     "types:check": "tsc && tsc-strict",
     "types:watch": "tsc --watch --preserveWatchOutput"
@@ -33,6 +36,9 @@
     "eslint": "^8.12.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "prettier": "3.2.4",
@@ -45,7 +51,7 @@
     "typescript-strict-plugin": "^2.2.0",
     "vite": "^4.5.1"
   },
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/Adyen/adyen-document-viewer.git"

playground/example.js

@@ -1,6 +1,11 @@
 import 'preact/debug';
+
 import AdyenDocumentViewer from '../src/index';
 import exampleDocument from './mock-data';
 
-const documentViewer = new AdyenDocumentViewer('#document-viewer');
+const documentViewer = new AdyenDocumentViewer('#document-viewer', {
+  onExpandSection: (sectionTitle) => console.log(`${sectionTitle} expanded`),
+  multiple: false,
+});
+
 documentViewer.render(exampleDocument);