@sybilion/uilib 1.0.32 → 1.2.0

package/src/docs/components/DocsSidebar/DocsSidebar.tsx

@@ -6,7 +6,6 @@ import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
-  SidebarGroupContent,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -106,58 +105,56 @@ export function DocsSidebar() {
           />
         </SidebarMenu>
         <SidebarGroup>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {DOC_SECTION_ORDER.map(section => {
-                const entries = bySection.get(section);
-                if (!entries?.length) return null;
+          <SidebarMenu>
+            {DOC_SECTION_ORDER.map(section => {
+              const entries = bySection.get(section);
+              if (!entries?.length) return null;
 
-                const filteredEntries = isFiltering
-                  ? entries.filter(e => entryMatchesQuery(e, q))
-                  : entries;
-                if (!filteredEntries.length) return null;
+              const filteredEntries = isFiltering
+                ? entries.filter(e => entryMatchesQuery(e, q))
+                : entries;
+              if (!filteredEntries.length) return null;
 
-                const isExpanded = isFiltering || expandedSections.has(section);
-                const sectionHasActive = entries.some(
-                  e => location.pathname === `/docs/${e.slug}`,
-                );
+              const isExpanded = isFiltering || expandedSections.has(section);
+              const sectionHasActive = entries.some(
+                e => location.pathname === `/docs/${e.slug}`,
+              );
 
-                return (
-                  <SidebarMenuItem key={section}>
-                    <SidebarMenuButton
-                      type="button"
-                      onClick={() => {
-                        if (!isFiltering) toggleSection(section);
-                      }}
-                      isActive={sectionHasActive}
-                    >
-                      <span>{section}</span>
-                      {isFiltering ? null : renderSectionChevron(isExpanded)}
-                    </SidebarMenuButton>
-                    {isExpanded ? (
-                      <SidebarMenuSub>
-                        {filteredEntries.map(e => {
-                          const to = `/docs/${e.slug}`;
-                          const isActive = location.pathname === to;
-                          return (
-                            <SidebarMenuSubItem key={e.slug}>
-                              <SidebarMenuSubButton
-                                asChild
-                                isActive={isActive}
-                                size="md"
-                              >
-                                <Link to={to}>{e.title}</Link>
-                              </SidebarMenuSubButton>
-                            </SidebarMenuSubItem>
-                          );
-                        })}
-                      </SidebarMenuSub>
-                    ) : null}
-                  </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
+              return (
+                <SidebarMenuItem key={section}>
+                  <SidebarMenuButton
+                    type="button"
+                    onClick={() => {
+                      if (!isFiltering) toggleSection(section);
+                    }}
+                    isActive={sectionHasActive}
+                  >
+                    <span>{section}</span>
+                    {isFiltering ? null : renderSectionChevron(isExpanded)}
+                  </SidebarMenuButton>
+                  {isExpanded ? (
+                    <SidebarMenuSub>
+                      {filteredEntries.map(e => {
+                        const to = `/docs/${e.slug}`;
+                        const isActive = location.pathname === to;
+                        return (
+                          <SidebarMenuSubItem key={e.slug}>
+                            <SidebarMenuSubButton
+                              asChild
+                              isActive={isActive}
+                              size="md"
+                            >
+                              <Link to={to}>{e.title}</Link>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        );
+                      })}
+                    </SidebarMenuSub>
+                  ) : null}
+                </SidebarMenuItem>
+              );
+            })}
+          </SidebarMenu>
         </SidebarGroup>
       </SidebarContent>
     </Sidebar>

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/SidebarPage.tsx

@@ -1,8 +1,6 @@
 import { PageContentSection } from '#uilib/components/ui/Page';
 import {
   SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -20,32 +18,27 @@ export default function SidebarPage() {
         subheader="Sidebar menu primitives (isolated preview)."
         actions={<DocsHeaderActions />}
       />
-      <PageContentSection
-        style={{
-          border: '1px solid var(--border)',
-          borderRadius: 8,
-          padding: 12,
-          maxWidth: 280,
-          background: 'var(--sidebar)',
-          color: 'var(--sidebar-foreground)',
-        }}
-      >
-        <SidebarGroup>
-          <SidebarGroupLabel>Demo</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              <SidebarMenuItem>
-                <SidebarMenuButton type="button" isActive>
-                  Active item
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-              <SidebarMenuItem>
-                <SidebarMenuButton type="button">
-                  Another item
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          </SidebarGroupContent>
+      <PageContentSection>
+        <SidebarGroup
+          style={{
+            maxWidth: 320,
+            padding: 12,
+            background: 'var(--sidebar)',
+            color: 'var(--sidebar-foreground)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--p-4)',
+          }}
+        >
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton type="button" isActive>
+                Active item
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton type="button">Another item</SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
         </SidebarGroup>
       </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';