@umituz/web-landing 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,36 @@
-# Temporary Holding Version
+# @umituz/web-landing
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Public marketing-site shell for the umituz fleet — the public twin of
+[`@umituz/web-dashboard`](https://www.npmjs.com/package/@umituz/web-dashboard).
+Dashboard owns the authenticated app chrome; this package owns the landing
+site chrome. Nothing public ever lives in the dashboard package.
+
+## What's inside
+
+- `PublicSiteLayout` — skip link (first focusable element), header with
+  brand slot + NavLink nav (active-state class) + CTA pair (DS `Button`),
+  main landmark, footer brand/note/columns/legal, and scroll-restore on
+  navigation (owned here — apps don't duplicate it).
+- `./site.css` — `ul-*` structural stylesheet on `@umituz/web-design-system`
+  semantic color variables. Import after the design-system stylesheet;
+  skin via your own `ul-site-*` overrides.
+
+## Usage
+
+```tsx
+import { PublicSiteLayout } from '@umituz/web-landing/layouts/components';
+import '@umituz/web-design-system/styles.css';
+import '@umituz/web-landing/site.css';
+
+<PublicSiteLayout
+  config={{
+    navItems: [{ to: '/features', label: 'Features' }],
+    brand: <Wordmark />,
+    ctaPrimary: { to: '/signup', label: 'Open the demo' },
+    footerColumns: [{ heading: 'Legal', links: [{ to: '/terms', label: 'Terms' }] }],
+    footerLegal: '© 2026',
+  }}
+>
+  {children}
+</PublicSiteLayout>
+```

package/package.json

@@ -1,6 +1,77 @@
 {
   "name": "@umituz/web-landing",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.1",
+  "description": "Public marketing-site shell for the fleet — PublicSiteLayout (header nav, CTA pair, footer columns, skip link, scroll restore); ul-* stylesheet on design-system tokens. The public twin of @umituz/web-dashboard.",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./layouts": "./src/layouts/index.ts",
+    "./layouts/components": "./src/layouts/components/index.ts",
+    "./layouts/types": "./src/layouts/types/index.ts",
+    "./site.css": "./src/styles/site.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "version:patch": "npm version patch -m 'chore: release v%s'",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
+  },
+  "dependencies": {
+    "@umituz/web-design-system": "^4.20.0",
+    "@umituz/web-localization": "^1.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.20.5",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.57.2",
+    "@typescript-eslint/parser": "^8.57.2",
+    "eslint": "^10.0.2",
+    "react-router-dom": "^7.13.1",
+    "typescript": "^5.9.3",
+    "vitest": "^5.0.1",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
+    "jsdom": "^29.1.1"
+  },
+  "keywords": [
+    "landing",
+    "marketing-site",
+    "public-shell",
+    "layout",
+    "react",
+    "typescript",
+    "package-driven"
+  ],
+  "author": "umituz",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/umituz/web-landing.git"
+  },
+  "bugs": {
+    "url": "https://github.com/umituz/web-landing/issues"
+  },
+  "homepage": "https://github.com/umituz/web-landing#readme"
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './layouts';

package/src/layouts/components/PublicSiteLayout.test.tsx

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { PublicSiteLayout } from './PublicSiteLayout';
+import type { PublicLayoutConfig } from '../types/layout';
+
+const config: PublicLayoutConfig = {
+  navItems: [
+    { to: '/features', label: 'Features' },
+    { to: '/pricing', label: 'Pricing' },
+  ],
+  brand: <a href="/">Brand</a>,
+  ctaPrimary: { to: '/signup', label: 'Open the demo' },
+  ctaSecondary: { to: '/signin', label: 'Sign in' },
+  footerBrand: <a href="/">Brand</a>,
+  footerNote: 'An independent workspace.',
+  footerColumns: [
+    { heading: 'Product', links: [{ to: '/features', label: 'Features' }, { to: '/pricing', label: 'Pricing' }] },
+    { heading: 'Legal', links: [{ to: '/terms', label: 'Terms' }] },
+  ],
+  footerLegal: '© 2026',
+};
+
+function renderAt(path: string) {
+  return render(
+    <MemoryRouter initialEntries={[path]}>
+      <Routes>
+        <Route path="*" element={<PublicSiteLayout config={config}>page-content</PublicSiteLayout>} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+describe('PublicSiteLayout', () => {
+  it('renders a skip link targeting the main landmark', () => {
+    renderAt('/features');
+    expect(screen.getByRole('link', { name: /skip to content/i }).getAttribute('href')).toBe('#site-main');
+    expect(document.getElementById('site-main')).not.toBeNull();
+  });
+
+  it('marks the active nav route and leaves others plain', () => {
+    renderAt('/pricing');
+    const active = screen.getByRole('link', { name: 'Pricing', current: 'page' }) as HTMLElement;
+    expect(active.className).toContain('ul-site-link--active');
+    const idle = screen.getAllByRole('link', { name: 'Features' }).find((el) => el.className.includes('ul-site-link')) as HTMLElement;
+    expect(idle.className).not.toContain('ul-site-link--active');
+  });
+
+  it('renders CTA buttons, footer columns and the legal line', () => {
+    renderAt('/features');
+    expect(screen.getByRole('link', { name: 'Open the demo' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'Sign in' })).toBeTruthy();
+    expect(screen.getByRole('contentinfo')).toBeTruthy();
+    expect(screen.getByRole('navigation', { name: 'Legal' })).toBeTruthy();
+    expect(screen.getByText('© 2026')).toBeTruthy();
+  });
+
+  it('renders children inside the main landmark', () => {
+    renderAt('/features');
+    expect(document.getElementById('site-main')?.textContent).toContain('page-content');
+  });
+});

package/src/layouts/components/PublicSiteLayout.tsx

@@ -0,0 +1,86 @@
+import { useEffect, type ReactNode } from 'react';
+import { Link, NavLink, useLocation } from 'react-router-dom';
+import { useT } from '@umituz/web-localization/react';
+import { Button } from '@umituz/web-design-system/atoms';
+import type { PublicLayoutConfig } from '../types/layout';
+
+export interface PublicSiteLayoutProps {
+  config: PublicLayoutConfig;
+  children: ReactNode;
+}
+
+export const PublicSiteLayout = ({ config, children }: PublicSiteLayoutProps) => {
+  const location = useLocation();
+  const t = useT();
+
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
+  }, [location.pathname]);
+
+  const mainId = config.mainId ?? 'site-main';
+
+  return (
+    <div className="ul-site">
+      <a href={`#${mainId}`} className="ul-skip-link">
+        {config.skipLabel ?? t('Skip to content')}
+      </a>
+
+      <header className="ul-site-header">
+        {config.brand && <div className="ul-site-brand">{config.brand}</div>}
+        <nav className="ul-site-nav" aria-label={config.navLabel ?? t('Site')}>
+          {config.navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) => `ul-site-link ${isActive ? 'ul-site-link--active' : ''}`}
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+        {(config.ctaSecondary || config.ctaPrimary) && (
+          <div className="ul-site-cta">
+            {config.ctaSecondary && (
+              <Button asChild variant="ghost" size="sm">
+                <Link to={config.ctaSecondary.to}>{config.ctaSecondary.label}</Link>
+              </Button>
+            )}
+            {config.ctaPrimary && (
+              <Button asChild variant="ink" size="sm">
+                <Link to={config.ctaPrimary.to}>{config.ctaPrimary.label}</Link>
+              </Button>
+            )}
+          </div>
+        )}
+      </header>
+
+      <main id={mainId} className="ul-site-main">
+        {children}
+      </main>
+
+      <footer className="ul-site-footer">
+        <div className="ul-site-footer-grid">
+          {(config.footerBrand || config.footerNote) && (
+            <div className="ul-site-footer-brand">
+              {config.footerBrand}
+              {config.footerNote && <div className="ul-site-note">{config.footerNote}</div>}
+            </div>
+          )}
+          {config.footerColumns.map((col) => (
+            <nav key={col.heading} className="ul-site-col" aria-label={col.heading}>
+              <h4>{col.heading}</h4>
+              {col.links.map((link) => (
+                <Link key={link.to} to={link.to}>
+                  {link.label}
+                </Link>
+              ))}
+            </nav>
+          ))}
+        </div>
+        {config.footerLegal && <p className="ul-site-legal">{config.footerLegal}</p>}
+      </footer>
+    </div>
+  );
+};
+
+export default PublicSiteLayout;

package/src/layouts/components/index.ts

@@ -0,0 +1,2 @@
+export { PublicSiteLayout } from './PublicSiteLayout';
+export type { PublicSiteLayoutProps } from './PublicSiteLayout';

package/src/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';

package/src/layouts/types/index.ts

@@ -0,0 +1 @@
+export type { PublicLayoutConfig, PublicNavLink, PublicFooterColumn } from './layout';

package/src/layouts/types/layout.ts

@@ -0,0 +1,23 @@
+export interface PublicNavLink {
+  to: string;
+  label: string;
+}
+
+export interface PublicFooterColumn {
+  heading: string;
+  links: PublicNavLink[];
+}
+
+export interface PublicLayoutConfig {
+  navItems: PublicNavLink[];
+  navLabel?: string;
+  brand?: React.ReactNode;
+  ctaPrimary?: PublicNavLink;
+  ctaSecondary?: PublicNavLink;
+  footerBrand?: React.ReactNode;
+  footerNote?: React.ReactNode;
+  footerColumns: PublicFooterColumn[];
+  footerLegal?: React.ReactNode;
+  mainId?: string;
+  skipLabel?: string;
+}

package/src/styles/site.css

@@ -0,0 +1,107 @@
+.ul-site {
+  --ul-space-1: 4px;
+  --ul-space-2: 8px;
+  --ul-space-3: 12px;
+  --ul-space-6: 24px;
+  --ul-space-8: 32px;
+  --ul-space-10: 40px;
+
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.ul-skip-link {
+  position: fixed;
+  top: var(--ul-space-2);
+  left: var(--ul-space-2);
+  z-index: 100;
+  transform: translateY(-200%);
+  padding: var(--ul-space-2) var(--ul-space-6);
+  border-radius: var(--radius-md);
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: transform 0.1s ease;
+}
+.ul-skip-link:focus {
+  transform: translateY(0);
+}
+
+.ul-site-header {
+  display: flex;
+  align-items: center;
+  gap: var(--ul-space-6);
+  padding: var(--ul-space-3) var(--ul-space-6);
+}
+.ul-site-brand {
+  display: flex;
+  align-items: center;
+}
+.ul-site-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--ul-space-1);
+  flex: 1;
+}
+.ul-site-link {
+  padding: var(--ul-space-2) var(--ul-space-3);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  color: var(--color-muted-foreground);
+}
+.ul-site-link:hover,
+.ul-site-link--active {
+  color: var(--color-foreground);
+}
+.ul-site-cta {
+  display: flex;
+  align-items: center;
+  gap: var(--ul-space-2);
+}
+
+.ul-site-main {
+  flex: 1;
+}
+
+.ul-site-footer {
+  padding: var(--ul-space-10) var(--ul-space-6) var(--ul-space-6);
+}
+.ul-site-footer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--ul-space-8);
+}
+.ul-site-footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ul-space-3);
+}
+.ul-site-note {
+  font-size: 0.875rem;
+  color: var(--color-muted-foreground);
+  max-width: 32ch;
+}
+.ul-site-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ul-space-2);
+}
+.ul-site-col h4 {
+  margin: 0 0 var(--ul-space-2);
+  font-size: 0.875rem;
+}
+.ul-site-col a {
+  text-decoration: none;
+  color: var(--color-muted-foreground);
+}
+.ul-site-col a:hover {
+  color: var(--color-foreground);
+}
+.ul-site-legal {
+  margin: var(--ul-space-8) 0 0;
+  font-size: 0.75rem;
+  color: var(--color-muted-foreground);
+}

package/src/test/setup.ts

@@ -0,0 +1,23 @@
+import { afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+if (typeof window !== 'undefined')
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string): MediaQueryList =>
+    ({
+      matches: query.includes('prefers-reduced-motion'),
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),       removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }) as unknown as MediaQueryList,
+});
+
+afterEach(() => {
+  cleanup();
+});