@sybilion/uilib 1.2.0 → 1.2.3

package/src/components/ui/NavUserHeader/NavUserHeader.tsx

@@ -0,0 +1,148 @@
+import cn from 'classnames';
+
+import {
+  MoonIcon,
+  SignOutIcon,
+  SunIcon,
+  UserCircleIcon,
+} from '@phosphor-icons/react';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import { Image } from '../Image';
+import S from './NavUserHeader.styl';
+import type { NavUserHeaderProps } from './NavUserHeader.types';
+
+export function NavUserHeader({
+  variant = 'default',
+  isLoading = false,
+  isAuthenticated,
+  user = null,
+  menuItems,
+  theme,
+  onThemeToggle,
+  onLogout,
+  signInSlot,
+  onSignInClick,
+}: NavUserHeaderProps) {
+  const authenticated = isAuthenticated ?? true;
+
+  const avatarUrl = user?.avatar ?? '';
+  const userName = user?.name ?? '';
+  const userEmail = user?.email ?? '';
+
+  if (isLoading) {
+    return (
+      <Button variant="ghost" size="sm" disabled className={S.loadingButton}>
+        <div className={S.avatarSkeleton} />
+        <div className={S.textSkeleton} />
+      </Button>
+    );
+  }
+
+  if (!authenticated) {
+    if (signInSlot) {
+      return signInSlot;
+    }
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        className={S.loginButton}
+        type="button"
+        onClick={onSignInClick}
+      >
+        <UserCircleIcon className={S.iconLg} />
+        <span>Log in</span>
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn(S.userButton, variant === 'compact' && S.compact)}
+        >
+          <Avatar className={S.avatar}>
+            <Image
+              url={avatarUrl}
+              alt={userName}
+              fallback={<div className={S.avatarFallback} />}
+            />
+          </Avatar>
+          {variant === 'default' && (
+            <>
+              <div className={S.userInfo}>
+                <span className={`${S.userName} ph-no-capture`}>
+                  {userName}
+                </span>
+                <span className={S.userEmail}>{userEmail}</span>
+              </div>
+              <ChevronDownIcon className={S.iconSm} />
+            </>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className={S.dropdownContent}
+        align="end"
+        elevation="md"
+      >
+        <DropdownMenuLabel className={S.userLabel}>
+          <div className={S.userLabelContent}>
+            <Avatar className={S.avatar}>
+              <Image
+                url={avatarUrl}
+                alt={userName}
+                fallback={<div className={S.avatarFallback} />}
+              />
+            </Avatar>
+            <div className={S.userDetails}>
+              <span className={`${S.userDetailName} ph-no-capture`}>
+                {userName}
+              </span>
+              <span className={S.userDetailEmail}>{userEmail}</span>
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          {menuItems}
+          {onThemeToggle ? (
+            <DropdownMenuItem onSelect={() => onThemeToggle()}>
+              {theme === 'dark' ? (
+                <>
+                  <SunIcon />
+                  Light theme
+                </>
+              ) : (
+                <>
+                  <MoonIcon />
+                  Dark theme
+                </>
+              )}
+            </DropdownMenuItem>
+          ) : null}
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive" onSelect={() => onLogout()}>
+          <SignOutIcon />
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/ui/NavUserHeader/NavUserHeader.types.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+export type NavUserHeaderUser = {
+  name: string;
+  email: string;
+  /** Passed to avatar `Image` as `src`. */
+  avatar?: string;
+};
+
+export type NavUserHeaderProps = {
+  variant?: 'default' | 'compact';
+  isLoading?: boolean;
+  /** When false, signed-out branch is shown. Defaults to true when omitted. */
+  isAuthenticated?: boolean;
+  /** Present when authenticated: shown in trigger and dropdown label. */
+  user?: NavUserHeaderUser | null;
+  /** Rows inside the menu above theme toggle and logout. Use `DropdownMenuItem` nodes. */
+  menuItems?: ReactNode;
+  /** Current theme drives the toggle row label/icons. */
+  theme: 'light' | 'dark';
+  /** When set, renders the light/dark theme menu row. */
+  onThemeToggle?: () => void;
+  onLogout: () => void;
+  /** Replaces default “Log in” control when signed out. */
+  signInSlot?: ReactNode;
+  onSignInClick?: () => void;
+};

package/src/components/ui/NavUserHeader/avatar.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none">
+	<path fill="#ECFEFF" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" />
+	<path fill="#22D3EE" fill-rule="evenodd" d="M17.4 9.454h-2.8V8h2.8zm1.4 1.455V9.454h-1.4v1.455zm0 2.91v-2.91h1.4v2.91zm-1.4 1.454v-1.455h1.4v1.455zm-2.8 0h2.8v1.454h-2.8zm-1.4-1.455v1.455h1.4v-1.455zm0-2.91v2.91h-1.4v-2.91zm0 0h1.4V9.455h-1.4zm6.3 11.638h-7V21.09h-2.1v-1.455h1.4v-1.454h2.1v-1.454h-2.1v1.454h-1.4v1.454H9v1.455h1.4v1.455h2.1V24h7zm2.1-1.455v1.455h-2.1V21.09zm0-1.455H23v1.455h-1.4zm-1.4-1.454v1.454h1.4v-1.454zm0 0h-2.1v-1.454h2.1z" clip-rule="evenodd" />
+</svg>

package/src/components/ui/NavUserHeader/index.ts

@@ -0,0 +1,5 @@
+export { NavUserHeader } from './NavUserHeader';
+export type {
+  NavUserHeaderProps,
+  NavUserHeaderUser,
+} from './NavUserHeader.types';

package/src/components/ui/Page/AppShell/AppShell.styl

@@ -5,6 +5,7 @@
   flex 1
   min-height 0
   width 100%
+  min-height 100%
   grid-template-columns 1fr
   grid-template-areas "main"
 

package/src/components/ui/Page/PageScroll/PageScroll.tsx

@@ -9,9 +9,12 @@ import S from './PageScroll.styl';
 
 function PageScrollInner({
   className,
+  rootClassName,
   children,
 }: {
   className?: string;
+  /** Merged onto the outer Scroll root (e.g. embed previews that must not use `100vh`). */
+  rootClassName?: string;
   children: React.ReactNode;
 }) {
   // const { setIsScrolled } = useContext(PageContext);
@@ -38,7 +41,7 @@ function PageScrollInner({
       y
       // fadeSize="l"
       offset={{ y: { before: 120, after: 130 } }}
-      className={S.root}
+      className={cn(S.root, rootClassName)}
       autoHide
       innerClassName={cn(S.inner, className)}
       yScrollbarClassName={S.scrollbar}
@@ -55,15 +58,19 @@ function PageScrollInner({
 export const PageScroll = ({
   children,
   className,
+  rootClassName,
 }: {
   children: React.ReactNode;
   className?: string;
+  rootClassName?: string;
 }) => {
   const [isScrolled, setIsScrolled] = useState(false);
 
   return (
     <PageContext.Provider value={{ isScrolled, setIsScrolled }}>
-      <PageScrollInner className={className}>{children}</PageScrollInner>
+      <PageScrollInner className={className} rootClassName={rootClassName}>
+        {children}
+      </PageScrollInner>
     </PageContext.Provider>
   );
 };

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

@@ -22,6 +22,8 @@ import {
 export type SidebarDatasetsItemsGroupedProps = {
   groupBy: SidebarDatasetsItemsGroupBy;
   datasets: SidebarDatasetsItemsGroupedDataset[];
+  preItems?: React.ReactNode;
+  postItems?: React.ReactNode;
   selectedDatasetId?: number;
   onDatasetClick?: (datasetId: number) => void;
   /** When omitted, all groups start expanded. */
@@ -32,6 +34,8 @@ export type SidebarDatasetsItemsGroupedProps = {
 export function SidebarDatasetsItemsGrouped({
   groupBy,
   datasets,
+  preItems,
+  postItems,
   selectedDatasetId,
   onDatasetClick,
   defaultExpandedGroupNames,
@@ -74,6 +78,8 @@ export function SidebarDatasetsItemsGrouped({
   return (
     <SidebarGroup className={className}>
       <SidebarMenu>
+        {preItems}
+
         {grouped.map(([groupName, groupDatasets]) => {
           const isExpanded = expanded.has(groupName);
           const parentActive = groupDatasets.some(
@@ -97,6 +103,7 @@ export function SidebarDatasetsItemsGrouped({
                   )}
                 </div>
               </SidebarMenuButton>
+
               {isExpanded && (
                 <SidebarMenuSub className={S.subMenuContainer}>
                   <div className={S.subMenuBorder} />
@@ -122,6 +129,8 @@ export function SidebarDatasetsItemsGrouped({
             </SidebarMenuItem>
           );
         })}
+
+        {postItems}
       </SidebarMenu>
     </SidebarGroup>
   );

package/src/docs/pages/NavUserHeaderPage.tsx

@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { DropdownMenuItem } from '#uilib/components/ui/DropdownMenu';
+import { NavUserHeader } from '#uilib/components/ui/NavUserHeader';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { GearSixIcon, UserCircleIcon } from '@phosphor-icons/react';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function NavUserHeaderPage() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+    return () => {
+      delete document.documentElement.dataset.theme;
+    };
+  }, [theme]);
+
+  const onThemeToggle = useCallback(() => {
+    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
+  }, []);
+
+  const customMenuItems = (
+    <>
+      <DropdownMenuItem>
+        <UserCircleIcon />
+        Account (custom)
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <GearSixIcon />
+        Settings (custom)
+      </DropdownMenuItem>
+    </>
+  );
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'NavUserHeader' }]}
+        title="NavUserHeader"
+        subheader="User menu with label, custom rows, theme toggle, and logout."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', flexWrap: 'wrap', gap: '2rem' }}
+      >
+        <div>
+          <p style={{ marginBottom: 8, fontSize: 12 }}>
+            Signed in · default variant
+          </p>
+          <NavUserHeader
+            user={{
+              name: 'Demo Analyst',
+              email: 'demo@sybilion.io',
+              avatar: '',
+            }}
+            theme={theme}
+            onThemeToggle={onThemeToggle}
+            onLogout={() => {
+              console.info('[docs] logout');
+            }}
+            menuItems={customMenuItems}
+          />
+        </div>
+        <div>
+          <p style={{ marginBottom: 8, fontSize: 12 }}>
+            Signed in · compact variant
+          </p>
+          <NavUserHeader
+            variant="compact"
+            user={{
+              name: 'Compact',
+              email: 'compact@sybilion.io',
+              avatar: '',
+            }}
+            theme={theme}
+            onThemeToggle={onThemeToggle}
+            onLogout={() => {
+              console.info('[docs] logout compact');
+            }}
+            menuItems={customMenuItems}
+          />
+        </div>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/StandaloneAppLayoutPage.styl

@@ -0,0 +1,46 @@
+@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.
+.preview
+  position relative
+  overflow hidden
+  transform translateZ(0)
+  border-radius var(--p-4)
+  border 1px solid var(--border)
+  background-color var(--background)
+  height min(720px, 80vh)
+  min-height 0
+  display flex
+  flex-direction column
+
+.previewScrollRoot
+  flex 1
+  min-height 0
+  height 100% !important
+  max-height 100% !important
+
+  @media (max-width MOBILE)
+    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%

package/src/docs/pages/StandaloneAppLayoutPage.styl.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'preview': string;
+  'previewScrollRoot': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/docs/pages/StandaloneAppLayoutPage.tsx

@@ -0,0 +1,242 @@
+import { useCallback, useState } from 'react';
+
+import { AppHeaderHost, AppHeaderPortal } from '#uilib/components/ui/AppHeader';
+import { Gap } from '#uilib/components/ui/Gap/Gap';
+import { NavUserHeader } from '#uilib/components/ui/NavUserHeader/NavUserHeader';
+import {
+  AppShell,
+  AppShellMainContent,
+  PageContentSection,
+} from '#uilib/components/ui/Page';
+import { PageFooter } from '#uilib/components/ui/Page/PageFooter/PageFooter';
+import { PageScroll } from '#uilib/components/ui/Page/PageScroll/PageScroll';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '#uilib/components/ui/Sidebar/Sidebar';
+import {
+  SidebarDatasetsItemsGrouped,
+  type SidebarDatasetsItemsGroupedDataset,
+} from '#uilib/components/widgets/SidebarDatasetsItemsGrouped';
+import { House } from 'lucide-react';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+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';
+
+function DemoAppSidebar({
+  panel,
+  onSelectPanel,
+  selectedDatasetId,
+  onSelectDatasetId,
+}: {
+  panel: PreviewPanel;
+  onSelectPanel: (p: PreviewPanel) => void;
+  selectedDatasetId: number | undefined;
+  onSelectDatasetId: (id: number | undefined) => void;
+}) {
+  return (
+    <Sidebar
+      variant="inset"
+      collapsible="offcanvas"
+      style={{ maxHeight: '100%', height: '100%' }}
+    >
+      <SidebarContent>
+        <SidebarDatasetsItemsGrouped
+          preItems={
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                type="button"
+                isActive={panel === 'home'}
+                onClick={() => onSelectPanel('home')}
+              >
+                <House size={16} strokeWidth={1.75} aria-hidden />
+                Home
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          }
+          groupBy="regions"
+          datasets={MOCK_DATASETS}
+          selectedDatasetId={selectedDatasetId}
+          onDatasetClick={id => {
+            onSelectDatasetId(id);
+            onSelectPanel('datasets');
+          }}
+        />
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+
+function DemoMainBody({ panel }: { panel: PreviewPanel }) {
+  if (panel === 'home') {
+    return (
+      <div style={{ padding: 'var(--p-6)' }}>
+        <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.125rem' }}>Home</h2>
+        <p style={{ margin: 0, color: 'var(--muted-foreground)' }}>
+          Preview: greenfield shell layout only (no SDK or auth). Real SPA uses
+          one top-level Router; this embed cannot nest MemoryRouter under docs
+          BrowserRouter — sidebar uses local state instead of{' '}
+          <code>NavLink</code> / <code>Routes</code>.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: 'var(--p-6)' }}>
+      <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.125rem' }}>Datasets</h2>
+      <p style={{ margin: 0, color: 'var(--muted-foreground)' }}>
+        Use sidebar links and dataset rows; panel state stays inside this box.
+      </p>
+    </div>
+  );
+}
+
+function StandaloneLayoutPreview() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  const [panel, setPanel] = useState<PreviewPanel>('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}>
+        <AppShell>
+          <DemoAppSidebar
+            panel={panel}
+            onSelectPanel={setPanel}
+            selectedDatasetId={selectedDatasetId}
+            onSelectDatasetId={setSelectedDatasetId}
+          />
+
+          <AppShellMainContent
+            header={<AppHeaderHost anchorId={TEST_HEADER_ID} />}
+            footer={
+              <PageFooter
+                versionLink="#standalone-layout-preview"
+                versionLabel="0.0.0-preview"
+              />
+            }
+          >
+            <AppHeaderPortal pageHeaderId={TEST_HEADER_ID}>
+              <SidebarTrigger />
+              <Gap />
+              <NavUserHeader
+                user={{
+                  name: 'Preview User',
+                  email: 'preview@example.com',
+                  avatar: '',
+                }}
+                theme={theme}
+                onThemeToggle={onThemeToggle}
+                onLogout={() => undefined}
+              />
+            </AppHeaderPortal>
+            <DemoMainBody panel={panel} />
+          </AppShellMainContent>
+        </AppShell>
+      </PageScroll>
+    </div>
+  );
+}
+
+export default function StandaloneAppLayoutPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Standalone app layout' }]}
+        title="Standalone app layout"
+        subheader={
+          <>
+            Live preview of AppShell + Sidebar + main column from
+            docs/standalone-apps.md §4. <br />
+            Full greenfield setup (deps, global CSS, SybilionAuthProvider, SDK)
+            lives in that doc — this page is layout only.
+          </>
+        }
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection title="Embedded mini-app (layout preview)">
+        <SidebarProvider
+          sidebarWidthStorageKey="uilib.docs.standaloneLayout.sidebarWidthPx"
+          persistSidebarWidthWithoutConsent
+        >
+          <StandaloneLayoutPreview />
+        </SidebarProvider>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/SybilionAuthProviderPage.tsx

@@ -9,7 +9,7 @@ export default function SybilionAuthProviderPage() {
       <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)."
+        subheader="Auth0 SPA → sdk.auth.loginWithAuth0Identity → Sybilion JWT. Pass createSybilionSDK instance via sdk prop; greenfield: docs/standalone-apps.md (yarn add includes @sybilion/sdk, @auth0/auth0-react)."
         actions={<DocsHeaderActions />}
       />
       <PageContentSection title="Exports">
@@ -18,7 +18,10 @@ export default function SybilionAuthProviderPage() {
         </p>
         <ul>
           <li>
-            <code>SybilionAuthProvider</code>
+            <code>SybilionAuthProvider</code> (<code>sdk</code> prop)
+          </li>
+          <li>
+            <code>getSybilionApiOriginFromSdk</code>
           </li>
           <li>
             <code>useSybilionAuth</code>