Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade prettier and stylelint #2146

Merged
merged 21 commits into from
Apr 1, 2022

Conversation

RasmusKjeldgaard
Copy link
Collaborator

@RasmusKjeldgaard RasmusKjeldgaard commented Mar 29, 2022

Which issue does this PR close?

This PR closes #2103

What is the new behavior?

Prettier has been updated to the newest version, and prettier --write has been run on the entire repository.

Furthermore, stylelint is upgraded to match, and has likewise been run on the entire repository. A new config is added in .stylelintrc for this newer version, based on what is recommended in the stylelint docs for scss: https://stylelint.io/user-guide/get-started/#linting-everything-else

Does this PR introduce a breaking change?

  • Yes
  • No

Are there any additional context?

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Reminders

  • Make sure you have implemented tests following the guidelines in: "The good: Test".
  • Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

  • Do a self-review.
  • Request that the changes are code-reviewed
  • Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be automatically merged to stable via automerge.

@github-actions github-actions bot temporarily deployed to pr-2103-upgrade-prettier March 29, 2022 14:31 Inactive
@jkaltoft jkaltoft self-requested a review March 29, 2022 15:53
.prettierignore Outdated Show resolved Hide resolved
.stylelintignore Outdated Show resolved Hide resolved
.stylelintrc Outdated Show resolved Hide resolved
webpack.polyfills.config.js Show resolved Hide resolved
libs/core/src/scss/_global-styles.scss Show resolved Hide resolved
@jkaltoft
Copy link
Collaborator

More review comments coming up 🙂

Copy link
Collaborator

@jkaltoft jkaltoft left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

giphub

Copy link
Contributor

@MadsBuchmann MadsBuchmann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Started reviewing - but stopping my review again as i found out that @jkaltoft is on it B)

Copy link
Collaborator

@jkaltoft jkaltoft left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this was the last batch of comments - at least for now 🙂

@jkaltoft
Copy link
Collaborator

May I suggest that we postpone decisions on which stylelint rules to use in the config? We could spend some time getting used to the current rules and the have a meeting and decide later if we want to change anything.

@github-actions github-actions bot temporarily deployed to pr-2103-upgrade-prettier March 31, 2022 13:10 Inactive
Copy link
Collaborator

@jkaltoft jkaltoft left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

giphub

@RasmusKjeldgaard RasmusKjeldgaard merged commit 6ebc263 into main Apr 1, 2022
@RasmusKjeldgaard RasmusKjeldgaard deleted the housekeeping/2103-upgrade-prettier branch April 1, 2022 08:13
Comment on lines +65 to +66
--header-height: 0;
--footer-height: 0;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably needs to be reverted, just to be sure.

jkaltoft pushed a commit that referenced this pull request Apr 22, 2022
* ⬆️  Upgrade prettier

* 💄 Lint and prettify cookbook styles

* 🎨  Lint and prettify cookbook ts files

* 🎨  Lint and prettify cookbook templates

* 🔧  Update prettier and stylelint config

* 🎨  Lint and prettify misc project files

* 🎨  Lint and prettify designsystem styles

* 🤡  Use same line endings across mocks

* 🎨  Lint and prettify designsystem spec files

* 🎨  Lint and prettify designsystem ts files

* 💄 Rename css-class in template

* ✅  Fix tab test according to changed css

* 🙈 Update ignore files with newline at EOF

* ♻️  Increase readability of span

* 🔧  Prettify .stylelintrc (whoa, meta!)

* ➖ Remove unused depencency

* 💄 Replace duplicate ::after with ::before for print

* ⏪  Revert unintentional prettier change

* 🔥 Remove vendor prefix

This is handled by Angular via auto-prefixer.

* ⏪ Revert unintentional change to line clamp styles
RasmusKjeldgaard added a commit that referenced this pull request Apr 22, 2022
* Calculate UTC offset based on correct date (#2115)

* 🚧  UTC time experiment

* ⚗️ Do not use subtractTimezoneOffset()

* 🐛 Remove unneccessary timezone offset

* 🐛 Add back offset to preserve existing functionality

It seems that the original intent was to simply format a local time
as its UTC equivalent, and not adjust it to any specific UTC zone.

This is done by consumers, so something like 02:00:00 GMT+0200
becomes 00:00:00 GMT on their end.

* ⏪  Revert changes to showcase component

Co-authored-by: Jesper Kaltoft <[email protected]>

* Upgrade prettier and stylelint (#2146)

* ⬆️  Upgrade prettier

* 💄 Lint and prettify cookbook styles

* 🎨  Lint and prettify cookbook ts files

* 🎨  Lint and prettify cookbook templates

* 🔧  Update prettier and stylelint config

* 🎨  Lint and prettify misc project files

* 🎨  Lint and prettify designsystem styles

* 🤡  Use same line endings across mocks

* 🎨  Lint and prettify designsystem spec files

* 🎨  Lint and prettify designsystem ts files

* 💄 Rename css-class in template

* ✅  Fix tab test according to changed css

* 🙈 Update ignore files with newline at EOF

* ♻️  Increase readability of span

* 🔧  Prettify .stylelintrc (whoa, meta!)

* ➖ Remove unused depencency

* 💄 Replace duplicate ::after with ::before for print

* ⏪  Revert unintentional prettier change

* 🔥 Remove vendor prefix

This is handled by Angular via auto-prefixer.

* ⏪ Revert unintentional change to line clamp styles

* Allow non-enum Input in components: template literal type solution (#2099)

* Enable non-enum input

* Update button.component.ts

* Use values when enum is mapping

* allow use of string values for enum input props

* 🏷️ Allow non-enum input types

* 🏷️ Update mocks to use template literal types

Co-authored-by: Morten Bjerg Gregersen <[email protected]>

* Add unit back on item safe area custom property (#2160)

* 💄 Add unit back on item safe area custom property

* 💄 Make stylelint ignore 0px for custom properties

* 💡 Remove stylelint ignores

* Set fallback value for --padding-top/bottom on item (#2118)

* 🐛  Set padding if custom css prop is not set

* 💄 Default to initial value

* 🐛 Revert to specific fallback value for clarity

* 🍱 Replace more icon file with the one from sketch (#2176)

* Allow chart labels to be provided together datasets (#2157)

* ♻️ Redo label logic

* 🐛 Have labels be used before dataset strings

* ✅ Add tests for new label logic

* ♻️ Combine datasetsHaveLabels & labelsToApply

* 🎨 Remove unused import, prettier changes

* 🏷️ Introduce ChartLabels type for better readability

* ♻️ Refactor for better readability

* ♻️ Attempt to improve readability of getLabelsToApply

* 🤡 Use 'ChartLabel' type in mock

* 🏷️ Add type to 'indexAxis' argument

* 🚨 Fix line endings

* Flag: New danger color and heavier font weight (#2156)

* 💄 Introduce color variables (tokens)

* 💄 Override danger color in flag component

* 💄 Use font-weight 500 for text in flag component

* ✅ Add font-weight test

* ✅ Change test for flag danger theme

* Add back CSS Custom Property px unit (#2183)

* ⏪  Revert removal of px unit for custom props

The CSS Custom Properties that had px before, but was removed in
6ebc263 now have the unit back, as it caused some issues for components
where the prop is used in calc() etc.

* ✅  Add px value to test

* Release version 5.3

Co-authored-by: Jesper Kaltoft <[email protected]>
Co-authored-by: Mads Buchmann Frederiksen <[email protected]>
Co-authored-by: Morten Bjerg Gregersen <[email protected]>
jkaltoft added a commit that referenced this pull request Apr 26, 2022
* Add "backgroundImageUrl" and custom css properties for controlling background of the card component (#2047)

* ✨ Make it possible to set & control card bg image

* ✨ Add 'backgroundImageUrl' input property to card

* 📝 Document background-image related API

* 📝 Reword table text & remove type column

* 📝 Add card with background image examples

* 🚚 Move all card examples to a shared module

* ✅ Add tests for backgroundImageUrl

* 🖊️ Uppercase CSS in documentation

Co-authored-by: Jesper Kaltoft Vind <[email protected]>

* 📝 Expand documentation on card background image

I've attempted expanding the documentation such that it explains the pros and cons of each method.

* 📝 Modify css background example to use media queries

Co-authored-by: Jesper Kaltoft Vind <[email protected]>

* 🤡 Add missing input properties to mocks (#2084)

* Make it possible to use time scale as a custom option for chart (#2082)

* Reintroduce TimeScale for ChartJS

With stock charts we need Time Cartesian Axis for
comparison of securities.

When using time as X scale type we need a way providing
zero labels (an empty array), since these are autogenerated
by TimeScale. In chart-js.service the
method labelsToApply needs a way of returning []

* ✨ Allow an empty array to disable labels

* 🔥 Remove log statements

* ✨ Make it possible to bypass default labels for stock

Co-authored-by: Mads Buchmann Frederiksen <[email protected]>

* 📝 Remove big Kirby v1 notice (#2086)

* ✨ Allow usePopover to be turned on in calendar (#2102)

* 📝 Fix dead links to annotation plugin docs (#2110)

* 🐛  Push scaling of header to next cycle (#2111)

With setTimeout we can avoid ResizeObserver loop exceeded
warnings. These are hidden by browsers, but can be picked up
by frontend error logging services.

It most likely happens because the ResizeObserver observes repeated
size changes before the original scaleHeader callback has finished.

* ⬆️ Bump follow-redirects from 1.14.7 to 1.14.8 (#2049)

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.7 to 1.14.8.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](follow-redirects/follow-redirects@v1.14.7...v1.14.8)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* ⬆️ Bump prismjs from 1.25.0 to 1.27.0 (#2070)

Bumps [prismjs](https://github.com/PrismJS/prism) from 1.25.0 to 1.27.0.
- [Release notes](https://github.com/PrismJS/prism/releases)
- [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md)
- [Commits](PrismJS/prism@v1.25.0...v1.27.0)

---
updated-dependencies:
- dependency-name: prismjs
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* ⬆️ Bump url-parse from 1.5.3 to 1.5.10 (#2071)

Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.5.3 to 1.5.10.
- [Release notes](https://github.com/unshiftio/url-parse/releases)
- [Commits](unshiftio/url-parse@1.5.3...1.5.10)

---
updated-dependencies:
- dependency-name: url-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* 🔖Bumping version to 5.2.0 (designsystem)

* Remove deprecated chart components & highcharts dependencies (#2069)

* 🔥 Remove chart-deprecated components folder

* 🔥 Remove ChartDeprecated mocks

* 🔥 Remove deprecated chart examples

* 🔥 Remove deprecated chart showcase

* 🔥 Remove deprecated stock chart component

* 🔥 Remove deprecated stock chart examples

* 🔥 Remove deprecated stock chart showcase

* ➖ Remove dependency to highcharts

* 📌 Generate new lock file

* 📝 Remove highcharts license notice

* Add subtitle to page-title (#2030)

* Added subtitle concept to page component

* Remove realtion-bank example

* Update libs/designsystem/src/lib/components/page/page.component.spec.ts

Co-authored-by: Mads Buchmann Frederiksen <[email protected]>

* Update libs/designsystem/src/lib/components/page/page.component.spec.ts

Co-authored-by: Mads Buchmann Frederiksen <[email protected]>

* Update libs/designsystem/src/lib/components/page/page.component.spec.ts

Co-authored-by: Mads Buchmann Frederiksen <[email protected]>

* Update libs/designsystem/src/lib/components/page/page.component.spec.ts

Co-authored-by: Mads Buchmann Frederiksen <[email protected]>

* Update libs/designsystem/src/lib/components/page/page.component.spec.ts

Co-authored-by: Mads Buchmann Frederiksen <[email protected]>

* Update apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.ts

Co-authored-by: Mads Buchmann Frederiksen <[email protected]>

* Update apps/cookbook/src/app/examples/page-example/advanced/page-advanced-example.component.ts

Co-authored-by: Mads Buchmann Frederiksen <[email protected]>

* Correct Inpection Findings

Co-authored-by: Michael Troelsen <[email protected]>
Co-authored-by: Mads Buchmann Frederiksen <[email protected]>

* 🐛 Reintroduce accidentally removed module import (#2126)

* Revert "Remove deprecated chart components & highcharts dependencies (#2069)" (#2127)

This reverts commit 6188ee5.

* Update Angular to v12 (#2140)

* ⬆️ Angular 12 upgrade

* 🔨  Use default value for aot comp in cookbook

* ⬆️  Upgrade stencil to match support jest v27

* 🚨 Enable Ivy compilation

View Engine Compilation is going to be removed in Angular 13.
By enabling Ivy, consumers will not have to compile our designsystem with ngcc.
See more here: https://blog.angular.io/upcoming-improvements-to-angular-library-distribution-76c02f782aa4.

The Ivy engine now catches errors where a module or directive is exposed
through KirbyModule, without at the same time being exported by the top
level index.ts barrel file. These missing exports are now added.

* ✅  Use toHaveComputedStyles to get custom prop

* 🚨 Add missing mocks to top level entry point

* 👷 Change exports to match generated mocks

* 👷 Move badge export

We no longer needs to compile with NGCC as we have enabled Ivy
compilation. Hooray!

* 💚 Add missing mock export

* 🔥 Remove TODO. Replaced by issue #2152

* Calculate UTC offset based on correct date (#2115)

* 🚧  UTC time experiment

* ⚗️ Do not use subtractTimezoneOffset()

* 🐛 Remove unneccessary timezone offset

* 🐛 Add back offset to preserve existing functionality

It seems that the original intent was to simply format a local time
as its UTC equivalent, and not adjust it to any specific UTC zone.

This is done by consumers, so something like 02:00:00 GMT+0200
becomes 00:00:00 GMT on their end.

* ⏪  Revert changes to showcase component

Co-authored-by: Jesper Kaltoft <[email protected]>

* Upgrade prettier and stylelint (#2146)

* ⬆️  Upgrade prettier

* 💄 Lint and prettify cookbook styles

* 🎨  Lint and prettify cookbook ts files

* 🎨  Lint and prettify cookbook templates

* 🔧  Update prettier and stylelint config

* 🎨  Lint and prettify misc project files

* 🎨  Lint and prettify designsystem styles

* 🤡  Use same line endings across mocks

* 🎨  Lint and prettify designsystem spec files

* 🎨  Lint and prettify designsystem ts files

* 💄 Rename css-class in template

* ✅  Fix tab test according to changed css

* 🙈 Update ignore files with newline at EOF

* ♻️  Increase readability of span

* 🔧  Prettify .stylelintrc (whoa, meta!)

* ➖ Remove unused depencency

* 💄 Replace duplicate ::after with ::before for print

* ⏪  Revert unintentional prettier change

* 🔥 Remove vendor prefix

This is handled by Angular via auto-prefixer.

* ⏪ Revert unintentional change to line clamp styles

* Allow non-enum Input in components: template literal type solution (#2099)

* Enable non-enum input

* Update button.component.ts

* Use values when enum is mapping

* allow use of string values for enum input props

* 🏷️ Allow non-enum input types

* 🏷️ Update mocks to use template literal types

Co-authored-by: Morten Bjerg Gregersen <[email protected]>

* Add unit back on item safe area custom property (#2160)

* 💄 Add unit back on item safe area custom property

* 💄 Make stylelint ignore 0px for custom properties

* 💡 Remove stylelint ignores

* Add badge mock and update line-endings for page mock (#2170)

* 🤡  Run prettier on page mock

* 🤡  Run mock gen. script so mocks are up to date

* Remove option to inject IconSettings via IconRegistryService constructor (#2171)

* 🔥 Remove unused icon config

These custom icons are registered in the module (examples.module.ts)
and this is most likely leftover functionality from before that.

* 🔥 Remove option for injecting icons via ctor

* 🔥 Remove injected IconSettings

* Remove deprecated okBtnText and cancelBtnText from AlertConfig (#2175)

* ♻️ Use correct config properties in examples

* ♻️  Rename and use correct properties in alert

* 🔥 Remove deprecated config properties

* ♻️  Simplify cancelBtn config

* ♻️ Rename getter for okBtn to match property name

* 🔥 Remove deprecated dim property on ModalConfig (#2177)

* 🔥 Remove deprecated 'dataLabels' property (#2178)

* Remove deprecated toast danger MessageType (#2181)

* 🔥 Remove danger-specific messageType tests

* 🔥 Remover danger messageType from Toast

* 🔥 Remove use of danger type for toast in cookbook

* Remove deprecated list directives (#2184)

* 🔥 Remove deprecated list directives

* 🔥 Remove outdated section in readme

* OnPush change detection for simplest components (#2169)

* ⚡️ Use OnPush CD for comps with immutable inputs

* ⚡️ Add strategy to additional dumb components

* ✅  Migrate tests to use spectator

Directly setting the input on the component did not work with OnPush
change detection, so spectator is used in alert test now, while we
were at it. This way we can interact with the component via setInput().

* ✅  Remove unused provider from alert

* ⏪  Revert OnPush for tabs

State can be changed internally because 'tabBarBottomHidden' is public,
but not an input decorator - while still being used in the template.

* ✅  Clean up alert test

* ✅  Migrate toggle tests to use spectator

Directly setting the input on the component did not work with OnPush
change detection, so spectator is used in toggle test now, while we
were at it. This way we can interact with the component via setInput().

* ⏪  Revert to default change detection for card

* ⏪  Remove default strategy - it is the default

* ⏪ Remove unused import

Co-authored-by: Mads Buchmann Frederiksen <[email protected]>
Co-authored-by: Troels Strand <[email protected]>
Co-authored-by: RasmusKjeldgaard <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Michael T <[email protected]>
Co-authored-by: Michael Troelsen <[email protected]>
Co-authored-by: Morten Bjerg Gregersen <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Housekeeping] Upgrade Prettier
3 participants