Merge remote-tracking branch 'origin/react-demo-app' into react-demo-app

.github/workflows/deploy-pages.yml

@@ -23,10 +23,16 @@ jobs:
 
       - uses: ./.github/workflows/actions/install
 
+      - name: Install optional theme
+        run: pnpm exec ix-theme-downloader
+        env:
+          CSC_TOKEN: ${{ secrets.CSC_TOKEN }}
+
       - name: Build React Starter
         run: pnpm build
         env:
           REACT_BASE: /ix-starter/react-starter/
+          VITE_THEME: 1
 
       - name: Deploy GitHub Pages 🚀
         uses: JamesIves/github-pages-deploy-action@v4

apps/react-starter/.gitignore

@@ -27,3 +27,4 @@ dist-ssr
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+public/theme

apps/react-starter/eslint.config.js

@@ -10,6 +10,7 @@ export default tseslint.config(
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ["**/*.{ts,tsx}"],
+    ignores: ["**/public/**"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,

apps/react-starter/package.json

@@ -34,6 +34,7 @@
     "@siemens/ix-aggrid": "^2.2.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@types/fs-extra": "^11.0.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -42,6 +43,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "fs-extra": "^11.2.0",
     "globals": "^15.9.0",
     "happy-dom": "^15.7.4",
     "prettier": "^3.0.3",

apps/react-starter/src/App.tsx

@@ -15,9 +15,10 @@ import {
 } from "@siemens/ix-react";
 import * as echarts from "echarts/core";
 import { registerTheme } from "@siemens/ix-echarts";
-import { useDataStore } from "./pages/store/device-store.ts";
+import { useDataStore } from "./pages/store/device-store";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import Logo from "./Logo";
 
 registerTheme(echarts);
 
@@ -43,9 +44,14 @@ function App() {
   return (
     <IxApplication>
       <IxApplicationHeader name="Siemens Industrial Experience">
+        <Logo />
         <IxAvatar></IxAvatar>
       </IxApplicationHeader>
-      <IxMenu enableToggleTheme i18nToggleTheme={t("toggle-theme")} i18nSettings={t("settings.title")}>
+      <IxMenu
+        enableToggleTheme
+        i18nToggleTheme={t("toggle-theme")}
+        i18nSettings={t("settings.title")}
+      >
         <NavLink to="/">
           {({ isActive }: { isActive: boolean }) => (
             <IxMenuItem active={isActive} icon="home">
@@ -62,14 +68,6 @@ function App() {
           )}
         </NavLink>
 
-        {/* <NavLink to="/analytics">
-          {({ isActive }) => (
-            <IxMenuItem active={isActive} icon="piechart">
-              Analytics
-            </IxMenuItem>
-          )}
-        </NavLink> */}
-
         <IxMenuSettings label={t("settings.title")}>
           <IxMenuSettingsItem label={t("settings.user-settings")}>
             <span className="language-switch-label">{t("language.title")}:</span>

apps/react-starter/src/Logo.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 MyCompany = () => {
+  return (
+    <svg width="77" height="32" viewBox="0 0 77 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M76 10H1V11H76V10ZM24.4788 17.042L26.0203 17.5308C25.7839 18.3901 25.3901 19.0293 24.8386 19.4482C24.2908 19.8636 23.5943 20.0713 22.7493 20.0713C21.7037 20.0713 20.8443 19.715 20.1711 19.0024C19.498 18.2863 19.1614 17.3088 19.1614 16.0698C19.1614 14.7593 19.4998 13.7424 20.1765 13.019C20.8533 12.2922 21.7431 11.9287 22.8459 11.9287C23.8092 11.9287 24.5916 12.2134 25.1931 12.7827C25.5512 13.1193 25.8197 13.6027 25.9988 14.2329L24.425 14.6089C24.3319 14.2007 24.1368 13.8784 23.8396 13.6421C23.546 13.4058 23.1879 13.2876 22.7654 13.2876C22.1817 13.2876 21.7073 13.4971 21.342 13.916C20.9804 14.335 20.7996 15.0135 20.7996 15.9517C20.7996 16.9471 20.9786 17.6561 21.3367 18.0786C21.6947 18.5011 22.1602 18.7124 22.7332 18.7124C23.1557 18.7124 23.5191 18.5781 23.8235 18.3096C24.1278 18.041 24.3463 17.6185 24.4788 17.042ZM2.91919 12.063V19.937H4.39624V13.7388L5.95386 19.937H7.48462L9.04761 13.7388V19.937H10.5247V12.063H8.13989L6.72729 17.4341L5.29858 12.063H2.91919ZM14.1716 16.623V19.937H15.7561V16.6338L18.6511 12.063H16.8196L15.0042 15.1782L13.1511 12.063H11.2874L14.1716 16.623ZM27.4275 14.0288C27.1876 14.5731 27.0676 15.2463 27.0676 16.0483C27.0676 17.3016 27.4132 18.2863 28.1042 19.0024C28.7953 19.715 29.7263 20.0713 30.8972 20.0713C32.0538 20.0713 32.9776 19.7132 33.6687 18.9971C34.3598 18.2773 34.7053 17.2819 34.7053 16.0107C34.7053 14.7288 34.3562 13.728 33.658 13.0083C32.9633 12.2886 32.0359 11.9287 30.8757 11.9287C30.2348 11.9287 29.669 12.0326 29.1785 12.2402C28.8097 12.3942 28.4695 12.6305 28.158 12.9492C27.85 13.2679 27.6065 13.6278 27.4275 14.0288ZM29.3235 18.0249C28.9117 17.563 28.7058 16.8862 28.7058 15.9946C28.7058 15.0887 28.9063 14.4119 29.3074 13.9644C29.7084 13.5132 30.2366 13.2876 30.8918 13.2876C31.5471 13.2876 32.0717 13.5096 32.4656 13.9536C32.863 14.3976 33.0618 15.0708 33.0618 15.9731C33.0618 16.8862 32.8577 17.5719 32.4495 18.0303C32.0448 18.485 31.5256 18.7124 30.8918 18.7124C30.2581 18.7124 29.7353 18.4832 29.3235 18.0249ZM35.9299 19.937V12.063H38.3093L39.738 17.4341L41.1506 12.063H43.5354V19.937H42.0583V13.7388L40.4954 19.937H38.9646L37.407 13.7388V19.937H35.9299ZM45.1145 12.063V19.937H46.7043V16.9668H47.741C48.4607 16.9668 49.0103 16.9292 49.3899 16.854C49.6692 16.7931 49.9431 16.6696 50.2117 16.4834C50.4838 16.2936 50.7076 16.034 50.8831 15.7046C51.0585 15.3752 51.1462 14.9688 51.1462 14.4854C51.1462 13.8587 50.9941 13.3485 50.6897 12.9546C50.3853 12.5571 50.0076 12.2993 49.5564 12.1812C49.2628 12.1024 48.6326 12.063 47.6658 12.063H45.1145ZM46.7043 15.6294V13.395H47.4724C48.0453 13.395 48.4267 13.4129 48.6165 13.4487C48.8743 13.4953 49.0873 13.6117 49.2556 13.7979C49.4239 13.984 49.5081 14.2204 49.5081 14.5068C49.5081 14.7396 49.4472 14.9437 49.3254 15.1191C49.2073 15.2946 49.0426 15.4235 48.8313 15.5059C48.62 15.5882 48.2011 15.6294 47.5745 15.6294H46.7043ZM58.7356 19.937H57.0061L56.3186 18.1484H53.1711L52.5212 19.937H50.8347L53.9016 12.063H55.5828L58.7356 19.937ZM55.8083 16.8218L54.7234 13.8999L53.6599 16.8218H55.8083ZM59.6003 12.063V19.937H61.0774V14.8022L64.2517 19.937H65.8469V12.063H64.3699V17.3213L61.1472 12.063H59.6003ZM69.6013 19.937V16.623L66.717 12.063H68.5808L70.4338 15.1782L72.2493 12.063H74.0808L71.1858 16.6338V19.937H69.6013ZM1 21H76V22H1V21Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+const Logo = () => {
+  return (
+    <div slot="logo">
+      <MyCompany />
+    </div>
+  );
+};
+
+export default Logo;

apps/react-starter/src/main.tsx

@@ -4,11 +4,31 @@ import { createHashRouter, RouterProvider } from "react-router-dom";
 import { IxApplicationContext } from "@siemens/ix-react";
 import "./index.css";
 import "./i18n";
-import "@siemens/ix/dist/siemens-ix/siemens-ix.css";
 import App from "./App.tsx";
 import OverviewPage from "./pages/overview/index.tsx";
 import DevicesPage from "./pages/devices/index.tsx";
 import AnalyticsPage from "./pages/analytics/index.tsx";
+import "@siemens/ix/dist/siemens-ix/siemens-ix.css";
+
+function optionalTheme() {
+  if (import.meta.env.VITE_THEME) {
+    const css = `${import.meta.env.BASE_URL}theme/dist/ix-brand-theme/ix-brand-theme.css`;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = css;
+    document.head.appendChild(link);
+
+    const loader = `${import.meta.env.BASE_URL}theme/dist/esm/ix-brand-theme.js`;
+    const script = document.createElement("script");
+    script.src = loader;
+    script.type = "module";
+    document.head.appendChild(script);
+
+    document.body.classList.add("theme-brand-dark");
+  }
+}
+
+optionalTheme();
 
 const router = createHashRouter([
   {

apps/react-starter/vite.config.ts

@@ -1,8 +1,28 @@
 import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
+import path from "path";
+import fs from "fs-extra";
 
 const base = process.env.REACT_BASE || "/";
 
+function checkForAdditionalTheme() {
+  try {
+    const themePackage = import.meta.resolve("@siemens/ix-brand-theme");
+    const theme = path.join(themePackage.replace("file://", ""), "..", "..");
+
+    fs.copySync(theme, path.join(__dirname, "public", "theme"), {
+      filter: (src) => {
+        return !src.includes("ix-brand-theme/node_modules");
+      },
+    });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (e) {
+    console.log("No additional theme found");
+  }
+}
+
+checkForAdditionalTheme();
+
 // https://vitejs.dev/config/
 export default defineConfig({
   base,

package.json

@@ -11,7 +11,8 @@
   "devDependencies": {
     "eslint": "^8.48.0",
     "prettier": "^3.0.3",
-    "turbo": "latest"
+    "turbo": "latest",
+    "ix-theme-downloader": "workspace:*"
   },
   "packageManager": "pnpm@8.6.10",
   "name": "ix-starter"