docs(headless): add the lifeless keyword in our doc

AmadeusITGroup · Oct 30, 2024 · 6dbb99c · 6dbb99c
1 parent 4a1fc36
commit 6dbb99c
Show file tree

Hide file tree

Showing 14 changed files with 26 additions and 18 deletions.
diff --git a/DEVELOPER.md b/DEVELOPER.md
@@ -12,7 +12,7 @@ This is a monorepo organised with multiple npm packages:
 Each framework will include the following packages:
 
 - `headless` delivering the headless wrappers to use the core components with the selected framework
-- `bootstrap` delivering bootstrap-compliant implementations of the components, powered by the headless wrappers and the core components
+- `bootstrap` delivering bootstrap-compliant implementations of the components, powered by the headless/lifeless wrappers and the core components
 - `demo` the demo pages showcasing examples on how to the use the above packages.
 
 Finally, two other npm packages are available for testing purposes:

diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 
 ## Introduction
 
-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.
+AgnosUI is a powerful library that provides configurable Typescript component factories, headless/lifeless 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://www.agnosui.dev/latest/) to see AgnosUI's capabilities.
 

diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte
@@ -88,9 +88,9 @@
 			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 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 title="Headless/Lifeless components">
+			Each component is provided in headless (lifeless) mode in Angular, React and Svelte using the same factory. You can use them with any front-end
+			CSS framework.
 		</LandingCard>
 		<LandingCard title="Consistent">Components are provided for Angular, React and Svelte with the exact same markup and functionalities.</LandingCard
 		>

diff --git a/docs/00-Getting-started/00-Introduction.md b/docs/00-Getting-started/00-Introduction.md
@@ -70,7 +70,7 @@ To make the most of AgnosUI, familiarize yourself with the following concepts:
 
 - Certain utilities are designed to be used as or with a directive. Directives are simple functions that can be applied to a DOM element. Learn more about this topic in [this section](../01-Headless/03-Directives.md).
 
-## Headless
+## Headless/Lifeless
 
 As AgnosUI components are built on a reactive data system, you can leverage the core to create your own markup, using the data and the API to manage the UI and its behavior.
 

diff --git a/docs/00-Getting-started/01-Features.md b/docs/00-Getting-started/01-Features.md
@@ -8,15 +8,15 @@ since: 0.1.1
 
 A framework-agnostic core of component factories that provide reactive models and APIs to drive the data. These concepts are deeply explained in the [Introduction](00-Introduction.md) and [Headless](../01-Headless/00-Introduction.md).
 
-## Headless components
+## Headless/Lifeless components
 
-Each component is delivered in headless mode in Angular, React and Svelte using the same factory, but you can also use sthese factories for other JS framework of your choice, with a bit work work to create adapters.
+Each component is delivered in headless/lifeless mode in Angular, React and Svelte using the same factory, but you can also use these factories for other JS framework of your choice, with a bit work work to create adapters.
 You can use components with any front-end CSS framework.
 This approach frees you from the complexity of component logic, enabling you to concentrate on making your design stand out.
 
 ## Accessible
 
-Components are designed with a strong emphasis on accessibility. We adhere to the [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag) and established design patterns, by providing keyboard navigation, aria attributes and focus handlers; features are available in headless components, and rigorously tested in the bootstrap version of each component.
+Components are designed with a strong emphasis on accessibility. We adhere to the [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag) and established design patterns, by providing keyboard navigation, aria attributes and focus handlers; features are available in headless/lifeless components, and rigorously tested in the bootstrap version of each component.
 
 ## Highly configurable
 

diff --git a/docs/00-Getting-started/02-Installation.md b/docs/00-Getting-started/02-Installation.md
@@ -20,7 +20,7 @@ If you haven't already, create a new project where you want to use AgnosUI.
 
 AgnosUI provides two flavours of the components for you to choose from:
 
-- **Headless**: The headless package contains the headless functionality of the component library. It can be used with any front-end CSS framework. It uses the core of AgnosUI which is framework agnostic.
+- **Headless**: The headless package contains the headless/lifeless functionality of the component library. It can be used with any front-end CSS framework. It uses the core of AgnosUI which is framework agnostic.
 - **Bootstrap**: The Bootstrap package builds upon the headless package to provide additional UI components styled with Bootstrap.
 
 To install the headless part, open your project's terminal and run the following command:

diff --git a/docs/01-Headless/00-Introduction.md b/docs/01-Headless/00-Introduction.md
@@ -8,7 +8,13 @@ A headless component is a design pattern where the component applies a separatio
 
 The “headless” part refers to the logic of the component, which is decoupled from its visual representation. This means that the component doesn’t have a user interface, but it does have functionality and exposes an api, states, directives but keeps internally their implementation.
 
-Leveraging its core, AgnosUI provides headless components across various frameworks. These components not only share the core API but also adhere to the best practices and implementation strategies specific to each framework. This ensures seamless integration and optimal performance.
+There is different kind of "headless" libraries and the naming could change taking into account different specificities of the different libs. In a way if we refer to this
+
+<p><a href="https://nerdy.dev/headless-boneless-and-skinless-ui" target="_blank" aria-label="article">article</a>
+</p>
+we are more a lifeless library.
+
+Leveraging its core, AgnosUI provides headless/lifeless components across various frameworks. These components not only share the core API but also adhere to the best practices and implementation strategies specific to each framework. This ensures seamless integration and optimal performance.
 
 ## Anatomy of a Component Creation
 

diff --git a/docs/01-Headless/01-Configuration.md b/docs/01-Headless/01-Configuration.md
@@ -17,7 +17,7 @@ You can check how each framework handles this need on their respective documenta
     <li><a href="https://angular.io/guide/creating-injectable-service" target="_blank">context injection in Angular</a></li>
 </ul>
 
-The configuration is available out of the box as soon as components are created using the AgnosUI headless factories.  
+The configuration is available out of the box as soon as components are created using the AgnosUI headless/lifeless factories.  
 The headless packages also provide utilities for each framework to retrieve and update component configuration.
 
 ## In Action

diff --git a/docs/01-Headless/04-Implementation.md b/docs/01-Headless/04-Implementation.md
@@ -1,3 +1,3 @@
 # Introduction to Components creation
 
-We have two types of usage of headless components in this documentation. One type is the Headless components examples (done using DaisyUI), and the other is the Bootstrap components. The Bootstrap components are ready-to-use components available in a specific library. The Headless components examples are just components to copy and paste into your code and adapt to your needs.
+We have two types of usage of headless/lifeless components in this documentation. One type is the Headless/Lifeless components examples (done using DaisyUI), and the other is the Bootstrap components. The Bootstrap components are ready-to-use components available in a specific library. The Headless/Lifeless components examples are just components to copy and paste into your code and adapt to your needs.
diff --git a/docs/02-Headless-Components/00-Introduction.md b/docs/02-Headless-Components/00-Introduction.md
@@ -2,6 +2,6 @@
 since: 0.3.0
 ---
 
-# Introduction to Headless Components
+# Introduction to Headless/Lifeless Components
 
-The headless components are a series of examples demonstrating the usage of our headless library by implementing the logic for [DaisyUI](https://daisyui.com/) components. We illustrate how to create your own components using the DaisyUI appearance while incorporating behavior logic and adhering to accessibility principles.
+The headless/lifeless components are a series of examples demonstrating the usage of our "headless" library by implementing the logic for [DaisyUI](https://daisyui.com/) components. We illustrate how to create your own components using the DaisyUI appearance while incorporating behavior logic and adhering to accessibility principles.
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
 		"alert",
 		"collapse",
 		"components",
+		"headless",
+		"lifeless",
 		"modal",
 		"pagination",
 		"progressbar",

diff --git a/react/headless/README.md b/react/headless/README.md
@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@agnos-ui/react-headless)](https://www.npmjs.com/package/@agnos-ui/react-headless)
 
-Headless component library for [React](https://react.dev/).
+Headless/Lifeless component library for [React](https://react.dev/).
 
 ## Installation
 

diff --git a/svelte/headless/README.md b/svelte/headless/README.md
@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@agnos-ui/svelte-headless)](https://www.npmjs.com/package/@agnos-ui/svelte-headless)
 
-Headless component library for [Svelte](https://svelte.dev/).
+Headless/Lifeless component library for [Svelte](https://svelte.dev/).
 
 ## Installation
 

diff --git a/svelte/headless/package.json b/svelte/headless/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@agnos-ui/svelte-headless",
-	"description": "Headless component library for Svelte.",
+	"description": "Headless\\Lifeless component library for Svelte.",
 	"version": "0.0.0",
 	"private": true,
 	"type": "module",