@ephia/dova-sdk 1.0.0

package/src/testing/index.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { EphiaContext, type EphiaContextValue } from "../react/provider/EphiaContext";
+import { createEphiaStore, type EphiaStore } from "../react/store/create-ephia-store";
+
+export type { EphiaStore } from "../react/store/create-ephia-store";
+export type { EphiaContextValue, EphiaProviderConfig } from "../react/provider/EphiaContext";
+
+/**
+ * Crée un store Ephia vierge pour les tests ou le catalogue UI.
+ *
+ * Le store a le même shape que celui utilisé par <EphiaProvider>, mais il n'est
+ * connecté à aucun client audio. C'est utile pour monter des composants qui
+ * consomment useEphiaStatus / useEphiaConnection / useEphia en isolation.
+ */
+export function createEphiaTestStore(): EphiaStore {
+  return createEphiaStore();
+}
+
+export interface EphiaTestProviderProps {
+  children: React.ReactNode;
+  /**
+   * Store injecté. Si absent, un store vierge est créé.
+   */
+  store?: EphiaStore;
+}
+
+/**
+ * Provider minimal pour les tests unitaires et le catalogue UI preview.
+ *
+ * Fournit un contexte Ephia avec un store Zustand réel mais déconnecté
+ * (status idle, connexion idle, etc.) afin que les composants utilisant
+ * useEphiaStatus / useEphiaConnection / useEphia / useEphiaPartial
+ * puissent être montés sans backend.
+ *
+ * @example
+ * ```tsx
+ * import { EphiaTestProvider } from "@ephia/dova-sdk/testing";
+ *
+ * <EphiaTestProvider>
+ *   <MyComponent />
+ * </EphiaTestProvider>
+ * ```
+ */
+export function EphiaTestProvider({ children, store: injectedStore }: EphiaTestProviderProps) {
+  const store = useMemo(() => injectedStore ?? createEphiaTestStore(), [injectedStore]);
+
+  const value = useMemo<EphiaContextValue>(
+    () => ({
+      store,
+      registerTarget: () => () => {},
+      applyServerEvent: () => {},
+      config: {},
+    }),
+    [store],
+  );
+
+  return <EphiaContext.Provider value={value}>{children}</EphiaContext.Provider>;
+}

package/src/ui/assets/ephia-logo.svg

@@ -0,0 +1,4 @@
+<svg width="220" height="207" viewBox="0 0 220 207" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M130.184 22.8784C110.496 11.7584 85.4808 18.5556 74.1504 38.1772C66.8151 50.8807 67.004 65.8635 73.334 77.9663C76.4886 83.9978 77.6606 91.3208 74.2568 97.2153C70.8529 103.109 63.9255 105.756 57.1241 106.04C55.4205 106.111 53.7254 106.287 52.0498 106.566C51.9939 106.576 51.9377 106.586 51.8818 106.596C51.8243 106.606 51.7665 106.615 51.709 106.625C47.369 107.377 43.2604 108.806 39.4981 110.8C34.2218 113.586 29.4987 117.542 25.7589 122.554C25.7424 122.576 25.7254 122.598 25.709 122.62C25.6788 122.661 25.6482 122.701 25.6182 122.742C21.6987 128.032 19.015 134.293 17.9923 141.097C17.9778 141.192 17.964 141.289 17.9502 141.385C17.9421 141.442 17.9337 141.499 17.9258 141.556C17.6653 143.422 17.5345 145.296 17.5312 147.163V147.28C17.5314 157.14 20.9911 166.192 26.7617 173.29C26.796 173.332 26.8307 173.375 26.8652 173.417C26.928 173.494 26.9915 173.57 27.0548 173.646C27.1098 173.713 27.1653 173.779 27.2207 173.845C27.255 173.885 27.2898 173.927 27.3242 173.968C27.6222 174.319 27.9266 174.666 28.2374 175.009C28.2534 175.026 28.2701 175.044 28.2861 175.061C28.3779 175.162 28.4706 175.263 28.5635 175.363C28.5869 175.388 28.6114 175.413 28.6349 175.438C28.7264 175.536 28.8185 175.635 28.9111 175.732C28.9284 175.75 28.9456 175.769 28.9629 175.787C29.1492 175.982 29.3377 176.176 29.5283 176.367L29.6191 176.458C29.6653 176.504 29.7125 176.55 29.7589 176.596C29.8119 176.648 29.8646 176.702 29.918 176.754C36.4444 183.148 45.0865 187.393 54.6963 188.342C54.7093 188.343 54.7223 188.344 54.7354 188.346C55.0558 188.377 55.3777 188.405 55.7002 188.429C55.7229 188.43 55.746 188.432 55.7687 188.434C55.8996 188.443 56.031 188.452 56.1622 188.46C57.0288 188.515 57.8957 188.543 58.7607 188.543C58.774 188.543 58.7875 188.543 58.8008 188.543C58.8551 188.543 58.9096 188.542 58.9639 188.542C59.0597 188.542 59.1561 188.541 59.252 188.54C66.9707 188.457 74.1811 186.256 80.3292 182.49C80.3971 182.449 80.4656 182.407 80.5333 182.365C80.5789 182.337 80.6245 182.308 80.6699 182.279C85.3019 179.393 89.4161 175.551 92.6865 170.84C92.7302 170.777 92.7741 170.714 92.8174 170.651C92.8427 170.614 92.8684 170.577 92.8936 170.54C94.8281 167.711 96.419 164.628 97.6074 161.353C99.3661 156.525 100.166 151.511 100.075 146.558C100.266 130.196 106.911 115.387 117.584 104.555C120.604 101.544 123.936 98.8469 127.529 96.5151C128.082 96.1565 127.539 96.5073 129.953 95.0288C135.565 91.8709 140.505 87.373 144.245 81.6763C144.281 81.623 144.315 81.5686 144.351 81.5151C144.368 81.489 144.385 81.4622 144.402 81.436C144.828 80.7863 145.239 80.1208 145.632 79.4399C155.114 63.0194 152.024 42.7913 139.35 29.896C136.719 27.1793 133.672 24.7768 130.236 22.7886L130.184 22.8784Z" fill="#723ADE"/>
+<path d="M151.646 107.073C154.645 106.38 157.768 106.016 160.977 106.016C183.769 106.016 202.246 124.49 202.246 147.278C202.246 167.41 187.826 184.171 168.751 187.807C167.995 187.951 167.233 188.074 166.463 188.177C166.383 188.187 166.304 188.201 166.224 188.211C164.503 188.43 162.749 188.543 160.969 188.543C138.176 188.543 119.699 170.069 119.699 147.28C119.699 127.697 133.344 111.298 151.646 107.073Z" fill="#00EBD0"/>
+</svg>

package/src/ui/components/EphiaLogo.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import type { CSSProperties } from "react";
+
+/** Source of truth: `src/ui/assets/ephia-logo.svg` (same as apps/ephia-website/public/ephia_logo.svg). */
+export const EPHIA_LOGO_VIEWBOX = "0 0 220 207";
+export const EPHIA_LOGO_ASPECT = 220 / 207;
+
+export const EPHIA_BRAND_PURPLE = "#723ADE";
+export const EPHIA_BRAND_TEAL = "#00EBD0";
+
+const LOGO_PURPLE_PATH =
+  "M130.184 22.8784C110.496 11.7584 85.4808 18.5556 74.1504 38.1772C66.8151 50.8807 67.004 65.8635 73.334 77.9663C76.4886 83.9978 77.6606 91.3208 74.2568 97.2153C70.8529 103.109 63.9255 105.756 57.1241 106.04C55.4205 106.111 53.7254 106.287 52.0498 106.566C51.9939 106.576 51.9377 106.586 51.8818 106.596C51.8243 106.606 51.7665 106.615 51.709 106.625C47.369 107.377 43.2604 108.806 39.4981 110.8C34.2218 113.586 29.4987 117.542 25.7589 122.554C25.7424 122.576 25.7254 122.598 25.709 122.62C25.6788 122.661 25.6482 122.701 25.6182 122.742C21.6987 128.032 19.015 134.293 17.9923 141.097C17.9778 141.192 17.964 141.289 17.9502 141.385C17.9421 141.442 17.9337 141.499 17.9258 141.556C17.6653 143.422 17.5345 145.296 17.5312 147.163V147.28C17.5314 157.14 20.9911 166.192 26.7617 173.29C26.796 173.332 26.8307 173.375 26.8652 173.417C26.928 173.494 26.9915 173.57 27.0548 173.646C27.1098 173.713 27.1653 173.779 27.2207 173.845C27.255 173.885 27.2898 173.927 27.3242 173.968C27.6222 174.319 27.9266 174.666 28.2374 175.009C28.2534 175.026 28.2701 175.044 28.2861 175.061C28.3779 175.162 28.4706 175.263 28.5635 175.363C28.5869 175.388 28.6114 175.413 28.6349 175.438C28.7264 175.536 28.8185 175.635 28.9111 175.732C28.9284 175.75 28.9456 175.769 28.9629 175.787C29.1492 175.982 29.3377 176.176 29.5283 176.367L29.6191 176.458C29.6653 176.504 29.7125 176.55 29.7589 176.596C29.8119 176.648 29.8646 176.702 29.918 176.754C36.4444 183.148 45.0865 187.393 54.6963 188.342C54.7093 188.343 54.7223 188.344 54.7354 188.346C55.0558 188.377 55.3777 188.405 55.7002 188.429C55.7229 188.43 55.746 188.432 55.7687 188.434C55.8996 188.443 56.031 188.452 56.1622 188.46C57.0288 188.515 57.8957 188.543 58.7607 188.543C58.774 188.543 58.7875 188.543 58.8008 188.543C58.8551 188.543 58.9096 188.542 58.9639 188.542C59.0597 188.542 59.1561 188.541 59.252 188.54C66.9707 188.457 74.1811 186.256 80.3292 182.49C80.3971 182.449 80.4656 182.407 80.5333 182.365C80.5789 182.337 80.6245 182.308 80.6699 182.279C85.3019 179.393 89.4161 175.551 92.6865 170.84C92.7302 170.777 92.7741 170.714 92.8174 170.651C92.8427 170.614 92.8684 170.577 92.8936 170.54C94.8281 167.711 96.419 164.628 97.6074 161.353C99.3661 156.525 100.166 151.511 100.075 146.558C100.266 130.196 106.911 115.387 117.584 104.555C120.604 101.544 123.936 98.8469 127.529 96.5151C128.082 96.1565 127.539 96.5073 129.953 95.0288C135.565 91.8709 140.505 87.373 144.245 81.6763C144.281 81.623 144.315 81.5686 144.351 81.5151C144.368 81.489 144.385 81.4622 144.402 81.436C144.828 80.7863 145.239 80.1208 145.632 79.4399C155.114 63.0194 152.024 42.7913 139.35 29.896C136.719 27.1793 133.672 24.7768 130.236 22.7886L130.184 22.8784Z";
+
+const LOGO_TEAL_PATH =
+  "M151.646 107.073C154.645 106.38 157.768 106.016 160.977 106.016C183.769 106.016 202.246 124.49 202.246 147.278C202.246 167.41 187.826 184.171 168.751 187.807C167.995 187.951 167.233 188.074 166.463 188.177C166.383 188.187 166.304 188.201 166.224 188.211C164.503 188.43 162.749 188.543 160.969 188.543C138.176 188.543 119.699 170.069 119.699 147.28C119.699 127.697 133.344 111.298 151.646 107.073Z";
+
+export type EphiaLogoVariant = "color" | "mono";
+
+export interface EphiaLogoProps {
+  height?: number;
+  width?: number;
+  className?: string;
+  style?: CSSProperties;
+  variant?: EphiaLogoVariant;
+  /** Mono fill (custom brand colors). Ignored when variant is "color". */
+  fill?: string;
+  isRecording?: boolean;
+}
+
+export function logoWidthFromHeight(heightPx: number): number {
+  return Math.round(heightPx * EPHIA_LOGO_ASPECT);
+}
+
+export function EphiaLogo({
+  height,
+  width,
+  className,
+  style,
+  variant = "color",
+  fill = "currentColor",
+  isRecording = false,
+}: EphiaLogoProps) {
+  const resolvedHeight = height ?? (width != null ? Math.round(width / EPHIA_LOGO_ASPECT) : 24);
+  const resolvedWidth = width ?? logoWidthFromHeight(resolvedHeight);
+
+  const svgClass = [
+    "ephia-transcribe-logo-svg",
+    isRecording ? "ephia-transcribe-logo-svg--recording" : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <svg
+      viewBox={EPHIA_LOGO_VIEWBOX}
+      className={svgClass}
+      style={{ height: resolvedHeight, width: resolvedWidth, ...style }}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      {variant === "color" ? (
+        <>
+          <path d={LOGO_PURPLE_PATH} fill={EPHIA_BRAND_PURPLE} />
+          <path d={LOGO_TEAL_PATH} fill={EPHIA_BRAND_TEAL} />
+        </>
+      ) : (
+        <>
+          <path d={LOGO_PURPLE_PATH} fill={fill} />
+          <path d={LOGO_TEAL_PATH} fill={fill} />
+        </>
+      )}
+    </svg>
+  );
+}

package/src/ui/index.ts

@@ -0,0 +1,24 @@
+// ── Brand ──────────────────────────────────────────────────
+export {
+  EphiaLogo,
+  EPHIA_BRAND_PURPLE,
+  EPHIA_BRAND_TEAL,
+  EPHIA_LOGO_VIEWBOX,
+  EPHIA_LOGO_ASPECT,
+  logoWidthFromHeight,
+} from "./components/EphiaLogo";
+export type { EphiaLogoProps, EphiaLogoVariant } from "./components/EphiaLogo";
+
+// ── Primitives ─────────────────────────────────────────────
+export { Button, Spinner } from "./primitives";
+export type { ButtonProps, SpinnerProps } from "./primitives";
+
+// ── Recorder ───────────────────────────────────────────────
+export { EphiaFloatingButton } from "./recorder";
+export type {
+  EphiaFloatingButtonProps,
+  EphiaFloatingButtonPosition,
+  EphiaFloatingButtonTheme,
+  EphiaFloatingButtonSize,
+  EphiaFloatingButtonBorderRadius,
+} from "./recorder";

package/src/ui/primitives/Button.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "primary" | "danger" | "ghost" | "outline";
+  size?: "sm" | "md" | "lg";
+  isLoading?: boolean;
+  children: ReactNode;
+};
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  isLoading,
+  children,
+  className = "",
+  disabled,
+  ...rest
+}: ButtonProps) {
+  const base =
+    "inline-flex items-center justify-center font-medium rounded-full transition focus:outline-none focus:ring-2 focus:ring-offset-1";
+
+  const variants = {
+    primary:
+      "bg-[var(--ephia-primary)] text-white hover:opacity-90 focus:ring-[var(--ephia-primary)]",
+    danger:
+      "bg-[var(--ephia-danger)] text-white hover:opacity-90 focus:ring-[var(--ephia-danger)]",
+    ghost:
+      "bg-transparent text-neutral-700 hover:bg-neutral-100 focus:ring-neutral-300",
+    outline:
+      "border border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 focus:ring-neutral-300",
+  };
+
+  const sizes = {
+    sm: "px-3 py-1.5 text-xs",
+    md: "px-4 py-2 text-sm",
+    lg: "px-6 py-3 text-base",
+  };
+
+  return (
+    <button
+      className={`${base} ${variants[variant]} ${sizes[size]} ${className}`}
+      disabled={disabled || isLoading}
+      {...rest}
+    >
+      {isLoading ? (
+        <span className="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+      ) : null}
+      {children}
+    </button>
+  );
+}

package/src/ui/primitives/Spinner.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+export type SpinnerProps = {
+  size?: "sm" | "md" | "lg";
+  className?: string;
+};
+
+export function Spinner({ size = "md", className = "" }: SpinnerProps) {
+  const sizes = {
+    sm: "h-3 w-3 border-2",
+    md: "h-5 w-5 border-2",
+    lg: "h-8 w-8 border-[3px]",
+  };
+
+  return (
+    <span
+      className={`inline-block animate-spin rounded-full border-neutral-300 border-t-[var(--ephia-primary)] ${sizes[size]} ${className}`}
+      aria-label="Chargement"
+    />
+  );
+}

package/src/ui/primitives/index.ts

@@ -0,0 +1,5 @@
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button";
+
+export { Spinner } from "./Spinner";
+export type { SpinnerProps } from "./Spinner";