feat: create @frameless/eslint-config package

.changeset/README.md

@@ -4,7 +4,7 @@ Kopieer en plak het onderstaande sjabloon. Je kunt hiervoor de kopieer knop link
 
 ```markdown
 ---
-'@example/<package-name>': major
+'@frameless/<package-name>': major
 ---
 
 Beschrijving
@@ -15,9 +15,9 @@ dubbele aanhalingstekens op een nieuwe regel.
 
 Gebruik:
 
-- `"@example/<package-name>": major` voor breaking changes
-- `"@example/<package-name>": minor` voor nieuwe features
-- `"@example/<package-name>": patch` voor bug fixes
+- `"@frameless/<package-name>": major` voor breaking changes
+- `"@frameless/<package-name>": minor` voor nieuwe features
+- `"@frameless/<package-name>": patch` voor bug fixes
 
 Beschrijf na de tweede set `---` welke veranderingen je hebt doorgevoerd.
 

.github/workflows/continuous-deployment.yml

@@ -138,7 +138,7 @@ jobs:
   publish-npm:
     runs-on: ubuntu-latest
     needs: [lint, test]
-    if: github.ref == 'refs/heads/main' && github.repository != 'nl-design-system/example'
+    if: github.ref == 'refs/heads/main'
 
     steps:
       - name: Checkout release branch

.stylelintrc.json

@@ -8,13 +8,13 @@
     "scss/at-rule-no-unknown": true,
     "scss/dollar-variable-default": true,
     "scss/dollar-variable-first-in-block": [true, { "ignore": ["comments", "imports"] }],
-    "scss/dollar-variable-pattern": "^(example|utrecht)-[a-z0-9-]+$",
-    "scss/percent-placeholder-pattern": "^(example|utrecht)-[a-z0-9-]+$",
+    "scss/dollar-variable-pattern": "^(example|frameless|utrecht)-[a-z0-9-]+$",
+    "scss/percent-placeholder-pattern": "^(example|frameless|utrecht)-[a-z0-9-]+$",
     "scss/operator-no-newline-after": null,
     "scss/at-extend-no-missing-placeholder": null,
-    "custom-property-pattern": "^_?(example|denhaag|utrecht)-[a-z0-9-]+$",
-    "selector-class-pattern": "^(example|denhaag|utrecht)-[a-z0-9_-]+$",
-    "keyframes-name-pattern": "^(example|utrecht)-[a-z0-9-]+$",
+    "custom-property-pattern": "^_?(example|frameless|denhaag|utrecht)-[a-z0-9-]+$",
+    "selector-class-pattern": "^(example|frameless|denhaag|utrecht)-[a-z0-9_-]+$",
+    "keyframes-name-pattern": "^(example|frameless|utrecht)-[a-z0-9-]+$",
     "at-rule-no-unknown": null,
     "block-no-empty": [true],
     "color-no-invalid-hex": [true],

eslint.config.mjs

@@ -0,0 +1,3 @@
+import config from '@frameless/eslint-config';
+
+export default config;

npmpackagejsonlint.config.cjs

@@ -6,7 +6,7 @@ module.exports = {
     'no-tilde-version-devDependencies': 'error',
     'require-repository-directory': 'error',
     'valid-values-license': ['error', ['EUPL-1.2']],
-    'valid-values-name-scope': ['error', ['@example']],
+    'valid-values-name-scope': ['error', ['@frameless']],
   },
   overrides: [
     {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@example/design-system",
+  "name": "@frameless/design-system",
   "version": "1.0.0-alpha.0",
   "author": "Community for NL Design System",
   "description": "Design system based on the NL Design System architecture",
@@ -10,7 +10,7 @@
   "private": true,
   "repository": {
     "type": "git+ssh",
-    "url": "git@github.com:nl-design-system/example.git",
+    "url": "git@github.com:frameless/design-system.git",
     "directory": "."
   },
   "engines": {
@@ -23,15 +23,17 @@
   ],
   "devDependencies": {
     "@changesets/cli": "2.27.8",
+    "@frameless/eslint-config": "workspace:*",
     "@types/node": "22.5.5",
     "@typescript-eslint/eslint-plugin": "8.6.0",
     "@typescript-eslint/parser": "8.6.0",
-    "eslint": "8.57.1",
+    "eslint": "9.13.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.30.0",
-    "eslint-plugin-json": "3.1.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-json": "4.0.1",
     "eslint-plugin-mdx": "3.1.5",
-    "eslint-plugin-react": "7.36.1",
+    "eslint-plugin-react": "7.37.1",
+    "globals": "15.11.0",
     "husky": "9.1.6",
     "lint-staged": "15.2.10",
     "markdownlint-cli": "0.41.0",
@@ -43,20 +45,21 @@
     "stylelint": "16.9.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-order": "6.0.4",
-    "typescript": "5.6.2"
+    "typescript": "5.6.2",
+    "typescript-eslint": "8.10.0"
   },
   "scripts": {
     "build": "pnpm --recursive run build",
     "clean": "pnpm --recursive run clean",
     "lint": "npm-run-all --continue-on-error lint:** lint-workspaces",
     "lint:css": "stylelint --allow-empty-input '**/*.{css,scss}'",
-    "lint:js": "eslint --ext .js,.cjs,.mjs,.json,.jsx,.mdx,.ts,.tsx --report-unused-disable-directives .",
+    "lint:js": "eslint",
     "lint:md": "markdownlint '**/*.md'",
     "lint:package-json": "npmPkgJsonLint .",
     "lint:package-lock": "pnpm ls --recursive",
     "lint-fix": "npm-run-all --continue-on-error lint-fix:** prettier",
     "lint-fix:css": "stylelint --fix '**/*.{css,scss}'",
-    "lint-fix:js": "eslint --ext .js,.cjs,.mjs,.json,.jsx,.mdx,.ts,.tsx --fix --report-unused-disable-directives .",
+    "lint-fix:js": "eslint --fix",
     "lint-fix:md": "markdownlint --fix '**/*.md'",
     "lint-workspaces": "pnpm --recursive --if-present run lint",
     "lint-build": "pnpm --recursive --if-present run lint-build",
@@ -71,8 +74,8 @@
     "update-patch": "npm-check-updates --configFileName .ncurc.patch.cjs",
     "update-minor": "npm-check-updates --configFileName .ncurc.minor.cjs",
     "update-major": "npm-check-updates --configFileName .ncurc.major.cjs",
-    "watch:storybook": "pnpm --filter @example/web-components-stencil run build:stencil && pnpm --filter @example/design-tokens run build:style-dictionary && pnpm --filter ./packages/storybook run storybook",
-    "watch:style-dictionary": "pnpm --filter @example/design-tokens run watch:style-dictionary"
+    "watch:storybook": "pnpm --filter @frameless/web-components-stencil run build:stencil && pnpm --filter @frameless/design-tokens run build:style-dictionary && pnpm --filter ./packages/storybook run storybook",
+    "watch:style-dictionary": "pnpm --filter @frameless/design-tokens run watch:style-dictionary"
   },
   "dependencies": {
     "http-server": "14.1.1"

packages/components-css/button/README.md

@@ -1,3 +1,3 @@
 <!-- @license CC0-1.0 -->
 
-# Example Button component
+# Frameless Button component

packages/components-css/button/index.scss

@@ -3,10 +3,10 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
-.example-button {
-  background-color: var(--example-button-background-color);
+.frameless-button {
+  background-color: var(--frameless-button-background-color);
   border: 0;
-  color: var(--example-button-color);
+  color: var(--frameless-button-color);
   font-family: system-ui;
   font-size: 1rem;
   padding-block-end: 1ex;