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 b639860..d117c84 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", @@ -5053,6 +5054,115 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@trivago/prettier-plugin-sort-imports": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz", + "integrity": "sha512-r3n0onD3BTOVUNPhR4lhVK4/pABGpbA7bW3eumZnYdKaHkf1qEC+Mag6DPbGNuuh0eG8AaYj+YqmVHSiGslaTQ==", + "dev": true, + "dependencies": { + "@babel/generator": "7.17.7", + "@babel/parser": "^7.20.5", + "@babel/traverse": "7.23.2", + "@babel/types": "7.17.0", + "javascript-natural-sort": "0.7.1", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@vue/compiler-sfc": "3.x", + "prettier": "2.x - 3.x" + }, + "peerDependenciesMeta": { + "@vue/compiler-sfc": { + "optional": true + } + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/generator": { + "version": "7.17.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz", + "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==", + "dev": true, + "dependencies": { + "@babel/types": "^7.17.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse": { + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.22.13", + "@babel/generator": "^7.23.0", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/parser": "^7.23.0", + "@babel/types": "^7.23.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse/node_modules/@babel/generator": { + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz", + "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.23.6", + "@jridgewell/gen-mapping": "^0.3.2", + "@jridgewell/trace-mapping": "^0.3.17", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse/node_modules/@babel/types": { + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz", + "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==", + "dev": true, + "dependencies": { + "@babel/helper-string-parser": "^7.23.4", + "@babel/helper-validator-identifier": "^7.22.20", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/types": { + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", + "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", + "dev": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.16.7", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -9553,6 +9663,12 @@ "node": ">=10" } }, + "node_modules/javascript-natural-sort": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", + "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==", + "dev": true + }, "node_modules/jest-haste-map": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.7.0.tgz", @@ -17380,6 +17496,92 @@ "magic-string": "^0.30.0" } }, + "@trivago/prettier-plugin-sort-imports": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz", + "integrity": "sha512-r3n0onD3BTOVUNPhR4lhVK4/pABGpbA7bW3eumZnYdKaHkf1qEC+Mag6DPbGNuuh0eG8AaYj+YqmVHSiGslaTQ==", + "dev": true, + "requires": { + "@babel/generator": "7.17.7", + "@babel/parser": "^7.20.5", + "@babel/traverse": "7.23.2", + "@babel/types": "7.17.0", + "javascript-natural-sort": "0.7.1", + "lodash": "^4.17.21" + }, + "dependencies": { + "@babel/generator": { + "version": "7.17.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz", + "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==", + "dev": true, + "requires": { + "@babel/types": "^7.17.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/traverse": { + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.22.13", + "@babel/generator": "^7.23.0", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/parser": "^7.23.0", + "@babel/types": "^7.23.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + }, + "dependencies": { + "@babel/generator": { + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz", + "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==", + "dev": true, + "requires": { + "@babel/types": "^7.23.6", + "@jridgewell/gen-mapping": "^0.3.2", + "@jridgewell/trace-mapping": "^0.3.17", + "jsesc": "^2.5.1" + } + }, + "@babel/types": { + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz", + "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==", + "dev": true, + "requires": { + "@babel/helper-string-parser": "^7.23.4", + "@babel/helper-validator-identifier": "^7.22.20", + "to-fast-properties": "^2.0.0" + } + } + } + }, + "@babel/types": { + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", + "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.16.7", + "to-fast-properties": "^2.0.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "dev": true + } + } + }, "@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -20682,6 +20884,12 @@ "minimatch": "^3.1.2" } }, + "javascript-natural-sort": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", + "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==", + "dev": true + }, "jest-haste-map": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.7.0.tgz", 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 {