docs: fix preview examples (#1442)

packages/documentation/package.json

@@ -21,17 +21,17 @@
     "generate-previews": "ts-node -P ./scripts/tsconfig.json ./scripts/generate-preview-snippets.ts"
   },
   "dependencies": {
-    "@docusaurus/core": "3.4.0",
-    "@docusaurus/preset-classic": "3.4.0",
-    "@docusaurus/theme-live-codeblock": "3.4.0",
+    "@docusaurus/core": "3.3.0",
+    "@docusaurus/preset-classic": "3.3.0",
+    "@docusaurus/theme-live-codeblock": "3.3.0",
     "@mdx-js/react": "^3.0.0",
     "@siemens/ix": "workspace:*",
     "@siemens/ix-echarts": "workspace:*",
     "@siemens/ix-icons": "^2.0.0",
     "@siemens/ix-react": "workspace:*",
     "@stackblitz/sdk": "^1.8.1",
     "clsx": "^1.2.1",
-    "docusaurus-lunr-search": "^3.4.0",
+    "docusaurus-lunr-search": "^3.3.0",
     "docusaurus-plugin-sass": "^0.2.2",
     "execa": "^5.1.1",
     "html-test-app": "workspace:*",
@@ -47,9 +47,9 @@
     "sass": "^1.54.8"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.4.0",
-    "@docusaurus/tsconfig": "3.4.0",
-    "@docusaurus/types": "3.4.0",
+    "@docusaurus/module-type-aliases": "3.3.0",
+    "@docusaurus/tsconfig": "3.3.0",
+    "@docusaurus/types": "3.3.0",
     "@types/fs-extra": "^9.0.13",
     "@types/rimraf": "^3.0.2",
     "@types/tar": "^6.1.7",

packages/react-test-app/src/preview-examples/about-and-legal.tsx

@@ -16,8 +16,7 @@ import {
   IxMenuAbout,
   IxMenuAboutItem,
 } from '@siemens/ix-react';
-import React, { useLayoutEffect, useRef } from 'react';
-
+import { useLayoutEffect, useRef } from 'react';
 
 export default () => {
   const ref = useRef<HTMLIxMenuElement>(null);

packages/react-test-app/src/preview-examples/action-card.tsx

@@ -8,7 +8,6 @@
  */
 
 import { IxActionCard } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/aggrid.tsx

@@ -9,7 +9,6 @@
 
 import { GridOptions } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import React from 'react';
 
 const gridOptions = {
   columnDefs: [

packages/react-test-app/src/preview-examples/application-app-switch.tsx

@@ -22,7 +22,6 @@ import {
   IxMenu,
   IxMenuItem,
 } from '@siemens/ix-react';
-import React from 'react';
 
 const appSwitchConfig: AppSwitchConfiguration = {
   i18nAppSwitch: 'Switch to Application',

packages/react-test-app/src/preview-examples/application-breakpoints.tsx

@@ -23,7 +23,7 @@ import {
   IxMenuItem,
 } from '@siemens/ix-react';
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default () => {
   const [breakpoints, setBreakpoints] = useState<Breakpoint[]>(['md']);

packages/react-test-app/src/preview-examples/application-header.tsx

@@ -15,8 +15,6 @@ import {
   IxIconButton,
 } from '@siemens/ix-react';
 
-import React from 'react';
-
 export default () => {
   return (
     <IxApplicationHeader name="My Application">

packages/react-test-app/src/preview-examples/application.tsx

@@ -17,7 +17,6 @@ import {
   IxMenu,
   IxMenuItem,
 } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/avatar-image.tsx

@@ -8,7 +8,6 @@
  */
 
 import { IxAvatar } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/avatar-initials.tsx

@@ -8,7 +8,6 @@
  */
 
 import { IxAvatar } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return <IxAvatar initials="JD"></IxAvatar>;

packages/react-test-app/src/preview-examples/avatar.tsx

@@ -8,7 +8,6 @@
  */
 
 import { IxAvatar } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return <IxAvatar></IxAvatar>;

packages/react-test-app/src/preview-examples/basic-navigation-without-header.tsx

@@ -8,7 +8,6 @@
  */
 
 import { IxBasicNavigation, IxMenu, IxMenuItem } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/basic-navigation.tsx

@@ -10,7 +10,6 @@
 import './styles/basic-navigation.css';
 
 import { IxBasicNavigation, IxMenu, IxMenuItem } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/blind-header-actions.tsx

@@ -15,7 +15,6 @@ import {
   IxDropdownItem,
   IxIconButton,
 } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/blind-variants.tsx

@@ -10,7 +10,6 @@
 import './styles/blind.css';
 
 import { IxBlind } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/blind.tsx

@@ -10,7 +10,6 @@
 import './styles/blind.css';
 
 import { IxBlind } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/breadcrumb-next-items.tsx

@@ -8,7 +8,7 @@
  */
 
 import { IxBreadcrumb, IxBreadcrumbItem } from '@siemens/ix-react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export default () => {
   const [nextItems, setNextItems] = useState<string[]>([]);

packages/react-test-app/src/preview-examples/breadcrumb-truncate.tsx

@@ -8,7 +8,6 @@
  */
 
 import { IxBreadcrumb, IxBreadcrumbItem } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/breadcrumb.tsx

@@ -8,7 +8,6 @@
  */
 
 import { IxBreadcrumb, IxBreadcrumbItem } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/button-danger-ghost.tsx

@@ -10,7 +10,6 @@
 import './styles/buttons.css';
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/button-danger-outline.tsx

@@ -10,7 +10,6 @@
 import './styles/buttons.css';
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/button-danger.tsx

@@ -10,7 +10,6 @@
 import './styles/buttons.css';
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/button-ghost.tsx

@@ -10,7 +10,6 @@
 import './styles/buttons.css';
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/button-grey-ghost.tsx

@@ -10,7 +10,6 @@
 import './styles/buttons.css';
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/button-grey-secondary.tsx

@@ -10,7 +10,6 @@
 import './styles/buttons.css';
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/button-grey.tsx

@@ -10,7 +10,6 @@
 import './styles/buttons.css';
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/button-group.tsx

@@ -8,7 +8,6 @@
  */
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => (
   <>

packages/react-test-app/src/preview-examples/button-loading.tsx

@@ -10,7 +10,7 @@
 import './styles/button-loading.css';
 
 import { IxButton, IxIconButton } from '@siemens/ix-react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default () => {
   const [toggle, setToggle] = useState(false);

packages/react-test-app/src/preview-examples/button-secondary.tsx

@@ -10,7 +10,6 @@
 import './styles/buttons.css';
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/button-text-icon.tsx

@@ -10,7 +10,6 @@
 import './styles/buttons.css';
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/button-with-icon.tsx

@@ -10,7 +10,6 @@
 import './styles/icon-button.css';
 
 import { IxIconButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/buttons.tsx

@@ -10,7 +10,6 @@
 import './styles/buttons.css';
 
 import { IxButton } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/card-list.tsx

@@ -8,7 +8,6 @@
  */
 
 import { IxCardList, IxPushCard } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/card.tsx

@@ -10,7 +10,6 @@
 import './styles/card.css';
 
 import { IxCard, IxCardContent, IxIcon, IxTypography } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/category-filter-suggestions.tsx

@@ -8,7 +8,7 @@
  */
 
 import { IxCategoryFilter } from '@siemens/ix-react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default () => {
   const [suggestions] = useState(['Item 1', 'Item 2']);

packages/react-test-app/src/preview-examples/category-filter.tsx

@@ -9,7 +9,7 @@
 
 import { FilterState, LogicalFilterOperator } from '@siemens/ix';
 import { IxCategoryFilter } from '@siemens/ix-react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default () => {
   const [filter] = useState<FilterState>({

packages/react-test-app/src/preview-examples/checkbox-indeterminate.tsx

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useLayoutEffect, useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 
 export default () => {
   const ref = useRef<HTMLInputElement>(null);

packages/react-test-app/src/preview-examples/checkbox.tsx

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/chip.tsx

@@ -10,7 +10,6 @@
 import './styles/chip.css';
 
 import { IxChip } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/content-header-no-back.tsx

@@ -9,7 +9,6 @@
 
 import { IxContentHeader, IxIconButton } from '@siemens/ix-react';
 
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/content-header.tsx

@@ -9,7 +9,6 @@
 
 import { IxButton, IxContentHeader } from '@siemens/ix-react';
 
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/content.tsx

@@ -9,7 +9,6 @@
 
 import { IxContent, IxContentHeader } from '@siemens/ix-react';
 
-import React from 'react';
 
 export default () => {
   return (

packages/react-test-app/src/preview-examples/date-dropdown-user-range.tsx

@@ -9,7 +9,6 @@
 
 import { DateDropdownOption } from '@siemens/ix';
 import { IxDateDropdown } from '@siemens/ix-react';
-import React from 'react';
 
 const today = new Date().toLocaleDateString('en-US', {
   year: 'numeric',

packages/react-test-app/src/preview-examples/date-dropdown.tsx

@@ -7,7 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { IxDateDropdown } from '@siemens/ix-react';
-import React from 'react';
 
 export default () => {
   return <IxDateDropdown />;

packages/react-test-app/src/preview-examples/datepicker-locale.tsx

@@ -8,7 +8,7 @@
  */
 
 import { IxDatePicker, IxSelect, IxSelectItem } from '@siemens/ix-react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default () => {
   const [locale, setLocale] = useState<'de' | 'en' | (string & {})>('de');