@dust-tt/sparkle 0.2.212 → 0.2.214-pr

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.212",
+  "version": "0.2.214-pr",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",
@@ -50,6 +50,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^3.2.0",
+    "next": "^14.2.3",
     "prettier": "^3.0",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.3.1",

package/src/_index.ts

@@ -148,6 +148,9 @@ export { Markdown };
 import { DataTable } from "./components/DataTable";
 export { DataTable };
 
+import { Breadcrumbs } from "@sparkle/components/Breadcrumbs";
+export { Breadcrumbs };
+
 import {
   LogoHorizontalColor as LogoHorizontalColorLogo,
   LogoHorizontalColorLayer1 as LogoHorizontalColorLogoLayer1,

package/src/components/Breadcrumbs.tsx

@@ -0,0 +1,52 @@
+import Link from "next/link";
+import type { ComponentType } from "react";
+import React from "react";
+
+import { ChevronRightIcon, Icon } from "@sparkle/index";
+
+type BreadcrumbProps = {
+  items: {
+    label: string;
+    icon?: ComponentType<{ className?: string }>;
+    href?: string;
+  }[];
+};
+
+export function Breadcrumbs({ items }: BreadcrumbProps) {
+  return (
+    <div className="gap-2 s-flex s-flex-row s-items-center">
+      {items.map((item, index) => (
+        <div key={index} className="s-flex s-flex-row s-items-center s-gap-1">
+          <Icon visual={item.icon} className="s-text-brand" />
+          <div>
+            {item.href ? (
+              <Link
+                href={item.href}
+                className={
+                  index === items.length - 1
+                    ? "s-text-element-900"
+                    : "s-text-element-700"
+                }
+              >
+                {item.label}
+              </Link>
+            ) : (
+              <span
+                className={
+                  index === items.length - 1
+                    ? "s-text-element-900"
+                    : "s-text-element-700"
+                }
+              >
+                {item.label}
+              </span>
+            )}
+          </div>
+          {index === items.length - 1 ? null : (
+            <ChevronRightIcon className="s-text-element-500" />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/ContentMessage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ComponentType } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
@@ -19,6 +19,7 @@ export interface ContentMessageProps {
     | "pink"
     | "action"
     | "red";
+  icon?: ComponentType;
 }
 
 export function ContentMessage({
@@ -27,6 +28,7 @@ export function ContentMessage({
   children,
   size = "md",
   className = "",
+  icon,
 }: ContentMessageProps) {
   const variantClasses = {
     border: `s-border-${variant}-200`,
@@ -52,7 +54,7 @@ export function ContentMessage({
         <>
           <Icon
             size="md"
-            visual={InformationCircleIcon}
+            visual={icon ?? InformationCircleIcon}
             className={classNames("s-shrink-0", variantClasses.iconColor)}
           />
           <div className="s-flex s-flex-col s-gap-2">

package/src/stories/Breadcrumbs.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Breadcrumbs, CompanyIcon, HomeIcon } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/Breadcrumbs",
+  component: Breadcrumbs,
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
+
+export const BreadcrumbsExample = () => {
+  const items1 = [
+    { label: "Home", href: "#", icon: HomeIcon },
+    { label: "Vaults", href: "#" },
+    { label: "My Vault" },
+  ];
+  const items2 = [
+    { label: "Home", href: "#", icon: HomeIcon },
+    { label: "Vaults", href: "#", icon: CompanyIcon },
+    { label: "My Vault", href: "#" },
+    { label: "Data Sources" },
+  ];
+  return (
+    <div className="s-flex s-flex-col s-gap-4">
+      <Breadcrumbs items={items1} />
+      <Breadcrumbs items={items2} />
+    </div>
+  );
+};

package/src/stories/ContentMessage.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { ContentMessage } from "../index_with_tw_base";
+import { ContentMessage, HeartIcon } from "../index_with_tw_base";
 
 const meta = {
   title: "Components/ContentMessage",
@@ -19,8 +19,8 @@ export const ContentExample = () => (
     <ContentMessage title="This is a title" variant="pink">
       This is a message. It can be multiple lines long.
     </ContentMessage>
-    <ContentMessage title="This is a title" variant="emerald">
-      This is a message. It can be multiple lines long.
+    <ContentMessage title="This is a cat" variant="purple" icon={HeartIcon}>
+      This is a Soupinou. It is cute.
     </ContentMessage>
     <h2>Size "sm"</h2>
     <ContentMessage title="This is a title" size="sm">