fix(storybook): build and eslint compatibility with storybook 9

Author: ascariandrea

packages/@liexp/ui/eslint.config.js

@@ -2,9 +2,7 @@ import tseslint from "typescript-eslint";
 import reactEslintConfig from "@liexp/core/lib/eslint/react.config.js";
 
 export default tseslint.config(...reactEslintConfig, {
-  files: [
-    "src/**/*.ts",
-    "src/**/*.tsx"],
+  files: ["src/**/*.ts", "src/**/*.tsx"],
   languageOptions: {
     parserOptions: {
       project: ["./tsconfig.json"],

packages/@liexp/ui/src/components/Media/IframeMediaElement.tsx

@@ -43,6 +43,7 @@ interface IframeMediaElementProps {
   onLoad?: (rect: DOMRect) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   showPlay?: boolean;
+  fallbackImage: string;
 }
 
 const IframeMediaElement: React.FC<IframeMediaElementProps> = ({
@@ -53,6 +54,7 @@ const IframeMediaElement: React.FC<IframeMediaElementProps> = ({
   className,
   onClick,
   showPlay = true,
+  fallbackImage,
   ...props
 }) => {
   const ref = React.useRef<HTMLIFrameElement | null>(null);
@@ -80,7 +82,7 @@ const IframeMediaElement: React.FC<IframeMediaElementProps> = ({
       ) : (
         <VideoCover
           className={classes.cover}
-          thumbnail={media.thumbnail}
+          thumbnail={media.thumbnail ?? fallbackImage}
           style={itemStyle}
           showPlay={showPlay}
           onClick={(e) => {

packages/@liexp/ui/src/components/Media/MediaElement.tsx

@@ -83,6 +83,7 @@ const MediaElement: React.FC<MediaElementProps> = ({
             itemStyle={itemStyle}
             className={clsx(classes.item, itemClassName)}
             media={{ ...media, type: Media.IframeVideoType.literals[0] }}
+            fallbackImage={fallbackImage}
           />
         );
       case Media.PDFType.Type: {

packages/@liexp/ui/src/components/admin/events/button/EventSocialPostButton.tsx

@@ -12,9 +12,10 @@ import { contentTypeFromFileExt } from "@liexp/shared/lib/utils/media.utils.js";
 import { throwTE } from "@liexp/shared/lib/utils/task.utils.js";
 import { pipe } from "fp-ts/lib/function.js";
 import * as React from "react";
-import { useDataProvider, useRecordContext } from "react-admin";
+import { useRecordContext } from "react-admin";
 import { useConfiguration } from "../../../../context/ConfigurationContext.js";
 import { useAPI } from "../../../../hooks/useAPI.js";
+import { useDataProvider } from "../../../../hooks/useDataProvider.js";
 import { fetchRelations } from "../../../../state/queries/SearchEventsQuery.js";
 import { SocialPostButton } from "../../common/SocialPostButton.js";
 

packages/@liexp/ui/src/components/lists/AreaList.tsx

@@ -39,8 +39,9 @@ export const AreaListItem: React.FC<
   ListItemProps<Area> & {
     defaultImage: string;
     style?: React.CSSProperties;
+    onLoad?: VoidFunction;
   }
-> = ({ item, onClick, defaultImage, style }) => {
+> = ({ item, onClick, defaultImage, style, onLoad }) => {
   const Queries = useEndpointQueries();
   const media = Queries.Media.list.useQuery(
     undefined,
@@ -79,6 +80,8 @@ export const AreaListItem: React.FC<
             className={classes.media}
             image={mediaSrc}
             title={item.label}
+            component="img"
+            onLoad={onLoad}
           />
           <CardContent>
             <Typography gutterBottom variant="h6" component="h3">
@@ -96,17 +99,19 @@ export const AreaListItem: React.FC<
   );
 };
 
-export interface AreaListProps extends ListProps {
+export interface AreaListProps extends Omit<ListProps, "onLoad"> {
   className?: string;
   areas: Area[];
   onAreaClick: (actor: Area) => void;
   style?: React.CSSProperties;
+  onLoad?: VoidFunction;
 }
 
 export const AreaList: React.FC<AreaListProps> = ({
   className,
   areas,
   onAreaClick,
+  onLoad,
   ...props
 }) => {
   const conf = useConfiguration();
@@ -121,6 +126,7 @@ export const AreaList: React.FC<AreaListProps> = ({
       ListItem={(area) => (
         <AreaListItem
           {...area}
+          onLoad={onLoad}
           defaultImage={conf.platforms.web.defaultImage}
         />
       )}

packages/@liexp/ui/src/context/DataProviderContext.tsx

@@ -4,7 +4,7 @@ import { getAuthFromLocalStorage } from "../client/api.js";
 
 export const DataProviderContext = React.createContext<APIRESTClient>(
   APIRESTClient({
-    url: "https://alpha.api.lies.exposed/v1",
+    url: "https://api.lies.exposed/v1",
     getAuth: getAuthFromLocalStorage,
   }),
 );

packages/@liexp/ui/src/context/JSONAPIProviderContext.tsx

@@ -4,6 +4,6 @@ import * as React from "react";
 export const JSONAPIProviderContext = React.createContext(
   APIRESTClient({
     // todo: should be the endpoint of space storage
-    url: "https://alpha.api.lies.exposed/v1",
+    url: "https://api.lies.exposed/v1",
   }),
 );

packages/@liexp/ui/src/hooks/useDataProvider.tsx

@@ -4,7 +4,6 @@ import { DataProviderContext } from "../context/DataProviderContext.js";
 /**
  * Provide context with @ts-endpoint/react-admin client
  *
- *
  */
 export const useDataProvider = (): APIRESTClient => {
   const dataProvider = useContext(DataProviderContext);

pnpm-lock.yaml

@@ -1,2 +1,2 @@
-VITE_API_URL=https://alpha.api.lies.exposed
-VITE_PUBLIC_URL=https://alpha.lies.exposed/storybook/
+VITE_API_URL=http://api.liexp.dev/v1
+VITE_PUBLIC_URL=http://storybook.liexp.dev/