From a9179059ec4cfe11f543db328983d4202108f3ee Mon Sep 17 00:00:00 2001 From: ExFlo Date: Tue, 3 Sep 2024 11:16:04 +0200 Subject: [PATCH] feat(docs): fix a few lines and switch widget to components, add the SSR card (#902) --- DEVELOPER.md | 4 +-- README.md | 18 +++++------ angular/bootstrap/README.md | 4 +-- angular/bootstrap/package.json | 2 +- angular/headless/README.md | 4 +-- angular/headless/package.json | 2 +- core-bootstrap/README.md | 2 +- core-bootstrap/package.json | 2 +- core/README.md | 4 +-- core/package.json | 2 +- demo/src/app.html | 14 ++++----- demo/src/routes/+page.svelte | 24 ++++++++------- .../blog/2024-02-01/tansu-reactivity.md | 2 +- docs/00-Getting-started/00-Introduction.md | 30 +++++++++---------- docs/00-Getting-started/01-Features.md | 20 ++++++------- docs/00-Getting-started/02-Installation.md | 6 ++-- docs/01-Headless/00-Introduction.md | 26 ++++++++-------- docs/01-Headless/01-Configuration.md | 8 ++--- docs/01-Headless/02-Slots.md | 6 ++-- docs/04-Services/00-Introduction.md | 2 +- package.json | 2 +- react/bootstrap/README.md | 4 +-- react/bootstrap/package.json | 2 +- react/headless/README.md | 4 +-- react/headless/package.json | 2 +- svelte/bootstrap/README.md | 4 +-- svelte/bootstrap/package.json | 2 +- svelte/headless/README.md | 4 +-- svelte/headless/package.json | 2 +- 29 files changed, 104 insertions(+), 104 deletions(-) diff --git a/DEVELOPER.md b/DEVELOPER.md index 847b0e5cd1..d1edf0a390 100644 --- a/DEVELOPER.md +++ b/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 diff --git a/README.md b/README.md index b38ff65841..3a3e2d6f82 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -

AgnosUI - Where web widgets shine

+

AgnosUI - Where web components shine

angular-logo @@ -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 diff --git a/angular/bootstrap/README.md b/angular/bootstrap/README.md index 25d2c1d938..0879b20b87 100644 --- a/angular/bootstrap/README.md +++ b/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. diff --git a/angular/bootstrap/package.json b/angular/bootstrap/package.json index 5eb2b4e8df..6387da267b 100644 --- a/angular/bootstrap/package.json +++ b/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": { diff --git a/angular/headless/README.md b/angular/headless/README.md index f843fc9746..93ed4ca9db 100644 --- a/angular/headless/README.md +++ b/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. diff --git a/angular/headless/package.json b/angular/headless/package.json index 224b4184c1..01ea876abe 100644 --- a/angular/headless/package.json +++ b/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": { diff --git a/core-bootstrap/README.md b/core-bootstrap/README.md index 8ff26fd663..3afcd783d8 100644 --- a/core-bootstrap/README.md +++ b/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`. diff --git a/core-bootstrap/package.json b/core-bootstrap/package.json index e4f5cc0381..cb0ab3f2ed 100644 --- a/core-bootstrap/package.json +++ b/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": [ diff --git a/core/README.md b/core/README.md index 98c90a835c..80aaf257ae 100644 --- a/core/README.md +++ b/core/README.md @@ -2,7 +2,7 @@ [![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) @@ -10,6 +10,6 @@ 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. diff --git a/core/package.json b/core/package.json index 08ed2a6412..47f72bab12 100644 --- a/core/package.json +++ b/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", diff --git a/demo/src/app.html b/demo/src/app.html index f67a47551b..79a02e4b40 100644 --- a/demo/src/app.html +++ b/demo/src/app.html @@ -8,32 +8,32 @@ - + - + - + diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte index 655fe90f92..e705b4e17f 100644 --- a/demo/src/routes/+page.svelte +++ b/demo/src/routes/+page.svelte @@ -13,7 +13,7 @@ - +

@@ -21,19 +21,19 @@ AgnosUI
- Where web widgets shine. -

Perfected open-source widget libraries

+

Perfected open-source component libraries

  • - Configurable Typescript widget factories + Configurable Typescript component factories
  • Headless wrappers for Angular, React and Svelte
  • - Bootstrap-compliant ready-to-use widgets for Angular, React and Svelte. + Bootstrap-compliant ready-to-use components for Angular, React and Svelte.
@@ -86,21 +86,23 @@
- 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. - - 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. + + 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. Widgets are provided for Angular, React and Svelte with the exact same markup and functionalities. Widgets are designed with a strong emphasis on accessibility and tested for it - 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. Unit tests for headless with Vitest. E2e tests for adapters with Playwright. - - Highly customizable Bootstrap CSS widgets are available for Angular, React and Svelte in separated packages. + + Highly customizable Bootstrap CSS components are available for Angular, React and Svelte in separated packages. + All our components are SSR compliant and can be used in a server-side rendered application.