chore: replace example with frameless prefix

.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],

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": {
@@ -71,8 +71,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;

packages/components-css/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@example/components-css",
+  "name": "@frameless/components-css",
   "version": "1.0.0-alpha.0",
   "author": "Community for NL Design System",
   "description": "CSS Components for a 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": "packages/components-css"
   }
 }

packages/components-react/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "@example/components-react",
+  "name": "@frameless/components-react",
   "version": "1.0.0-alpha.0",
   "author": "Community for NL Design System",
-  "description": "React component library for the Example repository, based on the NL Design System architecture",
+  "description": "React component library for Frameless, based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "keywords": [
     "nl-design-system"
@@ -14,7 +14,7 @@
   },
   "repository": {
     "type": "git+ssh",
-    "url": "git@github.com:nl-design-system/example.git",
+    "url": "git@github.com:frameless/design-system.git",
     "directory": "packages/components-react"
   },
   "scripts": {
@@ -41,7 +41,7 @@
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
     "@babel/runtime": "7.25.6",
-    "@example/components-css": "workspace:*",
+    "@frameless/components-css": "workspace:*",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "26.0.1",
     "@rollup/plugin-node-resolve": "15.2.3",

packages/components-react/src/Button.tsx

@@ -1,13 +1,13 @@
 import clsx from 'clsx';
 import { ButtonHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react';
-import '@example/components-css/button/index.scss';
+import '@frameless/components-css/button/index.scss';
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const Button = forwardRef(
   ({ children, className, ...restProps }: PropsWithChildren<ButtonProps>, ref: ForwardedRef<HTMLButtonElement>) => {
     return (
-      <button ref={ref} className={clsx('example-button', className)} {...restProps}>
+      <button ref={ref} className={clsx('frameless-button', className)} {...restProps}>
         {children}
       </button>
     );

packages/storybook/config/ParametersArgsDecorator.tsx

@@ -4,7 +4,7 @@ export const ParametersArgsDecorator: Decorator = (Story, context) => {
   context.parameters['args'] = context.args;
 
   return (
-    <div className="example-theme">
+    <div className="frameless-theme">
       <Story />
     </div>
   );

packages/storybook/config/preview.ts

@@ -1,6 +1,6 @@
-import '@example/design-tokens/dist/index.css';
-import '@example/font/src/index.scss';
-import { defineCustomElements } from '@example/web-components-stencil/loader/index.js';
+import '@frameless/design-tokens/dist/index.css';
+import '@frameless/font/src/index.scss';
+import { defineCustomElements } from '@frameless/web-components-stencil/loader/index.js';
 import type { Preview } from '@storybook/react';
 import { ParametersArgsDecorator } from './ParametersArgsDecorator';
 

packages/storybook/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@example/storybook",
+  "name": "@frameless/storybook",
   "author": "Community for NL Design System",
   "description": "Storybook based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -9,7 +9,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": "packages/storybook"
   },
   "scripts": {
@@ -21,12 +21,12 @@
   "devDependencies": {
     "@babel/core": "7.25.2",
     "@etchteam/storybook-addon-status": "5.0.0",
-    "@example/assets": "workspace:*",
-    "@example/components-css": "workspace:*",
-    "@example/design-tokens": "workspace:*",
-    "@example/font": "workspace:*",
-    "@example/web-components-react": "workspace:*",
-    "@example/web-components-stencil": "workspace:*",
+    "@frameless/assets": "workspace:*",
+    "@frameless/components-css": "workspace:*",
+    "@frameless/design-tokens": "workspace:*",
+    "@frameless/font": "workspace:*",
+    "@frameless/web-components-react": "workspace:*",
+    "@frameless/web-components-stencil": "workspace:*",
     "@storybook/addon-a11y": "8.3.1",
     "@storybook/addon-actions": "8.3.1",
     "@storybook/addon-docs": "8.3.1",

packages/storybook/src/css-button.stories.tsx

@@ -1,13 +1,13 @@
 /* @license CC0-1.0 */
 
-import readme from '@example/components-css/button/README.md?raw';
+import readme from '@frameless/components-css/button/README.md?raw';
 import type { Meta, StoryObj } from '@storybook/react';
 import { PropsWithChildren } from 'react';
-import '@example/components-css/button/index.scss';
+import '@frameless/components-css/button/index.scss';
 
 const Button = ({ children }: PropsWithChildren<{}>) => (
-  <button className="example-button" type="button">
-    <span className="example-button__text">{children}</span>
+  <button className="frameless-button" type="button">
+    <span className="frameless-button__text">{children}</span>
   </button>
 );
 

packages/storybook/src/documentation/introduction.mdx

@@ -1,6 +1,6 @@
 import { Markdown, Meta } from '@storybook/addon-docs';
 import markdown from './introduction.md?raw';
 
-<Meta title="Example/Intro" />
+<Meta title="Frameless/Intro" />
 
 <Markdown>{markdown}</Markdown>

packages/storybook/src/documentation/license.mdx

@@ -1,6 +1,6 @@
 import { Markdown, Meta } from '@storybook/addon-docs';
 import markdown from '../../../../LICENSE.md?raw';
 
-<Meta title="Example/Open Source License" />
+<Meta title="Frameless/Open Source License" />
 
 <Markdown>{markdown}</Markdown>

packages/storybook/src/documentation/notice.mdx

@@ -1,6 +1,6 @@
 import { Markdown, Meta } from '@storybook/addon-docs';
 import markdown from '../../../../NOTICE.md?raw';
 
-<Meta title="Example/Toestemming voor gebruik" />
+<Meta title="Frameless/Toestemming voor gebruik" />
 
 <Markdown>{markdown}</Markdown>

packages/storybook/src/web-component-button.stories.tsx

@@ -1,11 +1,11 @@
 /* @license CC0-1.0 */
 
-import readme from '@example/components-css/button/README.md?raw';
-import { ExampleButton } from '@example/web-components-react';
+import readme from '@frameless/components-css/button/README.md?raw';
+import { FramelessButton } from '@frameless/web-components-react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { PropsWithChildren } from 'react';
 
-const Button = ({ children }: PropsWithChildren<{}>) => <ExampleButton>{children}</ExampleButton>;
+const Button = ({ children }: PropsWithChildren<{}>) => <FramelessButton>{children}</FramelessButton>;
 
 const meta = {
   title: 'Web Component/Button',

packages/web-components-react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@example/web-components-react",
+  "name": "@frameless/web-components-react",
   "version": "1.0.0-alpha.0",
   "author": "Community for NL Design System",
   "description": "React web components bundle 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": "packages/web-components-react"
   },
   "sideEffects": false,
@@ -29,7 +29,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@example/web-components-stencil": "workspace:*",
+    "@frameless/web-components-stencil": "workspace:*",
     "@types/node": "22.5.5",
     "@types/react": "18.3.7",
     "@types/react-dom": "18.3.0",

packages/web-components-stencil/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@example/web-components-stencil",
+  "name": "@frameless/web-components-stencil",
   "version": "1.0.0-alpha.0",
   "author": "Community for NL Design System",
   "description": "Stencil web components bundle based on the NL Design System architecture",
@@ -13,14 +13,14 @@
   "types": "./dist/types/components.d.ts",
   "collection": "./dist/collection/collection-manifest.json",
   "collection:main": "./dist/collection/collection-manifest.json",
-  "unpkg": "./dist/example/example.esm.js",
+  "unpkg": "./dist/frameless/frameless.esm.js",
   "files": [
     "dist/",
     "loader/"
   ],
   "repository": {
     "type": "git+ssh",
-    "url": "git@github.com:nl-design-system/example.git",
+    "url": "git@github.com:frameless/design-system.git",
     "directory": "packages/web-components-stencil"
   },
   "scripts": {
@@ -34,7 +34,7 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@example/components-css": "workspace:*",
+    "@frameless/components-css": "workspace:*",
     "@stencil/react-output-target": "0.7.1",
     "@stencil/sass": "3.0.12",
     "@types/jest": "29.5.13",

packages/web-components-stencil/src/button/index.scss

@@ -1 +1 @@
-@import "~@example/components-css/button/index";
+@import "~@frameless/components-css/button/index";

packages/web-components-stencil/src/button/stencil.tsx

@@ -6,15 +6,15 @@
 import { Component, h } from '@stencil/core';
 
 @Component({
-  tag: 'example-button',
+  tag: 'frameless-button',
   styleUrl: 'index.scss',
   shadow: true,
 })
 export class Button {
   render() {
     return (
-      <button class="example-button" type="button">
-        <span class="example-button__text">
+      <button class="frameless-button" type="button">
+        <span class="frameless-button__text">
           <slot></slot>
         </span>
       </button>

packages/web-components-stencil/stencil.config.ts

@@ -3,7 +3,7 @@ import { reactOutputTarget } from '@stencil/react-output-target';
 import { sass } from '@stencil/sass';
 
 export const config: Config = {
-  namespace: 'example',
+  namespace: 'frameless',
   srcDir: './src/',
   outputTargets: [
     {