When we ported agnostic-vue to Vue 3 + Vite, we didn't yet address:

• Linting issues
• Tests

This task is to fix all that.

Also, we'll need to add back yarn test:vue to the top-level monorepo's package.json script:

    "test": "yarn sync:react && yarn test:react && yarn sync:vue && yarn sync:svelte && yarn test:svelte",

See https://github.com/AgnosticUI/agnosticui/blob/master/package.json#L41

Looks like there's an a11y violation in the angular checkboxes/radio implementation:

It's CSS is too big and it's a PITA to keep up across frameworks. I've already removed it from React; remove from svelte | vue | angular next

We need a basic CONTRIBUTING.md for each package. Nothing fancy but enough to get someone who is motivated started.

• Grab stuff from top-level bloated README
• Explain copystyles.css and how to start in CSS package, then update copystyles, then code component
• Explain how to run: Storybook, examples & npm linking
• How to submit PR
• Checklist: isDisabled, disabledOptions for groups of things, isSkinned, a11y violations and keyboard navigation when applicable, storybook coverage. Anything else that makes the API consistent.

Parity component coverage

Flex grid all left

While dev'ing angular Inputs I noticed a possible bug in the React implementation where textarea type is still potentially including an input. I believe I haven't tested this out and need to verify. Need to check Svelte too. I suspect Vue one is ok because the showcase is rendering textarea properly but still should check.

We onlly currently have a horizontal tab but vertical or stacked is quite common

cd site && yarn docs:dev -- http://localhost:3009/docs/setup.html#cdn --- nothing there yet -- need to verify unpkg for all frameworks and create tests/examples then document

Add jsDelivr too
Looks like it picked up the npm:

https://www.jsdelivr.com/package/npm/agnostic-vue

Today, I'm using a very dumb: component.html + component.css setup with a top-level index.html page that indexes each component. This suffers from following issues:

• I have to remember to add the link to a new component in index.html page
• The layouts aren't very attractive
• It's too manual

https://fractal.build/ appears to have a pretty nice off the shelf structure where there's a lot of navigational elements to put useful information.

USA design system blog post:
https://designsystem.digital.gov/whats-new/updates/2017/04/26/fractal-federalist/

https://github.com/AgnosticUI/agnosticui/blob/master/PUBLISHING.md is referencing the removed showcase so need to just update the verbiage.

Need to investigate how to turn off sockjs in Vue app for showcase:

https://stackoverflow.com/questions/65262021/webpack-turning-off-requests-to-sockjs-node-info-or-specifying-a-different-po

Errors look like

There are some glaring inconsistencies in the prop APIs:

• some components use id for the name of their prop; others use uniqueId
• Some components use isDisabled and others use disabled
• All components need to offer the CSS property to allow for overriding. Possibly we should call that something else because it's class-based not literal css styles
• There isSkinned prop should also be used consistently

Research how to implement this and see if we could use this to link from the showcase demo

We have a rudimentary tabs in Angular. This task is to add it in other framework and utilize it in the showcase for the top hero getting started framework guides.

• Tabs Vue
• Showcase
• Angular refactoring once made to look nice for showcase
• React
• Svelte

Convert the Vue 3 implementation to use Typescript

Motive: Not being Typescript is a blocker for many modern web developers given the advantages of typing, safety, and IDE autocompletion.

Approach: I suspect that the easiest approach to this might be to use the Vite starter to kickstart a new sub-directory package with typescript preconfigured; and then copy the components over one at a time.

Related to Svelte Typescript Port

Would be great if someone from the community wanted to take these on! I can help with any AgnosticUI odd conventions and things like copyStyles, documentation updates, etc., if these changes are needed.

If you run cd site && yarn docs:dev and visit http://localhost:3009/docs/setup.html#angular -- you'll see Angular documentation is half-baked at the moment. This task is to put it in the same format as the other framework instructions and verify / publish.

This is only an issue for custom tab buttons. Discovered while working on the showcase in showcase/src/partials/Frameworks.vue which uses custom buttons and varying SVGs for logos of various frameworks like react, vue, angular, etc.:

This appears to be happening when you use a "faux" button and pass it as a tab button:

This actually makes sense as I'm using SVGs of varying heights (in a controlled icon system we'd be consistent with bounding box sizes so this likely wouldn't even be an issue). But I'm using these logos from various sources and trying to curate them together so to speak so the edge case. becomes a valid scenario I think.

I can one-off fix this with:

button > div {
    height: 100%;
}

But we should investigate if that's something one of the Tabs components should be dealing with on behalf since you probably always want your tab buttons to line up in terms of heights.

I don't think we want to add height: 100%; in the Buttons component as that'd be across the board so to speak. But, investigate if it makes sense for tabs component to do.

We need a proper checklist or markdown table of all the things we need to do for PRs

• Smaller focused preferred
• How to start in CSS package, add to copy styles, build component etc.
• Tests
• Example apps
• Documentation updates
• ?

It would be nice to show the value proposition more clearly via illustration.

Looks like the justified variants should just center on mobile:

We have a decent first component documented in Alerts -- this task is to do the rest.

Cheat sheet

cd site
yarn docs:dev

https://github.com/AgnosticUI/agnosticui/blob/master/site/package.json#L9

When you run the docs yarn docs:dev and visit http://localhost:3009/docs/components/alerts.html#examples it says

Alternatively, have a look at the following “kitchen sink” pens for: React, Vue 3, Angular, Svelte

So we'll need some codepen pens created for those.

Consider using letters and person icon similar to Gmail

When we're doing cards and we want the row to be justify-content: between, we need a way to allow the columns to be fluid maybe <FlexCol fluid>... which results in flex: 1 1 auto; for each card as you shrink and grow. Then maybe at mobile you just stack, but doing it this way you could apply customClasses: "$style.col" on the columns and then do:

.col:not(:last-child) {
  margin-right: 24px;
}

and the gutters would work nicely with the grow/shrink:

Currently, once you put focus on the first tab and tab again you move over to the second tab. However, the way this is supposed to work is you tap into the tabs buttons, and then arrow right and left to navigate within the tabs.

Another tab should either take you into the selected panel (if there's a focusable element ), or whatever is the next focusable on the page.

wai-aria-practices example

note, this is an issue for all the frameworks. If somebody wants to help I'd be happy with just one framework implementation!

Need to have button links in buttons packages

All the framework implementations should be published via NPM packages with proper entry points for CJS or Node, modules aka esm, and umd aka browser.

Rob is working on this in a private local branch

Also, there should be an example subdirectory that shows how to locally link to these packages using npm pack

Maybe soften these a bit. They look awfully dark

Need to test the frameworks in all browsers and ensure the .browserlist is in each framework package and is accurate. Probably need to document this somewhere too.

ChoiceInputs provide a prop for disabling entire choice input:
isDisabled

And another to disable specific options:
disabledOptions: disabledOptions

Tabs should provide the same API

running yarn start:vue storybook I see errors in console for Tabs and Inputs. Also seeing

[DOM] Found 17 elements with non-unique id #myUniqueId: (More info: https://goo.gl/9p2vKq) <input id=​"myUniqueId" type=​"password" placeholder=​"Type password" class=​"src-stories-Input__input--2wokt">​

TabPanel adds .pane class and gives 1rem padding. But this is annoying for consumer who probably wants to be in control of how the gutters look.

Solution:

1. Remove .pane entirely
2. Add css to override

I'm leaning towards 1. because css is an awkward interface requirement just to remove padding.

At the moment the tests run and then hang because they open up in karma. So that can't work with yarn test.

https://adonsio.de/how-to-set-up-github-actions-for-angular-projects/

https://dev.to/danywalls/speed-up-karma-and-jasmine-tests-with-chromeheadless-1dfo

Looks like there's a karma.conf and you can configure karma for CI with something like

npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI

https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai#configure_karma

I bet angular preinstalls chrome headless

• Storybook a11y -- https://storybook.js.org/blog/accessibility-testing-with-storybook/
• IBM Checks

Looks like there's a gutter between the button groups in angular:

Repro: Run svelte storybook and view the Inputs components:

[DOM] Found 17 elements with non-unique id #myUniqueId: (More info: <URL>)                 

We need to be able to have a getting start guide and other pages for showcase. Figure out basic Vue routing to achieve.

Maybe we can riff off of Storybook guide for these to switch between frameworks?

We'd like to convert the React implementation to use typescript since it not being so is likely a blocker for many modern web developers at this point. Typings and IDE hints.

Rob has already started this on a private branch

Angular by definition is already in tight script. Svelte and Vue are "nice to haves" tbd. Would be great if someone from the community wanted to take these on.

At some point we lost our transitions on the React-based choice inputs. It might have happened when we refactored to Typescript but I'm not sure.

It feels like the transition property is somehow not applying possibly because it's a CSS Module (it renders, it's just not transitioning):

https://github.com/AgnosticUI/agnosticui/blob/master/agnostic-react/src/choice-input.css#L181

I tried to git bisect to figure things out but did it rushed so maybe another stab to find root cause will prove fruitful.

One idea is to just add support for a is-checked class directly to the span in agnostic-css; and then update we can simply update the react ChoiceInput.tsx to add that dynamically.

We can probably leave the Vue Angular and Svelte ones as is since they are still animating fine

I've added flexgrid2 to CSS and React packages already. But, we need implementations for Svelte and Vue as well.

• React
• React spec for createProps.js
• CSS
• Svelte
• Vue

Implementation may vary a bit from framework to framework but basically I see this designed as follows:

• We use a data attribute for light and dark respectively that we placed on the body tag
• We have a mapping of CSS custom properties with same names but different values for light and dark
• Those css property mappings are scoped to the corresponding light and dark attribute scheme that's in fact placed on the body tag
• We use local storage to store the last selected mode
• When loading we check first to see if there's a local storage mode preference set. If so, we use that, if not we check the users operating system reserves color check

For some component we offer the isSkinned prop. This is useful if they want to fully customize the styles as they can pass isSkinned: false and only "base styling" will be provided. We should attempt to offer this for all components where possible.

Header mobile doesn't seem to flow gracefully. Need to investigate and verify why content is "spilling out" of header once stacked for mobile.

Convert top hero framework to a tabbed button group. Show quick starts eg steps to set up react, vue, etc.,

But also code examples:

TBD but see the CSS workspace Buttons page which has a POC

Would nice to frame it with a polyglot demo with personas eg designer updates css skin and the dev teams use with different frameworks

Stretch goal would be to literally allow them to design a theme in the browser and export a file with css properties and/or a Figma importable or something

I used crypto to generate uuid in Vue package and it's increasing bundle size. Should switch that to taking as prop or whatever it takes to remove vue uuid aka crypto

I already documented how to incorporate into Webpack build -- need to do Vite too http://localhost:3009/docs/setup.html#vite (cd site && yarn docs:dev)

Vuetensils has a really nice CSS prop override mechanism:
https://vuetensils.stegosource.com/components/Alert.html#custom-classes

I think this is better then the current css one I've been using which is kind of arbitrary in what element that will apply to and probably not flexible enough (maybe?)

This task is to evaluate if this is true. Compare the Vuetensils approach and feasibility. But, also consider maybe we want to go the other direction and NOT be so flexible and increase the surface area of the API. Gotta think this through.

Re-factor to use an X which gives us an app project in /app and a library in /libname

This way we can npm link to test our library from the test app using the usual npm pack'd version of the ng built dist/ files in lib and verify library package is working properly before publishing to NPM.

Storybook

It took me a while to get the common.min.css to show up for the storybook configuration. It looks like in the angular.json, you have to include the global CSS from your "default project" (see issue. I would have preferred to have this in the lib project, but it needed to be in the app project:

            "styles": [
              "libs/ui/styles/common.min.css"
            ],

NX Cheat sheet

Reminder on how I'll likely get this started for the agnostic angular -- I should probably generate a new nx-based angular project and then just port over the files I already have in agnosticui-angular...

Experiment

I did a spike and have something locally at:
~workspace/opensource/nxlib/README.md

Basically, what I did:

npm install -g @nrwl/schematics
npx create-nx-workspace --preset=angular
cd nxlib/
npx nx generate @nrwl/angular:lib shared-button
npx nx generate @nrwl/angular:storybook-configuration shared-button
ng g component button --project=shared-button --export
yarn start

Otherwise, it was basically a matter of adding the SharedButtonModule to the application's app.module.ts and then
using the component in the app.component.html:

<main>
  <nxlib-button></nxlib-button>
</main>

UPDATE

Turns out I should have used --publishable with:

npx nx generate @nrwl/angular:lib shared-button --publishable

So planning to do this and then utilize nx remove:

nx g --dry-run @nrwl/angular:lib ag --publishable --importPath agnosticui-angular

Storybook + Package Scripts

Running npx nx help is pretty useful:

  nx run
  [project][:target][:configuration]        Run a target for a project
  [options, ...]                            (e.g., nx run
                                            myapp:serve:production).

                                            You can also use the infix notation
                                            to run a target:
                                            (e.g., nx serve myapp
                                            --configuration=production)

And these map exactly to how the angular.json structure is. For example, mylib:storybook or myapp:serve:production.

References

https://www.thisdot.co/blog/angular-libraries-with-nx-for-enterprise-apps
https://nx.dev/l/a/getting-started/nx-cli
https://nx.dev/l/a/tutorial/08-create-libs

I wrote a hashnode about this:
https://roblevin.hashnode.dev/adventures-in-creating-an-npm-library-with-nrwlnx

Component Coverage List

Core

We will try to keep “Core” focused on primitives and system components to reduce complexity. For more interesting or exotic components like datepickers, we will use an addon convention.

| Comp | HTML/CSS | Svelte | React | Vue | Angular |
| -------------| ------------- | ------------- | ------------- | ------------- |
| Card | ✅ | ✅ | ✅ | ✅ | ✅ |
| Button | ✅ | ✅ | ✅ | ✅ | ✅ |
| ButtonGroup | ✅ | ✅ | ✅ | ✅ | ✅ |
| Tabs |:white_check_mark: | :white_check_mark: |:white_check_mark: |:white_check_mark: | :white_check_mark: |
| Header |:white_check_mark: |:white_check_mark: |:white_check_mark: | :white_check_mark: |:white_check_mark: |
| Progress | ✅ | ✅ | ✅ | ✅ |✅ |
| Inputs | ✅ | ✅ | ✅ | ✅ |✅ |
| Textarea | ✅ | ✅ | ✅ | ✅ |✅ |
| Checkboxes + Radios | ✅ | ✅ | ✅ | ✅ |✅ |
| Switch aka Toggle | ✅ | ✅ | ✅ | ✅ |✅ |

| On Deck | HTML/CSS | Svelte | React | Vue | Angular |
| -------------| ------------- | ------------- | ------------- | ------------- |
| Accordian | ✅ | ☐ | ☐ |☐ | ☐ |
| Alerts | ✅ | ☐ | ☐ |☐ | ☐ |
| Avatars | ✅ | ☐ | ☐ |☐ |☐ |
| Badge & Pills | ✅ | ☐ | ☐ |☐ | ☐ |
| Breadcrumbs | ✅ | ☐ | ☐ |☐ |☐ |
| Close button | ✅ | ☐ | ☐ |☐ | ☐ |
| Collapse | ✅ | ☐ | ☐ |☐ | ☐ |
| Drawers |☐ | ☐ | ☐ |☐ |☐ |
| File |☐ | ☐ | ☐ |☐ |☐ |
| Dropdowns (and Select too?) | ✅ | ☐ | ☐ |☐ | ☐ |
| Modals (Dialogs) | ✅ | ☐ | ☐ |☐ |☐ |
| Offcanvas |☐ | ☐ | ☐ |☐ |☐ |
| Pagination |☐ | ☐ | ☐ |☐ |☐ |
| Range |☐ | ☐ | ☐ |☐ |☐ |
| Snackbar aka Toasts |☐ | ☐ | ☐ |☐ |☐ |
| Skeleton |☐ | ☐ | ☐ |☐ |☐ |
| Spinner |☐ | ☐ | ☐ |☐ |☐ |
| Stepper |☐ | ☐ | ☐ |☐ |☐ |
| Tables (simple) | ✅ | ☐ | ☐ |☐ |☐ |
| Tooltips |☐ | ☐ | ☐ |☐ |☐ |

Tooltips might need popper. Tables would be dumb presentational. Drawers and Snackbar / Toasts are borderline addon.

Addons

If we do these it will be a separate addon package. Goal is to keep core from getting out of hand.

Update: This is the ultimate component coverage table
https://open-ui.org/research/component-matrix