feat(web): pr size labeler drawer

apps/web/src/app/automations/settings/components/header-automation/header-automation.tsx

@@ -1,59 +1,22 @@
-import { Group, Text, Title, Button, Anchor, Box } from "@mantine/core";
-import { PageTitle } from "../../../../../components/page-title";
-import { IconBook2 } from "@tabler/icons-react";
+import { Text, Divider, Stack } from "@mantine/core";
 import { ImageDemo } from "../image-demo";
-import { ReactNode } from "react";
+import { SectionBenefits } from "../section-benefits/section-benefits";
+import { AutomationCard } from "../../../use-automation-cards";
 
 interface HeaderAutomationProps {
-  icon: string;
-  title: string;
-  docsUrl: string;
-  demoUrl: string;
-  description: string;
-  demoImgHeight?: number;
-  benefits: ReactNode;
+  automation: AutomationCard;
 }
 
-export const HeaderAutomation = ({
-  icon,
-  title,
-  docsUrl,
-  demoUrl,
-  description,
-  demoImgHeight,
-  benefits,
-}: HeaderAutomationProps) => {
+export const HeaderAutomation = ({ automation }: HeaderAutomationProps) => {
   return (
     <>
-      <ImageDemo title={title} src={demoUrl} height={demoImgHeight} />
+      <Stack p="md">
+        <ImageDemo title={automation.title} src={automation.demoUrl} />
 
-      <Box mt="xl" bg="dark.8">
-        <PageTitle
-          title={
-            <Group gap="xs">
-              <Text fz={32}>{icon}</Text>
-              <Title mb={0} order={2}>
-                {title}
-              </Title>
-            </Group>
-          }
-        >
-          {docsUrl && (
-            <Anchor underline="never" target="_blank" href={docsUrl}>
-              <Button
-                variant="subtle"
-                color="dark.1"
-                leftSection={<IconBook2 stroke={1.5} size={20} />}
-              >
-                Docs
-              </Button>
-            </Anchor>
-          )}
-        </PageTitle>
-
-        <Text mt="md">{description}</Text>
-        <Box mt="md">{benefits}</Box>
-      </Box>
+        <Text>{automation.description}</Text>
+        <SectionBenefits benefits={automation.benefits} />
+      </Stack>
+      <Divider my="md" />
     </>
   );
 };

apps/web/src/app/automations/settings/components/image-demo/image-demo.tsx

@@ -7,18 +7,19 @@ interface ImageDemoProps {
   height?: number;
 }
 
-export const ImageDemo = ({ height = 200, src, title }: ImageDemoProps) => {
+export const ImageDemo = ({ src, title }: ImageDemoProps) => {
   const [isOpen, modalControl] = useDisclosure(false);
 
   return (
     <>
       <Paper withBorder>
         <Image
           src={src}
-          height={height}
+          mah={200}
           width={702}
           onClick={() => modalControl.open()}
           style={{ cursor: "pointer", objectPosition: "top" }}
+          className="grow-on-hover"
           radius="md"
           fallbackSrc="https://placehold.co/500x100?text=img"
         />

apps/web/src/app/automations/settings/pr-size-labeler/components/form-pr-size-labeler-settings/form-pr-size-labeler-settings.tsx

@@ -1,84 +1,37 @@
-import { ColorInput, Group, Input } from "@mantine/core";
+import { ColorInput, Group, Input, Stack, Switch, Title } from "@mantine/core";
 import { BoxSetting } from "../../../components/box-setting";
-import { useForm } from "@mantine/form";
-import { AutomationType } from "@sweetr/graphql-types/api";
-import { useAutomationSettings } from "../../../use-automation";
-import { useDebouncedCallback } from "@mantine/hooks";
+import { UseFormReturnType } from "@mantine/form";
 import { colorPickerSwatches } from "../../../../../../providers/color.provider";
 import { capitalize } from "radash";
-
-type PrSizeLabelerSettings = {
-  labels?: {
-    huge?: {
-      label?: string;
-      color?: string;
-    };
-    large?: {
-      label?: string;
-      color?: string;
-    };
-    medium?: {
-      label?: string;
-      color?: string;
-    };
-    small?: {
-      label?: string;
-      color?: string;
-    };
-    tiny?: {
-      label?: string;
-      color?: string;
-    };
-  };
-};
-
-type FormValues = Required<PrSizeLabelerSettings>["labels"];
+import { FormPrSizeLabeler } from "../../types";
 
 interface FormPrSizeLabelerSettingsProps {
-  settings: PrSizeLabelerSettings;
+  form: UseFormReturnType<FormPrSizeLabeler>;
 }
 
 export const FormPrSizeLabelerSettings = ({
-  settings,
+  form,
 }: FormPrSizeLabelerSettingsProps) => {
-  const { mutate } = useAutomationSettings(AutomationType.PR_SIZE_LABELER);
-
-  const onValuesChange = useDebouncedCallback((values) => {
-    mutate({ settings: { labels: values } });
-  }, 500);
-
-  const initialValues = {
-    tiny: {
-      label: settings.labels?.tiny?.label || "tiny",
-      color: settings.labels?.tiny?.color || "#69db7c",
-    },
-    small: {
-      label: settings.labels?.small?.label || "small",
-      color: settings.labels?.small?.color || "#69db7c",
-    },
-    medium: {
-      label: settings.labels?.medium?.label || "medium",
-      color: settings.labels?.medium?.color || "#a6a7ab",
-    },
-    large: {
-      label: settings.labels?.large?.label || "large",
-      color: settings.labels?.large?.color || "#ff8787",
-    },
-    huge: {
-      label: settings.labels?.huge?.label || "huge",
-      color: settings.labels?.huge?.color || "#ff8787",
-    },
-  };
-
-  const form = useForm<FormValues>({
-    initialValues,
-    onValuesChange,
-  });
-
   return (
-    <>
-      {(Object.keys(initialValues) as Array<keyof typeof initialValues>).map(
-        (size) => (
+    <Stack p="md">
+      <Title order={5}>Settings</Title>
+
+      <BoxSetting left="Enabled">
+        <Switch
+          size="lg"
+          color="green.7"
+          onLabel="ON"
+          offLabel="OFF"
+          {...form.getInputProps("enabled", { type: "checkbox" })}
+        />
+      </BoxSetting>
+
+      {form.values.enabled &&
+        (
+          Object.keys(form.values.settings) as Array<
+            keyof typeof form.values.settings
+          >
+        ).map((size) => (
           <BoxSetting
             key={size}
             left={capitalize(size)}
@@ -88,24 +41,21 @@ export const FormPrSizeLabelerSettings = ({
               <Input
                 maw={140}
                 placeholder={size}
-                value={form.values[size]?.label}
-                onChange={(e) =>
-                  form.setFieldValue(`${size}.label`, e.target.value)
-                }
+                {...form.getInputProps(`settings.${size}.label`)}
                 maxLength={100}
               ></Input>
               <ColorInput
                 placeholder="#F0F0F0"
+                error={false}
                 swatches={colorPickerSwatches}
                 swatchesPerRow={7}
-                {...form.getInputProps(`${size}.color`)}
+                {...form.getInputProps(`settings.${size}.color`)}
                 maw={120}
                 withEyeDropper={false}
               />
             </Group>
           </BoxSetting>
-        ),
-      )}
-    </>
+        ))}
+    </Stack>
   );
 };