diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 7014613519..2987811444 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -8,6 +8,7 @@ on: - opened - reopened - synchronize + - labeled concurrency: pr-${{ github.ref }} @@ -104,7 +105,6 @@ jobs: merge-core-reports: if: failure() needs: [visual-testing-core] - runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 @@ -125,6 +125,7 @@ jobs: name: core-html-report--attempt-${{ github.run_attempt }} path: playwright-report retention-days: 2 + unit: if: ${{ needs.changes.outputs.core == 'true' || needs.changes.outputs.angular == 'true' }} needs: [build] diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000000..79d16855e0 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,2 @@ +[build] + ignore = "GIT_COMMIT_MESSAGE=$(git show -s --format=%s $CACHED_COMMIT_REF) node ./scripts/ignore-netlify.js" diff --git a/packages/core/.eslintrc.json b/packages/core/.eslintrc.json index 58c1c41089..a7ac4abc24 100644 --- a/packages/core/.eslintrc.json +++ b/packages/core/.eslintrc.json @@ -3,7 +3,7 @@ "parserOptions": { "project": "./tsconfig.json" }, - "extends": ["plugin:@stencil-community/recommended", "ix"], + "extends": [/* "plugin:@typescript-eslint/recommended", */ "plugin:@stencil-community/recommended", "ix"], "rules": { "@stencil-community/async-methods": 0, "@stencil-community/own-props-must-be-private": 0, @@ -12,6 +12,7 @@ "@stencil-community/ban-default-true": ["warn"], "react/jsx-no-bind": 0, "react/jsx-uses-react": 0, - "react/react-in-jsx-scope": 0 + "react/react-in-jsx-scope": 0, + "@typescript-eslint/no-confusing-non-null-assertion": "error" } } diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 4a0d82ec64..65f7098974 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -2,7 +2,7 @@ "timestamp": "", "compiler": { "name": "@stencil/core", - "version": "4.12.3", + "version": "4.12.6", "typescriptVersion": "5.3.3" }, "components": [ diff --git a/packages/core/package.json b/packages/core/package.json index 60f8eedd28..f6c4c2898c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -43,7 +43,7 @@ }, "dependencies": { "@floating-ui/dom": "^1.5.1", - "@stencil/core": "^4.12.3", + "@stencil/core": "^4.12.6", "@types/luxon": "^3.3.7", "animejs": "~3.2.1", "hyperlist": "^1.0.0", diff --git a/packages/documentation/docs/controls/_panes_styleguide.md b/packages/documentation/docs/controls/_panes_styleguide.md index e6ce9084f2..8f2ae39a36 100644 --- a/packages/documentation/docs/controls/_panes_styleguide.md +++ b/packages/documentation/docs/controls/_panes_styleguide.md @@ -53,6 +53,6 @@ Panes have two states: collapsed and expanded. The appearance of the states vari ## Related patterns -[Drawers](./drawers.md) +[Drawers](./drawer.md) [Header](../controls/application-frame/application-header.md) [Menu](../controls/application-frame/application-menu.md) diff --git a/packages/documentation/docs/introduction.md b/packages/documentation/docs/introduction.md index 4cdfc3eace..2f3aed253f 100644 --- a/packages/documentation/docs/introduction.md +++ b/packages/documentation/docs/introduction.md @@ -15,9 +15,9 @@ import BlazorIcon from '@site/static/img/blazor.svg'; # Welcome to Siemens Industrial Experience -

+ Siemens Industrial Experience is an open-source design system for designers and developers to consistently create the perfect digital experience for partners and customers within industrial contexts. Siemens Industrial Experience gives you access to a broad range of UI patterns, web-based code implementations, design tools, resources and content guidelines to accelerate collaboration between designers, developers and writers, helping to build efficient and consistent products. -

+ ## Guiding principles @@ -39,7 +39,7 @@ Siemens Industrial Experience provides and maintains a Figma design kit containi React Web Components Vue (experimental) - Blazor (experimental) + Blazor (experimental) ## Contribute diff --git a/packages/documentation/docusaurus.config.ts b/packages/documentation/docusaurus.config.ts index ddbacb3e52..46aab5c310 100644 --- a/packages/documentation/docusaurus.config.ts +++ b/packages/documentation/docusaurus.config.ts @@ -7,11 +7,12 @@ * LICENSE file in the root directory of this source tree. */ import type * as Preset from '@docusaurus/preset-classic'; -import type { Config } from '@docusaurus/types'; +import type { Config, PluginConfig } from '@docusaurus/types'; import { themes as prismThemes } from 'prism-react-renderer'; import figmaPlugin from 'figma-plugin'; import path from 'path'; import fs from 'fs'; +import versionDeployment from './version-deployment.json' with { type: 'json '}; let withBrandTheme = false; @@ -21,6 +22,73 @@ const libCss = [ require.resolve('@siemens/ix/dist/siemens-ix/theme/legacy-classic-light.css'), ]; +const useFastStart = !!process.env.FAST_START; + +const isDeployPreview = process.env.CONTEXT === 'deploy-preview'; +const isDevPreview = process.env.CONTEXT === 'dev'; + +const plugins: PluginConfig[] = [ + 'docusaurus-plugin-sass', +] + +if (useFastStart) { + console.warn('🚧 🚧 🚧 🚧 🚧 🚧'); + console.warn('🚧 🚧 🚧 🚧 🚧 🚧'); + console.warn('Fast start enabled'); + console.warn('No figma plugin enabled'); + console.warn('No search plugin enabled'); + console.warn('🚧 🚧 🚧 🚧 🚧 🚧'); + console.warn('🚧 🚧 🚧 🚧 🚧 🚧'); +} + +if (!useFastStart) { + plugins.push([ + require.resolve('docusaurus-lunr-search'), + { + languages: ['en'], + excludeRoutes: ['**/installation/CHANGELOG', '**/auto-generated/**/*'], + }, + ],) +} + +function getAnnouncementBarConfig() { + + const latestVersion = versionDeployment.versions.find(version => version.id === versionDeployment.currentVersion); + + if (versionDeployment.currentVersion !== versionDeployment.latestVersion) { + return { + announcementBar: { + content: + `You are looking at an different version ${latestVersion?.label} then the latest supported version. Visit https://ix.siemens.io for the latest version.`, + isCloseable: false, + backgroundColor: 'var(--theme-color-warning)', + }, + }; + } + + if (isDevPreview) { + return { + announcementBar: { + content: + 'This is the development documentation for Siemens Industrial Experience. Visit https://ix.siemens.io for the latest version.', + isCloseable: false, + backgroundColor: 'var(--theme-color-warning)', + }, + }; + } + + if (isDeployPreview) { + return { + announcementBar: { + content: + 'This is the preview documentation for Siemens Industrial Experience. Visit https://ix.siemens.io for the latest version.', + isCloseable: false, + backgroundColor: 'var(--theme-color-warning)', + }, + }; + } +} + if (!process.env.CI) { try { // Check if theme is existing inside node_modes @@ -70,7 +138,7 @@ const config: Config = { url: 'https://ix.siemens.io', baseUrl: baseUrl, onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'warn', + onBrokenMarkdownLinks: 'throw', favicon: 'img/favicon.ico', organizationName: 'Siemens AG', projectName: 'ix', @@ -85,7 +153,7 @@ const config: Config = { // Please change this to your repo. editUrl: 'https://www.github.com/siemens/ix/edit/main/packages/documentation/', - remarkPlugins: [ + remarkPlugins: useFastStart ? [] : [ figmaPlugin({ baseUrl: `${baseUrl}figma`, figmaFolder: `${path.join(__dirname, 'static', 'figma')}`, @@ -103,8 +171,10 @@ const config: Config = { ], customFields: { withBrandTheme, + versionDeployment }, themeConfig: { + ...getAnnouncementBarConfig(), metadata: [ { name: 'keywords', @@ -126,13 +196,7 @@ const config: Config = { alt: 'Siemens AG', src: 'img/logo.svg', }, - items: [ - // Remove docs version until library needs to publish an major release - // { - // type: 'docsVersionDropdown', - // position: 'right', - // }, - ], + items: [], }, footer: { copyright: `© Siemens 1996 - ${new Date().getFullYear()}`, @@ -201,16 +265,7 @@ const config: Config = { darkTheme: prismThemes.dracula, }, } satisfies Preset.ThemeConfig, - plugins: [ - 'docusaurus-plugin-sass', - [ - require.resolve('docusaurus-lunr-search'), - { - languages: ['en'], - excludeRoutes: ['**/installation/CHANGELOG', '**/auto-generated/**/*'], - }, - ], - ], + plugins: plugins, }; module.exports = config; diff --git a/packages/documentation/src/components/SwitchTheme.tsx b/packages/documentation/src/components/SwitchTheme.tsx index 9e6611d9cf..0568f71eb1 100644 --- a/packages/documentation/src/components/SwitchTheme.tsx +++ b/packages/documentation/src/components/SwitchTheme.tsx @@ -33,7 +33,12 @@ function ThemeEntry(props: { ); } -export function SwitchTheme(props: { icon: string; label: string }) { + +export function SwitchTheme(props: { + icon: string; + label: string; + isMobile: boolean; +}) { const context = useDocusaurusContext(); const [open, setOpen] = useState(false); @@ -104,7 +109,11 @@ export function SwitchTheme(props: { icon: string; label: string }) { } return ( - + {registeredThemes.map(({ id, label, color }) => { return ( diff --git a/packages/documentation/src/components/VersionRedirect/index.tsx b/packages/documentation/src/components/VersionRedirect/index.tsx new file mode 100644 index 0000000000..29566d52e8 --- /dev/null +++ b/packages/documentation/src/components/VersionRedirect/index.tsx @@ -0,0 +1,40 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { IxDropdownButton, IxDropdownItem } from '@siemens/ix-react'; + +export default function VersionRedirect() { + const context = useDocusaurusContext(); + const versionDeployment = context.siteConfig.customFields + .versionDeployment as any; + + const { currentVersion } = versionDeployment; + const selected = versionDeployment.versions.find( + (version) => version.id === currentVersion + ); + + function routeToVersion(link: string) { + if (typeof window !== 'undefined') { + window.location.href = link; + } + } + + return ( + + {versionDeployment.versions.map((version) => ( + routeToVersion(version.href)} + > + ))} + + ); +} diff --git a/packages/documentation/src/css/custom.scss b/packages/documentation/src/css/custom.scss index dc3d498d43..78132bc0f0 100644 --- a/packages/documentation/src/css/custom.scss +++ b/packages/documentation/src/css/custom.scss @@ -170,7 +170,10 @@ aside { } .dropdown__link { + display: inline-flex; + align-items: center; text-decoration: auto; + width: 100%; } .menu__link { diff --git a/packages/documentation/src/theme/Navbar/Content/index.tsx b/packages/documentation/src/theme/Navbar/Content/index.tsx index ae212d074f..eceae8bd2c 100644 --- a/packages/documentation/src/theme/Navbar/Content/index.tsx +++ b/packages/documentation/src/theme/Navbar/Content/index.tsx @@ -13,6 +13,7 @@ import NavbarSearch from '@theme/Navbar/Search'; import { SwitchTheme } from '@site/src/components/SwitchTheme'; import styles from './styles.module.css'; +import VersionRedirect from '@site/src/components/VersionRedirect'; function useNavbarItems() { // TODO temporary casting until ThemeConfig type is improved @@ -90,16 +91,15 @@ export default function NavbarContent(): JSX.Element { // Ask the user to add the respective navbar items => more flexible <> - - {isDocs() ? null : ( <> - {!searchBarItem && ( - - - - )} - + + + )} diff --git a/packages/documentation/version-deployment.json b/packages/documentation/version-deployment.json new file mode 100644 index 0000000000..55d820f424 --- /dev/null +++ b/packages/documentation/version-deployment.json @@ -0,0 +1,16 @@ +{ + "latestVersion": "v2", + "currentVersion": "v3-preview", + "versions": [ + { + "id": "v3-preview", + "href": "https://v3-preview.ix.siemens.io", + "label": "V3 (Preview)" + }, + { + "id": "v2", + "href": "https://ix.siemens.io", + "label": "V2 (Active)" + } + ] +} diff --git a/packages/eslint-config-ix/index.js b/packages/eslint-config-ix/index.js index 45486f7c6a..c74e2259ca 100644 --- a/packages/eslint-config-ix/index.js +++ b/packages/eslint-config-ix/index.js @@ -11,7 +11,7 @@ /** @type {import('eslint').Linter.Config} */ module.exports = { extends: ['turbo', 'prettier'], - plugins: ['prettier'], + plugins: ['prettier', '@typescript-eslint'], rules: { 'prettier/prettier': 'error', quotes: [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9c3ae8983f..bada827a11 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -272,8 +272,8 @@ importers: specifier: ^2.11.0 version: 2.11.8 '@stencil/core': - specifier: ^4.12.3 - version: 4.12.3 + specifier: ^4.12.6 + version: 4.12.6 '@types/luxon': specifier: ^3.3.7 version: 3.3.7 @@ -298,19 +298,19 @@ importers: version: 0.7.1(@typescript-eslint/eslint-plugin@6.18.1)(@typescript-eslint/parser@6.18.1)(eslint-plugin-react@7.33.2)(eslint@8.56.0)(typescript@5.3.3) '@stencil-community/postcss': specifier: ^2.2.0 - version: 2.2.0(@stencil/core@4.12.3) + version: 2.2.0(@stencil/core@4.12.6) '@stencil/angular-output-target': specifier: ^0.8.3 - version: 0.8.3(@stencil/core@4.12.3) + version: 0.8.3(@stencil/core@4.12.6) '@stencil/react-output-target': specifier: ^0.5.3 - version: 0.5.3(@stencil/core@4.12.3) + version: 0.5.3(@stencil/core@4.12.6) '@stencil/sass': specifier: ^3.0.8 - version: 3.0.8(@stencil/core@4.12.3) + version: 3.0.8(@stencil/core@4.12.6) '@stencil/vue-output-target': specifier: ^0.8.7 - version: 0.8.7(@stencil/core@4.12.3) + version: 0.8.7(@stencil/core@4.12.6) '@testing-library/dom': specifier: ^8.11.0 version: 8.20.1 @@ -6992,21 +6992,21 @@ packages: typescript: 5.3.3 dev: true - /@stencil-community/postcss@2.2.0(@stencil/core@4.12.3): + /@stencil-community/postcss@2.2.0(@stencil/core@4.12.6): resolution: {integrity: sha512-PuPdjqgF6HdvSLwS6fpLf1TRzd3bd6zqpsICCUA0u9sxPnwrsIpx1xYyA/K9hSWrmyUg0WhHPvkX9k26N5DCnw==} peerDependencies: '@stencil/core': '>=2.0.0 || >=3.0.0 || >=4.0.0' dependencies: - '@stencil/core': 4.12.3 + '@stencil/core': 4.12.6 postcss: 8.4.31 dev: true - /@stencil/angular-output-target@0.8.3(@stencil/core@4.12.3): + /@stencil/angular-output-target@0.8.3(@stencil/core@4.12.6): resolution: {integrity: sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==} peerDependencies: '@stencil/core': '>=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0' dependencies: - '@stencil/core': 4.12.3 + '@stencil/core': 4.12.6 dev: true /@stencil/core@3.2.1: @@ -7014,34 +7014,34 @@ packages: engines: {node: '>=14.10.0', npm: '>=6.0.0'} hasBin: true - /@stencil/core@4.12.3: - resolution: {integrity: sha512-9XkE9i2aXPlApMNeq3tbVHKx0eAfDc7QGyIl6t5NMuQFTOGL5Xd1soF38d+hCIDpUoUUtY7jXWg+iFrlrMzQhg==} + /@stencil/core@4.12.6: + resolution: {integrity: sha512-15JO2TdaxGVKNdLZb/2TtDa+juj3XGD/V0y/disgdzYYSnajgSh06nwODfdHz9eTUh1Hisz+KIo857I1rCZrfg==} engines: {node: '>=16.0.0', npm: '>=7.10.0'} hasBin: true - /@stencil/react-output-target@0.5.3(@stencil/core@4.12.3): + /@stencil/react-output-target@0.5.3(@stencil/core@4.12.6): resolution: {integrity: sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==} peerDependencies: '@stencil/core': '>=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0' dependencies: - '@stencil/core': 4.12.3 + '@stencil/core': 4.12.6 dev: true - /@stencil/sass@3.0.8(@stencil/core@4.12.3): + /@stencil/sass@3.0.8(@stencil/core@4.12.6): resolution: {integrity: sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==} engines: {node: '>=12.0.0', npm: '>=6.0.0'} peerDependencies: '@stencil/core': '>=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0' dependencies: - '@stencil/core': 4.12.3 + '@stencil/core': 4.12.6 dev: true - /@stencil/vue-output-target@0.8.7(@stencil/core@4.12.3): + /@stencil/vue-output-target@0.8.7(@stencil/core@4.12.6): resolution: {integrity: sha512-hgOzbKKgLdCFrhLpmaw/qQrPSXl6hZ09K+j3p/iWh3esq6sxnwuW1PJKLniwkT4Z/JlDIk6stGPGQYi+WE5I2Q==} peerDependencies: '@stencil/core': '>=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0' dependencies: - '@stencil/core': 4.12.3 + '@stencil/core': 4.12.6 dev: true /@svgr/babel-plugin-add-jsx-attribute@6.5.1(@babel/core@7.23.7): @@ -16284,7 +16284,7 @@ packages: pretty-format: 29.7.0 slash: 3.0.0 strip-json-comments: 3.1.1 - ts-node: 10.9.1(@types/node@18.18.7)(typescript@4.7.4) + ts-node: 10.9.1(@types/node@16.18.70)(typescript@5.3.3) transitivePeerDependencies: - babel-plugin-macros - supports-color diff --git a/scripts/ignore-netlify.js b/scripts/ignore-netlify.js new file mode 100644 index 0000000000..7fbb58457f --- /dev/null +++ b/scripts/ignore-netlify.js @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const GIT_COMMIT_MESSAGE = process.env.GIT_COMMIT_MESSAGE; + +if (GIT_COMMIT_MESSAGE.includes('[deploy netlify]')) { + process.exit(1); +} + +process.exit(0);