@sybilion/uilib 1.1.0 → 1.2.0

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.1.0",
+  "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/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)

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

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

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';

package/src/docs/pages/SidebarDatasetsItemsGroupedPage.tsx

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { ToggleGroup, ToggleGroupItem } from '#uilib/components/ui/ToggleGroup';
+import {
+  type SidebarDatasetsItemsGroupBy,
+  SidebarDatasetsItemsGrouped,
+  type SidebarDatasetsItemsGroupedDataset,
+} from '#uilib/components/widgets/SidebarDatasetsItemsGrouped';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const MOCK_DATASETS: SidebarDatasetsItemsGroupedDataset[] = [
+  {
+    id: 1,
+    name: 'Acetic Acid Price - China - Dollar/MT',
+    status: 'active',
+    created_at: '2024-01-01',
+    updated_at: '2024-01-02',
+    keywords: '',
+    category: { id: 10, name: 'Chemicals' },
+    target_type_id: 1,
+    target_type: { id: 1, name: 'Commodity price' },
+    trend: 0,
+    regular_price: '0',
+    sale_price: '0',
+    regions: [
+      { id: 1, name: 'Asia' },
+      { id: 2, name: 'China' },
+    ],
+    unit: { id: 1, name: 'USD/MT' },
+  },
+  {
+    id: 2,
+    name: 'Freight index — spot volume (China)',
+    status: 'active',
+    created_at: '2024-01-01',
+    updated_at: '2024-01-02',
+    keywords: '',
+    category: { id: 10, name: 'Chemicals' },
+    target_type_id: 2,
+    target_type: { id: 2, name: 'Freight index' },
+    trend: 0,
+    regular_price: '0',
+    sale_price: '0',
+    regions: [
+      { id: 1, name: 'Asia' },
+      { id: 2, name: 'China' },
+    ],
+    unit: { id: 1, name: 'Index' },
+  },
+  {
+    id: 3,
+    name: 'Generic industrial chemical — spot volume (Germany)',
+    status: 'active',
+    created_at: '2024-01-01',
+    updated_at: '2024-01-02',
+    keywords: '',
+    category: { id: 10, name: 'Chemicals' },
+    target_type_id: 1,
+    target_type: { id: 1, name: 'Commodity price' },
+    trend: 0,
+    regular_price: '0',
+    sale_price: '0',
+    regions: [
+      { id: 3, name: 'Europe' },
+      { id: 4, name: 'Germany' },
+    ],
+    unit: { id: 1, name: 'MT' },
+  },
+  {
+    id: 4,
+    name: 'Ethanol Price Europe Per Kg In USD',
+    status: 'active',
+    created_at: '2024-01-01',
+    updated_at: '2024-01-02',
+    keywords: '',
+    category: { id: 11, name: 'Energy' },
+    target_type_id: 1,
+    target_type: { id: 1, name: 'Commodity price' },
+    trend: 0,
+    regular_price: '0',
+    sale_price: '0',
+    regions: [{ id: 5, name: 'Europe' }],
+    unit: { id: 1, name: 'USD/kg' },
+  },
+];
+
+export default function SidebarDatasetsItemsGroupedPage() {
+  const [groupBy, setGroupBy] =
+    useState<SidebarDatasetsItemsGroupBy>('regions');
+  const [selectedDatasetId, setSelectedDatasetId] = useState<number>(1);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'SidebarDatasetsItemsGrouped' }]}
+        title="SidebarDatasetsItemsGrouped"
+        subheader="Datasets sidebar: collapsible groups and nested rows."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <ToggleGroup
+          type="single"
+          value={groupBy}
+          onValueChange={val => {
+            if (val) setGroupBy(val as SidebarDatasetsItemsGroupBy);
+          }}
+        >
+          <ToggleGroupItem value="target_type">Target type</ToggleGroupItem>
+          <ToggleGroupItem value="regions">Regions</ToggleGroupItem>
+          <ToggleGroupItem value="categories">Categories</ToggleGroupItem>
+        </ToggleGroup>
+        <div
+          style={{
+            maxWidth: 420,
+            marginTop: 16,
+            padding: 12,
+            background: 'var(--sidebar)',
+            color: 'var(--sidebar-foreground)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--p-4)',
+          }}
+        >
+          <SidebarDatasetsItemsGrouped
+            groupBy={groupBy}
+            datasets={MOCK_DATASETS}
+            selectedDatasetId={selectedDatasetId}
+            onDatasetClick={setSelectedDatasetId}
+          />
+        </div>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/SybilionAuthProviderPage.tsx

@@ -0,0 +1,37 @@
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function SybilionAuthProviderPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'SybilionAuthProvider' }]}
+        title="SybilionAuthProvider"
+        subheader="Auth0 SPA → POST /v1/auth/login → Sybilion JWT. Greenfield installs: docs/standalone-apps.md (yarn add line includes @auth0/auth0-react)."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection title="Exports">
+        <p style={{ marginTop: 0 }}>
+          From <code>@sybilion/uilib</code>:
+        </p>
+        <ul>
+          <li>
+            <code>SybilionAuthProvider</code>
+          </li>
+          <li>
+            <code>useSybilionAuth</code>
+          </li>
+          <li>
+            <code>useSybilionApiFetch</code>,{' '}
+            <code>createSybilionApiFetch</code>, <code>sybilionApiFetch</code>
+          </li>
+          <li>
+            <code>exchangeAuth0AccessTokenForSybilionJwt</code> (advanced)
+          </li>
+        </ul>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -157,10 +157,10 @@ export const DOC_REGISTRY: DocEntry[] = [
     load: () => import('./pages/InteractiveContentPage'),
   },
   {
-    slug: 'mini-app-root',
-    title: 'MiniAppRoot',
+    slug: 'sybilion-auth-provider',
+    title: 'SybilionAuthProvider',
     section: 'Layout',
-    load: () => import('./pages/MiniAppRootPage'),
+    load: () => import('./pages/SybilionAuthProviderPage'),
   },
   {
     slug: 'label',
@@ -252,6 +252,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Layout',
     load: () => import('./pages/SidebarPage'),
   },
+  {
+    slug: 'sidebar-datasets-items-grouped',
+    title: 'SidebarDatasetsItemsGrouped',
+    section: 'Navigation',
+    load: () => import('./pages/SidebarDatasetsItemsGroupedPage'),
+  },
   {
     slug: 'skeleton',
     title: 'Skeleton',

package/src/index.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';