From 39edede9cf85e4d33f3b885574c0abc6d7dde419 Mon Sep 17 00:00:00 2001 From: Mathis Hofer Date: Mon, 18 Dec 2023 13:26:05 +0100 Subject: [PATCH] Use prettier-plugin-sort-imports --- .prettierrc.js | 33 +++++++++++++++++++ package-lock.json | 1 + package.json | 2 +- src/components/Backdrop.ts | 2 +- src/components/Banner.ts | 2 +- src/components/Container.ts | 2 +- src/components/Footer.ts | 2 +- src/components/FooterLink.ts | 2 +- src/components/Hero.ts | 2 +- src/components/Icon.ts | 2 +- src/components/Menu.ts | 2 +- src/components/MenuAction.ts | 2 +- src/components/MenuDropdown.ts | 4 +-- src/components/MenuDropdownItem.ts | 2 +- src/components/Nav.ts | 2 +- src/components/NavItem.ts | 2 +- src/components/Subnav.ts | 2 +- src/components/Topbar.ts | 2 +- src/puzzle-shell.ts | 3 +- src/stories/components/Banner.stories.ts | 4 +-- src/stories/components/Topbar.stories.ts | 4 +-- .../examples/ContentAppWithSearch.stories.ts | 2 +- src/stories/examples/WelcomePage.stories.ts | 2 +- src/utils/theme.ts | 10 +++--- 24 files changed, 64 insertions(+), 29 deletions(-) create mode 100644 .prettierrc.js diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..4c57f5c --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,33 @@ +const config = { + /** + * Enable plugin for automatically sorting of imports + */ + plugins: ["@trivago/prettier-plugin-sort-imports"], + importOrderParserPlugins: ["typescript", "decorators-legacy"], + + /** + * Custom sorting of imports, first lit stuff, then other third + * party libs, then own modules + */ + importOrder: [ + "^lit$", + "^lit/.*$", + "^@lit/.*$", + "", + "^[./]", + ], + + /** + * Whether to separate sorting groups (as defined above) with + * newline + */ + // importOrderSeparation: true, + + /** + * Whether to sort the specifiers on the left hand side of the + * import statement + */ + importOrderSortSpecifiers: true, +}; + +export default config; diff --git a/package-lock.json b/package-lock.json index bbf11b6..37db521 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@storybook/blocks": "^7.6.5", "@storybook/web-components": "^7.6.5", "@storybook/web-components-vite": "^7.6.5", + "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@typescript-eslint/eslint-plugin": "^6.14.0", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", diff --git a/package.json b/package.json index 8f34ec2..9161126 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "@storybook/blocks": "^7.6.5", "@storybook/web-components": "^7.6.5", "@storybook/web-components-vite": "^7.6.5", + "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@typescript-eslint/eslint-plugin": "^6.14.0", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", @@ -79,7 +80,6 @@ "plugin:prettier/recommended" ] }, - "prettier": {}, "lint-staged": { "**/*.{ts,js}": [ "eslint --fix" diff --git a/src/components/Backdrop.ts b/src/components/Backdrop.ts index d569bd3..7fa9cae 100644 --- a/src/components/Backdrop.ts +++ b/src/components/Backdrop.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { theme } from "../utils/theme"; diff --git a/src/components/Banner.ts b/src/components/Banner.ts index a71f372..1afc251 100644 --- a/src/components/Banner.ts +++ b/src/components/Banner.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { property } from "lit/decorators/property.js"; import { classMap } from "lit/directives/class-map.js"; diff --git a/src/components/Container.ts b/src/components/Container.ts index 60af807..a78536c 100644 --- a/src/components/Container.ts +++ b/src/components/Container.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { theme } from "../utils/theme"; diff --git a/src/components/Footer.ts b/src/components/Footer.ts index f9595fc..f022a10 100644 --- a/src/components/Footer.ts +++ b/src/components/Footer.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { theme } from "../utils/theme"; diff --git a/src/components/FooterLink.ts b/src/components/FooterLink.ts index e53999a..ffc1635 100644 --- a/src/components/FooterLink.ts +++ b/src/components/FooterLink.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { property } from "lit/decorators/property.js"; import { theme } from "../utils/theme"; diff --git a/src/components/Hero.ts b/src/components/Hero.ts index b863d97..eab170d 100644 --- a/src/components/Hero.ts +++ b/src/components/Hero.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { theme } from "../utils/theme"; diff --git a/src/components/Icon.ts b/src/components/Icon.ts index 1d56411..3fbf9e3 100644 --- a/src/components/Icon.ts +++ b/src/components/Icon.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css, TemplateResult } from "lit"; +import { LitElement, TemplateResult, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { property } from "lit/decorators/property.js"; import { theme } from "../utils/theme"; diff --git a/src/components/Menu.ts b/src/components/Menu.ts index 5d36c5a..6d7920b 100644 --- a/src/components/Menu.ts +++ b/src/components/Menu.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { property } from "lit/decorators/property.js"; import { classMap } from "lit/directives/class-map.js"; diff --git a/src/components/MenuAction.ts b/src/components/MenuAction.ts index e530d95..b7b9094 100644 --- a/src/components/MenuAction.ts +++ b/src/components/MenuAction.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { property } from "lit/decorators/property.js"; import { theme } from "../utils/theme"; diff --git a/src/components/MenuDropdown.ts b/src/components/MenuDropdown.ts index e4442bf..17ed781 100644 --- a/src/components/MenuDropdown.ts +++ b/src/components/MenuDropdown.ts @@ -1,10 +1,10 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { property } from "lit/decorators/property.js"; import { classMap } from "lit/directives/class-map.js"; -import { theme } from "../utils/theme"; import { isNodeOrChild } from "../utils/dom"; import { navigateMenuWithKeyboard } from "../utils/menu"; +import { theme } from "../utils/theme"; import "./Icon"; /** diff --git a/src/components/MenuDropdownItem.ts b/src/components/MenuDropdownItem.ts index f376559..0b29cd4 100644 --- a/src/components/MenuDropdownItem.ts +++ b/src/components/MenuDropdownItem.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { property } from "lit/decorators/property.js"; import { theme } from "../utils/theme"; diff --git a/src/components/Nav.ts b/src/components/Nav.ts index b89aa26..19d02d7 100644 --- a/src/components/Nav.ts +++ b/src/components/Nav.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { theme } from "../utils/theme"; diff --git a/src/components/NavItem.ts b/src/components/NavItem.ts index 0589d91..c61edd3 100644 --- a/src/components/NavItem.ts +++ b/src/components/NavItem.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { property } from "lit/decorators/property.js"; import { classMap } from "lit/directives/class-map.js"; diff --git a/src/components/Subnav.ts b/src/components/Subnav.ts index 9bf6f63..fce5cae 100644 --- a/src/components/Subnav.ts +++ b/src/components/Subnav.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { theme } from "../utils/theme"; diff --git a/src/components/Topbar.ts b/src/components/Topbar.ts index b427894..34e6b4e 100644 --- a/src/components/Topbar.ts +++ b/src/components/Topbar.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators/custom-element.js"; import { property } from "lit/decorators/property.js"; import { theme } from "../utils/theme"; diff --git a/src/puzzle-shell.ts b/src/puzzle-shell.ts index 7885d9e..e73edbe 100644 --- a/src/puzzle-shell.ts +++ b/src/puzzle-shell.ts @@ -1,3 +1,5 @@ +import "./utils/theme"; + export { Backdrop } from "./components/Backdrop"; export { Banner } from "./components/Banner"; export { Container } from "./components/Container"; @@ -14,4 +16,3 @@ export { Nav } from "./components/Nav"; export { NavItem } from "./components/NavItem"; export { Subnav } from "./components/Subnav"; export { Topbar } from "./components/Topbar"; -import "./utils/theme"; diff --git a/src/stories/components/Banner.stories.ts b/src/stories/components/Banner.stories.ts index 03ec8bd..fb7ed12 100644 --- a/src/stories/components/Banner.stories.ts +++ b/src/stories/components/Banner.stories.ts @@ -1,11 +1,11 @@ import { html } from "lit"; import "../../components/Banner"; import "../../components/Icon"; -import "../../components/Topbar"; import "../../components/Menu"; import "../../components/Nav"; -import "../../components/Subnav"; import "../../components/NavItem"; +import "../../components/Subnav"; +import "../../components/Topbar"; import { searchStyles } from "./search"; export default { diff --git a/src/stories/components/Topbar.stories.ts b/src/stories/components/Topbar.stories.ts index f2c2724..6a3f59e 100644 --- a/src/stories/components/Topbar.stories.ts +++ b/src/stories/components/Topbar.stories.ts @@ -1,9 +1,9 @@ import { html } from "lit"; -import "../../components/Topbar"; +import "../../components/Icon"; import "../../components/Menu"; import "../../components/MenuAction"; import "../../components/MenuDropdown"; -import "../../components/Icon"; +import "../../components/Topbar"; export default { title: "Puzzle Shell/Components/Topbar", diff --git a/src/stories/examples/ContentAppWithSearch.stories.ts b/src/stories/examples/ContentAppWithSearch.stories.ts index 569c6ba..284dba6 100644 --- a/src/stories/examples/ContentAppWithSearch.stories.ts +++ b/src/stories/examples/ContentAppWithSearch.stories.ts @@ -1,7 +1,7 @@ import { html } from "lit"; import "../../puzzle-shell"; -import { searchStyles } from "../components/search"; import { theme } from "../../utils/theme"; +import { searchStyles } from "../components/search"; export default { title: "Puzzle Shell/Examples/Content app with search", diff --git a/src/stories/examples/WelcomePage.stories.ts b/src/stories/examples/WelcomePage.stories.ts index ccd1494..6dcf18b 100644 --- a/src/stories/examples/WelcomePage.stories.ts +++ b/src/stories/examples/WelcomePage.stories.ts @@ -1,7 +1,7 @@ import { html } from "lit"; import "../../puzzle-shell"; -import { searchStyles } from "../components/search"; import { theme } from "../../utils/theme"; +import { searchStyles } from "../components/search"; export default { title: "Puzzle Shell/Examples/Welcome page", diff --git a/src/utils/theme.ts b/src/utils/theme.ts index a43b082..2b8b160 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -1,15 +1,15 @@ -import { css, CSSResult } from "lit"; +import { CSSResult, css } from "lit"; /** * Roboto: Regular 400, Regular 400 italic, Medium 500, Medium 500 italic * Roboto Mono: Regular 400, Medium 500 */ -import "@fontsource/roboto/400.css"; -import "@fontsource/roboto/400-italic.css"; -import "@fontsource/roboto/500.css"; -import "@fontsource/roboto/500-italic.css"; import "@fontsource/roboto-mono/400.css"; import "@fontsource/roboto-mono/500.css"; +import "@fontsource/roboto/400-italic.css"; +import "@fontsource/roboto/400.css"; +import "@fontsource/roboto/500-italic.css"; +import "@fontsource/roboto/500.css"; const DEFAULT_BREAKPOINT = 800; export function getBreakpoint(): number {