fix(admin): resource edit forms layout with Grid

packages/@liexp/core/src/frontend/vite/config.ts

@@ -11,7 +11,7 @@
 import { type GetViteConfigParams } from "./type.js";
 
 // https://vitejs.dev/config/
 export const defineViteConfig = <A extends Record<string, any>>(
   config: GetViteConfigParams<A>,
 ): ((env: ConfigEnv) => UserConfig) => {
   return ({ mode: _mode }) => {
@@ -96,7 +96,13 @@
 
       resolve: {
         // preserveSymlinks: true,
-        dedupe: ["react", "react-dom"],
+        dedupe: [
+          "react",
+          "react-dom",
+          "@mui/material",
+          "@mui/icons-material",
+          "@mui/system",
+        ],
         extensions: [
           ".ts",
           ".cts",

packages/@liexp/ui/package.json

@@ -43,9 +43,9 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@liexp/core": "workspace:*",
     "@liexp/shared": "workspace:*",
-    "@mui/icons-material": "7.1.0",
+    "@mui/icons-material": "^7.1.0",
     "@mui/lab": "7.0.0-beta.12",
-    "@mui/material": "7.1.0",
+    "@mui/material": "^7.1.0",
     "@mui/system": "^7.1.0",
     "@mui/x-data-grid": "^8.3.0",
     "@react-spring/web": "^9.7.4",

packages/@liexp/ui/src/components/admin/Modal/ShareModalContent.tsx

@@ -106,6 +106,8 @@ export const ShareModalContent: React.FC<ShareModalContentProps> = ({
             <GroupList
               groups={(payload?.groups ?? []).map((g) => ({
                 ...g,
+                body: null,
+                excerpt: null,
                 selected: true,
               }))}
               onItemClick={() => {}}

packages/@liexp/ui/src/components/admin/SocialPost/SocialPostStatus.tsx

@@ -1,10 +1,11 @@
 import * as SocialPost from "@liexp/shared/lib/io/http/SocialPost.js";
 import * as React from "react";
 import { Box, Stack } from "../../mui/index.js";
-import { SelectInput } from "../react-admin.js";
+import { SelectInput, useRecordContext } from "../react-admin.js";
 import { PublishNowButton } from "./PublishNowButton.js";
 
 export const SocialPostStatus: React.FC = () => {
+  const record = useRecordContext();
   return (
     <Stack
       direction="row"
@@ -22,7 +23,9 @@ export const SocialPostStatus: React.FC = () => {
         }))}
       />
       <Box>
-        <PublishNowButton platforms={{ IG: true, TG: true }} />
+        <PublishNowButton
+          platforms={record?.platforms ?? { IG: false, TG: true }}
+        />
       </Box>
     </Stack>
   );

packages/@liexp/ui/src/components/admin/common/EditForm.tsx

@@ -35,62 +35,62 @@ export const EditForm: React.FC<React.PropsWithChildren<EditFormProps>> = ({
       actions={actions}
       transform={transform}
     >
-      <Grid container direction="column" width="100%">
-        <Grid size={12}>
-          <Grid container width={"100%"}>
-            <div>
-              <Grid
-                container
-                size={12}
-                direction="row"
-                justifyContent="space-between"
-              >
-                <Grid size={{ md: 6, lg: 6 }}>
-                  <Stack direction={"row"}>
-                    {resource && (
-                      <WebPreviewButton resource={resource} source="id" />
-                    )}
-                    <RestoreButton />
-                  </Stack>
-                </Grid>
-                <Grid size={{ md: 6, lg: 6 }}>
-                  <Stack alignItems={"flex-end"}>
-                    <Button
-                      label={`${showPreview ? "Hide" : "Show"} Preview`}
-                      onClick={() => {
-                        setShowPreview(!showPreview);
-                      }}
-                    />
-                  </Stack>
-                </Grid>
-              </Grid>
-            </div>
+      <div>
+        <Grid
+          container
+          width="100%"
+          justifyContent="space-between"
+          alignItems="start"
+          size={12}
+        >
+          <Grid size={6}>
+            <Stack direction={"row"}>
+              {resource && <WebPreviewButton resource={resource} source="id" />}
+              <RestoreButton />
+            </Stack>
           </Grid>
-        </Grid>
-        <Grid size={12}>
-          <Grid container width={"100%"}>
-            <div style={{ width: "100%" }}>
-              <Grid container width={"100%"} direction={"row"}>
-                <Grid
-                  size={{
-                    md: showPreview ? 6 : 12,
-                    lg: showPreview ? 8 : 12,
-                    xl: showPreview ? 8 : 12,
-                  }}
-                  style={{
-                    width: !showPreview ? "100%" : undefined,
-                  }}
-                >
-                  {children}
-                </Grid>
-                {showPreview && !!preview ? (
-                  <Grid size={{ md: 6, lg: 4 }}>{preview}</Grid>
-                ) : null}
-              </Grid>
-            </div>
+          <Grid size={6}>
+            <Stack alignItems={"flex-end"}>
+              <Button
+                label={`${showPreview ? "Hide" : "Show"} Preview`}
+                onClick={() => {
+                  if (preview) {
+                    setShowPreview(!showPreview);
+                  }
+                }}
+              />
+            </Stack>
           </Grid>
+          <Grid
+            size={{
+              md: showPreview ? 6 : 12,
+              lg: showPreview ? 6 : 12,
+              xl: showPreview ? 6 : 12,
+            }}
+          >
+            {children}
+          </Grid>
+          {showPreview ? (
+            <Grid
+              size={{
+                md: 6,
+                lg: 6,
+                xl: 6,
+              }}
+            >
+              <div
+                style={{
+                  overflow: "scroll",
+                  height: "100%",
+                  maxHeight: 800,
+                }}
+              >
+                {preview}
+              </div>
+            </Grid>
+          ) : null}
         </Grid>
-      </Grid>
+      </div>
     </Edit>
   );
 };

packages/@liexp/ui/src/components/admin/common/SocialPostButton.tsx

@@ -11,7 +11,7 @@ import {
   type Identifier,
 } from "react-admin";
 import { useConfiguration } from "../../../context/ConfigurationContext.js";
-import { Box, Button } from "../../mui/index.js";
+import { Button, Stack } from "../../mui/index.js";
 import { ShareModal, emptySharePayload } from "../Modal/ShareModal.js";
 
 interface OnLoadSharePayloadClickOpts {
@@ -42,7 +42,7 @@ export const SocialPostButton: React.FC<SocialPostButtonProps> = ({
   }>({ payload: emptySharePayload, multipleMedia: false, media: [] });
 
   return (
-    <Box style={{ display: "flex", marginRight: 10 }}>
+    <Stack spacing={2}>
       <Button
         color="secondary"
         variant="contained"
@@ -84,6 +84,6 @@ export const SocialPostButton: React.FC<SocialPostButtonProps> = ({
           }}
         />
       ) : null}
-    </Box>
+    </Stack>
   );
 };

packages/@liexp/ui/src/components/admin/common/inputs/ColorInput.tsx

@@ -4,13 +4,14 @@ import {
 } from "@liexp/shared/lib/utils/colors.js";
 import get from "lodash/get.js";
 import * as React from "react";
+import { useRecordContext, type TextInputProps, useInput } from "react-admin";
 import {
-  Button,
-  useRecordContext,
-  type TextInputProps,
-  useInput,
-} from "react-admin";
-import { Box, TextField, FormControl } from "../../../mui/index.js";
+  TextField,
+  FormControl,
+  Stack,
+  IconButton,
+  Icons,
+} from "../../../mui/index.js";
 
 export const ColorInput: React.FC<TextInputProps> = ({
   source,
@@ -25,24 +26,25 @@ export const ColorInput: React.FC<TextInputProps> = ({
 
   return (
     <FormControl>
-      <Box
-        display="flex"
+      <Stack
+        direction="row"
+        spacing={2}
+        alignItems={"center"}
+        justifyContent="center"
         style={{
-          alignItems: "center",
-          justifyContent: "center",
           border: `2px solid ${toColorHash(field.value)}`,
           padding: "10px 20px",
         }}
       >
-        <Button
+        <IconButton
           size="small"
-          label="random"
-          variant="contained"
           onClick={() => {
             const color = generateRandomColor();
             field.onChange({ target: { value: color } });
           }}
-        />
+        >
+          <Icons.Refresh style={{ stroke: toColorHash(field.value) }} />
+        </IconButton>
         <TextField
           size="small"
           label={props.label ?? "color"}
@@ -52,7 +54,7 @@ export const ColorInput: React.FC<TextInputProps> = ({
             field.onChange({ target: { value: e.target.value } });
           }}
         />
-      </Box>
+      </Stack>
     </FormControl>
   );
 };

packages/@liexp/ui/src/components/admin/common/inputs/EventTypeInput.tsx

@@ -142,6 +142,7 @@ export const EventTypeInput: React.FC<InputProps> = ({
         </Select>
         <Button
           label="Transform"
+          size="small"
           disabled={value === type}
           onClick={() => {
             void doTransform(record);

packages/@liexp/ui/src/components/admin/events/tabs/BookEditFormTab.tsx

@@ -4,14 +4,14 @@ import {
 } from "@liexp/shared/lib/io/http/Media/MediaType.js";
 import * as React from "react";
 import { TextInput } from "react-admin";
-import { Box, Grid, Stack } from "../../../mui/index.js";
+import { Grid, Stack } from "../../../mui/index.js";
 import ReferenceArrayBySubjectInput from "../../common/inputs/BySubject/ReferenceArrayBySubjectInput.js";
 import ReferenceBySubjectInput from "../../common/inputs/BySubject/ReferenceBySubjectInput.js";
 import ReferenceMediaInput from "../../media/input/ReferenceMediaInput.js";
 
 export const BookEditFormTab: React.FC = () => {
   return (
-    <Box>
+    <Stack direction="column" width="100%" spacing={2}>
       <TextInput source="payload.title" fullWidth />
       <ReferenceMediaInput
         source="payload.media.pdf"
@@ -31,6 +31,6 @@ export const BookEditFormTab: React.FC = () => {
           </Grid>
         </Grid>
       </Stack>
-    </Box>
+    </Stack>
   );
 };

packages/@liexp/ui/src/components/admin/events/tabs/DeathEventEditFormTab.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
-import { Box } from "../../../mui/index.js";
+import { Stack } from "../../../mui/index.js";
 import ReferenceActorInput from "../../actors/ReferenceActorInput.js";
 import ReferenceAreaInput from "../../areas/input/ReferenceAreaInput.js";
 
 export const DeathEventEditFormTab: React.FC = () => {
   return (
-    <Box>
+    <Stack direction="column">
       <ReferenceActorInput source="payload.victim" />
       <ReferenceAreaInput source="payload.location" />
-    </Box>
+    </Stack>
   );
 };

packages/@liexp/ui/src/components/admin/keywords/ImportKeywordButton.tsx

@@ -49,6 +49,7 @@ export const ImportKeywordButton: React.FC<{
     record && (
       <Button
         label={`Import from ${source}`}
+        variant="contained"
         onClick={() => {
           handleKeywordImport(record);
         }}

packages/@liexp/ui/src/components/admin/keywords/ReferenceArrayKeywordInput.tsx

@@ -8,13 +8,17 @@ import {
   type ReferenceInputProps,
 } from "react-admin";
 import { useDataProvider } from "../../../hooks/useDataProvider.js";
-import { Box, TextField } from "../../mui/index.js";
+import { Box, Stack, TextField } from "../../mui/index.js";
 import { ColorInput } from "../common/inputs/ColorInput.js";
 import { ImportKeywordButton } from "./ImportKeywordButton.js";
 
 const ReferenceArrayKeywordInput: React.FC<
-  Omit<ReferenceInputProps, "children"> & { source: string; showAdd: boolean }
-> = ({ showAdd, ...props }) => {
+  Omit<ReferenceInputProps, "children"> & {
+    source: string;
+    showAdd: boolean;
+    fullWidth?: boolean;
+  }
+> = ({ showAdd, fullWidth, ...props }) => {
   const refresh = useRefresh();
   const apiProvider = useDataProvider();
 
@@ -29,19 +33,25 @@ const ReferenceArrayKeywordInput: React.FC<
     });
   }, [tag, color]);
   return (
-    <Box>
-      <ReferenceArrayInput {...props} reference="keywords">
-        <AutocompleteArrayInput
-          size="small"
-          optionText="tag"
-          filterToQuery={(q) => ({ q })}
-        />
-      </ReferenceArrayInput>
-      {showAdd ? <ImportKeywordButton /> : null}
+    <Stack spacing={2}>
+      <Stack direction="row" spacing={2}>
+        <ReferenceArrayInput {...props} reference="keywords">
+          <AutocompleteArrayInput
+            size="small"
+            optionText="tag"
+            filterToQuery={(q) => ({ q })}
+            fullWidth={fullWidth}
+          />
+        </ReferenceArrayInput>
+        <Box>
+          <ImportKeywordButton />
+        </Box>
+      </Stack>
       {showAdd ? (
-        <Box style={{ display: "flex" }}>
+        <Stack spacing={2} direction="row" width="100%">
           <TextField
             value={tag}
+            placeholder="Insert new keyword"
             onChange={(e) => {
               setKeyword((k) => ({ ...k, tag: e.target.value }));
             }}
@@ -65,9 +75,9 @@ const ReferenceArrayKeywordInput: React.FC<
               doKeywordCreate();
             }}
           />
-        </Box>
+        </Stack>
       ) : null}
-    </Box>
+    </Stack>
   );
 };