@nu-art/ts-short-url-frontend 0.400.7

package/_ats/ATS_ShortUrl/ATS_ShortUrl.d.ts

@@ -0,0 +1,13 @@
+import './ATS_ShortUrl.scss';
+import { AppToolsScreen, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { DispatcherType_ShortUrl } from '../../_entity/short-url/index.js';
+import { ApiCallerEventType, DispatcherInterface } from '@nu-art/thunderstorm-frontend/core/db-api-gen/types';
+import { DBProto_ShortUrl } from '@nu-art/ts-short-url-shared';
+type State = {};
+type Props = {};
+export declare class ATS_ShortUrl extends ComponentSync<Props, State> implements DispatcherInterface<DispatcherType_ShortUrl> {
+    static screen: AppToolsScreen;
+    __onShortUrlsUpdated(...params: ApiCallerEventType<DBProto_ShortUrl>): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ats/ATS_ShortUrl/ATS_ShortUrl.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ATS_ShortUrl.scss';
+import { ATS_Fullstack, Button, ComponentSync, LL_H_C, LL_V_L, TS_AppTools } from '@nu-art/thunderstorm-frontend/index';
+import { ModuleFE_ShortUrl } from '../../_entity/short-url/index.js';
+import { Component_ShortUrlEditor } from './components/Component_ShortUrlEditor.js';
+import { sortArray, voidFunction } from '@nu-art/ts-common';
+import { TS_EditableItemController } from '@nu-art/thunderstorm-frontend/components/TS_EditableItemController/index';
+export class ATS_ShortUrl extends ComponentSync {
+    static screen = {
+        name: 'Short Url',
+        key: 'short-url',
+        renderer: this,
+        modulesToAwait: [ModuleFE_ShortUrl],
+        group: ATS_Fullstack
+    };
+    __onShortUrlsUpdated(...params) {
+        this.forceUpdate();
+    }
+    render() {
+        const allMutable = ModuleFE_ShortUrl.cache.allMutable();
+        return _jsxs("div", { className: 'short-url', children: [_jsxs(LL_H_C, { className: 'page-title', children: [TS_AppTools.renderPageHeader('Manage App Short Urls'), _jsx(Button, { variant: 'primary', onClick: voidFunction, children: "Add Short Url" })] }), _jsxs(LL_V_L, { className: 'url-cards', children: [_jsx(Card_ShortUrl, {}, `new-short-url-${allMutable.length}`), sortArray(allMutable, (item) => item.title + item._shortUrl)
+                            .map((shortUrl) => _jsx(Card_ShortUrl, { editorProps: { deleteCallback: () => this.forceUpdate() }, item: shortUrl }, shortUrl._id))] })] });
+    }
+}
+class Card_ShortUrl extends TS_EditableItemController {
+    static defaultProps = {
+        module: ModuleFE_ShortUrl,
+        editor: Component_ShortUrlEditor,
+        createInitialInstance: () => ({})
+    };
+}

package/_ats/ATS_ShortUrl/ATS_ShortUrl.scss

@@ -0,0 +1,29 @@
+@use "@nu-art/ts-styles" as styles;
+
+.short-url {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  @include styles.customScrollbar('vertical', true);
+
+  .page-title {
+    position: relative;
+
+    .app-tools-page__page__header {
+      width: 100%;
+    }
+
+    .ts-button {
+      position: absolute;
+      right: 10px;
+    }
+  }
+
+  .url-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(650px, 1fr));
+    padding-top: 10px;
+    width: 100%;
+    gap: 15px;
+  }
+}

package/_ats/ATS_ShortUrl/components/Component_ShortUrlEditor.d.ts

@@ -0,0 +1,13 @@
+import './Component_ShortUrlEditor.scss';
+import { EditableRef, TS_EditableContent } from '@nu-art/thunderstorm-frontend/editable-item';
+import { InferProps, InferState } from '@nu-art/thunderstorm-frontend/index';
+import { DBProto_ShortUrl, UI_ShortUrl } from '@nu-art/ts-short-url-shared';
+type Props = EditableRef<UI_ShortUrl> & {
+    deleteCallback?: VoidFunction;
+};
+type State = EditableRef<UI_ShortUrl>;
+export declare class Component_ShortUrlEditor extends TS_EditableContent<DBProto_ShortUrl, Props, State> {
+    protected deriveStateFromProps(nextProps: InferProps<this>, state: InferState<this>): InferState<this>;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ats/ATS_ShortUrl/components/Component_ShortUrlEditor.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Component_ShortUrlEditor.scss';
+import { TS_EditableContent, TS_EditableItemStatus } from '@nu-art/thunderstorm-frontend/editable-item';
+import { Button, LL_H_C, ModuleFE_Thunderstorm, TS_Card, TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { TS_InputV2 } from '@nu-art/thunderstorm-frontend/components/TS_V2_Input/index';
+import { TS_Icons } from '@nu-art/ts-styles';
+import { TS_TextAreaV2 } from '@nu-art/thunderstorm-frontend/components/TS_V2_TextArea/index';
+import { ModuleFE_ShortUrl } from '../../../_entity/short-url/index.js';
+const StringEditableInput = TS_InputV2.editable({
+    type: 'text',
+    saveEvent: ['blur', 'accept']
+});
+const TextArea = TS_TextAreaV2.editable({
+    saveEvent: ['blur', 'accept']
+});
+export class Component_ShortUrlEditor extends TS_EditableContent {
+    deriveStateFromProps(nextProps, state) {
+        state = super.deriveStateFromProps(nextProps, state);
+        return state;
+    }
+    render() {
+        const _id = this.state.editable.get('_id');
+        return _jsxs(TS_Card, { className: 'short-url-editor', children: [_jsxs(LL_H_C, { className: 'utils', children: [_jsx(TS_EditableItemStatus, { editable: this.state.editable }), _jsx(TS_Icons.x.component, { onClick: async () => {
+                                if (this.state.editable.get('_id'))
+                                    await this.state.editable.delete();
+                                this.props.deleteCallback?.();
+                            } })] }), _jsxs(LL_H_C, { children: [_jsx(TS_PropRenderer.Vertical, { label: 'Title', children: _jsx(StringEditableInput, { editable: this.state.editable, prop: 'title', onChange: value => {
+                                    if (value.length)
+                                        return this.state.editable.updateObj({ title: value });
+                                    return this.state.editable.updateObj({ title: undefined });
+                                } }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Short Url', children: _jsx("div", { children: this.state.editable.item._shortUrl }) })] }), _jsx(TS_PropRenderer.Vertical, { label: 'Full Url', children: _jsx(TextArea, { editable: this.state.editable, prop: 'fullUrl', className: 'url-input', onChange: value => {
+                            if (value.length)
+                                return this.state.editable.updateObj({ fullUrl: value });
+                            return this.state.editable.updateObj({ fullUrl: undefined });
+                        } }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Description', children: _jsx(TextArea, { editable: this.state.editable, prop: 'description', onChange: value => {
+                            if (value?.length)
+                                return this.state.editable.updateObj({ description: value });
+                            return this.state.editable.updateObj({ description: undefined });
+                        } }) }), _jsxs(LL_H_C, { className: 'buttons-container', children: [_jsx(Button, { variant: 'tertiary', disabled: !_id, onClick: async () => {
+                                const { shortUrl } = await ModuleFE_ShortUrl._v1.getShortUrl({ _id: _id }).executeSync();
+                                await ModuleFE_Thunderstorm.copyToClipboard(shortUrl);
+                            }, children: "Copy ShortUrl To Clipboard" }), _jsx(Button, { variant: 'primary', onClick: async () => {
+                                await this.state.editable.save();
+                            }, children: "Save" })] })] });
+    }
+}

package/_ats/ATS_ShortUrl/components/Component_ShortUrlEditor.scss

@@ -0,0 +1,46 @@
+.short-url-editor {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  gap: 15px;
+  height: fit-content;
+  padding: 15px;
+  width: 650px;
+  background: white;
+  justify-content: space-between;
+
+
+  .ts-textarea {
+    resize: none;
+    height: 120px;
+
+    &.url-input {
+      font-family: monospace;
+      font-weight: normal;
+      resize: vertical;
+    }
+
+  }
+
+  .utils {
+    position: absolute;
+    right: 15px;
+    top: 10px;
+    gap: 10px;
+
+    .icon--wrapper {
+      cursor: pointer;
+    }
+  }
+
+  .buttons-container {
+    gap: 10px;
+    width: 100%;
+    padding-top: 10px;
+    justify-content: flex-end;
+
+    .ts-busy-button {
+      margin: 0;
+    }
+  }
+}

package/_ats/index.d.ts

@@ -0,0 +1 @@
+export * from './ATS_ShortUrl/ATS_ShortUrl.js';

package/_ats/index.js

@@ -0,0 +1 @@
+export * from './ATS_ShortUrl/ATS_ShortUrl.js';

package/_entity/short-url/ModuleFE_ShortUrl.d.ts

@@ -0,0 +1,11 @@
+import { ApiStruct_ShortUrl, DBProto_ShortUrl } from '@nu-art/ts-short-url-shared';
+import { DispatcherDef, ThunderDispatcherV3 } from '@nu-art/thunderstorm-frontend/core/db-api-gen/types';
+import { ModuleFE_BaseApi } from '@nu-art/thunderstorm-frontend/index';
+import { ApiDefCaller } from '@nu-art/thunderstorm-shared';
+export type DispatcherType_ShortUrl = DispatcherDef<DBProto_ShortUrl, `__onShortUrlsUpdated`>;
+export declare const dispatch_onShortUrlsUpdated: ThunderDispatcherV3<DispatcherType_ShortUrl>;
+export declare class ModuleFE_ShortUrl_Class extends ModuleFE_BaseApi<DBProto_ShortUrl> implements ApiDefCaller<ApiStruct_ShortUrl> {
+    _v1: ApiDefCaller<ApiStruct_ShortUrl>['_v1'];
+    constructor();
+}
+export declare const ModuleFE_ShortUrl: ModuleFE_ShortUrl_Class;

package/_entity/short-url/ModuleFE_ShortUrl.js

@@ -0,0 +1,14 @@
+import { ApiDef_ShortUrl, DBDef_ShortUrl } from '@nu-art/ts-short-url-shared';
+import { ThunderDispatcherV3 } from '@nu-art/thunderstorm-frontend/core/db-api-gen/types';
+import { apiWithQuery, ModuleFE_BaseApi } from '@nu-art/thunderstorm-frontend/index';
+export const dispatch_onShortUrlsUpdated = new ThunderDispatcherV3('__onShortUrlsUpdated');
+export class ModuleFE_ShortUrl_Class extends ModuleFE_BaseApi {
+    _v1;
+    constructor() {
+        super(DBDef_ShortUrl, dispatch_onShortUrlsUpdated);
+        this._v1 = {
+            getShortUrl: apiWithQuery(ApiDef_ShortUrl._v1.getShortUrl)
+        };
+    }
+}
+export const ModuleFE_ShortUrl = new ModuleFE_ShortUrl_Class();

package/_entity/short-url/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ModuleFE_ShortUrl.js';
+export * from './module-pack.js';

package/_entity/short-url/index.js

@@ -0,0 +1,2 @@
+export * from './ModuleFE_ShortUrl.js';
+export * from './module-pack.js';

package/_entity/short-url/module-pack.d.ts

@@ -0,0 +1 @@
+export declare const ModulePackFE_ShortUrlDB: import("./ModuleFE_ShortUrl.js").ModuleFE_ShortUrl_Class[];

package/_entity/short-url/module-pack.js

@@ -0,0 +1,2 @@
+import { ModuleFE_ShortUrl } from './ModuleFE_ShortUrl.js';
+export const ModulePackFE_ShortUrlDB = [ModuleFE_ShortUrl];

package/_entity/short-url/ui-components.d.ts

@@ -0,0 +1,36 @@
+export declare const DropDown_ShortUrl: {
+    editable: (props: import("@nu-art/thunderstorm-frontend/components/types").ComponentProps_Error & {
+        dropdownRef?: import("react").RefObject<any>;
+        className?: string;
+        style?: import("react").CSSProperties;
+        placeholder?: string;
+        mapper?: ((item: import("@nu-art/ts-short-url-shared").DB_ShortUrl) => (string | undefined)[]) | undefined;
+        noOptionsRenderer?: import("react").ReactNode | ((filter?: string) => import("react").ReactNode);
+        renderer?: ((item: import("@nu-art/ts-short-url-shared").DB_ShortUrl) => import("react").ReactElement) | undefined;
+        ifNoneShowAll?: boolean;
+        caret?: {
+            open: import("react").ReactNode;
+            close: import("react").ReactNode;
+        };
+        onNoMatchingSelectionForString?: ((filterText: string, matchingItems: import("@nu-art/ts-short-url-shared").DB_ShortUrl[], e: import("react").KeyboardEvent) => any) | undefined;
+        limitItems?: number;
+        hidePlaceholderOnOpen?: boolean;
+        itemResolver?: (() => import("@nu-art/ts-short-url-shared").DB_ShortUrl[]) | undefined;
+        innerRef?: import("react").RefObject<any>;
+        tabIndex?: number;
+        unselectLabel?: string;
+        id?: string;
+        queryFilter?: ((item: import("@nu-art/ts-short-url-shared").DB_ShortUrl) => boolean) | undefined;
+        sortBy?: ("title" | "description" | "_id" | "__metadata1" | "__hardDelete" | "__created" | "__updated" | "_v" | "_originDocId" | "_shortUrl" | "fullUrl" | ((item: import("@nu-art/ts-short-url-shared").DB_ShortUrl) => string | number))[] | undefined;
+    } & {
+        inputValue?: string;
+        boundingParentSelector?: string;
+        renderSearch?: ((dropDown: import("@nu-art/thunderstorm-frontend/index").TS_DropDown<import("@nu-art/ts-short-url-shared").DB_ShortUrl>) => import("react").ReactNode) | undefined;
+        limitItems?: number;
+        disabled?: boolean;
+    } & import("@nu-art/thunderstorm-frontend/index").UIProps_EditableItem<any, any, string> & {
+        onSelected?: ((selected: import("@nu-art/ts-short-url-shared").DB_ShortUrl | undefined, superOnSelected: (selected?: import("@nu-art/ts-short-url-shared").DB_ShortUrl | undefined) => Promise<void>) => void) | undefined;
+        canUnselect?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+    selectable: (props: import("@nu-art/thunderstorm-frontend/index").AppLevelProps_TS_GenericDropDownV3<import("@nu-art/ts-short-url-shared").DB_ShortUrl>) => import("react/jsx-runtime").JSX.Element;
+};

package/_entity/short-url/ui-components.js

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { ModuleFE_ShortUrl } from './ModuleFE_ShortUrl.js';
+import { GenericDropDownV3 } from '@nu-art/thunderstorm-frontend/index';
+const Props_DropDown = {
+    module: ModuleFE_ShortUrl,
+    modules: [ModuleFE_ShortUrl],
+    mapper: item => [item.title],
+    placeholder: 'Choose a ShortUrl',
+    renderer: item => _jsxs("div", { className: "ll_h_c", children: [" ", item.title, " "] })
+};
+export const DropDown_ShortUrl = GenericDropDownV3.prepare(Props_DropDown);

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './_ats/index.js';
+export * from './_entity/short-url/index.js';

package/index.js

@@ -0,0 +1,2 @@
+export * from './_ats/index.js';
+export * from './_entity/short-url/index.js';

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@nu-art/ts-short-url-frontend",
+  "version": "0.400.7",
+  "description": "ts-short-url - Express & Typescript based backend framework Frontend",
+  "keywords": [
+    "TacB0sS",
+    "infra",
+    "nu-art",
+    "thunderstorm",
+    "typescript",
+    "ts-short-url"
+  ],
+  "homepage": "https://github.com/nu-art-js/thunderstorm",
+  "bugs": {
+    "url": "https://github.com/nu-art-js/thunderstorm/issues"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:nu-art-js/thunderstorm.git"
+  },
+  "license": "Apache-2.0",
+  "author": "TacB0sS",
+  "files": [
+    "**/*"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@nu-art/ts-short-url-shared": "0.400.7",
+    "@nu-art/firebase-frontend": "0.400.7",
+    "@nu-art/firebase-shared": "0.400.7",
+    "@nu-art/permissions-frontend": "0.400.7",
+    "@nu-art/permissions-shared": "0.400.7",
+    "@nu-art/thunderstorm-frontend": "0.400.7",
+    "@nu-art/thunderstorm-shared": "0.400.7",
+    "@nu-art/ts-common": "0.400.7",
+    "@nu-art/ts-styles": "0.400.7",
+    "firebase": "^11.9.0",
+    "firebase-admin": "13.4.0",
+    "firebase-functions": "6.3.2",
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/chai": "^4.3.4",
+    "@types/mocha": "^10.0.1"
+  },
+  "unitConfig": {
+    "type": "typescript-lib"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
+  }
+}