@shopware-ag/storefront-types 0.1.0

package/README.md

@@ -0,0 +1,23 @@
+# Types for Shopware Storefront
+
+This package provides types for window bound classes in Shopware 6 Storefront:
+
+- `window.PluginManager`
+- `window.PluginBaseClass`
+- `window.router`
+
+Install this package with NPM:
+
+```bash
+npm install @shopware-ag/storefront-types --save-dev
+```
+
+To hav the types active, you need to create a `tsconfig.json` (`src/Resources/app/storefront/tsconfig.json`) with following content:
+
+```json
+{
+    "compilerOptions": {
+        "types": ["@shopware-ag/storefront-types"]
+    }
+}
+```

package/declare/helper/date.helper.d.ts

@@ -0,0 +1,8 @@
+interface DateHelper {
+    format(val: string|Date, options: Intl.DateTimeFormatOptions): string
+}
+
+declare module 'src/helper/date.helper' {
+    const helper: DateHelper;
+    export = helper;
+}

package/declare/helper/debouncer.helper.d.ts

@@ -0,0 +1,8 @@
+interface DebouncerHelper {
+    debounce(callback: Function, delay: number, immediate: boolean): Function
+}
+
+declare module 'src/helper/debouncer.helper' {
+    const helper: DebouncerHelper;
+    export = helper;
+}

package/declare/helper/device-detection.helper.d.ts

@@ -0,0 +1,23 @@
+interface DeviceDetectionHelper {
+    isTouchDevice(): boolean
+    isIOSDevice(): boolean
+    isNativeWindowsBrowser(): boolean
+    isIPhoneDevice(): boolean
+    isIPadDevice(): boolean
+    isIEBrowser(): boolean
+    isEdgeBrowser(): boolean
+    getList(): {
+        'is-touch': boolean,
+        'is-ios': boolean,
+        'is-native-windows': boolean,
+        'is-iphone': boolean,
+        'is-ipad': boolean,
+        'is-ie': boolean,
+        'is-edge': boolean
+    }
+}
+
+declare module 'src/helper/device-detection.helper' {
+    const helper: DeviceDetectionHelper;
+    export = helper;
+}

package/declare/helper/dom-access.helper.d.ts

@@ -0,0 +1,36 @@
+interface DomAccessHelper {
+    /**
+     * Returns whether or not the element is an HTML node
+     */
+    isNode(element: any): boolean
+
+    /**
+     * Returns if the given element has the requested attribute/property
+     */
+    hasAttribute(element: HTMLElement, attribute: string): boolean
+
+    /**
+     * Returns the value of a given element's attribute/property
+     */
+    getAttribute(element: HTMLElement, attribute: string, strict?: boolean): string | undefined
+
+    /**
+     * Returns the value of a given elements dataset entry
+     */
+    getDataAttribute(element: HTMLElement, attribute: string, strict?: boolean): string | undefined
+
+    /**
+     * Returns the selected element of a defined parent node
+     */
+    querySelector(element: HTMLElement, selector: string, strict?: boolean): HTMLElement | null
+
+    /**
+     * Returns the selected elements of a defined parent node
+     */
+    querySelectorAll(element: HTMLElement, selector: string, strict?: boolean): HTMLElement[]
+}
+
+declare module 'src/helper/dom-access.helper' {
+    const helper: DomAccessHelper;
+    export = helper;
+}

package/declare/helper/element-replace.helper.d.ts

@@ -0,0 +1,10 @@
+interface ElementReplaceHelper {
+    replaceFromMarkup(markup: HTMLElement|string, selectors: string[]|string, strict: boolean): void
+
+    replaceElement(src: NodeList|HTMLElement|string, target: NodeList|HTMLElement|string, strict: boolean): boolean
+}
+
+declare module 'src/helper/element-replace.helper' {
+    const helper: ElementReplaceHelper;
+    export = helper;
+}

package/declare/helper/emitter.helper.d.ts

@@ -0,0 +1,27 @@
+declare module 'src/helper/emitter.helper' {
+    interface NativeEventEmitterPublish {
+        detail?: object;
+        cancelable?: boolean;
+    }
+    
+    interface NativeEventEmitterSubscribeOpts {
+        once?: boolean;
+        scope?: Function;
+    }
+    
+    class NativeEventEmitter {
+        private _listeners;
+        private _el;
+        constructor(el: HTMLElement);
+        publish(eventName: string, detail?: NativeEventEmitterPublish, cancelable?: boolean): CustomEvent;
+        subscribe(eventName: string, callback: Function, opts?: NativeEventEmitterSubscribeOpts): boolean;
+        unsubscribe(eventName: String): boolean;
+        reset(): boolean;
+        get el(): HTMLElement;
+        set el(value: HTMLElement);
+        get listeners(): any[];
+        set listeners(value: any[]);
+    }
+
+    export = NativeEventEmitter;
+}

package/declare/helper/feature.helper.d.ts

@@ -0,0 +1,9 @@
+interface FeatureHelper {
+    init(flagConfig: object): void;
+    isActive(flag: string): boolean;
+}
+
+declare module 'src/helper/feature.helper' {
+    const helper: FeatureHelper;
+    export = helper;
+}

package/declare/helper/iterator.helper.d.ts

@@ -0,0 +1,8 @@
+interface IteratorHelper {
+    iterate(source: any, callback: (value: any, index: number, array: any) => void): void
+}
+
+declare module 'src/helper/iterator.helper' {
+    const helper: IteratorHelper;
+    export = helper;
+}

package/declare/helper/storage.helper.d.ts

@@ -0,0 +1,38 @@
+interface CookieStorageHelper {
+    setItem(key: string, value: string, expireationDays: number): void
+
+    getItem(key: string): any
+
+    removeItem(key: string): boolean
+
+    key(index: number): string | null
+
+    clear(): void
+}
+
+interface MemoryStorageHelper {
+    setItem(key: string, value: string): void
+
+    getItem(key: string): any
+
+    removeItem(key: string): boolean
+
+    key(index: number): string | null
+
+    clear(): void
+}
+
+declare module 'src/helper/storage/storage.helper' {
+    const helper: Storage;
+    export = helper;
+}
+
+declare module 'src/helper/storage/cookie-storage.helper' {
+    const helper: CookieStorageHelper;
+    export = helper;
+}
+
+declare module 'src/helper/storage/memory-storage.helper' {
+    const helper: MemoryStorageHelper;
+    export = helper;
+}

package/declare/helper/string.helper.d.ts

@@ -0,0 +1,34 @@
+interface StringHelper {
+    /**
+     * Upper case first letter of string
+     */
+    ucFirst(str: string): string
+
+    /**
+     * Lower case first letter of string
+     */
+    lcFirst(str: string): string
+
+    /**
+     * Convert string to dash case
+     */
+    toDashCase(str: string): string
+    
+    /**
+     * Convert string to low camel case
+     */
+    toLowerCamelCase(str: string): string
+    
+
+    /**
+     * Convert string to upper camel case
+     */
+    toUpperCamelCase(str: string): string
+    
+    parsePrimitive(value: string): any
+}
+
+declare module 'src/helper/string.helper' {
+    const helper: StringHelper;
+    export = helper;
+}

package/declare/helper/viewport-detection.helper.d.ts

@@ -0,0 +1,14 @@
+interface ViewportDetectionHelper {
+    isXS(): boolean
+    isSM(): boolean
+    isMD(): boolean
+    isLG(): boolean
+    isXL(): boolean
+    isXXL(): boolean
+    getCurrentViewport(): 'XS' | 'SM' | 'MD' | 'LG' | 'XL' | 'XXL'
+}
+
+declare module 'src/helper/viewport-detection.helper' {
+    const helper: ViewportDetectionHelper;
+    export = helper;
+}

package/declare/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference path="plugin-system/plugin.class.d.ts" />
+/// <reference path="plugin-system/plugin.manager.d.ts" />
+
+/// <reference path="helper/date.helper.d.ts" />
+/// <reference path="helper/debouncer.helper.d.ts" />
+/// <reference path="helper/device-detection.helper.d.ts" />
+/// <reference path="helper/dom-access.helper.d.ts" />
+/// <reference path="helper/element-replace.helper.d.ts" />
+/// <reference path="helper/emitter.helper.d.ts" />
+/// <reference path="helper/feature.helper.d.ts" />
+/// <reference path="helper/iterator.helper.d.ts" />
+/// <reference path="helper/storage.helper.d.ts" />
+/// <reference path="helper/string.helper.d.ts" />
+/// <reference path="helper/viewport-detection.helper.d.ts" />
+
+/// <reference path="service/http-client.service.d.ts" />
+/// <reference path="service/app-client.service.d.ts" />
+
+/// <reference path="utility/backdrop.util.d.ts" />
+/// <reference path="utility/bootstrap.util.d.ts" />
+/// <reference path="utility/form-serialize.util.d.ts" />
+/// <reference path="utility/history.util.d.ts" />
+/// <reference path="utility/loading-indicator.d.ts" />
+/// <reference path="utility/pseudo-modal.d.ts" />

package/declare/plugin-system/plugin.class.d.ts

@@ -0,0 +1,4 @@
+declare module 'src/plugin-system/plugin.class' {
+    const Plugin: import('../../plugin-system/plugin').default;
+    export = Plugin;
+}

package/declare/plugin-system/plugin.manager.d.ts

@@ -0,0 +1,4 @@
+declare module 'src/plugin-system/plugin.manager' {
+    const PluginManager: import('../../plugin-system/plugin-manager').default;
+    export = PluginManager;
+}

package/declare/service/app-client.service.d.ts

@@ -0,0 +1,13 @@
+declare module 'src/service/app-client.service' {
+    class AppClient {
+        constructor();
+    
+        get(url: RequestInfo, options?: RequestInit): Promise<Response>;
+        post(url: RequestInfo, options?: RequestInit): Promise<Response>;
+        patch(url: RequestInfo, options?: RequestInit): Promise<Response>;
+        delete(url: RequestInfo, options?: RequestInit): Promise<Response>;
+        reset(): void;
+    }
+
+    export = AppClient;
+}

package/declare/service/http-client.service.d.ts

@@ -0,0 +1,17 @@
+declare module 'src/service/http-client.service' {
+    class HttpClient {
+        constructor();
+    
+        get(url: string, callback: (content: any, response: XMLHttpRequest) => void, contentType?: string): void;
+        post(url: string, data: object|null, callback: (content: any, response: XMLHttpRequest) => void, contentType?: string): void;
+        patch(url: string, data: object|null, callback: (content: any, response: XMLHttpRequest) => void, contentType?: string): void;
+        delete(url: string, data: object|null, callback: (content: any, response: XMLHttpRequest) => void, contentType?: string): void;
+    
+        /**
+         * Abort running Request
+         */
+        abort(): void;
+    }
+
+    export = HttpClient;
+}

package/declare/utility/backdrop.util.d.ts

@@ -0,0 +1,11 @@
+interface BackDropUtil {
+    SELECTOR_CLASS: string
+
+    create(callback: Function|null): void
+    remove(delay: number): void
+}
+
+declare module 'src/utility/backdrop/backdrop.util' {
+    const helper: BackDropUtil;
+    export = helper;
+}

package/declare/utility/bootstrap.util.d.ts

@@ -0,0 +1,10 @@
+interface BootstrapUtil {
+    initTooltip(): bootstrap.Tooltip
+    initPopover(): bootstrap.Popover
+    initBootstrapPlugins(): void
+}
+
+declare module 'src/utility/bootstrap/bootstrap.util' {
+    const helper: BootstrapUtil;
+    export = helper;
+}

package/declare/utility/form-serialize.util.d.ts

@@ -0,0 +1,9 @@
+interface FormSerializeUtil {
+    serialize(form: HTMLFormElement, strict?: boolean): FormData
+    serializeJson(form: HTMLFormElement, strict?: boolean): object
+}
+
+declare module 'src/utility/form/form-serialize.util' {
+    const helper: FormSerializeUtil;
+    export = helper;
+}

package/declare/utility/history.util.d.ts

@@ -0,0 +1,15 @@
+interface HistoryUtil {
+    getLocation(): string
+    listen(callback: Function): any
+    unlisten(callback: Function): void
+    push(pathName: string, search: any, state: any): void
+    replace(pathName: string, search: any, state: any): void
+    pushParams(params: any, state: any): void
+    replaceParams(params: any, state: any): void
+    getSearch(): string
+}
+
+declare module 'src/utility/history/history.util' {
+    const helper: HistoryUtil;
+    export = helper;
+}

package/declare/utility/loading-indicator.d.ts

@@ -0,0 +1,32 @@
+interface LoadingIndicatorUtil {
+    SELECTOR_CLASS: string
+
+    create(): void
+    remove(): void
+    exists(): boolean
+    getTemplate(): string
+}
+
+interface ElementLoadingIndicatorUtil extends LoadingIndicatorUtil {
+    appendLoader(element: HTMLElement): void
+}
+
+declare module 'src/utility/loading-indicator/loading-indicator.util' {
+    const helper: LoadingIndicatorUtil;
+    export = helper;
+}
+
+declare module 'src/utility/loading-indicator/button-loading-indicator.util' {
+    const helper: LoadingIndicatorUtil;
+    export = helper;
+}
+
+declare module 'src/utility/loading-indicator/element-indicator.util' {
+    const helper: ElementLoadingIndicatorUtil;
+    export = helper;
+}
+
+declare module 'src/utility/loading-indicator/page-loading-indicator.util' {
+    const helper: LoadingIndicatorUtil;
+    export = helper;
+}

package/declare/utility/pseudo-modal.d.ts

@@ -0,0 +1,11 @@
+declare module 'src/utility/modal-extension/psuedo-modal.util' {
+    class PsuedoModalUtil {
+        open(callback: Function): void
+        close(): void
+        getModal(): HTMLElement
+        updatePosition(): void
+        updateContent(content: string, callback: () => void): void
+    }
+
+    export = PsuedoModalUtil;
+}

package/global.d.ts

@@ -0,0 +1,25 @@
+declare global {
+    interface Window {
+        PluginManager: import('./plugin-system/plugin-manager').default,
+        PluginBaseClass: import('./plugin-system/plugin').default,
+        router: {
+            'frontend.cart.offcanvas': string,
+            'frontend.cookie.offcanvas': string,
+            'frontend.checkout.finish.page': string,
+            'frontend.checkout.info': string,
+            'frontend.menu.offcanvas': string,
+            'frontend.cms.page': string,
+            'frontend.cms.navigation.page': string,
+            'frontend.account.addressbook': string,
+            'frontend.country.country-data': string,
+            'frontend.app-system.generate-token': string,
+        }
+        bootstrap: typeof import('bootstrap')
+     }
+
+    interface Document {
+        $emitter: import('./plugin-system/native-event-emitter').default,
+    }
+}
+
+export {}

package/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="declare/index.d.ts" />
+/// <reference path="global.d.ts" />

package/module.d.ts

@@ -0,0 +1,4 @@
+declare module 'src/plugin-system/plugin.manager' {
+    const PluginManager: import('./plugin-system/plugin-manager').default;
+    export = PluginManager;
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@shopware-ag/storefront-types",
+  "version": "0.1.0",
+  "description": "Provides Shopware Storefront Typescript types",
+  "types": "index.d.ts",
+  "dependencies": {
+    "@types/bootstrap": "^5.2.0"
+  },
+  "devDependencies": {
+    "typescript": "*"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shopware/storefront-types.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shopware/storefront-types/issues"
+  },
+  "author": "shopware AG",
+  "license": "MIT"
+}

package/plugin-system/native-event-emitter.d.ts

@@ -0,0 +1,18 @@
+interface NativeEventEmitterSubscribeOpts {
+    once?: boolean;
+    scope?: Function;
+}
+
+export default class NativeEventEmitter {
+    private _listeners;
+    private _el;
+    constructor(el: HTMLElement);
+    publish(eventName: string, detail?: object, cancelable?: boolean): CustomEvent;
+    subscribe(eventName: string, callback: Function, opts?: NativeEventEmitterSubscribeOpts): boolean;
+    unsubscribe(eventName: String): boolean;
+    reset(): boolean;
+    get el(): HTMLElement;
+    set el(value: HTMLElement);
+    get listeners(): any[];
+    set listeners(value: any[]);
+}

package/plugin-system/plugin-manager.d.ts

@@ -0,0 +1,55 @@
+export default interface PluginManager {
+    /**
+     * Registers a plugin to the plugin manager.
+     */
+    register(pluginName: String, pluginClass: Object, selector: String | NodeList | HTMLElement, options?: Object): void
+
+    /**
+     * Removes a plugin from the plugin manager
+     */
+    deregister(pluginName: String): void
+
+    /**
+     * Extends an already existing plugin with a new class or function.
+     * If both names are equal, the plugin will be overridden.
+     */
+    extend(fromName: String, newName: string, pluginClass: Object, selector: String | NodeList | HTMLElement, options?: Object): boolean
+
+    /**
+     * Returns a list of all registered plugins.
+     */
+    getPluginList(): string[]
+
+    /**
+     * Returns the definition of a plugin.
+     */
+    getPlugin(pluginName: String, strict: boolean): Map<String, String>
+
+    /**
+     * Returns all registered plugin instances for the passed plugin name.
+     */
+    getPluginInstances(pluginName: String): Array<Object>
+
+
+    /**
+     * Returns the plugin instance from the passed element selected by plugin Name.
+     */
+    getPluginInstanceFromElement(el: HTMLElement, pluginName: String): Array<Object>
+
+
+    /**
+     * Returns all plugin instances from the passed element.
+     */
+    getPluginInstancesFromElement(el: HTMLElement): Map<String, Object>
+
+
+    /**
+     * Initializes all plugins which are currently registered.
+     */
+    initializePlugins(): void
+
+    /**
+     * Initializes a single plugin.
+     */
+    initializePlugin(pluginName: String, selector: String|NodeList|HTMLElement, options: object): void;
+}

package/plugin-system/plugin.d.ts

@@ -0,0 +1,19 @@
+import NativeEventEmitter from "./native-event-emitter";
+
+export default interface PluginBaseClass {
+    new(el: HTMLElement, options?: any, pluginName?: false | string): PluginBaseClass;
+
+    el: HTMLElement;
+    $emitter: NativeEventEmitter;
+    _pluginName: String;
+    initialOptions: object;
+    options: object;
+    _initialized: boolean;
+    init(): void;
+    _update(): void;
+    update(): void;
+    _registerInstance(): void;
+    _getPluginName(pluginName: false | string): String;
+    _mergeOptions(options: any): object;
+    parseJsonOrFail(dashedPluginName: string): any | string;
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "DOM"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "types": ["."],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts"
+    ]
+}