more migrations & remove old context access (wip)

Author: Lukas742

.storybook/components/DocsHeader.tsx

@@ -1,4 +1,4 @@
-import { Description, DocsContext, Subtitle, Title } from '@storybook/addon-docs';
+import { Description, Subtitle, Title } from '@storybook/addon-docs/blocks';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import copyIcon from '@ui5/webcomponents-icons/dist/copy.js';
@@ -13,15 +13,17 @@ import {
   ThemeProvider,
 } from '@ui5/webcomponents-react';
 import { clsx } from 'clsx';
-import { useContext } from 'react';
 import { useGetSubComponentsOfModule } from '../utils';
 import classes from './DocsHeader.module.css';
 import { GitHubLogo } from './GitHub-Mark';
 import { Import } from './Import';
 import { TableOfContent } from './TableOfContent';
 
 const Links = () => {
-  const docsContext = useContext(DocsContext);
+  //todo: context is not available anymore like this
+  // const docsContext = useContext(DocsContext);
+  return null;
+  const docsContext = {};
   const isChart = docsContext.componentStories().at(0).id.startsWith('charts-');
 
   // const filePath = docsContext.parameters.fileName.replace(/^\.\//, '');
@@ -53,7 +55,9 @@ interface InfoTableProps {
 }
 
 export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTableProps) => {
-  const context = useContext(DocsContext);
+  //todo: context is not available anymore like this
+  // const context = useContext(DocsContext);
+  return null;
   const groups = context.componentStories().at(0).kind.split('/');
   const moduleName = groups[groups.length - 1].replace('(experimental)', '').trim();
 

.storybook/components/DomRefTable.tsx

@@ -1,9 +1,9 @@
-import { DocsContext, Heading } from '@storybook/addon-docs/blocks';
+import { Heading } from '@storybook/addon-docs/blocks';
 import TagDesign from '@ui5/webcomponents/dist/types/TagDesign.js';
 import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
 import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types';
 import type { ReactNode } from 'react';
-import { Fragment, useContext, useRef } from 'react';
+import { Fragment, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useGetCem } from '../utils';
 import classes from './DomRefTable.module.css';
@@ -48,7 +48,10 @@ function Name(props: CEM.ClassMember) {
 }
 
 export function DomRefTable() {
-  const docsContext = useContext(DocsContext);
+  return null;
+  //todo: context is not available anymore like this
+  // const docsContext = useContext(DocsContext);
+  const docsContext = {};
   const storyTags: string[] = docsContext.attachedCSFFile?.meta?.tags;
   const cemModuleName = storyTags?.find((tag) => tag.startsWith('cem-module:'));
   const componentName = docsContext.componentStories().at(0)?.component?.displayName;

.storybook/components/Import.tsx

@@ -1,4 +1,3 @@
-import { DocsContext } from '@storybook/addon-docs';
 import { Fragment, useContext } from 'react';
 
 interface ImportStatementPropTypes {
@@ -123,6 +122,8 @@ interface ImportProps {
 }
 
 export const Import = (props: ImportProps) => {
+  //todo: context is not available anymore like this
+  return null;
   const context = useContext(DocsContext);
   const isChart = context.componentStories().at(0).id.startsWith('charts-');
   const isCompat = context.componentStories().at(0).id.startsWith('legacy-');

.storybook/components/VersionSwitch.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
-import { IconButton } from 'storybook/internal/components';
-import { addons, types } from 'storybook/manager-api';
 import '@ui5/webcomponents/dist/Menu.js';
 import '@ui5/webcomponents/dist/MenuItem.js';
 import * as React from 'react';
+import { IconButton } from 'storybook/internal/components';
+import { addons, types } from 'storybook/manager-api';
 
 const ADDON_ID = 'version-switch';
 const TOOL_ID = `${ADDON_ID}/toolbar`;

.storybook/main.ts

@@ -1,7 +1,7 @@
 import { dirname, join } from 'path';
 import type { StorybookConfig } from '@storybook/react-vite';
 import remarkGfm from 'remark-gfm';
-import { isChromatic } from './utils';
+// import { isChromatic } from './utils';
 
 const isDevMode = process.env.NODE_ENV === 'development';
 

.storybook/utils.ts

@@ -1,5 +1,5 @@
-import { DocsContext } from '@storybook/addon-docs/blocks';
-import { useContext, useMemo } from 'react';
+// import { DocsContext } from '@storybook/addon-docs/blocks';
+import { useMemo } from 'react';
 // @ts-expect-error: storybook can handle this
 import cemAi from './custom-element-manifests/ai.json';
 // @ts-expect-error: storybook can handle this
@@ -23,7 +23,10 @@ export const MAPPED_THEMES = [
 export const excludePropsForAbstract = ['className', 'style'];
 
 export function useGetCem() {
-  const docsContext = useContext(DocsContext);
+  return {};
+  //todo: context is not available anymore like this
+  // const docsContext = useContext(DocsContext);
+
   // @ts-expect-error: private but existing
   const { attachedCSFFiles } = docsContext;
 

docs/knowledge-base/ChangeEvents.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { Footer } from '@sb/components';
 
 <Meta title="IDs via dataset" />

docs/knowledge-base/CustomComponentsSlots.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { BarComponent, FaultyBarComponent } from '../knowledgeBaseExamples/slotExamples';
 import { Footer } from '@sb/components';
 import { MessageStrip } from '@ui5/webcomponents-react';

docs/knowledge-base/FAQ.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { Footer, TableOfContent } from '@sb/components';
 import { MessageStrip } from '@ui5/webcomponents-react';
 

docs/knowledge-base/Internationalization.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import { MessageStrip } from '@ui5/webcomponents-react';
 import { Footer, TableOfContent } from '@sb/components';