refactor: rename lyne-components into lyne-elements and create `l…

…yne-elements-experimental` (#2675) BREAKING CHANGE: `Lyne components` and `Lyne components react` libraries have been renamed, please update imports accordingly. - `@sbb-esta/lyne-components` => `@sbb-esta/lyne-elements` - `@sbb-esta/lyne-components-react` => `@sbb-esta/lyne-react` The following components, and their react wrappers, have been moved into `@sbb-esta/lyne-elements-experimental` and `@sbb-esta/lyne-react-experimental` respectively: - sbb-journey-summary - sbb-pearl-chain - sbb-pearl-chain-time - sbb-pearl-chain-vertical - sbb-pearl-chain-vertical-item - sbb-timetable-duration - sbb-timetable-row
sbb-design-systems · May 29, 2024 · edd3a73 · edd3a73
1 parent c00aa58
commit edd3a73
Show file tree

Hide file tree

Showing 1,145 changed files with 917 additions and 624 deletions.
diff --git a/.github/workflows/continuous-integration.yml b/.github/workflows/continuous-integration.yml
@@ -154,7 +154,7 @@ jobs:
           exitZeroOnChanges: true
           zip: true
           onlyChanged: true
-          externals: '**/components/core/styles/**/*.scss'
+          externals: '**/elements/core/styles/**/*.scss'
 
   visual-regression:
     runs-on: ubuntu-latest

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
@@ -54,14 +54,22 @@ jobs:
       - name: 'Release: Determine npm tag'
         id: npm_tag
         run: echo "npm_tag=$([[ "$VERSION" == *"-"* ]] && echo "next" || echo "latest")" >> $GITHUB_OUTPUT
-      - name: 'Release: Publish @sbb-esta/lyne-components'
-        run: yarn publish dist/components --tag ${{ steps.npm_tag.outputs.npm_tag }}
+      - name: 'Release: Publish @sbb-esta/lyne-elements'
+        run: yarn publish dist/elements --tag ${{ steps.npm_tag.outputs.npm_tag }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: 'Release: Publish @sbb-esta/lyne-components-react'
+      - name: 'Release: Publish @sbb-esta/lyne-elements-experimental'
+        run: yarn publish dist/elements-experimental --tag ${{ steps.npm_tag.outputs.npm_tag }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: 'Release: Publish @sbb-esta/lyne-react'
         run: yarn publish dist/react --tag ${{ steps.npm_tag.outputs.npm_tag }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: 'Release: Publish @sbb-esta/lyne-react-experimental'
+        run: yarn publish dist/react-experimental --tag ${{ steps.npm_tag.outputs.npm_tag }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Remove files with forbidden extensions
         run: node ./scripts/clean-storybook-files.cjs

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -6,7 +6,7 @@ import { html } from 'lit';
 
 import { withBackgroundDecorator } from '../src/storybook/testing/with-background-decorator.js';
 
-import '../src/components/core/styles/standard-theme.scss';
+import '../src/elements/core/styles/standard-theme.scss';
 
 const getViewportName = (key: string): string =>
   key.replace(/(^SbbBreakpoint|Min$)/g, '').toLowerCase();
@@ -66,7 +66,7 @@ const parameters: Parameters = {
     storySort: {
       // Story section order.
       // https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories
-      order: ['introduction', 'pages', 'components', 'styles', 'timetable', 'internals'],
+      order: ['introduction', 'pages', 'elements', 'experimental', 'styles', 'internals'],
     },
   },
 };

diff --git a/README.md b/README.md
@@ -22,6 +22,13 @@ Lyne Design Tokens and Lyne Components are available for developers and designer
 
 ## 🔗 Packages
 
+| Package                            | Description                                                                 |
+| ---------------------------------- | --------------------------------------------------------------------------- |
+| `@lyne-esta/elements`              | Web components built on top of the Lyne Design System                       |
+| `@lyne-esta/elements-experimental` | Web components that do not yet align with our architecture or testing goals |
+| `@lyne-esta/react`                 | React wrappers for `@lyne-esta/elements`                                    |
+| `@lyne-esta/react-experimental`    | React wrappers for `@lyne-esta/elements-experimental`                       |
+
 - [NPM Packages](https://www.npmjs.com/search?q=%40sbb-esta%2Flyne-)
 
 ## 🖥 Browser and screen reader support

diff --git a/codecov.yml b/codecov.yml
@@ -1,3 +1,3 @@
 comment: false
 ignore:
-  - 'src/components/core/testing/**/*'
+  - 'src/elements/core/testing/**/*'
diff --git a/docs/CODING_STANDARDS.md b/docs/CODING_STANDARDS.md
@@ -507,7 +507,7 @@ Also define CSS variables in :host.
 #### Use/Check existing CSS variables and SCSS mixins/functions
 
 The `@sbb-esta/lyne-design-tokens` package provides global design tokens/CSS variables,
-which are used/configured in our code base (see `src/components/core/styles/core/variables.scss`).
+which are used/configured in our code base (see `src/elements/core/styles/core/variables.scss`).
 
 Use these variables instead of the original ones and only define new variables for components.
 If a global variable is missing, create an issue or pull request in

diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
@@ -39,12 +39,12 @@ Providing the following information will increase the
 chances of your issue being dealt with quickly:
 
 - **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
-- **@sbb-esta/lyne-components Version** - which version is affected
+- **@sbb-esta/lyne-elements Version** - which version is affected
 - **Motivation for or Use Case** - explain what are you trying to do and why the current behavior
   is a bug for you
 - **Browsers and Operating System** - is this a problem with all browsers?
 - **Reproduce the Error** - provide a live example (using StackBlitz or similar) or an unambiguous set of steps
-- **Screenshots** - Due to the visual nature of @sbb-esta/lyne-components, screenshots can help the team
+- **Screenshots** - Due to the visual nature of @sbb-esta/lyne-elements, screenshots can help the team
   triage issues far more quickly than a text description.
 - **Related Issues** - has a similar issue been reported before?
 - **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
@@ -172,7 +172,10 @@ The rest of the commit message is then used for this.
 
 This project publishes the following package:
 
-- @sbb-esta/lyne-components
+- @sbb-esta/lyne-elements
+- @sbb-esta/lyne-elements-experimental
+- @sbb-esta/lyne-react
+- @sbb-esta/lyne-react-experimental
 
 ### Styling
 

diff --git a/docs/DEVELOPER.md b/docs/DEVELOPER.md
@@ -21,11 +21,11 @@ Run `yarn lint --fix` to fix any automatically fixable lint issues and report th
 
 ## Outputs
 
-| Folder            | Explanation                           |
-| ----------------- | ------------------------------------- |
-| ./dist/components | main output target for web-components |
-| ./dist/react      | output target for the react library   |
-| ./dist/storybook  | rendered static storybook site        |
+| Folder           | Explanation                           |
+| ---------------- | ------------------------------------- |
+| ./dist/elements  | main output target for web-components |
+| ./dist/react     | output target for the react library   |
+| ./dist/storybook | rendered static storybook site        |
 
 ## Running tests
 

diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md
@@ -7,29 +7,29 @@ Select your technology to get started.
 <details>
   <summary>Plain Javascript</summary>
 
-1. Install the `@sbb-esta/lyne-components` package:
+1. Install the `@sbb-esta/lyne-elements` and `@sbb-esta/lyne-elements-experimental` package:
 
    ```sh
-   npm install --save @sbb-esta/lyne-components
+   npm install --save @sbb-esta/lyne-elements @sbb-esta/lyne-elements-experimental
    ```
 
    or, if using yarn:
 
    ```sh
-   yarn add @sbb-esta/lyne-components
+   yarn add @sbb-esta/lyne-elements @sbb-esta/lyne-elements-experimental
    ```
 
 2. Including global styles is strongly recommended to apply all SBB styles to your application.
    See [styles](#styles) section if you prefer more granularity on what to import.
 
    ```css
-   @import 'node_modules/@sbb-esta/lyne-components/standard-theme.css';
+   @import 'node_modules/@sbb-esta/lyne-elements/standard-theme.css';
    ```
 
 3. Import the desired element and add it to globalThis:
 
    ```ts
-   import { SbbButtonElement } from '@sbb-esta/lyne-components/button.js';
+   import { SbbButtonElement } from '@sbb-esta/lyne-elements/button.js';
 
    globalThis.SbbButtonElement = SbbButtonElement;
    ```
@@ -43,24 +43,24 @@ Select your technology to get started.
 > However, it's already possible to use Lyne Components in Angular.
 
 1. Install Angular CLI, see [Angular CLI documentation](https://cli.angular.io/)
-2. Install the `@sbb-esta/lyne-components` package:
+2. Install the `@sbb-esta/lyne-elements` package:
 
    ```sh
-   npm install --save @sbb-esta/lyne-components
+   npm install --save @sbb-esta/lyne-elements
    ```
 
    or, if using yarn:
 
    ```sh
-   yarn add @sbb-esta/lyne-components
+   yarn add @sbb-esta/lyne-elements
    ```
 
 3. Including global styles is strongly recommended to apply all SBB styles to your application.
    See [styles](#styles) section if you prefer more granularity on what to import.
    Importing stylsheets is doable by editing the `styles.(s)css`:
 
    ```css
-   @import 'node_modules/@sbb-esta/lyne-components/standard-theme.css';
+   @import 'node_modules/@sbb-esta/lyne-elements/standard-theme.css';
    ```
 
    or editing your `angular.json`:
@@ -69,7 +69,7 @@ Select your technology to get started.
      ...
      "styles": [
        "src/styles.scss",
-       "node_modules/@sbb-esta/lyne-components/standard-theme.css"
+       "node_modules/@sbb-esta/lyne-elements/standard-theme.css"
      ],
      ...
    ```
@@ -82,7 +82,7 @@ Select your technology to get started.
 import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
-import '@sbb-esta/lyne-components/button.js';
+import '@sbb-esta/lyne-elements/button.js';
 
 @Component({
   selector: 'my-app',
@@ -101,23 +101,23 @@ bootstrapApplication(App).catch((err) => console.error(err));
   <summary>React/Next.js</summary>
 
 1. Prepare a React and Next.js setup.
-2. Install the `@sbb-esta/lyne-components-react` package:
+2. Install the `@sbb-esta/lyne-react` package:
 
    ```sh
-   npm install --save @sbb-esta/lyne-components-react
+   npm install --save @sbb-esta/lyne-react
    ```
 
    or, if using yarn:
 
    ```sh
-   yarn add @sbb-esta/lyne-components-react
+   yarn add @sbb-esta/lyne-react
    ```
 
 3. Including global styles is strongly recommended to apply all SBB styles to your application.
    See [styles](#styles) section if you prefer more granularity on what to import.
 
    ```css
-   @import '~@sbb-esta/lyne-components/standard-theme.css';
+   @import '~@sbb-esta/lyne-elements/standard-theme.css';
    ```
 
 4. Enhance the `transpilePackages` array in Next.Js config.
@@ -126,8 +126,8 @@ bootstrapApplication(App).catch((err) => console.error(err));
    module.exports = {
      ...,
      transpilePackages: [
-       '@sbb-esta/lyne-components-react',
-       '@sbb-esta/lyne-components',
+       '@sbb-esta/lyne-react',
+       '@sbb-esta/lyne-elements',
        '@lit/react',
        '@lit/reactive-element',
        'lit',
@@ -147,8 +147,8 @@ bootstrapApplication(App).catch((err) => console.error(err));
    module.exports = withLitSSR({
        ...,
        transpilePackages: [
-         '@sbb-esta/lyne-components',
-         '@sbb-esta/lyne-components-react',
+         '@sbb-esta/lyne-elements',
+         '@sbb-esta/lyne-react',
          '@sbb-esta/lyne-design-tokens',
          '@lit-labs/nextjs',
          '@lit-labs/ssr',
@@ -165,18 +165,18 @@ bootstrapApplication(App).catch((err) => console.error(err));
 6. Import and use lyne component:
 
    ```tsx
-   import { SbbButton } from '@sbb-esta/lyne-components-react/button';
+   import { SbbButton } from '@sbb-esta/lyne-react/button';
 
    export default function MyComponent() {
      return <SbbButton onClick={() => {}}></SbbButton>;
    }
    ```
 
-   Whenever e.g. types are needed, they can be imported directly from the `@sbb-esta/lyne-components` package:
+   Whenever e.g. types are needed, they can be imported directly from the `@sbb-esta/lyne-elements` package:
 
    ```tsx
-   import type { SbbButtonSize } from '@sbb-esta/lyne-components/button.js';
-   import { SbbButton } from '@sbb-esta/lyne-components-react/button';
+   import type { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
+   import { SbbButton } from '@sbb-esta/lyne-react/button';
 
    export default function MyComponent() {
      const size: SbbButtonSize = 'm';
@@ -219,19 +219,19 @@ The `standard-theme.css` (or `core.css`) file only contains a subset of the `SBB
 For including the full fontset, we provide the `font-characters-extension.css` file which can be added after the `standard-theme.css` (or `core.css`) file.
 
 ```css
-@import '@sbb-esta/lyne-components/standard-theme.css';
-@import '@sbb-esta/lyne-components/font-characters-extension.css';
+@import '@sbb-esta/lyne-elements/standard-theme.css';
+@import '@sbb-esta/lyne-elements/font-characters-extension.css';
 ```
 
 ### Design Tokens
 
-The `@sbb-esta/lyne-components` package provides the CSS variable design tokens
+The `@sbb-esta/lyne-elements` package provides the CSS variable design tokens
 from `@sbb-esta/lyne-design-tokens` in the `standard-theme.css` (or `core.css`).
 
 > If you have to use design tokens within a javascript context,
 > please also add `@sbb-esta/lyne-design-tokens` package to your project.
 
-Please check `node_modules/@sbb-esta/lyne-components/standard-theme.css` for available design tokens.
+Please check `node_modules/@sbb-esta/lyne-elements/standard-theme.css` for available design tokens.
 
 #### How to work with design tokens
 
@@ -248,7 +248,7 @@ Lyne Components provides various SASS mixins which can be used by consumers.
 For available SASS mixins, check [SASS Mixins](https://github.com/sbb-design-systems/lyne-components/tree/main/src/components/core/styles/mixins).
 
 ```scss
-@use '@sbb-esta/lyne-components' as sbb;
+@use '@sbb-esta/lyne-elements' as sbb;
 
 .my-class {
   @include sbb.grid-base;
@@ -352,7 +352,7 @@ See [Text styles](https://lyne-storybook.app.sbb.ch/?path=/docs/styles-typograph
 ```
 
 ```scss
-@use '@sbb-esta/lyne-components' as sbb;
+@use '@sbb-esta/lyne-elements' as sbb;
 
 p {
   @include sbb.text-s--bold;

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@sbb-esta/lyne-components",
+  "name": "@sbb-esta/lyne-elements",
   "version": "0.51.1",
   "description": "Lyne Design System",
   "keywords": [
@@ -21,18 +21,24 @@
   "private": true,
   "scripts": {
     "postinstall": "yarn playwright install",
-    "build:components": "npm-run-all --sequential build:components:*",
-    "build:components:production": "vite build --config src/components/vite.config.ts",
-    "build:components:development": "NODE_ENV=development vite build --mode development --config src/components/vite.config.ts",
-    "build:react": "npm-run-all --sequential build:react:*",
+    "build:elements": "npm-run-all --sequential build:elements:* build:elements-experimental:*",
+    "build:elements:production": "vite build --config src/elements/vite.config.ts",
+    "build:elements:development": "NODE_ENV=development vite build --mode development --config src/elements/vite.config.ts",
+    "build:elements-experimental:production": "vite build --config src/elements-experimental/vite.config.ts",
+    "build:elements-experimental:development": "NODE_ENV=development vite build --mode development --config src/elements-experimental/vite.config.ts",
+    "build:react": "npm-run-all --sequential build:react:* build:react-experimental:*",
     "build:react:production": "vite build --config src/react/vite.config.ts",
     "build:react:development": "NODE_ENV=development vite build --mode development --config src/react/vite.config.ts",
+    "build:react-experimental:production": "vite build --config src/react-experimental/vite.config.ts",
+    "build:react-experimental:development": "NODE_ENV=development vite build --mode development --config src/react-experimental/vite.config.ts",
     "build:storybook": "storybook build --quiet --output-dir dist/storybook --stats-json",
     "build:visual-regression-app": "vite build --config src/visual-regression-app/vite.config.ts",
-    "build": "npm-run-all --sequential build:components build:react build:storybook",
+    "build": "npm-run-all --sequential build:elements build:react build:storybook",
     "docs": "npm-run-all --sequential docs:manifest docs:to-md",
-    "docs:manifest": "custom-elements-manifest analyze --config tools/manifest/custom-elements-manifest.config.js",
-    "docs:to-md": "tsx scripts/docs_generate.ts",
+    "docs:manifest": "npm-run-all --sequential docs:manifest:*",
+    "docs:manifest:elements": "custom-elements-manifest analyze --config tools/manifest/elements-custom-elements-manifest.config.js",
+    "docs:manifest:elements-experimental": "custom-elements-manifest analyze --config tools/manifest/elements-experimental-custom-elements-manifest.config.js",
+    "docs:to-md": "tsx tools/docs/docs_generate.ts",
     "format": "prettier \"**/*\" --write --ignore-unknown",
     "generate": "tsx tools/generate-component/index.mts",
     "generate:chromatic-stories": "tsx scripts/chromatic-stories-generator.ts",
@@ -46,8 +52,10 @@
     "lint:lit": "yarn lit-analyzer \"src/**/*.ts\"",
     "lint:circular-imports": "madge --circular --ts-config ./tsconfig.json --extensions ts ./src",
     "lint:tsc": "npm-run-all --sequential lint:tsc:*",
-    "lint:tsc:components": "tsc --noEmit --project src/components/tsconfig.json",
-    "lint:tsc:components-spec": "tsc --noEmit --project src/components/tsconfig.spec.json",
+    "lint:tsc:components": "tsc --noEmit --project src/elements/tsconfig.json",
+    "lint:tsc:components-spec": "tsc --noEmit --project src/elements/tsconfig.spec.json",
+    "lint:tsc:components-experimental": "tsc --noEmit --project src/elements-experimental/tsconfig.json",
+    "lint:tsc:components-experimental-spec": "tsc --noEmit --project src/elements-experimental/tsconfig.spec.json",
     "lint:tsc:visual-regression-app": "tsc --noEmit --project src/visual-regression-app/tsconfig.json",
     "start": "storybook dev -p 6006",
     "start:visual-regression-app": "vite --config src/visual-regression-app/vite.config.ts",

diff --git a/scripts/migrate-index.ts b/scripts/migrate-index.ts
@@ -4,7 +4,7 @@ import { basename, dirname } from 'path';
 import * as glob from 'glob';
 
 const indexFiles = glob.sync('**/index.ts', {
-  cwd: dirname(import.meta.resolve('../src/components')),
+  cwd: dirname(import.meta.resolve('../src/elements')),
   absolute: true,
 });
 for (const indexFile of indexFiles) {

diff --git a/scripts/migrate-ssr-e2e.ts b/scripts/migrate-ssr-e2e.ts
@@ -22,11 +22,11 @@ function* iterate(node: ts.Node): Generator<ts.Node, void, unknown> {
   }
 }
 
-const testingDir = new URL('../src/components/core/testing', import.meta.url).pathname;
+const testingDir = new URL('../src/elements/core/testing', import.meta.url).pathname;
 const e2eFiles = glob.sync('**/*.e2e.ts', { cwd: new URL('..', import.meta.url), absolute: true });
 const componentIndexes = glob
-  .sync('src/components/**/index.ts', { cwd: new URL('..', import.meta.url), absolute: true })
-  .filter((f) => !f.includes('/components/core/'))
+  .sync('src/elements/**/index.ts', { cwd: new URL('..', import.meta.url), absolute: true })
+  .filter((f) => !f.includes('/elements/core/'))
   .sort()
   .sort((a, b) => b.length - a.length);
 for (const file of e2eFiles) {