@dust-tt/sparkle 0.2.251 → 0.2.253

package/src/components/TextArea.tsx

@@ -1,51 +1,46 @@
-import React, { useRef } from "react";
+import React from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
-type TextAreaProps = {
-  placeholder: string;
-  value: string | null;
-  onChange: (value: string) => void;
+export interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   error?: string | null;
   showErrorLabel?: boolean;
-  className?: string;
   minRows?: number;
-};
-
-export function TextArea({
-  placeholder,
-  value,
-  onChange,
-  error,
-  showErrorLabel = false,
-  className,
-  minRows = 10
-}: TextAreaProps) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  className?: string;
+}
 
-  return (
-    <div className="s-flex s-flex-col s-gap-1 s-p-px">
-      <textarea
-        rows={minRows}
-        ref={textareaRef}
-        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
-            ? "s-border-structure-100 focus:s-border-action-300 focus:s-ring-action-300"
-            : "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 ?? ""
+export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      error,
+      showErrorLabel = false,
+      className,
+      minRows = 10,
+      ...props
+    }: TextAreaProps,
+    ref
+  ) => {
+    return (
+      <div className="s-flex s-flex-col s-gap-1 s-p-px">
+        <textarea
+          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
+              ? "s-border-structure-100 focus:s-border-action-300 focus:s-ring-action-300"
+              : "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 ?? ""
+          )}
+          {...props}
+        />
+        {error && showErrorLabel && (
+          <div className="s-ml-2 s-text-sm s-text-warning-500">{error}</div>
         )}
-        placeholder={placeholder}
-        value={value ?? ""}
-        onChange={(e) => {
-          onChange(e.target.value);
-        }}
-      />
-      {error && showErrorLabel && (
-        <div className="s-ml-2 s-text-sm s-text-warning-500">{error}</div>
-      )}
-    </div>
-  );
-}
+      </div>
+    );
+  }
+);

package/src/stories/DataTable.stories.tsx

@@ -161,7 +161,7 @@ const columns: ColumnDef<Data>[] = [
       width: "100px",
     },
     cell: (info) => (
-      <DataTable.CellContent>{info.row.original.addedBy}</DataTable.CellContent>
+      <DataTable.CellContentWithCopy>{info.row.original.addedBy}</DataTable.CellContentWithCopy>
     ),
   },
   {

package/src/stories/Modal.stories.tsx

@@ -21,6 +21,8 @@ export const ModalExample = () => {
   const [inputValue, setInputValue] = useState("initial value");
   const [isRightSideWideModalOpen, setIsRightSideWideModalOpen] =
     useState(false);
+  const [isAlertModalOpen, setIsAlertModalOpen] = useState(false);
+
   return (
     <Page.Layout gap="md">
       <Modal
@@ -121,6 +123,20 @@ export const ModalExample = () => {
           I'm the modal content
         </div>
       </Modal>
+      <Modal
+        isOpen={isAlertModalOpen}
+        onClose={() => {}}
+        onSave={() => {}}
+        isSaving={false}
+        hasChanged={false}
+        variant="side-sm"
+        title="Alert modal"
+        alertModal
+        action={undefined}
+      >
+        This is an alert modal.
+        <Button label="Ok" onClick={() => setIsAlertModalOpen(false)} />
+      </Modal>
       <div className="s-flex s-flex-col s-items-start s-gap-3">
         <div className="s-text-lg s-font-bold">Fullscreen</div>
         <Button
@@ -140,6 +156,7 @@ export const ModalExample = () => {
           label="Modal right side wide"
           onClick={() => setIsRightSideWideModalOpen(true)}
         />
+        <Button label="Alert modal" onClick={() => setIsAlertModalOpen(true)} />
       </div>
     </Page.Layout>
   );

package/src/stories/TextArea.stories.tsx

@@ -22,26 +22,27 @@ export const TextAreaExample = () => {
       <div className="s-grid s-grid-cols-3 s-gap-4">
         <TextArea
           placeholder="placeholder"
-          value={textValues[0]}
-          onChange={(v) =>
-            setTextValues([v, textValues[1], textValues[2], textValues[3]])
-          }
+          onChange={(e) => {
+            console.log(e.target.value)
+            setTextValues([e.target.value, textValues[1], textValues[2], textValues[3]])
+          }}
           minRows={2}
+          defaultValue={textValues[0]}
         />
         <TextArea
           placeholder="placeholder"
-          value={textValues[1]}
+          defaultValue={textValues[1]}
           error={"errored because blah"}
-          onChange={(v) =>
-            setTextValues([textValues[0], v, textValues[2], textValues[3]])
+          onChange={(e) =>
+            setTextValues([textValues[0], e.target.value, textValues[2], textValues[3]])
           }
           showErrorLabel
         />
         <TextArea
           placeholder="placeholder"
-          value={textValues[2]}
-          onChange={(v) =>
-            setTextValues([textValues[0], textValues[1], v, textValues[3]])
+          defaultValue={textValues[2]}
+          onChange={(e) =>
+            setTextValues([textValues[0], textValues[1], e.target.value, textValues[3]])
           }
           error={"errored because blah"}
         />