db-ui/mono

DB UX Design System Monorepo - Provides Design Tokens and components for Web UIs

mono's Issues

feat: provide individual components for angular as `standalone` components

With the introduction of Standalone Components with Angular 14, components can be imported and tree-shaked individually without the need of a wrapping module such as DBUIElementsModule.

It would be great if all components can be marked as standalone and imported individually.

compare to db-ui/elements#605

Provide current and LTS showcases for React and Angular

Especially to migrate from Angular 13, but to provide version Angular 14 and 15 showcases we'll introduce current and lts showcase folders at least for Angular and React, as both Svelte and Vue don't seem have a lower major LTS version (any more) at the moment.

Update readmes and descriptions for deployed packages

New linters/formatters

We should add a linter or formatter for shell scripts e.g. https://github.com/un-ts/prettier.

https://github.com/kucherenko/jscpd <- is also a good option

Integrate postCSS Plugin CSSNANO

          We should definitely integrate something like that ([CSSNANO](https://cssnano.co/) looks promising, I've tested it the other day, it could even merge some declarations that we're currently spreading across some files for better separation), but this should most likely only squeeze out the last bytes – if we do have a general problem within our imports of our modular SCSS files, our users who might do an individual SCSS consumption and build would either still have this problem or additionally even also setup postcss on their end which might be acceptable, but still strange if we could instead analyze and fix our file imports instead.

Originally posted by @mfranzke in #228 (comment)

Add e2e testing playwright

We'd like to evaluate whether we stay with cypress or move to playwright.

Theming / extension possibility

We most likely would need to differentiate in between regular and enterprise themes from the very beginning (like e.g. for a different general tonality). We do have this within e.g. DB UI Core and Base at the moment and need to even also enable it within this repo.

Card: provide `button` or `a` tag within the `card` component

          We should either use a `button` or `a` HTML tag within the `card` component to enable keyboard and screenreader compatibility.

Originally posted by @mfranzke in #211 (comment)

Do we need to have further issue templates?

see also #98

Examples:
https://github.com/parcel-bundler/parcel/issues/new/choose

This might be especially beneficial as it should be possible to link to those templates directly on links when we have a specific scope in mind like e.g. https://github.com/db-ui/mono/blob/main/output/angular/README.md?plain=1#L16

https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

Dependabot: Differentiating Major framework release by showcase folder

We're differentiating in between the major framework releases within our showcase folders and that for need to ensure that those aren't being updated as major releases by dependabot.

Eval: "Breakpoints" in px or rem

    This is somehow more of a conceptual question, because the main difference is regarding whether those should change in case that only the text-size gets increased by browser settings vs. the zoom functionality is actually being used (e.g. in Firefox: "Zoom text only").

Originally posted by @mfranzke in #20 (comment)

How to handle focus outline offset

Currently we have focus outline offset -1, this leads to following behaviour when used without margin from containers:

CSS declaration: Is this still in use somewhere ?

    Is this still in use somewhere ?

Originally posted by @mfranzke in #10 (comment)

Optimize CSS output out of SCSS build

Our CSS file has doubled in size, so it seems like we're having a problem with code redundancy (which you could even also see in WebDeveloper tools).

decide to use either npm i or npm ci during CI/CD

Within other installations we were using npm ci, and now only npm i within our CI/CD scripts. Let's find out what's best and document it. Most likely we would need npm ci for comparable builds (as only the lock file guarantees consistent versions).

Ignore major dependency updates for JS frameworks

Specifically for the JS frameworks (Angular, Vue, React) that we're providing showcases for, it's always about the current and the LTS version; in these cases we don't want to be flooded by PRs that include major version updates, that would also increase the major version for the LTS folders.

The easiest might be to deactivate major version updates specifically for these frameworks dependencies in total, as we would be aware and need to a lot of more work than just a PR to provide a new version, both in our output targets, as well as the showcase folders.

https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file#specifying-dependencies-and-versions-to-ignore

This would be a followup to the existing entries: https://github.com/db-ui/mono/blob/main/.github/dependabot.yml#L21

test reactiveForms with DBInput

Currently we only tested template driven forms in angular.
Further tests should include the following:

• [] validation in template driven forms
• [] reactive forms with formGroups and formControls (defaultValue, validation, two.way-binding)
• [] reactive forms validation

entre: create README and Getting started

We need to introduce the system to our users and provide guidance on how to contribute or how to use examples / try out the components themselves. This even also includes working examples.

A nice to have would be to even also provide boilerplate creation.

Click logging: understandable text

          let's rename this to something more clearly like you did with https://github.com/db-ui/mono/pull/250/files#diff-ad7e7a997beb8ef9a515ddb702af1aeb855c01a6f33dd6b43f6a1b045f1663c1R21 (or it's a leftover in https://github.com/db-ui/mono/pull/250/files#diff-1a9b5ad81b8ee2e24995352d594f2bb9a5ee1aee41ece3221071f00b5fd3d8d7R11)

Originally posted by @mfranzke in #250 (comment)

Textarea

As a followup for db-ui/core#223 we even also need to ensure that we collect general styles to the source/_patterns/01-elements/_form-elements.scss again.

Provide solution for using v-model with generated components

Due to an issue with Mitosis (BuilderIO/mitosis#833) we're currently not able to use custom emits for vue components. Therefore we have to provide a solution for to allow access of component values (e.g. input component)

• e.g. via overwrites
• or custom plugin

Update Angular 13 to 14

We should evaluate whether we still would need to provide a showcase base on Angular 13, as Angular 15 is even already out now and 13 only in LTS mode (same as version 14): https://angular.io/guide/releases#actively-supported-versions

We could get some insight into the necessary updates via https://update.angular.io/?v=13.0-14.0

Additionally we should think about providing more than one framework version, compare to db-ui/elements#1

see also db-ui/elements#691

Add start script

Add a start script to the root of the monorepo with the option to select a showcase.

Candidate for terminal selection of one of them:
https://github.com/SBoudrias/Inquirer.js

Discuss input error handling

https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid to the rescue.

Reevaluate using renovate instead of dependabot

As dependabot doesn‘t proceed with their grouping PRs feature at the moment, we should consider to use renovate (at least for the moment). there‘s some progress now regarding grouped updates: dependabot/dependabot-core#1190 (comment)

Besides that, it seems to have some further interesting defaults, that dependabot doesn't provide at all:

• https://docs.renovatebot.com/configuration-options/#assignautomerge: dependabot doesn't assign a reviewer for auto-mergable PRs (patch updates), which would decrease the notifications.
  • creating a PR at all instead of just merging that branch get defined as well: https://www.augmentedmind.de/2021/07/25/renovate-bot-cheat-sheet/#6-meta-avoid-spam-via-automatic-merging

Instead of previous evaluations, it seems that renovate additionally provides a good stack of default settings.

ADRs for architectural decisions

We'll introduce partly a whole new techstack to this monorepo. We therefore need to document our decisions e.g. via ADRs.

e.g. dependabot:

• provided by GitHub directly
• easier to maintain and with meaningful defaults than e.g. renovate

Add angular-example like react & vue

Evaluate Nx as build system for this repo

https://nx.dev/

Auto-install npm dependencies when switching branches

https://ivantanev.com/safer-coding-with-husky-hooks/ -> "3. Auto-install npm dependencies when switching branches"
or https://www.npmjs.com/package/git-pull-run

PR merged even though that linting failed

The PRs #151 (dependabot) and https://github.com/db-ui/mono/actions/runs/3987330539/jobs/6837019345 have been merged (automatically) even though that the linting step failed.

Update showcases (react,vue,wc) to work with cicd (build & deploy)

• react
• vue
• webcomponents

Evaluate to use Custom Elements Built-In Extends

https://codepen.io/WebReflection/pen/bGvYdVw

files usage in question

    @nmerget where is this file being in use? Could you please add a comment that documents / includes some information?

Originally posted by @mfranzke in #10 (comment)

divider: evaluate to use hr HTML tag

    If I understand this component correctly, a [`hr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr) tag might be a semantically better fit than a `div`.

Originally posted by @mfranzke in #10 (comment)

followUp input component: do we need a min-width?

• esp. for expressive input fields we should discuss a min width or max text length for label to prevent text-overflow
• awaiting decision from design guidelines
• tbd. e.g. display tooltips for long labels?

fix: height for all child elements in main

This line needs refactoring

mono/packages/components/src/components/page/page.scss

Line 54 in bac8dc2

& > * {

fyi @nmerget

Add rudimentary documentation

How to start, etc.

Pre-commit: integrate package.json sorting

https://github.com/un-ts/prettier
https://github.com/keithamus/sort-package-json

adapt CI/CD from Base/Core/Elements

package.json: Incorrect main and module values

The package.json defines ./dist/index.js both in its main and module fields, whereas this file doesn't exist: https://cdn.jsdelivr.net/npm/@db-ui/[email protected]/dist/

Evaluate an auto update branch solution

Candidates:

• https://github.com/tibdex/auto-update
• https://github.com/marketplace/actions/autoupdate-branch
• https://github.com/marketplace/actions/auto-update
• https://github.com/marketplace/actions/rebase-pulls

Background:
We don't want to manually update (even not per "Auto update" button) the PRs, especially the ones that are set to auto-merge.

Documenting decisions on deactivating XO rules

Most of the currently deactivated eslint rules are enabled or introduced by XO for good reasons that are described in the related documentation pages. If we'd like to deactivate those, we should do this for good reasons that we should document somewhere (probably an ADR).

Test viability of testing CI locally with ACT

Check whether we can use ACT to run GitHub Actions locally.

Ideally we would be able to run all CI/CD steps locally, so one does not need to push into a remote branch to know whether the CI status would still be green.

Add npx templates for getting-started examples

https://petermekhaeil.com/how-to-build-an-npx-starter-template/

Document version field

Document why we could only have incorrect versions within our version field in the package.json files:

• packages/components/package.json
• packages/foundations/package.json
• package.json

Power Platform Apps, icons & fonts are not loaded

Maybe a solution:

https://powerusers.microsoft.com/t5/Power-Apps-Community-Blog/Using-SASS-on-your-PCF-Project/bc-p/1793239

https://powernimbus.com/2019/04/using-custom-fonts-in-powerapps/

fix: icons for input field

• icons for data-variants should contain filled icons
• invalid input does not include the error icon when input field is aria-invalid

Finish components for alpha

• brand
• link
• input
• button (missing attributes like "type")
• card

Add new showcase to wrap all showcases for gh-pages

Input: Evaluate to prevent an additional "state" icon tag

    Let's try to avoid this tag and use the existing wrapping one within another evaluation.

Originally posted by @mfranzke in db-ui/core#198 (comment)