design.estate/dees-document
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): Refactor project structure for better modularity and code organization

Browse Source
This commit is contained in:
Philipp Kunz
2024-12-02 16:04:58 +01:00
parent bab1ffc4b4
commit c9ad18538b
30 changed files with 100 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -1,5 +1,12 @@
# Changelog
## 2024-12-02 - 1.5.0 - feat(core)
Refactor project structure for better modularity and code organization
- Moved shared components to a dedicated 'dist_ts_shared' directory for better separation of concerns.
- Updated import statements across the codebase to align with the new file structure.
- Introduced translations directly under 'ts_shared' for language-specific string management.
## 2024-12-02 - 1.4.0 - feat(translation)
Add French and Italian translations for document interface

6
package.json
View File

@@ -6,8 +6,10 @@
"main": "dist_ts_web/index.js",
"typings": "dist_ts_web/index.d.ts",
"exports": {
"./ts": "./dist_ts/index.js",
"./ts_web": "./dist_ts_web/index.js"
".": "./dist_ts/index.js",
"./web": "./dist_ts_web/index.js",
"./shared": "./dist_ts_shared/index.js",
"./interfaces": "./dist_ts_shared/interfaces/index.js"
},
"scripts": {
"test": "npm run build && tstest test/",

2
test/test.ts
View File

@@ -1,6 +1,6 @@
import * as plugins from './plugins.js';
import * as paths from './paths.js';
import * as interfaces from '../ts/interfaces/index.js';
import * as interfaces from '../ts_shared/interfaces/index.js';
import { expect, tap } from '@push.rocks/tapbundle';
import * as deesDocumentServer from '../ts/index.js';

2
ts/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-document',
version: '1.4.0',
version: '1.5.0',
description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
}

3
ts/classes.pdfservice.ts
View File

@@ -1,6 +1,5 @@
import * as plugins from './plugins.js';
import * as helpers from './helpers.js';
import type { IDocumentSettings} from '../ts/interfaces/index.js';
export interface IPdfServiceConstructorOptions {
@@ -46,7 +45,7 @@ export class PdfService {
*/
public async createPdfFromLetterObject(optionsArg: {
letterData: plugins.tsclass.business.ILetter,
documentSettings: IDocumentSettings
documentSettings: plugins.shared.interfaces.IDocumentSettings
}) {
const html = `
<script type="module">

5
ts/plugins.ts
View File

@@ -5,6 +5,11 @@ export {
path
}
// dees-document scope
import * as shared from '../dist_ts_shared/index.js';
export { shared };
// @push.rocks/scope
import * as smartfile from '@push.rocks/smartfile';
import * as smartjson from '@push.rocks/smartjson';

3
ts/tspublish.json Normal file
View File

@@ -0,0 +1,3 @@
{
"order": 2
}

10
ts/shared/demoletter.ts → ts_shared/demoletter.ts
View File

@@ -1,7 +1,7 @@
import * as tsclass from '@tsclass/tsclass';
import * as interfaces from '../interfaces/index.js';
import * as plugins from './plugins.js';
import * as interfaces from './interfaces/index.js';
const fromContact: tsclass.business.IContact = {
const fromContact: plugins.tsclass.business.IContact = {
name: 'Awesome From Company',
type: 'company',
description: 'a company that does stuff',
@@ -23,7 +23,7 @@ const fromContact: tsclass.business.IContact = {
};
const toContact: tsclass.business.IContact = {
const toContact: plugins.tsclass.business.IContact = {
name: 'Awesome To GmbH',
type: 'company',
customerNumber: 'LL-CLIENT-123',
@@ -38,7 +38,7 @@ const toContact: tsclass.business.IContact = {
vatId: 'BE12345678',
}
export const demoLetter: tsclass.business.ILetter = {
export const demoLetter: plugins.tsclass.business.ILetter = {
versionInfo: {
type: 'draft',
version: '1.0.0',

3
ts/shared/index.ts → ts_shared/index.ts
View File

@@ -3,6 +3,9 @@ export const a4Width = 794;
export const rightMargin = 70;
export const leftMargin = 90;
import * as interfaces from './interfaces/index.js';
export { interfaces };
import * as translation from './translation.js';
export { translation };

4
ts/interfaces/document.ts → ts_shared/interfaces/document.ts
View File

@@ -1,8 +1,8 @@
import * as shared from '../shared/index.js';
import * as translation from '../translation.js';
export interface IDocumentSettings {
enableTopDraftText?: boolean;
enableDefaultHeader?: boolean;
enableDefaultFooter?: boolean;
languageCode?: shared.translation.TLanguageCode;
languageCode?: translation.TLanguageCode;
}

0
ts/interfaces/index.ts → ts_shared/interfaces/index.ts
View File

0
ts/interfaces/translation.ts → ts_shared/interfaces/translation.ts
View File

4
ts_shared/plugins.ts Normal file
View File

@@ -0,0 +1,4 @@
// tsclass scope
import * as tsclass from '@tsclass/tsclass';
export { tsclass };

2
ts/shared/translation.ts → ts_shared/translation.ts
View File

@@ -1,4 +1,4 @@
import * as interfaces from '../interfaces/index.js';
import * as interfaces from './interfaces/index.js';
type TTranslationImplementation = {
[key in keyof interfaces.IDeDocumentTranslations]: string;

3
ts_shared/tspublish.json Normal file
View File

@@ -0,0 +1,3 @@
{
"order": 1
}

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-document',
version: '1.4.0',
version: '1.5.0',
description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
}

18
ts_web/elements/contentinvoice.ts
View File

@@ -15,8 +15,6 @@ import {
domtools,
} from '@design.estate/dees-element';
import * as plugins from '../plugins.js';
import * as shared from '../../ts/shared/index.js';
import * as interfaces from '../../ts/interfaces/index.js';
declare global {
@@ -49,7 +47,7 @@ export class DeContentInvoice extends DeesElement {
type: Object,
reflect: true,
})
public documentSettings: interfaces.IDocumentSettings;
public documentSettings: plugins.shared.interfaces.IDocumentSettings;
constructor() {
super();
@@ -281,12 +279,12 @@ export class DeContentInvoice extends DeesElement {
</style>
<div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
<div class="grid topLine dataHeader">
<div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
<div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
<div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
<div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
<div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
<div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
<div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
<div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
<div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
<div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
<div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
<div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
</div>
${(() => {
let counter = 1;
@@ -335,7 +333,7 @@ export class DeContentInvoice extends DeesElement {
${this.letterData?.content.invoiceData.reverseCharge
? html`
<div class="taxNote">
${shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
${plugins.shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
</div>
`
: ``}

5
ts_web/elements/document.demo.ts
View File

@@ -1,6 +1,7 @@
import * as shared from '../../ts/shared/index.js';
import * as plugins from '../plugins.js';
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
<dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
<dedocument-dedocument .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-dedocument>
`;

7
ts_web/elements/document.ts
View File

@@ -10,11 +10,9 @@ import {
unsafeCSS,
domtools,
} from '@design.estate/dees-element';
import * as interfaces from '../../ts/interfaces/index.js';
import * as plugins from '../plugins.js';
export const defaultDocumentSettings: interfaces.IDocumentSettings = {
export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings = {
enableTopDraftText: true,
enableDefaultHeader: true,
enableDefaultFooter: true,
@@ -24,7 +22,6 @@ export const defaultDocumentSettings: interfaces.IDocumentSettings = {
import { DePage } from './page.js';
import { DeContentInvoice } from './contentinvoice.js';
import * as shared from '../../ts/shared/index.js';
import { demoFunc } from './document.demo.js';
declare global {
@@ -85,7 +82,7 @@ export class DeDocument extends DeesElement {
}
},
})
public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
constructor() {
super();

2
ts_web/elements/index.ts
View File

@@ -7,5 +7,3 @@ export * from './pagecontent.js';
export * from './pagefooter.js';
export * from './pageheader.js';
export * from './viewer.js';
export * from '../../ts/shared/index.js';

15
ts_web/elements/letterheader.ts
View File

@@ -7,11 +7,10 @@ import {
css,
cssManager,
unsafeCSS,
domtools,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import * as shared from '../../ts/shared/index.js';
import * as tsclass from '@tsclass/tsclass';
import * as plugins from '../plugins.js';
declare global {
interface HTMLElementTagNameMap {
@@ -22,14 +21,14 @@ declare global {
@customElement('dedocument-letterheader')
export class DeLetterHeader extends DeesElement {
public static demo = () => html`
<dedocument-letterheader .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-letterheader>
<dedocument-letterheader .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-letterheader>
`;
@property({
type: Object,
reflect: true
})
public letterData: tsclass.business.ILetter;
public letterData: plugins.tsclass.business.ILetter;
@property({
type: Number,
@@ -60,7 +59,7 @@ export class DeLetterHeader extends DeesElement {
display: block;
overflow: hidden;
top: 200px;
right: ${unsafeCSS(shared.rightMargin + 'px')};
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
width: 200px;
text-align: right;
}
@@ -74,14 +73,14 @@ export class DeLetterHeader extends DeesElement {
.date {
position: absolute;
top: 180px;
right: ${unsafeCSS(shared.rightMargin + 'px')};
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
text-align: right;
}
.address {
position: absolute;
top: 180px;
left: ${unsafeCSS(shared.leftMargin + 'px')};
left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
}
.address .from {

12
ts_web/elements/page.ts
View File

@@ -11,12 +11,10 @@ import {
domtools,
} from '@design.estate/dees-element';
import * as interfaces from '../../ts/interfaces/index.js';
import * as plugins from '../plugins.js';
import { defaultDocumentSettings } from './document.js';
import * as shared from '../../ts/shared/index.js';
declare global {
interface HTMLElementTagNameMap {
'dedocument-page': DePage;
@@ -67,7 +65,7 @@ export class DePage extends DeesElement {
type: Object,
reflect: true,
})
public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
constructor() {
super();
@@ -204,9 +202,9 @@ export class DePage extends DeesElement {
let scale = 1;
if (this.viewHeight) {
scale = this.viewHeight / shared.a4Height;
scale = this.viewHeight / plugins.shared.a4Height;
} else if (this.viewWidth) {
scale = this.viewWidth / shared.a4Width;
scale = this.viewWidth / plugins.shared.a4Width;
}
console.log(`new scale is ${scale}`);
scaleWrapper.style.transform = `scale(${scale})`;
@@ -214,6 +212,6 @@ export class DePage extends DeesElement {
// Adjust the outer dimensions so they match the scaled content
// this.style.width = `${shared.a4Width * scale}px`;
this.style.height = `${shared.a4Height * scale}px`;
this.style.height = `${plugins.shared.a4Height * scale}px`;
}
}

6
ts_web/elements/pagecontainer.ts
View File

@@ -10,7 +10,7 @@ import {
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import * as shared from '../../ts/shared/index.js';
import * as plugins from '../plugins.js';
declare global {
interface HTMLElementTagNameMap {
@@ -47,8 +47,8 @@ export class DePageContainer extends DeesElement {
background: white;
color: #333;
padding: 0px;
width: ${unsafeCSS(shared.a4Width + 'px')};
height: ${unsafeCSS(shared.a4Height + 'px')};
width: ${unsafeCSS(plugins.shared.a4Width + 'px')};
height: ${unsafeCSS(plugins.shared.a4Height + 'px')};
position: relative;
border-radius: 3px;
overflow: hidden;

11
ts_web/elements/pagecontent.ts
View File

@@ -7,11 +7,10 @@ import {
css,
cssManager,
unsafeCSS,
domtools,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import * as shared from '../../ts/shared/index.js';
import * as tsclass from '@tsclass/tsclass';
import * as plugins from '../plugins.js';
declare global {
interface HTMLElementTagNameMap {
@@ -28,7 +27,7 @@ export class DePageContent extends DeesElement {
@property({
type: Number,
})
public letterData: tsclass.business.ILetter;
public letterData: plugins.tsclass.business.ILetter;
@property({
type: Number,
@@ -55,8 +54,8 @@ export class DePageContent extends DeesElement {
.content {
position: absolute;
left: ${unsafeCSS(shared.leftMargin + 'px')};
right: ${unsafeCSS(shared.rightMargin + 'px')};
left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
bottom: 170px;
overflow: visible;
}

23
ts_web/elements/pagefooter.ts
View File

@@ -10,10 +10,7 @@ import {
domtools,
} from '@design.estate/dees-element';
import * as interfaces from '../../ts/interfaces/index.js';
import * as shared from '../../ts/shared/index.js';
import * as tsclass from '@tsclass/tsclass';
import * as plugins from '../plugins.js';
declare global {
interface HTMLElementTagNameMap {
@@ -30,13 +27,13 @@ export class DePageFooter extends DeesElement {
@property({
type: Object,
})
letterData: tsclass.business.ILetter;
letterData: plugins.tsclass.business.ILetter;
@property({
type: Object,
reflect: true,
})
documentSettings: interfaces.IDocumentSettings;
documentSettings: plugins.shared.interfaces.IDocumentSettings;
@property({
type: Number
@@ -69,7 +66,7 @@ export class DePageFooter extends DeesElement {
right: 0px;
height: 130px;
content: '';
padding: 30px ${unsafeCSS(shared.rightMargin + 'px')} 10px ${unsafeCSS(shared.leftMargin + 'px')};
padding: 30px ${unsafeCSS(plugins.shared.rightMargin + 'px')} 10px ${unsafeCSS(plugins.shared.leftMargin + 'px')};
grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
grid-gap: 5px;
border-top: 2px solid #e4002b;
@@ -78,7 +75,7 @@ export class DePageFooter extends DeesElement {
.bottomstripe .pageNumber {
position: absolute;
top: 0px;
right: ${unsafeCSS(shared.rightMargin + 'px')};
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
background: #e4002b;
padding: 3px;
font-size: 9px;
@@ -89,7 +86,7 @@ export class DePageFooter extends DeesElement {
.bottomstripe .documentTitle {
position: absolute;
top: -18px;
right: ${unsafeCSS(shared.rightMargin + 'px')};
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
background: #dddddd;
padding: 3px;
font-size: 9px;
@@ -104,26 +101,26 @@ export class DePageFooter extends DeesElement {
return html`
<div class="bottomstripe">
<div>
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
<strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
${this.letterData.from.name}<br />
${this.letterData.from.address.streetName} ${this.letterData.from.address.houseNumber}<br />
${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
${this.letterData.from.address.country}
</div>
<div>
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
<strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
Amtsgericht Bremen<br />
<i>reg-#:</i> HRB 35230 HB<br />
<i>vat-id:</i> ${this.letterData.from.vatId}
</div>
<div>
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
<strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
<i>email:</i> ${this.letterData.from.email}<br />
<i>phone:</i> ${this.letterData.from.phone}<br />
<i>fax:</i> ${this.letterData.from.fax}
</div>
<div>
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
<strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
<i>beneficiary:</i> ${this.letterData?.from?.name}<br />
<i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
<i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />

13
ts_web/elements/pageheader.ts
View File

@@ -10,10 +10,7 @@ import {
domtools
} from '@design.estate/dees-element';
import * as interfaces from '../../ts/interfaces/index.js';
import * as shared from '../../ts/shared/index.js';
import * as tsclass from '@tsclass/tsclass';
import * as plugins from '../plugins.js';
declare global {
interface HTMLElementTagNameMap {
@@ -30,13 +27,13 @@ export class DePageHeader extends DeesElement {
@property({
type: Object,
})
public letterData: tsclass.business.ILetter = null;
public letterData: plugins.tsclass.business.ILetter = null;
@property({
type: Object,
reflect: true,
})
documentSettings: interfaces.IDocumentSettings;
documentSettings: plugins.shared.interfaces.IDocumentSettings;
@property({
type: Number,
@@ -76,7 +73,7 @@ export class DePageHeader extends DeesElement {
overflow: hidden;
top: 130px;
left: auto;
right: ${unsafeCSS(shared.rightMargin + 'px')};
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
height: 20px;
line-height: 20px;
color: #333;
@@ -87,7 +84,7 @@ export class DePageHeader extends DeesElement {
bottom: 10px;
height: 25px;
left: auto;
right: ${unsafeCSS(shared.rightMargin + 'px')};
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
font-family: 'Courier New', Courier, monospace;
}
.topstripe .logo img {

4
ts_web/elements/viewer.demo.ts
View File

@@ -1,6 +1,6 @@
import { html } from '@design.estate/dees-element';
import * as shared from '../../ts/shared/index.js';
import * as plugins from '../plugins.js';
export const demoFunc = () => html`
<dedocument-viewer .letterData=${shared.demoLetter} .documentSettings=${shared.demoDocumentSettings}></dedocument-viewer>
<dedocument-viewer .letterData=${plugins.shared.demoLetter} .documentSettings=${plugins.shared.demoDocumentSettings}></dedocument-viewer>
`;

3
ts_web/elements/viewer.ts
View File

@@ -1,5 +1,4 @@
import * as plugins from '../plugins.js';
import * as interfaces from '../../ts/interfaces/index.js';
import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
import { demoFunc } from './viewer.demo.js';
@@ -18,7 +17,7 @@ export class DeDocumentViewer extends DeesElement {
// INSTANCE
public letterData: plugins.tsclass.business.ILetter = null;
public documentSettings: interfaces.IDocumentSettings;
public documentSettings: plugins.shared.interfaces.IDocumentSettings;
public static styles = [
cssManager.defaultStyles,

5
ts_web/plugins.ts
View File

@@ -1,3 +1,8 @@
// dees-document scope
import * as shared from '../dist_ts_shared/index.js';
export { shared };
// tsclass scope
import * as tsclass from '@tsclass/tsclass';

3
ts_web/tspublish.json Normal file
View File

@@ -0,0 +1,3 @@
{
"order": 3
}