@dust-tt/sparkle 0.2.251 → 0.2.252
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/cjs/index.js +5 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/TextArea.d.ts +4 -8
- package/dist/esm/components/TextArea.d.ts.map +1 -1
- package/dist/esm/components/TextArea.js +7 -9
- package/dist/esm/components/TextArea.js.map +1 -1
- package/dist/esm/stories/TextArea.stories.d.ts +1 -2
- package/dist/esm/stories/TextArea.stories.d.ts.map +1 -1
- package/dist/esm/stories/TextArea.stories.js +8 -7
- package/dist/esm/stories/TextArea.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/TextArea.tsx +38 -43
- package/src/stories/TextArea.stories.tsx +11 -10
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
3
|
-
placeholder: string;
|
|
4
|
-
value: string | null;
|
|
5
|
-
onChange: (value: string) => void;
|
|
2
|
+
export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
6
3
|
error?: string | null;
|
|
7
4
|
showErrorLabel?: boolean;
|
|
8
|
-
className?: string;
|
|
9
5
|
minRows?: number;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
export
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
13
9
|
//# sourceMappingURL=TextArea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACzD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,2FAiCpB,CAAC"}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import React from "react";
|
|
2
3
|
import { classNames } from "../lib/utils";
|
|
3
|
-
export
|
|
4
|
-
var
|
|
5
|
-
var textareaRef = useRef(null);
|
|
4
|
+
export var TextArea = React.forwardRef(function (_a, ref) {
|
|
5
|
+
var error = _a.error, _b = _a.showErrorLabel, showErrorLabel = _b === void 0 ? false : _b, className = _a.className, _c = _a.minRows, minRows = _c === void 0 ? 10 : _c, props = __rest(_a, ["error", "showErrorLabel", "className", "minRows"]);
|
|
6
6
|
return (React.createElement("div", { className: "s-flex s-flex-col s-gap-1 s-p-px" },
|
|
7
|
-
React.createElement("textarea", { rows: minRows, ref:
|
|
7
|
+
React.createElement("textarea", __assign({ rows: minRows, ref: ref, className: classNames("overflow-y-auto s-block s-w-full s-min-w-0 s-rounded-xl s-text-sm s-placeholder-element-700 s-transition-all s-duration-200 s-scrollbar-hide", !error
|
|
8
8
|
? "s-border-structure-100 focus:s-border-action-300 focus:s-ring-action-300"
|
|
9
|
-
: "s-border-red-500 focus:s-border-red-500 focus:s-ring-red-500", "s-border-structure-200 s-bg-structure-50", "s-resize-y", className !== null && className !== void 0 ? className : "")
|
|
10
|
-
onChange(e.target.value);
|
|
11
|
-
} }),
|
|
9
|
+
: "s-border-red-500 focus:s-border-red-500 focus:s-ring-red-500", "s-border-structure-200 s-bg-structure-50", "s-resize-y", className !== null && className !== void 0 ? className : "") }, props)),
|
|
12
10
|
error && showErrorLabel && (React.createElement("div", { className: "s-ml-2 s-text-sm s-text-warning-500" }, error))));
|
|
13
|
-
}
|
|
11
|
+
});
|
|
14
12
|
//# sourceMappingURL=TextArea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAUhD,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,UACE,EAMgB,EAChB,GAAG;IAND,IAAA,KAAK,WAAA,EACL,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,SAAS,eAAA,EACT,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACT,KAAK,cALV,mDAMC,CADS;IAIV,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC/C,2CACE,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,8IAA8I,EAC9I,CAAC,KAAK;gBACJ,CAAC,CAAC,0EAA0E;gBAC5E,CAAC,CAAC,8DAA8D,EAClE,0CAA0C,EAC1C,YAAY,EACZ,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAChB,IACG,KAAK,EACT;QACD,KAAK,IAAI,cAAc,IAAI,CAC1B,6BAAK,SAAS,EAAC,qCAAqC,IAAE,KAAK,CAAO,CACnE,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { TextArea } from "../index_with_tw_base";
|
|
3
2
|
declare const meta: {
|
|
4
3
|
title: string;
|
|
5
|
-
component:
|
|
4
|
+
component: React.ForwardRefExoticComponent<import("../components/TextArea").TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
6
5
|
};
|
|
7
6
|
export default meta;
|
|
8
7
|
export declare const TextAreaExample: () => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/TextArea.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/TextArea.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,QAAA,MAAM,IAAI;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,eAAe,yBAuC3B,CAAC"}
|
|
@@ -15,14 +15,15 @@ export var TextAreaExample = function () {
|
|
|
15
15
|
]), 2), textValues = _a[0], setTextValues = _a[1];
|
|
16
16
|
return (React.createElement("div", { className: "s-flex s-flex-col s-gap-20" },
|
|
17
17
|
React.createElement("div", { className: "s-grid s-grid-cols-3 s-gap-4" },
|
|
18
|
-
React.createElement(TextArea, { placeholder: "placeholder",
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
React.createElement(TextArea, { placeholder: "placeholder", onChange: function (e) {
|
|
19
|
+
console.log(e.target.value);
|
|
20
|
+
setTextValues([e.target.value, textValues[1], textValues[2], textValues[3]]);
|
|
21
|
+
}, minRows: 2, defaultValue: textValues[0] }),
|
|
22
|
+
React.createElement(TextArea, { placeholder: "placeholder", defaultValue: textValues[1], error: "errored because blah", onChange: function (e) {
|
|
23
|
+
return setTextValues([textValues[0], e.target.value, textValues[2], textValues[3]]);
|
|
23
24
|
}, showErrorLabel: true }),
|
|
24
|
-
React.createElement(TextArea, { placeholder: "placeholder",
|
|
25
|
-
return setTextValues([textValues[0], textValues[1],
|
|
25
|
+
React.createElement(TextArea, { placeholder: "placeholder", defaultValue: textValues[2], onChange: function (e) {
|
|
26
|
+
return setTextValues([textValues[0], textValues[1], e.target.value, textValues[3]]);
|
|
26
27
|
}, error: "errored because blah" }))));
|
|
27
28
|
};
|
|
28
29
|
//# sourceMappingURL=TextArea.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../src/stories/TextArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;CACY,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,eAAe,GAAG;IACvB,IAAA,KAAA,OAA8B,QAAQ,CAAC;QAC3C,EAAE;QACF,kBAAkB;QAClB,gBAAgB;QAChB,EAAE;KACH,CAAC,IAAA,EALK,UAAU,QAAA,EAAE,aAAa,QAK9B,CAAC;IACH,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B;QACzC,6BAAK,SAAS,EAAC,8BAA8B;YAC3C,oBAAC,QAAQ,IACP,WAAW,EAAC,aAAa,EACzB,
|
|
1
|
+
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../src/stories/TextArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;CACY,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,eAAe,GAAG;IACvB,IAAA,KAAA,OAA8B,QAAQ,CAAC;QAC3C,EAAE;QACF,kBAAkB;QAClB,gBAAgB;QAChB,EAAE;KACH,CAAC,IAAA,EALK,UAAU,QAAA,EAAE,aAAa,QAK9B,CAAC;IACH,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B;QACzC,6BAAK,SAAS,EAAC,8BAA8B;YAC3C,oBAAC,QAAQ,IACP,WAAW,EAAC,aAAa,EACzB,QAAQ,EAAE,UAAC,CAAC;oBACV,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAC3B,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;gBAC9E,CAAC,EACD,OAAO,EAAE,CAAC,EACV,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,GAC3B;YACF,oBAAC,QAAQ,IACP,WAAW,EAAC,aAAa,EACzB,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,EAC3B,KAAK,EAAE,sBAAsB,EAC7B,QAAQ,EAAE,UAAC,CAAC;oBACV,OAAA,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBAA5E,CAA4E,EAE9E,cAAc,SACd;YACF,oBAAC,QAAQ,IACP,WAAW,EAAC,aAAa,EACzB,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,EAC3B,QAAQ,EAAE,UAAC,CAAC;oBACV,OAAA,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBAA5E,CAA4E,EAE9E,KAAK,EAAE,sBAAsB,GAC7B,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,51 +1,46 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
|
|
3
3
|
import { classNames } from "@sparkle/lib/utils";
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
value: string | null;
|
|
8
|
-
onChange: (value: string) => void;
|
|
5
|
+
export interface TextAreaProps
|
|
6
|
+
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
9
7
|
error?: string | null;
|
|
10
8
|
showErrorLabel?: boolean;
|
|
11
|
-
className?: string;
|
|
12
9
|
minRows?: number;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
export function TextArea({
|
|
16
|
-
placeholder,
|
|
17
|
-
value,
|
|
18
|
-
onChange,
|
|
19
|
-
error,
|
|
20
|
-
showErrorLabel = false,
|
|
21
|
-
className,
|
|
22
|
-
minRows = 10
|
|
23
|
-
}: TextAreaProps) {
|
|
24
|
-
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
25
12
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
13
|
+
export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
|
14
|
+
(
|
|
15
|
+
{
|
|
16
|
+
error,
|
|
17
|
+
showErrorLabel = false,
|
|
18
|
+
className,
|
|
19
|
+
minRows = 10,
|
|
20
|
+
...props
|
|
21
|
+
}: TextAreaProps,
|
|
22
|
+
ref
|
|
23
|
+
) => {
|
|
24
|
+
return (
|
|
25
|
+
<div className="s-flex s-flex-col s-gap-1 s-p-px">
|
|
26
|
+
<textarea
|
|
27
|
+
rows={minRows}
|
|
28
|
+
ref={ref}
|
|
29
|
+
className={classNames(
|
|
30
|
+
"overflow-y-auto s-block s-w-full s-min-w-0 s-rounded-xl s-text-sm s-placeholder-element-700 s-transition-all s-duration-200 s-scrollbar-hide",
|
|
31
|
+
!error
|
|
32
|
+
? "s-border-structure-100 focus:s-border-action-300 focus:s-ring-action-300"
|
|
33
|
+
: "s-border-red-500 focus:s-border-red-500 focus:s-ring-red-500",
|
|
34
|
+
"s-border-structure-200 s-bg-structure-50",
|
|
35
|
+
"s-resize-y",
|
|
36
|
+
className ?? ""
|
|
37
|
+
)}
|
|
38
|
+
{...props}
|
|
39
|
+
/>
|
|
40
|
+
{error && showErrorLabel && (
|
|
41
|
+
<div className="s-ml-2 s-text-sm s-text-warning-500">{error}</div>
|
|
39
42
|
)}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}}
|
|
45
|
-
/>
|
|
46
|
-
{error && showErrorLabel && (
|
|
47
|
-
<div className="s-ml-2 s-text-sm s-text-warning-500">{error}</div>
|
|
48
|
-
)}
|
|
49
|
-
</div>
|
|
50
|
-
);
|
|
51
|
-
}
|
|
43
|
+
</div>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
);
|
|
@@ -22,26 +22,27 @@ export const TextAreaExample = () => {
|
|
|
22
22
|
<div className="s-grid s-grid-cols-3 s-gap-4">
|
|
23
23
|
<TextArea
|
|
24
24
|
placeholder="placeholder"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
setTextValues([
|
|
28
|
-
}
|
|
25
|
+
onChange={(e) => {
|
|
26
|
+
console.log(e.target.value)
|
|
27
|
+
setTextValues([e.target.value, textValues[1], textValues[2], textValues[3]])
|
|
28
|
+
}}
|
|
29
29
|
minRows={2}
|
|
30
|
+
defaultValue={textValues[0]}
|
|
30
31
|
/>
|
|
31
32
|
<TextArea
|
|
32
33
|
placeholder="placeholder"
|
|
33
|
-
|
|
34
|
+
defaultValue={textValues[1]}
|
|
34
35
|
error={"errored because blah"}
|
|
35
|
-
onChange={(
|
|
36
|
-
setTextValues([textValues[0],
|
|
36
|
+
onChange={(e) =>
|
|
37
|
+
setTextValues([textValues[0], e.target.value, textValues[2], textValues[3]])
|
|
37
38
|
}
|
|
38
39
|
showErrorLabel
|
|
39
40
|
/>
|
|
40
41
|
<TextArea
|
|
41
42
|
placeholder="placeholder"
|
|
42
|
-
|
|
43
|
-
onChange={(
|
|
44
|
-
setTextValues([textValues[0], textValues[1],
|
|
43
|
+
defaultValue={textValues[2]}
|
|
44
|
+
onChange={(e) =>
|
|
45
|
+
setTextValues([textValues[0], textValues[1], e.target.value, textValues[3]])
|
|
45
46
|
}
|
|
46
47
|
error={"errored because blah"}
|
|
47
48
|
/>
|