@licklist/design 0.78.5-dev.87 → 0.78.5-dev.9

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.87",
+  "version": "0.78.5-dev.9",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
+    "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
   },
   "author": "Yaroslav Havryliv",
   "license": "MIT",
   "type": "module",
-  "homepage": "https://bitbucket.org/bookedit-licklist/licklist_design#readme",
+  "homepage": "https://bitbucket.org/artelogicsoft/licklist_design#readme",
   "description": "",
   "scripts": {
-    "start": "storybook dev -p 9009",
-    "build-storybook": "storybook build -o build",
+    "start": "start-storybook -p 9009 -s ./src/assets --no-manager-cache",
+    "build-storybook": "build-storybook -c .storybook -o build",
     "type-check": "tsc --noEmit",
     "type-check:watch": "yarn type-check -- --watch",
     "build": "rollup -c",
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.1-dev.22",
+    "@licklist/core": "0.36.1-dev.2",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.36.4-dev.15",
+    "@licklist/plugins": "0.36.4-dev.1",
     "clsx": "2.1.1",
     "i18next": "25.3.2",
     "lodash": "4.17.21",
@@ -64,16 +64,14 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.36.1-dev.22",
+    "@licklist/core": "0.36.1-dev.2",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.36.4-dev.15",
+    "@licklist/plugins": "0.36.4-dev.1",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-aria/utils": "3.9.0",
-    "@svgr/webpack": "^6.5.1",
     "@tanstack/react-table": "8.10.6",
     "@tiptap/core": "2.0.0-beta.176",
     "@tiptap/extension-blockquote": "2.0.0-beta.29",
@@ -99,8 +97,6 @@
     "@wojtekmaj/react-daterange-picker": "4.1.0",
     "bootstrap": "4.6.0",
     "bootstrap-social": "5.1.1",
-    "chromatic": "^13.3.1",
-    "clsx": "2.1.1",
     "date-fns": "2.29.3",
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",
@@ -109,12 +105,13 @@
     "i18next": "25.3.2",
     "konva": "6.0.0",
     "lodash": "4.17.21",
-    "lucide-react": "^0.555.0",
     "luxon": "3.5.0",
     "moment": "2.29.1",
+    "react": "18.3.1",
     "react-bootstrap": "1.6.1",
     "react-color": "2.19.3",
     "react-date-range": "1.4.0",
+    "react-dom": "18.3.1",
     "react-email-editor": "1.6.1",
     "react-highlighter": "0.4.3",
     "react-hook-form": "7.52.2",
@@ -133,27 +130,23 @@
     "react-virtualized": "9.22.5",
     "recharts": "2.0.6",
     "rrule": "2.6.8",
-    "style-inject": "0.3.0",
     "twemoji-parser": "14.0.0",
     "use-debounce": "7.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@chromatic-com/storybook": "2.0.2",
+    "@chromatic-com/storybook": "1.6.1",
     "@rollup/plugin-image": "3.0.3",
     "@rollup/plugin-json": "6.1.0",
-    "@storybook/addon-a11y": "9.1.13",
-    "@storybook/addon-docs": "9.1.13",
-    "@storybook/addon-links": "9.1.13",
-    "@storybook/react": "9.1.13",
-    "@storybook/react-vite": "9.1.13",
-    "@storybook/react-webpack5": "^9.1.13",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-actions": "6.3.12",
+    "@storybook/addon-docs": "6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
+    "@storybook/addon-knobs": "6.3.1",
+    "@storybook/addon-links": "6.3.12",
+    "@storybook/preset-scss": "1.0.3",
+    "@storybook/react": "6.3.12",
     "@svgr/rollup": "8.1.0",
     "@swc/core": "1.6.5",
-    "@types/babel__core": "^7",
-    "@types/babel__preset-env": "^7",
     "@types/lodash": "4.17.5",
     "@types/luxon": "3.4.2",
     "@types/mdx-js__react": "1.5.3",
@@ -186,33 +179,27 @@
     "postcss-simple-vars": "7.0.1",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "0.6.8",
-    "react-router-dom": "6.30.1",
     "rollup": "3.29.4",
     "rollup-plugin-auto-external": "2.0.0",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-swc3": "0.11.2",
     "rollup-plugin-typescript2": "0.31.0",
-    "sass": "^1.93.2",
+    "sass": "1.77.8",
     "sass-loader": "10.1.1",
-    "storybook": "9.1.13",
     "style-loader": "2.0.0",
     "tailwindcss": "3.4.13",
-    "ts-loader": "^9.5.4",
-    "typescript": "^5.9.3",
+    "typescript": "5.5.4",
     "url-loader": "4.1.1",
     "vite": "5.3.5",
     "vite-plugin-dts": "4.0.2",
-    "vite-plugin-svgr": "^4.5.0",
+    "vite-plugin-svgr": "4.2.0",
     "vite-tsconfig-paths": "5.0.1"
   },
   "resolutions": {
     "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "@types/react-dom": "18.3.1"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
@@ -221,10 +208,10 @@
       "yarn tsc"
     ]
   },
+  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
   },
-  "packageManager": "yarn@4.8.0",
-  "stableVersion": "0.78.5-dev.39"
+  "stableVersion": "0.71.4-dev.1"
 }

package/rollup.config.js

@@ -7,7 +7,6 @@ import autoExternal from 'rollup-plugin-auto-external'
 import purge from 'rollup-plugin-delete'
 import json from '@rollup/plugin-json'
 import { swc } from 'rollup-plugin-swc3'
-import postcss from 'rollup-plugin-postcss'
 
 export default [
   {
@@ -29,21 +28,11 @@ export default [
       json(),
       image(),
       svgr(),
-      postcss({
-        extensions: ['.css', '.scss'],
-        use: ['sass'],
-        extract: false,
-        minimize: true,
-        inject(cssVariableName) {
-          return `import styleInject from 'style-inject';\nstyleInject(${cssVariableName});`
-        },
-      }),
 
       copy({
         targets: [
           { src: './src/assets/*', dest: './dist/assets' },
           { src: './src/styles/*', dest: './dist/styles' },
-          { src: './src/v2/styles/*', dest: './dist/v2/styles' },
           { src: './src/root.css', dest: './dist' },
         ],
       }),
@@ -53,7 +42,7 @@ export default [
         clean: true,
       }),
     ],
-    external: ['tslib', 'style-inject', /node_modules/],
+    external: ['tslib', /node_modules/],
   },
   {
     input: 'src/index.ts',
@@ -70,15 +59,6 @@ export default [
       json(),
       image(),
       svgr(),
-      postcss({
-        extensions: ['.css', '.scss'],
-        use: ['sass'],
-        extract: false,
-        minimize: true,
-        inject(cssVariableName) {
-          return `import styleInject from 'style-inject';\nstyleInject(${cssVariableName});`
-        },
-      }),
 
       swc({
         jsc: {
@@ -110,6 +90,6 @@ export default [
         isModule: true,
       }),
     ],
-    external: ['tslib', 'style-inject', /node_modules/],
+    external: ['tslib', /node_modules/],
   },
 ]

package/src/CustomAlertTypes/AlertBox.tsx

@@ -0,0 +1,87 @@
+import { createRoot } from "react-dom/client";
+import { AlertRenderer } from './AlertRender';
+import { alertThemes } from "./alertThemes";
+
+export interface AlertConfig {
+  type: keyof typeof alertThemes;
+  title?: string;
+  subTitle?: string;
+  message?: string | string[];
+  description?: string;
+  actionText?: string;
+  secondaryActionText?: string;
+  onAction?: (() => void) | null;
+  onSecondaryAction?: (() => void) | null;
+  timeout?: number;
+  closable?: boolean;
+  titleColor?: string;
+  subTitleColor?: string;
+  showArrow?: boolean;
+  showSecondaryArrow?: boolean;
+  alignActionsRight?: boolean;
+  mount?: "container" | "global";
+}
+
+let container: HTMLDivElement | null = null;
+let root: any = null;
+
+function createContainer(mount: "container" | "global" = "global") {
+  if (container) return container;
+  container = document.createElement("div");
+  root = createRoot(container);
+
+  if (mount === "container") {
+    const containerFluid = document.querySelector(
+      ".container-fluid"
+    ) as HTMLDivElement | null;
+
+    if (containerFluid) {
+      container.style.cssText = `
+        width: 100%;
+        margin-bottom: 1rem;
+        pointer-events: auto;
+      `;
+      containerFluid.insertBefore(container, containerFluid.firstChild);
+    } else {
+      document.body.appendChild(container);
+    }
+  } else {
+    container.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 9999;
+      pointer-events: none;
+    `;
+    document.body.appendChild(container);
+  }
+  injectShrinkBarAnimation();
+  return container;
+}
+
+function injectShrinkBarAnimation() {
+  if (document.getElementById('shrinkBar-style')) return;
+  const style = document.createElement('style');
+  style.id = 'shrinkBar-style';
+  style.textContent = `
+    @keyframes shrinkBar {
+      from { width: 100%; }
+      to { width: 0%; }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+export function showAlert(config: AlertConfig) {
+  createContainer(config.mount || "global");
+  const removeAlert = () => {
+    if (root) root.render(null);
+  };
+
+  if (config.timeout && config.timeout > 0) {
+    setTimeout(removeAlert, config.timeout);
+  }
+  const alertBox = AlertRenderer.createAlert(config, removeAlert);
+  root.render(alertBox);
+}

package/src/CustomAlertTypes/AlertRender.ts

@@ -0,0 +1,283 @@
+import React from "react";
+import { MdClose, MdArrowForward } from "react-icons/md";
+import { alertThemes, commonStyle } from "./alertThemes";
+import { wrapText } from "./utils/textWrapperUtils";
+import { AlertConfig } from './AlertBox'
+export class AlertRenderer {
+  static createAlert(config: AlertConfig, onClose: () => void) {
+    const theme = alertThemes[config.type];
+
+    return React.createElement(
+      "div",
+      {
+        style: {
+          backgroundColor: theme.bg,
+          border: theme.border,
+          borderRadius: commonStyle.borderRad,
+          padding: "16px 20px 0",
+          width: "100%",
+          maxWidth: "100%",
+          margin: "0 auto",
+          pointerEvents: "auto",
+          fontFamily: commonStyle.fontFamily,
+          position: "relative",
+          overflow: "hidden",
+          boxSizing: "border-box",
+        },
+      },
+
+      // HEADER ROW (icon + title + close button)
+      React.createElement(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "20px 1fr auto", // icon | title | X
+            alignItems: "center",
+            columnGap: "12px",
+            marginBottom: "4px",
+          },
+        },
+
+        // Icon
+        React.createElement(theme.IconComponent, {
+          size: 20,
+          style: {
+            color: theme.icon,
+            gridColumn: "1 / 2",
+            gridRow: "1 / 2",
+          },
+        }),
+
+        // Title
+        React.createElement(
+          "h4",
+          {
+            style: {
+              gridColumn: "2 / 3",
+              gridRow: "1 / 2",
+              alignSelf: "center",
+              fontFamily: commonStyle.fontFamily,
+              fontSize: "16px",
+              fontWeight: 600,
+              lineHeight: "18px",
+              color: config.titleColor || commonStyle.fontFamily,
+              margin: 0,
+            },
+          },
+          config.title || theme.defaultTitle
+        ),
+
+        // Close Button
+        config.closable !== true &&
+        React.createElement(
+          "button",
+          {
+            style: {
+              gridColumn: "3 / 4",
+              gridRow: "1 / 2",
+              background: "none",
+              border: "none",
+              color: config.type === "info" ? "#1E3A8A" : theme.icon,
+              cursor: "pointer",
+              padding: 0,
+              lineHeight: 1,
+              display: "flex",
+              alignItems: "center",
+            },
+            onClick: onClose,
+          },
+          React.createElement(MdClose, { size: 20 })
+        )
+      ),
+
+      // BODY (Subtitle, Message, Description, Actions)
+      React.createElement(
+        "div",
+        {
+          style: {
+            marginLeft: "32px", // aligns with title, not icon
+            marginBottom:
+              !config.message && !config.description && !config.actionText
+                ? "12px"
+                : "0",
+          },
+        },
+
+        // Subtitle
+        config.subTitle &&
+        React.createElement(
+          "span",
+          {
+            style: {
+              fontFamily: "Geist, system-ui, sans-serif",
+              fontSize: "16px",
+              fontWeight: 600,
+              lineHeight: "18px",
+              color: config.subTitleColor || commonStyle.color,
+              display: "block",
+              marginBottom: "4px",
+            },
+          },
+          config.subTitle
+        ),
+
+        // Message
+        config.message &&
+        (Array.isArray(config.message)
+          ? React.createElement(
+            "ul",
+            {
+              style: {
+                margin: "0 0 8px 0",
+                paddingLeft: "20px",
+                fontFamily: commonStyle.fontFamily,
+                fontSize: "15px",
+                fontWeight: 400,
+                lineHeight: "20px",
+                color: commonStyle.color,
+              },
+            },
+            config.message.map((line, idx) =>
+              React.createElement(
+                "li",
+                {
+                  key: idx,
+                  style: {
+                    fontSize: "15px",
+                    fontWeight: 400,
+                    lineHeight: "20px",
+                    fontFamily: "Geist, system-ui, sans-serif",
+                    color: commonStyle.color,
+                  },
+                },
+                line
+              )
+            )
+          )
+          : React.createElement(
+            "p",
+            {
+              style: {
+                fontFamily: commonStyle.fontFamily,
+                fontSize: "15px",
+                fontWeight: 400,
+                lineHeight: "20px",
+                color: commonStyle.color,
+                margin: "0 0 8px 0",
+              },
+            },
+            config.message
+          )),
+
+        // Description
+        config.description &&
+        React.createElement(
+          "p",
+          {
+            style: {
+              fontFamily: commonStyle.fontFamily,
+              fontSize: "15px",
+              fontWeight: 400,
+              lineHeight: "20px",
+              color: commonStyle.color,
+              margin: "0 0 12px 0",
+              whiteSpace: "pre-line",
+            },
+          },
+          wrapText(config.description, 150)
+        ),
+
+        // Actions
+        (config.actionText || config.secondaryActionText) &&
+        React.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              gap: "16px",
+              marginTop: "6px",
+              justifyContent: config.alignActionsRight
+                ? "flex-end"
+                : "flex-start",
+              marginBottom: "8px",
+            },
+          },
+
+          // Primary Action
+          config.actionText &&
+          React.createElement(
+            "button",
+            {
+              style: {
+                fontFamily: commonStyle.fontFamily,
+                fontSize: "15px",
+                fontWeight: 600,
+                lineHeight: "20px",
+                color: commonStyle.color,
+                background: "none",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+              },
+              onClick: () => {
+                if (config.onAction) config.onAction();
+                onClose();
+              },
+            },
+            config.actionText,
+            config.showArrow &&
+            React.createElement(MdArrowForward, { size: 16 })
+          ),
+
+          // Secondary Action
+          config.secondaryActionText &&
+          React.createElement(
+            "button",
+            {
+              style: {
+                fontFamily: commonStyle.fontFamily,
+                fontSize: "15px",
+                fontWeight: 600,
+                lineHeight: "20px",
+                color: commonStyle.color,
+                background: "none",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+              },
+              onClick: () => {
+                if (config.onSecondaryAction) config.onSecondaryAction();
+                onClose();
+              },
+            },
+            config.secondaryActionText,
+            config.showSecondaryArrow &&
+            React.createElement(MdArrowForward, { size: 16 })
+          )
+        )
+      ),
+
+      // Progress Bar
+      config.timeout &&
+      React.createElement("div", {
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          height: "4px",
+          backgroundColor: theme.icon,
+          width: "100%",
+          animation: `shrinkBar ${config.timeout}ms linear forwards`,
+        },
+      })
+    );
+  }
+}

package/src/CustomAlertTypes/alertThemes.ts

@@ -0,0 +1,72 @@
+import React from "react";
+
+// Factory for simple SVG icon components
+function createSvgIcon(pathD: string, fillColor: string) {
+  return () =>
+    React.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+      },
+      React.createElement("path", { d: pathD, fill: fillColor })
+    );
+}
+
+// Each icon path (different geometry and colors)
+const iconInfoPath =
+  'M16 7C20.9706 7 25 11.0294 25 16C25 20.9706 20.9706 25 16 25C11.0294 25 7 20.9706 7 16C7 11.0294 11.0294 7 16 7ZM16 14C15.4477 14 15 14.4477 15 15V20C15 20.5523 15.4477 21 16 21C16.5523 21 17 20.5523 17 20V15C17 14.4477 16.5523 14 16 14ZM16 11C15.4477 11 15 11.4477 15 12C15 12.5523 15.4477 13 16 13C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11Z';
+
+const warningIconPath =
+  'M15.3496 8.46973C15.7414 7.84329 16.6543 7.84314 17.0459 8.46973L25.2412 21.583C25.6574 22.249 25.1788 23.113 24.3936 23.1133H8.00195C7.21654 23.1133 6.73711 22.249 7.15332 21.583L15.3496 8.46973ZM16.1973 19.1133C15.6451 19.1134 15.1973 19.5611 15.1973 20.1133C15.1973 20.6654 15.6451 21.1132 16.1973 21.1133C16.7495 21.1133 17.1972 20.6655 17.1973 20.1133C17.1973 19.561 16.7496 19.1133 16.1973 19.1133ZM15.1973 18.1133H17.1973V13.1133H15.1973V18.1133Z';
+
+const errorIconPath =
+  'M16.1975 7C21.1681 7 25.1975 11.0294 25.1975 16C25.1975 20.9706 21.1681 25 16.1975 25C11.2269 25 7.19751 20.9706 7.19751 16C7.19751 11.0294 11.2269 7 16.1975 7ZM16.1975 14.5859L13.3694 11.7578L11.9553 13.1719L14.7834 16L11.9553 18.8281L13.3694 20.2422L16.1975 17.4141L19.0256 20.2422L20.4397 18.8281L17.6116 16L20.4397 13.1719L19.0256 11.7578L16.1975 14.5859Z';
+
+const successIconPath =
+  'M16 7C20.9706 7 25 11.0294 25 16C25 20.9706 20.9706 25 16 25C11.0294 25 7 20.9706 7 16C7 11.0294 11.0294 7 16 7ZM14.4463 17.6055L12.7217 15.8076L11.2783 17.1924L14.3525 20.3945L21.6729 13.7402L20.3271 12.2598L14.4463 17.6055Z';
+// Specific icons with unique fills
+export const ErrorIcon = createSvgIcon(errorIconPath, "#E0423A");   // red
+export const SuccessIcon = createSvgIcon(successIconPath, "#52C22B"); // green
+export const InfoIcon = createSvgIcon(iconInfoPath, "#0E8CE2");    // blue
+export const WarningIcon = createSvgIcon(warningIconPath, "#E2A50C"); // yellow
+
+export const commonStyle = {
+  fontFamily: 'Geist, system-ui, sans-serif',
+  color: '#14215A',
+  borderRad: '8px',
+}
+
+
+export const alertThemes = {
+  error: {
+    bg: "#FCECEB",
+    border: "2px solid #F5C4C2",
+    icon: "#E0423A",
+    IconComponent: ErrorIcon,
+    defaultTitle: "Error!",
+  },
+  success: {
+    bg: "#EEF9EA",
+    border: "2px solid #C9ECBD",
+    icon: "#52C22B",
+    IconComponent: SuccessIcon,
+    defaultTitle: "Success!",
+  },
+  warning: {
+    bg: "#FCF6E7",
+    border: "2px solid #F2D68F",
+    icon: "#E2A50C",
+    IconComponent: WarningIcon,
+    defaultTitle: "Warning!",
+  },
+  info: {
+    bg: "#E7F4FC",
+    border: "2px solid #B4DBF6",
+    icon: "#0E8CE2",
+    IconComponent: InfoIcon,
+    defaultTitle: "Info",
+  },
+};

package/src/CustomAlertTypes/utils/textWrapperUtils.ts

@@ -0,0 +1,26 @@
+/**
+ * Wraps text into multiple lines by word count limit.
+ * @param text - The input string
+ * @param limit - Max characters per line
+ * @returns Wrapped text as a single string with newlines
+ */
+export function wrapText(text: string, limit: number): string {
+  const words = text.split(' ');
+  let lines: string[] = [];
+  let currentLine = '';
+
+  words.forEach((word) => {
+    if ((currentLine + word).length >= limit) {
+      lines.push(currentLine.trim());
+      currentLine = word + ' ';
+    } else {
+      currentLine += word + ' ';
+    }
+  });
+
+  if (currentLine.trim() !== '') {
+    lines.push(currentLine.trim());
+  }
+
+  return lines.join('\n');
+}