amadeusitgroup / agnosui Goto Github PK
View Code? Open in Web Editor NEWMultiframework Frontend Widget Libraries, headless and bootstrap
Home Page: https://amadeusitgroup.github.io/AgnosUI/latest/
License: MIT License
Multiframework Frontend Widget Libraries, headless and bootstrap
Home Page: https://amadeusitgroup.github.io/AgnosUI/latest/
License: MIT License
The button being blue/grey selected/not selected need a legend.
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.
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.
We should add buttons for each component's examples / playgrounds opening the associated Stackblitz in a new tab.
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.
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.
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.
Some guides/articles to write:
Describe the bug
Components with slot don't work with SSR (svelte)
To Reproduce
Add a <Alert>
in a demo page
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).
For the input layout one.
Validate that the screenreader is correctly reading the value.
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.
The code must:
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.
The idea is to adapt the height of the iframe each time the inner content change
Open question.
For people to be able to use the PO with a custom structure slot.
Probably a e2e test, as it requires the IntersectionObserver.
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.
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.
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)...
Currently, only the unit tests from core contribute to the code coverage.
We should:
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.
Is your feature request related to a problem? Please describe.
Setup renovate in our github project.
Add ex on how to use the core with your own layout / use the structure slot with a new CSS framework.
Improve our handling of the accessibility (currently based on bootstrap and DF improvement) by checking with
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.
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
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 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.
We need a
A design choice for:
tbd
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.
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.
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
.
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.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
@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
)@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
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
.github/workflows/build.yml
actions/checkout v4
actions/setup-node v4
codecov/codecov-action v3
actions/checkout v4
.github/workflows/e2e-tests.yml
actions/checkout v4
actions/setup-node v4
codecov/codecov-action v3
.github/workflows/renovate.yml
actions/checkout v4
renovatebot/github-action v39.1.3
angular/headless/package.json
@amadeus-it-group/tansu 0.0.23
tslib ^2.6.2
@angular/common *
@angular/core *
angular/lib/package.json
@amadeus-it-group/tansu 0.0.23
tslib ^2.6.2
@angular/common *
@angular/core *
angular/package.json
@angular/animations ^17.0.2
@angular/common ^17.0.2
@angular/compiler ^17.0.2
@angular/core ^17.0.2
@angular/forms ^17.0.2
@angular/platform-browser ^17.0.2
@angular/platform-browser-dynamic ^17.0.2
@angular/router ^17.0.2
rxjs ^7.8.1
tslib ^2.6.2
zone.js ~0.14.2
@angular-devkit/build-angular ^17.0.0
@angular-eslint/eslint-plugin ^17.0.1
@angular-eslint/eslint-plugin-template ^17.0.1
@angular-eslint/template-parser ^17.0.1
@angular/cli ^17.0.0
@angular/compiler-cli ^17.0.2
@types/webpack-env ^1.18.4
ng-packagr ^17.0.0
ngx-build-plus ^17.0.0
raw-loader ^4.0.2
sirv-cli ^2.0.2
typescript ~5.2.2
base-po/package.json
@playwright/test *
code-coverage/package.json
@babel/core ^7.23.3
@babel/plugin-syntax-decorators ^7.23.3
@babel/plugin-syntax-typescript ^7.23.3
babel-plugin-istanbul ^6.1.1
nyc ^15.1.0
uuid ^9.0.1
@types/babel__core ^7.20.4
vite ^4.5.0
vite *
core/lib/package.json
@amadeus-it-group/tansu 0.0.23
core/package.json
@amadeus-it-group/tansu 0.0.23
eslint-plugin-jsdoc ^46.9.0
demo/package.json
@popperjs/core ^2.11.8
highlight.js ^11.9.0
@stackblitz/sdk ^1.9.0
@sveltejs/adapter-static ^2.0.3
@sveltejs/kit ^1.27.6
@sveltejs/vite-plugin-svelte ^2.5.2
@types/dom-view-transitions ^1.0.4
bootstrap-icons ^1.11.1
eslint-plugin-svelte ^2.35.0
prettier-plugin-svelte ^3.1.0
svelte ^4.2.5
svelte-check ^3.6.0
demo/src/lib/stackblitz/angular/package.json
@angular-devkit/build-angular ^17.0.0
@angular/animations ^17.0.2
@angular/cli ^17.0.0
@angular/common ^17.0.2
@angular/compiler ^17.0.2
@angular/compiler-cli ^17.0.2
@angular/core ^17.0.2
@angular/forms ^17.0.2
@angular/platform-browser ^17.0.2
@angular/platform-browser-dynamic ^17.0.2
@angular/router ^17.0.2
bootstrap-icons ^1.11.1
raw-loader ^4.0.2
rxjs ^7.8.1
tslib ^2.6.2
typescript ~5.2.2
zone.js ~0.14.2
demo/src/lib/stackblitz/react/package.json
@types/react ^18.2.37
@types/react-dom ^18.2.15
@vitejs/plugin-react ^4.2.0
bootstrap-icons ^1.11.1
react ^18.2.0
react-dom ^18.2.0
sass ^1.69.5
tslib ^2.6.2
typescript ~5.2.2
vite ^4.5.0
demo/src/lib/stackblitz/svelte/package.json
@sveltejs/vite-plugin-svelte ^2.5.2
@tsconfig/svelte ^5.0.2
bootstrap-icons ^1.11.1
sass ^1.69.5
svelte ^4.2.5
svelte-check ^3.6.0
tslib ^2.6.2
typescript ~5.2.2
vite ^4.5.0
eslint-plugin/package.json
@typescript-eslint/utils ^6.11.0
@angular/core ^17.0.2
@typescript-eslint/rule-tester ^6.11.0
@vitest/coverage-v8 ^0.34.6
svelte ^4.2.5
svelte-eslint-parser ^0.33.1
typescript *
package.json
@axe-core/playwright ^4.8.1
@microsoft/api-extractor ^7.38.3
@playwright/test ^1.40.0
@types/node ^20.9.2
@types/uuid ^9.0.7
@typescript-eslint/eslint-plugin ^6.11.0
@typescript-eslint/parser ^6.11.0
@vitest/browser ^0.34.6
@vitest/ui ^0.34.6
bootstrap ^5.3.2
eslint ^8.54.0
eslint-config-prettier ^9.0.0
glob 10.3.10
husky ^8.0.3
lint-staged ^15.1.0
npm-run-all ^4.1.5
prettier ^3.1.0
semver ^7.5.4
syncpack ^11.2.1
ts-node ^10.9.1
typescript ~5.2.2
vite ^4.5.0
vitest ^0.34.6
npm ^10.2.4
node ^20.9.0
npm 10.2.4
page-objects/package.json
@playwright/test *
react/headless/package.json
@amadeus-it-group/tansu 0.0.23
classnames ^2.3.2
react *
react-dom *
react/lib/package.json
@amadeus-it-group/tansu 0.0.23
classnames ^2.3.2
react *
react-dom *
react/package.json
@types/react ^18.2.37
@types/react-dom ^18.2.15
@vitejs/plugin-react ^4.2.0
classnames ^2.3.2
eslint-plugin-react ^7.33.2
react ^18.2.0
react-dom ^18.2.0
react-router-dom ^6.19.0
style-bootstrap/package.json
sass ^1.69.5
svelte/headless/package.json
@amadeus-it-group/tansu 0.0.23
svelte *
svelte/lib/package.json
@amadeus-it-group/tansu 0.0.23
svelte *
svelte/package.json
@amadeus-it-group/tansu 0.0.23
@sveltejs/package ^2.2.2
@sveltejs/vite-plugin-svelte ^2.5.2
eslint-plugin-svelte ^2.35.0
prettier-plugin-svelte ^3.1.0
svelte ^4.2.5
svelte-check ^3.6.0
Should we:
Context
Following our discussion regarding the angular widgets apis, we have decided that angular widgets should obey the following rules:
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>
We have put a temporary setTimeout to solve this. We need to thing about making the event async ?
So that:
In the demo website, explain how we support accessibility for the modal component.
We need to discuss a KN involving Arrow keys, Page End, Page start. The same system we could have for tabs.
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.
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.
Red borders, messages, ... ?
The purpose is to warn that input values with error are not taken into account in the example.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.