amadeusitgroup / agnosui Goto Github PK

We have put a temporary setTimeout to solve this. We need to thing about making the event async ?

Is your feature request related to a problem? Please describe.
In order to smooth the migration from ng-bootstrap to agnosui, we should implement a ng-add schematic that proposes to migrate ng-bootstrap components that are implemented in agnosui.

Describe the bug
Components with slot don't work with SSR (svelte)

To Reproduce
Add a <Alert> in a demo page

Context
Following our discussion regarding the angular widgets apis, we have decided that angular widgets should obey the following rules:

• the selector should not be 'au-$name' but '$htmlElement au$Name'
• every input and output should prefixed with au

Example of change
For the rating default, this would mean going from:

<au-rating [(rating)]="rating" (hover)="hovered = $event" (leave)="left = $event" ariaLabel="rating" />

to

<div [(au-rating)]="rating" (au-hover)="hovered = $event" (au-leave)="left = $event" au-aria-label="rating"></div>

Describe the bug
When navigating to the react examples of the alert widget, the dismiss buttons appear briefly.

To Reproduce
Navigate to https://amadeusitgroup.github.io/AgnosUI/latest/react/components/alert/examples.
Refresh or go to the Angular view then back to React. Observe the dismiss buttons flickering.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update all non-major dependencies (@sveltejs/package, @sveltejs/vite-plugin-svelte, @types/babel__core, @types/node, @types/react, @types/react-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @typescript-eslint/rule-tester, @typescript-eslint/utils, bootstrap-icons, eslint-plugin-svelte, node, prettier-plugin-svelte, react-router-dom, svelte, svelte-check)
• chore(deps): update angular dependencies (@angular-devkit/build-angular, @angular-eslint/eslint-plugin, @angular-eslint/eslint-plugin-template, @angular-eslint/template-parser, @angular/animations, @angular/cli, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, ng-packagr)
• chore(deps): lock file maintenance

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency typescript to ~5.3.2
• chore(deps): update dependency @sveltejs/vite-plugin-svelte to v3
• chore(deps): update dependency vite to v5

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

In the demo website, explain how we support accessibility for the pagination component.

Is your feature request related to a problem? Please describe.
Currently our slowest e2e tests are the transition tests, which can go up to 6s per test.

Describe the solution you'd like
Investigate how we could make them faster, while still validating the "transitioning" state.

tbd

Describe the solution you'd like
As with other components, first study the dropdown implements found in other widget libraries, focusing on ng-bootstrap first.

Describe the bug
Currently, opening the landing page (or any other) is quite ugly, with components overflowing.

To Reproduce
Open the landing page on a mobile phone or with the browser, using as target Samsun S8+.

Expected behavior
Smooth display on mobile.

Is your feature request related to a problem? Please describe.

Describe the solution you'd like
A new Pagination algo for the ellipsis that is not messing with the number of items displayed (improvement from ng-bootstrap).

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
We should check the accessibility attributes required (should screenreader tell the number of pages as if there was no ellipsis)...

It can also be useful to output the widget state, so that a comparison can be done between the props given in input and the ones that are computed.

Improve our handling of the accessibility (currently based on bootstrap and DF improvement) by checking with

• Aria pattern
• Radix

Open question.
For people to be able to use the PO with a custom structure slot.

Add the "nav" part of the pagination on top of our component in the demo part or in the component itself (in react/svelte as in angular we already have it). See bootstrap has a nav
<nav aria-label="Page navigation example">
around the ul

• nav in react, svelte, angular
• check ellipsis --> impact on screen reader, do they read the correct number of items ?

Describe the bug
Currently, the demo website is not fully accessible due to an invalid color contrast.

To Reproduce
Either launch the axe chrome extension, or run the e2e demo.spec.ts test with the color-contrast rule enabled.

Expected behavior
Fully accessible demo website.

Currently the svelte AgnosUI package does not contain the correct types of the widgets, and IDE autocompletion does not work when using only the package generated in svelte/dist/lib.

Red borders, messages, ... ?

The purpose is to warn that input values with error are not taken into account in the example.

When angular/angular#50320 is fixed, if possible, we should remove the workaround we implemented in #146, and, maybe also all the asynchronous parts of the [auUse] transition directive. Of course, this has to be done carefully without introducing regressions in AgnosUI.

So that:

• We can restrict the values for some priops, if needed,
• We can manage custom functions/slots for the function/slot inputs,
• For callbacks (i.e. the events), custom functions can be generated (custom name + console.log) to have a generic behavior.

Describe the solution you'd like
As with other components, first study the progressbar implementations found in other widget libraries, focusing on ng-bootstrap first.

Currently, the code is highlighted with highlight.js, with the basic feature.

An investigation is required to see how to improve things, depending on the selected framework.

Is your feature request related to a problem? Please describe.
Setup renovate in our github project.

In the demo website, explain how we support accessibility for the modal component.

For the input layout one.
Validate that the screenreader is correctly reading the value.

Some guides/articles to write:

• Concepts
• Quick start
• Explain the configuration system,
• Explain the slots (string, function, specific framework slot)

For each Angular sample, we should never add a selector in the main component to avoid breaking the sample in stackblitz (which includes the main component with <ng-component>).

Is your feature request related to a problem? Please describe.
This is to avoid opening PRs such as this one

Describe the solution you'd like
We could add an eslint rule.
If we want to avoid any kind of issues with stackblitz, we could also automatically test all samples in stackblitz with Playwright (but running those tests would require a lot of time).

Currently, only the unit tests from core contribute to the code coverage.

We should:

• instrument the lib sources and generate the code coverage
• publish both code coverages to codecov
• add badges to README

We should add buttons for each component's examples / playgrounds opening the associated Stackblitz in a new tab.

On /react/components/modal/playground#{"props":{"visible":true,"slotDefault":"Dialog content","slotTitle":"Dialog"}}, the backdrop becomes dark when the backdropClass is set (any value).

It seems that it's because the show class is removed on the backdrop. The same happens with the modalClass (even if anything is visible).

It happens with React only.

Probably a e2e test, as it requires the IntersectionObserver.

Is your feature request related to a problem? Please describe.
Currently, in development or in prod, and for every framework, the sample iframes load ALL agnosui widgets.
This slows down our pages + makes the app not scalable

**To reproduce
Opening the app in local, open any sample url and observe the network calls (might need to disable the service worker once this PR is merged).

Describe the solution you'd like
Using lazy loaded routes / proper separation (do we need to split the core ?), make sure we require the bare minimum in each iframe.

Should we:

• Have our own domain ?
• Put in place Analytics ?

Describe the solution you'd like
In order to keep track of all development done in the project, we should automatically update the CHANGELOG.md in the release workflow, based on the list of commits.
We might need to enforce proper commit messages.

Describe the solution you'd like
Last issue to be handled in the milestone. We should revert the robots changes made here: #25 and launch the first release of AgnosUI.
We will then check the npm publish.

Describe the bug
When looking at Codecov report, the code coverage does not seem to proper (missing statement on a comment... and other weird things).

To Reproduce
Check covered code in https://app.codecov.io/gh/AmadeusITGroup/AgnosUI and see the weirdness.

Expected behavior
Working code coverage.

Add ex on how to use the core with your own layout / use the structure slot with a new CSS framework.

Describe the bug
The rating is displayed as 100%, even if given a 3.25 value, when using

To Reproduce
If you have an android phone, open the main website and navigate to any framework / rating / examples.
Otherwise, open Sauce Labs and view the website with Android emulator.

Expected behavior
Rating should display as expected also on Android.

The code must:

• show the code to reach the displayed example,
• be the one that ends in the stackblitz demo.

We need to discuss a KN involving Arrow keys, Page End, Page start. The same system we could have for tabs.

The idea is to adapt the height of the iframe each time the inner content change

Describe the solution you'd like
Homogeneous exports, and validate list of exports
We should be able to install only the framework specific lib (angular react...)

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
There is no automatic check that helps developers write api documentation of their core component.

Describe the solution you'd like
Use eslint plugin https://github.com/gajus/eslint-plugin-jsdoc with some smart configuration to enforce proper api documentation.

We need a

• color palette
• a logo

A design choice for:

• landing page
• documentation
• blog part

The button being blue/grey selected/not selected need a legend.