fix: simplified image story;

 fixed children types;
 removed demo.tsx (no longer relevant);
 removed serve dependencies and serve script

Author: jerzy-mankowski

packages/react/package-lock.json

@@ -14,7 +14,6 @@
   },
   "scripts": {
     "build": "npm run build --prefix ../html &&  tsc && rollup -c && cp package.json ./dist",
-    "serve": "rollup -w -c rollup-serve.config.js",
     "lint": "eslint ./src",
     "typecheck": "tsc --noEmit --skipLibCheck --project ./tsconfig.json",
     "test": "mocha src/**/*.test.*",
@@ -71,8 +70,6 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rollup": "^2.66.1",
-    "rollup-plugin-inject-process-env": "^1.3.1",
-    "rollup-plugin-serve": "^1.1.1",
     "storybook": "^8.4.7",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",

packages/react/package.json

@@ -1,29 +1,30 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import type { ComponentType } from 'react';
-import { CloudinaryImage, CloudinaryImageProps } from './CloudinaryImage';
+import { CloudinaryImage } from './CloudinaryImage';
 import { Cloudinary } from '@cloudinary/url-gen';
 import { backgroundRemoval, sepia } from '@cloudinary/url-gen/actions/effect';
 import { scale } from '@cloudinary/url-gen/actions/resize';
 import { format, quality } from '@cloudinary/url-gen/actions/delivery';
 
-// FIXME `Meta` cant handle discriminated union or `forwardRef`
-const meta: Meta<ComponentType<CloudinaryImageProps>>= {
+const meta: Meta<typeof CloudinaryImage>= {
   component: CloudinaryImage,
 };
 
 export default meta;
-// FIXME `StoryObj` cant handle discriminated union
-type V3Story = StoryObj<ComponentType<Extract<CloudinaryImageProps, {src: string}>>>;
+type Story = StoryObj<typeof CloudinaryImage>;
 
-export const VersionV3: V3Story = {
+export const VersionV3: Story = {
   args: {
     src: 'https://res.cloudinary.com/demo/image/upload/front_face',
     alt: 'front face',
     removeBackground: true,
     effects: [{ type: 'sepia' }],
     resize: { height: 333 },
     format: 'auto',
-    quality: 'auto'
+    quality: 'auto',
+    opacity: 100,
+    background: { type: 'color', color: 'white' },
+    roundCorners: 0,
+    rotate: 0,
   }
 };
 
@@ -40,7 +41,7 @@ const cloudinaryImageObject = cloudinary
   .delivery(format('auto'))
   .delivery(quality('auto'));
 
-export const VersionV2 = {
+export const VersionV2: Story = {
   args: {
     cldImg: cloudinaryImageObject,
   }

packages/react/rollup-serve.config.js

@@ -48,11 +48,13 @@ type ImageV3Props = {
   cldImg?: never
   src: string;
   alt: string;
+  children?: never;
 } & ImageTransformationProps;
 
 interface ImageV2Props {
   src?: never;
   cldImg: UrlGenCloudinaryImage;
+  children?: never;
 }
 
 export type CloudinaryImageProps = ImageV3Props | ImageV2Props;

packages/react/src/CloudinaryImage.stories.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import { type CloudinaryVideo as UrlGenCloudinaryVideo } from '@cloudinary/url-gen/assets/CloudinaryVideo';
 import { parseCloudinaryUrlToParts } from './parseCloudinaryUrlToParts';
 import { parseFormat } from './transformationParsers/parseFormat';
@@ -55,11 +55,13 @@ type VideoV3Props = {
   cldVid?: never;
   src: string;
   videoProps?: React.HTMLProps<HTMLVideoElement>
+  children?: never;
 } & VideoTransformationProps;
 
 interface VideoV2Props extends React.HTMLProps<HTMLVideoElement> {
   src?: never;
   cldVid: UrlGenCloudinaryVideo;
+  children?: never;
 }
 
 export type CloudinaryVideoProps = VideoV3Props | VideoV2Props;