Merge pull request #10 from Explicit12/FN-1818_Rewrite-notify-compone…

…nt_Dmytro-Holdobin

Rewrite notify component

.storybook/preview.js

@@ -6,7 +6,6 @@ import { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";
 // Vue plugins
 import { createStore } from "vuex";
 import { createVueless } from "vueless";
-import NotifyServiceDefault from "vueless/ui.notify/services";
 
 // Tailwind styles
 import "./index.pcss";
@@ -27,7 +26,6 @@ const vueless = createVueless();
 const storybookApp = (app) => {
   app.use(store);
   app.use(vueless);
-  app.use(new NotifyServiceDefault().notifyInstance);
 };
 
 // Setup storybook

package.json

@@ -24,12 +24,11 @@
     "package:prepare": "node src/gen.web-types && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && rm -rf dist/assets && node dist.prepare"
   },
   "dependencies": {
-    "@kyvg/vue3-notification": "^3.2.1",
-    "@material-symbols/svg-500": "^0.17.3",
-    "@tailwindcss/forms": "^0.5.7",
-    "@uppy/core": "^3.10.1",
-    "@uppy/drag-drop": "^3.1.0",
-    "@uppy/vue": "^1.1.2",
+    "@material-symbols/svg-500": "^0.14.3",
+    "@tailwindcss/forms": "^0.5.4",
+    "@uppy/core": "^3.3.1",
+    "@uppy/drag-drop": "^3.0.2",
+    "@uppy/vue": "^1.0.2",
     "cva": "^1.0.0-beta.1",
     "lodash-es": "^4.17.21",
     "tailwind-merge": "^2.3.0",

src/adatper.locale/locales/en.js

@@ -8,6 +8,7 @@ import calendarConfig from "../../ui.form-calendar/configs/default.config";
 import datepickerConfig from "../../ui.form-date-picker/configs/default.config";
 import datepickerRangeConfig from "../../ui.form-date-picker-range/configs/default.config";
 import dataListConfig from "../../ui.data-list/configs/default.config";
+import notifyDefaultConfig from "../../ui.notify/configs/default.config";
 
 export default {
   USelect: selectConfig.i18n,
@@ -20,4 +21,5 @@ export default {
   UDatePicker: datepickerConfig.i18n,
   UDatePickerRange: datepickerRangeConfig.i18n,
   UDataList: dataListConfig.i18n,
+  UNotify: notifyDefaultConfig.i18n,
 };

src/index.js

@@ -2,6 +2,15 @@ import { createLocale, LocaleSymbol } from "./composable.locale";
 
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en";
+export {
+  notify,
+  notifySuccess,
+  notifyWarning,
+  notifyError,
+  clearAllNotifications,
+  setDelayedNotify,
+  getDelayedNotify,
+} from "./ui.notify/services";
 
 export function createVueless(options = {}) {
   const locale = createLocale(options.locale);

src/ui.notify/Docs.mdx

@@ -0,0 +1,84 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />
+
+## Trigger notifications
+You can trigger notification using *notify* method. Use *notifySuccess, notifyWarning, notifyError* methods to trigger notification of specific type.
+
+<Source code={`
+import {
+    notify,
+    notifySuccess,
+    notifyWarning,
+    notifyError,
+} from "vueless";
+
+notify({
+    type: "success" // success, warning, error
+    title: "" // Some label
+    text: "" // Some text content
+    duration: 1000 // Duration in milliseconds
+    delayDuplicates: false // Delay notifications with same text
+});
+
+const durationInMilliseconds = 1000;
+
+notifySuccess("Some success text", durationInMilliseconds);
+notifyWarning("Some warning text", durationInMilliseconds);
+notifyError("Some error text", durationInMilliseconds);
+`} language="jsx" dark />
+
+## Clear active notifications
+Use *clearAllNotifications* method to clear all active notifications.
+
+<Source code={`
+import { clearAllNotifications, notifySuccess } from "vueless";
+
+const durationInMilliseconds = 1000;
+notifySuccess("Some success text", durationInMilliseconds);
+
+clearAllNotifications();
+`} language="jsx" dark />
+
+## Trigger notifications
+You can create delayed notification which you can trigger any time later.
+
+<Source code={`
+import { setDelayedNotify, getDelayedNotify } from "vueless";
+
+setDelayedNotify({
+    type: "success" // success, warning, error
+    title: "" // Some label
+    text: "" // Some text content
+    duration: 1000 // Duration in milliseconds
+    delayDuplicates: false // Delay notifications with same text
+});
+
+setTimeout(getDelayedNotify, 10_000);
+`} language="jsx" dark />
+
+## Place notification relatively to navigation elements
+Provide *positionClasses* key for UNotify config to take navigation elements offset into account. 
+By default, it will be looking for UNotifyPage and UNotifyAside classes.
+
+<Source code={`
+const notifyConfig = {
+    positionClasses: {
+        page: "UNotifyPage",
+        aside: "UNotifyAside",
+    },
+}
+`} language="jsx" dark />

src/ui.notify/composables/attrs.composable.js

@@ -0,0 +1,30 @@
+import useUI from "../../composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const bodyAttrs = getAttrs("body");
+  const contentAttrs = getAttrs("content");
+  const labelAttrs = getAttrs("label");
+  const descriptionAttrs = getAttrs("description");
+  const iconSuccessAttrs = getAttrs("iconSuccess");
+  const iconWarningAttrs = getAttrs("iconWarning");
+  const iconErrorAttrs = getAttrs("iconError");
+  const iconCloseAttrs = getAttrs("iconClose");
+
+  return {
+    config,
+    wrapperAttrs,
+    bodyAttrs,
+    contentAttrs,
+    labelAttrs,
+    descriptionAttrs,
+    iconSuccessAttrs,
+    iconWarningAttrs,
+    iconCloseAttrs,
+    iconErrorAttrs,
+  };
+}

src/ui.notify/configs/default.config.js

@@ -0,0 +1,47 @@
+export default /*tw*/ {
+  wrapper: "absolute overflow-visible md:w-[22rem]",
+  body: `
+    mb-3 flex w-fit items-center justify-center gap-3 rounded-2xl bg-gray-900/90 
+    p-4 shadow-[0_4px_16px_rgba(17,24,39,0.5)] backdrop-blur-md md:shadow-[0_0px_12px_rgba(0,0,0,0.25)]
+  `,
+  bodySuccess: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(74,222,128,0.1)_2.17%,transparent)]",
+  bodyWarning: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,146,60,0.2)_2.17%,transparent)]",
+  bodyError: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,113,133,0.2)_2.17%,transparent)]",
+  content: "w-full flex flex-col max-w-full px-3 text-sm text-gray-200",
+  label: "mb-1 font-medium",
+  description: "break-words font-normal leading-5",
+  iconSuccess: "",
+  iconSuccessName: "check_circle",
+  iconWarning: "",
+  iconWarningName: "warning",
+  iconError: "",
+  iconErrorName: "error",
+  iconClose: "",
+  iconCloseName: "close",
+  transitionGroup: {
+    moveClass: "transition-all duration-500",
+    enterActiveClass: "transition-all duration-500",
+    leaveActiveClass: "transition-all duration-500 absolute",
+    enterFromClass: "opacity-0",
+    leaveToClass: "opacity-0",
+  },
+  duration: {
+    short: 4000,
+    medium: 8000,
+    long: 12000,
+  },
+  i18n: {
+    success: "Operation successful.",
+    warning: "Operation warning.",
+    error: "Operation error.",
+  },
+  positionClasses: {
+    page: "UNotifyPage",
+    aside: "UNotifyAside",
+  },
+  defaultVariants: {
+    xPosition: "center",
+    yPosition: "top",
+    vHtml: false,
+  },
+};

src/ui.notify/constants/index.js

@@ -0,0 +1,19 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UNotify = "UNotify";
+
+export const NOTIFY_TYPE = {
+  success: "success",
+  warning: "warning",
+  error: "error",
+};
+
+export const POSITION = {
+  left: "left",
+  right: "right",
+  top: "top",
+  bottom: "bottom",
+  center: "center",
+};