[#3604] adding indexes for storybook

Author: jiromaykin

src/open_inwoner/react/components/HomepagePluginSection/HomePagePluginSection.stories.ts renamed to src/open_inwoner/react/components/HomepagePluginSection/HomepagePluginSection.stories.ts

@@ -1,6 +1,7 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import './HomepagePluginSection';
+import '@open-inwoner/design-tokens/dist/css/index.css';
+import type { Meta, StoryObj } from '@storybook/preact';
+import { withLoader } from '@react/lib/decorators/storybook';
+import { HOMEPAGE_PLUGIN_SECTION_DEFINITION } from '.';
 
 interface HomepagePluginSectionProps {
   title?: string;
@@ -9,8 +10,11 @@ interface HomepagePluginSectionProps {
   showIndicator?: boolean;
 }
 
+type Story = StoryObj<HomepagePluginSectionProps>;
+
 const meta: Meta<HomepagePluginSectionProps> = {
   title: 'WebComponents/HomepagePluginSection',
+  decorators: [withLoader(HOMEPAGE_PLUGIN_SECTION_DEFINITION.tagName)],
   parameters: {
     layout: 'padded',
     docs: {
@@ -31,8 +35,6 @@ The homepage plugin section web component. This section typically consist of a s
 
 export default meta;
 
-type Story = StoryObj<HomepagePluginSectionProps>;
-
 export const Default: Story = {
   args: {
     title: 'Mijn plugin sectie',
@@ -41,12 +43,7 @@ export const Default: Story = {
     showIndicator: false,
   },
   render: ({ title, nextUrl, nextUrlLabel, showIndicator }) =>
-    React.createElement('oip-homepage-plugin-section', {
-      title,
-      'next-url': nextUrl,
-      'next-url-label': nextUrlLabel,
-      'show-indicator': showIndicator,
-    }),
+    `<oip-homepage-plugin-section title="${title}" next-url="${nextUrl}" next-url-label="${nextUrlLabel}" show-indicator="${showIndicator}"></oip-homepage-plugin-section>`,
 };
 
 export const WithIndicator: Story = {
@@ -57,10 +54,5 @@ export const WithIndicator: Story = {
     showIndicator: true,
   },
   render: ({ title, nextUrl, nextUrlLabel, showIndicator }) =>
-    React.createElement('oip-homepage-plugin-section', {
-      title,
-      'next-url': nextUrl,
-      'next-url-label': nextUrlLabel,
-      'show-indicator': showIndicator,
-    }),
+    `<oip-homepage-plugin-section title="${title}" next-url="${nextUrl}" next-url-label="${nextUrlLabel}" show-indicator="${showIndicator}"></oip-homepage-plugin-section>`,
 };

src/open_inwoner/react/components/HomepagePluginSection/index.ts

@@ -0,0 +1,3 @@
+export { default as HomepagePluginSection } from './HomepagePluginSection';
+export { HOMEPAGE_PLUGIN_SECTION_DEFINITION } from './constants';
+export type { IHomepagePluginSectionProps } from './HomepagePluginSection';

src/open_inwoner/react/components/Spinner/Spinner.stories.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/preact';
+import { withLoader } from '@react/lib/decorators/storybook';
+import { LOADING_SPINNER_DEFINITION } from '.';
 import './Spinner';
 
 interface SpinnerProps {
@@ -9,6 +10,7 @@ interface SpinnerProps {
 
 const meta: Meta<SpinnerProps> = {
   title: 'WebComponents/Spinner',
+  decorators: [withLoader(LOADING_SPINNER_DEFINITION.tagName)],
   parameters: {
     layout: 'padded',
     docs: {
@@ -34,13 +36,4 @@ export const Default: Story = {
     loadingText: 'Zaken laden...',
     iconName: 'rotate_right',
   },
-  render: ({ loadingText, iconName }) =>
-    // NOTE: We are not using a React functional component (FC) here because:
-    // 1. The web component has a hyphenated tag name (<oip-loading-spinner>), which is invalid JSX.
-    // 2. Using FC would require a wrapper just to satisfy TypeScript/JSX.
-    // 3. React.createElement allows to render the actual custom element directly.
-    React.createElement('oip-loading-spinner', {
-      'loading-text': loadingText,
-      'icon-name': iconName,
-    }),
 };

src/open_inwoner/react/components/Spinner/Spinner.tsx

@@ -1,6 +1,5 @@
 import { AnyComponent as FC } from 'preact';
 // import { usePropsOrScriptData } from '@react/lib/json/getJsonScriptData';
-// import './LoadingSpinner.scss';
 
 export interface ILoadingSpinnerProps {
   loadingText?: string;

src/open_inwoner/react/components/Spinner/index.ts

@@ -0,0 +1,2 @@
+export { LOADING_SPINNER_DEFINITION } from './constants';
+export type { ILoadingSpinnerProps } from './Spinner';

src/open_inwoner/react/components/ZakenPluginZaakItem/ZakenPluginZaakItem.stories.ts

@@ -1,5 +1,7 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import '@open-inwoner/design-tokens/dist/css/index.css';
+import type { Meta, StoryObj } from '@storybook/preact';
+import { withLoader } from '@react/lib/decorators/storybook';
+import { ZAKEN_PLUGIN_ZAAK_ITEM_DEFINITION } from '.';
 import './ZakenPluginZaakItem';
 
 interface ZaakItemProps {
@@ -10,6 +12,7 @@ interface ZaakItemProps {
 
 const meta: Meta<ZaakItemProps> = {
   title: 'WebComponents/ZakenPluginZaakItem',
+  decorators: [withLoader(ZAKEN_PLUGIN_ZAAK_ITEM_DEFINITION.tagName)],
   parameters: {
     layout: 'padded',
   },
@@ -26,9 +29,5 @@ export const Default: Story = {
     detailUrl: '/mijn-aanvragen/1/abcdef/status/',
   },
   render: ({ description, identificatie, detailUrl }) =>
-    React.createElement('oip-zaken-plugin-zaak-item', {
-      description,
-      identificatie,
-      'detail-url': detailUrl,
-    }),
+    `<oip-zaken-plugin-zaak-item description="${description}" identificatie="${identificatie}" detail-url="${detailUrl}"></oip-zaken-plugin-zaak-item>`,
 };

src/open_inwoner/react/components/ZakenPluginZaakItem/index.ts

@@ -0,0 +1,3 @@
+export { default as HomepagePluginSection } from './ZakenPluginZaakItem';
+export { ZAKEN_PLUGIN_ZAAK_ITEM_DEFINITION } from './constants';
+export type { IZakenPluginZaakItemProps } from './ZakenPluginZaakItem';