@sybilion/uilib 1.0.20

package/src/docs/components/DocsSidebar/DocsSidebar.styl

@@ -0,0 +1,22 @@
+.sidebarSearch
+  z-index 10
+  position sticky
+  top 0 !important
+  padding var(--p-3) 0 !important
+  left var(--p-8)
+  width calc(100% - var(--p-19)) !important
+  box-shadow 0 8px 10px var(--background)
+
+  input
+    z-index 2
+    border-radius var(--p-3) !important
+    height var(--p-10) !important
+
+  &::before
+    content ''
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+    background-color var(--background)

package/src/docs/components/DocsSidebar/DocsSidebar.styl.d.ts

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

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

@@ -0,0 +1,165 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+import { Input } from '#uilib/components/ui/Input';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '#uilib/components/ui/Sidebar/Sidebar';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+import { DOC_REGISTRY, DOC_SECTION_ORDER } from '../../registry';
+import S from './DocsSidebar.styl';
+
+function entriesBySection() {
+  const map = new Map<string, typeof DOC_REGISTRY>();
+  for (const entry of DOC_REGISTRY) {
+    const list = map.get(entry.section) ?? [];
+    list.push(entry);
+    map.set(entry.section, list);
+  }
+  for (const list of map.values()) {
+    list.sort((a, b) => a.title.localeCompare(b.title));
+  }
+  return map;
+}
+
+function sectionForPathname(pathname: string): string | null {
+  const slug = pathname.match(/\/docs\/([^/]+)/)?.[1];
+  if (!slug) return null;
+  return DOC_REGISTRY.find(e => e.slug === slug)?.section ?? null;
+}
+
+function entryMatchesQuery(
+  entry: (typeof DOC_REGISTRY)[number],
+  q: string,
+): boolean {
+  return (
+    entry.title.toLowerCase().includes(q) ||
+    entry.slug.toLowerCase().includes(q)
+  );
+}
+
+function renderSectionChevron(isExpanded: boolean) {
+  return (
+    <div>
+      {isExpanded ? (
+        <ChevronDown size={12} strokeWidth={1.5} />
+      ) : (
+        <ChevronRight size={12} strokeWidth={1.5} />
+      )}
+    </div>
+  );
+}
+
+export function DocsSidebar() {
+  const location = useLocation();
+  const bySection = entriesBySection();
+  const [sidebarSearch, setSidebarSearch] = useState('');
+  const q = sidebarSearch.trim().toLowerCase();
+  const isFiltering = q.length > 0;
+
+  const activeSection = useMemo(
+    () => sectionForPathname(location.pathname),
+    [location.pathname],
+  );
+
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(() => {
+    const sec = sectionForPathname(location.pathname);
+    return sec ? new Set([sec]) : new Set();
+  });
+
+  useEffect(() => {
+    if (activeSection) {
+      setExpandedSections(prev => new Set(prev).add(activeSection));
+    }
+  }, [activeSection]);
+
+  const toggleSection = (section: string) => {
+    setExpandedSections(prev => {
+      const next = new Set(prev);
+      if (next.has(section)) next.delete(section);
+      else next.add(section);
+      return next;
+    });
+  };
+
+  return (
+    <Sidebar variant="inset" collapsible="offcanvas">
+      <SidebarContent>
+        <SidebarMenu className={S.sidebarSearch}>
+          <Input
+            size="sm"
+            type="search"
+            placeholder="Search…"
+            aria-label="Filter docs navigation"
+            value={sidebarSearch}
+            onChange={e => setSidebarSearch(e.target.value)}
+          />
+        </SidebarMenu>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <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 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>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}

package/src/docs/config/paths.ts

@@ -0,0 +1,18 @@
+import { realpathSync } from 'fs';
+import { resolve } from 'path';
+
+const APP_PATH = realpathSync(process.cwd());
+
+function resolvePath(relativePath: string) {
+  return resolve(APP_PATH, relativePath);
+}
+
+export default {
+  config: resolvePath('src/docs/config'),
+  src: resolvePath('src'),
+  docs: resolvePath('src/docs'),
+  assets: resolvePath('assets'),
+  build: resolvePath('build'),
+  buildAssets: resolvePath('build/assets'),
+  modules: resolvePath('node_modules'),
+};

package/src/docs/config/webpack.config.js

@@ -0,0 +1,212 @@
+import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import { config as loadEnv } from 'dotenv';
+import { existsSync } from 'fs';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { createRequire } from 'module';
+import { resolve as pathResolve } from 'path';
+import webpack from 'webpack';
+
+import paths from './paths.ts';
+
+const require = createRequire(import.meta.url);
+
+loadEnv({ path: pathResolve(process.cwd(), '.env') });
+
+const FaviconWebpackPlugin = require('favicons-webpack-plugin');
+
+const pkg = require('../../../package.json');
+
+const themeStyl = pathResolve(paths.src, 'theme.styl');
+
+export default (env, argv) => {
+  const isDev = argv.mode === 'development';
+  const analyticsPath = `${paths.assets}/analytics.html`;
+  const alias = {
+    '#uilib': paths.src,
+    uilib: paths.src,
+    'docs/components': `${paths.docs}/components`,
+  };
+  if (existsSync(themeStyl)) {
+    alias.theme = themeStyl;
+  }
+
+  const config = {
+    entry: [paths.docs],
+    output: {
+      path: paths.build,
+    },
+
+    resolve: {
+      modules: [paths.src, paths.docs, 'node_modules'],
+      extensions: ['.js', '.ts', '.tsx', '.styl'],
+      alias,
+    },
+
+    optimization: {
+      moduleIds: 'named',
+      minimize: false,
+    },
+
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          loader: 'babel-loader',
+          include: [paths.src, paths.docs],
+          options: {
+            plugins: [isDev && require.resolve('react-refresh/babel')].filter(
+              Boolean,
+            ),
+          },
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+        {
+          test: /\.styl$/,
+          use: [
+            'style-loader',
+            { loader: 'css-modules-typescript-loader' },
+            {
+              loader: 'css-loader',
+              options: {
+                modules: {
+                  localIdentName: '[name]__[local]___[hash:base64:5]',
+                },
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  ident: 'postcss',
+                  plugins: [
+                    ['postcss-preset-env', { stage: 3, autoprefixer: true }],
+                  ],
+                },
+              },
+            },
+            {
+              loader: 'stylus-loader',
+            },
+          ],
+        },
+        {
+          test: /\.svg$/,
+          use: [
+            {
+              loader: '@svgr/webpack',
+              options: {
+                icon: true,
+                ext: 'tsx',
+                typescript: true,
+                exportType: 'default',
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(woff|woff2|eot|ttf)$/,
+          use: {
+            loader: 'file-loader',
+            options: {
+              name: 'static/[name].[ext]',
+              outputPath: 'images/',
+            },
+          },
+        },
+        {
+          test: /\.(png|jpe?g|gif|webp)$/,
+          type: 'asset/resource',
+        },
+      ],
+    },
+
+    plugins: [
+      isDev && new ReactRefreshPlugin(),
+      new CleanWebpackPlugin(),
+      new webpack.ProvidePlugin({
+        React: 'react',
+      }),
+      new webpack.DefinePlugin({
+        isDEV: JSON.stringify(isDev),
+        VERSION: JSON.stringify(pkg.version),
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: `${paths.assets}/*.css`,
+            to: paths.build,
+          },
+          {
+            from: `${paths.assets}/fonts`,
+            to: `${paths.build}/assets/fonts`,
+            noErrorOnMissing: true,
+          },
+          {
+            from: `${paths.assets}/logo.svg`,
+            to: paths.build,
+            noErrorOnMissing: true,
+          },
+        ],
+      }),
+
+      new HtmlWebpackPlugin({
+        lang: 'en',
+        baseUrl: '/',
+        filename: 'index.html',
+        template: `${paths.assets}/index.html`,
+        minify: isDev
+          ? false
+          : {
+              removeComments: true,
+              collapseWhitespace: true,
+              removeRedundantAttributes: true,
+              useShortDoctype: true,
+              removeEmptyAttributes: true,
+              removeStyleLinkTypeAttributes: true,
+              keepClosingSlash: true,
+              minifyJS: true,
+              minifyCSS: true,
+              minifyURLs: true,
+            },
+      }),
+      existsSync(`${paths.assets}/logo.svg`) &&
+        new FaviconWebpackPlugin({
+          logo: `${paths.assets}/logo.svg`,
+          mode: 'webapp',
+          devMode: 'webapp',
+          favicons: {
+            appName: 'Sybilion uilib',
+            developerName: 'Sybilion',
+            developerURL: null,
+            background: '#fff',
+            theme_color: '#1a1a1a',
+            display: 'standalone',
+            icons: { coast: false, yandex: false },
+          },
+        }),
+      new MiniCssExtractPlugin({
+        filename: isDev ? '[name].css' : '[name].[hash].css',
+        chunkFilename: isDev ? '[id].css' : '[id].[hash].css',
+      }),
+    ].filter(Boolean),
+  };
+
+  if (isDev) {
+    Object.assign(config, {
+      devtool: 'source-map',
+      devServer: {
+        hot: true,
+        port: process.env.PORT || 8181,
+        historyApiFallback: true,
+      },
+    });
+  }
+
+  return config;
+};

package/src/docs/contexts/theme-context.tsx

@@ -0,0 +1,47 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+import { Theme as ThemeRoot } from '@homecode/ui';
+
+import { getThemeConfig } from '../lib/theme';
+
+export type ThemeMode = 'light' | 'dark';
+
+const ThemeContext = createContext<{
+  theme: ThemeMode;
+  setTheme: (theme: ThemeMode) => void;
+}>({
+  theme: 'light',
+  setTheme: () => {},
+});
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<ThemeMode>(() => {
+    return (localStorage.getItem('theme') as ThemeMode) || 'light';
+  });
+
+  const [currThemeConfig, setCurrThemeConfig] = useState(() =>
+    getThemeConfig(theme === 'dark'),
+  );
+
+  useEffect(() => {
+    setCurrThemeConfig(getThemeConfig(theme === 'dark'));
+  }, [theme]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const effectiveTheme = theme;
+
+    root.classList.remove('light', 'dark');
+    root.classList.add(effectiveTheme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      <ThemeRoot config={currThemeConfig} />
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => useContext(ThemeContext);

package/src/docs/docsConstants.ts

@@ -0,0 +1,5 @@
+export const DOCS_CHAT_USER_KEY = 1;
+export const DOCS_CHAT_SCOPE_ID = `${DOCS_CHAT_USER_KEY}-docs`;
+
+/** LocalStorage key for docs shell sidebar width (px); no cookie consent gate. */
+export const DOCS_SIDEBAR_WIDTH_LS_KEY = 'sidebar-width';

package/src/docs/docsHeaderActions.tsx

@@ -0,0 +1,18 @@
+import { ChatSheet } from '#uilib/components/ui/Chat';
+import { MessageSquare } from 'lucide-react';
+
+import { DOCS_CHAT_SCOPE_ID } from './docsConstants';
+
+export function DocsHeaderActions() {
+  return (
+    <ChatSheet
+      triggerLabel={
+        <>
+          <MessageSquare size={20} />
+          &nbsp;Chat
+        </>
+      }
+      scopeId={DOCS_CHAT_SCOPE_ID}
+    />
+  );
+}

package/src/docs/index.tsx

@@ -0,0 +1,16 @@
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+
+import App from './App/App';
+import { ThemeProvider } from './contexts/theme-context';
+
+const elem = document.getElementById('app-root') as HTMLElement;
+const root = createRoot(elem);
+
+root.render(
+  <BrowserRouter>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </BrowserRouter>,
+);

package/src/docs/lib/theme.ts

@@ -0,0 +1,55 @@
+import { ThemeDefaults, ThemeHelpers } from '@homecode/ui';
+
+const { colors, getColors, getConfig } = ThemeDefaults;
+
+const defaultColors = getColors();
+const defaultConfig = getConfig();
+
+const alphaMods = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+
+export const colorsConfig = {
+  light: {
+    ...ThemeHelpers.colorsConfigToVars({
+      ...getColors({
+        accent: colors.dark,
+        decent: colors.light,
+      }),
+    }),
+  },
+  dark: {
+    ...ThemeHelpers.colorsConfigToVars({
+      ...getColors({
+        accent: colors.light,
+        decent: colors.dark,
+      }),
+    }),
+  },
+};
+
+export function getThemeConfig(isDarkTheme: boolean) {
+  return {
+    ...defaultConfig,
+    ...colorsConfig[isDarkTheme ? 'dark' : 'light'],
+    ...ThemeHelpers.colorsConfigToVars({
+      active: {
+        color: '#9c59ff',
+        mods: {
+          // @ts-ignore
+          alpha: alphaMods,
+        },
+      },
+      danger: {
+        color: '#ee0000',
+        mods: {
+          alpha: alphaMods,
+        },
+      },
+      warning: {
+        color: '#ffa500',
+        mods: {
+          alpha: alphaMods,
+        },
+      },
+    }),
+  };
+}

package/src/docs/pages/AnalysesSelectorPage.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+
+import { AnalysesSelector } from '#uilib/components/ui/AnalysesSelector';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const ITEMS = [
+  { id: -1, label: 'Historical', color: 'var(--foreground)' },
+  {
+    id: 1,
+    label: 'Analysis A',
+    color: 'var(--chart-1)',
+    status: 'done',
+    updated_at: new Date().toISOString(),
+  },
+  {
+    id: 2,
+    label: 'Analysis B',
+    color: 'var(--chart-2)',
+    status: 'done',
+    updated_at: new Date().toISOString(),
+  },
+];
+
+export default function AnalysesSelectorPage() {
+  const [selectedIds, setSelectedIds] = useState<Set<number>>(
+    () => new Set([1]),
+  );
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'AnalysesSelector' }]}
+        title="AnalysesSelector"
+        subheader="Multi-select analyses with inline or dropdown layout."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection style={{ maxWidth: 420 }}>
+        <AnalysesSelector
+          items={ITEMS}
+          selectedIds={selectedIds}
+          onItemToggle={id => {
+            setSelectedIds(prev => {
+              const next = new Set(prev);
+              if (next.has(id)) next.delete(id);
+              else next.add(id);
+              return next;
+            });
+          }}
+          placeholder="Analyses"
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/AnalysisLineIconPage.tsx

@@ -0,0 +1,24 @@
+import { AnalysisLineIcon } from '#uilib/components/ui/AnalysisLineIcon';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function AnalysisLineIconPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'AnalysisLineIcon' }]}
+        title="AnalysisLineIcon"
+        subheader="Solid and dashed line markers."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ flexDirection: 'row', gap: '1.5rem', alignItems: 'center' }}
+      >
+        <AnalysisLineIcon color="var(--chart-1)" variant="solid" />
+        <AnalysisLineIcon color="var(--chart-2)" variant="dashed" />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/AvatarPage.tsx

@@ -0,0 +1,33 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '#uilib/components/ui/Avatar';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function AvatarPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Avatar' }]}
+        title="Avatar"
+        subheader="Image with fallback initials."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}
+      >
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      </PageContentSection>
+    </>
+  );
+}