✅ Fixed Storybook and updated tests

.storybook/main.ts

@@ -15,5 +15,15 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  async viteFinal(config) {
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      define: { 'process.env': process.env },
+      optimizeDeps: {
+        include: ['storybook-dark-mode'],
+      },
+    });
+  },
 };
 export default config;

.storybook/preview.ts

@@ -1,9 +1,9 @@
+import 'reflect-metadata';
 import { themes } from '@storybook/theming';
 import { Preview } from 'storybook-solidjs';
 
 import '../src/web/scss/custom.scss';
 
-
 const preview: Preview = {
   parameters: {
     controls: {

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.20](https://github.com/NMSUD/Form/compare/1.0.20...1.0.19) - 2024-06---
+
+### Fixed
+
+- Storybook rendering of components
+
 ## [1.0.19](https://github.com/NMSUD/Form/compare/1.0.19...1.0.18) - 2024-06-19
 
 ### Fixed

package.json

@@ -17,8 +17,8 @@
     "data:downloader": "dotenv -- tsx --tsconfig tsconfig.server.json src/data/downloader.ts",
     "data:dev": "dotenv -- tsx --tsconfig tsconfig.server.json src/data/interactive.ts",
     "db:generate": "npx xata codegen",
-    "storybook:dev": "storybook dev -p 3003",
-    "storybook:build": "storybook build --disable-telemetry",
+    "storybook:dev": "dotenv -- storybook dev -p 3003",
+    "storybook:build": "dotenv -- storybook build --disable-telemetry",
     "docs:dev": "vitepress dev --port 3002",
     "docs:build": "vitepress build",
     "docs:preview": "vitepress preview",
@@ -81,6 +81,7 @@
     "storybook-solidjs": "^1.0.0-beta.2",
     "storybook-solidjs-vite": "^1.0.0-beta.2",
     "tsconfig-paths": "^4.2.0",
+    "tsx": "^4.7.1",
     "typescript": "^5.1.3",
     "vite-plugin-solid": "^2.7.0",
     "vitepress": "^1.0.0-rc.44",

src/helpers/asyncHelper.ts

@@ -1,3 +1,10 @@
 export const timeout = (ms: number) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
+
+export const promiseFrom = <T>(result: T, time: number = 0): Promise<T> =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(result);
+    }, time);
+  });

src/web/components/form/dropdown/dropdown.stories.tsx

@@ -11,6 +11,7 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     ...getFormInputArgTypes(),
+    multiple: { control: 'boolean' },
   },
 } satisfies Meta<typeof FormDropdown>;
 

src/web/components/form/dropdown/networkDropdown.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { BuilderDtoMeta } from '@contracts/dto/forms/meta/builderDto.meta';
+import { promiseFrom } from '@helpers/asyncHelper';
+import { UseHopeUIThemeProvider, getFormInputArgTypes } from '../../storybook';
+import { FormNetworkDropdown } from './networkDropdown';
+
+const meta = {
+  title: 'Form/NetworkDropdown',
+  component: FormNetworkDropdown,
+  decorators: [UseHopeUIThemeProvider],
+  tags: ['autodocs'],
+  argTypes: {
+    ...getFormInputArgTypes(),
+    multiple: { control: 'boolean' },
+  },
+} satisfies Meta<typeof FormNetworkDropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    label: 'Name',
+    placeholder: 'this is a placeholder',
+    options: ['test1', 'test2', 'test3'].map((t) => ({ title: t, value: t })),
+    optionsPromise: promiseFrom({ isSuccess: true }, 2000),
+    validation: BuilderDtoMeta.platforms.validator,
+  },
+};

src/web/components/form/dropdown/platformTypeDropdown.stories.tsx

@@ -11,6 +11,7 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     ...getFormInputArgTypes(),
+    multiple: { control: 'boolean' },
   },
 } satisfies Meta<typeof PlatformTypeDropdown>;
 

src/web/components/form/helpIcon/helpIconTooltip.stories.tsx

@@ -9,6 +9,7 @@ const meta = {
   decorators: [UseHopeUIThemeProvider],
   tags: ['autodocs'],
   argTypes: {
+    label: { control: 'text' },
     helpText: { control: 'text' },
   },
 } satisfies Meta<typeof HelpIconTooltip>;
@@ -18,6 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   args: {
+    label: 'Hover me!',
     helpText: 'This is a help icon with a tooltip',
   },
 };

src/web/components/form/image/ImageParamsPopover.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { UseHopeUIThemeProvider, getFormInputArgTypes } from '../../storybook';
+import { FormProfileImageInput } from './profileImage';
+import { ImageParamsPopover } from './imageParamsPopover';
+
+const meta = {
+  title: 'Form/ImageParamsPopover',
+  component: ImageParamsPopover,
+  decorators: [UseHopeUIThemeProvider],
+  tags: ['autodocs'],
+  argTypes: {
+    imageDetails: { control: 'object' },
+  },
+} satisfies Meta<typeof ImageParamsPopover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    imageDetails: {
+      width: 4321,
+      height: 1234,
+      fileSize: 2000,
+      fileExtension: 'png',
+    },
+  },
+};

src/web/components/form/image/profileImage.tsx

@@ -22,15 +22,9 @@ import { FormProfileImageLoading } from './profileImageLoading';
 import { AppAnimation } from '@constants/animation';
 import { IMediaUpload, MediaUploadType } from '@web/contracts/mediaUpload';
 
-interface IFormProfileImageUrlProps extends FormInputProps<IMediaUpload> {
-  imageValue?: string;
-}
-
-const getImageOrFallback = (upload: IMediaUpload, imageUrl?: string): string => {
-  if (imageUrl != null) {
-    return imageUrl;
-  }
+interface IFormProfileImageUrlProps extends FormInputProps<IMediaUpload> {}
 
+const getImageOrFallback = (upload: IMediaUpload): string => {
   const imgUrl = upload?.file?.toString?.() ?? upload?.url;
   if (imgUrl == null) return AppImage.fallbackImg;
   return imgUrl;
@@ -42,9 +36,7 @@ export const FormProfileImageInput: Component<IFormProfileImageUrlProps> = (
   let inputRef: HTMLDivElement;
   const [isValid, calcIsValid] = useValidation(props.validation);
 
-  const [currentImage, setCurrentImage] = createSignal<string>(
-    getImageOrFallback(props.value, props.imageValue),
-  );
+  const [currentImage, setCurrentImage] = createSignal<string>(getImageOrFallback(props.value));
   const [imageDetails, setImageDetails] = createSignal<IImageParams>();
   const [fileToProcess, setFileToProcess] = createSignal<File>();
   const [networkState, setNetworkState] = createSignal<NetworkState>(NetworkState.Success);
@@ -87,7 +79,7 @@ export const FormProfileImageInput: Component<IFormProfileImageUrlProps> = (
   createEffect(() => {
     if (props.value == null) {
       // handle clear
-      setCurrentImage(getImageOrFallback(props.value, props.imageValue));
+      setCurrentImage(getImageOrFallback(props.value));
       setImageDetails(undefined);
     }
   }, [props.value]);

src/web/components/form/mediaUpload/mediaUpload.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { UseHopeUIThemeProvider, getFormInputArgTypes } from '../../storybook';
+import { FormMediaUploadInput } from './mediaUpload';
+import { MediaUploadType } from '@web/contracts/mediaUpload';
+
+const meta = {
+  title: 'Form/FormMediaUploadInput',
+  component: FormMediaUploadInput,
+  decorators: [UseHopeUIThemeProvider],
+  tags: ['autodocs'],
+  argTypes: {
+    ...getFormInputArgTypes(),
+    maxUploads: { control: 'number' },
+  },
+} satisfies Meta<typeof FormMediaUploadInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    label: 'Upload your media',
+    helpText: 'This is a help icon with a tooltip',
+    showValidationMessages: true,
+  },
+};
+
+export const NumberOfFilesLimit: Story = {
+  args: {
+    label: 'Upload your media',
+    helpText: 'This is a help icon with a tooltip',
+    maxUploads: 4,
+    showValidationMessages: true,
+  },
+};
+
+export const UploadsAdded: Story = {
+  args: {
+    label: 'Upload your media',
+    helpText: 'This is a help icon with a tooltip',
+    maxUploads: 2,
+    value: [
+      {
+        type: MediaUploadType.ImageUrl,
+        url: 'https://i.imgur.com/aKaOqIh.gif',
+      },
+    ],
+    showValidationMessages: true,
+  },
+};
+
+export const ValidationError: Story = {
+  args: {
+    label: 'Upload your media',
+    helpText: 'This is a help icon with a tooltip',
+    showValidationMessages: true,
+    validation: () => ({ isValid: false, errorMessage: 'example error message' }),
+  },
+};

src/web/components/form/mediaUpload/mediaUpload.tsx

@@ -1,7 +1,8 @@
 // prettier-ignore
-import { Anchor, Avatar, Box, Button, Center, CircularProgress, CircularProgressIndicator, Flex, FormControl, FormErrorMessage, FormLabel, HStack, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, SimpleGrid, Text, Tooltip, createDisclosure, notificationService } from '@hope-ui/solid';
-import { Component, For, JSX, Match, Show, Switch, createEffect, createSignal } from 'solid-js';
+import { Button, Center, Flex, FormControl, FormErrorMessage, FormLabel, HStack, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, SimpleGrid, Text, createDisclosure, notificationService } from '@hope-ui/solid';
+import { Component, For, Match, Show, Switch, createEffect, createSignal } from 'solid-js';
 
+import { AppAnimation } from '@constants/animation';
 import { NetworkState } from '@constants/enum/networkState';
 import { minUrlLength } from '@constants/validation';
 import { makeArrayOrDefault } from '@helpers/arrayHelper';
@@ -10,21 +11,18 @@ import { getImageParams } from '@helpers/imageHelper';
 import { getLog } from '@services/internal/logService';
 import { multiValidation } from '@validation/baseValidation';
 import { minLength, shouldBeUrl, shouldBeYoutubeUrl } from '@validation/textValidation';
-import { OpenInNewIcon } from '@web/components/common/icon/openInNewIcon';
-import { WrapWhen } from '@web/components/common/wrapWhen';
+import { Card } from '@web/components/common/card';
+import { ImageIcon } from '@web/components/common/icon/imageIcon';
+import { UploadIcon } from '@web/components/common/icon/uploadIcon';
+import { VideoIcon } from '@web/components/common/icon/videoIcon';
 import { DebugNode } from '@web/components/core/debugNode';
+import { LoadingSpinner } from '@web/components/core/loading';
 import { FormInputProps } from '@web/contracts/formTypes';
 import { IMediaUpload, MediaUploadType } from '@web/contracts/mediaUpload';
 import { useValidation } from '../../../hooks/useValidation';
 import { HelpIconTooltip } from '../helpIcon/helpIconTooltip';
 import { FormLongInput } from '../text/input';
 import { FormMediaUploadItem } from './mediaUploadItem';
-import { Card } from '@web/components/common/card';
-import { UploadIcon } from '@web/components/common/icon/uploadIcon';
-import { VideoIcon } from '@web/components/common/icon/videoIcon';
-import { ImageIcon } from '@web/components/common/icon/imageIcon';
-import { LoadingSpinner } from '@web/components/core/loading';
-import { AppAnimation } from '@constants/animation';
 
 interface IFormMediaUploadProps extends FormInputProps<Array<IMediaUpload>> {
   maxUploads?: number;
@@ -147,7 +145,7 @@ export const FormMediaUploadInput: Component<IFormMediaUploadProps> = (
   };
 
   const getLabel = (localProps: IFormMediaUploadProps) => {
-    if ((props.maxUploads ?? 0) < 0) {
+    if ((props.maxUploads ?? 0) <= 0) {
       return localProps.label;
     }
 

src/web/components/form/mediaUpload/mediaUploadItem.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { UseHopeUIThemeProvider, getFormInputArgTypes } from '../../storybook';
+import { FormMediaUploadItem } from './mediaUploadItem';
+import { MediaUploadType } from '@web/contracts/mediaUpload';
+
+const meta = {
+  title: 'Form/FormMediaUploadItem',
+  component: FormMediaUploadItem,
+  decorators: [UseHopeUIThemeProvider],
+  tags: ['autodocs'],
+  argTypes: {
+    upload: { control: 'object' },
+  },
+} satisfies Meta<typeof FormMediaUploadItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    upload: {
+      type: MediaUploadType.File,
+      file: {
+        name: 'test.png',
+      },
+      url: 'https://i.imgur.com/aKaOqIh.gif',
+    },
+  },
+};
+
+export const ImageUrl: Story = {
+  args: {
+    upload: {
+      type: MediaUploadType.ImageUrl,
+      url: 'https://i.imgur.com/aKaOqIh.gif',
+    },
+  },
+};
+
+export const VideoUrl: Story = {
+  args: {
+    upload: {
+      type: MediaUploadType.VideoUrl,
+      url: 'https://link.doesnt.matter.com/no-preview-anyway',
+    },
+  },
+};

src/web/components/form/mediaUpload/mediaUploadItem.tsx

@@ -12,7 +12,7 @@ interface IProps {
 
 export const FormMediaUploadItem: Component<IProps> = (props: IProps) => {
   return (
-    <Box class="hover-reveal-child pos-rel display-inline-block noselect">
+    <Box class="hover-reveal-child pos-rel display-inline-block pointer noselect">
       <Switch fallback={<Text display="inline-block">???</Text>}>
         <Match when={props.upload.type === MediaUploadType.ImageUrl}>
           <Avatar
@@ -49,7 +49,9 @@ export const FormMediaUploadItem: Component<IProps> = (props: IProps) => {
                 wrapComp={Tooltip}
                 wrapProps={{ label: props.upload.file?.name }}
               >
-                <Text class="max-lines-1">{props.upload.file?.name ?? 'unknown name'}</Text>
+                <Text class="max-lines-1" pr="0.75em">
+                  {props.upload.file?.name ?? 'unknown name'}
+                </Text>
               </WrapWhen>
             </Center>
           </Flex>

src/web/components/form/socialLink/socialLinkAvatar.stories.tsx

@@ -10,7 +10,10 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     url: { control: 'text' },
-    size: { control: 'text' },
+    size: {
+      control: 'select',
+      options: ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', 'md', 'full', undefined],
+    },
   },
 } satisfies Meta<typeof AvatarFromSocialLink>;