@astratra/saas-kit-ui 1.1.0 → 1.3.0

package/README.md

@@ -68,7 +68,7 @@ Utilisez ce paquet si `AstratraDashboardApp` vous convient tel quel ; utilisez `
 
 MIT.
 
-## FeedbackBar : 👍 / 👎 sous une réponse d'IA
+## FeedbackBar : pouces sous une réponse d’IA
 
 Le même composant que dans `@astratra/native-ui`, pour le web. Contrôlé :
 l'application garde `value` et parle à son serveur (par exemple
@@ -88,7 +88,7 @@ import { FeedbackBar } from '@astratra/saas-kit-ui';
 Le pouce haut part aussitôt ; le pouce bas ouvre un panneau (raison,
 commentaire facultatif) ; appuyer sur le pouce choisi le retire. Libellés par
 défaut en anglais et en français (`locale`), remplaçables un par un (`labels`) ;
-raisons ajoutables (`reasons`) ; `icons` remplace les émojis ; `haptics` est une
+raisons ajoutables (`reasons`) ; `icons` remplace les pouces dessinés (contour SVG, plein une fois choisi, jamais d'émojis) ; `haptics` est une
 fonction facultative (rien par défaut). Accessibilité : groupe nommé, boutons à
 `aria-pressed`, puces `radio`, panneau `dialog`, Échap le ferme. Le style vient
 des classes `.astratra-feedback*` de `styles.css` et des variables CSS du kit.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astratra/saas-kit-ui",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Reusable React dashboard shell for Astratra SaaS applications, plus a thumbs up/down feedback bar for AI answers.",
   "engines": {
     "node": ">=20"
@@ -9,8 +9,14 @@
   "main": "src/index.jsx",
   "module": "src/index.jsx",
   "exports": {
-    ".": "./src/index.jsx",
-    "./api": "./src/lib/api.js",
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.jsx"
+    },
+    "./api": {
+      "types": "./src/lib/api.d.ts",
+      "default": "./src/lib/api.js"
+    },
     "./styles.css": "./src/styles/global.css"
   },
   "files": [
@@ -35,5 +41,16 @@
   },
   "sideEffects": [
     "**/*.css"
-  ]
+  ],
+  "devDependencies": {
+    "@types/react": "^19.2.18"
+  },
+  "types": "src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "api": [
+        "src/lib/api.d.ts"
+      ]
+    }
+  }
 }

package/src/components/FeedbackBar.js

@@ -8,7 +8,24 @@ import {
   resolveFeedbackLabels
 } from '../lib/feedbackBar.js';
 
-const THUMBS = { up: '\u{1F44D}', down: '\u{1F44E}' };
+/**
+ * The thumbs are drawn, never emoji (an emoji changes with the system and looks out of place in a
+ * product). One outline on a 24 grid; down is the same hand turned upside down. Filled once chosen.
+ */
+export const THUMB_PATH = 'M7 21H4.5A1.5 1.5 0 0 1 3 19.5v-8A1.5 1.5 0 0 1 4.5 10H7M7 21V10l4.2-6.3A1.6 1.6 0 0 1 14 4.6V9h5a2 2 0 0 1 2 2.4l-1.5 7.9A2 2 0 0 1 17.5 21H7';
+
+function thumbIcon(rating, filled) {
+  return h('svg', {
+    'aria-hidden': 'true', focusable: 'false', viewBox: '0 0 24 24', width: 18, height: 18,
+    className: 'astratra-feedback__icon', fill: 'none', stroke: 'currentColor',
+    strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round'
+  }, h('path', {
+    d: THUMB_PATH,
+    fill: filled ? 'currentColor' : 'none',
+    fillOpacity: filled ? 0.9 : undefined,
+    transform: rating === 'down' ? 'matrix(1 0 0 -1 0 24)' : undefined
+  }));
+}
 
 /**
  * Thumbs up / thumbs down under an AI answer. Controlled: the app keeps
@@ -45,7 +62,7 @@ export default function FeedbackBar({
   const thumb = (rating) => h('button', {
     key: rating, type: 'button', disabled, 'aria-pressed': value === rating, 'aria-label': words[rating], title: words[rating],
     className: 'astratra-feedback__thumb', 'data-rating': rating, onClick: () => press(rating)
-  }, icons?.[rating] ?? h('span', { 'aria-hidden': 'true' }, THUMBS[rating]));
+  }, icons?.[rating] ?? thumbIcon(rating, value === rating));
 
   const options = feedbackReasonOptions({ reasons, labels: words, selected: reason });
   return h('div', { id, role: 'group', 'aria-label': words.group, className: ['astratra-feedback', className].filter(Boolean).join(' '), style },

package/src/index.d.ts

@@ -0,0 +1,60 @@
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { ApiFetchOptions } from './lib/api';
+export { ApiError, apiFetch } from './lib/api';
+export type { ApiFetchOptions } from './lib/api';
+export default function AstratraDashboardApp(): ReactElement;
+export { AstratraDashboardApp };
+export interface AuthUser { email?: string; role?: string; [key: string]: unknown }
+export interface AuthValue {
+  isAuthenticated: boolean;
+  token: string | null;
+  user: AuthUser | null;
+  login(input: { email: string; password: string }): Promise<AuthUser>;
+  logout(): void;
+  request<T = unknown>(path: string, options?: ApiFetchOptions): Promise<T>;
+}
+export function AuthProvider(props: { children?: ReactNode }): ReactElement;
+export function useAuth(): AuthValue;
+export type DashboardView = 'dashboard' | 'users' | 'settings';
+export function Layout(props: { activeView: DashboardView; onNavigate: (view: DashboardView) => void; children?: ReactNode }): ReactElement;
+export function Notice(props: { tone?: 'neutral' | 'error' | 'success'; children?: ReactNode }): ReactElement | null;
+export function DashboardScreen(): ReactElement;
+export function LoginScreen(props: { onLoggedIn: () => void }): ReactElement;
+export function SettingsScreen(): ReactElement;
+export function UsersScreen(): ReactElement;
+export type FeedbackRating = 'up' | 'down';
+export type FeedbackReason = 'inaccurate' | 'incomplete' | 'off_topic' | 'wrong_source' | 'too_long' | 'unsafe' | 'other';
+export interface FeedbackPayload { rating: FeedbackRating; reason?: string; comment?: string }
+export interface FeedbackLabels {
+  group: string; up: string; down: string; sheetTitle: string;
+  commentLabel: string; commentPlaceholder: string; submit: string; cancel: string;
+  reasons: Readonly<Record<string, string>>;
+  counter: (used: number, max: number) => string;
+}
+export type FeedbackLabelOverrides = Partial<FeedbackLabels>;
+export const FEEDBACK_COMMENT_MAX: 500;
+export const FEEDBACK_REASONS: readonly FeedbackReason[];
+export const FEEDBACK_LABELS: Readonly<{ en: Readonly<FeedbackLabels>; fr: Readonly<FeedbackLabels> }>;
+export function resolveFeedbackLabels(options?: { locale?: string; labels?: FeedbackLabelOverrides }): FeedbackLabels;
+export type FeedbackAction = { type: 'none' } | { type: 'remove' } | { type: 'ask' } | { type: 'submit'; payload: { rating: 'up' } };
+export function feedbackPress(value: FeedbackRating | null | undefined, rating: unknown): FeedbackAction;
+export function clampComment(text: unknown, max?: number): string;
+export function buildFeedbackPayload(options: { rating: FeedbackRating; reason?: string | null; comment?: string; reasons?: readonly string[]; maxComment?: number }): FeedbackPayload;
+export function feedbackReasonOptions(options: { reasons?: readonly string[]; labels: FeedbackLabels; selected?: string | null }): { id: string; label: string; selected: boolean }[];
+export interface FeedbackBarProps {
+  value?: FeedbackRating | null;
+  onSubmit?: (payload: FeedbackPayload) => void;
+  onRemove?: () => void;
+  disabled?: boolean;
+  reasons?: readonly string[];
+  maxComment?: number;
+  labels?: FeedbackLabelOverrides;
+  locale?: string;
+  icons?: { up?: ReactNode; down?: ReactNode };
+  haptics?: false | (() => void);
+  defaultOpen?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  id?: string;
+}
+export function FeedbackBar(props: FeedbackBarProps): ReactElement;

package/src/lib/api.d.ts

@@ -0,0 +1,15 @@
+export interface ApiFetchOptions {
+  apiUrl?: string;
+  token?: string | null;
+  method?: string;
+  body?: unknown;
+  fetcher?: typeof fetch;
+  onUnauthorized?: () => void;
+}
+export class ApiError extends Error {
+  constructor(message: string, options?: { status?: number; data?: unknown; error?: unknown });
+  status?: number;
+  data?: unknown;
+  error?: unknown;
+}
+export function apiFetch<T = unknown>(path: string, options?: ApiFetchOptions): Promise<T>;

package/src/styles/global.css

@@ -114,10 +114,19 @@ h3 {
   border-radius: 999px;
   background: transparent;
   cursor: pointer;
+  color: var(--text, currentColor);
   opacity: 0.7;
   transition: opacity 120ms, background 120ms;
 }
 
+.astratra-feedback__icon {
+  display: block;
+}
+
+.astratra-feedback__thumb[aria-pressed="true"] .astratra-feedback__icon {
+  color: var(--lime, #d9ff66);
+}
+
 .astratra-feedback__thumb:hover:not(:disabled),
 .astratra-feedback__thumb:focus-visible {
   opacity: 1;