@sybilion/uilib 1.1.0 → 1.2.1

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/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/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/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>
+    </>
+  );
+}