refactor: example repository to frameless

.eslintignore

@@ -7,11 +7,3 @@ build/
 coverage/
 dist/
 tmp/
-
-# Ignore generated files from Stencil
-components/components.d.ts
-packages/web-components-angular/src/directives/angular-component-lib/utils.ts
-packages/web-components-angular/src/directives/proxies.ts
-packages/web-components-stencil/loader
-packages/web-components-react/src/react-component-lib/
-packages/web-components-react/src/components.ts

.eslintrc.json

@@ -80,11 +80,8 @@
       "parserOptions": {
         "project": [
           "packages/storybook/tsconfig.json",
-          "packages/web-components-react/tsconfig.json",
           "packages/components-react/tsconfig.json",
-          "packages/components-react/tsconfig.test.json",
-          "packages/web-components-stencil/tsconfig.json",
-          "packages/web-components-stencil/tsconfig.jest.json"
+          "packages/components-react/tsconfig.test.json"
         ]
       },
       "plugins": ["@typescript-eslint"]

.npmpackagejsonlintrc.json

@@ -34,7 +34,7 @@
     "scripts-type": "error",
     "valid-values-author": "off",
     "valid-values-license": ["error", ["EUPL-1.2"]],
-    "valid-values-name-scope": ["error", ["@example"]],
+    "valid-values-name-scope": ["error", ["@frameless"]],
     "valid-values-private": "off",
     "version-format": "error",
     "version-type": "error"

.prettierignore

@@ -18,8 +18,3 @@ yarn.lock
 pnpm-lock.yaml
 
 
-# Ignore generated files from Stencil
-components/components.d.ts
-packages/web-components-stencil/loader
-packages/web-components-react/src/react-component-lib/
-packages/web-components-react/src/components.ts

.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": "^(frameless|utrecht)-[a-z0-9-]+$",
+    "scss/percent-placeholder-pattern": "^(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": "^_?(frameless|denhaag|utrecht)-[a-z0-9-]+$",
+    "selector-class-pattern": "^(frameless|utrecht)-[a-z0-9_-]+$",
+    "keyframes-name-pattern": "^(frameless|utrecht)-[a-z0-9-]+$",
     "at-rule-no-unknown": null,
     "block-no-empty": [true],
     "color-no-invalid-hex": [true],

package.json

@@ -1,9 +1,9 @@
 {
   "version": "1.0.0-alpha.0",
-  "author": "Community for NL Design System",
-  "description": "Design system based on the NL Design System architecture",
+  "author": "Frameless",
+  "description": "Frameless company website + Storybook",
   "license": "EUPL-1.2",
-  "name": "@example/design-system",
+  "name": "@frameless/design-system",
   "keywords": [
     "nl-design-system"
   ],

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,9 +1,9 @@
 {
   "version": "1.0.0-alpha.0",
-  "author": "Community for NL Design System",
+  "author": "Frameless",
   "description": "CSS Components for a design system based on the NL Design System architecture",
   "license": "EUPL-1.2",
-  "name": "@example/components-css",
+  "name": "@frameless/components-css",
   "keywords": [
     "nl-design-system"
   ],

packages/components-react/package.json

@@ -1,9 +1,9 @@
 {
   "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",
+  "author": "Frameless",
+  "description": "React component library for the Frameless repository, based on the NL Design System architecture",
   "license": "EUPL-1.2",
-  "name": "@example/components-react",
+  "name": "@frameless/components-react",
   "keywords": [
     "nl-design-system"
   ],
@@ -14,7 +14,7 @@
   },
   "repository": {
     "type": "git+ssh",
-    "url": "[email protected]:nl-design-system/example-community.git"
+    "url": "[email protected]:frameless/website.git"
   },
   "scripts": {
     "build": "npm-run-all clean build:**",
@@ -40,7 +40,7 @@
     "@babel/preset-react": "7.24.1",
     "@babel/preset-typescript": "7.24.1",
     "@babel/runtime": "7.24.4",
-    "@example/components-css": "workspace:*",
+    "@frameless/components-css": "workspace:*",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
     "@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,11 +1,8 @@
-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 type { Preview } from '@storybook/react';
 import { ParametersArgsDecorator } from './ParametersArgsDecorator';
 
-defineCustomElements();
-
 const preview: Preview = {
   parameters: {
     controls: { expanded: false },

packages/storybook/package.json

@@ -1,16 +1,16 @@
 {
   "version": "1.0.0-alpha.0",
-  "author": "Community for NL Design System",
+  "author": "Frameless",
   "description": "Storybook based on the NL Design System architecture",
   "license": "EUPL-1.2",
-  "name": "@example/storybook",
+  "name": "@frameless/storybook",
   "keywords": [
     "nl-design-system"
   ],
   "private": true,
   "repository": {
     "type": "git+ssh",
-    "url": "[email protected]:nl-design-system/example.git"
+    "url": "[email protected]:frameless/website.git"
   },
   "scripts": {
     "build": "storybook build --output-dir dist/ --config-dir config/",
@@ -19,12 +19,10 @@
     "storybook": "storybook dev --config-dir config/ --port 6006"
   },
   "devDependencies": {
-    "@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:*",
     "@storybook/addon-a11y": "8.0.9",
     "@storybook/addon-actions": "8.0.9",
     "@storybook/addon-docs": "8.0.9",

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>
 );
 
@@ -44,5 +44,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  name: 'Example button',
+  name: 'Frameless 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>