Implement multiple services support

Author: silvioprog

README.md

@@ -4,8 +4,9 @@
 
 Invoice generator for Google Chrome and Microsoft Edge.
 
-[![Screen shot 01][screenshot-01-url]][web-store-url]
-[![Screen shot 02][screenshot-02-url]][web-store-url]
+[![Screenshot 01][screenshot-01-url]][web-store-url]
+[![Screenshot 02][screenshot-02-url]][web-store-url]
+[![Screenshot 03][screenshot-03-url]][web-store-url]
 
 ## Installation
 
@@ -45,13 +46,14 @@ yarn dev
 - [x] Export/import options
 - [x] CI/CD
 - [ ] Tests
-- [ ] Multiple services
+- [x] Multiple services
 - [ ] Invoice reminder
 - [ ] Invoice expression
 
 [web-store-url]: https://chrome.google.com/webstore/detail/invoice-generator/obdabdocagpfclncklefebhhgggkbbnk 'Invoice generator Web Store'
-[screenshot-01-url]: https://github.com/risoflora/invoice-generator/raw/master/contrib/screen-shot-1.png 'Invoice generator'
-[screenshot-02-url]: https://github.com/risoflora/invoice-generator/raw/master/contrib/screen-shot-2.png 'Invoice generator options'
+[screenshot-01-url]: https://github.com/risoflora/invoice-generator/raw/master/contrib/screenshot-01.png 'Invoice generator'
+[screenshot-02-url]: https://github.com/risoflora/invoice-generator/raw/master/contrib/screenshot-02.png 'Invoice generator items'
+[screenshot-03-url]: https://github.com/risoflora/invoice-generator/raw/master/contrib/screenshot-03.png 'Invoice generator options'
 [invoice-generator-logo-url]: https://github.com/risoflora/invoice-generator/raw/master/contrib/logo.png 'Invoice generator logo'
 [bootstrap-url]: https://github.com/twbs/bootstrap 'Bootstrap repository'
 [jspdf-url]: https://github.com/parallax/jsPDF 'jsPDF repository'

contrib/screen-shot-1.png

@@ -2,14 +2,15 @@
   "name": "invoice-generator",
   "description": "Invoice generator",
   "private": true,
-  "version": "2.0.0",
+  "version": "3.0.0",
   "scripts": {
     "dev": "tsc && vite build --watch",
     "build": "tsc && vite build"
   },
   "dependencies": {
     "bootstrap": "^5.1.3",
     "bootstrap-icons": "^1.8.3",
+    "deepmerge-ts": "^4.2.1",
     "jspdf": "^2.5.1",
     "react": "^18.2.0",
     "react-datepicker": "^4.8.0",

contrib/screen-shot-2.png

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+
+const Accordion: FunctionComponent<JSX.IntrinsicElements['div']> = ({ className, children, ...props }) => (
+  <div className={`accordion${className ? ` ${className}` : ''}`} {...props}>
+    {children}
+  </div>
+);
+
+export default Accordion;

contrib/screenshot-01.png

@@ -0,0 +1,13 @@
+.accordion-button:focus {
+  box-shadow: none !important;
+}
+
+.accordion-button:not(.collapsed) {
+  color: transparent !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.accordion-button:not(.collapsed):after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
+}

contrib/screenshot-02.png

@@ -0,0 +1,66 @@
+import { FunctionComponent, useRef, useState } from 'react';
+
+import { uuid } from '../core/utils';
+
+import './AccordionItem.scss';
+
+type Props = {
+  ownerSelector: string;
+  title: string;
+  titleClassName?: string;
+  bodyClassName?: string;
+  expanded?: boolean;
+};
+
+const AccordionItem: FunctionComponent<Props & JSX.IntrinsicElements['div']> = ({
+  className,
+  title,
+  titleClassName,
+  bodyClassName,
+  expanded,
+  ownerSelector,
+  children,
+  ...props
+}) => {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const id = uuid();
+  const headingTag = `heading-${id}`;
+  const collapseTag = `collapse-${id}`;
+  const owner = window.document.querySelector(ownerSelector);
+  const [isExpanded, setIsExpanded] = useState(expanded);
+
+  const isShown = () => !!elementRef?.current?.classList.contains('show');
+
+  if (owner) {
+    owner.addEventListener('shown.bs.collapse', () => setIsExpanded(isShown()));
+    owner.addEventListener('hidden.bs.collapse', () => setIsExpanded(isShown()));
+  }
+
+  return (
+    <div className={`accordion-item${className ? ` ${className}` : ''}`} {...props}>
+      <h2 className="accordion-header" id={headingTag}>
+        <button
+          className={`accordion-button${isExpanded ? '' : ' collapsed'}${titleClassName ? ` ${titleClassName}` : ''}`}
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target={`#${collapseTag}`}
+          aria-expanded={isExpanded ? 'true' : 'false'}
+          aria-controls={collapseTag}
+        >
+          {title && <strong className="text-black-50">{title}</strong>}
+        </button>
+      </h2>
+      <div
+        ref={elementRef}
+        id={collapseTag}
+        className={`accordion-collapse collapse${isExpanded ? ' show' : ''}`}
+        aria-labelledby={headingTag}
+        data-bs-parent={ownerSelector}
+      >
+        <div className={`accordion-body px-1 py-2${bodyClassName ? ` ${bodyClassName}` : ''}`}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default AccordionItem;