chore: add and run prettier
This commit is contained in:
@@ -8,8 +8,8 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
@@ -19,38 +19,38 @@ module.exports = {
|
||||
commonjs: true,
|
||||
es6: true,
|
||||
},
|
||||
ignorePatterns: ['build/**/*', 'node_modules/**/*', 'public/**/*'],
|
||||
ignorePatterns: ["build/**/*", "node_modules/**/*", "public/**/*"],
|
||||
|
||||
// Base config
|
||||
extends: ['eslint:recommended'],
|
||||
extends: ["eslint:recommended"],
|
||||
|
||||
overrides: [
|
||||
// React
|
||||
{
|
||||
files: ['**/*.{js,jsx,ts,tsx}'],
|
||||
plugins: ['react', 'jsx-a11y'],
|
||||
files: ["**/*.{js,jsx,ts,tsx}"],
|
||||
plugins: ["react", "jsx-a11y"],
|
||||
rules: {
|
||||
'react/jsx-uses-vars': 'error',
|
||||
'react/jsx-uses-react': 'error',
|
||||
"react/jsx-uses-vars": "error",
|
||||
"react/jsx-uses-react": "error",
|
||||
},
|
||||
extends: [
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
'plugin:jsx-a11y/recommended',
|
||||
"plugin:react/recommended",
|
||||
"plugin:react/jsx-runtime",
|
||||
"plugin:react-hooks/recommended",
|
||||
"plugin:jsx-a11y/recommended",
|
||||
],
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect',
|
||||
version: "detect",
|
||||
},
|
||||
formComponents: ['Form'],
|
||||
formComponents: ["Form"],
|
||||
linkComponents: [
|
||||
{ name: 'Link', linkAttribute: 'to' },
|
||||
{ name: 'NavLink', linkAttribute: 'to' },
|
||||
{ name: "Link", linkAttribute: "to" },
|
||||
{ name: "NavLink", linkAttribute: "to" },
|
||||
],
|
||||
'import/resolver': {
|
||||
"import/resolver": {
|
||||
typescript: {
|
||||
project: './remix/tsconfig.json',
|
||||
project: "./remix/tsconfig.json",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -58,14 +58,14 @@ module.exports = {
|
||||
|
||||
// Typescript
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
plugins: ['@typescript-eslint', 'import'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
files: ["**/*.{ts,tsx}"],
|
||||
plugins: ["@typescript-eslint", "import"],
|
||||
parser: "@typescript-eslint/parser",
|
||||
settings: {
|
||||
'import/internal-regex': '^~/',
|
||||
'import/resolver': {
|
||||
"import/internal-regex": "^~/",
|
||||
"import/resolver": {
|
||||
node: {
|
||||
extensions: ['.ts', '.tsx'],
|
||||
extensions: [".ts", ".tsx"],
|
||||
},
|
||||
typescript: {
|
||||
alwaysTryTypes: true,
|
||||
@@ -73,18 +73,18 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
extends: [
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:import/recommended',
|
||||
'plugin:import/typescript',
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:import/recommended",
|
||||
"plugin:import/typescript",
|
||||
],
|
||||
},
|
||||
|
||||
// Node
|
||||
{
|
||||
files: ['.eslintrc.cjs'],
|
||||
files: [".eslintrc.cjs"],
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
11
remix/.prettierignore
Normal file
11
remix/.prettierignore
Normal file
@@ -0,0 +1,11 @@
|
||||
# Directories
|
||||
build
|
||||
public
|
||||
|
||||
# Files
|
||||
.eslintrc.cjs
|
||||
.prettierignore
|
||||
package.json
|
||||
package-lock.json
|
||||
prettier.config.cjs
|
||||
tsconfig.json
|
||||
@@ -4,22 +4,22 @@ import {
|
||||
Help,
|
||||
Line,
|
||||
TextInput,
|
||||
} from "@contentstack/venus-components";
|
||||
import { ChangeEvent, useState } from "react";
|
||||
import { ImageVaultDAMConfig } from "~/utils/imagevault";
|
||||
} from "@contentstack/venus-components"
|
||||
import { ChangeEvent, useState } from "react"
|
||||
import { ImageVaultDAMConfig } from "~/utils/imagevault"
|
||||
|
||||
import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types";
|
||||
import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types"
|
||||
|
||||
export type ConfigFormProps = {
|
||||
values: Partial<ImageVaultDAMConfig>;
|
||||
setInstallationData: (data: IInstallationData) => void;
|
||||
};
|
||||
values: Partial<ImageVaultDAMConfig>
|
||||
setInstallationData: (data: IInstallationData) => void
|
||||
}
|
||||
|
||||
export default function ConfigForm({
|
||||
values,
|
||||
setInstallationData,
|
||||
}: ConfigFormProps) {
|
||||
const [finalValues, setFinalValues] = useState(values);
|
||||
const [finalValues, setFinalValues] = useState(values)
|
||||
|
||||
return (
|
||||
<div style={{ display: "grid", gap: "18px", margin: "18px" }}>
|
||||
@@ -37,7 +37,7 @@ export default function ConfigForm({
|
||||
setFinalValues((prev) => ({
|
||||
...prev,
|
||||
baseUrl: evt.target.value,
|
||||
}));
|
||||
}))
|
||||
|
||||
setInstallationData({
|
||||
configuration: {
|
||||
@@ -45,7 +45,7 @@ export default function ConfigForm({
|
||||
baseUrl: evt.target.value,
|
||||
},
|
||||
serverConfiguration: {},
|
||||
});
|
||||
})
|
||||
}}
|
||||
required={true}
|
||||
willBlurOnEsc={true}
|
||||
@@ -76,7 +76,7 @@ export default function ConfigForm({
|
||||
setFinalValues((prev) => ({
|
||||
...prev,
|
||||
formatId: evt.target.value,
|
||||
}));
|
||||
}))
|
||||
|
||||
setInstallationData({
|
||||
configuration: {
|
||||
@@ -84,7 +84,7 @@ export default function ConfigForm({
|
||||
formatId: evt.target.value,
|
||||
},
|
||||
serverConfiguration: {},
|
||||
});
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
@@ -109,7 +109,7 @@ export default function ConfigForm({
|
||||
setFinalValues((prev) => ({
|
||||
...prev,
|
||||
imageVaultUrl: evt.target.value,
|
||||
}));
|
||||
}))
|
||||
|
||||
setInstallationData({
|
||||
configuration: {
|
||||
@@ -117,10 +117,10 @@ export default function ConfigForm({
|
||||
imageVaultUrl: evt.target.value,
|
||||
},
|
||||
serverConfiguration: {},
|
||||
});
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -8,5 +8,5 @@ export default function Disclaimer() {
|
||||
save the entry at least once with a title before choosing an image.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ModalBody, ModalHeader } from "@contentstack/venus-components";
|
||||
import { ModalBody, ModalHeader } from "@contentstack/venus-components"
|
||||
|
||||
export default function FullSizeImage({
|
||||
title,
|
||||
@@ -7,11 +7,11 @@ export default function FullSizeImage({
|
||||
alt,
|
||||
aspectRatio,
|
||||
}: {
|
||||
title: string;
|
||||
onClose: () => void;
|
||||
imageUrl: string;
|
||||
alt: string;
|
||||
aspectRatio: number;
|
||||
title: string
|
||||
onClose: () => void
|
||||
imageUrl: string
|
||||
alt: string
|
||||
aspectRatio: number
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
@@ -37,5 +37,5 @@ export default function FullSizeImage({
|
||||
/>
|
||||
</ModalBody>
|
||||
</>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, ChangeEvent } from "react";
|
||||
import { useState, useEffect, ChangeEvent } from "react"
|
||||
import {
|
||||
ModalFooter,
|
||||
ModalBody,
|
||||
@@ -8,59 +8,59 @@ import {
|
||||
Field as FieldComponent,
|
||||
FieldLabel,
|
||||
TextInput,
|
||||
} from "@contentstack/venus-components";
|
||||
} from "@contentstack/venus-components"
|
||||
|
||||
import type { InsertResponse } from "~/types/imagevault";
|
||||
import type { InsertResponse } from "~/types/imagevault"
|
||||
|
||||
type ImageEditModalProps = {
|
||||
fieldData: InsertResponse;
|
||||
setData: (data: InsertResponse) => void;
|
||||
closeModal: () => void;
|
||||
};
|
||||
fieldData: InsertResponse
|
||||
setData: (data: InsertResponse) => void
|
||||
closeModal: () => void
|
||||
}
|
||||
|
||||
export default function ImageEditModal({
|
||||
fieldData,
|
||||
closeModal,
|
||||
setData,
|
||||
}: ImageEditModalProps) {
|
||||
const [altText, setAltText] = useState("");
|
||||
const [caption, setCaption] = useState("");
|
||||
const [altText, setAltText] = useState("")
|
||||
const [caption, setCaption] = useState("")
|
||||
|
||||
const assetUrl = fieldData.MediaConversions[0].Url;
|
||||
const assetUrl = fieldData.MediaConversions[0].Url
|
||||
|
||||
useEffect(() => {
|
||||
if (fieldData.Metadata && fieldData.Metadata.length) {
|
||||
const altText = fieldData.Metadata.find((meta) =>
|
||||
meta.Name.includes("AltText_")
|
||||
)?.Value;
|
||||
)?.Value
|
||||
|
||||
const caption = fieldData.Metadata.find((meta) =>
|
||||
meta.Name.includes("Title_")
|
||||
)?.Value;
|
||||
)?.Value
|
||||
|
||||
setAltText(altText ?? "");
|
||||
setCaption(caption ?? "");
|
||||
setAltText(altText ?? "")
|
||||
setCaption(caption ?? "")
|
||||
}
|
||||
}, [fieldData.Metadata]);
|
||||
}, [fieldData.Metadata])
|
||||
|
||||
function handleSave() {
|
||||
const metaData = fieldData.Metadata ?? [];
|
||||
const metaData = fieldData.Metadata ?? []
|
||||
|
||||
const newMetadata = metaData.map((meta) => {
|
||||
if (meta.Name.includes("AltText_")) {
|
||||
return { ...meta, Value: altText };
|
||||
return { ...meta, Value: altText }
|
||||
}
|
||||
if (meta.Name.includes("Title_")) {
|
||||
return { ...meta, Value: caption };
|
||||
return { ...meta, Value: caption }
|
||||
}
|
||||
return meta;
|
||||
});
|
||||
return meta
|
||||
})
|
||||
|
||||
setData({
|
||||
...fieldData,
|
||||
Metadata: newMetadata,
|
||||
});
|
||||
closeModal();
|
||||
})
|
||||
closeModal()
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -120,5 +120,5 @@ export default function ImageEditModal({
|
||||
</ButtonGroup>
|
||||
</ModalFooter>
|
||||
</>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { flushSync } from "react-dom";
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import { flushSync } from "react-dom"
|
||||
|
||||
import {
|
||||
AssetCardVertical,
|
||||
Button,
|
||||
FieldLabel,
|
||||
cbModal,
|
||||
} from "@contentstack/venus-components";
|
||||
import ImageEditModal from "./ImageEditModal";
|
||||
import FullSizeImage from "./FullSizeImage";
|
||||
import { isInsertResponse, openImageVault } from "~/utils/imagevault";
|
||||
} from "@contentstack/venus-components"
|
||||
import ImageEditModal from "./ImageEditModal"
|
||||
import FullSizeImage from "./FullSizeImage"
|
||||
import { isInsertResponse, openImageVault } from "~/utils/imagevault"
|
||||
|
||||
import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal";
|
||||
import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation";
|
||||
import type { InsertResponse } from "~/types/imagevault";
|
||||
import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal"
|
||||
import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
|
||||
import type { InsertResponse } from "~/types/imagevault"
|
||||
import type {
|
||||
EntryDataPublishDetails,
|
||||
ImageVaultDAMConfig,
|
||||
} from "~/utils/imagevault";
|
||||
import type { Lang } from "~/types/lang";
|
||||
} from "~/utils/imagevault"
|
||||
import type { Lang } from "~/types/lang"
|
||||
|
||||
export type ImageVaultDAMProps = {
|
||||
sdk: UiLocation;
|
||||
config: ImageVaultDAMConfig;
|
||||
initialData: InsertResponse | null;
|
||||
};
|
||||
sdk: UiLocation
|
||||
config: ImageVaultDAMConfig
|
||||
initialData: InsertResponse | null
|
||||
}
|
||||
|
||||
type DAMButtonProps = {
|
||||
onClick: () => void;
|
||||
};
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
function DAMButton({ onClick }: DAMButtonProps) {
|
||||
return (
|
||||
@@ -45,27 +45,27 @@ function DAMButton({ onClick }: DAMButtonProps) {
|
||||
Choose a file
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
type MediaProps = {
|
||||
media: InsertResponse;
|
||||
onDelete: () => void;
|
||||
onEdit: () => void;
|
||||
};
|
||||
media: InsertResponse
|
||||
onDelete: () => void
|
||||
onEdit: () => void
|
||||
}
|
||||
|
||||
function Media({ media, onDelete, onEdit }: MediaProps) {
|
||||
// MediaConversions is an array but will only contain one object
|
||||
const { Url, Height, FormatHeight, Width, FormatWidth, Name, AspectRatio } =
|
||||
media.MediaConversions[0];
|
||||
media.MediaConversions[0]
|
||||
|
||||
const assetUrl = Url;
|
||||
const title = media.Name;
|
||||
const width = FormatWidth || Width;
|
||||
const height = FormatHeight || Height;
|
||||
const assetUrl = Url
|
||||
const title = media.Name
|
||||
const width = FormatWidth || Width
|
||||
const height = FormatHeight || Height
|
||||
const alt =
|
||||
media.Metadata?.find((meta) => meta.Name.includes("AltText_"))?.Value ||
|
||||
Name;
|
||||
Name
|
||||
|
||||
return (
|
||||
<div key={Url} style={{ fontFamily: "Inter" }}>
|
||||
@@ -91,7 +91,7 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
|
||||
title={Name}
|
||||
aspectRatio={AspectRatio}
|
||||
/>
|
||||
);
|
||||
)
|
||||
},
|
||||
modalProps: {
|
||||
size: "max",
|
||||
@@ -106,12 +106,12 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
|
||||
overlay: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
cbModal(cbModalProps);
|
||||
}
|
||||
cbModal(cbModalProps)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default function ImageVaultDAM({
|
||||
@@ -119,42 +119,42 @@ export default function ImageVaultDAM({
|
||||
config,
|
||||
initialData,
|
||||
}: ImageVaultDAMProps) {
|
||||
const [media, setMedia] = useState<InsertResponse | null>(initialData);
|
||||
const [media, setMedia] = useState<InsertResponse | null>(initialData)
|
||||
|
||||
const field = sdk.location.CustomField?.field;
|
||||
const frame = sdk.location.CustomField?.frame;
|
||||
const entry = sdk.location.CustomField?.entry;
|
||||
const stack = sdk.location.CustomField?.stack;
|
||||
const field = sdk.location.CustomField?.field
|
||||
const frame = sdk.location.CustomField?.frame
|
||||
const entry = sdk.location.CustomField?.entry
|
||||
const stack = sdk.location.CustomField?.stack
|
||||
|
||||
const updateFrameHeight = useCallback(() => {
|
||||
if (frame?.updateHeight) {
|
||||
// We need to recalculate the height of the iframe when an image is added.
|
||||
// Cannot use flushSync inside useEffect.
|
||||
setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0);
|
||||
setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0)
|
||||
}
|
||||
}, [frame]);
|
||||
}, [frame])
|
||||
|
||||
const handleMedia = useCallback(
|
||||
(result?: InsertResponse) => {
|
||||
if (field && result) {
|
||||
flushSync(() => {
|
||||
setMedia(result);
|
||||
field.setData(result);
|
||||
document.body.style.overflow = "hidden";
|
||||
});
|
||||
setMedia(result)
|
||||
field.setData(result)
|
||||
document.body.style.overflow = "hidden"
|
||||
})
|
||||
}
|
||||
|
||||
updateFrameHeight();
|
||||
updateFrameHeight()
|
||||
},
|
||||
[field, updateFrameHeight]
|
||||
);
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
updateFrameHeight();
|
||||
}, [updateFrameHeight]);
|
||||
updateFrameHeight()
|
||||
}, [updateFrameHeight])
|
||||
|
||||
const handleEdit = useCallback(() => {
|
||||
const fieldData = field?.getData() as InsertResponse;
|
||||
const fieldData = field?.getData() as InsertResponse
|
||||
if (isInsertResponse(fieldData)) {
|
||||
cbModal({
|
||||
// @ts-expect-error: Component is badly typed
|
||||
@@ -168,12 +168,12 @@ export default function ImageVaultDAM({
|
||||
modalProps: {
|
||||
size: "max",
|
||||
},
|
||||
});
|
||||
})
|
||||
}
|
||||
}, [field, handleMedia]);
|
||||
}, [field, handleMedia])
|
||||
|
||||
if (!field || !frame || !entry || !stack) {
|
||||
return <p>Initializing custom field...</p>;
|
||||
return <p>Initializing custom field...</p>
|
||||
}
|
||||
|
||||
const entryData: EntryDataPublishDetails = {
|
||||
@@ -186,7 +186,7 @@ export default function ImageVaultDAM({
|
||||
entry.getField("title").getData().toString() ||
|
||||
`Untitled (${entry.content_type.uid})`,
|
||||
uid: entry._data.uid,
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -200,8 +200,8 @@ export default function ImageVaultDAM({
|
||||
<Media
|
||||
media={media}
|
||||
onDelete={() => {
|
||||
setMedia(null);
|
||||
handleMedia();
|
||||
setMedia(null)
|
||||
handleMedia()
|
||||
}}
|
||||
onEdit={handleEdit}
|
||||
/>
|
||||
@@ -212,10 +212,10 @@ export default function ImageVaultDAM({
|
||||
config,
|
||||
entryData,
|
||||
onSuccess: handleMedia,
|
||||
});
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -7,5 +7,5 @@ export default function InvalidConfig() {
|
||||
to run correctly.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { RemixBrowser } from "@remix-run/react";
|
||||
import { startTransition, StrictMode } from "react";
|
||||
import { hydrateRoot } from "react-dom/client";
|
||||
import { RemixBrowser } from "@remix-run/react"
|
||||
import { startTransition, StrictMode } from "react"
|
||||
import { hydrateRoot } from "react-dom/client"
|
||||
|
||||
startTransition(() => {
|
||||
hydrateRoot(
|
||||
@@ -8,5 +8,5 @@ startTransition(() => {
|
||||
<StrictMode>
|
||||
<RemixBrowser />
|
||||
</StrictMode>
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { EntryContext } from "@remix-run/node";
|
||||
import { RemixServer } from "@remix-run/react";
|
||||
import { renderToString } from "react-dom/server";
|
||||
import type { EntryContext } from "@remix-run/node"
|
||||
import { RemixServer } from "@remix-run/react"
|
||||
import { renderToString } from "react-dom/server"
|
||||
|
||||
export default function handleRequest(
|
||||
request: Request,
|
||||
@@ -10,10 +10,10 @@ export default function handleRequest(
|
||||
) {
|
||||
let html = renderToString(
|
||||
<RemixServer context={remixContext} url={request.url} />
|
||||
);
|
||||
html = "<!DOCTYPE html>\n" + html;
|
||||
)
|
||||
html = "<!DOCTYPE html>\n" + html
|
||||
return new Response(html, {
|
||||
headers: { "Content-Type": "text/html" },
|
||||
status: responseStatusCode,
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation";
|
||||
import { useEffect, useState } from "react";
|
||||
import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
export class SDKLoadingError extends Error {}
|
||||
|
||||
export default function useApp() {
|
||||
const [, setError] = useState();
|
||||
const [sdk, setSdk] = useState<UiLocation>();
|
||||
const [config, setConfig] = useState<Record<string, string>>();
|
||||
const [, setError] = useState()
|
||||
const [sdk, setSdk] = useState<UiLocation>()
|
||||
const [config, setConfig] = useState<Record<string, string>>()
|
||||
|
||||
useEffect(() => {
|
||||
async function init() {
|
||||
try {
|
||||
const ContentstackAppSDK = (await import("@contentstack/app-sdk"))
|
||||
.default;
|
||||
const initSdk = await ContentstackAppSDK.init();
|
||||
setSdk(initSdk);
|
||||
.default
|
||||
const initSdk = await ContentstackAppSDK.init()
|
||||
setSdk(initSdk)
|
||||
|
||||
const config = await initSdk.getConfig();
|
||||
setConfig(config);
|
||||
const config = await initSdk.getConfig()
|
||||
setConfig(config)
|
||||
|
||||
const iframeWrapperRef = document.getElementById("field");
|
||||
window.iframeRef = iframeWrapperRef;
|
||||
window.postRobot = initSdk.postRobot;
|
||||
const iframeWrapperRef = document.getElementById("field")
|
||||
window.iframeRef = iframeWrapperRef
|
||||
window.postRobot = initSdk.postRobot
|
||||
} catch (e) {
|
||||
let err: Error;
|
||||
let err: Error
|
||||
if (e instanceof Error) {
|
||||
err = new SDKLoadingError(e.message);
|
||||
err = new SDKLoadingError(e.message)
|
||||
}
|
||||
|
||||
// Error boundaries do not support async functions. Workaround:
|
||||
// https://github.com/vercel/next.js/discussions/50564#discussioncomment-6063866
|
||||
setError(() => {
|
||||
throw err;
|
||||
});
|
||||
throw err
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
}, [setSdk, setConfig]);
|
||||
init()
|
||||
}, [setSdk, setConfig])
|
||||
|
||||
return {
|
||||
sdk,
|
||||
config,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@ import {
|
||||
Scripts,
|
||||
ScrollRestoration,
|
||||
useRouteError,
|
||||
} from '@remix-run/react';
|
||||
import { SDKLoadingError } from './hooks/useApp';
|
||||
} from "@remix-run/react"
|
||||
import { SDKLoadingError } from "./hooks/useApp"
|
||||
|
||||
export function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
@@ -31,20 +31,20 @@ export function Layout({ children }: { children: React.ReactNode }) {
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return <Outlet />;
|
||||
return <Outlet />
|
||||
}
|
||||
|
||||
export function HydrateFallback() {
|
||||
return <p>Loading...</p>;
|
||||
return <p>Loading...</p>
|
||||
}
|
||||
|
||||
export function ErrorBoundary() {
|
||||
const error = useRouteError();
|
||||
console.error(error);
|
||||
const error = useRouteError()
|
||||
console.error(error)
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
@@ -68,5 +68,5 @@ export function ErrorBoundary() {
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import type { MetaFunction } from '@remix-run/node';
|
||||
import type { MetaFunction } from "@remix-run/node"
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: 'DAM: ImageVault integration' },
|
||||
{ title: "DAM: ImageVault integration" },
|
||||
{
|
||||
name: 'description',
|
||||
content: 'Integration of ImageVault as a DAM for Contentstack',
|
||||
name: "description",
|
||||
content: "Integration of ImageVault as a DAM for Contentstack",
|
||||
},
|
||||
];
|
||||
};
|
||||
]
|
||||
}
|
||||
|
||||
export default function Index() {
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { Suspense, lazy } from "react";
|
||||
import useApp from "~/hooks/useApp";
|
||||
import { Suspense, lazy } from "react"
|
||||
import useApp from "~/hooks/useApp"
|
||||
|
||||
const ConfigForm = lazy(() => import("~/components/ConfigForm"));
|
||||
const ConfigForm = lazy(() => import("~/components/ConfigForm"))
|
||||
|
||||
export default function ConfigPage() {
|
||||
const { sdk, config } = useApp();
|
||||
const { sdk, config } = useApp()
|
||||
|
||||
const appConfigWidget = sdk?.location.AppConfigWidget;
|
||||
const appConfigWidget = sdk?.location.AppConfigWidget
|
||||
|
||||
const setInstallationData = appConfigWidget?.installation.setInstallationData;
|
||||
const setInstallationData = appConfigWidget?.installation.setInstallationData
|
||||
|
||||
if (!config) {
|
||||
return (
|
||||
@@ -17,7 +17,7 @@ export default function ConfigPage() {
|
||||
Could not fetch the current configuration, please try again later!
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
if (!setInstallationData) {
|
||||
@@ -27,12 +27,12 @@ export default function ConfigPage() {
|
||||
THe configuration cannot be updated right now, please try again later!
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Suspense fallback={<p>Loading config form...</p>}>
|
||||
<ConfigForm values={config} setInstallationData={setInstallationData} />
|
||||
</Suspense>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
import { Suspense, lazy, useEffect, useState } from "react";
|
||||
import { useScript } from "usehooks-ts";
|
||||
import useApp from "~/hooks/useApp";
|
||||
import { Suspense, lazy, useEffect, useState } from "react"
|
||||
import { useScript } from "usehooks-ts"
|
||||
import useApp from "~/hooks/useApp"
|
||||
|
||||
import Disclaimer from "~/components/Disclaimer";
|
||||
import InvalidConfig from "~/components/InvalidConfig";
|
||||
import Disclaimer from "~/components/Disclaimer"
|
||||
import InvalidConfig from "~/components/InvalidConfig"
|
||||
|
||||
import { isImageVaultDAMConfig } from "~/utils/imagevault";
|
||||
import type { InsertResponse } from "~/types/imagevault";
|
||||
import { isImageVaultDAMConfig } from "~/utils/imagevault"
|
||||
import type { InsertResponse } from "~/types/imagevault"
|
||||
|
||||
const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"));
|
||||
const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"))
|
||||
|
||||
export default function Field() {
|
||||
const { sdk, config } = useApp();
|
||||
const { sdk, config } = useApp()
|
||||
const ivStatus = useScript(
|
||||
"/scripts/imagevault-insert-media/insertmediawindow.min.js"
|
||||
);
|
||||
)
|
||||
|
||||
const [showDisclaimer, setShowDisclaimer] = useState(false);
|
||||
const [fieldData, setFieldData] = useState<InsertResponse>();
|
||||
const [showDisclaimer, setShowDisclaimer] = useState(false)
|
||||
const [fieldData, setFieldData] = useState<InsertResponse>()
|
||||
|
||||
const entry = sdk?.location.CustomField?.entry;
|
||||
const field = sdk?.location.CustomField?.field;
|
||||
const entry = sdk?.location.CustomField?.entry
|
||||
const field = sdk?.location.CustomField?.field
|
||||
|
||||
useEffect(() => {
|
||||
// If we can get field data from the SDK that means the entry has been
|
||||
@@ -29,30 +29,30 @@ export default function Field() {
|
||||
// cannot be referred to by ImageVault. Entry title is also required by us.
|
||||
try {
|
||||
if (field && entry) {
|
||||
const data = field.getData();
|
||||
const title = entry.getField("title").getData().toString();
|
||||
const data = field.getData()
|
||||
const title = entry.getField("title").getData().toString()
|
||||
if (data && title) {
|
||||
setFieldData(data as InsertResponse);
|
||||
setFieldData(data as InsertResponse)
|
||||
} else {
|
||||
throw new Error("Missing data or title for entry");
|
||||
throw new Error("Missing data or title for entry")
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setShowDisclaimer(true);
|
||||
setShowDisclaimer(true)
|
||||
}
|
||||
}, [entry, field]);
|
||||
}, [entry, field])
|
||||
|
||||
if (showDisclaimer) {
|
||||
return <Disclaimer />;
|
||||
return <Disclaimer />
|
||||
}
|
||||
|
||||
const loaded = !!(fieldData && ivStatus === "ready" && sdk && config);
|
||||
const loaded = !!(fieldData && ivStatus === "ready" && sdk && config)
|
||||
|
||||
const initialData =
|
||||
fieldData && Object.keys(fieldData).length > 0 ? fieldData : null;
|
||||
fieldData && Object.keys(fieldData).length > 0 ? fieldData : null
|
||||
|
||||
if (!loaded) {
|
||||
return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>;
|
||||
return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -65,5 +65,5 @@ export default function Field() {
|
||||
<InvalidConfig />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
8
remix/prettier.config.cjs
Normal file
8
remix/prettier.config.cjs
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
semi: false,
|
||||
trailingComma: "es5",
|
||||
singleQuote: false,
|
||||
printWidth: 80,
|
||||
tabWidth: 2,
|
||||
endOfLine: "lf",
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { vitePlugin as remix } from '@remix-run/dev';
|
||||
import { defineConfig } from 'vite';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
import { vitePlugin as remix } from "@remix-run/dev"
|
||||
import { defineConfig } from "vite"
|
||||
import tsconfigPaths from "vite-tsconfig-paths"
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
@@ -12,4 +12,4 @@ export default defineConfig({
|
||||
build: {
|
||||
emptyOutDir: true,
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user