@thorprovider/blocks 2.0.0 → 3.0.1

package/scripts/fix-esm-extensions.mjs

@@ -1,40 +0,0 @@
-import { readdir, readFile, writeFile } from "node:fs/promises";
-import { join, extname } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const distDir = fileURLToPath(new URL("../dist/", import.meta.url));
-
-const RELATIVE = /^\.{1,2}\//;
-const HAS_EXT = /\.(mjs|cjs|js|jsx|ts|tsx|css|json|svg|png|webp|jpg|jpeg|gif|woff2?)$/;
-
-const SPECIFIER =
-  /(\bfrom\s*|\bimport\s*\(|\brequire\s*\(|\bimport\s+)(["'])(\.{1,2}\/[^"']*?)\2/g;
-
-async function* walk(dir) {
-  for (const entry of await readdir(dir, { withFileTypes: true })) {
-    const full = join(dir, entry.name);
-    if (entry.isDirectory()) yield* walk(full);
-    else yield full;
-  }
-}
-
-async function fixFile(file) {
-  const ext = extname(file);
-  if (ext !== ".mjs" && ext !== ".js") return 0;
-  const target = ext === ".mjs" ? ".mjs" : ".js";
-  const source = await readFile(file, "utf8");
-  let changed = 0;
-  const out = source.replace(SPECIFIER, (match, prefix, quote, spec) => {
-    if (!RELATIVE.test(spec) || HAS_EXT.test(spec)) return match;
-    changed += 1;
-    return `${prefix}${quote}${spec}${target}${quote}`;
-  });
-  if (changed > 0) await writeFile(file, out);
-  return changed;
-}
-
-let total = 0;
-for await (const file of walk(distDir)) {
-  total += await fixFile(file);
-}
-console.log(`fix-esm-extensions: rewrote ${total} relative specifier(s)`);

package/src/blocks/application/app-shells/app-shell-1-sidebar.tsx

@@ -1,198 +0,0 @@
-'use client'
-
-import {
-  BarChart3,
-  ChevronsUpDown,
-  FolderKanban,
-  Home,
-  LayoutDashboard,
-  Package,
-  Settings,
-  ShoppingCart,
-  User,
-  Users,
-} from 'lucide-react'
-import type { ComponentType } from 'react'
-
-import { Avatar, AvatarFallback } from '../../../ui/avatar'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from '../../../ui/dropdown-menu'
-import { Input } from '../../../ui/input'
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from '../../../ui/sidebar'
-
-export type AppShell1NavIcon =
-  | 'layout-dashboard'
-  | 'package'
-  | 'user'
-  | 'settings'
-  | 'home'
-  | 'shopping-cart'
-  | 'bar-chart-3'
-  | 'users'
-  | 'folder-kanban'
-
-export interface AppShell1NavItem {
-  label: string
-  href: string
-  icon: AppShell1NavIcon
-  active?: boolean
-}
-
-export interface AppShell1User {
-  name: string
-  email: string
-  initials: string
-}
-
-const appShell1NavIcons: Record<AppShell1NavIcon, ComponentType> = {
-  'layout-dashboard': LayoutDashboard,
-  package: Package,
-  user: User,
-  settings: Settings,
-  home: Home,
-  'shopping-cart': ShoppingCart,
-  'bar-chart-3': BarChart3,
-  users: Users,
-  'folder-kanban': FolderKanban,
-}
-
-// SidebarInset must remain a direct sibling of Sidebar. The sidebar primitive persists open state in the `sidebar_state` cookie.
-function BrandMark() {
-  return (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-      <path
-        d="M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z"
-        fill="currentColor"
-      />
-      <path
-        d="M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z"
-        fill="currentColor"
-      />
-      <path
-        d="M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z"
-        fill="currentColor"
-      />
-      <path
-        d="M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z"
-        fill="currentColor"
-      />
-      <path
-        d="M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z"
-        fill="currentColor"
-      />
-      <path d="M21.1694 10.5806L14.5651 17.1849" stroke="currentColor" />
-      <path d="M22.1694 14.5806L18.5632 18.1868" stroke="currentColor" />
-      <circle cx="13.1" cy="26.1" r="1.7" stroke="currentColor" />
-      <circle cx="22.1" cy="26.1" r="1.7" stroke="currentColor" />
-    </svg>
-  )
-}
-
-export interface AppShell1SidebarProps {
-  brandName?: string
-  navGroupLabel?: string
-  navItems?: AppShell1NavItem[]
-  user?: AppShell1User
-}
-
-export function AppShell1Sidebar({
-  brandName,
-  navGroupLabel = 'Workspace',
-  navItems = [],
-  user,
-}: AppShell1SidebarProps) {
-  const { setOpenMobile } = useSidebar()
-
-  return (
-    <Sidebar>
-      <SidebarHeader>
-        <a
-          href="#resumen"
-          className="flex min-h-11 items-center gap-2 rounded-lg px-2 font-semibold"
-          onClick={() => setOpenMobile(false)}
-        >
-          <BrandMark />
-          {brandName}
-        </a>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>{navGroupLabel}</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <nav aria-label={navGroupLabel}>
-              <SidebarMenu>
-                {navItems.map(item => {
-                  const Icon = appShell1NavIcons[item.icon]
-                  return (
-                    <SidebarMenuItem key={item.label}>
-                      <SidebarMenuButton isActive={item.active} asChild>
-                        <a
-                          href={item.href}
-                          aria-current={item.active ? 'page' : undefined}
-                          aria-label={item.label}
-                          onClick={() => setOpenMobile(false)}
-                        >
-                          <Icon />
-                          <span>{item.label}</span>
-                        </a>
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  )
-                })}
-              </SidebarMenu>
-            </nav>
-          </SidebarGroupContent>
-        </SidebarGroup>
-        <div className="px-2 md:hidden">
-          <Input aria-label="Buscar en el espacio de trabajo" placeholder="Buscar…" />
-        </div>
-      </SidebarContent>
-      {user ? (
-        <SidebarFooter>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton className="min-h-11">
-                    <Avatar className="size-7">
-                      <AvatarFallback>{user.initials}</AvatarFallback>
-                    </Avatar>
-                    <span className="truncate">{user.name}</span>
-                    <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent side="top">
-                  <DropdownMenuGroup>
-                    <DropdownMenuLabel>{user.email}</DropdownMenuLabel>
-                    <DropdownMenuItem>Configuración de la cuenta</DropdownMenuItem>
-                    <DropdownMenuItem>Cerrar sesión</DropdownMenuItem>
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarFooter>
-      ) : null}
-    </Sidebar>
-  )
-}
-
-export default AppShell1Sidebar

package/src/blocks/application/app-shells/app-shell-1.tsx

@@ -1,196 +0,0 @@
-'use client'
-
-import { Bell, Plus, Search } from 'lucide-react'
-import type { ReactNode } from 'react'
-
-import type { CTA } from '../../../lib/types'
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '../../../ui/breadcrumb'
-import { Button } from '../../../ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../ui/card'
-import { Input } from '../../../ui/input'
-import { Separator } from '../../../ui/separator'
-import { SidebarInset, SidebarProvider, SidebarTrigger } from '../../../ui/sidebar'
-import AppShell1Sidebar from './app-shell-1-sidebar'
-import type { AppShell1NavItem, AppShell1User } from './app-shell-1-sidebar'
-
-export interface AppShell1BreadcrumbItem {
-  label: string
-  href?: string
-}
-
-export interface AppShell1Stat {
-  label: string
-  value: string
-}
-
-export interface AppShell1Props {
-  brandName?: string
-  navGroupLabel?: string
-  navItems?: AppShell1NavItem[]
-  user?: AppShell1User
-  breadcrumb?: AppShell1BreadcrumbItem[]
-  pageTitle?: string
-  pageDescription?: string
-  action?: CTA
-  stats?: AppShell1Stat[]
-  children?: ReactNode
-  className?: string
-}
-
-function AppHeader({ breadcrumb }: { breadcrumb?: AppShell1BreadcrumbItem[] }) {
-  return (
-    <header className="flex h-14 shrink-0 items-center gap-3 border-b px-4 sm:px-6">
-      <SidebarTrigger aria-label="Toggle navigation" className="min-h-11 min-w-11" />
-      <Separator orientation="vertical" className="data-vertical:h-5 data-vertical:self-center" />
-      {breadcrumb && breadcrumb.length > 0 ? (
-        <Breadcrumb>
-          <BreadcrumbList>
-            {breadcrumb.map((item, index) => {
-              const isLast = index === breadcrumb.length - 1
-              return (
-                <div key={item.label} className="contents">
-                  <BreadcrumbItem className={isLast ? undefined : 'hidden sm:flex'}>
-                    {isLast ? (
-                      <BreadcrumbPage>{item.label}</BreadcrumbPage>
-                    ) : item.href ? (
-                      <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
-                    ) : (
-                      <span>{item.label}</span>
-                    )}
-                  </BreadcrumbItem>
-                  {!isLast ? (
-                    <BreadcrumbSeparator className="hidden sm:flex" />
-                  ) : null}
-                </div>
-              )
-            })}
-          </BreadcrumbList>
-        </Breadcrumb>
-      ) : null}
-      <div className="ml-auto hidden w-56 md:block">
-        <div className="relative">
-          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            aria-label="Buscar en el espacio de trabajo"
-            placeholder="Buscar…"
-            className="h-9 pl-9"
-          />
-        </div>
-      </div>
-      <Button variant="ghost" size="icon" aria-label="Notifications, 3 unread">
-        <Bell />
-        <span className="sr-only">3 unread</span>
-      </Button>
-    </header>
-  )
-}
-
-function AppContent({
-  pageTitle,
-  pageDescription,
-  action,
-  stats,
-  children,
-}: {
-  pageTitle?: string
-  pageDescription?: string
-  action?: CTA
-  stats?: AppShell1Stat[]
-  children?: ReactNode
-}) {
-  return (
-    <main className="flex flex-1 flex-col gap-6 p-4 sm:p-6">
-      {pageTitle || pageDescription || action ? (
-        <div className="flex items-center justify-between gap-4">
-          <div>
-            {pageTitle ? (
-              <h1 className="text-2xl font-semibold tracking-tight">{pageTitle}</h1>
-            ) : null}
-            {pageDescription ? (
-              <p className="text-sm text-muted-foreground">{pageDescription}</p>
-            ) : null}
-          </div>
-          {action ? (
-            <Button asChild>
-              <a href={action.href}>
-                <Plus data-icon="inline-start" />
-                {action.label}
-              </a>
-            </Button>
-          ) : null}
-        </div>
-      ) : null}
-      {stats && stats.length > 0 ? (
-        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          {stats.map(stat => (
-            <Card key={stat.label}>
-              <CardHeader>
-                <CardDescription>{stat.label}</CardDescription>
-                <CardTitle className="text-3xl">{stat.value}</CardTitle>
-              </CardHeader>
-            </Card>
-          ))}
-        </div>
-      ) : null}
-      <Card className="min-h-72">
-        <CardHeader>
-          <CardTitle>Project activity</CardTitle>
-          <CardDescription>Your product content goes inside this shell.</CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-1">
-          {children ?? (
-            <div className="flex flex-1 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
-              <Search className="mr-2 size-4" />
-              Replace with your screen
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </main>
-  )
-}
-
-export function AppShell1({
-  brandName,
-  navGroupLabel,
-  navItems,
-  user,
-  breadcrumb,
-  pageTitle,
-  pageDescription,
-  action,
-  stats,
-  children,
-  className,
-}: AppShell1Props) {
-  return (
-    <SidebarProvider className={className}>
-      <AppShell1Sidebar
-        brandName={brandName}
-        navGroupLabel={navGroupLabel}
-        navItems={navItems}
-        user={user}
-      />
-      <SidebarInset>
-        <AppHeader breadcrumb={breadcrumb} />
-        <AppContent
-          pageTitle={pageTitle}
-          pageDescription={pageDescription}
-          action={action}
-          stats={stats}
-        >
-          {children}
-        </AppContent>
-      </SidebarInset>
-    </SidebarProvider>
-  )
-}
-
-export default AppShell1

package/src/blocks/application/login-forms/login-page.test.tsx

@@ -1,190 +0,0 @@
-// @vitest-environment jsdom
-import { beforeAll, describe, expect, it, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { AtSign } from 'lucide-react'
-import * as blockExports from '../../../index'
-import { LoginPage, type LoginPageProps } from './login-page'
-
-beforeAll(() => {
-  Object.assign(SVGElement.prototype, { getTotalLength: () => 15 })
-})
-
-describe('LoginPage', () => {
-  it('is the only exported login page API', () => {
-    expect(blockExports.LoginPage).toBe(LoginPage)
-    expect('LoginPage1' in blockExports).toBe(false)
-    expect('LoginPage2' in blockExports).toBe(false)
-  })
-
-  it.each(['card', 'social'] as const)('submits the same structured credentials for the %s presentation', async presentation => {
-    const user = userEvent.setup()
-    const onSubmit = vi.fn()
-
-    render(
-      <LoginPage
-        presentation={presentation}
-        emailLabel='Email'
-        passwordLabel='Password'
-        rememberMeLabel='Remember me'
-        signInLabel='Sign in'
-        onSubmit={onSubmit}
-      />,
-    )
-
-    await user.type(screen.getByLabelText('Email'), 'shopper@example.com')
-    await user.type(screen.getByLabelText('Password'), 'correct-horse')
-    await user.click(screen.getByRole('checkbox', { name: 'Remember me' }))
-    await user.click(screen.getByRole('button', { name: 'Sign in' }))
-
-    expect(onSubmit).toHaveBeenCalledWith({
-      email: 'shopper@example.com',
-      password: 'correct-horse',
-      remember: true,
-    })
-  })
-
-  it('rejects a missing presentation instead of silently choosing a layout', () => {
-    expect(() => render(<LoginPage {...({} as LoginPageProps)} />)).toThrow(/presentation/i)
-  })
-
-  it('round-trips serializable provider data and reports the selected provider id', async () => {
-    const user = userEvent.setup()
-    const onProviderSelect = vi.fn()
-    const providers = JSON.parse(JSON.stringify([{ id: 'github', label: 'GitHub' }])) as LoginPageProps['providers']
-
-    render(
-      <LoginPage
-        presentation='social'
-        providers={providers}
-        providerIcons={{ github: AtSign }}
-        onProviderSelect={onProviderSelect}
-      />,
-    )
-
-    await user.click(screen.getByRole('button', { name: 'GitHub' }))
-
-    expect(onProviderSelect).toHaveBeenCalledWith('github')
-  })
-
-  it('renders provider labels when an icon is not mapped', () => {
-    render(
-      <LoginPage
-        presentation='card'
-        providers={[{ id: 'custom', label: 'Custom provider' }]}
-        onProviderSelect={vi.fn()}
-      />,
-    )
-
-    expect(screen.getByRole('button', { name: 'Custom provider' }).textContent).toBe('Custom provider')
-  })
-
-  it('omits the provider group when there are no providers', () => {
-    render(<LoginPage presentation='card' onProviderSelect={vi.fn()} />)
-
-    expect(screen.queryByRole('group', { name: 'O continúa con' })).toBeNull()
-  })
-
-  it('rejects duplicate provider IDs so provider React keys remain unique', () => {
-    expect(() =>
-      render(
-        <LoginPage
-          presentation='card'
-          providers={[
-            { id: 'duplicate', label: 'First' },
-            { id: 'duplicate', label: 'Second' },
-          ]}
-          onProviderSelect={vi.fn()}
-        />,
-      ),
-    ).toThrow(/provider ids must be unique/i)
-  })
-
-  it('omits optional actions and providers when their handlers are absent', () => {
-    render(
-      <LoginPage
-        presentation='card'
-        forgotPasswordLabel='Forgot password'
-        createAccountLabel='Create account'
-        providers={[{ id: 'github', label: 'GitHub' }]}
-      />,
-    )
-
-    expect(screen.queryByRole('button', { name: 'Forgot password' })).toBeNull()
-    expect(screen.queryByRole('button', { name: 'Create account' })).toBeNull()
-    expect(screen.queryByRole('group', { name: 'O continúa con' })).toBeNull()
-  })
-
-  it('invokes optional action handlers', async () => {
-    const user = userEvent.setup()
-    const onForgotPassword = vi.fn()
-    const onCreateAccount = vi.fn()
-
-    render(
-      <LoginPage
-        presentation='card'
-        forgotPasswordLabel='Forgot password'
-        createAccountLabel='Create account'
-        onForgotPassword={onForgotPassword}
-        onCreateAccount={onCreateAccount}
-      />,
-    )
-
-    await user.click(screen.getByRole('button', { name: 'Forgot password' }))
-    await user.click(screen.getByRole('button', { name: 'Create account' }))
-
-    expect(onForgotPassword).toHaveBeenCalledOnce()
-    expect(onCreateAccount).toHaveBeenCalledOnce()
-  })
-
-  it('updates the password toggle accessible name with its state', async () => {
-    const user = userEvent.setup()
-
-    render(
-      <LoginPage
-        presentation='card'
-        passwordLabel='Password'
-        showPasswordAriaLabel='Show password'
-        hidePasswordAriaLabel='Hide password'
-      />,
-    )
-
-    expect(screen.getByRole('button', { name: 'Show password' })).toBeTruthy()
-    await user.click(screen.getByRole('button', { name: 'Show password' }))
-    expect(screen.getByRole('button', { name: 'Hide password' })).toBeTruthy()
-    expect(screen.getByLabelText('Password').getAttribute('type')).toBe('text')
-  })
-
-  it('keeps fields and secondary actions reachable in keyboard order', async () => {
-    const user = userEvent.setup()
-
-    render(
-      <LoginPage
-        presentation='card'
-        emailLabel='Email'
-        passwordLabel='Password'
-        rememberMeLabel='Remember me'
-        forgotPasswordLabel='Forgot password'
-        signInLabel='Sign in'
-        createAccountLabel='Create account'
-        onForgotPassword={vi.fn()}
-        onCreateAccount={vi.fn()}
-      />,
-    )
-
-    const expectedFocusOrder = [
-      screen.getByLabelText('Email'),
-      screen.getByLabelText('Password'),
-      screen.getByRole('button', { name: 'Mostrar contraseña' }),
-      screen.getByRole('checkbox', { name: 'Remember me' }),
-      screen.getByRole('button', { name: 'Forgot password' }),
-      screen.getByRole('button', { name: 'Sign in' }),
-      screen.getByRole('button', { name: 'Create account' }),
-    ]
-
-    for (const element of expectedFocusOrder) {
-      await user.tab()
-      expect(document.activeElement).toBe(element)
-    }
-  })
-})