@sparkstudio/common-ui 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +72 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/Button.tsx"],"sourcesContent":["export * from \"./components/Button\"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/Button.tsx"],"sourcesContent":["export * from \"./components/Button\";\r\n","import { useState, type ReactNode, type MouseEvent } from \"react\";\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;AA2E9C;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
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
@import "/node_modules/bootstrap/dist/css/bootstrap.css";
|
|
1
3
|
:root {
|
|
2
4
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
5
|
line-height: 1.5;
|
|
@@ -67,4 +69,74 @@ button:focus, button:focus-visible {
|
|
|
67
69
|
}
|
|
68
70
|
}
|
|
69
71
|
|
|
72
|
+
/* Simple styles so you can SEE that SCSS is working */
|
|
73
|
+
/* Base async button look */
|
|
74
|
+
.async-btn--loading {
|
|
75
|
+
opacity: 0.6;
|
|
76
|
+
cursor: not-allowed;
|
|
77
|
+
transform: scale(0.98);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Custom spinner color */
|
|
81
|
+
.async-btn__spinner {
|
|
82
|
+
color: #ff9800;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Just to prove SCSS compiled — scoped style */
|
|
86
|
+
button.btn.btn-primary.btn-lg {
|
|
87
|
+
background: linear-gradient(45deg, #4caf50, #2196f3);
|
|
88
|
+
border: none;
|
|
89
|
+
transition: all 0.2s ease;
|
|
90
|
+
}
|
|
91
|
+
button.btn.btn-primary.btn-lg:hover {
|
|
92
|
+
background: linear-gradient(45deg, #66bb6a, #42a5f5);
|
|
93
|
+
transform: translateY(-1px);
|
|
94
|
+
}
|
|
95
|
+
button.btn.btn-primary.btn-lg:active {
|
|
96
|
+
transform: translateY(0);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
#root {
|
|
100
|
+
max-width: 1280px;
|
|
101
|
+
margin: 0 auto;
|
|
102
|
+
padding: 2rem;
|
|
103
|
+
text-align: center;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.logo {
|
|
107
|
+
height: 6em;
|
|
108
|
+
padding: 1.5em;
|
|
109
|
+
will-change: filter;
|
|
110
|
+
transition: filter 300ms;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.logo:hover {
|
|
114
|
+
filter: drop-shadow(0 0 2em rgba(100, 108, 255, 0.6666666667));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.logo.react:hover {
|
|
118
|
+
filter: drop-shadow(0 0 2em rgba(97, 218, 251, 0.6666666667));
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
@keyframes logo-spin {
|
|
122
|
+
from {
|
|
123
|
+
transform: rotate(0deg);
|
|
124
|
+
}
|
|
125
|
+
to {
|
|
126
|
+
transform: rotate(360deg);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
130
|
+
a:nth-of-type(2) .logo {
|
|
131
|
+
animation: logo-spin infinite 20s linear;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
.card {
|
|
135
|
+
padding: 2em;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.read-the-docs {
|
|
139
|
+
color: #888;
|
|
140
|
+
}
|
|
141
|
+
|
|
70
142
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/index.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/index.scss"],"names":[],"mappings":";AAEQ;AAgCR;EACE,aA3BW;EA4BX;EACA;EAEA;EACA,OAxBiB;EAyBjB,kBA5Bc;EA8Bd;EACA;EACA;EACA;;AAGA;EAfF;IAgBI,OAjCc;IAkCd,kBArCa;;;;AA6CjB;EACE;EACA,OAnDc;EAoDd;;AAEA;EACE,OAtDkB;;AAyDpB;EACE;IACE;;;;AASN;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBApFe;EAqFf;EACA;;AAEA;EACE,cAlGY;;AAqGd;EApFA;;AAyFA;EApBF;IAqBI,kBAjGc;;;;AAqGlB;AAEA;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;;;AAGF;EACE","file":"index.css"}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button.tsx"],"sourcesContent":["import { useState, type ReactNode, type MouseEvent } from \"react\";\r\
|
|
1
|
+
{"version":3,"sources":["../src/components/Button.tsx"],"sourcesContent":["import { useState, type ReactNode, type MouseEvent } from \"react\";\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;AA2E9C,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":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sparkstudio/common-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"scripts": {
|
|
26
26
|
"dev": "vite",
|
|
27
|
-
"build": "tsup && sass src/index.scss dist/index.css",
|
|
27
|
+
"build": "tsup src/index.ts --format cjs,esm --dts --tsconfig tsconfig.lib.json && sass --load-path=node_modules src/index.scss dist/index.css",
|
|
28
28
|
"lint": "eslint .",
|
|
29
29
|
"preview": "vite preview",
|
|
30
30
|
"start": "vite"
|