feat!: rewrite to lit (#367)

BREAKING CHANGE: This project has been rewritten from [StencilJS](https://stenciljs.com) to [Lit](https://lit.dev). See the [Upgrading to v4 document](https://github.com/skyra-project/discord-components/blob/main/packages/core/UPGRADING-TO-V4.md) for more details.

Co-authored-by: TheBv <bv939@web.de>

.eslintignore

@@ -2,9 +2,6 @@
 *.jsx
 *.test.js
 *.test.jsx
-stencil-public-runtime.d.ts
-packages/core/dist
-packages/core/loader
-packages/core/www
-packages/core/src/components.d.ts
-node_modules/
+node_modules/
+packages/core/demo/index.html
+packages/**/dist/

.eslintrc

@@ -1,20 +1,29 @@
 {
-	"extends": ["@sapphire", "plugin:import/typescript"],
+	"root": true,
+	"extends": ["@open-wc", "plugin:lit/recommended", "@sapphire", "plugin:import/typescript", "plugin:lit-a11y/recommended"],
 	"parserOptions": {
 		"ecmaVersion": 2020,
-		"sourceType": "module",
-		"ecmaFeatures": {
-			"jsx": true
-		},
-		"jsx": true
+		"sourceType": "module"
 	},
-	"plugins": ["import", "jsx-a11y", "react", "react-hooks"],
 	"settings": {
-		"react": {
-			"version": "detect"
+		"import/extensions": [".js", ".mjs", ".cjs", ".jsx", ".ts", ".mts", ".cts", ".tsx"],
+		"import/parsers": {
+			"@typescript-eslint/parser": [".ts", ".tsx", ".js", ".jsx", ".json", ".node"]
+		},
+		"import/resolvers": {
+			"typescript": {
+				"alwaysTryTypes": true,
+				"project": ["tsconfig.eslint.json"],
+				"extensions": [".js", ".jsx", ".ts", ".tsx"]
+			},
+			"node": {
+				"extensions": [".js", ".jsx", ".ts", ".tsx"]
+			}
 		}
 	},
+	"plugins": ["import"],
 	"rules": {
+		"@typescript-eslint/member-ordering": "off",
 		"no-extra-label": "warn",
 		"no-iterator": "warn",
 		"no-label-var": "warn",
@@ -57,93 +66,69 @@
 		"getter-return": "warn",
 		"import/first": "error",
 		"import/no-amd": "error",
-		"import/no-webpack-loader-syntax": "error",
-		"react/forbid-foreign-prop-types": [
-			"warn",
-			{
-				"allowInPropTypes": true
-			}
-		],
-		"react/jsx-no-comment-textnodes": "warn",
-		"react/jsx-no-duplicate-props": "warn",
-		"react/jsx-no-target-blank": "warn",
-		"react/jsx-no-undef": "error",
-		"react/jsx-pascal-case": [
-			"warn",
-			{
-				"allowAllCaps": true,
-				"ignore": []
-			}
-		],
-		"react/jsx-uses-react": "warn",
-		"react/jsx-uses-vars": "warn",
-		"react/no-children-prop": "warn",
-		"react/no-access-state-in-setstate": "warn",
-		"react/no-danger": "error",
-		"react/no-danger-with-children": "warn",
-		"react/no-direct-mutation-state": "warn",
-		"react/no-is-mounted": "warn",
-		"react/no-this-in-sfc": "warn",
-		"react/no-typos": "error",
-		"react/react-in-jsx-scope": "error",
-		"react/require-render-return": "error",
-		"react/style-prop-object": "warn",
-		"react/void-dom-elements-no-children": "warn",
-		"jsx-a11y/accessible-emoji": "warn",
-		"jsx-a11y/alt-text": "warn",
-		"jsx-a11y/anchor-has-content": "warn",
-		"jsx-a11y/anchor-is-valid": [
-			"warn",
+		"import/default": "off",
+		"import/dynamic-import-chunkname": "off",
+		"import/export": "error",
+		"import/exports-last": "off",
+		"import/extensions": ["error", "always", { "ignorePackages": true }],
+		"import/group-exports": "off",
+		"import/max-dependencies": "off",
+		"import/named": "off",
+		"import/namespace": "off",
+		"import/newline-after-import": "error",
+		"import/no-absolute-path": "error",
+		"import/no-anonymous-default-export": "off",
+		"import/no-commonjs": "off",
+		"import/no-cycle": ["error", { "maxDepth": 4, "ignoreExternal": true, "allowUnsafeDynamicCyclicDependency": true }],
+		"import/no-default-export": "off",
+		"import/no-deprecated": "off",
+		"import/no-duplicates": "error",
+		"import/no-dynamic-require": "error",
+		"import/no-extraneous-dependencies": [
+			"error",
 			{
-				"aspects": ["noHref", "invalidHref"]
+				"devDependencies": true,
+				"optionalDependencies": true,
+				"peerDependencies": true
 			}
 		],
-		"jsx-a11y/aria-activedescendant-has-tabindex": "warn",
-		"jsx-a11y/aria-props": "warn",
-		"jsx-a11y/aria-proptypes": "warn",
-		"jsx-a11y/aria-role": [
-			"warn",
+		"import/no-import-module-exports": "off",
+		"import/no-internal-modules": "off",
+		"import/no-mutable-exports": "error",
+		"import/no-named-as-default": "off",
+		"import/no-named-as-default-member": "off",
+		"import/no-named-default": "off",
+		"import/no-named-export": "off",
+		"import/no-namespace": "off",
+		"import/no-nodejs-modules": "off",
+		"import/no-relative-packages": "off",
+		"import/no-relative-parent-imports": "off",
+		"import/no-restricted-paths": "off",
+		"import/no-self-import": "error",
+		"import/no-unassigned-import": "off",
+		"import/no-unresolved": "off",
+		"import/no-unused-modules": "off",
+		"import/no-useless-path-segments": "error",
+		"import/no-webpack-loader-syntax": "error",
+		"import/order": [
+			"error",
 			{
-				"ignoreNonDOM": true
+				"alphabetize": {
+					"caseInsensitive": false,
+					"order": "asc"
+				},
+				"groups": ["builtin", "external", "internal", "parent", "sibling", "index", "type"],
+				"newlines-between": "never",
+				"warnOnUnassignedImports": true
 			}
 		],
-		"jsx-a11y/aria-unsupported-elements": "warn",
-		"jsx-a11y/heading-has-content": "warn",
-		"jsx-a11y/iframe-has-title": "warn",
-		"jsx-a11y/img-redundant-alt": "warn",
-		"jsx-a11y/no-access-key": "warn",
-		"jsx-a11y/no-distracting-elements": "warn",
-		"jsx-a11y/no-redundant-roles": "warn",
-		"jsx-a11y/role-has-required-aria-props": "warn",
-		"jsx-a11y/role-supports-aria-props": "warn",
-		"jsx-a11y/scope": "warn",
-		"react-hooks/exhaustive-deps": "warn",
-		"react-hooks/rules-of-hooks": "error"
+		"wc/guard-super-call": "off"
 	},
 	"overrides": [
 		{
-			"files": ["packages/core/**"],
-			"rules": {
-				"@typescript-eslint/ban-types": 0,
-				"@typescript-eslint/no-unused-vars": 0,
-				"react/react-in-jsx-scope": 0
-			}
-		},
-		{
-			"files": ["packages/react/**"],
+			"files": ["**/test/**/*"],
 			"rules": {
-				"@typescript-eslint/ban-types": 0,
-				"@typescript-eslint/no-floating-promises": 0,
-				"@typescript-eslint/unbound-method": 0,
-				"no-eq-null": 0,
-				"@typescript-eslint/explicit-member-accessibility": 0,
-				"@typescript-eslint/member-ordering": 0,
-				"@typescript-eslint/naming-convention": 0,
-				"@typescript-eslint/no-empty-function": 0,
-				"@typescript-eslint/no-explicit-any": 0,
-				"@typescript-eslint/no-unused-vars": 0,
-				"@typescript-eslint/no-useless-constructor": 0,
-				"prefer-template": 0
+				"@typescript-eslint/no-floating-promises": "off"
 			}
 		}
 	]

.github/CODE_OF_CONDUCT.md

@@ -6,8 +6,8 @@ We as members, contributors, and leaders pledge to make participation in our
 community a harassment-free experience for everyone, regardless of age, body
 size, visible or invisible disability, ethnicity, sex characteristics, gender
 identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
-and orientation.
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
 
 We pledge to act and interact in ways that contribute to an open, welcoming,
 diverse, inclusive, and healthy community.
@@ -17,24 +17,24 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
--   Demonstrating empathy and kindness toward other people
--   Being respectful of differing opinions, viewpoints, and experiences
--   Giving and gracefully accepting constructive feedback
--   Accepting responsibility and apologizing to those affected by our mistakes,
-    and learning from the experience
--   Focusing on what is best not just for us as individuals, but for the
-    overall community
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
 
 Examples of unacceptable behavior include:
 
--   The use of sexualized language or imagery, and sexual attention or
-    advances of any kind
--   Trolling, insulting or derogatory comments, and personal or political attacks
--   Public or private harassment
--   Publishing others' private information, such as a physical or email
-    address, without their explicit permission
--   Other conduct which could reasonably be considered inappropriate in a
-    professional setting
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Enforcement Responsibilities
 
@@ -60,8 +60,8 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-contact@skyra.pw.
-All complaints will be reviewed and investigated promptly and fairly.
+contact@skyra.pw. All complaints will be reviewed and investigated promptly and
+fairly.
 
 All community leaders are obligated to respect the privacy and security of the
 reporter of any incident.
@@ -82,15 +82,15 @@ behavior was inappropriate. A public apology may be requested.
 
 ### 2. Warning
 
-**Community Impact**: A violation through a single incident or series
-of actions.
+**Community Impact**: A violation through a single incident or series of
+actions.
 
 **Consequence**: A warning with consequences for continued behavior. No
 interaction with the people involved, including unsolicited interaction with
 those enforcing the Code of Conduct, for a specified period of time. This
 includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or
-permanent ban.
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
 
 ### 3. Temporary Ban
 
@@ -109,17 +109,17 @@ Violating these terms may lead to a permanent ban.
 standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
-**Consequence**: A permanent ban from any sort of public interaction within
-the community.
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
 
 ## Attribution
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage],
 version 2.0, available at
 https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
 
-Community Impact Guidelines were inspired by [Mozilla's code of conduct
-enforcement ladder](https://github.com/mozilla/diversity).
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
 
 [homepage]: https://www.contributor-covenant.org
 

.github/CONTRIBUTING.md

@@ -1,10 +1,12 @@
 # Contributing
 
-**The issue tracker is only for issue reporting or proposals/suggestions. If you have a question, you can find us in our [Discord Server]**.
+**The issue tracker is only for issue reporting or proposals/suggestions. If you
+have a question, you can find us in our [Discord Server]**.
 
-To contribute to this repository, feel free to create a new fork of the repository and
-submit a pull request. We highly suggest [ESLint] to be installed
-in your text editor or IDE of your choice to ensure builds from GitHub Actions do not fail.
+To contribute to this repository, feel free to create a new fork of the
+repository and submit a pull request. We highly suggest [ESLint] to be installed
+in your text editor or IDE of your choice to ensure builds from GitHub Actions
+do not fail.
 
 1. Fork, clone, and select the **main** branch.
 2. Create a new branch in your fork.

.github/hooks/commit-msg

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+yarn commitlint --edit $1

.github/hooks/pre-commit

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+yarn lint-staged

.github/renovate.json

@@ -1,5 +1,4 @@
 {
 	"$schema": "https://docs.renovatebot.com/renovate-schema.json",
-	"enabled": false,
-	"extends": ["github>sapphiredev/readme:sapphire-renovate"]
+	"extends": ["github>sapphiredev/.github:sapphire-renovate"]
 }

.github/workflows/continuous-integration.yml

@@ -7,38 +7,24 @@ on:
   pull_request:
 
 jobs:
-  Linting:
-    name: Linting
+  BuildAndLint:
+    name: BuildingAndLinting
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Project
         uses: actions/checkout@v3
       - name: Add problem matcher
-        run: echo "::add-matcher::.github/problemMatchers/eslint.json"
-      - name: Use Node.js v16
+        run: |
+          echo "::add-matcher::.github/problemMatchers/eslint.json"
+          echo "::add-matcher::.github/problemMatchers/tsc.json"
+      - name: Use Node.js v20
         uses: actions/setup-node@v3
         with:
-          node-version: 16
-          cache: yarn
-      - name: Install Dependencies
-        run: yarn --immutable
-      - name: Run ESLint
-        run: yarn lint --fix=false
-
-  Building:
-    name: Compile source code
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Project
-        uses: actions/checkout@v3
-      - name: Add problem matcher
-        run: echo "::add-matcher::.github/problemMatchers/tsc.json"
-      - name: Use Node.js v16
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
+          node-version: 20
           cache: yarn
       - name: Install Dependencies
         run: yarn --immutable
       - name: Build Code
         run: yarn build
+      - name: Run ESLint
+        run: yarn lint --fix=false