feat(docs): fix a few lines and switch widget to components, add the …

…SSR card (#902)

DEVELOPER.md

@@ -1,6 +1,6 @@
 # AgnosUI
 
-A framework-agnostic widget library.
+A framework-agnostic component library.
 
 This is a monorepo organised with multiple npm packages:
 
@@ -15,7 +15,7 @@ Then for each supported framework, a corresponding package is present with frame
 Finally, two other npm packages are available for testing purposes:
 
 - [`base-po`](base-po) contains a base class for page objects when writing end-to-end tests with Playwright
-- [`page-objects`](page-objects) contains page objects for each AgnosUI widget
+- [`page-objects`](page-objects) contains page objects for each AgnosUI component
 
 ## Running AgnosUI locally
 

README.md

@@ -1,4 +1,4 @@
-<h1 align="center">AgnosUI - Where web widgets shine</h1>
+<h1 align="center">AgnosUI - Where web components shine</h1>
 
 <p align="center">
   <img src="demo/static/agnosui-logo.svg" alt="angular-logo" width="120px" height="120px"/>
@@ -9,35 +9,35 @@
 
 ## Introduction
 
-AgnosUI is a powerful library that provides configurable Typescript widget factories, headless wrappers and ready-to-use widgets compliant to the [CSS Bootstrap design](https://getbootstrap.com/). Inspired by the success of [ng-bootstrap](https://ng-bootstrap.github.io/), AgnosUI takes the concept a step further by offering widgets that can seamlessly integrate with any front-end framework of your choice. With support for popular frameworks like [Angular](https://angular.io/), [React](https://react.dev/), and [Svelte](https://svelte.dev/), AgnosUI allows you to effortlessly create consistent and visually appealing UI components across your projects.
+AgnosUI is a powerful library that provides configurable Typescript component factories, headless wrappers and ready-to-use components compliant to the [CSS Bootstrap design](https://getbootstrap.com/). Inspired by the success of [ng-bootstrap](https://ng-bootstrap.github.io/), AgnosUI takes the concept a step further by offering components that can seamlessly integrate with any front-end framework of your choice. With support for popular frameworks like [Angular](https://angular.io/), [React](https://react.dev/), and [Svelte](https://svelte.dev/), AgnosUI allows you to effortlessly create consistent and visually appealing UI components across your projects.
 
 Feel free to explore the [demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see AgnosUI's capabilities.
 
 ## Key Characteristics
 
-1. **Framework Agnostic Widgets**: AgnosUI's widget architecture revolves around a framework-agnostic core. Each widget is implemented in this core, focusing on its model (data) and the methods required to manipulate this data. This abstraction allows developers to create widgets independently of any specific framework, facilitating integration into various projects.
+1. **Framework Agnostic Components**: AgnosUI's component architecture revolves around a framework-agnostic core. Each component is implemented in this core, focusing on its model (data) and the methods required to manipulate this data. This abstraction allows developers to create components independently of any specific framework, facilitating integration into various projects.
 
-2. **Extensive Framework Support**: AgnosUI currently offers support for three widely-used front-end frameworks: Angular, React, and Svelte. This diverse compatibility ensures that developers can leverage AgnosUI's widgets seamlessly across projects, irrespective of the chosen framework.
+2. **Extensive Framework Support**: AgnosUI currently offers support for three widely-used front-end frameworks: Angular, React, and Svelte. This diverse compatibility ensures that developers can leverage AgnosUI's components seamlessly across projects, irrespective of the chosen framework.
 
-3. **Adapters for Each Framework**: To achieve compatibility with different front-end frameworks, each widget in AgnosUI has an adapter for every supported framework. These adapters play a pivotal role in building the widget's UI by:
+3. **Adapters for Each Framework**: To achieve compatibility with different front-end frameworks, each component in AgnosUI has an adapter for every supported framework. These adapters play a pivotal role in building the component's UI by:
 
    - Constructing the appropriate markup based on the core data.
    - Connecting user actions to the corresponding core methods.
    - Listening for any change to the model and automatically triggering re-renders of the markup.
 
-4. **Flexible Widget Customization**: AgnosUI allows developers to configure and override any widget props at any point within the component subtree. This flexibility enables extensive customization possibilities, empowering developers to tailor the widgets to suit their specific project requirements.
+4. **Flexible Component Customization**: AgnosUI allows developers to configure and override any component props at any point within the component subtree. This flexibility enables extensive customization possibilities, empowering developers to tailor the components to suit their specific project requirements.
 
-5. **Thorough Testing**: The core of AgnosUI undergoes comprehensive unit testing using [Vitest](https://vitest.dev/), ensuring its independence from any specific framework. Additionally, rigorous end-to-end tests are conducted with [Playwright](https://playwright.dev/) across different frameworks and browsers (Chromium, Firefox, Webkit). As the markup remains consistent for all frameworks, these tests are inherently framework-agnostic, guaranteeing robust and reliable widget functionalities.
+5. **Thorough Testing**: The core of AgnosUI undergoes comprehensive unit testing using [Vitest](https://vitest.dev/), ensuring its independence from any specific framework. Additionally, rigorous end-to-end tests are conducted with [Playwright](https://playwright.dev/) across different frameworks and browsers (Chromium, Firefox, Webkit). As the markup remains consistent for all frameworks, these tests are inherently framework-agnostic, guaranteeing robust and reliable component functionalities.
 
 ## Advantages
 
 1. **Consistent User Experience**: AgnosUI's adapter-based approach ensures a uniform user experience across all supported frameworks. Any fix or new feature implemented at the core level automatically propagate to all adapters, minimizing discrepancies between frameworks.
 
-2. **Functionality Assurance**: With a strong focus on testing, AgnosUI guarantees consistent functionalities between frameworks. This assurance is invaluable to developers, as it simplifies development and enables them to create widgets with confidence.
+2. **Functionality Assurance**: With a strong focus on testing, AgnosUI guarantees consistent functionalities between frameworks. This assurance is invaluable to developers, as it simplifies development and enables them to create components with confidence.
 
 ## Getting Started
 
-To start using AgnosUI in your project, follow the instructions in the [Installation Guide](INSTALLATION.md). For detailed documentation on each widget and its usage, refer to the [Documentation](https://amadeusitgroup.github.io/AgnosUI/latest/).
+To start using AgnosUI in your project, follow the instructions in the [Installation Guide](INSTALLATION.md). For detailed documentation on each component and its usage, refer to the [Documentation](https://amadeusitgroup.github.io/AgnosUI/latest/).
 
 ## Contributing
 

angular/bootstrap/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@agnos-ui/angular-bootstrap)](https://www.npmjs.com/package/@agnos-ui/angular-bootstrap)
 
-[Bootstrap](https://getbootstrap.com/)-based widget library for [Angular](https://angular.io/).
+[Bootstrap](https://getbootstrap.com/)-based component library for [Angular](https://angular.io/).
 
 ## Installation
 
@@ -12,4 +12,4 @@ npm install @agnos-ui/angular-bootstrap
 
 ## Usage
 
-Please check [our demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see all the available widgets and how to use them.
+Please check [our demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see all the available components and how to use them.

angular/bootstrap/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agnos-ui/angular-bootstrap",
-	"description": "Bootstrap-based widget library for Angular.",
+	"description": "Bootstrap-based component library for Angular.",
 	"version": "0.0.0",
 	"type": "module",
 	"exports": {

angular/headless/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@agnos-ui/angular-headless)](https://www.npmjs.com/package/@agnos-ui/angular-headless)
 
-Headless widget library for [Angular](https://angular.io/).
+Headless component library for [Angular](https://angular.io/).
 
 ## Installation
 
@@ -12,4 +12,4 @@ npm install @agnos-ui/angular-headless
 
 ## Usage
 
-Please check [our demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see all the available widgets and how to use them.
+Please check [our demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see all the available components and how to use them.

angular/headless/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agnos-ui/angular-headless",
-	"description": "Headless widget library for Angular.",
+	"description": "Headless component library for Angular.",
 	"version": "0.0.0",
 	"type": "module",
 	"exports": {

core-bootstrap/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@agnos-ui/core-bootstrap)](https://www.npmjs.com/package/@agnos-ui/core-bootstrap)
 
-This package is made of styles and widget extensions necessary to use AgnosUI with Bootstrap.
+This package is made of styles and component extensions necessary to use AgnosUI with Bootstrap.
 It contains both CSS and SCSS files allowing same customizability as Bootstrap.
 
 It is a dependency of `@agnos-ui/angular-bootstrap`, `@agnos-ui/react-bootstrap` and `@agnos-ui/svelte-bootstrap`.

core-bootstrap/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agnos-ui/core-bootstrap",
-	"description": "Styles and widget interface extensions necessary to use AgnosUI with Bootstrap.",
+	"description": "Styles and component interface extensions necessary to use AgnosUI with Bootstrap.",
 	"version": "0.0.0",
 	"private": true,
 	"keywords": [

core/README.md

@@ -2,14 +2,14 @@
 
 [![npm](https://img.shields.io/npm/v/@agnos-ui/core)](https://www.npmjs.com/package/@agnos-ui/core)
 
-[AgnosUI](https://amadeusitgroup.github.io/AgnosUI/latest/) is a framework-agnostic widget library with adapters for multiple frameworks, either [Bootstrap](https://getbootstrap.com/)-based or headless:
+[AgnosUI](https://amadeusitgroup.github.io/AgnosUI/latest/) is a framework-agnostic component library with adapters for multiple frameworks, either [Bootstrap](https://getbootstrap.com/)-based or headless:
 
 - [Angular bootstrap](https://www.npmjs.com/package/@agnos-ui/angular-bootstrap), [Angular headless](https://www.npmjs.com/package/@agnos-ui/angular-headless)
 - [React bootstrap](https://www.npmjs.com/package/@agnos-ui/react-bootstrap), [React headless](https://www.npmjs.com/package/@agnos-ui/react-headless)
 - [Svelte bootstrap](https://www.npmjs.com/package/@agnos-ui/svelte-bootstrap), [Svelte headless](https://www.npmjs.com/package/@agnos-ui/svelte-headless)
 
 This `@agnos-ui/core` package contains the framework-agnostic common code used by the above framework adapters.
 
-Please check [our demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see all the available widgets and how to use them.
+Please check [our demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see all the available components and how to use them.
 
 Unless you want to develop an adapter for a framework, you probably do not need to use `@agnos-ui/core` directly. Please refer to one of the framework-specific packages.

core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agnos-ui/core",
-	"description": "Framework-agnostic headless widget library.",
+	"description": "Framework-agnostic headless component library.",
 	"version": "0.0.0",
 	"private": true,
 	"type": "module",

demo/src/app.html

@@ -8,32 +8,32 @@
 		<!-- Search Engine -->
 		<meta
 			name="description"
-			content="Perfected widget library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
+			content="Perfected component library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
 		/>
 		<meta name="image" content="%sveltekit.assets%/agnosui-logo.svg" />
 		<!-- Schema.org for Google -->
-		<meta itemprop="name" content="AgnosUI - Where web widgets shine" />
+		<meta itemprop="name" content="AgnosUI - Where web components shine" />
 		<meta
 			itemprop="description"
-			content="Perfected widget library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
+			content="Perfected component library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
 		/>
 		<meta itemprop="image" content="%sveltekit.assets%/agnosui-logo.svg" />
 		<!-- Twitter -->
 		<meta name="twitter:card" content="summary_large_image" />
-		<meta name="twitter:title" content="AgnosUI - Where web widgets shine" />
+		<meta name="twitter:title" content="AgnosUI - Where web components shine" />
 		<meta property="twitter:domain" content="amadeusitgroup.github.io" />
 		<meta property="twitter:url" content="https://amadeusitgroup.github.io/AgnosUI/latest/" />
 		<meta name="twitter:image" content="https://amadeusitgroup.github.io/AgnosUI/latest/agnosui-logo.png" />
 		<meta name="twitter:image:alt" content="Icon of AgnosUI" />
 		<meta
 			name="twitter:description"
-			content="Perfected widget library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
+			content="Perfected component library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
 		/>
 		<!-- Open Graph general (Facebook, Pinterest & Google+) -->
-		<meta name="og:title" content="AgnosUI - Where web widgets shine" />
+		<meta name="og:title" content="AgnosUI - Where web components shine" />
 		<meta
 			name="og:description"
-			content="Perfected widget library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
+			content="Perfected component library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
 		/>
 		<meta name="og:url" content="https://amadeusitgroup.github.io/AgnosUI/latest/" />
 		<meta name="og:site_name" content="AgnosUI" />

demo/src/routes/+page.svelte

@@ -13,27 +13,27 @@
 	<meta name="description" content="Svelte demo app" />
 </svelte:head>
 
-<!-- TODO make a list of widget and iterate over it when needed -->
+<!-- TODO make a list of component and iterate over it when needed -->
 <div class="container-xxl d-flex flex-column align-items-center pt-5">
 	<div class="d-flex flex-md-row flex-column">
 		<div class="order-md-1 order-2">
 			<h1 class="text-primary-emphasis text-sm-start text-center fs-sm-1 mb-md-5 mb-sm-3">
 				<span
 					><span class="au-clip">AgnosUI</span>
 					<br />
-					Where web widgets shine.</span
+					Where web components shine.</span
 				>
 			</h1>
-			<h2 class="text-primary-emphasis text-sm-start text-center">Perfected open-source widget libraries</h2>
+			<h2 class="text-primary-emphasis text-sm-start text-center">Perfected open-source component libraries</h2>
 			<ul class="au-landing-list">
 				<li class="d-flex align-items-start">
-					<Svg svg={bullet} className="bullet me-3" />Configurable Typescript widget factories
+					<Svg svg={bullet} className="bullet me-3" />Configurable Typescript component factories
 				</li>
 				<li class="d-flex align-items-start">
 					<Svg svg={bullet} className="bullet me-3" />Headless wrappers for Angular, React and Svelte
 				</li>
 				<li class="d-flex align-items-start">
-					<Svg svg={bullet} className="bullet me-3" />Bootstrap-compliant ready-to-use widgets for Angular, React and Svelte.
+					<Svg svg={bullet} className="bullet me-3" />Bootstrap-compliant ready-to-use components for Angular, React and Svelte.
 				</li>
 			</ul>
 		</div>
@@ -86,21 +86,23 @@
 <div class="au-features container-xxl mt-5">
 	<div class="cards row align-content-around">
 		<LandingCard title="Framework agnostic">
-			A framework-agnostic core of widget factories that provide reactive models and APIs to drive the data. You can use it with any front-end
+			A framework-agnostic core of component factories that provide reactive models and APIs to drive the data. You can use it with any front-end
 			framework.
 		</LandingCard>
-		<LandingCard title="Headless widgets">
-			Each widget is provided in headless mode in Angular, React and Svelte using the same factory. You can use them with any front-end CSS framework.
+		<LandingCard title="Headless components">
+			Each component is provided in headless mode in Angular, React and Svelte using the same factory. You can use them with any front-end CSS
+			framework.
 		</LandingCard>
 		<LandingCard title="Consistent">Widgets are provided for Angular, React and Svelte with the exact same markup and functionalities.</LandingCard>
 		<LandingCard title="Accessible">Widgets are designed with a strong emphasis on accessibility and tested for it</LandingCard>
 		<LandingCard title="Highly configurable">
-			Default values for all widgets props are configurable at any point of the application subtree.
+			Default values for all components props are configurable at any point of the application subtree.
 		</LandingCard>
 		<LandingCard title="Fully tested">Unit tests for headless with Vitest. E2e tests for adapters with Playwright.</LandingCard>
-		<LandingCard title="Bootstrap widgets">
-			Highly customizable Bootstrap CSS widgets are available for Angular, React and Svelte in separated packages.
+		<LandingCard title="Bootstrap components">
+			Highly customizable Bootstrap CSS components are available for Angular, React and Svelte in separated packages.
 		</LandingCard>
+		<LandingCard title="SSR compliant">All our components are SSR compliant and can be used in a server-side rendered application.</LandingCard>
 	</div>
 </div>
 <footer class="au-footer pt-2 mt-2">

demo/src/routes/blog/2024-02-01/tansu-reactivity.md

@@ -1,4 +1,4 @@
-In [AgnosUI](https://amadeusitgroup.github.io/AgnosUI/latest/), we employ [Tansu](https://github.com/AmadeusITGroup/tansu) to handle our widget states.
+In [AgnosUI](https://amadeusitgroup.github.io/AgnosUI/latest/), we employ [Tansu](https://github.com/AmadeusITGroup/tansu) to handle our component states.
 
 This article explores the effective ways to use Tansu for broader state management, drawing upon our practical experience in developing AgnosUI. To follow along, we assume that you have a basic understanding of Tansu's API, as explained in the [README](https://github.com/AmadeusITGroup/tansu/blob/master/README.md) (no need to know them in detail). Feel free to refer to it for reference if needed.