@sybilion/uilib 1.2.5 → 1.2.8

package/src/docs/pages/StandaloneAppLayoutPage/StandaloneAppLayoutPage.constants.ts

@@ -0,0 +1,444 @@
+import { WorkspaceAppEntry } from '#uilib/components/ui/WorkspaceAppSwitcher';
+import { SidebarDatasetsItemsGroupedDataset } from '#uilib/components/widgets/SidebarDatasetsItemsGrouped';
+
+export 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: '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' },
+  },
+  {
+    id: 4,
+    name: 'Brent Crude Oil — Front Month (ICE)',
+    status: 'active',
+    created_at: '2024-01-03',
+    updated_at: '2024-01-04',
+    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: 2, name: 'USD/bbl' },
+  },
+  {
+    id: 5,
+    name: 'WTI Crude — Cushing Spot',
+    status: 'active',
+    created_at: '2024-01-05',
+    updated_at: '2024-01-06',
+    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: 3, name: 'North America' },
+      { id: 4, name: 'United States' },
+    ],
+    unit: { id: 2, name: 'USD/bbl' },
+  },
+  {
+    id: 6,
+    name: 'Natural Gas Henry Hub — USD/MMBtu',
+    status: 'active',
+    created_at: '2024-01-07',
+    updated_at: '2024-01-08',
+    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: 3, name: 'North America' },
+      { id: 4, name: 'United States' },
+    ],
+    unit: { id: 3, name: 'USD/MMBtu' },
+  },
+  {
+    id: 7,
+    name: 'LNG JKM — Japan-Korea Marker',
+    status: 'active',
+    created_at: '2024-01-09',
+    updated_at: '2024-01-10',
+    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: 1, name: 'Asia' },
+      { id: 2, name: 'China' },
+    ],
+    unit: { id: 4, name: 'USD/MMBtu' },
+  },
+  {
+    id: 8,
+    name: 'Copper — LME Cash Official USD/MT',
+    status: 'active',
+    created_at: '2024-01-11',
+    updated_at: '2024-01-12',
+    keywords: '',
+    category: { id: 12, name: 'Metals' },
+    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/MT' },
+  },
+  {
+    id: 9,
+    name: 'Aluminium — LME 3M USD/MT',
+    status: 'active',
+    created_at: '2024-01-13',
+    updated_at: '2024-01-14',
+    keywords: '',
+    category: { id: 12, name: 'Metals' },
+    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/MT' },
+  },
+  {
+    id: 10,
+    name: 'Steel HRC — US Midwest ($/st)',
+    status: 'active',
+    created_at: '2024-01-15',
+    updated_at: '2024-01-16',
+    keywords: '',
+    category: { id: 12, name: 'Metals' },
+    target_type_id: 1,
+    target_type: { id: 1, name: 'Commodity price' },
+    trend: 0,
+    regular_price: '0',
+    sale_price: '0',
+    regions: [
+      { id: 3, name: 'North America' },
+      { id: 4, name: 'United States' },
+    ],
+    unit: { id: 5, name: 'USD/st' },
+  },
+  {
+    id: 11,
+    name: 'Urea FOB Middle East — Granular',
+    status: 'active',
+    created_at: '2024-01-17',
+    updated_at: '2024-01-18',
+    keywords: '',
+    category: { id: 13, name: 'Agriculture' },
+    target_type_id: 1,
+    target_type: { id: 1, name: 'Commodity price' },
+    trend: 0,
+    regular_price: '0',
+    sale_price: '0',
+    regions: [{ id: 6, name: 'Middle East' }],
+    unit: { id: 1, name: 'USD/MT' },
+  },
+  {
+    id: 12,
+    name: 'Corn — CBOT Nearby (cents/bu)',
+    status: 'active',
+    created_at: '2024-01-19',
+    updated_at: '2024-01-20',
+    keywords: '',
+    category: { id: 13, name: 'Agriculture' },
+    target_type_id: 1,
+    target_type: { id: 1, name: 'Commodity price' },
+    trend: 0,
+    regular_price: '0',
+    sale_price: '0',
+    regions: [
+      { id: 3, name: 'North America' },
+      { id: 4, name: 'United States' },
+    ],
+    unit: { id: 6, name: 'cents/bu' },
+  },
+  {
+    id: 13,
+    name: 'Soybeans — CBOT Nearby',
+    status: 'active',
+    created_at: '2024-01-21',
+    updated_at: '2024-01-22',
+    keywords: '',
+    category: { id: 13, name: 'Agriculture' },
+    target_type_id: 1,
+    target_type: { id: 1, name: 'Commodity price' },
+    trend: 0,
+    regular_price: '0',
+    sale_price: '0',
+    regions: [
+      { id: 3, name: 'North America' },
+      { id: 4, name: 'United States' },
+    ],
+    unit: { id: 7, name: 'USD/bu' },
+  },
+  {
+    id: 14,
+    name: 'Coffee Arabica — ICE NY',
+    status: 'active',
+    created_at: '2024-01-23',
+    updated_at: '2024-01-24',
+    keywords: '',
+    category: { id: 13, name: 'Agriculture' },
+    target_type_id: 1,
+    target_type: { id: 1, name: 'Commodity price' },
+    trend: 0,
+    regular_price: '0',
+    sale_price: '0',
+    regions: [{ id: 8, name: 'Latin America' }],
+    unit: { id: 8, name: 'USD/lb' },
+  },
+  {
+    id: 15,
+    name: 'Sugar #11 — ICE NY',
+    status: 'active',
+    created_at: '2024-01-25',
+    updated_at: '2024-01-26',
+    keywords: '',
+    category: { id: 13, name: 'Agriculture' },
+    target_type_id: 1,
+    target_type: { id: 1, name: 'Commodity price' },
+    trend: 0,
+    regular_price: '0',
+    sale_price: '0',
+    regions: [{ id: 8, name: 'Latin America' }],
+    unit: { id: 8, name: 'USD/lb' },
+  },
+  {
+    id: 16,
+    name: 'Polyethylene HDPE — CFR China',
+    status: 'active',
+    created_at: '2024-01-27',
+    updated_at: '2024-01-28',
+    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: 17,
+    name: 'Methanol — CFR China',
+    status: 'active',
+    created_at: '2024-01-29',
+    updated_at: '2024-01-30',
+    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: 18,
+    name: 'Charter rates — Panamax Atlantic',
+    status: 'active',
+    created_at: '2024-02-01',
+    updated_at: '2024-02-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: 5, name: 'Europe' }],
+    unit: { id: 1, name: 'Index' },
+  },
+  {
+    id: 19,
+    name: 'Container freight — Asia to US West Coast',
+    status: 'active',
+    created_at: '2024-02-03',
+    updated_at: '2024-02-04',
+    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: 20,
+    name: 'Thermal Coal — Newcastle 6,000 kcal',
+    status: 'active',
+    created_at: '2024-02-05',
+    updated_at: '2024-02-06',
+    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: 9, name: 'Oceania' }],
+    unit: { id: 1, name: 'USD/MT' },
+  },
+  {
+    id: 21,
+    name: 'Diesel ARA — USD/MT',
+    status: 'active',
+    created_at: '2024-02-07',
+    updated_at: '2024-02-08',
+    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/MT' },
+  },
+  {
+    id: 22,
+    name: 'Propylene — Contract FD NWE',
+    status: 'active',
+    created_at: '2024-02-09',
+    updated_at: '2024-02-10',
+    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: 5, name: 'Europe' }],
+    unit: { id: 1, name: 'EUR/MT' },
+  },
+  {
+    id: 23,
+    name: 'Ammonia — CFR India',
+    status: 'active',
+    created_at: '2024-02-11',
+    updated_at: '2024-02-12',
+    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' }],
+    unit: { id: 1, name: 'USD/MT' },
+  },
+];
+
+export type PreviewPanel = 'home' | 'datasets';
+
+export const TEST_HEADER_ID = 'test-header-id';
+
+export const DOCS_WORKSPACE_APPS_LS_KEY = 'uilib.docs.workspaceApps';
+
+export const DOCS_PREVIEW_APPS: WorkspaceAppEntry[] = [
+  {
+    id: 'docs-home',
+    displayName: 'Datasets Dashboard',
+    subtitle: 'Data analysis tools',
+    iconKey: 'grid-four',
+    accent: '#0d9488',
+    accentMuted: 'rgba(13, 148, 136, 0.12)',
+    href: '/docs-preview/home',
+    matchPathPrefixes: ['/docs-preview/home'],
+  },
+  {
+    id: 'docs-datasets',
+    displayName: 'Datasets',
+    subtitle: 'Dataset library',
+    iconKey: 'package',
+    accent: '#6366f1',
+    accentMuted: 'rgba(99, 102, 241, 0.12)',
+    href: '/docs-preview/datasets',
+    matchPathPrefixes: ['/docs-preview/datasets'],
+  },
+  {
+    id: 'my-custom-app',
+    displayName: 'Custom app',
+    subtitle: 'Slug-only app (sybilion.io/apps/…)',
+    iconKey: 'boat',
+    accent: '#0ea5e9',
+    accentMuted: 'rgba(14, 165, 233, 0.12)',
+    href: '/apps/my-custom-app',
+  },
+];

package/src/docs/pages/{StandaloneAppLayoutPage.styl → StandaloneAppLayoutPage/StandaloneAppLayoutPage.styl}

@@ -1,4 +1,4 @@
-@import '../../lib/theme.styl'
+@import '../../../lib/theme.styl'
 
 // Embed preview: Sidebar uses position:fixed + viewport top/height; PageScroll uses 100vh.
 // Transform creates a containing block for `fixed` children; overrides stop bleed into docs chrome.
@@ -24,23 +24,13 @@
     height auto !important
     flex 1
 
-.preview aside[data-side="left"]
-  top 0 !important
-  left 0 !important
-  height 100% !important
-  min-height 0 !important
-
-  @media (min-width MOBILE)
-    height 100% !important
-
-.preview aside[data-side="left"] > div:first-child
-  height 100% !important
-  max-height 100% !important
-
-  @media (min-width MOBILE)
-    height 100% !important
-
-.preview [data-slot="sidebar-resize-handle"]
-  top 0 !important
-  height 100% !important
-  max-height 100%
+// Datasets panel: tall block for scroll testing inside PageScroll.
+.scrollTestBlock
+  min-height 100vh
+  margin-top var(--p-4)
+  padding var(--p-4)
+  border-radius var(--p-2)
+  border 2px dashed var(--border)
+  background-color var(--background)
+  color var(--muted-foreground)
+  font-size var(--text-sm)

package/src/docs/pages/{StandaloneAppLayoutPage.styl.d.ts → StandaloneAppLayoutPage/StandaloneAppLayoutPage.styl.d.ts}

@@ -3,6 +3,7 @@
 interface CssExports {
   'preview': string;
   'previewScrollRoot': string;
+  'scrollTestBlock': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/src/docs/pages/{StandaloneAppLayoutPage.tsx → StandaloneAppLayoutPage/StandaloneAppLayoutPage.tsx}

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 
 import { AppHeaderHost } from '#uilib/components/ui/AppHeader';
 import { DropdownMenuItem } from '#uilib/components/ui/DropdownMenu';
@@ -14,119 +14,26 @@ import { PageScroll } from '#uilib/components/ui/Page/PageScroll/PageScroll';
 import {
   Sidebar,
   SidebarContent,
-  SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
 } from '#uilib/components/ui/Sidebar/Sidebar';
-import type { WorkspaceAppEntry } from '#uilib/components/ui/WorkspaceAppSwitcher';
-import {
-  SidebarDatasetsItemsGrouped,
-  type SidebarDatasetsItemsGroupedDataset,
-} from '#uilib/components/widgets/SidebarDatasetsItemsGrouped';
+import { SidebarDatasetsItemsGrouped } from '#uilib/components/widgets/SidebarDatasetsItemsGrouped';
 import { SybilionAppHeader } from '#uilib/components/widgets/SybilionAppHeader';
 import { GearSixIcon, UserCircleIcon } from '@phosphor-icons/react';
 import { House } from 'lucide-react';
 
-import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
-import { DocsHeaderActions } from '../docsHeaderActions';
+import { AppPageHeader } from '../../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../../docsHeaderActions';
+import {
+  DOCS_PREVIEW_APPS,
+  DOCS_WORKSPACE_APPS_LS_KEY,
+  MOCK_DATASETS,
+  PreviewPanel,
+  TEST_HEADER_ID,
+} from './StandaloneAppLayoutPage.constants';
 import S from './StandaloneAppLayoutPage.styl';
 
-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: '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' },
-  },
-];
-
-type PreviewPanel = 'home' | 'datasets';
-
-const TEST_HEADER_ID = 'test-header-id';
-
-const DOCS_WORKSPACE_APPS_LS_KEY = 'uilib.docs.workspaceApps';
-
-const DOCS_PREVIEW_APPS: WorkspaceAppEntry[] = [
-  {
-    id: 'docs-home',
-    displayName: 'Datasets Dashboard',
-    subtitle: 'Data analysis tools',
-    iconKey: 'grid-four',
-    accent: '#0d9488',
-    accentMuted: 'rgba(13, 148, 136, 0.12)',
-    href: '/docs-preview/home',
-    matchPathPrefixes: ['/docs-preview/home'],
-  },
-  {
-    id: 'docs-datasets',
-    displayName: 'Datasets',
-    subtitle: 'Dataset library',
-    iconKey: 'package',
-    accent: '#6366f1',
-    accentMuted: 'rgba(99, 102, 241, 0.12)',
-    href: '/docs-preview/datasets',
-    matchPathPrefixes: ['/docs-preview/datasets'],
-  },
-  {
-    id: 'my-custom-app',
-    displayName: 'Custom app',
-    subtitle: 'Slug-only app (sybilion.io/apps/…)',
-    iconKey: 'boat',
-    accent: '#0ea5e9',
-    accentMuted: 'rgba(14, 165, 233, 0.12)',
-    href: '/apps/my-custom-app',
-  },
-];
-
 function DemoAppSidebar({
   panel,
   onSelectPanel,
@@ -139,11 +46,7 @@ function DemoAppSidebar({
   onSelectDatasetId: (id: number | undefined) => void;
 }) {
   return (
-    <Sidebar
-      variant="inset"
-      collapsible="offcanvas"
-      style={{ maxHeight: '100%', height: '100%' }}
-    >
+    <Sidebar variant="inset" collapsible="offcanvas">
       <SidebarContent>
         <SidebarDatasetsItemsGrouped
           preItems={
@@ -208,23 +111,24 @@ function DemoMainBody({ panel }: { panel: PreviewPanel }) {
             box.
           </p>
         </PageContentSection>
+        <PageContentSection title="Scroll test">
+          <div className={S.scrollTestBlock}>
+            Placeholder region with <code>min-height: 100vh</code> — scroll the
+            main column to verify PageScroll / AppShell behavior.
+          </div>
+        </PageContentSection>
       </PageContent>
     </>
   );
 }
 
 function StandaloneLayoutPreview() {
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
   const [panel, setPanel] = useState<PreviewPanel>('home');
   const [previewPath, setPreviewPath] = useState('/docs-preview/home');
   const [selectedDatasetId, setSelectedDatasetId] = useState<
     number | undefined
   >();
 
-  const onThemeToggle = useCallback(() => {
-    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
-  }, []);
-
   return (
     <div className={S.preview}>
       <PageScroll rootClassName={S.previewScrollRoot}>
@@ -257,8 +161,6 @@ function StandaloneLayoutPreview() {
                 email: 'preview@example.com',
                 avatar: '',
               }}
-              theme={theme}
-              onThemeToggle={onThemeToggle}
               onLogout={() => undefined}
               menuItems={
                 <>

package/src/docs/registry.ts

@@ -220,7 +220,8 @@ export const DOC_REGISTRY: DocEntry[] = [
     slug: 'standalone-app-layout',
     title: 'Standalone app layout',
     section: 'Layout',
-    load: () => import('./pages/StandaloneAppLayoutPage'),
+    load: () =>
+      import('./pages/StandaloneAppLayoutPage/StandaloneAppLayoutPage'),
   },
   {
     slug: 'progress',