@v1nt1248/3nclient-lib 0.0.16 → 0.0.19

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@v1nt1248/3nclient-lib",
-  "private": false,
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "description": "Library for 3NWeb clients",
+  "private": false,
   "type": "module",
   "files": [
     "dist",
-    "src/components/",
-    "src/libs"
+    "src/components/"
   ],
   "module": "./dist/ui-3n-lib.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +29,9 @@
     "linter": "eslint -c .eslintrc.cjs --ext .js,.vue,.ts, src",
     "linter:fix": "eslint -c .eslintrc.cjs --fix --ext .js,.vue,.ts, src",
     "lint": "yarn linter && yarn stylelint",
-    "lint:fix": "yarn linter:fix && yarn stylelint:fix"
+    "lint:fix": "yarn linter:fix && yarn stylelint:fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@iconify-icons/ic": "^1.2.13",
@@ -47,22 +48,38 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^7.4.4",
+    "@storybook/addon-docs": "^7.4.4",
+    "@storybook/addon-essentials": "^7.4.4",
+    "@storybook/addon-interactions": "^7.4.4",
+    "@storybook/addon-links": "^7.4.4",
+    "@storybook/blocks": "^7.4.4",
+    "@storybook/builder-vite": "^7.4.4",
+    "@storybook/testing-library": "^0.2.1",
+    "@storybook/vue3": "^7.4.4",
+    "@storybook/vue3-vite": "^7.4.4",
     "@types/lodash": "^4.14.197",
     "@types/node": "^20.5.6",
     "@types/sanitize-html": "^2.9.0",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
     "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-core": "^3.3.4",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vuedx/typescript-plugin-vue": "^0.7.6",
     "eslint": "^8.48.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-storybook": "^0.6.14",
     "eslint-plugin-vue": "^9.17.0",
+    "jackspeak": "^2.3.3",
     "pinia": "^2.1.6",
     "postcss-html": "^1.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.66.1",
+    "storybook": "^7.4.4",
     "stylelint": "^15.10.3",
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
@@ -71,10 +88,10 @@
     "stylelint-scss": "^5.1.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.5",
-    "vite-plugin-commonjs": "^0.9.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-dts": "^3.5.3",
     "vue": "^3.3.4",
     "vue-tsc": "^1.8.5"
-  }
+  },
+  "packageManager": "yarn@3.6.3"
 }

package/src/components/ui3n-button.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, onMounted, ref, useSlots } from 'vue'
+  import { computed, onMounted, ref, useSlots, watch } from 'vue'
   import { hasSlotContent } from '../tools/ui.helpers'
   import Ui3nIcon from './ui3n-icon.vue'
 
@@ -27,6 +27,22 @@
   const buttonEl = ref<HTMLButtonElement | null>(null)
   const isSlotEmpty = computed(() => !hasSlotContent(slots['default']))
 
+  watch(
+    [() => props.color, () => props.textColor],
+    (newValue: [string|undefined, string|undefined], prevValue: [string|undefined, string|undefined]) => {
+      const [ prevColor, prevTextColor ] = prevValue
+      const [ color, textColor ] = newValue
+      if (buttonEl.value) {
+        if (color !== prevColor) {
+          buttonEl.value.style.setProperty('--ui3n-button-background', color ?? 'var(--blue-main, #0090ec)')
+        }
+        if (textColor !== prevTextColor) {
+          buttonEl.value.style.setProperty('--ui3n-button-text-color', textColor ?? 'var(--system-white, #fff)')
+        }
+      }
+    },
+  )
+
   onMounted(() => {
     if (buttonEl.value) {
       if (props.color) {
@@ -97,8 +113,8 @@
     transition: background 0.5s ease-in-out;
 
     &--round {
-      --ui3n-button-padding-vert: 4px;
-      --ui3n-button-padding-horiz: 4px;
+      --ui3n-button-padding-vert: 6px;
+      --ui3n-button-padding-horiz: 6px;
 
       border-radius: 50%;
     }
@@ -115,6 +131,7 @@
           var(--ui3n-button-background)
           radial-gradient(circle, transparent 1%, var(--ui3n-button-background) 1%)
           center/15000%;
+        box-shadow: 0 0 4px var(--shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 
         .ui3n-button {
           &__icon,
@@ -152,4 +169,3 @@
     }
   }
 </style>
-../tools/ui.helpers

package/src/components/ui3n-drop-files.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, ref } from 'vue'
+  import { computed, onMounted, ref } from 'vue'
 
   export interface Ui3nDropFilesProps {
     title?: string;
@@ -14,6 +14,8 @@
   const props = defineProps<Ui3nDropFilesProps>()
   const emit = defineEmits<Ui3nDropFilesEmits>()
 
+  const wrapperElement = ref<HTMLDivElement | null>(null)
+  const wrapperElementHeight = ref(0)
   const isOverDropPlace = ref(false)
   const isOverDropZone = ref(false)
   const params = computed(() => {
@@ -26,6 +28,20 @@
     }
   })
 
+  onMounted(() => {
+    if (wrapperElement.value) {
+      wrapperElementHeight.value = wrapperElement.value.clientHeight
+      wrapperElement.value.style.setProperty('--dropzone-height', `${wrapperElementHeight.value}px`)
+      let titleFontSize = 12
+      if (wrapperElementHeight.value > 100 && wrapperElementHeight.value <= 240) {
+        titleFontSize = 16
+      } else if (wrapperElementHeight.value > 240) {
+        titleFontSize = 20
+      }
+      wrapperElement.value.style.setProperty('--dropzone-title-font', `${titleFontSize}px`)
+    }
+  })
+
   const onDragenter = (ev: MouseEvent) => {
     ev.preventDefault()
     isOverDropPlace.value = true
@@ -60,6 +76,7 @@
 <template>
   <!-- eslint-disable max-len -->
   <div
+    ref="wrapperElement"
     class="ui3n-drop-files"
     @dragenter="onDragenter"
     @dragleave="onDragleave"
@@ -80,8 +97,8 @@
       </h3>
       <div class="ui3n-drop-files__dropzone-icon">
         <svg
-          width="192"
-          height="192"
+          :width="wrapperElementHeight / 2"
+          :height="wrapperElementHeight / 2"
           viewBox="0 0 192 192"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -110,11 +127,16 @@
 
 <style lang="scss" scoped>
   .ui3n-drop-files {
+    --dropzone-height: 0;
+    --dropzone-title-font: 0;
+
     position: relative;
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
 
     &__dropzone {
+      box-sizing: border-box;
       position: absolute;
       background-color: var(--system-white, #fff);
       display: flex;
@@ -126,19 +148,20 @@
       z-index: 5;
 
       &-border {
+        box-sizing: border-box;
         position: absolute;
-        width: calc(100% - calc(var(--base-size, 8px) * 2));
-        height: calc(100% - calc(var(--base-size, 8px) * 2));
-        top: var(--base-size, 8px);
-        left: var(--base-size, 8px);
+        top: calc(var(--base-size, 8px) + 1px);
+        bottom: calc(var(--base-size, 8px) + 1px);
+        left: calc(var(--base-size, 8px) + 1px);
+        right: calc(var(--base-size, 8px) + 1px);
         border-radius: var(--base-size, 8px);
         border: 2px dashed var(--gray-50, #f2f2f2);
         pointer-events: none;
       }
 
       &-title {
-        margin: 0 0 24px;
-        font-size: var(--font-24, 24px);
+        margin: 0 0 var(--dropzone-title-font);
+        font-size: var(--dropzone-title-font);
         font-weight: 600;
         color: var(--black-30, #b3b3b3);
         pointer-events: none;
@@ -146,8 +169,8 @@
 
       &-icon {
         position: relative;
-        width: 160px;
-        height: 160px;
+        width: calc(var(--dropzone-height) * 0.4);
+        height: calc(var(--dropzone-height) * 0.4);
         border-radius: 50%;
         background-color: var(--gray-50, #f2f2f2);
         display: flex;

package/src/components/ui3n-emoji.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue'
+  import { computed, onMounted, ref, watch } from 'vue'
+  import { emoticons } from '../constants/emoticons'
+
 
   export interface Ui3nEmojiProps {
     emoji: string;
@@ -11,26 +13,43 @@
     (ev: 'click', value: Event): void;
   }
 
-  const props = defineProps<Ui3nEmojiProps>()
+  const props = withDefaults(
+    defineProps<Ui3nEmojiProps>(),
+    {
+      size: 16,
+      readonly: false,
+    },
+  )
   const emit = defineEmits<Ui3nEmojiEmits>()
 
   const emojiElement = ref<HTMLDivElement | null>(null)
-  const params = computed(() => {
-    const {
-      emoji,
-      size = 16,
-      readonly = false,
-    } = props
-
-    return { emoji, size, readonly }
-  })
+  const emojiData = computed(() => emoticons[props.emoji])
 
   onMounted(() => {
     if (emojiElement.value) {
-      emojiElement.value.style.setProperty('--emoji-size', `${params.value.size}px`)
+      emojiElement.value.style.setProperty('--emoji-size', `${props.size}px`)
     }
   })
 
+  watch(
+    () => props.emoji,
+    newValue => {
+      if (!Object.keys(emoticons).includes(newValue)) {
+        console.error(`[Ui3nEmoji] Invalid emoticon: ${newValue}`)
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    () => props.size,
+    (newValue, prevValue) => {
+      if (emojiElement.value && newValue && newValue !== prevValue) {
+        emojiElement.value.style.setProperty('--emoji-size', `${newValue}px`)
+      }
+    },
+  )
+
   const onClick = (ev: Event) => {
     ev.stopImmediatePropagation()
     emit('click', ev)
@@ -42,11 +61,11 @@
     ref="emojiElement"
     :class="[
       'ui3n-emoji',
-      { 'ui3n-emoji--readonly': params.readonly },
+      { 'ui3n-emoji--readonly': props.readonly },
     ]"
     v-on="readonly ? {} : { 'click': onClick }"
   >
-    {{ emoji }}
+    {{ emojiData && emojiData.value }}
   </div>
 </template>
 
@@ -57,6 +76,7 @@
     display: flex;
     width: var(--emoji-size);
     height: var(--emoji-size);
+    font-size: var(--emoji-size);
     justify-content: center;
     align-items: center;
     cursor: pointer;

package/src/components/ui3n-input.vue

@@ -185,6 +185,7 @@
       display: block;
       width: 100%;
       font-size: var(--font-12, 12px);
+      line-height: var(--font-16, 16px);
       font-weight: 600;
       color: var(--black-90, #212121);
       margin-bottom: calc(var(--base-size, 8px) / 2);
@@ -271,11 +272,11 @@
 
     &--with-label {
       .ui3n-input__icon {
-        top: calc(var(--base-size) * 3.5 + 1px);
+        top: calc(var(--base-size, 8px) * 3.5 + 1px);
       }
 
       .ui3n-input__clear-btn {
-        top: calc(var(--base-size) * 3 + 1px);
+        top: calc(var(--base-size, 8px) * 3 + 1px);
       }
     }
   }

package/src/components/ui3n-list.vue

@@ -62,7 +62,7 @@
           <div
             :class="[
               'ui3n-list__item-content',
-              { 'ui3n-list__item-content--disables': props.disabled },
+              { 'ui3n-list__item-content--disabled': props.disabled },
             ]"
             @click.stop="emits('select', { value: item, index })"
           >

package/src/libs/index.ts

@@ -1,11 +0,0 @@
-export * from './sqlite-on-3nstorage'
-export {
-  makeObservableMethodCaller,
-  makeReqRepMethodCaller,
-  makeServiceCaller,
-} from './ipc-service-caller'
-export {
-  SingleConnectionIPCWrap,
-  MultiConnectionIPCWrap,
-  IPCWrap,
-} from './ipc-service'

package/src/libs/ipc-service-caller.ts

@@ -1,121 +0,0 @@
-/*
- Copyright (C) 2022 - 2023 3NSoft Inc.
- 
- This program is free software: you can redistribute it and/or modify it under
- the terms of the GNU General Public License as published by the Free Software
- Foundation, either version 3 of the License, or (at your option) any later
- version.
- 
- This program is distributed in the hope that it will be useful, but
- WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
- See the GNU General Public License for more details.
- 
- You should have received a copy of the GNU General Public License along with
- this program. If not, see <http://www.gnu.org/licenses/>.
-*/
-
-/// <reference path="../@types/platform-defs/w3n.d.ts" />
-
-import { deserializeArgs, serializeArgs } from "./serialization-for-ipc/json-n-binary";
-
-type RPCConnection = web3n.rpc.client.RPCConnection;
-type PassedDatum = web3n.rpc.PassedDatum;
-type Observer<T> = web3n.Observer<T>;
-
-
-export interface TransformOpts {
-    unpackReply?: ((reply: PassedDatum | undefined) => any) | 'noop';
-    packRequest?: ((args: any[]) => PassedDatum | undefined) | 'noop';
-}
-
-function replyFromPassedDatum(
-	data: PassedDatum|undefined, unpack: TransformOpts['unpackReply']
-): any {
-	if (!data) { return; }
-	if (unpack) {
-		if (unpack === 'noop') {
-			return [data.bytes];
-		}
-		else {
-			return unpack(data);
-		}
-	}
-	else {
-		const { bytes, passedByReference } = data;
-		return (bytes ? deserializeArgs(bytes, passedByReference)[0] : undefined);
-	}
-}
-
-function argsToPassedDatum(
-	args: any[], pack: TransformOpts['packRequest']
-): PassedDatum|undefined {
-	if (args === undefined) { return; }
-	if (pack) {
-		if (pack === 'noop') {
-			if (!ArrayBuffer.isView(args[0])) {
-				throw new Error(`Method returned non-binary, while no serialization is set`);
-			}
-			return { bytes: args[0] as Uint8Array };
-		}
-		return pack(args);
-	}
-	else {
-		return serializeArgs(args);
-	}
-}
-
-export function makeReqRepMethodCaller<F extends Function>(
-	connection: RPCConnection, method: string, transforms?: TransformOpts
-): F {
-	return (async (...args: any[]) => {
-		const req = argsToPassedDatum(args, transforms?.packRequest);
-		const reply = await connection.makeRequestReplyCall(method, req);
-		return replyFromPassedDatum(reply, transforms?.unpackReply);
-	}) as any as F;
-}
-
-export function makeObservableMethodCaller<F extends Function>(
-	connection: RPCConnection, method: string, transforms?: TransformOpts
-): F {
-    return ((obs: Observer<any>, ...args: any[]) => {
-        const req = argsToPassedDatum(args, transforms?.packRequest);
-        const obsWrap: Observer<any> = {
-            next: data => {
-                if (!obs.next) {
-                    return;
-                }
-                const ev = replyFromPassedDatum(data, transforms?.unpackReply);
-                obs.next(ev);
-            },
-            complete: obs.complete,
-            error: obs.error
-        };
-        return connection.startObservableCall(method, req, obsWrap);
-    }) as any as F;
-}
-
-export function makeServiceCaller<T>(
-	connection: RPCConnection,
-	reqRepMethods?: (keyof T)[], obsMethods?: (keyof T)[],
-	transforms?: { [method in keyof T]: TransformOpts; }
-): Partial<T> {
-    const caller = {} as T;
-    if (reqRepMethods) {
-        for (const method of reqRepMethods) {
-            caller[method] = makeReqRepMethodCaller(
-					connection, method as string,
-					(transforms ? transforms[method] : undefined)
-				) as any;
-        }
-    }
-    if (obsMethods) {
-        for (const method of obsMethods) {
-            caller[method] = makeObservableMethodCaller(
-					connection, method as string,
-					(transforms ? transforms[method] : undefined)
-				) as any;
-        }
-    }
-    return caller;
-}