enh: sparkle-ization of app design (#1215)

* enh: sparkle-ization of app design

* fuck

* fix build

* nit

front/components/Button.tsx

@@ -1,90 +1,5 @@
 import { classNames } from "@app/lib/utils";
 
-export function Button({
-  type = "button",
-  onClick = null,
-  disabled = false,
-  children,
-}: React.PropsWithChildren<{
-  type?: "button" | "submit" | "reset" | undefined;
-  onClick?: any;
-  disabled?: boolean;
-}>) {
-  return (
-    <button
-      type={type ? type : "button"}
-      className={classNames(
-        "inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4",
-        disabled ? "text-gray-300" : "text-gray-700 hover:bg-gray-50",
-        "shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
-      )}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-}
-
-export function ActionButton({
-  type = "button",
-  onClick = null,
-  onMouseDown = null,
-  disabled = false,
-  children,
-}: React.PropsWithChildren<{
-  type?: "button" | "submit" | "reset" | undefined;
-  onClick?: any;
-  onMouseDown?: any; // useful when you don't want to end selection
-  disabled?: boolean;
-}>) {
-  return (
-    <button
-      type={type ? type : "button"}
-      className={classNames(
-        "inline-flex items-center rounded-md border px-3 py-1 text-sm font-medium leading-6",
-        disabled
-          ? "border-gray-200 bg-white text-gray-300"
-          : "border-gray-700 bg-gray-700 text-white hover:bg-gray-800",
-        "shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
-      )}
-      onClick={onClick}
-      onMouseDown={onMouseDown}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-}
-
-export function HighlightButton({
-  type,
-  onClick,
-  disabled,
-  children,
-}: React.PropsWithChildren<{
-  type?: "button" | "submit" | "reset" | undefined;
-  onClick?: any;
-  disabled?: boolean;
-}>) {
-  return (
-    <button
-      type={type ? type : "button"}
-      className={classNames(
-        "inline-flex items-center rounded-md border px-3 py-1 text-sm font-medium leading-6",
-        disabled
-          ? "border-gray-200 bg-white text-gray-300"
-          : "border-action-600 bg-action-600 text-white hover:bg-action-500",
-        "shadow-sm focus:outline-none focus:ring-2 focus:ring-action-500 focus:ring-offset-2"
-      )}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-}
-
 export function GoogleSignInButton({
   onClick = null,
   children,

front/components/GoogleDriveFoldersPickerModal.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@dust-tt/sparkle";
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useEffect, useRef, useState } from "react";
 import TreeView, { INode } from "react-accessible-treeview";
@@ -7,8 +8,6 @@ import { IoMdArrowDropdown, IoMdArrowDropright } from "react-icons/io";
 import { GoogleDriveSelectedFolderType } from "@app/lib/connectors_api";
 import { WorkspaceType } from "@app/types/user";
 
-import { ActionButton, Button } from "./Button";
-
 export default function GoogleDriveFoldersPickerModal(props: {
   owner: WorkspaceType;
   connectorId: string;
@@ -153,22 +152,22 @@ export default function GoogleDriveFoldersPickerModal(props: {
                       onClick={() => {
                         props.setOpen(false);
                       }}
-                    >
-                      Cancel
-                    </Button>
+                      label="Cancel"
+                      type="secondary"
+                    />
                   </div>
                   <div className="ml-3">
-                    <ActionButton
+                    <Button
+                      type="primary"
                       onClick={async () => {
                         if (selectedFoldersToSave) {
                           await onSave(selectedFoldersToSave);
                         }
                         props.setOpen(false);
                       }}
                       disabled={!selectedFoldersToSave}
-                    >
-                      Save
-                    </ActionButton>
+                      label="Save"
+                    />
                   </div>
                 </div>
               </Dialog.Panel>

front/components/app/DatasetPicker.tsx

@@ -1,5 +1,5 @@
+import { ChevronDownIcon } from "@dust-tt/sparkle";
 import { Menu } from "@headlessui/react";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import Link from "next/link";
 
 import { useDatasets } from "@app/lib/swr";

front/components/app/DatasetView.tsx

@@ -1,19 +1,17 @@
 import "@uiw/react-textarea-code-editor/dist.css";
 
 import {
+  ArrowDownOnSquareIcon,
+  ArrowUpOnSquareIcon,
+  Button,
   PlusCircleIcon,
   PlusIcon,
   XCircleIcon,
-} from "@heroicons/react/20/solid";
-import {
-  ArrowDownOnSquareIcon,
-  ArrowUpOnSquareStackIcon,
-} from "@heroicons/react/24/outline";
+} from "@dust-tt/sparkle";
 import dynamic from "next/dynamic";
 import { useEffect, useRef, useState } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 
-import { Button } from "@app/components/Button";
 import { checkDatasetData } from "@app/lib/datasets";
 import { getDatasetTypes, getValueType } from "@app/lib/datasets";
 import { MODELS_STRING_MAX_LENGTH } from "@app/lib/utils";
@@ -614,17 +612,18 @@ export default function DatasetView({
             <div className="mt-6 flex flex-row">
               {!readOnly ? (
                 <Button
+                  type="secondary"
                   onClick={() => {
                     handleNewEntry(datasetData.length - 1);
                   }}
-                >
-                  <PlusIcon className="-ml-1 mr-1 h-5 w-5" />
-                  New Entry
-                </Button>
+                  icon={PlusIcon}
+                  label="New Entry"
+                />
               ) : null}
               <div className="flex-1"></div>
               <div className="ml-2 flex-initial">
                 <Button
+                  type="tertiary"
                   onClick={() => {
                     const dataStr =
                       "data:text/jsonl;charset=utf-8," +
@@ -643,10 +642,9 @@ export default function DatasetView({
                     downloadAnchorNode.click();
                     downloadAnchorNode.remove();
                   }}
-                >
-                  <ArrowDownOnSquareIcon className="-ml-1 mr-1 h-5 w-5" />
-                  Download
-                </Button>
+                  icon={ArrowDownOnSquareIcon}
+                  label="Download"
+                />
               </div>
               <div className="ml-2 flex-initial">
                 <input
@@ -662,15 +660,15 @@ export default function DatasetView({
                 ></input>
                 {!readOnly ? (
                   <Button
+                    type="tertiary"
                     onClick={() => {
                       if (fileInputRef.current) {
                         fileInputRef.current.click();
                       }
                     }}
-                  >
-                    <ArrowUpOnSquareStackIcon className="-ml-1 mr-1 h-5 w-5" />
-                    JSONL
-                  </Button>
+                    icon={ArrowUpOnSquareIcon}
+                    label="JSONL"
+                  />
                 ) : null}
               </div>
             </div>

front/components/app/Deploy.tsx

@@ -1,13 +1,16 @@
 import "@uiw/react-textarea-code-editor/dist.css";
 
+import {
+  Button,
+  ClipboardIcon,
+  CubeIcon,
+  DocumentTextIcon,
+} from "@dust-tt/sparkle";
 import { Dialog, Transition } from "@headlessui/react";
-import { CubeIcon, DocumentDuplicateIcon } from "@heroicons/react/20/solid";
-import { ArrowRightCircleIcon } from "@heroicons/react/24/outline";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { Fragment, useState } from "react";
 
-import { ActionButton, Button, HighlightButton } from "@app/components/Button";
 import { useKeys } from "@app/lib/swr";
 import { classNames } from "@app/lib/utils";
 import { AppType, SpecificationType } from "@app/types/app";
@@ -82,20 +85,20 @@ export default function Deploy({
 
   return (
     <div>
-      <HighlightButton
-        disabled={disabled}
+      <Button
+        label="deploy"
+        type="primary"
         onClick={() => {
           setOpen(!open);
         }}
-      >
-        <CubeIcon className="-ml-1 mr-1 h-5 w-5" />
-        Deploy
-      </HighlightButton>
+        disabled={disabled}
+        icon={CubeIcon}
+      />
 
       <Transition.Root show={open} as={Fragment}>
         <Dialog
           as="div"
-          className="relative z-10"
+          className="relative z-30"
           onClose={() => setOpen(false)}
         >
           <Transition.Child
@@ -180,34 +183,42 @@ export default function Deploy({
                         </div>
                         <div className="flex-1"></div>
                         <div className="mt-1">
-                          <ActionButton onClick={handleCopyClick}>
-                            <DocumentDuplicateIcon className="-ml-1 mr-1 mt-0.5 h-5 w-5" />
-                            {copyButtonText}
-                          </ActionButton>
+                          <Button
+                            type="primary"
+                            onClick={handleCopyClick}
+                            label={copyButtonText}
+                            icon={ClipboardIcon}
+                          />
                         </div>
                       </div>
                       <p className="mt-4 text-sm text-gray-500">
                         For a detailed documentation of the Run model and Run
                         creation parameters, refer to the API reference.
                       </p>
                       <p className="mt-2">
-                        <Link
-                          href="https://docs.dust.tt/runs"
-                          target="_blank"
-                          className="mr-2"
-                        >
-                          <Button>
-                            <ArrowRightCircleIcon className="-ml-1 mr-2 h-4 w-4" />
-                            Visit API Reference
-                          </Button>
-                        </Link>
+                        <Button
+                          icon={DocumentTextIcon}
+                          label="Visit API Reference"
+                          type="secondary"
+                          onClick={() => {
+                            window.open(
+                              "https://docs.dust.tt/runs",
+                              "_blank",
+                              "noopener,noreferrer"
+                            );
+                          }}
+                        />
                       </p>
                     </div>
                   </div>
                   <div className="mt-5 flex flex-row items-center space-x-2 sm:mt-6">
                     <div className="flex-1"></div>
                     <div className="flex flex-initial">
-                      <Button onClick={() => setOpen(false)}>Close</Button>
+                      <Button
+                        type="secondary"
+                        onClick={() => setOpen(false)}
+                        label="Close"
+                      />
                     </div>
                   </div>
                 </Dialog.Panel>

front/components/app/ModelPicker.tsx

@@ -1,5 +1,5 @@
+import { ChevronDownIcon } from "@dust-tt/sparkle";
 import { Menu } from "@headlessui/react";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import Link from "next/link";
 import { useEffect } from "react";
 import { useState } from "react";

front/components/app/NewBlock.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@dust-tt/sparkle";
 import { Menu } from "@headlessui/react";
 import { PlusIcon } from "@heroicons/react/20/solid";
 
@@ -121,18 +122,13 @@ export default function NewBlock({
             <PlusIcon className="h-4 w-4" />
           </Menu.Button>
         ) : (
-          <Menu.Button
-            className={classNames(
-              "inline-flex items-center rounded-md border px-3 py-1 text-sm font-medium leading-6",
-              disabled
-                ? "border-gray-200 bg-white text-gray-300"
-                : "border-gray-700 bg-gray-700 text-white hover:bg-gray-800",
-              "shadow-sm focus:outline-none focus:ring-0 focus:ring-2"
-            )}
-            disabled={disabled}
-          >
-            <PlusIcon className="-ml-1 mr-1 h-5 w-5" />
-            Block
+          <Menu.Button as="div" disabled={disabled}>
+            <Button
+              type="secondary"
+              label="Add Block"
+              icon={PlusIcon}
+              disabled={disabled}
+            />
           </Menu.Button>
         )}
       </div>

front/components/app/SpecRunView.tsx

@@ -61,7 +61,7 @@ export default function SpecRunView({
           TODO(spolu): investigate */}
       <TextareaAutosize className="hidden" value="foo" />
 
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col gap-y-4">
         {spec.map((block, idx) => {
           // Match status with block
           let status = null;