chore: add and run prettier

This commit is contained in:
Michael Zetterberg
2024-03-26 13:02:26 +01:00
parent e9349992f8
commit 083c57d0ca
27 changed files with 430 additions and 379 deletions

View File

@@ -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
View File

@@ -0,0 +1,11 @@
# Directories
build
public
# Files
.eslintrc.cjs
.prettierignore
package.json
package-lock.json
prettier.config.cjs
tsconfig.json

View File

@@ -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>
);
)
}

View File

@@ -8,5 +8,5 @@ export default function Disclaimer() {
save the entry at least once with a title before choosing an image.
</p>
</div>
);
)
}

View File

@@ -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>
</>
);
)
}

View File

@@ -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>
</>
);
)
}

View File

@@ -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>
);
)
}

View File

@@ -7,5 +7,5 @@ export default function InvalidConfig() {
to run correctly.
</p>
</div>
);
)
}

View File

@@ -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>
);
});
)
})

View File

@@ -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,
});
})
}

View File

@@ -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,
};
}
}

View File

@@ -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>
);
)
}

View File

@@ -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
}

View File

@@ -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>
);
)
}

View File

@@ -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>
);
)
}

View File

@@ -0,0 +1,8 @@
module.exports = {
semi: false,
trailingComma: "es5",
singleQuote: false,
printWidth: 80,
tabWidth: 2,
endOfLine: "lf",
}

View File

@@ -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,
},
});
})