docs: remove unnecessary CodeGen files (#5497)

Author: Lukas742

.eslintignore

@@ -21,7 +21,6 @@ packages/cypress-commands/dist
 
 scripts
 shared
-CodeGen.tsx
 examples
 templates
 

packages/main/src/components/DynamicPage/CodeGen.tsx

@@ -33,7 +33,6 @@ import {
   VariantItem,
   VariantManagement
 } from '../..';
-import { SpacingSpan } from './CodeGen';
 import { DynamicPage } from './index.js';
 
 const meta = {
@@ -106,7 +105,7 @@ const meta = {
             <Label>Halway: 23L</Label>
             <Label>Rack: 34</Label>
           </FlexBox>
-          {SpacingSpan}
+          <span style={{ width: '1rem' }} />
           <FlexBox direction={FlexBoxDirection.Column}>
             <Label>Availability:</Label>
             <ObjectStatus state={ValueState.Success}>In Stock</ObjectStatus>

packages/main/src/components/DynamicPage/DynamicPage.stories.tsx

@@ -1,12 +1,20 @@
 import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useEffect, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { MessageBoxActions } from '../../enums/MessageBoxActions';
 import { MessageBoxTypes } from '../../enums/MessageBoxTypes';
+import type { DialogDomRef } from '../../webComponents';
 import { Button } from '../../webComponents/Button/index';
-import { MessageBox } from './CodeGen';
+import type { MessageBoxPropTypes } from './index.js';
 import { MessageBox as OriginalMessageBox } from './index.js';
 
+// todo remove once portals are supported inline, or popovers are supported w/o having to mount them to the body
+const MessageBox = forwardRef<DialogDomRef, MessageBoxPropTypes>((args, ref) =>
+  createPortal(<OriginalMessageBox {...args} ref={ref} />, document.body)
+);
+MessageBox.displayName = 'MessageBox';
+
 const meta = {
   title: 'Modals & Popovers / MessageBox',
   component: OriginalMessageBox,

packages/main/src/components/MessageBox/CodeGen.tsx

@@ -1,21 +1,38 @@
 import { generateMessageItems } from '@sb/mockData/generateMessageItems';
 import type { Meta, StoryObj } from '@storybook/react';
 import arrowLeftIcon from '@ui5/webcomponents-icons/dist/slim-arrow-left.js';
-import { useRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { ButtonDesign, FlexBoxAlignItems, FlexBoxJustifyContent, TitleLevel, ValueState } from '../../enums/index.js';
+import type {
+  DialogDomRef,
+  DialogPropTypes,
+  ResponsivePopoverDomRef,
+  ResponsivePopoverPropTypes
+} from '../../webComponents';
 import { Bar } from '../../webComponents/Bar/index.js';
 import { Button } from '../../webComponents/Button/index.js';
-// todo replace once `createPortal` is supported
-import { Dialog } from '../../webComponents/Dialog/CodeGen.js';
+import { Dialog as OriginalDialog } from '../../webComponents/Dialog';
 import { Link } from '../../webComponents/Link/index.js';
-// todo replace once `createPortal` is supported
-import { ResponsivePopover } from '../../webComponents/ResponsivePopover/CodeGen.js';
+import { ResponsivePopover as OriginalResponsivePopover } from '../../webComponents/ResponsivePopover';
 import { Title } from '../../webComponents/Title/index.js';
 import { FlexBox } from '../FlexBox/index.js';
 import { MessageViewButton } from '../MessageViewButton/index.js';
 import { MessageItem } from './MessageItem.js';
 import { MessageView } from './index.js';
 
+// todo remove once portals are supported inline, or popovers are supported w/o having to mount them to the body
+const Dialog = forwardRef<DialogDomRef, DialogPropTypes>((args, ref) =>
+  createPortal(<OriginalDialog {...args} ref={ref} />, document.body)
+);
+Dialog.displayName = 'Dialog';
+
+// todo remove once portals are supported inline, or popovers are supported w/o having to mount them to the body
+const ResponsivePopover = forwardRef<ResponsivePopoverDomRef, ResponsivePopoverPropTypes>((args, ref) =>
+  createPortal(<OriginalResponsivePopover {...args} ref={ref} />, document.body)
+);
+ResponsivePopover.displayName = 'ResponsivePopover';
+
 const meta = {
   title: 'User Feedback / MessageView',
   component: MessageView,

packages/main/src/components/MessageBox/MessageBox.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { AvatarGroupType } from '../../enums/AvatarGroupType';
 import { Avatar } from '../Avatar/index.js';
-import { Avatar1, Avatar2 } from './CodeGen.js';
 import { AvatarGroup } from './index.js';
 
 const meta = {
@@ -26,8 +25,12 @@ export const Default: Story = {
       <AvatarGroup {...args}>
         <Avatar icon="employee" />
         <Avatar initials="JD" />
-        <Avatar>{Avatar1}</Avatar>
-        <Avatar>{Avatar2}</Avatar>
+        <Avatar>
+          <img src="https://sap.github.io/ui5-webcomponents/assets/images/avatars/woman_avatar_5.png" alt="Avatar1" />
+        </Avatar>
+        <Avatar>
+          <img src="https://sap.github.io/ui5-webcomponents/assets/images/avatars/man_avatar_3.png" alt="Avatar2" />
+        </Avatar>
       </AvatarGroup>
     );
   }

packages/main/src/components/MessageView/MessageView.stories.tsx

@@ -7,7 +7,6 @@ import { Button } from '../Button';
 import { Input } from '../Input';
 import { Link } from '../Link';
 import { Title } from '../Title';
-import { CenterContent, EndContent, Img, StartContent } from './CodeGen';
 import { Bar } from './index.js';
 
 const meta = {
@@ -20,9 +19,9 @@ const meta = {
   },
   args: {
     design: BarDesign.Header,
-    startContent: StartContent,
-    children: CenterContent,
-    endContent: EndContent
+    startContent: <span>Start Content</span>,
+    children: <span>Center Content</span>,
+    endContent: <span>End Content</span>
   },
   tags: ['package:@ui5/webcomponents-fiori']
 } satisfies Meta<typeof Bar>;
@@ -40,7 +39,11 @@ export const WithCustomElements: Story = {
         startContent={
           <>
             <Button icon={navBackIcon} design={ButtonDesign.Transparent} />
-            {Img}
+            <img
+              src="https://raw.githubusercontent.com/SAP/ui5-webcomponents-react/main/assets/Logo.png"
+              alt="logo"
+              style={{ marginLeft: '6px', width: '120px' }}
+            />
           </>
         }
         endContent={

packages/main/src/webComponents/AvatarGroup/AvatarGroup.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { CarouselArrowsPlacement } from '../../enums/CarouselArrowsPlacement';
-import { Img1, Img2, Img3 } from './CodeGen';
 import { Carousel } from './index';
 
 const meta = {
@@ -21,9 +20,9 @@ export const Default: Story = {
   render(args) {
     return (
       <Carousel {...args}>
-        {Img1}
-        {Img2}
-        {Img3}
+        <img src="https://sap.github.io/ui5-webcomponents/assets/images/sample1.jpg" alt="img-sample 1" />
+        <img src="https://sap.github.io/ui5-webcomponents/assets/images/sample2.jpg" alt="img-sample 2" />
+        <img src="https://sap.github.io/ui5-webcomponents/assets/images/sample3.jpg" alt="img-sample 3" />
       </Carousel>
     );
   }

packages/main/src/webComponents/AvatarGroup/CodeGen.tsx

@@ -2,12 +2,19 @@ import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
 import settingsIcon from '@ui5/webcomponents-icons/dist/settings.js';
 import { clsx } from 'clsx';
-import React, { useEffect, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { BarDesign } from '../../enums';
+import type { DialogDomRef, DialogPropTypes } from '../index.js';
 import { Bar, Button, Icon, List, StandardListItem, Title } from '../index.js';
-import { Dialog } from './CodeGen';
 import { Dialog as OriginalDialog } from './index';
 
+// todo remove once portals are supported inline, or popovers are supported w/o having to mount them to the body
+const Dialog = forwardRef<DialogDomRef, DialogPropTypes>((args, ref) =>
+  createPortal(<OriginalDialog {...args} ref={ref} />, document.body)
+);
+Dialog.displayName = 'Dialog';
+
 const meta = {
   title: 'Modals & Popovers / Dialog',
   component: OriginalDialog,

packages/main/src/webComponents/Bar/Bar.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SideContentFallDown } from '../../enums/SideContentFallDown';
 import { SideContentPosition } from '../../enums/SideContentPosition';
 import { SideContentVisibility } from '../../enums/SideContentVisibility';
-import { MainContent, SideContent } from './CodeGen';
 import { DynamicSideContent } from './index.js';
 
 const meta = {
@@ -26,8 +25,32 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render(args) {
     return (
-      <DynamicSideContent {...args} sideContent={SideContent}>
-        {MainContent}
+      <DynamicSideContent
+        {...args}
+        sideContent={
+          <>
+            <h1>Side Content</h1>
+            <p>
+              Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis
+              nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est.
+              Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie
+              luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend
+              tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper
+              lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat
+              dapibus dui, at bibendum mauris porta a.
+            </p>
+          </>
+        }
+      >
+        <h1>Main Content</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper
+          sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse
+          lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id
+          ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod
+          aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend
+          neque.
+        </p>
       </DynamicSideContent>
     );
   }

packages/main/src/webComponents/Bar/CodeGen.tsx

@@ -2,7 +2,8 @@ import '@ui5/webcomponents-icons/dist/settings.js';
 import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
 import { clsx } from 'clsx';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { BarDesign } from '../../enums/BarDesign';
 import { PopoverHorizontalAlign } from '../../enums/PopoverHorizontalAlign';
 import { PopoverPlacementType } from '../../enums/PopoverPlacementType';
@@ -14,9 +15,14 @@ import { Label } from '../Label';
 import { List } from '../List';
 import { StandardListItem } from '../StandardListItem';
 import { Title } from '../Title';
-import { Popover } from './CodeGen';
+import type { PopoverDomRef, PopoverPropTypes } from './index';
 import { Popover as OriginalPopover } from './index';
 
+const Popover = forwardRef<PopoverDomRef, PopoverPropTypes>((args, ref) =>
+  createPortal(<OriginalPopover {...args} ref={ref} />, document.body)
+);
+Popover.displayName = 'Popover';
+
 const meta = {
   title: 'Modals & Popovers / Popover',
   component: OriginalPopover,

packages/main/src/webComponents/Carousel/Carousel.stories.tsx

@@ -1,7 +1,8 @@
 import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
 import { clsx } from 'clsx';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { PopoverHorizontalAlign } from '../../enums/PopoverHorizontalAlign';
 import { PopoverPlacementType } from '../../enums/PopoverPlacementType';
 import { PopoverVerticalAlign } from '../../enums/PopoverVerticalAlign';
@@ -12,10 +13,16 @@ import { Label } from '../Label';
 import { List } from '../List';
 import { StandardListItem } from '../StandardListItem';
 import { Title } from '../Title';
-import { ResponsivePopover } from './CodeGen.js';
+import type { ResponsivePopoverDomRef, ResponsivePopoverPropTypes } from './index';
 import { ResponsivePopover as OriginalResponsivePopover } from './index';
 import '@ui5/webcomponents-icons/dist/settings.js';
 
+// todo remove once portals are supported inline, or popovers are supported w/o having to mount them to the body
+const ResponsivePopover = forwardRef<ResponsivePopoverDomRef, ResponsivePopoverPropTypes>((args, ref) =>
+  createPortal(<OriginalResponsivePopover {...args} ref={ref} />, document.body)
+);
+ResponsivePopover.displayName = 'ResponsivePopover';
+
 const meta = {
   title: 'Modals & Popovers / ResponsivePopover',
   component: OriginalResponsivePopover,