@sybilion/uilib 1.0.32 → 1.2.0

package/dist/esm/types/src/docs/pages/SybilionAuthProviderPage.d.ts

@@ -0,0 +1 @@
+export default function SybilionAuthProviderPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/index.d.ts

@@ -1,4 +1,5 @@
-export * from './mini-app';
+export * from './sybilion-auth';
+export * from './types/sybilionDatasetSnapshots';
 export * from './contexts/chat-context';
 export * from './types/chat-api.types';
 export * from './components/ui/AnalysesSelector';
@@ -53,3 +54,4 @@ export * from './components/ui/Toggle';
 export * from './components/ui/ToggleGroup';
 export * from './components/ui/Tooltip';
 export * from './components/ui/VimeoEmbed';
+export * from './components/widgets/SidebarDatasetsItemsGrouped';

package/dist/esm/types/src/sybilion-auth/SybilionAuthProvider.d.ts

@@ -0,0 +1,39 @@
+import { type RedirectLoginOptions } from '@auth0/auth0-react';
+import type { JSX, ReactNode } from 'react';
+export type SybilionAuthProviderProps = {
+    children: ReactNode;
+    apiBaseUrl: string;
+    auth0Domain: string;
+    auth0ClientId: string;
+    redirectUri: string;
+    /**
+     * Defaults match sybilion-client AuthProvider (Management API audience + metadata scope).
+     * Override if your Auth0 SPA app uses a Resource Server audience for `/v1/auth/login`.
+     */
+    authorizationParams?: {
+        audience?: string;
+        scope?: string;
+        redirect_uri?: string;
+    };
+    sybilionTokenStorageKey?: string;
+    logoutReturnTo?: string;
+};
+export type SybilionAuthContextValue = {
+    apiBaseUrl: string;
+    isLoading: boolean;
+    /** Auth0 authenticated and Sybilion JWT present. */
+    isAuthenticated: boolean;
+    sybilionAccessToken: string | null;
+    error: string | null;
+    loginWithRedirect: (options?: RedirectLoginOptions) => Promise<void>;
+    logout: () => void;
+    getAuth0AccessToken: () => Promise<string | undefined>;
+    getSybilionAccessToken: () => Promise<string | null>;
+};
+export declare function useSybilionAuth(): SybilionAuthContextValue;
+/** fetch() relative to Sybilion API base with Bearer Sybilion JWT. */
+export declare function sybilionApiFetch(apiBaseUrl: string, bearerToken: string, path: string, init?: RequestInit): Promise<Response>;
+export declare function createSybilionApiFetch(apiBaseUrl: string, getSybilionAccessToken: () => Promise<string | null>): (path: string, init?: RequestInit) => Promise<Response>;
+/** Authenticated fetch using {@link useSybilionAuth} context. */
+export declare function useSybilionApiFetch(): (path: string, init?: RequestInit) => Promise<Response>;
+export declare function SybilionAuthProvider({ children, apiBaseUrl, auth0Domain, auth0ClientId, redirectUri, authorizationParams, sybilionTokenStorageKey, logoutReturnTo, }: SybilionAuthProviderProps): JSX.Element;

package/dist/esm/types/src/sybilion-auth/authPaths.d.ts

@@ -0,0 +1,3 @@
+/** Sybilion platform auth exchange route (joined with trimmed API base URL). */
+export declare const SYBILION_AUTH_LOGIN_PATH = "/v1/auth/login";
+export declare function normalizeApiBaseUrl(url: string): string;

package/dist/esm/types/src/sybilion-auth/exchangeSybilionToken.d.ts

@@ -0,0 +1,2 @@
+/** POST `{ identity: auth0AccessToken, type: 'auth0' }` → Sybilion API JWT string. */
+export declare function exchangeAuth0AccessTokenForSybilionJwt(apiBaseUrl: string, auth0AccessToken: string): Promise<string>;

package/dist/esm/types/src/sybilion-auth/index.d.ts

@@ -0,0 +1,4 @@
+export type { SybilionAuthProviderProps, SybilionAuthContextValue, } from '#uilib/sybilion-auth/SybilionAuthProvider';
+export { SybilionAuthProvider, useSybilionAuth, sybilionApiFetch, createSybilionApiFetch, useSybilionApiFetch, } from '#uilib/sybilion-auth/SybilionAuthProvider';
+export { SYBILION_AUTH_LOGIN_PATH, normalizeApiBaseUrl, } from '#uilib/sybilion-auth/authPaths';
+export { exchangeAuth0AccessTokenForSybilionJwt } from '#uilib/sybilion-auth/exchangeSybilionToken';

package/dist/esm/types/src/{mini-app/miniAppDataTypes.d.ts → types/sybilionDatasetSnapshots.d.ts}

@@ -1,8 +1,7 @@
 /**
- * Serializable shapes returned by the shell for mini-app data getters.
- * Subset of Sybilion `Dataset` / API types — use `unknown` where payloads are large or evolving.
+ * Loose JSON shapes aligned with Sybilion dataset payloads (standalone apps / widgets).
  */
-export type MiniAppDataset = {
+export type SybilionDatasetSnapshot = {
     id: number;
     user_id?: number;
     name: string;
@@ -34,14 +33,12 @@ export type MiniAppDataset = {
     version?: number;
 };
 /** `forecastData` slice: analysis id (string) → forecast series blob. */
-export type MiniAppForecastMap = Record<string, unknown>;
-export type MiniAppPerformanceBundle = {
-    /** Cached Performance-tab API payload, or null if user never opened Performance / cache empty. */
+export type SybilionForecastMap = Record<string, unknown>;
+export type SybilionPerformanceSnapshot = {
     table: unknown;
-    /** In-memory spaghetti lines from shell context, or null. */
     spaghetti: unknown;
 };
-export type MiniAppDriversComparisonSnapshot = {
+export type SybilionDriversComparisonSnapshot = {
     byRegion: unknown;
     byCountry: unknown;
     byCategory: unknown;

package/docs/standalone-apps.md

@@ -0,0 +1,65 @@
+# Standalone Sybilion apps (@sybilion/uilib)
+
+Greenfield SPA on **your own origin**: `@sybilion/uilib` for layout/UI, `**SybilionAuthProvider`\*\* + Sybilion API for data—no iframe in the main client.
+
+**Agents / humans:** Use `AppShell` + `AppShellMainContent`; stick to uilib spacing primitives (no random root horizontal gutters).
+
+## 1. Dependencies and global CSS
+
+```bash
+yarn add react react-dom react-router-dom @auth0/auth0-react @sybilion/uilib
+```
+
+Import tokens/fonts once:
+
+```ts
+import '@sybilion/uilib/standalone-global.css';
+```
+
+## 2. Layout (AppShell)
+
+Pattern: `[src/docs/DocsShell.tsx](https://github.com/Mir-Insight/uilib/blob/main/src/docs/DocsShell.tsx)` — `PageScroll` → `AppShell` → sidebar → `AppShellMainContent` with `AppHeaderHost`, `PageFooter`, main content (`Outlet` / routes). Add `Theme` and optional `SidebarProvider` from `@homecode/ui`.
+
+## 3. Auth (`SybilionAuthProvider`)
+
+Use inside `BrowserRouter` if redirects hit a callback route.
+
+Env vars depend on bundler—for **Vite** only `import.meta.env.VITE_`\* is exposed client-side:
+
+```tsx
+import { SybilionAuthProvider } from '@sybilion/uilib';
+
+const apiBaseUrl = import.meta.env.VITE_SYBILION_API_BASE_URL as string;
+const auth0Domain = import.meta.env.VITE_AUTH0_DOMAIN as string;
+const auth0ClientId = import.meta.env.VITE_AUTH0_CLIENT_ID as string;
+
+<SybilionAuthProvider
+  apiBaseUrl={apiBaseUrl}
+  auth0Domain={auth0Domain}
+  auth0ClientId={auth0ClientId}
+  redirectUri={window.location.origin}
+>
+  <App />
+</SybilionAuthProvider>;
+```
+
+**Flow:** Auth0 SPA → `POST {apiBaseUrl}/v1/auth/login` with `{ identity: "<Auth0 AT>", type: "auth0" }` → Sybilion JWT in response (`data.token` or `token`) → Bearer on API calls.
+
+**Defaults** for `authorizationParams` match sybilion-client (Management audience + `openid profile email offline_access …`); override if your Auth0 SPA needs a Resource Server audience (backend confirms).
+
+| Layer            | Configure                                                                             |
+| ---------------- | ------------------------------------------------------------------------------------- |
+| **Auth0**        | Callback, logout, and web origins → your URLs (+ previews).                           |
+| **Sybilion API** | CORS → your deploy `Origin`.                                                          |
+| **App**          | `apiBaseUrl`, Auth0 `domain` / `clientId`, redirect usually `window.location.origin`. |
+
+**Hooks:** `useSybilionAuth()`, `useSybilionApiFetch()` (or `createSybilionApiFetch` / `sybilionApiFetch` helpers).
+
+## 4. Data
+
+Fetch Sybilion API with the JWT above—no host `postMessage` bridge.
+
+## Related
+
+- [auth0-configuration-guide.md](https://github.com/Mir-Insight/sybilion-client/blob/main/docs/auth0-configuration-guide.md)
+- [server-auth-verification.md](https://github.com/Mir-Insight/sybilion-client/blob/main/docs/server-auth-verification.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.0.32",
+  "version": "1.2.0",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -30,7 +30,7 @@
       "default": "./src/index.ts"
     },
     "./src/*": "./src/*",
-    "./mini-app-global.css": "./assets/mini-app-global.css"
+    "./standalone-global.css": "./assets/standalone-global.css"
   },
   "files": [
     "assets",
@@ -76,6 +76,7 @@
   },
   "homepage": "https://github.com/Mir-Insight/uilib#readme",
   "dependencies": {
+    "@homecode/ui": "^4.17.0",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -104,12 +105,18 @@
     "vaul": "^1.1.2"
   },
   "peerDependencies": {
-    "@homecode/ui": ">=4.17.0",
+    "@auth0/auth0-react": "^2.3.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-router-dom": ">=6.0.0"
   },
+  "peerDependenciesMeta": {
+    "@auth0/auth0-react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@auth0/auth0-react": "^2.3.1",
     "@babel/core": "^7.20.12",
     "@babel/preset-typescript": "^7.21.0",
     "@homecode/ui": "^4.30.6",

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.constants.ts

@@ -0,0 +1,9 @@
+/**
+ * Default chart margins
+ */
+export const CHART_MARGINS = {
+  top: 20,
+  right: 30,
+  bottom: 20,
+  left: -10,
+} as const;

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.tsx

@@ -10,6 +10,7 @@ import { InteractionOverlay } from '#uilib/components/ui/InteractionOverlay/Inte
 import { TimeRangeControls } from '#uilib/components/ui/TimeRangeControls/TimeRangeControls';
 import { ensureChartForecastBridge } from '#uilib/utils/chartConnectionPoint';
 
+import { CHART_MARGINS } from './ChartAreaInteractive.constants';
 import {
   filterDataForTimeRange,
   longDateFormatter,
@@ -151,7 +152,7 @@ export function ChartAreaInteractive({
     formatDate: shortDateFormatter,
     labelFormatter: (v: unknown) => longDateFormatter(v as string),
     chartType: 'composed' as const,
-    margin: { left: -10, right: 30, top: 20, bottom: 20 },
+    margin: { ...CHART_MARGINS },
     hiddenSeries: seriesHidden,
     onLegendClick: handleLegendClick,
     onAnalysisSelect: onAnalysisSelect,

package/src/components/ui/Sidebar/Sidebar.styl

@@ -219,31 +219,6 @@
   padding 0
   padding-top 40px
 
-// Sidebar group label
-.sidebarGroupLabel
-  color var(--sidebar-foreground)
-  opacity 0.7
-  display flex
-  height 2rem
-  flex-shrink 0
-  align-items center
-  border-radius 0.375rem
-  padding-left 0.5rem
-  padding-right 0.5rem
-  font-size 0.75rem
-  font-weight 500
-  outline none
-  transition margin 200ms ease-linear, opacity 200ms ease-linear
-  &:focus-visible
-    box-shadow 0 0 0 2px var(--sidebar-ring)
-  & > svg
-    width 1rem
-    height 1rem
-    flex-shrink 0
-  &[data-collapsible="icon"]
-    margin-top -2rem
-    opacity 0
-
 // Sidebar group action
 .sidebarGroupAction
   color var(--sidebar-foreground)
@@ -278,11 +253,6 @@
   &[data-collapsible="icon"]
     display none
 
-// Sidebar group content
-.sidebarGroupContent
-  width 100%
-  font-size 0.875rem
-
 // Sidebar menu
 .sidebarMenu
   display flex

package/src/components/ui/Sidebar/Sidebar.styl.d.ts

@@ -11,8 +11,6 @@ interface CssExports {
   'sidebarFooter': string;
   'sidebarGroup': string;
   'sidebarGroupAction': string;
-  'sidebarGroupContent': string;
-  'sidebarGroupLabel': string;
   'sidebarHeader': string;
   'sidebarInput': string;
   'sidebarMainShell': string;

package/src/components/ui/Sidebar/Sidebar.tsx

@@ -738,23 +738,6 @@ function SidebarGroup({ className, ...props }: ComponentProps<'div'>) {
   );
 }
 
-function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
-}: ComponentProps<'div'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'div';
-
-  return (
-    <Comp
-      data-slot="sidebar-group-label"
-      data-sidebar="group-label"
-      className={cn(S.sidebarGroupLabel, className)}
-      {...props}
-    />
-  );
-}
-
 function SidebarGroupAction({
   className,
   asChild = false,
@@ -772,17 +755,6 @@ function SidebarGroupAction({
   );
 }
 
-function SidebarGroupContent({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sidebar-group-content"
-      data-sidebar="group-content"
-      className={cn(S.sidebarGroupContent, className)}
-      {...props}
-    />
-  );
-}
-
 function SidebarMenu({ className, ...props }: ComponentProps<'ul'>) {
   return (
     <ul
@@ -952,8 +924,6 @@ export {
   SidebarFooter,
   SidebarGroup,
   SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuAction,
   SidebarMenuBadge,

package/src/components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.styl

@@ -0,0 +1,29 @@
+.chevronContainer
+  margin-left auto
+
+.subMenuContainer
+  position relative
+
+.subMenuBorder
+  position absolute
+  left var(--p-5)
+  top 0
+  bottom 26px
+  width 1px
+  background var(--sidebar-border)
+
+.subMenuItem
+  position relative
+  margin-left var(--p-6)
+
+  &::before
+    content ''
+    position absolute
+    left calc(var(--p-1) * -1)
+    top var(--p-2)
+    bottom 0
+    width var(--p-3)
+    height var(--p-3)
+    border-left 1px solid var(--sidebar-border)
+    border-bottom 1px solid var(--sidebar-border)
+    border-bottom-left-radius var(--p-2)

package/src/{mini-app/MiniAppRoot.styl.d.ts → components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.styl.d.ts}

@@ -1,8 +1,10 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'inner': string;
-  'root': string;
+  'chevronContainer': string;
+  'subMenuBorder': string;
+  'subMenuContainer': string;
+  'subMenuItem': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/src/components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '#uilib/components/ui/Sidebar/Sidebar';
+import { SmartTextTruncate } from '#uilib/components/ui/SmartTextTruncate';
+import { ChevronDown, ChevronRight, PackageOpen } from 'lucide-react';
+
+import S from './SidebarDatasetsItemsGrouped.styl';
+import {
+  type SidebarDatasetsItemsGroupBy,
+  type SidebarDatasetsItemsGroupedDataset,
+  groupSidebarDatasets,
+} from './groupSidebarDatasets';
+
+export type SidebarDatasetsItemsGroupedProps = {
+  groupBy: SidebarDatasetsItemsGroupBy;
+  datasets: SidebarDatasetsItemsGroupedDataset[];
+  selectedDatasetId?: number;
+  onDatasetClick?: (datasetId: number) => void;
+  /** When omitted, all groups start expanded. */
+  defaultExpandedGroupNames?: string[];
+  className?: string;
+};
+
+export function SidebarDatasetsItemsGrouped({
+  groupBy,
+  datasets,
+  selectedDatasetId,
+  onDatasetClick,
+  defaultExpandedGroupNames,
+  className,
+}: SidebarDatasetsItemsGroupedProps) {
+  const grouped = useMemo(
+    () => groupSidebarDatasets(datasets, groupBy),
+    [datasets, groupBy],
+  );
+
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (defaultExpandedGroupNames !== undefined) {
+      setExpanded(new Set(defaultExpandedGroupNames));
+    } else {
+      setExpanded(new Set(grouped.map(([name]) => name)));
+    }
+  }, [grouped, defaultExpandedGroupNames]);
+
+  useEffect(() => {
+    if (selectedDatasetId == null) return;
+    const groupName = grouped.find(([, ds]) =>
+      ds.some(d => d.id === selectedDatasetId),
+    )?.[0];
+    if (groupName) {
+      setExpanded(prev => new Set(prev).add(groupName));
+    }
+  }, [selectedDatasetId, grouped]);
+
+  const toggleGroup = (name: string) => {
+    setExpanded(prev => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  };
+
+  return (
+    <SidebarGroup className={className}>
+      <SidebarMenu>
+        {grouped.map(([groupName, groupDatasets]) => {
+          const isExpanded = expanded.has(groupName);
+          const parentActive = groupDatasets.some(
+            d => d.id === selectedDatasetId,
+          );
+
+          return (
+            <SidebarMenuItem key={groupName}>
+              <SidebarMenuButton
+                type="button"
+                isActive={parentActive}
+                onClick={() => toggleGroup(groupName)}
+              >
+                <PackageOpen strokeWidth={1.5} size={16} />
+                <SmartTextTruncate>{groupName}</SmartTextTruncate>
+                <div className={S.chevronContainer}>
+                  {isExpanded ? (
+                    <ChevronDown size={12} />
+                  ) : (
+                    <ChevronRight size={12} />
+                  )}
+                </div>
+              </SidebarMenuButton>
+              {isExpanded && (
+                <SidebarMenuSub className={S.subMenuContainer}>
+                  <div className={S.subMenuBorder} />
+                  {groupDatasets.map(dataset => (
+                    <SidebarMenuSubItem
+                      key={dataset.id}
+                      className={S.subMenuItem}
+                    >
+                      <SidebarMenuSubButton
+                        href={`#dataset-${dataset.id}`}
+                        isActive={dataset.id === selectedDatasetId}
+                        onClick={e => {
+                          e.preventDefault();
+                          onDatasetClick?.(dataset.id);
+                        }}
+                      >
+                        <SmartTextTruncate>{dataset.name}</SmartTextTruncate>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              )}
+            </SidebarMenuItem>
+          );
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}

package/src/components/widgets/SidebarDatasetsItemsGrouped/groupSidebarDatasets.ts

@@ -0,0 +1,51 @@
+import type { SybilionDatasetSnapshot } from '#uilib/types/sybilionDatasetSnapshots';
+
+export type SidebarDatasetsItemsGroupedDataset = SybilionDatasetSnapshot;
+
+export type SidebarDatasetsItemsGroupBy =
+  | 'target_type'
+  | 'regions'
+  | 'categories';
+
+export type GroupedSidebarDatasetsEntry = readonly [
+  groupName: string,
+  datasets: SidebarDatasetsItemsGroupedDataset[],
+];
+
+export function groupSidebarDatasets(
+  datasets: SidebarDatasetsItemsGroupedDataset[],
+  groupBy: SidebarDatasetsItemsGroupBy,
+): GroupedSidebarDatasetsEntry[] {
+  const grouped: Record<string, SidebarDatasetsItemsGroupedDataset[]> = {};
+
+  datasets.forEach(dataset => {
+    if (groupBy === 'target_type') {
+      const key = dataset.target_type?.name || 'Unknown';
+      if (!grouped[key]) grouped[key] = [];
+      grouped[key].push(dataset);
+    } else if (groupBy === 'regions') {
+      if (dataset.regions && dataset.regions.length > 0) {
+        const mostSpecificRegion = dataset.regions[dataset.regions.length - 1];
+        const key = mostSpecificRegion.name || 'Unknown';
+        if (!grouped[key]) grouped[key] = [];
+        grouped[key].push(dataset);
+      } else {
+        const key = 'No Region';
+        if (!grouped[key]) grouped[key] = [];
+        grouped[key].push(dataset);
+      }
+    } else {
+      const key = dataset.category?.name || 'Unknown';
+      if (!grouped[key]) grouped[key] = [];
+      grouped[key].push(dataset);
+    }
+  });
+
+  return Object.entries(grouped)
+    .map(
+      ([name, ds]) =>
+        [name, [...ds].sort((a, b) => a.name.localeCompare(b.name))] as const,
+    )
+    .filter(([, ds]) => ds.length > 0)
+    .sort((a, b) => a[0].localeCompare(b[0]));
+}

package/src/components/widgets/SidebarDatasetsItemsGrouped/index.ts

@@ -0,0 +1,10 @@
+export {
+  SidebarDatasetsItemsGrouped,
+  type SidebarDatasetsItemsGroupedProps,
+} from './SidebarDatasetsItemsGrouped';
+export type {
+  GroupedSidebarDatasetsEntry,
+  SidebarDatasetsItemsGroupBy,
+  SidebarDatasetsItemsGroupedDataset,
+} from './groupSidebarDatasets';
+export { groupSidebarDatasets } from './groupSidebarDatasets';