chore: update prettier configuration for print width (#519)

* feat: update prettier configuration for print width

* chore: apply code formatting to entire repository

* fix: remove build files

* fix: format issue

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Thomas Camlong
2024-05-19 22:38:39 +02:00
committed by GitHub
parent 919161798e
commit f1b1ec59ec
234 changed files with 2444 additions and 5375 deletions

View File

@@ -2,12 +2,7 @@
import { useCallback, useMemo, useState } from "react";
import { ActionIcon, Affix, Card } from "@mantine/core";
import {
IconDimensions,
IconPencil,
IconToggleLeft,
IconToggleRight,
} from "@tabler/icons-react";
import { IconDimensions, IconPencil, IconToggleLeft, IconToggleRight } from "@tabler/icons-react";
import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
import { useModalAction } from "@homarr/modals";
@@ -34,19 +29,11 @@ interface WidgetPreviewPageContentProps {
}[];
}
export const WidgetPreviewPageContent = ({
kind,
integrationData,
}: WidgetPreviewPageContentProps) => {
export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPreviewPageContentProps) => {
const t = useScopedI18n("widgetPreview");
const { openModal: openWidgetEditModal } = useModalAction(WidgetEditModal);
const { openModal: openPreviewDimensionsModal } = useModalAction(
PreviewDimensionsModal,
);
const currentDefinition = useMemo(
() => widgetImports[kind].definition,
[kind],
);
const { openModal: openPreviewDimensionsModal } = useModalAction(PreviewDimensionsModal);
const currentDefinition = useMemo(() => widgetImports[kind].definition, [kind]);
const [editMode, setEditMode] = useState(false);
const [dimensions, setDimensions] = useState<Dimensions>({
width: 128,
@@ -70,9 +57,7 @@ export const WidgetPreviewPageContent = ({
integrationData: integrationData.filter(
(integration) =>
"supportedIntegrations" in currentDefinition &&
(currentDefinition.supportedIntegrations as string[]).some(
(kind) => kind === integration.kind,
),
(currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
),
integrationSupport: "supportedIntegrations" in currentDefinition,
});
@@ -96,19 +81,11 @@ export const WidgetPreviewPageContent = ({
return (
<>
<Card
withBorder
w={dimensions.width}
h={dimensions.height}
p={dimensions.height >= 96 ? undefined : 4}
>
<Card withBorder w={dimensions.width} h={dimensions.height} p={dimensions.height >= 96 ? undefined : 4}>
<Comp
options={state.options as never}
integrations={state.integrations.map(
(stateIntegration) =>
integrationData.find(
(integration) => integration.id === stateIntegration.id,
)!,
(stateIntegration) => integrationData.find((integration) => integration.id === stateIntegration.id)!,
)}
width={dimensions.width}
height={dimensions.height}
@@ -118,36 +95,17 @@ export const WidgetPreviewPageContent = ({
/>
</Card>
<Affix bottom={12} right={72}>
<ActionIcon
size={48}
variant="default"
radius="xl"
onClick={handleOpenEditWidgetModal}
>
<ActionIcon size={48} variant="default" radius="xl" onClick={handleOpenEditWidgetModal}>
<IconPencil size={24} />
</ActionIcon>
</Affix>
<Affix bottom={12} right={72 + 60}>
<ActionIcon
size={48}
variant="default"
radius="xl"
onClick={toggleEditMode}
>
{editMode ? (
<IconToggleLeft size={24} />
) : (
<IconToggleRight size={24} />
)}
<ActionIcon size={48} variant="default" radius="xl" onClick={toggleEditMode}>
{editMode ? <IconToggleLeft size={24} /> : <IconToggleRight size={24} />}
</ActionIcon>
</Affix>
<Affix bottom={12} right={72 + 120}>
<ActionIcon
size={48}
variant="default"
radius="xl"
onClick={openDimensionsModal}
>
<ActionIcon size={48} variant="default" radius="xl" onClick={openDimensionsModal}>
<IconDimensions size={24} />
</ActionIcon>
</Affix>

View File

@@ -11,48 +11,36 @@ interface InnerProps {
setDimensions: (dimensions: Dimensions) => void;
}
export const PreviewDimensionsModal = createModal<InnerProps>(
({ actions, innerProps }) => {
const t = useI18n();
const form = useForm({
initialValues: innerProps.dimensions,
});
export const PreviewDimensionsModal = createModal<InnerProps>(({ actions, innerProps }) => {
const t = useI18n();
const form = useForm({
initialValues: innerProps.dimensions,
});
const handleSubmit = (values: Dimensions) => {
innerProps.setDimensions(values);
actions.closeModal();
};
const handleSubmit = (values: Dimensions) => {
innerProps.setDimensions(values);
actions.closeModal();
};
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack>
<InputWrapper label={t("item.move.field.width.label")}>
<Slider
min={64}
max={1024}
step={64}
{...form.getInputProps("width")}
/>
</InputWrapper>
<InputWrapper label={t("item.move.field.height.label")}>
<Slider
min={64}
max={1024}
step={64}
{...form.getInputProps("height")}
/>
</InputWrapper>
<Group justify="end">
<Button variant="subtle" color="gray" onClick={actions.closeModal}>
{t("common.action.cancel")}
</Button>
<Button type="submit">{t("common.action.confirm")}</Button>
</Group>
</Stack>
</form>
);
},
).withOptions({
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack>
<InputWrapper label={t("item.move.field.width.label")}>
<Slider min={64} max={1024} step={64} {...form.getInputProps("width")} />
</InputWrapper>
<InputWrapper label={t("item.move.field.height.label")}>
<Slider min={64} max={1024} step={64} {...form.getInputProps("height")} />
</InputWrapper>
<Group justify="end">
<Button variant="subtle" color="gray" onClick={actions.closeModal}>
{t("common.action.cancel")}
</Button>
<Button type="submit">{t("common.action.confirm")}</Button>
</Group>
</Stack>
</form>
);
}).withOptions({
defaultTitle: (t) => t("widgetPreview.dimensions.title"),
});