FaaW7 Components

🇬🇧 English Documentation

Overview

FaaW7 Components is a web components library that simulates the visual style and interactive behavior of the Windows 7 operating system. It’s built using Lit and designed for microfrontend architectures, allowing independent apps to share the same nostalgic UI theme.

The library provides a complete set of components — buttons, modals, windows, status bars, tooltips, accordions, and more — styled and animated to replicate the look and feel of Windows 7.

✨ Features

• 🧩 Modular design – import only what you need.
• 🪟 Accurate Windows 7 UI simulation.
• ⚡ Built with Lit – lightweight, reactive, and fast.
• 🧪 Full test coverage with Vitest + Storybook integration.
• 🎨 Customizable theming via CSS variables.
• 🧱 Ideal for microfrontends – each component is encapsulated and framework-agnostic.

🚀 Installation

npm install faaw7-components
# or
pnpm add faaw7-components

🧰 Usage Example

<script type="module">
  import 'faaw7-components/faaw7-button.js';
</script>

<faaw7-button default>Click me</faaw7-button>

You can also integrate it into frameworks like React, Vue, or Angular, using native web components support or wrapper components.

🎨 Theming and Customization

FaaW7 exposes a variety of CSS custom properties for full control of colors, borders, shadows, and fonts. Example:

:root {
  --faaw7-color-border: #c3c3c3;
  --faaw7-color-text: #000;
  --faaw7-gradient-bg: linear-gradient(to bottom, #f0f0f0, #dcdcdc);
  --faaw7-border-radius: 3px;
}

You can override these variables globally or locally per component.

🧩 Components Included

| Category | Components | |-----------|-------------| | Core UI | Button, Checkbox, Textfield, Select, Slider | | Containers | Window, Modal, Accordion, Fieldset | | Navigation | Menu, Tabs, TreeView | | System Elements | StatusBar, Tooltip, Toast, ProgressBar, Spinner | | Media | AudioPlayer | | Others | ContextMenu, Table, Disclosure, Combobox |

🧱 Development and Testing

Run the Storybook for visual testing and documentation:

pnpm storybook

Run unit tests:

pnpm test

Build for production:

pnpm build

🧑‍💻 For Developers

To create a new component:

pnpm generate component <component-name>

Each component follows Lit’s customElement structure and has:

• A .ts implementation file
• Optional .css.ts for scoped styles
• .test.ts file for Vitest unit testing
• .stories.ts for Storybook

📦 Microfrontend Integration

Because each component is framework-independent, FaaW7 is ideal for microfrontend architectures. You can import it into any micro app without conflicts.

Example setup:

import 'faaw7-components/faaw7-window.js';
import 'faaw7-components/faaw7-status-bar.js';

🧠 Accessibility

All components are built with ARIA roles, keyboard navigation, and accessibility testing (@storybook/addon-a11y).

📚 Documentation

The complete interactive documentation can be explored via Storybook or viewed locally after installing the package.

🏗️ Tech Stack

• Lit 3.0
• TypeScript
• Storybook Web Components + Vite
• Vitest + Testing Library
• CSS Variables for Theming

📄 License

MIT © FaaW7 Contributors

🇪🇸 Documentación en Español

Descripción General

FaaW7 Components es una librería de componentes web que simula la interfaz visual y el comportamiento interactivo del sistema operativo Windows 7. Está desarrollada con Lit y pensada para arquitecturas microfrontend, permitiendo que aplicaciones independientes compartan la misma estética clásica.

Incluye una amplia gama de componentes: botones, modales, ventanas, tooltips, barras de estado, acordeones y más, todos fielmente inspirados en el entorno Windows 7.

✨ Características

• 🧩 Diseño modular: importa solo los componentes que necesites.
• 🪟 Simulación precisa del entorno Windows 7.
• ⚡ Basada en Lit: ligera, reactiva y rápida.
• 🧪 Cobertura de pruebas con Vitest + Storybook.
• 🎨 Temas personalizables mediante variables CSS.
• 🧱 Ideal para microfrontends: cada componente es independiente.

🚀 Instalación

npm install faaw7-components
# o
pnpm add faaw7-components

🧰 Ejemplo de Uso

<script type="module">
  import 'faaw7-components/faaw7-button.js';
</script>

<faaw7-button default>Haz clic</faaw7-button>

También puedes integrarla en frameworks como React, Vue o Angular.

🎨 Personalización y Temas

La librería ofrece variables CSS para modificar colores, sombras, fuentes y bordes:

:root {
  --faaw7-color-border: #c3c3c3;
  --faaw7-color-text: #000;
  --faaw7-gradient-bg: linear-gradient(to bottom, #f0f0f0, #dcdcdc);
  --faaw7-border-radius: 3px;
}

Puedes redefinirlas a nivel global o por componente.

🧩 Componentes Disponibles

| Categoría | Componentes | |------------|-------------| | Elementos Base | Button, Checkbox, Textfield, Select, Slider | | Contenedores | Window, Modal, Accordion, Fieldset | | Navegación | Menu, Tabs, TreeView | | Sistema | StatusBar, Tooltip, Toast, ProgressBar, Spinner | | Multimedia | AudioPlayer | | Otros | ContextMenu, Table, Disclosure, Combobox |

🧱 Desarrollo y Pruebas

Ejecutar Storybook:

pnpm storybook

Ejecutar pruebas unitarias:

pnpm test

Construir para producción:

pnpm build

🧑‍💻 Para Desarrolladores

Crear un nuevo componente:

pnpm generate component <nombre-del-componente>

Cada componente incluye:

• Un archivo .ts principal
• Opcional .css.ts con estilos
• Archivo .test.ts con pruebas
• Archivo .stories.ts para Storybook

📦 Integración en Microfrontends

Cada componente es independiente del framework, por lo que FaaW7 es perfecto para integrarse en microfrontends.

Ejemplo:

import 'faaw7-components/faaw7-window.js';
import 'faaw7-components/faaw7-status-bar.js';

🧠 Accesibilidad

Todos los componentes están desarrollados con soporte ARIA, navegación por teclado y pruebas de accesibilidad integradas (@storybook/addon-a11y).

📚 Documentación

Puedes explorar la documentación completa de forma interactiva mediante Storybook o en tu entorno local tras instalar el paquete.

🏗️ Tecnologías

• Lit 3.0
• TypeScript
• Storybook + Vite
• Vitest + Testing Library
• Variables CSS para temas personalizados

📄 Licencia

MIT © FaaW7 Contributors