Sparkle: Adding new icons

sparkle/package.json

@@ -70,7 +70,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "sass-loader": "^13.3.2",
-    "storybook": "^7.4.6",
+    "storybook": "^7.6.20",
     "tailwindcss": "^3.2.4",
     "tailwindcss-animate": "^1.0.7",
     "tsc-alias": "^1.8.10",

sparkle/src/components/MonBouton/MonBouton.tsx

@@ -0,0 +1,108 @@
+// src/components/MonBouton/MonBouton.tsx
+import React from "react";
+import { cn } from "@sparkle/lib/utils";
+
+// Types de variantes
+type ButtonVariant = "purple" | "blue" | "green";
+
+interface MonBoutonProps {
+  label: string;
+  onClick?: () => void;
+  className?: string;
+  disabled?: boolean;
+  variant?: ButtonVariant;
+  withRipple?: boolean;
+}
+
+export function MonBouton({
+  label,
+  onClick,
+  className,
+  disabled = false,
+  variant = "purple",
+  withRipple = true,
+}: MonBoutonProps) {
+  const variantStyles: Record<ButtonVariant, string> = {
+    purple: [
+      "s-bg-purple-500/10",
+      "s-border-purple-500/20",
+      "s-text-purple-700",
+      "hover:s-bg-purple-500/20",
+      "hover:s-border-purple-500/30",
+      "hover:s-shadow-purple-500/30",
+      "focus:s-ring-purple-500/40"
+    ].join(" "),
+
+    blue: [
+      "s-bg-blue-500/10",
+      "s-border-blue-500/20",
+      "s-text-blue-700",
+      "hover:s-bg-blue-500/20",
+      "hover:s-border-blue-500/30",
+      "hover:s-shadow-blue-500/30",
+      "focus:s-ring-blue-500/40"
+    ].join(" "),
+
+    green: [
+      "s-bg-emerald-400/10",
+      "s-border-emerald-500/20",
+      "s-text-emerald-700",
+      "hover:s-bg-emerald-500/20",
+      "hover:s-border-emerald-500/30",
+      "hover:s-shadow-emerald-500/30",
+      "focus:s-ring-emerald-500/40"
+    ].join(" "),
+  };
+
+  return (
+    <button
+      className={cn(
+        // Style de base
+        "s-relative",
+        "s-overflow-hidden",
+        "s-border",
+        "s-backdrop-blur-sm",
+        "s-h-12",
+        "s-px-6",
+        "s-rounded-lg",
+        "hover:s-shadow-lg",
+        "s-transition-all",
+        "s-duration-300",
+        "focus:s-outline-none",
+        "focus:s-ring-2",
+        "focus:s-ring-offset-2",
+
+        // Applique les styles de la variante
+        variantStyles[variant],
+
+        // Styles désactivés
+        disabled && [
+          "s-opacity-50",
+          "s-cursor-not-allowed",
+          "s-pointer-events-none",
+          "s-grayscale"
+        ],
+
+        className
+      )}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {/* Effet de ripple */}
+      {withRipple && (
+        <span className={cn(
+          "s-absolute s-inset-0",
+          "s-transform s-translate-y-full",
+          "hover:s-translate-y-0",
+          "s-transition-transform",
+          "s-duration-300",
+          "s-bg-gradient-to-t s-from-white/5 s-to-transparent"
+        )} />
+      )}
+
+      <span className="s-relative s-z-10 s-font-medium">
+        {label}
+      </span>
+    </button>
+  );
+}

sparkle/src/components/index.ts

@@ -105,3 +105,5 @@ export {
 } from "./Tooltip";
 export { Tree } from "./Tree";
 export { ZoomableImageCitationWrapper } from "./ZoomableImageCitationWrapper";
+// Ajoute cette ligne à la fin du fichier
+export { MonBouton } from "./MonBouton/MonBouton";

sparkle/src/icons/solid/ArrowDownOnSquare.tsx

@@ -11,11 +11,11 @@ const SvgArrowDownOnSquare = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="m15.5 7.5-2 2V3h-3v6.5l-2-2-2 2L12 15l5.5-5.5-2-2Z"
+      d="m13.5 9.5 2-2 2 2L12 15 6.5 9.5l2-2 2 2V3h3v6.5Z"
     />
     <path
       fill="currentColor"
-      d="M17.5 18a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5v-5H4v5a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-5h-2.5v5Z"
+      d="M17 18.5a.5.5 0 0 0 .5-.5v-5H20v5a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-5h2.5v5a.5.5 0 0 0 .5.5h10Z"
     />
   </svg>
 );

sparkle/src/icons/solid/Camera.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgCamera = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#000"
+      d="M9.001 3h6l2 2h4.5c.553 0 .5-.052.5.5v15c0 .552.053.5-.5.5h-19c-.552 0-.5.052-.5-.5v-15c0-.552-.052-.5.5-.5h4.5l2-2Zm3 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"
+    />
+  </svg>
+);
+export default SvgCamera;

sparkle/src/icons/solid/DocumentPile.tsx

@@ -9,13 +9,8 @@ const SvgDocumentPile = (props: SVGProps<SVGSVGElement>) => (
     viewBox="0 0 24 24"
     {...props}
   >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M15 2H7v4H3v16h14v-4h4V8h-6V2Zm0 16H7c-.126 0 0-8.952 0-10H5v12h10v-2Z"
-      clipRule="evenodd"
-    />
-    <path fill="currentColor" d="M17 2v4h4l-4-4Z" />
+    <path fill="currentColor" d="M8 2h6v6h6v10H8c-.088 0-.002-14.165 0-16Z" />
+    <path fill="currentColor" d="M6 7H4v15h12v-2H6V7ZM16 6V2l4 4h-4Z" />
   </svg>
 );
 export default SvgDocumentPile;

sparkle/src/icons/solid/ListDeselect.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgListDeselect = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M7.293 8.707 6 7.414 4.707 8.707 3.293 7.293 4.586 6 3.293 4.707l1.414-1.414L6 4.586l1.293-1.293 1.414 1.414L7.414 6l1.293 1.293-1.414 1.414ZM11 4.5h10v3H11v-3ZM21 11H11v3h10v-3ZM21 17.5H11v3h10v-3ZM6 20.414l1.293 1.293 1.414-1.414L7.414 19l1.293-1.293-1.414-1.414L6 17.586l-1.293-1.293-1.414 1.414L4.586 19l-1.293 1.293 1.414 1.414L6 20.414ZM7.293 15.207 6 13.914l-1.293 1.293-1.414-1.414L4.586 12.5l-1.293-1.293 1.414-1.414L6 11.086l1.293-1.293 1.414 1.414L7.414 12.5l1.293 1.293-1.414 1.414Z"
+    />
+  </svg>
+);
+export default SvgListDeselect;

sparkle/src/icons/solid/ListSelect.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgListSelect = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M21 11H11v3h10v-3ZM21 17.5H11v3h10v-3ZM6 21.331l3.707-3.707-1.414-1.414L6 18.503 4.71 17.21l-1.42 1.41L6 21.331ZM6 14.831l3.707-3.707L8.293 9.71 6 12.003 4.71 10.71l-1.42 1.41L6 14.831ZM21 4.5H11v3h10v-3ZM6 8.331l3.707-3.707L8.293 3.21 6 5.503 4.71 4.21 3.29 5.62 6 8.331Z"
+    />
+  </svg>
+);
+export default SvgListSelect;

sparkle/src/icons/solid/Magic.tsx

@@ -11,7 +11,7 @@ const SvgMagic = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="m16.02 17.435 1.415-1.414 4.242 4.242-1.414 1.415-4.242-4.243ZM4.364 4.657l4.984 1.058a2 2 0 0 0 1.394-.213l4.61-2.586.354 5.028a2 2 0 0 0 .677 1.363l4.019 3.522-4.83 1.912a2 2 0 0 0-1.123 1.123l-1.913 4.83-3.522-4.018a2 2 0 0 0-1.363-.677l-5.028-.355 2.586-4.61a2 2 0 0 0 .213-1.393L4.364 4.657Z"
+      d="m16.02 17.435 1.415-1.414 4.243 4.242-1.415 1.415-4.242-4.243ZM4.364 4.657l4.984 1.058a2 2 0 0 0 1.394-.213l4.61-2.586.354 5.028a2 2 0 0 0 .677 1.363l4.019 3.522-4.83 1.912a2 2 0 0 0-1.123 1.123l-1.913 4.83-3.522-4.018a2 2 0 0 0-1.363-.677l-5.027-.355 2.586-4.61a2 2 0 0 0 .212-1.393L4.364 4.657Z"
     />
   </svg>
 );

sparkle/src/icons/solid/ServerLocked.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgServerLocked = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M17 17h-2v2h2v-2ZM12 7a1 1 0 0 0-1 1v1h2V8a1 1 0 0 0-1-1Z"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M21 5a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V5ZM5 17a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-2Zm5-9v1H9v4h6V9h-1V8a2 2 0 1 0-4 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgServerLocked;

sparkle/src/icons/solid/TSquare.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTSquare = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#000"
+      d="M2 3.5c0-.552-.052-.5.5-.5h19c.552 0 .5-.052.5.5v17c0 .552.052.5-.5.5h-19c-.552 0-.5.052-.5-.5v-17ZM4 5v14h16V5H4Zm3 3h10v3h-2v-1h-2v4h1.5v2h-5v-2H11v-4H9v1H7V8Z"
+    />
+  </svg>
+);
+export default SvgTSquare;

sparkle/src/icons/solid/index.ts

@@ -15,6 +15,7 @@ export { default as BackspaceIcon } from "./Backspace";
 export { default as BookmarkIcon } from "./Bookmark";
 export { default as BookOpenIcon } from "./BookOpen";
 export { default as BracesIcon } from "./Braces";
+export { default as CameraIcon } from "./Camera";
 export { default as CardIcon } from "./Card";
 export { default as ChatBubbleBottomCenterPlusIcon } from "./ChatBubbleBottomCenterPlus";
 export { default as ChatBubbleBottomCenterTextIcon } from "./ChatBubbleBottomCenterText";
@@ -80,7 +81,9 @@ export { default as LinkIcon } from "./Link";
 export { default as ListIcon } from "./List";
 export { default as ListAddIcon } from "./ListAdd";
 export { default as ListCheckIcon } from "./ListCheck";
+export { default as ListDeselectIcon } from "./ListDeselect";
 export { default as ListRemoveIcon } from "./ListRemove";
+export { default as ListSelectIcon } from "./ListSelect";
 export { default as LockIcon } from "./Lock";
 export { default as LoginIcon } from "./Login";
 export { default as LogoutIcon } from "./Logout";
@@ -107,6 +110,7 @@ export { default as RobotIcon } from "./Robot";
 export { default as RocketIcon } from "./Rocket";
 export { default as ScanIcon } from "./Scan";
 export { default as ServerIcon } from "./Server";
+export { default as ServerLockedIcon } from "./ServerLocked";
 export { default as ShakeHandsIcon } from "./ShakeHands";
 export { default as ShapesIcon } from "./Shapes";
 export { default as SparklesIcon } from "./Sparkles";
@@ -123,6 +127,7 @@ export { default as TimeIcon } from "./Time";
 export { default as TranslateIcon } from "./Translate";
 export { default as TrashIcon } from "./Trash";
 export { default as TriangleIcon } from "./Triangle";
+export { default as TSquareIcon } from "./TSquare";
 export { default as UserIcon } from "./User";
 export { default as UserArrowIcon } from "./UserArrow";
 export { default as UserGroupIcon } from "./UserGroup";