@stevederico/skateboard-ui 3.0.1 → 3.6.0

package/jsconfig.json

@@ -1,9 +0,0 @@
-{
-    "compilerOptions": {
-      "baseUrl": ".",
-      "paths": {
-        "@/*": ["./*"]
-      }
-    }
-  }
-  

package/layout/Header.jsx

@@ -1,50 +0,0 @@
-import { Separator } from "../shadcn/ui/separator.jsx";
-import { Button } from "../shadcn/ui/button.jsx";
-import { Badge } from "../shadcn/ui/badge.jsx";
-import { cn } from "../shadcn/lib/utils.js";
-
-/**
- * App header bar built on shadcn primitives (Button, Separator, Badge).
- *
- * Renders page title and optional action button on the right.
- * A shadcn Separator renders below the header instead of a border utility.
- *
- * @param {Object} props
- * @param {string} props.title - Header title text
- * @param {string} [props.buttonTitle] - Action button label (omit to hide button)
- * @param {Function} [props.onButtonTitleClick] - Button click handler
- * @param {string} [props.buttonClass] - Additional CSS classes for the button
- * @param {string} [props.className] - Additional CSS classes for the header
- * @param {React.ReactNode} [props.children] - Custom right-side content
- * @returns {JSX.Element} Header bar with separator
- */
-function Header({ title, buttonTitle, onButtonTitleClick, buttonClass, className, children, ...props }) {
-  return (
-    <>
-      <header
-        className={cn("flex h-(--header-height) shrink-0 items-center gap-2", className)}
-        {...props}
-      >
-        <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-          <h1 className="text-lg font-medium">{title}</h1>
-          <div className="ml-auto flex items-center gap-2">
-            {typeof buttonTitle !== "undefined" && (
-              <Button
-                variant="ghost"
-                size="sm"
-                className={buttonClass || ""}
-                onClick={onButtonTitleClick}
-              >
-                {buttonTitle}
-              </Button>
-            )}
-            {children}
-          </div>
-        </div>
-      </header>
-      <Separator />
-    </>
-  );
-}
-
-export default Header;

package/layout/Layout.jsx

@@ -1,60 +0,0 @@
-import { Outlet } from 'react-router-dom';
-import TabBar from './TabBar.jsx'
-import { SidebarProvider, SidebarInset } from "../shadcn/ui/sidebar"
-import Sidebar from "./Sidebar"
-import { getState } from '../core/Context.jsx';
-
-/**
- * Page layout wrapper with sidebar and tab bar.
- *
- * Renders Sidebar (desktop) and TabBar (mobile) based on constants
- * configuration and programmatic visibility state. Uses SidebarInset
- * for proper shadcn sidebar layout with inset variant.
- *
- * Set `constants.hideSidebarInsetRounding` to true to remove the
- * rounded corners on the main content area.
- *
- * Set `constants.sidebarCollapsed` to true to start the sidebar
- * in its collapsed (icon-only) state.
- *
- * @param {Object} props
- * @param {React.ReactNode} [props.children] - Child content (unused, Outlet renders routes)
- * @returns {JSX.Element} Layout with sidebar, main content, and tab bar
- *
- * @example
- * import Layout from '@stevederico/skateboard-ui/Layout';
- *
- * // Used internally by createSkateboardApp route config
- * <Route element={<Layout />}>
- *   <Route path="home" element={<HomeView />} />
- * </Route>
- */
-export default function Layout({ children }) {
-  const { state } = getState();
-  const { sidebarVisible, tabBarVisible } = state.ui;
-  const constants = state.constants;
-
-  // Combine constants (static config) with context state (programmatic control)
-  const showSidebar = !constants.hideSidebar && sidebarVisible;
-  const showTabBar = !constants.hideTabBar && tabBarVisible;
-
-  return (
-    <div className="min-h-screen flex flex-col pt-[env(safe-area-inset-top)] pb-[calc(5rem+env(safe-area-inset-bottom))] md:pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
-      <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-background focus:text-foreground focus:rounded-md focus:ring-2 focus:ring-ring">
-        Skip to content
-      </a>
-      <SidebarProvider
-        defaultOpen={!constants.sidebarCollapsed}
-        style={{
-          '--sidebar-width': '12rem',
-          '--header-height': '3.5rem',
-        }}>
-        {showSidebar && <Sidebar variant="inset" />}
-        <SidebarInset id="main" className={`border border-border/50 ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`}>
-          <Outlet />
-        </SidebarInset>
-      </SidebarProvider>
-      {showTabBar && <TabBar className="md:hidden" />}
-    </div>
-  );
-}

package/layout/Sidebar.jsx

@@ -1,124 +0,0 @@
-import React from "react";
-import { useNavigate, useLocation } from "react-router-dom";
-import DynamicIcon from "../core/DynamicIcon.jsx";
-import { getState } from "../core/Context.jsx";
-import {
-  Sidebar as SidebarRoot,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
-  useSidebar,
-} from "../shadcn/ui/sidebar";
-import { Settings } from '../icons';
-
-/**
- * Desktop navigation sidebar using shadcn primitives.
- *
- * Renders app pages from constants.pages with DynamicIcon icons,
- * tooltip support when collapsed, and settings pushed to the footer.
- *
- * @returns {JSX.Element} Sidebar navigation
- *
- * @example
- * import Sidebar from '@stevederico/skateboard-ui/Sidebar';
- *
- * <Sidebar />
- */
-export default function Sidebar({ variant = "inset", ...props }) {
-  const { open } = useSidebar();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const currentPage = (location.pathname.split("/")[2] || "").toLowerCase();
-  const { state } = getState();
-  const constants = state.constants;
-
-  return (
-    <SidebarRoot collapsible="icon" variant={variant} {...props}>
-      {/* Header: App icon + name */}
-      {!constants.hideSidebarHeader && (
-        <SidebarHeader className="p-2">
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton
-                size="sm"
-                onClick={() => navigate("/app")}
-                tooltip={constants.appName}
-                className="hover:bg-transparent active:bg-transparent"
-              >
-                <div className="bg-app flex items-center justify-center shrink-0 rounded-lg size-8 -ml-2">
-                  <DynamicIcon
-                    name={constants.appIcon}
-                    strokeWidth={2}
-                    className="text-white"
-                  />
-                </div>
-                <span className="font-semibold text-lg shrink min-w-0 truncate">
-                  {constants.appName}
-                </span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarHeader>
-      )}
-
-      {/* Main navigation from constants.pages */}
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {constants.pages.map((item) => {
-                const isActive = currentPage === item.url.toLowerCase();
-                return (
-                  <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton
-                      isActive={isActive}
-                      tooltip={item.title}
-                      size="sm"
-                      className="data-active:font-normal"
-                      onClick={() =>
-                        navigate(`/app/${item.url.toLowerCase()}`)
-                      }
-                    >
-                      <DynamicIcon
-                        name={item.icon}
-                        size={20}
-                        strokeWidth={2}
-                      />
-                      <span>{item.title}</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-
-      {/* Footer: Settings */}
-      <SidebarFooter>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              isActive={location.pathname.toLowerCase().includes("settings")}
-              tooltip="Settings"
-              size="sm"
-              className="data-active:font-normal"
-              onClick={() => navigate("/app/settings")}
-            >
-              <Settings size={20} strokeWidth={2} />
-              <span>Settings</span>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarFooter>
-
-      <SidebarRail />
-    </SidebarRoot>
-  );
-}

package/layout/TabBar.jsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import DynamicIcon from '../core/DynamicIcon';
-import { getState } from '../core/Context.jsx';
-import { cn } from '../shadcn/lib/utils.js';
-
-/**
- * Mobile bottom tab bar navigation.
- *
- * Renders page icons from constants.pages plus a settings tab.
- * Only visible on mobile (hidden on md+ screens via Layout).
- *
- * @param {Object} props
- * @param {string} [props.className] - Additional CSS classes
- * @returns {JSX.Element} Bottom tab bar
- *
- * @example
- * import TabBar from '@stevederico/skateboard-ui/TabBar';
- *
- * // Used internally by Layout component
- * <TabBar />
- */
-export default function TabBar({ className, ...props }) {
-  const location = useLocation();
-  const { state } = getState();
-  const constants = state.constants;
-
-  const tabs = [
-    ...(constants?.pages || []).map((item) => ({
-      title: item.title,
-      icon: item.icon,
-      to: `/app/${item.url.toLowerCase()}`,
-      match: item.url.toLowerCase(),
-    })),
-    { title: 'Settings', icon: 'settings', to: '/app/settings', match: 'settings' },
-  ];
-
-  return (
-    <nav
-      className={cn(
-        "fixed md:hidden bottom-0 inset-x-0 bg-background border-t border-border z-50",
-        className
-      )}
-      role="navigation"
-      aria-label="Main navigation"
-      {...props}
-    >
-      <div className="flex justify-around items-center pt-2 pb-4">
-        {tabs.map((tab) => {
-          const isActive = location.pathname.includes(tab.match);
-          return (
-            <Link
-              key={tab.title}
-              to={tab.to}
-              className={cn(
-                "flex flex-col items-center gap-0.5 px-3 transition-colors",
-                isActive ? "text-foreground" : "text-muted-foreground"
-              )}
-              aria-label={tab.title}
-              aria-current={isActive ? 'page' : undefined}
-            >
-              <DynamicIcon name={tab.icon} size={24} strokeWidth={isActive ? 2 : 1.5} />
-              <span className="text-xs">{tab.title}</span>
-            </Link>
-          );
-        })}
-      </div>
-    </nav>
-  );
-}

package/scripts/vendor-icons.js

@@ -1,132 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Vendor lucide-icons SVGs as React components.
- *
- * Clones lucide-icons/lucide at a pinned tag, reads every icons/*.svg,
- * generates one ./icons/<Name>.jsx per icon plus an index.js barrel.
- *
- * Re-run when you want to refresh the icon set against a newer lucide release.
- *
- * Usage: node scripts/vendor-icons.js
- */
-
-import { execSync } from 'node:child_process';
-import { mkdirSync, readFileSync, writeFileSync, readdirSync, rmSync, existsSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const LUCIDE_TAG = '1.14.0';
-const ROOT = dirname(dirname(fileURLToPath(import.meta.url)));
-const ICONS_DIR = join(ROOT, 'icons');
-const TMP_DIR = '/tmp/lucide-vendor';
-
-function pascal(name) {
-  return name.split('-').map(p => p.charAt(0).toUpperCase() + p.slice(1)).join('');
-}
-
-function camelAttrs(svg) {
-  return svg.replace(/(\s)([a-z]+)-([a-z])/g, (_, ws, a, b) => `${ws}${a}${b.toUpperCase()}`);
-}
-
-function extractInner(svg) {
-  const open = svg.indexOf('>');
-  const close = svg.lastIndexOf('</svg>');
-  return svg.slice(open + 1, close).trim();
-}
-
-function ensureLucide() {
-  if (existsSync(join(TMP_DIR, 'icons'))) return;
-  console.log(`Cloning lucide@${LUCIDE_TAG}...`);
-  rmSync(TMP_DIR, { recursive: true, force: true });
-  execSync(
-    `git clone --depth 1 --branch ${LUCIDE_TAG} --single-branch https://github.com/lucide-icons/lucide.git ${TMP_DIR}`,
-    { stdio: 'pipe' }
-  );
-}
-
-function writeIconWrapper() {
-  const code = `const Icon = ({
-  size = 24,
-  color = 'currentColor',
-  strokeWidth = 2,
-  className,
-  children,
-  ref,
-  ...props
-}) => (
-  <svg
-    ref={ref}
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke={color}
-    strokeWidth={strokeWidth}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className={className}
-    {...props}
-  >
-    {children}
-  </svg>
-);
-
-export default Icon;
-`;
-  writeFileSync(join(ICONS_DIR, '_Icon.jsx'), code);
-}
-
-function copyLucideLicense() {
-  const src = join(TMP_DIR, 'LICENSE');
-  if (existsSync(src)) {
-    writeFileSync(join(ICONS_DIR, 'LICENSE'), readFileSync(src, 'utf8'));
-  }
-}
-
-function generate() {
-  ensureLucide();
-  rmSync(ICONS_DIR, { recursive: true, force: true });
-  mkdirSync(ICONS_DIR, { recursive: true });
-  copyLucideLicense();
-  writeIconWrapper();
-
-  const svgFiles = readdirSync(join(TMP_DIR, 'icons')).filter(f => f.endsWith('.svg')).sort();
-  const exports = [];
-
-  for (const file of svgFiles) {
-    const name = file.replace(/\.svg$/, '');
-    const componentName = pascal(name);
-    const raw = readFileSync(join(TMP_DIR, 'icons', file), 'utf8');
-    const inner = camelAttrs(extractInner(raw));
-
-    const code = `import Icon from './_Icon.jsx';
-
-const ${componentName} = (props) => (
-  <Icon {...props}>
-    ${inner.replace(/\n/g, '\n    ')}
-  </Icon>
-);
-
-export default ${componentName};
-`;
-    writeFileSync(join(ICONS_DIR, `${componentName}.jsx`), code);
-    exports.push(`export { default as ${componentName}, default as ${componentName}Icon } from './${componentName}.jsx';`);
-
-    const metaPath = join(TMP_DIR, 'icons', `${name}.json`);
-    if (existsSync(metaPath)) {
-      const meta = JSON.parse(readFileSync(metaPath, 'utf8'));
-      for (const alias of meta.aliases || []) {
-        const aliasName = pascal(alias.name);
-        if (aliasName === componentName) continue;
-        exports.push(`export { default as ${aliasName}, default as ${aliasName}Icon } from './${componentName}.jsx';`);
-      }
-    }
-  }
-
-  writeFileSync(join(ICONS_DIR, 'index.js'), exports.join('\n') + '\n');
-  console.log(`Vendored ${svgFiles.length} icons → icons/`);
-}
-
-generate();

package/shadcn/ui/carousel.jsx

@@ -1,195 +0,0 @@
-"use client";
-import * as React from "react"
-import useEmblaCarousel from "embla-carousel-react";
-
-import { cn } from "../lib/utils.js"
-import { Button } from "./button.jsx"
-import { ChevronLeftIcon, ChevronRightIcon } from "../../icons"
-
-const CarouselContext = React.createContext(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
-}) {
-  const [carouselRef, api] = useEmblaCarousel({
-    ...opts,
-    axis: orientation === "horizontal" ? "x" : "y",
-  }, plugins)
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-  const onSelect = React.useCallback((api) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
-
-  const handleKeyDown = React.useCallback((event) => {
-    if (event.key === "ArrowLeft") {
-      event.preventDefault()
-      scrollPrev()
-    } else if (event.key === "ArrowRight") {
-      event.preventDefault()
-      scrollNext()
-    }
-  }, [scrollPrev, scrollNext])
-
-  React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
-
-  React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
-
-    return () => {
-      api?.off("select", onSelect)
-    };
-  }, [api, onSelect])
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}>
-      <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role="region"
-        aria-roledescription="carousel"
-        data-slot="carousel"
-        {...props}>
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  );
-}
-
-function CarouselContent({
-  className,
-  ...props
-}) {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content">
-      <div
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props} />
-    </div>
-  );
-}
-
-function CarouselItem({
-  className,
-  ...props
-}) {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      role="group"
-      aria-roledescription="slide"
-      data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props} />
-  );
-}
-
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon-sm",
-  ...props
-}) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-previous"
-      variant={variant}
-      size={size}
-      className={cn("rounded-full absolute touch-manipulation", orientation === "horizontal"
-        ? "top-1/2 -left-12 -translate-y-1/2"
-        : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}>
-      <ChevronLeftIcon />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
-}
-
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon-sm",
-  ...props
-}) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-next"
-      variant={variant}
-      size={size}
-      className={cn("rounded-full absolute touch-manipulation", orientation === "horizontal"
-        ? "top-1/2 -right-12 -translate-y-1/2"
-        : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}>
-      <ChevronRightIcon />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
-}
-
-export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel };