docs(installation): align instructions between frameworks (#1282)

Co-authored-by: Lukas Maurer <[email protected]>
siemens · May 21, 2024 · 2254e56 · 2254e56
1 parent 55d9fca
commit 2254e56
Show file tree

Hide file tree

Showing 21 changed files with 1,546 additions and 1,192 deletions.
diff --git a/packages/documentation/docs/installation/angular.md b/packages/documentation/docs/installation/angular.md
@@ -3,22 +3,30 @@ sidebar_position: 1
 sidebar_title: Angular
 title: Angular
 ---
-
-### Install dependencies
-
-Install `@siemens/ix-angular` and `@siemens/ix-icons` using a package manager:
-
-#### npm
-
-```
-npm i -S @siemens/ix-angular @siemens/ix-icons
-```
-
-#### yarn
-
-```
-yarn add @siemens/ix-angular @siemens/ix-icons
-```
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+### Library installation
+
+Install `@siemens/ix`, `@siemens/ix-angular` and `@siemens/ix-icons` using a package manager:
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+    ```
+    npm install @siemens/ix @siemens/ix-angular @siemens/ix-icons
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    ```
+    yarn add @siemens/ix @siemens/ix-angular @siemens/ix-icons
+    ```
+  </TabItem>
+  <TabItem value="pnpm" label="PNPM">
+    ```
+    pnpm add @siemens/ix @siemens/ix-angular @siemens/ix-icons
+    ```
+  </TabItem>
+</Tabs>
 
 ### Import styles
 

diff --git a/packages/documentation/docs/installation/javascript.md b/packages/documentation/docs/installation/javascript.md
@@ -3,24 +3,31 @@ sidebar_position: 3
 sidebar_title: Web Components
 title: Web Components
 ---
-
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 import Playground from '@site/src/components/PlaygroundV2';
 
-## Installation
+### Library installation
 
 Install `@siemens/ix` and `@siemens/ix-icons` using a package manager:
 
-### npm
-
-```
-npm i -S @siemens/ix @siemens/ix-icons
-```
-
-### yarn
-
-```
-yarn add @siemens/ix @siemens/ix-icons
-```
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+    ```
+    npm install @siemens/ix @siemens/ix-icons
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    ```
+    yarn add @siemens/ix @siemens/ix-icons
+    ```
+  </TabItem>
+  <TabItem value="pnpm" label="PNPM">
+    ```
+    pnpm add @siemens/ix @siemens/ix-icons
+    ```
+  </TabItem>
+</Tabs>
 
 ## Build
 
@@ -50,13 +57,12 @@ In the following section we will describe how you can build an application with
 
 ```javascript
 import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
-import { applyPolyfills, defineCustomElements } from '@siemens/ix/loader';
-import { defineCustomElements as ixIconsDefineCustomElements } from '@siemens/ix-icons/loader';
+import { defineCustomElements } from '@siemens/ix/loader';
+import { defineCustomElements as defineIxIconCustomElement } from '@siemens/ix-icons/loader';
 
 (async () => {
-  await applyPolyfills();
-  await ixIconsDefineCustomElements();
-  await defineCustomElements();
+  defineIxIconCustomElement();
+  defineCustomElements();
 })();
 ```
 

diff --git a/packages/documentation/docs/installation/react.md b/packages/documentation/docs/installation/react.md
@@ -3,22 +3,30 @@ sidebar_position: 2
 sidebar_title: React
 title: React
 ---
-
-### Install dependencies
-
-Install `@siemens/ix-react` and `@siemens/ix-icons` using a package manager:
-
-#### npm
-
-```
-npm i -S @siemens/ix-react @siemens/ix-icons
-```
-
-#### yarn
-
-```
-yarn add @siemens/ix-react@latest @siemens/ix-icons
-```
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+### Library installation
+
+Install `@siemens/ix`, `@siemens/ix-react` and `@siemens/ix-icons` using a package manager:
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+    ```
+    npm install @siemens/ix @siemens/ix-react @siemens/ix-icons
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    ```
+    yarn add @siemens/ix @siemens/ix-react @siemens/ix-icons
+    ```
+  </TabItem>
+  <TabItem value="pnpm" label="PNPM">
+    ```
+    pnpm add @siemens/ix @siemens/ix-react @siemens/ix-icons
+    ```
+  </TabItem>
+</Tabs>
 
 ### Import styles
 

diff --git a/packages/documentation/docs/installation/vue.md b/packages/documentation/docs/installation/vue.md
@@ -3,6 +3,8 @@ sidebar_position: 4
 sidebar_title: Vue
 title: Vue
 ---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 :::caution Experimental disclaimer
 
@@ -12,21 +14,27 @@ Nevertheless feedback of any kind will be helpful.
 
 :::
 
-### Install dependencies
-
-Install `@siemens/ix-vue` and `@siemens/ix-icons` using a package manager:
-
-#### npm
-
-```
-npm i -S @siemens/ix-vue @siemens/ix-icons
-```
-
-#### yarn
-
-```
-yarn add @siemens/ix-vue@latest @siemens/ix-icons
-```
+### Library installation
+
+Install `@siemens/ix`, `@siemens/ix-vue` and `@siemens/ix-icons` using a package manager:
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+    ```
+    npm install @siemens/ix @siemens/ix-vue @siemens/ix-icons
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    ```
+    yarn add @siemens/ix @siemens/ix-vue @siemens/ix-icons
+    ```
+  </TabItem>
+  <TabItem value="pnpm" label="PNPM">
+    ```
+    pnpm add @siemens/ix @siemens/ix-vue @siemens/ix-icons
+    ```
+  </TabItem>
+</Tabs>
 
 ### Usage
 

diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -20,17 +20,17 @@
     "generate-changelog": "ts-node -P ./scripts/tsconfig.json ./scripts/generate-changelog.ts"
   },
   "dependencies": {
-    "@docusaurus/core": "3.1.0",
-    "@docusaurus/preset-classic": "3.1.0",
-    "@docusaurus/theme-live-codeblock": "3.1.0",
+    "@docusaurus/core": "3.3.2",
+    "@docusaurus/preset-classic": "3.3.2",
+    "@docusaurus/theme-live-codeblock": "3.3.2",
     "@mdx-js/react": "^3.0.0",
     "@siemens/ix": "workspace:*",
     "@siemens/ix-echarts": "workspace:*",
-    "@siemens/ix-icons": "2.1.0",
+    "@siemens/ix-icons": "^2.0.0",
     "@siemens/ix-react": "workspace:*",
     "@stackblitz/sdk": "^1.8.1",
     "clsx": "^1.2.1",
-    "docusaurus-lunr-search": "^2.3.2",
+    "docusaurus-lunr-search": "^3.4.0",
     "docusaurus-plugin-sass": "^0.2.2",
     "execa": "^5.1.1",
     "html-test-app": "workspace:*",
@@ -42,9 +42,9 @@
     "sass": "^1.54.8"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.1.0",
-    "@docusaurus/tsconfig": "3.1.0",
-    "@docusaurus/types": "3.1.0",
+    "@docusaurus/module-type-aliases": "3.3.2",
+    "@docusaurus/tsconfig": "3.3.2",
+    "@docusaurus/types": "3.3.2",
     "@types/fs-extra": "^9.0.13",
     "@types/rimraf": "^3.0.2",
     "@types/tar": "^6.1.7",

diff --git a/packages/documentation/src/components/FrameworkSelection.tsx b/packages/documentation/src/components/FrameworkSelection.tsx
@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { IxSelect, IxSelectItem } from '@siemens/ix-react';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 export default function FrameworkSelection(): JSX.Element {
@@ -35,18 +36,18 @@ export default function FrameworkSelection(): JSX.Element {
   }, [ref]);
 
   return (
-    <ix-select
+    <IxSelect
       ref={ref}
       default-value={framework}
       style={{
         width: '100%',
       }}
     >
-      <ix-select-item
+      <IxSelectItem
         value="webcomponent"
         label="Webcomponent"
-      ></ix-select-item>
-      <ix-select-item value="angular" label="Angular"></ix-select-item>
-    </ix-select>
+      ></IxSelectItem>
+      <IxSelectItem value="angular" label="Angular"></IxSelectItem>
+    </IxSelect>
   );
 }
diff --git a/packages/documentation/src/components/Icons.tsx b/packages/documentation/src/components/Icons.tsx
@@ -11,6 +11,7 @@ import ICON_LIST from '@siemens/ix-icons/dist/sample.json';
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import styles from './Icons.module.css';
+import { IxIcon } from '@siemens/ix-react';
 
 const Icons: React.FC = () => {
   const refs = useRef<{ [k: string]: any }>({});
@@ -38,10 +39,10 @@ const Icons: React.FC = () => {
             <div
               key={icon}
               className={clsx(styles.Icon__Tile)}
-              onClick={() => {}}
+              onClick={() => { }}
             >
               <div>
-                <ix-icon name={icon}></ix-icon>
+                <IxIcon name={icon}></IxIcon>
               </div>
               <input
                 ref={(r) => {
@@ -51,7 +52,7 @@ const Icons: React.FC = () => {
                 type="text"
                 readOnly
                 value={icon}
-                onChange={() => {}}
+                onChange={() => { }}
               ></input>
             </div>
           ))}

diff --git a/packages/documentation/src/components/PlaygroundV2/index.tsx b/packages/documentation/src/components/PlaygroundV2/index.tsx
@@ -201,7 +201,7 @@ function SourceCodePreview(props: {
       const filesToFetch = [];
 
       if (props.framework === TargetFramework.ANGULAR) {
-        filesToFetch.push(...[`${props.name}.ts`, `${props.name}.html`]);
+        filesToFetch.push(...[`${props.name}.html`, `${props.name}.ts`]);
       }
 
       if (props.framework === TargetFramework.JAVASCRIPT) {

diff --git a/packages/documentation/src/components/SwitchTheme.tsx b/packages/documentation/src/components/SwitchTheme.tsx
@@ -14,6 +14,12 @@ import { ThemeChangeEvent } from '../utils/theme-change-event';
 import { getDefaultTheme } from './config';
 import styles from './SwitchTheme.module.css';
 
+function applyThemeToBody(themes: string[], theme: string) {
+  themes.forEach((t) => document.body.classList.remove(t));
+
+  setTimeout(() => document.body.classList.add(theme), 0)
+}
+
 function ThemeEntry(props: {
   label: string;
   color: string;
@@ -57,21 +63,6 @@ export function SwitchTheme(props: {
     },
   ]);
 
-  useEffect(() => {
-    let storedTheme = localStorage.getItem('theme');
-
-    if (!storedTheme) {
-      const theme = getDefaultTheme(context);
-      setTheme(theme);
-      localStorage.setItem('theme', theme);
-      storedTheme = theme;
-    } else {
-      setTheme(storedTheme);
-    }
-
-    document.body.className = storedTheme;
-  }, []);
-
   useEffect(() => {
     if (context.siteConfig.customFields.withBrandTheme) {
       setRegisteredThemes([
@@ -88,16 +79,19 @@ export function SwitchTheme(props: {
         },
       ]);
     }
+
+    let storedTheme = window.localStorage.getItem('docusaurus-theme');
+
+    onThemeChange(storedTheme || getDefaultTheme(context));
   }, []);
 
   const onThemeChange = (theme: string) => {
     setTheme(theme);
-    localStorage.setItem('theme', theme);
-    document.body.className = theme;
-
+    window.localStorage.setItem('docusaurus-theme', theme);
     dispatchThemeChange(theme);
-
     setOpen(false);
+
+    applyThemeToBody(registeredThemes.map((t) => t.id), theme);
   };
 
   function getLabel(id: string = 'theme-classic-dark') {