@sparkstudio/common-ui 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/common-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -10,17 +10,21 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./dist/index.css": "./dist/index.css"
   },
   "files": [
     "dist"
   ],
+  "sideEffects": [
+    "./dist/index.css"
+  ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsup src/index.ts --format cjs,esm --dts --tsconfig tsconfig.lib.json",
+    "build": "tsup && sass src/index.scss dist/index.css",
     "lint": "eslint .",
     "preview": "vite preview",
     "start": "vite"
@@ -33,7 +37,6 @@
     "@fortawesome/fontawesome-free": "^7.1.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
-    "esbuild-sass-plugin": "^3.3.1",
     "highcharts": "^12.4.0",
     "highcharts-react-official": "^3.2.3"
   },
@@ -47,12 +50,12 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
     "sass": "^1.80.0",
     "tsup": "^8.5.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7"
+    "vite": "^7.1.7",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   }
 }

package/dist/index.cjs

@@ -1,88 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Button: () => Button
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/components/Button.tsx
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-function Button({
-  buttonClassName = "btn btn-primary btn-lg",
-  type = "button",
-  disabled = false,
-  onAction,
-  onClick,
-  onDone,
-  onError,
-  onFinally,
-  children = "Click me",
-  loadingChildren,
-  renderContent,
-  renderLoading,
-  loadingText = "Loading...",
-  showSpinner = true
-}) {
-  const [loading, setLoading] = (0, import_react.useState)(false);
-  const handleClick = async (event) => {
-    if (loading) return;
-    onClick?.(event);
-    if (event.defaultPrevented) return;
-    if (!onAction) return;
-    try {
-      setLoading(true);
-      const result = await onAction();
-      onDone?.(result);
-    } catch (error) {
-      onError?.(error);
-    } finally {
-      setLoading(false);
-      onFinally?.();
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `w-100 text-center mb-3`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    {
-      type,
-      className: `${buttonClassName} ${loading ? "async-btn--loading" : ""}`,
-      onClick: handleClick,
-      disabled: disabled || loading,
-      children: loading ? renderLoading?.() ?? loadingChildren ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        showSpinner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: "spinner-border spinner-border-sm me-2 async-btn__spinner",
-            role: "status",
-            "aria-hidden": "true"
-          }
-        ),
-        loadingText
-      ] }) : renderContent?.() ?? children
-    }
-  ) });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Button
-});
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts","../src/components/Button.tsx"],"sourcesContent":["export * from \"./components/Button\";","import { useState, type ReactNode, type MouseEvent } from \"react\";\r\nimport \"./Button.scss\";\r\n\r\nexport interface ButtonProps {\r\n  buttonClassName?: string;\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n  disabled?: boolean;\r\n\r\n  onAction?: () => Promise<unknown>;\r\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\r\n  onDone?: (result: unknown) => void;\r\n  onError?: (error: unknown) => void;\r\n  onFinally?: () => void;\r\n\r\n  children?: ReactNode;\r\n  loadingChildren?: ReactNode;\r\n\r\n  renderContent?: () => ReactNode;\r\n  renderLoading?: () => ReactNode;\r\n\r\n  loadingText?: string;\r\n  showSpinner?: boolean;\r\n}\r\n\r\nexport function Button({\r\n  buttonClassName = \"btn btn-primary btn-lg\",\r\n  type = \"button\",\r\n  disabled = false,\r\n\r\n  onAction,\r\n  onClick,\r\n  onDone,\r\n  onError,\r\n  onFinally,\r\n\r\n  children = \"Click me\",\r\n\r\n  loadingChildren,\r\n  renderContent,\r\n  renderLoading,\r\n\r\n  loadingText = \"Loading...\",\r\n  showSpinner = true,\r\n}: ButtonProps) {\r\n  const [loading, setLoading] = useState(false);\r\n\r\n  const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\r\n    if (loading) return;\r\n\r\n    onClick?.(event);\r\n    if (event.defaultPrevented) return;\r\n    if (!onAction) return;\r\n\r\n    try {\r\n      setLoading(true);\r\n      const result = await onAction();\r\n      onDone?.(result);\r\n    } catch (error) {\r\n      onError?.(error);\r\n    } finally {\r\n      setLoading(false);\r\n      onFinally?.();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className={`w-100 text-center mb-3`}>\r\n      <button\r\n        type={type}\r\n        className={`${buttonClassName} ${loading ? \"async-btn--loading\" : \"\"}`}\r\n        onClick={handleClick}\r\n        disabled={disabled || loading}\r\n      >\r\n        {loading ? (\r\n          renderLoading?.() ??\r\n          loadingChildren ?? (\r\n            <>\r\n              {showSpinner && (\r\n                <span\r\n                  className=\"spinner-border spinner-border-sm me-2 async-btn__spinner\"\r\n                  role=\"status\"\r\n                  aria-hidden=\"true\"\r\n                />\r\n              )}\r\n              {loadingText}\r\n            </>\r\n          )\r\n        ) : (\r\n          renderContent?.() ?? children\r\n        )}\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA0D;AA4E9C;AApDL,SAAS,OAAO;AAAA,EACrB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EAEA,cAAc;AAAA,EACd,cAAc;AAChB,GAAgB;AACd,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAE5C,QAAM,cAAc,OAAO,UAAyC;AAClE,QAAI,QAAS;AAEb,cAAU,KAAK;AACf,QAAI,MAAM,iBAAkB;AAC5B,QAAI,CAAC,SAAU;AAEf,QAAI;AACF,iBAAW,IAAI;AACf,YAAM,SAAS,MAAM,SAAS;AAC9B,eAAS,MAAM;AAAA,IACjB,SAAS,OAAO;AACd,gBAAU,KAAK;AAAA,IACjB,UAAE;AACA,iBAAW,KAAK;AAChB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,WAAW,0BACd;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,eAAe,IAAI,UAAU,uBAAuB,EAAE;AAAA,MACpE,SAAS;AAAA,MACT,UAAU,YAAY;AAAA,MAErB,oBACC,gBAAgB,KAChB,mBACE,4EACG;AAAA,uBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,eAAY;AAAA;AAAA,QACd;AAAA,QAED;AAAA,SACH,IAGF,gBAAgB,KAAK;AAAA;AAAA,EAEzB,GACF;AAEJ;","names":[]}

package/dist/index.css

@@ -1,32 +0,0 @@
-@charset "UTF-8";
-
-/* src/components/Button.scss */
-.async-btn--loading {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: scale(0.98);
-}
-.async-btn__spinner {
-  color: #ff9800;
-}
-button.btn.btn-primary.btn-lg {
-  background:
-    linear-gradient(
-      45deg,
-      #4caf50,
-      #2196f3);
-  border: none;
-  transition: all 0.2s ease;
-}
-button.btn.btn-primary.btn-lg:hover {
-  background:
-    linear-gradient(
-      45deg,
-      #66bb6a,
-      #42a5f5);
-  transform: translateY(-1px);
-}
-button.btn.btn-primary.btn-lg:active {
-  transform: translateY(0);
-}
-/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Button.scss"],"sourcesContent":["/* Simple styles so you can SEE that SCSS is working */\r\n\r\n/* Base async button look */\r\n.async-btn--loading {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n  transform: scale(0.98);\r\n}\r\n\r\n/* Custom spinner color */\r\n.async-btn__spinner {\r\n  color: #ff9800; // orange\r\n}\r\n\r\n/* Just to prove SCSS compiled — scoped style */\r\nbutton.btn.btn-primary.btn-lg {\r\n  background: linear-gradient(45deg, #4caf50, #2196f3);\r\n  border: none;\r\n  transition: all 0.2s ease;\r\n\r\n  &:hover {\r\n    background: linear-gradient(45deg, #66bb6a, #42a5f5);\r\n    transform: translateY(-1px);\r\n  }\r\n\r\n  &:active {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n"],"mappings":";;;AAGA,CAAA;AACE,WAAA;AACA,UAAA;AACA,aAAA,MAAA;;AAIF,CAAA;AACE,SAAA;;AAIF,MAAA,CAAA,GAAA,CAAA,WAAA,CAAA;AACE;IAAA;MAAA,KAAA;MAAA,OAAA;MAAA;AACA,UAAA;AACA,cAAA,IAAA,KAAA;;AAEA,MAAA,CALF,GAKE,CALF,WAKE,CALF,MAKE;AACE;IAAA;MAAA,KAAA;MAAA,OAAA;MAAA;AACA,aAAA,WAAA;;AAGF,MAAA,CAVF,GAUE,CAVF,WAUE,CAVF,MAUE;AACE,aAAA,WAAA;;","names":[]}

package/dist/index.d.cts

@@ -1,22 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MouseEvent, ReactNode } from 'react';
-
-interface ButtonProps {
-    buttonClassName?: string;
-    type?: "button" | "submit" | "reset";
-    disabled?: boolean;
-    onAction?: () => Promise<unknown>;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onDone?: (result: unknown) => void;
-    onError?: (error: unknown) => void;
-    onFinally?: () => void;
-    children?: ReactNode;
-    loadingChildren?: ReactNode;
-    renderContent?: () => ReactNode;
-    renderLoading?: () => ReactNode;
-    loadingText?: string;
-    showSpinner?: boolean;
-}
-declare function Button({ buttonClassName, type, disabled, onAction, onClick, onDone, onError, onFinally, children, loadingChildren, renderContent, renderLoading, loadingText, showSpinner, }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-export { Button, type ButtonProps };

package/dist/index.d.ts

@@ -1,22 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MouseEvent, ReactNode } from 'react';
-
-interface ButtonProps {
-    buttonClassName?: string;
-    type?: "button" | "submit" | "reset";
-    disabled?: boolean;
-    onAction?: () => Promise<unknown>;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onDone?: (result: unknown) => void;
-    onError?: (error: unknown) => void;
-    onFinally?: () => void;
-    children?: ReactNode;
-    loadingChildren?: ReactNode;
-    renderContent?: () => ReactNode;
-    renderLoading?: () => ReactNode;
-    loadingText?: string;
-    showSpinner?: boolean;
-}
-declare function Button({ buttonClassName, type, disabled, onAction, onClick, onDone, onError, onFinally, children, loadingChildren, renderContent, renderLoading, loadingText, showSpinner, }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-export { Button, type ButtonProps };

package/dist/index.js

@@ -1,61 +0,0 @@
-// src/components/Button.tsx
-import { useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function Button({
-  buttonClassName = "btn btn-primary btn-lg",
-  type = "button",
-  disabled = false,
-  onAction,
-  onClick,
-  onDone,
-  onError,
-  onFinally,
-  children = "Click me",
-  loadingChildren,
-  renderContent,
-  renderLoading,
-  loadingText = "Loading...",
-  showSpinner = true
-}) {
-  const [loading, setLoading] = useState(false);
-  const handleClick = async (event) => {
-    if (loading) return;
-    onClick?.(event);
-    if (event.defaultPrevented) return;
-    if (!onAction) return;
-    try {
-      setLoading(true);
-      const result = await onAction();
-      onDone?.(result);
-    } catch (error) {
-      onError?.(error);
-    } finally {
-      setLoading(false);
-      onFinally?.();
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { className: `w-100 text-center mb-3`, children: /* @__PURE__ */ jsx(
-    "button",
-    {
-      type,
-      className: `${buttonClassName} ${loading ? "async-btn--loading" : ""}`,
-      onClick: handleClick,
-      disabled: disabled || loading,
-      children: loading ? renderLoading?.() ?? loadingChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-        showSpinner && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "spinner-border spinner-border-sm me-2 async-btn__spinner",
-            role: "status",
-            "aria-hidden": "true"
-          }
-        ),
-        loadingText
-      ] }) : renderContent?.() ?? children
-    }
-  ) });
-}
-export {
-  Button
-};
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Button.tsx"],"sourcesContent":["import { useState, type ReactNode, type MouseEvent } from \"react\";\r\nimport \"./Button.scss\";\r\n\r\nexport interface ButtonProps {\r\n  buttonClassName?: string;\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n  disabled?: boolean;\r\n\r\n  onAction?: () => Promise<unknown>;\r\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\r\n  onDone?: (result: unknown) => void;\r\n  onError?: (error: unknown) => void;\r\n  onFinally?: () => void;\r\n\r\n  children?: ReactNode;\r\n  loadingChildren?: ReactNode;\r\n\r\n  renderContent?: () => ReactNode;\r\n  renderLoading?: () => ReactNode;\r\n\r\n  loadingText?: string;\r\n  showSpinner?: boolean;\r\n}\r\n\r\nexport function Button({\r\n  buttonClassName = \"btn btn-primary btn-lg\",\r\n  type = \"button\",\r\n  disabled = false,\r\n\r\n  onAction,\r\n  onClick,\r\n  onDone,\r\n  onError,\r\n  onFinally,\r\n\r\n  children = \"Click me\",\r\n\r\n  loadingChildren,\r\n  renderContent,\r\n  renderLoading,\r\n\r\n  loadingText = \"Loading...\",\r\n  showSpinner = true,\r\n}: ButtonProps) {\r\n  const [loading, setLoading] = useState(false);\r\n\r\n  const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\r\n    if (loading) return;\r\n\r\n    onClick?.(event);\r\n    if (event.defaultPrevented) return;\r\n    if (!onAction) return;\r\n\r\n    try {\r\n      setLoading(true);\r\n      const result = await onAction();\r\n      onDone?.(result);\r\n    } catch (error) {\r\n      onError?.(error);\r\n    } finally {\r\n      setLoading(false);\r\n      onFinally?.();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className={`w-100 text-center mb-3`}>\r\n      <button\r\n        type={type}\r\n        className={`${buttonClassName} ${loading ? \"async-btn--loading\" : \"\"}`}\r\n        onClick={handleClick}\r\n        disabled={disabled || loading}\r\n      >\r\n        {loading ? (\r\n          renderLoading?.() ??\r\n          loadingChildren ?? (\r\n            <>\r\n              {showSpinner && (\r\n                <span\r\n                  className=\"spinner-border spinner-border-sm me-2 async-btn__spinner\"\r\n                  role=\"status\"\r\n                  aria-hidden=\"true\"\r\n                />\r\n              )}\r\n              {loadingText}\r\n            </>\r\n          )\r\n        ) : (\r\n          renderContent?.() ?? children\r\n        )}\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AAAA,SAAS,gBAAiD;AA4E9C,mBAEI,KAFJ;AApDL,SAAS,OAAO;AAAA,EACrB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EAEA,cAAc;AAAA,EACd,cAAc;AAChB,GAAgB;AACd,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,cAAc,OAAO,UAAyC;AAClE,QAAI,QAAS;AAEb,cAAU,KAAK;AACf,QAAI,MAAM,iBAAkB;AAC5B,QAAI,CAAC,SAAU;AAEf,QAAI;AACF,iBAAW,IAAI;AACf,YAAM,SAAS,MAAM,SAAS;AAC9B,eAAS,MAAM;AAAA,IACjB,SAAS,OAAO;AACd,gBAAU,KAAK;AAAA,IACjB,UAAE;AACA,iBAAW,KAAK;AAChB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE,oBAAC,SAAI,WAAW,0BACd;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,eAAe,IAAI,UAAU,uBAAuB,EAAE;AAAA,MACpE,SAAS;AAAA,MACT,UAAU,YAAY;AAAA,MAErB,oBACC,gBAAgB,KAChB,mBACE,iCACG;AAAA,uBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,eAAY;AAAA;AAAA,QACd;AAAA,QAED;AAAA,SACH,IAGF,gBAAgB,KAAK;AAAA;AAAA,EAEzB,GACF;AAEJ;","names":[]}