Release v1.0.0-alpha.106

.github/actions/install-deps/action.yml

@@ -11,7 +11,7 @@ runs:
   using: "composite"
   steps:
 
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
         node-version: "18"
         cache: "yarn"

.github/workflows/deploy-alpha.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: "18"
           cache: "yarn"
@@ -55,7 +55,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: "18"
           cache: "yarn"

packages/@liexp/core/package.json

@@ -30,7 +30,7 @@
     "@types/react": "^18.2.47",
     "@types/webpack-bundle-analyzer": "^4.6.3",
     "@types/webpack-node-externals": "^3.0.4",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^12.0.1",
     "css-loader": "^6.9.0",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "dotenv-webpack": "^8.0.1",
@@ -42,7 +42,7 @@
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "html-replace-webpack-plugin": "^2.6.0",
     "html-webpack-plugin": "^5.6.0",
-    "mini-css-extract-plugin": "^2.7.6",
+    "mini-css-extract-plugin": "^2.7.7",
     "prettier": "^3.1.1",
     "react-refresh": "^0.14.0",
     "react-refresh-typescript": "^2.0.9",

packages/@liexp/ui/package.json

@@ -27,11 +27,11 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@liexp/core": "0.1.0",
     "@liexp/shared": "0.1.0",
-    "@mui/icons-material": "^5.15.3",
-    "@mui/lab": "5.0.0-alpha.159",
-    "@mui/material": "^5.15.3",
-    "@mui/styles": "^5.15.3",
-    "@mui/system": "^5.15.3",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/lab": "5.0.0-alpha.160",
+    "@mui/material": "^5.15.4",
+    "@mui/styles": "^5.15.4",
+    "@mui/system": "^5.15.4",
     "@mui/x-data-grid": "^6.18.7",
     "@reach/router": "^1.3.4",
     "@react-page/editor": "^5.4.4",

packages/@liexp/ui/src/client/admin/MediaAPI.ts

@@ -38,7 +38,7 @@ const getSignedUrl =
     resource: string,
     resourceId: string,
     ContentType: MediaType,
-    ContentLength: number
+    ContentLength: number,
   ): TE.TaskEither<Error, { data: { url: string } }> => {
     return pipe(
       TE.tryCatch(
@@ -48,7 +48,7 @@ const getSignedUrl =
               resource,
               resourceId,
               ContentType,
-              ContentLength
+              ContentLength,
             },
           }),
         E.toError,
@@ -80,7 +80,11 @@ export const uploadFile =
             },
             onUploadProgress: (progressEvent) => {
               // eslint-disable-next-line no-console
-              console.log( `Progress: ${progressEvent.progress ?? 0}, ETA: ${progressEvent.estimated ?? "Infinite"}`);
+              console.log(
+                `Progress: ${progressEvent.progress ?? 0}, ETA: ${
+                  progressEvent.estimated ?? "Infinite"
+                }`,
+              );
             },
           })
           .then((response) => {

packages/@liexp/ui/src/components/Header/Header.tsx

@@ -4,15 +4,9 @@ import DonateButton from "../Common/Button/DonateButton";
 import SuggestLinkButton from "../Common/Button/SuggestLinkButton";
 import { TelegramIcon } from "../Common/Icons";
 import GithubButton from "../GithubButton";
-import {
-  AppBar,
-  Box,
-  Link,
-  Toolbar,
-  Typography
-} from "../mui";
-import { HeaderMenu } from './HeaderMenu/HeaderMenu';
-import { type HeaderMenuItem } from './HeaderMenu/types';
+import { AppBar, Box, Link, Toolbar, Typography } from "../mui";
+import { HeaderMenu } from "./HeaderMenu/HeaderMenu";
+import { type HeaderMenuItem } from "./HeaderMenu/types";
 
 const PREFIX = "Header";
 
@@ -22,6 +16,7 @@ export const classes = {
   menuButton: `${PREFIX}-menuButton`,
   menuItem: `${PREFIX}-menuItem`,
   menuLeft: `${PREFIX}-menuLeft`,
+  menuRight: `${PREFIX}-menuRight`,
   menuItemLink: `${PREFIX}-menuItemLink`,
   title: `${PREFIX}-title`,
   titleLink: `${PREFIX}-titleLink`,
@@ -46,16 +41,16 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
     margin: 0,
     marginRight: theme.spacing(2),
     color: theme.palette.common.white,
-    fontWeight: theme.typography.fontWeightBold ,
+    fontWeight: theme.typography.fontWeightBold,
     cursor: "pointer",
     [`${theme.breakpoints.down("sm")}`]: {
-      fontSize: 12
-    }
+      fontSize: 12,
+    },
   },
 
   [`& .${classes.titleLink}`]: {
     color: theme.palette.common.black,
-    fontWeight: theme.typography.fontWeightBold ,
+    fontWeight: theme.typography.fontWeightBold,
     fontFamily: theme.typography.h6.fontFamily,
     letterSpacing: 1.1,
     textDecoration: "none",
@@ -67,13 +62,19 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
     flexGrow: 1,
     [`${theme.breakpoints.down("sm")}`]: {
       display: "none",
-      flexGrow: 1
+      flexGrow: 1,
     },
   },
+  [`& .${classes.menuRight}`]: {
+    display: "flex",
+    alignContent: "flex-start",
+    justifyContent: "flex-end",
+    flexGrow: 1,
+  },
   [`& .${classes.menuItem}`]: {
     color: theme.palette.common.white,
-    ...(theme.typography.subtitle1 ),
-    fontWeight: theme.typography.fontWeightBold ,
+    ...theme.typography.subtitle1,
+    fontWeight: theme.typography.fontWeightBold,
     fontSize: 16,
     textTransform: "none",
     cursor: "pointer",
@@ -85,7 +86,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   },
   [`& .${classes.menuItemLink}`]: {
     color: theme.palette.text.primary,
-    ...(theme.typography.subtitle1 ),
+    ...theme.typography.subtitle1,
     // fontWeight: theme.typography.fontWeightBold as any,
     fontSize: 14,
     margin: 0,
@@ -95,8 +96,6 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   },
 }));
 
-
-
 export interface HeaderProps {
   logoSrc?: string;
   onTitleClick: () => void;
@@ -154,13 +153,15 @@ const Header: React.FC<HeaderProps> = ({
           </Box>
         </Box>
 
-        <SuggestLinkButton className={classes.menuItem} color={"white"} />
+        <Box className={classes.menuRight}>
+          <SuggestLinkButton className={classes.menuItem} color={"white"} />
 
-        <HeaderMenu
-          menu={menu}
-          onMenuItemClick={onMenuItemClick}
-          currentPath={pathname}
-        />
+          <HeaderMenu
+            menu={menu}
+            onMenuItemClick={onMenuItemClick}
+            currentPath={pathname}
+          />
+        </Box>
       </Toolbar>
     </StyledAppBar>
   );

packages/@liexp/ui/src/components/Header/HeaderMenu/HeaderMenuDesktop.tsx

@@ -87,7 +87,6 @@ export const HeaderMenuDesktop: React.FC<HeaderMenuProps> = ({
   onMenuItemClick,
   currentPath,
 }) => {
-
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 

packages/@liexp/ui/src/components/Header/HeaderMenu/HeaderMenuMobile.tsx

@@ -116,17 +116,14 @@ const HeaderMenuMobileDiv = styled("div")(({ theme }) => ({
     flexGrow: 1,
     justifyContent: "flex-end",
     alignItems: "center",
-    [`${theme.breakpoints.down("md")}`]: {
-      flexGrow: 0,
-    },
   },
   [`& .${menuClasses.mobileMenu}`]: {
     display: "flex",
     justifyContent: "flex-end",
     alignItems: "center",
     width: "100%",
     maxWidth: 350,
-    padding: 20
+    padding: 20,
   },
   [`& .${menuClasses.mobileMenuIcon}`]: {
     margin: 0,

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

@@ -1,5 +1,6 @@
 import { type Media } from "@liexp/shared/lib/io/http";
 import OpenInFull from "@mui/icons-material/OpenInFull";
+import { clsx } from "clsx";
 import * as React from "react";
 import { useModal } from "../../hooks/useModal";
 import { styled } from "../../theme";
@@ -13,8 +14,8 @@ const modalClasses = {
 };
 
 const StyledModalContent = styled(Box)(({ theme }) => ({
-  [`& .${modalClasses.root}`]: {
-    position: "absolute",
+  [`&.${modalClasses.root}`]: {
+    height: "100%",
   },
   [`& .${modalClasses.image}`]: {
     width: "auto",
@@ -39,6 +40,9 @@ const boxClasses = {
 };
 
 const StyledBox = styled(Box)(({ theme }) => ({
+  [`&.${boxClasses.root}`]: {
+    overflow: "hidden",
+  },
   [`& .${boxClasses.image}`]: {
     width: "auto",
     height: "100%",
@@ -109,7 +113,7 @@ const ExpandableImageElement: React.FC<ExpandableImageElementProps> = ({
   }, [modal, media]);
   return (
     <StyledBox
-      className={className}
+      className={clsx(boxClasses.root, className)}
       height="100%"
       display="flex"
       alignItems="center"

packages/@liexp/ui/src/components/admin/events/CreateEventFromLinkButton.tsx

@@ -1,4 +1,4 @@
-import { getRelationIdsFromEventRelations } from '@liexp/shared/lib/helpers/event/getEventRelationIds';
+import { getRelationIdsFromEventRelations } from "@liexp/shared/lib/helpers/event/getEventRelationIds";
 import { getSuggestions } from "@liexp/shared/lib/helpers/event-suggestion";
 import * as io from "@liexp/shared/lib/io";
 import * as O from "fp-ts/Option";

packages/@liexp/ui/src/components/admin/events/ReferenceManyEventField.tsx

@@ -20,7 +20,7 @@ const ReferenceManyEventField: React.FC<
       reference="events"
       filter={{ ...props.filter }}
     >
-      <Datagrid rowClick="edit">
+      <Datagrid rowClick="edit" isRowSelectable={() => false}>
         <BooleanField source="draft" />
         <FunctionField
           render={(r: any) => {

packages/@liexp/ui/src/components/admin/events/titles/EventTitle.tsx

@@ -1,7 +1,7 @@
 import { http } from "@liexp/shared/lib/io";
 import * as React from "react";
 import { type FieldProps, useRecordContext } from "../../react-admin";
-import { BookTitle } from './BookTitle';
+import { BookTitle } from "./BookTitle";
 import { DeathEventTitle } from "./DeathEventTitle";
 import { DocumentaryReleaseTitle } from "./DocumentaryReleaseTitle";
 import { PatentEventTitle } from "./PatentEventTitle";

packages/@liexp/ui/src/components/admin/links/LinkArrayInput.tsx

@@ -13,7 +13,7 @@ import ReferenceArrayLinkInput from "./ReferenceArrayLinkInput";
 
 export const LinkArrayInput: React.FC<
   { source: string } & Omit<ArrayInputProps, "children">
-> = ({ source, ...props }) => {
+> = ({ source, defaultValue, ...props }) => {
   return (
     <ArrayInput {...props} source={source}>
       <SimpleFormIterator fullWidth>
@@ -36,7 +36,7 @@ export const LinkArrayInput: React.FC<
             }
             return (
               <Box width="100%">
-                <ReferenceArrayLinkInput source={getSrc("ids")} />
+                <ReferenceArrayLinkInput source={getSrc("ids")} defaultValue={defaultValue} />
               </Box>
             );
           }}

packages/@liexp/ui/src/components/admin/links/LinkEdit.tsx

@@ -87,12 +87,15 @@ export const LinkEdit: React.FC = () => {
           </Grid>
         </FormTab>
         <FormTab label="Events">
-          <CreateEventFromLinkButton />
-          <ReferenceArrayEventInput source="newEvents" defaultValue={[]} />
-          <ReferenceManyEventField
-            target="links[]"
-            filter={{ withDrafts: true }}
-          />
+          <Stack direction={"column"} spacing={2}>
+            <ReferenceArrayEventInput source="events" target="ids" />
+            <CreateEventFromLinkButton />
+            <ReferenceArrayEventInput source="newEvents" defaultValue={[]} />
+            <ReferenceManyEventField
+              target="links[]"
+              filter={{ withDrafts: true }}
+            />
+          </Stack>
         </FormTab>
         <FormTab label="Event Suggestions">
           <ReferenceManyField

packages/@liexp/ui/src/components/admin/media/MediaList.tsx

@@ -24,7 +24,12 @@ const RESOURCE = "media";
 
 const mediaFilters = [
   <TextInput key="description" source="description" alwaysOn size="small" />,
-  <BooleanInput key="emptyThumbnail" source="emptyThumbnail" alwaysOn size="small" />,
+  <BooleanInput
+    key="emptyThumbnail"
+    source="emptyThumbnail"
+    alwaysOn
+    size="small"
+  />,
   <BooleanInput key="emptyEvents" source="emptyEvents" alwaysOn size="small" />,
   <BooleanInput key="emptyLinks" source="emptyLinks" alwaysOn size="small" />,
   <BooleanInput key="emptyAreas" source="emptyAreas" alwaysOn size="small" />,

packages/@liexp/ui/src/components/admin/previews/MediaPreview.tsx

@@ -5,10 +5,10 @@ import * as React from "react";
 import { LoadingIndicator, useEditContext } from "react-admin";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { ECOTheme } from "../../../theme";
+import MediaElement from '../../Media/MediaElement';
 import { HelmetProvider } from "../../SEO";
 import { ValidationErrorsLayout } from "../../ValidationErrorsLayout";
 import { ThemeProvider } from "../../mui";
-import { MediaSlider } from "../../sliders/MediaSlider";
 
 const MediaPreview: React.FC = () => {
   const { record } = useEditContext();
@@ -33,7 +33,7 @@ const MediaPreview: React.FC = () => {
       <HelmetProvider>
         <QueryClientProvider client={qc}>
           <ThemeProvider theme={ECOTheme}>
-            <MediaSlider data={[a]} />
+            <MediaElement media={a} style={{ padding: 20, maxHeight: 500 }} />
           </ThemeProvider>
         </QueryClientProvider>
       </HelmetProvider>

packages/@liexp/ui/src/components/admin/tabs/ReferenceLinkTab.tsx

@@ -9,17 +9,21 @@ import {
 } from "react-admin";
 import { Box } from "../../mui";
 import { LinkArrayInput } from "../links/LinkArrayInput";
+import ReferenceArrayLinkInput from "../links/ReferenceArrayLinkInput";
 import { MediaField } from "../media/MediaField";
 
 export const ReferenceLinkTab: React.FC<
   Omit<ReferenceFieldProps<RaRecord<string>>, "reference">
 > = (props) => {
+  const source = props.source ?? "links";
   const newLinksSource =
     props.source?.split(".").slice(0, -1).concat("newLinks").join(".") ??
     "newLinks";
 
   return (
     <Box width={"100%"}>
+      <ReferenceArrayLinkInput label="links" source={source} fullWidth={true} />
+
       <LinkArrayInput
         label="new links"
         source={newLinksSource}
@@ -28,7 +32,7 @@ export const ReferenceLinkTab: React.FC<
       />
 
       <ReferenceArrayField {...props} reference="links">
-        <Datagrid rowClick="edit">
+        <Datagrid rowClick="edit" isRowSelectable={() => false}>
           <TextField source="id" />
           <MediaField
             source="image.thumbnail"